/* Site additions on top of the original Elementor styles. */

/*
 * Region detail pages (Portfolio items shown as home page regions): the photo fills the whole left
 * half of the screen, edge to edge, with the text in the right half; stacked on phones.
 */
.cms-region-page .elementor > .e-con.e-parent:first-child {
  --min-height: calc(100vh - 76px);
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  padding: 0;
}

.cms-region-page .elementor > .e-con.e-parent:first-child > .e-con-inner {
  max-width: none;
  width: 100%;
  padding: 0;
  align-items: stretch;
}

.cms-region-page .elementor > .e-con.e-parent:first-child .e-con-inner > .e-con.e-child:first-child {
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  position: relative;
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
  padding: 0;
}

.cms-region-page .elementor > .e-con.e-parent:first-child .elementor-widget-image,
.cms-region-page .elementor > .e-con.e-parent:first-child .elementor-widget-image .elementor-widget-container {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
}

.cms-region-page .elementor > .e-con.e-parent:first-child .elementor-widget-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}

.cms-region-page .elementor > .e-con.e-parent:first-child .e-con-inner > .e-con.e-child:nth-child(2) {
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
  align-self: center;
  padding: 80px max(20px, calc((100vw - 1140px) / 2)) 80px 72px;
}

@media (max-width: 1024px) {
  .cms-region-page .elementor > .e-con.e-parent:first-child {
    --min-height: 70vh;
  }

  .cms-region-page .elementor > .e-con.e-parent:first-child .e-con-inner > .e-con.e-child:nth-child(2) {
    padding: 60px 30px 60px 40px;
  }
}

@media (max-width: 767px) {
  .cms-region-page .elementor > .e-con.e-parent:first-child {
    --min-height: 0;
  }

  .cms-region-page .elementor > .e-con.e-parent:first-child > .e-con-inner {
    flex-direction: column;
  }

  .cms-region-page .elementor > .e-con.e-parent:first-child .e-con-inner > .e-con.e-child:first-child,
  .cms-region-page .elementor > .e-con.e-parent:first-child .e-con-inner > .e-con.e-child:nth-child(2) {
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
  }

  .cms-region-page .elementor > .e-con.e-parent:first-child .e-con-inner > .e-con.e-child:first-child {
    height: 65vh;
    min-height: 320px;
  }

  .cms-region-page .elementor > .e-con.e-parent:first-child .e-con-inner > .e-con.e-child:nth-child(2) {
    padding: 40px 20px 60px;
  }
}

/*
 * Header dropdowns: clean panels (keeping the theme's gradient top line, drawn by its background),
 * full-width hover rows, and sub-services opening beside the hovered item (the theme dropped them
 * 80px below the list and left their arrows floating outside).
 */
.geekfolio-nav.animated-text .menu-wrapper .navigation.home-nav li ul.sub-menu {
  min-width: 240px;
  width: max-content;
  padding: 8px 0;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 14px 34px rgba(27, 33, 79, 0.14);
}

.geekfolio-nav.animated-text .menu-wrapper .navigation.home-nav li ul.sub-menu li {
  display: block;
  width: auto;
  padding: 0;
}

