/* Agenteeka brand overrides, loaded after the template stylesheets. */

/* The logo lockup is wider than the template's original mark, so size it by
   height and let the width follow. */
.main-header .logo img,
.sticky-header .logo img,
.mobile-menu .nav-logo img {
  width: auto;
  max-width: 100%;
  max-height: 46px;
}

.sticky-header .logo img {
  max-height: 40px;
}

.footer-logo img {
  width: auto;
  max-height: 62px;
}

@media only screen and (max-width: 1399px) {
  .main-header .logo img {
    max-height: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .main-header .logo img,
  .mobile-menu .nav-logo img {
    max-height: 34px;
  }

  .footer-logo img {
    max-height: 46px;
  }
}

/* Preloader: brand logo on the white loading screen. */
.preloader:after {
  width: 280px;
  height: 56px;
  margin-left: -140px;
  margin-top: -48px;
  left: 50%;
  background-image: url(../images/logo/agenteeka-logo-dark.png);
  background-size: contain;
}

@media only screen and (max-width: 575px) {
  .preloader:after {
    width: 220px;
    height: 44px;
    margin-left: -110px;
  }
}

/* Hero headline: "Growth Isn't Random" / "[It's] Engineered."
   Line 1 (--hero-fs1) always stays on one line; line 2 (--hero-fs2) is the
   punchline, set ~1.3x larger so both lines end up about the same width and
   read as one block. Sizes are per breakpoint so the block clears the hero
   image; line 1 is ~11em wide, line 2 ~8.3em with the pill (~7.7em without). */
.hero-1 .hero-content {
  --hero-fs1: calc((100vw - 40px) / 11.2);
  --hero-fs2: calc((100vw - 40px) / 7.9);
}

.hero-1 .hero-content .hero-title {
  font-size: var(--hero-fs1);
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.hero-1 .hero-content .hero-title-2 {
  font-size: var(--hero-fs2);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: calc(var(--hero-fs2) * 0.08);
}

.hero-1 .hero-content .hero-title-2 .text-1 {
  font-size: inherit;
  letter-spacing: -0.02em;
}

@media (min-width: 576px) {
  .hero-1 .hero-content { --hero-fs1: 46px; --hero-fs2: 65px; }
}

@media (min-width: 768px) {
  .hero-1 .hero-content { --hero-fs1: 60px; --hero-fs2: 85px; }
}

@media (min-width: 992px) {
  .hero-1 .hero-content { --hero-fs1: 80px; --hero-fs2: 105px; }

  .hero-1 .hero-content .hero-title-2 {
    display: flex;
    gap: calc(var(--hero-fs2) * 0.267);
    margin-top: calc(var(--hero-fs2) * 0.2);
  }

  .hero-1 .hero-content .hero-title-2 .text-1 {
    font-size: calc(var(--hero-fs2) * 0.415);
    width: calc(var(--hero-fs2) * 1.953);
    height: calc(var(--hero-fs2) * 0.819);
    line-height: calc(var(--hero-fs2) * 0.819);
  }

  .hero-1 .hero-content .hero-title-2 .text-1::before {
    top: calc(var(--hero-fs2) * -0.054);
    width: calc(var(--hero-fs2) * 2.147);
    height: calc(var(--hero-fs2) * 0.927);
  }
}

/* Side by side with the hero image from here up. */
@media (min-width: 1200px) {
  .hero-1 .hero-content { --hero-fs1: 52px; --hero-fs2: 68px; }

  .hero-1 .hero-content .content {
    margin-left: calc(var(--hero-fs2) * 2.22);
  }

  /* Move the floating 3D shape below the headline so it doesn't cover it. */
  .hero-1 .hero-image .shape-1 {
    top: 300px;
  }
}

@media (min-width: 1400px) {
  .hero-1 .hero-content { --hero-fs1: 68px; --hero-fs2: 90px; }
}

/* Hero marquee: nine services instead of four, so slow the loop down to keep
   the original scrolling speed. */
.marquee-section .marquee-two {
  --duration: 65s;
}

/* "What we bring to the table" list: one short description per row in place
   of the template's two bullet tags. */
.feature-list-items li {
  gap: 30px;
}

.feature-list-items li .title {
  flex: 0 0 38%;
}

.feature-list-items li .feature-desc {
  flex: 1 1 0;
  margin: 0;
  color: rgba(var(--theme-color-white-rgb), 0.7);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.32px;
}

@media (max-width: 1199.98px) {
  .feature-list-items li .feature-desc {
    font-size: 15px;
  }
}

@media (max-width: 575.98px) {
  .feature-list-items li .feature-desc {
    margin-top: 12px;
  }
}

/* Header on small laptops / tablets in landscape (992-1199px): the template
   keeps a 160px logo-to-menu gap here, which pushed the menu onto two lines. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .header-1 .header-left {
    gap: 32px;
  }

  .main-header .main-menu .navigation > li {
    margin-right: 20px;
  }

  .header-1 .ui-btn-outer .ui-btn-search .header-btn {
    white-space: nowrap;
  }
}

/* Project cards (home "Our Projects" + /projects). The artwork is 648x500
   with the project name on the left, so show it at its own ratio instead of
   the template's fixed-height crop, and give the description room. */
.project-card .image {
  height: auto;
  aspect-ratio: 648 / 500;
}

.project-card .image img {
  height: 100%;
}

.project-card .content {
  align-items: flex-start;
  gap: 24px;
}

.project-card .content .title-area {
  flex: 1 1 auto;
}

.project-card .content .text {
  margin: 0;
  color: rgba(var(--theme-color-white-rgb), 0.7);
  font-size: 15px;
  line-height: 1.6;
}

.project-card .content .arrow-icon {
  flex: 0 0 auto;
  margin-top: 26px;
}

.projects-grid .case-block {
  width: 100%;
  margin-left: 0;
  margin-bottom: 60px;
}

/* Skills grid: marketing channel icons drawn as app-style tiles. */
.skill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  color: #fff;
  font-size: 28px;
  transition: all 900ms ease;
}

.skill-left-items .skill-box:hover .skill-icon {
  transform: rotateY(360deg);
}

.skill-icon img {
  width: 34px;
  height: 34px;
}

.skill-icon--social { background: linear-gradient(135deg, #f58529 0%, #dd2a7b 55%, #8134af 100%); }
.skill-icon--email { background: linear-gradient(135deg, #4facfe 0%, #1e5bd8 100%); }
.skill-icon--youtube { background: #ff0000; }
.skill-icon--design { background: linear-gradient(135deg, #a259ff 0%, #f24e8b 100%); }
.skill-icon--automation { background: linear-gradient(135deg, #e7b6c7 0%, #a85c79 100%); }
.skill-icon--google { background: #fff; }

.skill-left-items .skill-box .title {
  max-width: 124px;
  margin-left: auto;
  margin-right: auto;
  font-size: 15px;
  line-height: 1.25;
}

/* "Watch The Video": the template's script font is never loaded, so it fell
   back to the browser's serif. Use the brand heading font instead. */
.about-image-video .watch-title {
  font-family: var(--heading-font-family);
  font-weight: 500;
}