.geekfolio-nav.animated-text .menu-wrapper .navigation.home-nav li ul.sub-menu li a {
  position: relative;
  padding: 6px 44px 6px 22px;
  color: #1d1d1d;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 1px;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.geekfolio-nav.animated-text .menu-wrapper .navigation.home-nav li ul.sub-menu li:hover > a,
.geekfolio-nav.animated-text .menu-wrapper .navigation.home-nav li ul.sub-menu li a:focus-visible {
  background: #f4f4f7;
  color: #1b214f;
}

.geekfolio-nav.animated-text .menu-wrapper .navigation.home-nav li ul.sub-menu li.current-menu-item > a,
.geekfolio-nav.animated-text .menu-wrapper .navigation.home-nav li ul.sub-menu li.current-menu-ancestor > a {
  color: #d8a600;
}

.geekfolio-nav.animated-text .menu-wrapper .navigation.home-nav li ul.sub-menu li.menu-item-has-children > a::after {
  content: "\f105";
  font-family: "FontAwesome";
  font-weight: normal;
  position: absolute;
  top: 50%;
  right: 20px;
  left: auto;
  padding: 0;
  color: #9a9a9a;
  transform: translateY(-50%);
  transition: color 0.2s, right 0.2s;
}

.geekfolio-nav.animated-text .menu-wrapper .navigation.home-nav li ul.sub-menu li.menu-item-has-children:hover > a::after {
  right: 16px;
  color: #1b214f;
}

/* Third level: a side panel lined up with the hovered row. */
.geekfolio-nav.animated-text .menu-wrapper .navigation.home-nav li ul.sub-menu li ul.sub-menu {
  top: -10px;
  left: 100%;
  right: auto;
  min-width: 260px;
}

@media (max-width: 1279px) {
  .geekfolio-nav.animated-text .menu-wrapper .navigation.home-nav li ul.sub-menu li ul.sub-menu {
    left: auto;
    right: 100%;
  }
}

/*
 * Whole-card links (blog cards): the title link is stretched over the card so the card is one
 * accessible link. Other links inside a card (e.g. the author) stay clickable above it.
 */
.cms-card {
  position: relative;
  cursor: pointer;
}

.cms-card .cms-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cms-card a:not(.cms-card-link) {
  position: relative;
  z-index: 2;
}

.cms-card .img {
  overflow: hidden;
}

.cms-card .img img {
  transition: transform 0.6s ease;
}

.cms-card:hover .img img {
  transform: scale(1.04);
}

.geekfolio-posts .item.img-row.cms-card:hover .cont .title a.cms-card-link {
  color: #d8a600;
}

/* Notice Google requires when the reCAPTCHA badge is hidden. */
.cms-recaptcha-note {
  margin: 12px 0 0;
  color: #8a8a8a;
  font-size: 12px;
  line-height: 1.5;
}

.cms-recaptcha-note a {
  color: inherit;
  text-decoration: underline;
}

/* Home page Regions: centre the round "view" button's circle on its arrow (the theme centred it on the arrow's left edge). */
.cont[data-tab] .view-all .view-all-btn::after {
  left: 50%;
  margin-left: -25px;
}

/* Page links under paginated lists (Blog page). */
.cms-anchor {
  display: block;
  position: relative;
  top: -120px;
  visibility: hidden;
}

.cms-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 60px;
}

.cms-pagination .cms-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(27, 33, 79, 0.2);
  border-radius: 50px;
  color: #1b214f;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.cms-pagination a.cms-page:hover {
  border-color: #d8a600;
  color: #d8a600;
}

.cms-pagination .cms-page.is-current {
  background: #1b214f;
  border-color: #1b214f;
  color: #fff;
}

.cms-pagination .cms-page-arrow {
  font-size: 22px;
}

.cms-pagination .cms-page.is-disabled {
  opacity: 0.35;
}

.cms-pagination .cms-page.is-gap {
  border-color: transparent;
}

.cms-empty {
  text-align: center;
}

/* ---------------------------------------------------------------------------------------------------
 * Tablet and layout fixes (the original WordPress site has the same issues at these sizes).
 * ------------------------------------------------------------------------------------------------- */

/*
 * Wide scrolling strips (the "other portfolio" marquee on highlights, the home Highlights carousel) made
 * whole pages scroll sideways on tablets. Clip the page content horizontally; "clip" (unlike "hidden")
 * doesn't create a scroll container, so sticky elements and scroll animations keep working.
 */
body > .elementor,
.elementor > .elementor-section,
.elementor > .e-con {
  overflow-x: clip;
}

/* Footer logo: the Elementor style forced it to 135 x 30, squashing it. */
body .elementor-639 .elementor-element.elementor-element-34a41c7 .custom-logo a img {
  height: auto !important;
}

/* Footer Quick Links: no dropdown arrow (on tablets it landed next to "Blog"). */
footer .navigation li.menu-item-has-children > a::after {
  display: none !important;
}

@media (max-width: 1024px) {
  /* Home page Regions: each region's photo showed at its full 660 x 991 size above the text. */
  .cont[data-tab] .img-hiden img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 12px;
  }

  /* Highlight pages: the banner (its text is part of the image) was cropped to a full-screen box. */
  .cms-highlight-page .elementor > .e-con.e-parent.elementor-hidden-mobile:first-child {
    --min-height: 0px;
    min-height: 0;
    aspect-ratio: 2000 / 1375;
    background-position: center center !important;
    background-size: cover !important;
  }

  /* Main service pages: the sub-service cards touched both edges of the screen. */
  .cms-service-page .elementor > .e-con-boxed.e-parent > .e-con-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  /*
   * Footer Quick Links: each link has right padding of a third of the list's width, which keeps it to one
   * column on desktop but wrapped the links into uneven columns once the list spans the whole tablet screen.
   */
  footer .navigation.home-nav > li {
    display: block;
    width: auto;
    padding-right: 0;
  }

  /* Footer copyright: keep clear of the round scroll-to-top button in the bottom-right corner. */
  footer .elementor-element-3226290 {
    padding-right: 70px;
  }

  /* Footer Services list: line up with its heading like the Quick Links above it. */
  footer .elementor-element-51e3e36 .elementor-icon-list-items {
    padding-left: 0;
  }

  /* About page team grid: same spacing on every photo (the original rows were hand-tuned differently). */
  body .elementor-element-f053b13 > .elementor-container > .elementor-column > .elementor-widget-wrap,
  body .elementor-element-d02d254 > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding: 0 8px;
  }
}

/* Tablets only (phones keep their own stacked layout). */
@media (min-width: 768px) and (max-width: 1024px) {
  /*
   * Home "Certificates" section: on tablets it kept the desktop fixed height, 100px column gap and 45px
   * heading, leaving a wide gap between the text and the certificate and a lot of empty space.
   */
  .elementor-element.elementor-element-bc730bd {
    --min-height: 0px;
    min-height: 0;
  }

  .elementor-element.elementor-element-bc730bd > .e-con-inner {
    padding: 100px 20px;
    gap: 0 40px;
    align-items: center;
  }

  .elementor-element.elementor-element-bc730bd .elementor-element-c161fd8 {
    flex: 0 0 42%;
    width: 42%;
  }

  .elementor-element.elementor-element-bc730bd .elementor-element-76450ba {
    flex: 1 1 0;
    width: auto;
  }

  .elementor-element.elementor-element-bc730bd .elementor-element-6211f28 .geekfolio-heading {
    font-size: clamp(30px, 4.6vw, 40px);
    line-height: 1.25;
  }

  /*
   * Home "+2000 Missions / Get in touch" photo: on tablets the two boxes wrapped into full-width bars across
   * the middle and bottom of the photo, covering the plane. Keep them side by side in the bottom-left
   * corner as on desktop.
   */
  .elementor-element-30e49d09 > .elementor-container {
    flex-wrap: nowrap;
    align-items: flex-end;
    padding: 0 20px;
  }

  .elementor-element-30e49d09 .elementor-element-6051f398,
  .elementor-element-30e49d09 .elementor-element-4346ee8b {
    width: 36%;
    flex: 0 0 36%;
  }

  /*
   * Service pages: the "Get In Touch" form box and the Service / Key Benefits text sat side by side, leaving
   * the form a narrow column. Stack them like on phones (text first, then the form across the full width).
   */
  .cms-service-page .e-con-inner:has(> .e-con-full .elementor-widget-geekfolio-contact-form) {
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
    gap: 40px 0;
  }

  .cms-service-page .e-con-inner:has(> .e-con-full .elementor-widget-geekfolio-contact-form) > .e-con-full {
    --width: 100%;
    width: 100%;
    flex: 0 0 100%;
  }

  .cms-service-page .elementor-widget-geekfolio-contact-form .wpcf7-form .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/*
 * Main heading (H1) of pages whose title is part of a photo (highlights): read by Google and screen
 * readers, not shown, and taking no space.
 */
.cms-main-heading {
  position: relative;
}

.cms-main-heading h1 {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Region pages: the main heading names the services as well as the region, so it's set smaller than the old one-word title. */
.cms-region-page .elementor .elementor-element h1.elementor-heading-title {
  font-size: clamp(2.1rem, 2.4vw + 1rem, 3.2rem);
  line-height: 1.15;
  text-transform: none;
}

/* Phone numbers and email in the contact boxes and footer: clickable, styled like the text around them. */
a.cms-contact-link,
a.cms-contact-link:hover {
  color: inherit;
  text-decoration: none;
}

/* Cookie banner (Google Analytics consent). */
.cms-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 10000;
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  background: #1b214f;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font-size: 14px;
  line-height: 1.5;
}

.cms-consent[hidden] {
  display: none;
}

.cms-consent-text {
  flex: 1 1 320px;
  margin: 0;
  color: #fff;
}

.cms-consent-text a {
  color: #d8a600;
  text-decoration: underline;
}

.cms-consent-buttons {
  display: flex;
  gap: 10px;
}

.cms-consent-button {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.cms-consent-accept {
  background: #d8a600;
  border-color: #d8a600;
  color: #1b214f;
}

/* Privacy, terms and cookie settings links under the footer copyright. */
.cms-legal-links {
  margin: 6px 0 0;
  font-size: 13px;
}

.cms-legal-links a {
  color: inherit;
  margin-right: 14px;
  text-decoration: underline;
}

/* Text pages (Privacy Policy, Terms, guides): headings inside the text sit below the page title. */
.cms-text-page {
  padding: 60px 0;
}

.cms-text-page-body h2 {
  font-size: 22px;
  margin: 32px 0 12px;
}

.cms-text-page-body h3 {
  font-size: 18px;
  margin: 24px 0 10px;
}

.cms-text-page-form {
  margin-top: 40px;
}

/* The header's search icon is gone (the search page was removed). Databases where the header hasn't been
   cleaned yet (HeaderSearchRemovalSeeder) still have the markup, so keep it hidden there too. */
.elementor-widget-geekfolio-search {
  display: none !important;
}