/* ================= RESET ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
  color: #1a1a2e;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* ================= COLOR VARIABLES ================= */
:root {
  --brand-red: #c1272d;
  --brand-navy: #14213d;
  --header-bg: #f4f4f4;
  --text-dark: #1a1a2e;
  --text-muted: #333333;
}

/* ================= HEADER ================= */
.site-header {
  background-color: var(--header-bg);
  width: 100%;
  border-bottom: 1px solid #e2e2e2;
  position: relative;
  z-index: 100;
}

.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  height: 64px;
  width: 64px;
  object-fit: contain;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.brand-red {
  color: var(--brand-red);
}

.logo-subtitle {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-navy);
}

/* Nav */
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 34px;
}

.main-nav a {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-dark);
  padding: 6px 0;
}

.main-nav a.active {
  color: var(--brand-red);
}

.main-nav a:hover {
  color: var(--brand-red);
}

.dropdown {
  position: relative;
}

.dropdown-toggle .caret {
  font-size: 11px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  min-width: 190px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 0;
  border-radius: 4px;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

.dropdown-menu li a:hover {
  background-color: #f7f7f7;
  color: var(--brand-red);
}

.dropdown.open .dropdown-menu {
  display: block;
}

/* Quote button */
.quote-btn {
  background-color: var(--brand-red);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 14px 26px;
  border-radius: 4px;
  white-space: nowrap;
}

.quote-btn:hover {
  background-color: #a41f24;
}
/* ================= RESET ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
  color: #1a1a2e;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* ================= COLOR VARIABLES ================= */
:root {
  --brand-red: #c1272d;
  --brand-navy: #14213d;
  --header-bg: #f4f4f4;
  --text-dark: #1a1a2e;
  --text-muted: #333333;
}

/* ================= HEADER ================= */
.site-header {
  background-color: var(--header-bg);
  width: 100%;
  border-bottom: 1px solid #e2e2e2;
  position: relative;
  z-index: 100;
}

.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  height: 64px;
  width: 64px;
  object-fit: contain;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.brand-red {
  color: var(--brand-red);
}

.logo-subtitle {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-navy);
}

/* Nav */
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 34px;
}

.main-nav a {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-dark);
  padding: 6px 0;
}

.main-nav a.active {
  color: var(--brand-red);
}

.main-nav a:hover {
  color: var(--brand-red);
}

.dropdown {
  position: relative;
}

.dropdown-toggle .caret {
  font-size: 11px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  min-width: 180px;
  padding: 8px 0;
  border-radius: 4px;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

.dropdown-menu li a:hover {
  background-color: #f7f7f7;
  color: var(--brand-red);
}

.dropdown.open .dropdown-menu {
  display: block;
}

/* Quote button */
.quote-btn {
  background-color: var(--brand-red);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 14px 26px;
  border-radius: 4px;
  white-space: nowrap;
  text-align: center;
}

.quote-btn:hover {
  background-color: #a41f24;
}

/* Actions wrapper - stacks Get a Quote and Contact Us on top of each other */
.header-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Contact Us button - sits directly below Get a Quote */
.contact-btn {
  background-color: transparent;
  color: var(--brand-navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 10px 26px;
  border-radius: 4px;
  border: 1.5px solid var(--brand-navy);
  white-space: nowrap;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.contact-btn:hover {
  background-color: var(--brand-navy);
  color: #ffffff;
}



/* ===================================
   HERO - FINAL FIX
=================================== */

.hero {
    position: relative;
    width: 100%;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #e8ebee;
}

/* Background image */

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: heroZoom 10s ease-out forwards;
}

/* Light overlay */

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(240,243,246,0.90) 0%,
        rgba(240,243,246,0.75) 25%,
        rgba(240,243,246,0.35) 45%,
        rgba(240,243,246,0) 70%
    );
}

/* Main content */

.hero-content {
    position: relative;
    z-index: 10;

    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 70px 40px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    opacity: 1;
    visibility: visible;
}

/* Left text block */

.hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;

    width: 100%;
    max-width: 590px;

    opacity: 1;
    visibility: visible;
}

/* Tagline */

.hero-tagline {
    position: relative;
    padding-left: 38px;
    margin: 0 0 22px;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
    line-height: 1.6;
    color: #14213d;
}

.hero-tagline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 25px;
    height: 2px;
    background: #c1272d;
    transform: translateY(-50%);
}

/* Heading */

.hero-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    margin: 0 0 26px;

    font-size: clamp(40px, 4.5vw, 68px);
    font-weight: 900;
    line-height: 1.07;
    letter-spacing: -1.5px;
    text-transform: uppercase;
}

.hero-heading span {
    display: block;
}

.line-red {
    color: #c1272d;
}

.line-navy {
    color: #14213d;
}

/* Description */

.hero-desc {
    width: 100%;
    max-width: 500px;

    font-size: 17px;
    line-height: 1.75;
    color: #333c49;

    margin: 0 0 30px;
}

/* Buttons */

.hero-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    min-height: 54px;
    padding: 14px 28px;

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 4px;

    transition: background 0.3s ease,
                color 0.3s ease,
                transform 0.3s ease;
}

.hero-btn-primary {
    background: #c1272d;
    color: #fff;
    border: 1px solid #c1272d;
}

.hero-btn-primary:hover {
    background: #a41f24;
    transform: translateY(-3px);
}

.hero-btn-outline {
    background: rgba(255,255,255,0.3);
    color: #14213d;
    border: 1px solid #14213d;
}

.hero-btn-outline:hover {
    background: #14213d;
    color: #fff;
    transform: translateY(-3px);
}

/* ===================================
   BACKGROUND ZOOM
=================================== */

@keyframes heroZoom {
    from {
        transform: scale(1.10);
    }

    to {
        transform: scale(1);
    }
}

/* ===================================
   TEXT REVEAL ANIMATION
=================================== */

/* Text is visible by default */

.hero-reveal {
    opacity: 1;
    visibility: visible;
    animation: heroTextReveal 0.8s ease-out backwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.5s; }
.delay-4 { animation-delay: 0.7s; }
.delay-5 { animation-delay: 0.9s; }
.delay-6 { animation-delay: 1.1s; }

@keyframes heroTextReveal {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   TABLET
=================================== */

@media (max-width: 992px) {

    .hero {
        min-height: 620px;
    }

    .hero-content {
        padding: 65px 30px;
    }

    .hero-heading {
        font-size: 52px;
    }

}

/* ===================================
   MOBILE
=================================== */

@media (max-width: 600px) {

    .hero {
        min-height: 620px;
    }

    .hero-content {
        padding: 65px 20px;
    }

    .hero-text {
        max-width: 100%;
    }

    .hero-heading {
        font-size: clamp(34px, 9vw, 44px);
    }

    .hero-tagline {
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    .hero-desc {
        font-size: 15px;
    }

    .hero-img {
        object-position: 65% center;
    }

    .hero-overlay {
        background: linear-gradient(
            90deg,
            rgba(240,243,246,0.94) 0%,
            rgba(240,243,246,0.85) 70%,
            rgba(240,243,246,0.55) 100%
        );
    }

    .hero-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-btn {
        width: 100%;
    }

}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .hero-img,
    .hero-reveal {
        animation: none;
        opacity: 1;
        transform: none;
    }
}


/* ===== HERO TEXT VISIBILITY FIX ===== */

/* Keep image behind content */

.hero {
    position: relative !important;
    isolation: isolate;
}

.hero-bg {
    z-index: 0 !important;
}

.hero-overlay {
    z-index: 1 !important;
}

/* Bring text above image */

.hero .hero-content {
    position: relative !important;
    z-index: 100 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force all hero text to show */

.hero .hero-text,
.hero .hero-tagline,
.hero .hero-heading,
.hero .hero-heading span,
.hero .hero-desc,
.hero .hero-buttons,
.hero .animate-item,
.hero .hero-animate,
.hero .hero-reveal {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transform: none !important;
}

/* Correct text colors */

.hero .line-red {
    color: #c1272d !important;
}

.hero .line-navy {
    color: #14213d !important;
}

.hero .hero-tagline {
    color: #14213d !important;
}

.hero .hero-desc {
    color: #333333 !important;
}

/* Keep background zoom */

.hero .hero-img {
    animation: heroZoom 10s ease-out forwards !important;
}

@keyframes heroZoom {
    from {
        transform: scale(1.10);
    }

    to {
        transform: scale(1);
    }
}
/* ================= ABOUT COMPANY ================= */
.about {
  background-color: #f1f1f1;
  padding: 90px 40px;
  position: relative;
  overflow: hidden;
}
 
.about-inner {
  max-width: 1440px;
  margin: 0 auto;
}
 
.about-header {
  text-align: center;
  margin-bottom: 60px;
}
 
.about-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--brand-red);
  text-transform: uppercase;
}
 
.about-underline {
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--brand-red);
  margin: 10px auto 0;
}
 
.about-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  flex-wrap: wrap;
}
 
/* Image collage */
.about-collage {
  position: relative;
  width: 480px;
  height: 480px;
  flex-shrink: 0;
}
 
.collage-item {
  position: absolute;
  width: 50%;
  height: 50%;
  overflow: hidden;
  background-color: #d9d9d9;
}
 
.collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
 
.item-1 {
  top: 0;
  left: 0;
  border-radius: 60px 60px 12px 60px;
}
 
.item-2 {
  top: 0;
  right: 0;
  border-radius: 60px 60px 60px 12px;
}
 
.item-3 {
  bottom: 0;
  left: 0;
  border-radius: 60px 12px 60px 60px;
}
 
.item-4 {
  bottom: 0;
  right: 0;
  border-radius: 12px 60px 60px 60px;
}
 
.about-collage .arc {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}
 
.about-collage .arc path {
  fill: none;
  stroke-width: 3;
}
 
.arc-navy path {
  stroke: var(--brand-navy);
}
 
.arc-red path {
  stroke: var(--brand-red);
}
 
.collage-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  z-index: 2;
}
 
.collage-logo img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}
 
/* Right side details */
.about-details {
  flex: 1;
  min-width: 320px;
}
 
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 40px;
}
 
.stat-box {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
 
.stat-icon svg {
  width: 34px;
  height: 34px;
}
 
.stat-text {
  display: flex;
  flex-direction: column;
}
 
.stat-text strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-red);
}
 
.stat-text span {
  font-size: 14px;
  color: var(--text-muted);
}
 
.about-heading {
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 22px;
}
 
.about-desc {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 560px;
}
 
/* Responsive */
@media (max-width: 992px) {
  .about-content {
    flex-direction: column;
  }
  .about-collage {
    width: 380px;
    height: 380px;
  }
}
 
@media (max-width: 480px) {
  .about-collage {
    width: 300px;
    height: 300px;
  }
  .about-heading {
    font-size: 22px;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
}


/* HERO TEXT EMERGENCY FIX */

.hero .hero-content,
.hero .hero-text,
.hero .hero-tagline,
.hero .hero-heading,
.hero .hero-heading span,
.hero .hero-desc,
.hero .hero-buttons {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}

.hero .hero-content {
    position: relative !important;
    z-index: 9999 !important;
}

.hero .hero-bg {
    z-index: 0 !important;
}

.hero .hero-overlay {
    z-index: 1 !important;
}

.hero .hero-img {
    animation: heroZoom 10s ease-out forwards !important;
}

/* =========================================
   AHAMED IRON & STEEL - HERO SLIDER
========================================= */

.ais-slider,
.ais-slider * {
    box-sizing: border-box;
}

.ais-slider {
    position: relative;
    isolation: isolate;

    width: 100%;
    height: 650px;

    overflow: hidden;
    background: #e4e8eb;

    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================
   SLIDES
========================================= */

.ais-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.9s ease,
        visibility 0.9s ease;
}

.ais-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    z-index: 2;
}


/* =========================================
   FULL BACKGROUND IMAGE
========================================= */

.ais-slide-bg {
    position: absolute;
    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.ais-slide-img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    transform: scale(1);
}


/* Background Zoom */

.ais-slide.is-active .ais-slide-img {
    animation: aisImageZoom 6s ease-out forwards;
}

@keyframes aisImageZoom {

    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1);
    }

}


/* =========================================
   GRADIENT OVERLAY
========================================= */

/*
   Your generated image already has a white
   blur on the left side.

   So the CSS overlay is kept very subtle.
*/

.ais-slide::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(240,243,246,0.25) 0%,
        rgba(240,243,246,0.12) 30%,
        rgba(240,243,246,0) 60%
    );
}


/* =========================================
   CONTENT POSITION
========================================= */

.ais-container {
    position: relative;
    z-index: 5;

    width: 100%;
    height: 100%;

    max-width: 1440px;
    margin: 0 auto;

    padding: 55px 40px 75px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.ais-content {
    position: relative;

    width: 100%;
    max-width: 590px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    text-align: left;

    opacity: 1;
    visibility: visible;
    color: #14213d;
}


/* =========================================
   TAGLINE
========================================= */

.ais-tagline {
    position: relative;

    margin: 0 0 22px;
    padding-left: 38px;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1.3px;
    line-height: 1.6;

    color: #14213d;
}

.ais-tagline::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 25px;
    height: 2px;

    background: #c1272d;

    transform: translateY(-50%);
}


/* =========================================
   MAIN HEADING
========================================= */

.ais-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;

    margin: 0 0 26px;

    font-size: clamp(38px, 4.5vw, 68px);
    font-weight: 900;

    line-height: 1.07;
    letter-spacing: -1.5px;

    text-transform: uppercase;
    color: #14213d;
}

.ais-title span {
    display: block;
}

.ais-title .ais-red {
    color: #c1272d;
}


/* =========================================
   DESCRIPTION
========================================= */

.ais-description {
    width: 100%;
    max-width: 510px;

    margin: 0 0 30px;

    font-size: 17px;
    font-weight: 400;

    line-height: 1.7;
    color: #333c49;
}


/* =========================================
   BUTTONS
========================================= */

.ais-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    flex-wrap: wrap;
    gap: 16px;
}

.ais-btn-primary,
.ais-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    min-height: 54px;
    padding: 14px 28px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
    white-space: nowrap;

    border-radius: 4px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


/* Red Button */

.ais-btn-primary {
    background: #c1272d;
    color: #ffffff;

    border: 1px solid #c1272d;
}

.ais-btn-primary:hover {
    background: #a41f24;
    color: #ffffff;

    transform: translateY(-3px);
}


/* Outline Button */

.ais-btn-outline {
    background: rgba(255,255,255,0.35);
    color: #14213d;

    border: 1px solid #14213d;
}

.ais-btn-outline:hover {
    background: #14213d;
    color: #ffffff;

    transform: translateY(-3px);
}


/* =========================================
   TEXT ONE BY ONE ANIMATION
========================================= */

/* Visible by default - no permanent opacity 0 */

.ais-tagline,
.ais-title span,
.ais-description,
.ais-actions {
    opacity: 1;
    visibility: visible;
}


/* Active slide animation */

.ais-slide.is-active .ais-tagline {
    animation: aisTextReveal 0.7s 0.15s both;
}

.ais-slide.is-active .ais-title span:nth-child(1) {
    animation: aisTextReveal 0.7s 0.35s both;
}

.ais-slide.is-active .ais-title span:nth-child(2) {
    animation: aisTextReveal 0.7s 0.55s both;
}

.ais-slide.is-active .ais-title span:nth-child(3) {
    animation: aisTextReveal 0.7s 0.75s both;
}

.ais-slide.is-active .ais-description {
    animation: aisTextReveal 0.7s 0.95s both;
}

.ais-slide.is-active .ais-actions {
    animation: aisTextReveal 0.7s 1.15s both;
}


@keyframes aisTextReveal {

    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================
   NAVIGATION ARROWS
========================================= */

.ais-arrow {
    position: absolute;
    top: 50%;

    z-index: 10;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    border: 1px solid rgba(20,33,61,0.2);
    border-radius: 50%;

    background: rgba(255,255,255,0.75);
    color: #14213d;

    font-size: 17px;
    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.ais-arrow:hover {
    background: #c1272d;
    color: #ffffff;
}

.ais-prev {
    left: 15px;
}

.ais-next {
    right: 15px;
}


/* =========================================
   SLIDER DOTS
========================================= */

.ais-dots {
    position: absolute;

    bottom: 25px;
    left: 50%;

    z-index: 10;

    display: flex;
    align-items: center;
    gap: 10px;

    transform: translateX(-50%);
}

.ais-dot {
    width: 9px;
    height: 9px;

    padding: 0;

    border: 0;
    border-radius: 20px;

    background: rgba(20,33,61,0.35);

    cursor: pointer;
    transition: all 0.3s ease;
}

.ais-dot.is-active {
    width: 30px;
    background: #c1272d;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 992px) {

    .ais-slider {
        height: 620px;
    }

    .ais-container {
        padding: 55px 45px 75px;
    }

    .ais-title {
        font-size: 52px;
    }

    .ais-slide::after {
        background: linear-gradient(
            90deg,
            rgba(240,243,246,0.60) 0%,
            rgba(240,243,246,0.35) 50%,
            rgba(240,243,246,0.05) 100%
        );
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ais-slider {
        height: 650px;
    }

    .ais-container {
        padding: 55px 22px 85px;
    }

    .ais-tagline {
        font-size: 11px;
        letter-spacing: 0.5px;
        padding-left: 30px;
    }

    .ais-tagline::before {
        width: 20px;
    }

    .ais-title {
        font-size: clamp(32px, 9vw, 44px);
    }

    .ais-description {
        font-size: 15px;
        line-height: 1.6;
    }

    .ais-slide-img {
        object-position: 65% center;
    }

    .ais-slide::after {
        background: linear-gradient(
            90deg,
            rgba(240,243,246,0.90) 0%,
            rgba(240,243,246,0.80) 70%,
            rgba(240,243,246,0.50) 100%
        );
    }

    .ais-actions {
        width: 100%;
        gap: 12px;
    }

    .ais-btn-primary,
    .ais-btn-outline {
        padding: 12px 18px;
        min-height: 48px;
    }

    .ais-arrow {
        width: 32px;
        height: 32px;

        top: auto;
        bottom: 16px;

        transform: none;
    }

    .ais-prev {
        left: 16px;
    }

    .ais-next {
        right: 16px;
    }

    .ais-dots {
        bottom: 28px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .ais-slide,
    .ais-slide-img,
    .ais-slide.is-active .ais-tagline,
    .ais-slide.is-active .ais-title span,
    .ais-slide.is-active .ais-description,
    .ais-slide.is-active .ais-actions {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none;
    }

}

/* =========================================
   ABOUT COMPANY - PREMIUM DESIGN
========================================= */

.about-company {
    --about-red: #c1272d;
    --about-navy: #14213d;

    position: relative;
    isolation: isolate;

    width: 100%;
    padding: 80px 30px 100px;

    background: #ffffff;

    font-family: 'Poppins', sans-serif;

    overflow: hidden;
}


/* =========================================
   MAIN CONTAINER
========================================= */

.about-container {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;
}


/* =========================================
   SECTION HEADER
========================================= */

.about-section-header {
    text-align: center;

    margin-bottom: 60px;
}

.about-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    margin-bottom: 12px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;

    color: var(--about-navy);
}

.about-eyebrow::before,
.about-eyebrow::after {
    content: "";

    width: 30px;
    height: 2px;

    background: var(--about-red);
}

.about-section-header h2 {
    margin: 0 0 10px;

    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;

    line-height: 1.2;

    color: var(--about-navy);
}

.about-section-header h2 span {
    color: var(--about-red);
}

.about-section-header p {
    margin: 0;

    font-size: 15px;
    font-weight: 500;

    color: #596579;
}


/* =========================================
   TWO COLUMN LAYOUT
========================================= */

.about-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: 70px;
}


/* =========================================
   LEFT IMAGE VISUAL
========================================= */

.about-visual {
    position: relative;

    width: 100%;
    max-width: 550px;

    padding: 20px 25px 30px 10px;

    perspective: 1200px;
}


/* Decorative frame */

.about-frame {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 55px;
    left: 35px;

    border: 2px solid var(--about-red);

    border-radius: 14px;

    pointer-events: none;
}


/* =========================================
   IMAGE WRAPPER
========================================= */

.about-image-wrap {
    position: relative;

    width: 100%;
    height: 490px;

    border-radius: 12px;

    overflow: hidden;

    background: #e8edf2;

    box-shadow:
        0 22px 55px rgba(20,33,61,0.17);

    transform-style: preserve-3d;

    animation: aboutImageRotate 8s ease-in-out infinite;
}


/* Main image */

.about-main-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.7s ease;
}


/* Image hover zoom */

.about-visual:hover .about-main-image {
    transform: scale(1.08);
}


/* Subtle bottom gradient */

.about-image-overlay {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background: linear-gradient(
        180deg,
        transparent 55%,
        rgba(10,19,35,0.35) 100%
    );
}


/* =========================================
   SMOOTH 3D ROTATE ANIMATION
========================================= */

@keyframes aboutImageRotate {

    0% {
        transform:
            rotateY(-4deg)
            rotateX(1deg)
            translateY(0);
    }

    50% {
        transform:
            rotateY(4deg)
            rotateX(-1deg)
            translateY(-10px);
    }

    100% {
        transform:
            rotateY(-4deg)
            rotateX(1deg)
            translateY(0);
    }

}


/* =========================================
   EXPERIENCE BADGE
========================================= */

.about-experience {
    position: absolute;

    right: -15px;
    bottom: 75px;

    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 145px;
    height: 145px;

    padding: 15px;

    background: var(--about-red);

    border: 6px solid #ffffff;
    border-radius: 50%;

    color: #ffffff;

    box-shadow:
        0 12px 30px rgba(193,39,45,0.25);

    animation: aboutBadgeFloat 4s ease-in-out infinite;
}

.experience-number {
    font-size: 43px;
    font-weight: 900;

    line-height: 1;
}

.experience-number span {
    font-size: 28px;
}

.experience-label {
    margin-top: 7px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1px;
    line-height: 1.5;

    text-align: center;
}


/* Badge floating */

@keyframes aboutBadgeFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}


/* =========================================
   IMAGE CAPTION
========================================= */

.about-image-caption {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 22px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.6px;

    color: var(--about-navy);
}

.caption-line {
    width: 32px;
    height: 2px;

    background: var(--about-red);
}


/* =========================================
   RIGHT DETAILS
========================================= */

.about-details {
    width: 100%;
    min-width: 0;
}


/* =========================================
   STATS GRID
========================================= */

.about-stats-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 40px;
}


/* =========================================
   STAT CARDS
========================================= */

.about-stat-card {
    position: relative;

    display: flex;
    align-items: center;

    gap: 15px;

    min-width: 0;
    min-height: 105px;

    padding: 20px 18px;

    background: #f8f9fc;

    border: 1px solid #edf0f5;
    border-radius: 12px;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* Red top border on hover */

.about-stat-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: var(--about-red);

    transition: width 0.4s ease;
}

.about-stat-card:hover::before {
    width: 100%;
}


/* Card hover */

.about-stat-card:hover {
    transform: translateY(-7px);

    background: #ffffff;

    border-color: rgba(193,39,45,0.2);

    box-shadow:
        0 15px 35px rgba(20,33,61,0.1);
}


/* =========================================
   STAT ICON
========================================= */

.about-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    flex-shrink: 0;

    background: #eef0f5;

    border-radius: 50%;

    font-size: 21px;
    color: var(--about-navy);

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}

.about-stat-card:hover .about-stat-icon {
    background: var(--about-red);
    color: #ffffff;

    transform: rotate(12deg);
}


/* =========================================
   STAT TEXT
========================================= */

.about-stat-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.about-stat-text strong {
    font-size: 27px;
    font-weight: 800;

    line-height: 1.2;

    color: var(--about-red);
}

.about-stat-text span {
    margin-top: 5px;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.5;

    color: #344054;
}


/* =========================================
   RIGHT CONTENT
========================================= */

.about-text-content {
    width: 100%;
}


/* Small label */

.about-small-label {
    display: inline-block;

    margin-bottom: 13px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;

    color: var(--about-red);
}


/* Main heading */

.about-heading {
    margin: 0 0 22px;

    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;

    line-height: 1.25;
    letter-spacing: -0.8px;

    color: var(--about-navy);
}

.about-heading span {
    color: var(--about-red);
}


/* Description */

.about-description {
    max-width: 570px;

    margin: 0;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.9;

    color: #3e4b60;
}


/* =========================================
   BOTTOM DECORATIVE LINE
========================================= */

.about-bottom-line {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 25px;
}

.about-bottom-line > span {
    width: 38px;
    height: 2px;

    flex-shrink: 0;

    background: var(--about-red);
}

.about-bottom-line p {
    margin: 0;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;

    color: var(--about-navy);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .about-layout {
        gap: 35px;
    }

    .about-image-wrap {
        height: 430px;
    }

    .about-stat-card {
        padding: 15px 12px;
        gap: 10px;
    }

    .about-stat-icon {
        width: 43px;
        height: 43px;

        font-size: 18px;
    }

    .about-stat-text strong {
        font-size: 24px;
    }
}


/* =========================================
   SMALL TABLET
========================================= */

@media (max-width: 850px) {

    .about-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-visual {
        max-width: 550px;
        margin: 0 auto;
    }

    .about-details {
        max-width: 650px;
        margin: 0 auto;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .about-company {
        padding: 55px 20px 70px;
    }

    .about-section-header {
        margin-bottom: 40px;
    }

    .about-section-header h2 {
        font-size: 32px;
    }

    .about-layout {
        gap: 35px;
    }

    .about-visual {
        padding: 12px 12px 25px 0;
    }

    .about-image-wrap {
        height: 340px;
    }

    .about-frame {
        left: 18px;
        bottom: 45px;
    }

    .about-experience {
        width: 105px;
        height: 105px;

        right: -8px;
        bottom: 55px;

        border-width: 4px;
    }

    .experience-number {
        font-size: 30px;
    }

    .experience-number span {
        font-size: 20px;
    }

    .experience-label {
        font-size: 8px;
    }

    .about-image-caption {
        font-size: 9px;
    }

    .about-stats-grid {
        gap: 12px;
        margin-bottom: 30px;
    }

    .about-stat-card {
        min-height: 95px;
        padding: 13px 10px;

        gap: 9px;
    }

    .about-stat-icon {
        width: 38px;
        height: 38px;

        font-size: 16px;
    }

    .about-stat-text strong {
        font-size: 23px;
    }

    .about-stat-text span {
        font-size: 10px;
    }

    .about-heading {
        font-size: 29px;
    }

    .about-description {
        font-size: 14px;
        line-height: 1.8;
    }

    .about-bottom-line p {
        font-size: 9px;
        letter-spacing: 0.5px;
    }
}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .about-image-wrap,
    .about-experience {
        animation: none;
        transform: none;
    }

    .about-stat-card,
    .about-main-image,
    .about-stat-icon {
        transition: none;
    }

}
  /* =========================================================
   OUR PRODUCTS — NAVY CORPORATE CAROUSEL
========================================================= */

.productsNavy{
  --navy:#101c33;
  --navy-deep:#0a1426;
  --red:#cb1d2b;
  --white:#ffffff;
  --muted:rgba(255,255,255,.72);

  position:relative;
  padding:100px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 15%,rgba(255,255,255,.07),transparent 25%),
    linear-gradient(135deg,var(--navy-deep),var(--navy));
  font-family:"Poppins",Arial,sans-serif;
}

.productsNavy::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:42px 42px;
}

.productsNavy *{
  box-sizing:border-box;
}

.productsNavy__inner{
  position:relative;
  z-index:1;
  width:min(1320px,calc(100% - 48px));
  margin:auto;
}

.productsNavy__header{
  max-width:820px;
  margin:0 auto 48px;
  text-align:center;
}

.productsNavy__eyebrow{
  margin:0;
  color:var(--red);
  font-size:12px;
  font-weight:800;
  letter-spacing:2.6px;
}

.productsNavy__line{
  display:block;
  width:54px;
  height:3px;
  margin:13px auto 18px;
  border-radius:20px;
  background:var(--red);
}

.productsNavy__title{
  margin:0;
  color:var(--white);
  font-size:clamp(38px,4vw,62px);
  line-height:1.08;
  font-weight:900;
  letter-spacing:-2px;
}

.productsNavy__title span{
  display:block;
  color:var(--red);
}

.productsNavy__desc{
  max-width:700px;
  margin:20px auto 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}

.productsNavy__controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-top:34px;
}
.productsNavy__btn{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:.3s ease;
}

.productsNavy__btn svg{
  width:19px;
  height:19px;
}

.productsNavy__btn:hover{
  background:var(--red);
  border-color:var(--red);
  transform:translateY(-3px);
}

.productsNavy__viewport{
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
}

.productsNavy__viewport.is-dragging{
  cursor:grabbing;
}

.productsNavy__track{
  display:flex;
  gap:24px;
  will-change:transform;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}

.productsNavy__track.is-dragging{
  transition:none;
}

.productsNavy__card{
  flex:0 0 calc((100% - 72px) / 4);
  min-width:0;
}

.productsNavy__link{
  display:block;
  overflow:hidden;
  color:inherit;
  background:#fff;
  border-radius:18px;
  text-decoration:none;
  box-shadow:0 20px 46px rgba(0,0,0,.24);
  transform:translateY(0) scale(1);
  transition:transform .4s ease,box-shadow .4s ease;
}

.productsNavy__link:hover{
  transform:translateY(-10px) scale(1.025);
  box-shadow:0 30px 65px rgba(0,0,0,.34);
}

.productsNavy__link.is-clicked{
  transform:translateY(-12px) scale(1.055);
  box-shadow:
    0 34px 70px rgba(0,0,0,.38),
    0 0 0 3px rgba(203,29,43,.32);
}

.productsNavy__image{
  position:relative;
  height:320px;
  overflow:hidden;
  background:#dfe3e8;
}

.productsNavy__image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(7,18,34,.58));
  pointer-events:none;
}

.productsNavy__image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .75s ease;
}

.productsNavy__link:hover img,
.productsNavy__link.is-clicked img{
  transform:scale(1.1);
}

.productsNavy__index{
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  min-width:42px;
  height:30px;
  padding:0 11px;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(10,20,38,.82);
  border:1px solid rgba(255,255,255,.2);
  border-radius:20px;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
}

.productsNavy__content{
  padding:22px 20px 24px;
}

.productsNavy__type{
  display:block;
  margin-bottom:7px;
  color:var(--red);
  font-size:9px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.productsNavy__content h3{
  margin:0 0 17px;
  color:#111a2d;
  font-size:20px;
  font-weight:900;
}

.productsNavy__more{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:15px;
  color:#657080;
  border-top:1px solid #e8ebef;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.7px;
  transition:.3s ease;
}

.productsNavy__more b{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  color:#101c33;
  background:#eef1f5;
  border-radius:50%;
  font-size:16px;
  transition:.3s ease;
}

.productsNavy__link:hover .productsNavy__more,
.productsNavy__link.is-clicked .productsNavy__more{
  color:var(--red);
}

.productsNavy__link:hover .productsNavy__more b,
.productsNavy__link.is-clicked .productsNavy__more b{
  color:#fff;
  background:var(--red);
  transform:rotate(45deg);
}

.productsNavy__progress{
  position:relative;
  width:min(420px,70%);
  height:3px;
  margin:36px auto 0;
  overflow:hidden;
  background:rgba(255,255,255,.16);
  border-radius:20px;
}

.productsNavy__progressBar{
  position:absolute;
  inset:0 auto 0 0;
  width:25%;
  background:var(--red);
  border-radius:20px;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}

@media(max-width:1100px){
  .productsNavy__card{
    flex-basis:calc((100% - 48px) / 3);
  }
}

@media(max-width:820px){
  .productsNavy{
    padding:80px 0;
  }

  .productsNavy__card{
    flex-basis:calc((100% - 24px) / 2);
  }
}

@media(max-width:560px){
  .productsNavy__inner{
    width:calc(100% - 30px);
  }

  .productsNavy__title{
    font-size:40px;
    letter-spacing:-1.4px;
  }

  .productsNavy__card{
    flex-basis:86%;
  }

  .productsNavy__image{
    height:300px;
  }
}


/* ===== OUR PRODUCTS - BOTH SIDE 40PX GAP ===== */

.productsNavy__inner {
    width: calc(100% - 80px);
    max-width: 1320px;
    margin: 0 auto;
}

/* Tablet */
@media (max-width: 992px) {
    .productsNavy__inner {
        width: calc(100% - 50px);
    }
}

/* Mobile */
@media (max-width: 600px) {
    .productsNavy__inner {
        width: calc(100% - 32px);
    }
}
/* ================= OUR TRUSTED BRANDS ================= */
.brands{
    position:relative;
    padding:110px 0;
    overflow:hidden;
    background:
    linear-gradient(180deg,#ffffff 0%,#f7f8fb 100%);
}

.brands::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(193,39,45,.04);
    top:-180px;
    right:-180px;
}

.brands::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(20,33,61,.04);
    bottom:-180px;
    left:-180px;
}

.brands-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.brands-header {
  text-align: center;
  padding: 0 40px;
  margin-bottom: 55px;
}

.brands-eyebrow {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--brand-red);
  text-transform: uppercase;
}

.brands-underline-top {
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--brand-red);
  margin: 10px auto 26px;
}

.brands-heading{

font-size:54px;
font-weight:900;
line-height:1.1;
letter-spacing:-1px;

}
.brands-heading .brand-red {
  color: var(--brand-red);
}

.brands-desc{

max-width:700px;
margin:auto;

font-size:17px;
line-height:1.9;

}


/* Marquee rows */
.marquee-row{
    overflow:hidden;
    width:100%;
}

.marquee-track{
    display:flex;
    width:max-content;
    gap:26px;
    animation: marquee 40s linear infinite;
}

.marquee-row:hover .marquee-track{
    animation-play-state:paused;
}

@keyframes marquee{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(calc(-50% - 13px));
    }
}
.brand-logo{

width:250px;
height:180px;

background:#fff;

border-radius:22px;

padding:34px;

border:1px solid #ececec;

box-shadow:
0 12px 40px rgba(0,0,0,.06);

transition:.45s;

}

.brand-logo:hover{

transform:
translateY(-12px)
scale(1.03);

box-shadow:
0 22px 60px rgba(0,0,0,.12);

}
.brand-logo img{

max-width:150px;

max-height:75px;

transition:.4s;

filter:grayscale(100%);

}

.brand-logo:hover img{

filter:none;

transform:scale(1.08);

}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .track-rtl,
  .track-ltr {
    animation: none;
  }
}

/* Responsive */
@media (max-width: 992px) {
  .brands-heading {
    font-size: 26px;
  }
  .brand-logo {
    width: 170px;
    height: 150px;
    padding: 18px;
  }
}

@media (max-width: 600px) {
  .brands-header {
    padding: 0 20px;
  }
  .brand-logo {
    width: 130px;
    height: 120px;
    padding: 14px;
    border-radius: 12px;
  }
  .marquee-track {
    gap: 16px;
  }
  .track-rtl,
  .track-ltr {
    animation-duration: 22s;
  }
}

/* ================= RESET ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-width: 0;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

:root {
  --brand-red: #c1272d;
  --brand-navy: #14213d;
}

/* ================= OUR SERVICES ================= */
.services {
  background-color: #f1f1f1;
  padding: 90px 40px 100px;
}

.services-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.services-header {
  text-align: center;
  margin-bottom: 55px;
}

.services-eyebrow {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--brand-red);
  text-transform: uppercase;
}

.services-underline-top {
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--brand-red);
  margin: 10px auto 26px;
}

.services-heading {
  font-size: 38px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 18px;
  line-height: 1.25;
}

.services-heading .brand-red {
  color: var(--brand-red);
}

.services-desc {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

.services-underline {
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--brand-red);
  margin: 20px auto 0;
}

/* Grid of cards */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.service-card {
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--brand-navy);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.22);
}

.service-img {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.service-card:hover .service-img img {
  transform: scale(1.08);
}

.service-body {
  position: relative;
  padding: 40px 28px 30px;
  color: #ffffff;
}

.service-icon {
  position: absolute;
  top: -30px;
  left: 28px;
  width: 60px;
  height: 60px;
  background-color: var(--brand-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(193,39,45,0.4);
}

.service-icon svg {
  width: 28px;
  height: 28px;
}

.service-title {
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 10px;
  margin-top: 6px;
}

.service-text {
  font-size: 14.5px;
  color: #d6d9e2;
  line-height: 1.6;
  margin-bottom: 22px;
}

.service-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: #ffffff;
}

.service-list .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-red);
  color: var(--brand-red);
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Responsive */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .services-heading {
    font-size: 28px;
  }
}

@media (max-width: 600px) {
  .services {
    padding: 70px 20px 80px;
  }
  .service-body {
    padding: 40px 22px 26px;
  }
}

/* ================= INDUSTRIES WE SERVE ================= */
.industries {
  background-color: #f1f1f1;
  padding: 90px 0 100px;
  overflow: hidden;
}

.industries-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.industries-header {
  text-align: center;
  padding: 0 40px;
  margin-bottom: 55px;
}

.industries-eyebrow {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--brand-red);
  text-transform: uppercase;
}

.industries-underline-top {
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--brand-red);
  margin: 10px auto 26px;
}

.industries-heading {
  font-size: 38px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 18px;
  line-height: 1.25;
}

.industries-heading .brand-red {
  color: var(--brand-red);
}

.industries-desc {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

.industries-underline {
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--brand-red);
  margin: 20px auto 0;
}

/* ===== INDUSTRIES CONTINUOUS AUTO SCROLL ===== */

.industries-tr
ack-outer {
  width: 100%;
  overflow: hidden;
  padding: 0 40px;
}

.industries-track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: max-content;
  animation: industries-scroll 38s linear infinite;
  will-change: transform;
}

/* Mouse card mela pogumbodhu mattum pause aagum */
.industries-track-outer:hover .industries-track {
  animation-play-state: paused;
}

@keyframes industries-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 12px));
  }
}

.industry-card {
  position: relative;
  flex: 0 0 420px;
  width: 420px;
  min-width: 420px;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--brand-navy);
  transition: transform 0.45s ease, box-shadow 0.45s ease;

}

.industry-card.peek {
  width: 90px;
  min-width: 90px;
  opacity: 0.55;
}

.industry-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.industry-img {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.industry-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.industry-card:hover .industry-img img {
  transform: scale(1.08);
}

.industry-footer {
  padding: 20px 24px 26px;
}

.industry-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin-bottom: 6px;
}

.industry-title-underline {
  display: block;
  width: 34px;
  height: 2px;
  background-color: var(--brand-red);
  margin-bottom: 14px;
}

.industry-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.industry-text {
  font-size: 14px;
  color: #c7cbd4;
  line-height: 1.55;
}

.industry-arrow {
  color: var(--brand-red);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.industry-arrow svg {
  width: 20px;
  height: 20px;
}

.industry-card:hover .industry-arrow {
  transform: translateX(4px);
}

@media (max-width: 992px) {
  .industry-card {
    flex: 0 0 340px;
    width: 340px;
    min-width: 340px;
  }

  .industries-heading {
    font-size: 26px;
  }

  .industry-img {
    height: 320px;
  }
}

@media (max-width: 600px) {
  .industries-header {
    padding: 0 20px;
  }

  .industries-track-outer {
    padding: 0 16px;
  }

  .industry-card {
    flex: 0 0 290px;
    width: 290px;
    min-width: 290px;
  }

  .industry-img {
    height: 260px;
  }
}

/* ===== INDUSTRIES BOTH SIDE GAP FIX ===== */

.industries-track-outer {
    width: 100%;
    padding: 0 40px;
    overflow: hidden;
    clip-path: none;
}

/* Tablet */
@media (max-width: 992px) {
    .industries-track-outer {
        padding: 0 25px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .industries-track-outer {
        padding: 0 16px;
    }
}
/* =========================================================
   WHY CHOOSE US — PREMIUM STATISTICS EXPERIENCE
========================================================= */

.why-premium {
  position: relative;
  min-height: 900px;
  padding: 95px 40px 110px;
  overflow: hidden;
  background: #081426;
  isolation: isolate;
}

/* Background */
.why-premium-bg {
  position: absolute;
  inset: 0;
  z-index: -4;
  overflow: hidden;
}

.why-premium-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
  animation: whyBackgroundZoom 16s ease-in-out infinite alternate;
}

.why-premium-overlay {
  position: absolute;
  inset: 0;
  z-index: -3;

  background:
    linear-gradient(
      180deg,
      rgba(5, 14, 27, 0.95) 0%,
      rgba(8, 20, 38, 0.90) 45%,
      rgba(6, 16, 31, 0.97) 100%
    );
}

/* Subtle technical grid */
.why-premium-pattern {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.12;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px
    );

  background-size: 70px 70px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 25%,
    #000 80%,
    transparent
  );
}

.why-premium-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

/* ================= HEADER ================= */

.why-premium-header {
  max-width: 760px;
  margin: 0 auto 75px;
  text-align: center;

  opacity: 0;
  transform: translateY(40px);

  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(.2, .8, .2, 1);
}

.why-premium.in-view .why-premium-header {
  opacity: 1;
  transform: translateY(0);
}

.why-premium-eyebrow {
  color: var(--brand-red);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.why-premium-line {
  display: block;
  width: 62px;
  height: 3px;
  margin: 12px auto 26px;
  border-radius: 4px;
  background: var(--brand-red);

  transform: scaleX(0);
  transition: transform 0.8s ease 0.35s;
}

.why-premium.in-view .why-premium-line {
  transform: scaleX(1);
}

.why-premium-header h2 {
  color: #ffffff;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -1px;
  margin-bottom: 22px;
}

.why-premium-header h2 span {
  display: block;
  color: var(--brand-red);
}

.why-premium-header > p:last-child {
  max-width: 670px;
  margin: 0 auto;
  color: #bfc8d6;
  font-size: 16px;
  line-height: 1.75;
}

/* ================= STAT LAYOUT ================= */

.why-stats-layout {
  position: relative;
  min-height: 580px;
}

/* ================= CENTER STAT ================= */

.why-center-stat {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;

  width: 250px;
  height: 250px;

  transform: translate(-50%, -50%) scale(0.65);
  opacity: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    opacity 0.8s ease 0.4s,
    transform 1s cubic-bezier(.2, .9, .2, 1) 0.4s;
}

.why-premium.in-view .why-center-stat {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.center-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.ring-one {
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  animation: whyRingRotate 18s linear infinite;
}

.ring-one::before,
.ring-one::after {
  content: "";
  position: absolute;

  width: 11px;
  height: 11px;
  border-radius: 50%;

  background: var(--brand-red);
  box-shadow: 0 0 20px rgba(193, 39, 45, 0.85);
}

.ring-one::before {
  left: 50%;
  top: -6px;
}

.ring-one::after {
  left: 50%;
  bottom: -6px;
}

.ring-two {
  inset: 18px;
  border: 1px dashed rgba(193, 39, 45, 0.65);
  animation: whyRingRotateReverse 13s linear infinite;
}

.center-stat-content {
  width: 180px;
  height: 180px;
  border-radius: 50%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  background:
    radial-gradient(
      circle at 35% 30%,
      #233858,
      #0e1c33 65%,
      #091426 100%
    );

  border: 1px solid rgba(255, 255, 255, 0.20);

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    0 0 55px rgba(193, 39, 45, 0.18);

  animation: centerStatPulse 3.2s ease-in-out infinite;
}

.center-number {
  color: var(--brand-red);
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
}

.center-stat-content strong {
  margin-top: 8px;
  color: #ffffff;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.center-stat-content small {
  margin-top: 5px;
  color: #aeb9c9;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

/* ================= STAT BLOCKS ================= */

.why-stat {
  position: absolute;
  z-index: 3;

  width: 350px;
  min-height: 175px;

  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  align-items: flex-start;

  padding: 26px 28px;

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.035)
    );

  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);

  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.24);

  opacity: 0;

  transition:
    opacity 0.75s ease,
    transform 0.75s cubic-bezier(.2, .8, .2, 1),
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.why-stat-one {
  top: 35px;
  left: 0;
  transform: translateX(-70px);
}

.why-stat-two {
  top: 35px;
  right: 0;
  transform: translateX(70px);
}

.why-stat-three {
  bottom: 35px;
  left: 0;
  transform: translateX(-70px);
}

.why-stat-four {
  right: 0;
  bottom: 35px;
  transform: translateX(70px);
}

.why-premium.in-view .why-stat {
  opacity: 1;
  transform: translateX(0);
}

.why-premium.in-view .why-stat-one {
  transition-delay: 0.45s;
}

.why-premium.in-view .why-stat-two {
  transition-delay: 0.65s;
}

.why-premium.in-view .why-stat-three {
  transition-delay: 0.85s;
}

.why-premium.in-view .why-stat-four {
  transition-delay: 1.05s;
}

.why-stat::before {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: inherit;

  background:
    radial-gradient(
      circle at top left,
      rgba(193, 39, 45, 0.15),
      transparent 55%
    );

  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.why-stat:hover {
  transform: translateY(-10px) !important;

  border-color: rgba(193, 39, 45, 0.55);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.15),
      rgba(255, 255, 255, 0.055)
    );

  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.38),
    0 0 35px rgba(193, 39, 45, 0.12);
}

.why-stat:hover::before {
  opacity: 1;
}

.why-stat-icon {
  width: 60px;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 16px;
  color: var(--brand-red);

  background: rgba(193, 39, 45, 0.12);
  border: 1px solid rgba(193, 39, 45, 0.42);

  transition:
    color 0.4s ease,
    background 0.4s ease,
    transform 0.5s cubic-bezier(.2, .8, .2, 1);
}

.why-stat-icon svg {
  width: 29px;
  height: 29px;
}

.why-stat:hover .why-stat-icon {
  color: #ffffff;
  background: var(--brand-red);
  transform: rotateY(180deg) scale(1.08);
}

.why-count,
.delivery-symbol {
  display: block;
  color: var(--brand-red);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
}

.why-stat h3 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.65px;
  margin-bottom: 10px;
}

.why-stat p {
  color: #b9c3d1;
  font-size: 13px;
  line-height: 1.65;
}

/* ================= CONNECTING LINES ================= */

.connector {
  position: absolute;
  z-index: 1;

  height: 1px;
  width: 190px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(193, 39, 45, 0.80),
      transparent
    );

  transform: scaleX(0);
  transition: transform 1s ease 1.2s;
}

.why-premium.in-view .connector {
  transform: scaleX(1);
}

.connector::after {
  content: "";

  position: absolute;
  top: 50%;

  width: 7px;
  height: 7px;
  border-radius: 50%;

  background: var(--brand-red);
  box-shadow: 0 0 14px var(--brand-red);

  animation: connectorLight 2.6s ease-in-out infinite;
}

.connector-top-left {
  top: 175px;
  left: 330px;
  transform-origin: right;
  rotate: 18deg;
}

.connector-top-right {
  top: 175px;
  right: 330px;
  transform-origin: left;
  rotate: -18deg;
}

.connector-bottom-left {
  left: 330px;
  bottom: 175px;
  transform-origin: right;
  rotate: -18deg;
}

.connector-bottom-right {
  right: 330px;
  bottom: 175px;
  transform-origin: left;
  rotate: 18deg;
}

.connector-top-left::after,
.connector-bottom-left::after {
  right: 0;
}

.connector-top-right::after,
.connector-bottom-right::after {
  left: 0;
}

/* ================= KEYFRAMES ================= */

@keyframes whyBackgroundZoom {
  from {
    transform: scale(1.06);
  }

  to {
    transform: scale(1.14);
  }
}

@keyframes whyRingRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes whyRingRotateReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes centerStatPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.45),
      0 0 35px rgba(193, 39, 45, 0.12);
  }

  50% {
    transform: scale(1.035);
    box-shadow:
      0 35px 90px rgba(0, 0, 0, 0.50),
      0 0 65px rgba(193, 39, 45, 0.26);
  }
}

@keyframes connectorLight {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(-50%) scale(0.8);
  }

  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.3);
  }
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1150px) {
  .why-stats-layout {
    min-height: auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .why-center-stat {
    position: relative;
    top: auto;
    left: auto;

    grid-column: 1 / -1;
    justify-self: center;

    margin-bottom: 22px;

    transform: scale(0.75);
  }

  .why-premium.in-view .why-center-stat {
    transform: scale(1);
  }

  .why-stat {
    position: relative;
    inset: auto;

    width: 100%;
    min-height: 185px;

    transform: translateY(45px);
  }

  .why-premium.in-view .why-stat {
    transform: translateY(0);
  }

  .connector {
    display: none;
  }
}

@media (max-width: 700px) {
  .why-premium {
    min-height: auto;
    padding: 70px 20px 80px;
  }

  .why-premium-header {
    margin-bottom: 50px;
  }

  .why-premium-header h2 {
    font-size: 35px;
  }

  .why-stats-layout {
    grid-template-columns: 1fr;
  }

  .why-center-stat {
    grid-column: auto;
    width: 210px;
    height: 210px;
  }

  .center-stat-content {
    width: 155px;
    height: 155px;
  }

  .center-number {
    font-size: 42px;
  }

  .why-stat {
    grid-template-columns: 52px 1fr;
    padding: 23px 20px;
  }

  .why-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
  }

  .why-stat-icon svg {
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-premium *,
  .why-premium *::before,
  .why-premium *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ================= WHAT OUR CLIENTS SAY ================= */
.testimonials {
  background-color: #f1f1f1;
  padding: 90px 40px 100px;
}

.testimonials-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.testimonials-header {
  text-align: center;
  margin-bottom: 55px;
}

.testimonials-eyebrow {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--brand-red);
  text-transform: uppercase;
}

.testimonials-underline-top {
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--brand-red);
  margin: 10px auto 26px;
}

.testimonials-heading {
  font-size: 36px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 18px;
}

.testimonials-heading .brand-red {
  color: var(--brand-red);
}

.testimonials-desc {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
}

.testimonials-underline {
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--brand-red);
  margin: 20px auto 0;
}

/* Grid of cards */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.testimonial-card {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 34px 30px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.quote-mark {
  display: block;
  font-size: 56px;
  line-height: 1;
  font-weight: 900;
  color: var(--brand-red);
  font-family: Georgia, 'Times New Roman', serif;
  margin-bottom: 12px;
}

.testimonial-text {
  font-size: 16px;
  color: var(--text-dark);
  line-height: 1.65;
  min-height: 130px;
}

.testimonial-divider {
  display: block;
  width: 100%;
  height: 0;
  border-top: 2px dashed #cfd3da;
  margin: 26px 0 24px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.author-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--brand-navy);
  border: 2px solid var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.author-icon svg {
  width: 26px;
  height: 26px;
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.author-info strong {
  font-size: 16px;
  color: var(--text-dark);
}

.author-info span {
  font-size: 13.5px;
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 992px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .testimonials-heading {
    font-size: 27px;
  }
  .testimonial-text {
    min-height: auto;
  }
}

@media (max-width: 600px) {
  .testimonials {
    padding: 70px 20px 80px;
  }
}
/* =========================================================
   TESTIMONIALS — PREMIUM MICRO ANIMATIONS
========================================================= */

.testimonials {
  position: relative;
  overflow: hidden;
}

/* Soft decorative background glow */
.testimonials::before,
.testimonials::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.18;
  pointer-events: none;
}

.testimonials::before {
  top: 40px;
  left: -120px;
  background: var(--brand-red);
}

.testimonials::after {
  right: -120px;
  bottom: 40px;
  background: var(--brand-navy);
}

/* Header reveal */
.testimonials-header {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(40px);

  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(.2, .8, .2, 1);
}

.testimonials.in-view .testimonials-header {
  opacity: 1;
  transform: translateY(0);
}

.testimonials-underline-top,
.testimonials-underline {
  transform: scaleX(0);
  transition: transform 0.8s ease 0.35s;
}

.testimonials.in-view .testimonials-underline-top,
.testimonials.in-view .testimonials-underline {
  transform: scaleX(1);
}

/* Cards initial animation */
.testimonial-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  opacity: 0;
  transform: translateY(55px) rotateX(8deg) scale(0.96);

  transform-style: preserve-3d;
  perspective: 1000px;

  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(.2, .8, .2, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

/* Stagger reveal */
.testimonials.in-view .testimonial-card:nth-child(1) {
  opacity: 1;
  transform: translateY(0) rotateX(0) scale(1);
  transition-delay: 0.18s;
}

.testimonials.in-view .testimonial-card:nth-child(2) {
  opacity: 1;
  transform: translateY(0) rotateX(0) scale(1);
  transition-delay: 0.36s;
}

.testimonials.in-view .testimonial-card:nth-child(3) {
  opacity: 1;
  transform: translateY(0) rotateX(0) scale(1);
  transition-delay: 0.54s;
}

/* Soft floating after reveal */
.testimonials.in-view .testimonial-card:nth-child(1) {
  animation: testimonialFloatOne 5.5s ease-in-out infinite 1.1s;
}

.testimonials.in-view .testimonial-card:nth-child(2) {
  animation: testimonialFloatTwo 6s ease-in-out infinite 1.3s;
}

.testimonials.in-view .testimonial-card:nth-child(3) {
  animation: testimonialFloatThree 5.8s ease-in-out infinite 1.5s;
}

/* Red corner accent */
.testimonial-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;

  width: 72px;
  height: 72px;

  background:
    linear-gradient(
      135deg,
      transparent 50%,
      rgba(193, 39, 45, 0.12) 50%
    );

  z-index: -1;
  transition: transform 0.45s ease;
}

.testimonial-card:hover::after {
  transform: scale(1.35);
}

/* Shine sweep */
.testimonial-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;

  width: 58%;
  height: 100%;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255, 255, 255, 0.75),
      transparent
    );

  transform: skewX(-20deg);
  z-index: 2;
  pointer-events: none;
}

.testimonial-card:hover::before {
  animation: testimonialShine 0.9s ease forwards;
}

/* Premium hover movement */
.testimonial-card:hover {
  animation-play-state: paused;

  transform:
    translateY(-14px)
    rotateX(2deg)
    rotateY(-2deg)
    scale(1.025);

  box-shadow:
    0 28px 60px rgba(20, 33, 61, 0.16),
    0 8px 22px rgba(193, 39, 45, 0.10);
}

/* Quote mark animation */
.quote-mark {
  transform-origin: center;
  transition:
    transform 0.45s cubic-bezier(.2, .8, .2, 1),
    color 0.35s ease;
}

.testimonial-card:hover .quote-mark {
  transform: translateY(-5px) rotate(-8deg) scale(1.16);
  color: #9f1d27;
}

/* Text subtle movement */
.testimonial-text {
  position: relative;
  transition:
    transform 0.4s ease,
    color 0.35s ease;
}

.testimonial-card:hover .testimonial-text {
  transform: translateY(-3px);
}

/* Divider animation */
.testimonial-divider {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s ease;
}

.testimonials.in-view .testimonial-divider {
  transform: scaleX(1);
}

.testimonials.in-view .testimonial-card:nth-child(1) .testimonial-divider {
  transition-delay: 0.75s;
}

.testimonials.in-view .testimonial-card:nth-child(2) .testimonial-divider {
  transition-delay: 0.9s;
}

.testimonials.in-view .testimonial-card:nth-child(3) .testimonial-divider {
  transition-delay: 1.05s;
}

/* Author icon interaction */
.author-icon {
  position: relative;
  overflow: hidden;

  transition:
    transform 0.5s cubic-bezier(.2, .8, .2, 1),
    background 0.4s ease,
    box-shadow 0.4s ease;
}

.author-icon::after {
  content: "";
  position: absolute;
  inset: 5px;

  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.35);

  transition: transform 0.7s ease;
}

.testimonial-card:hover .author-icon {
  transform: rotateY(180deg) scale(1.08);
  background: var(--brand-red);
  box-shadow: 0 10px 28px rgba(193, 39, 45, 0.28);
}

.testimonial-card:hover .author-icon::after {
  transform: rotate(180deg);
}

.testimonial-card:hover .author-icon svg {
  transform: rotateY(180deg);
}

.author-icon svg {
  position: relative;
  z-index: 1;
  transition: transform 0.5s ease;
}

/* Author info */
.author-info {
  transition: transform 0.4s ease;
}

.testimonial-card:hover .author-info {
  transform: translateX(5px);
}

.author-info strong {
  position: relative;
  display: inline-block;
}

.author-info strong::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;

  width: 0;
  height: 2px;

  background: var(--brand-red);
  transition: width 0.4s ease;
}

.testimonial-card:hover .author-info strong::after {
  width: 100%;
}

/* Floating motion */
@keyframes testimonialFloatOne {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -7px;
  }
}

@keyframes testimonialFloatTwo {
  0%,
  100% {
    translate: 0 -4px;
  }

  50% {
    translate: 0 4px;
  }
}

@keyframes testimonialFloatThree {
  0%,
  100% {
    translate: 0 2px;
  }

  50% {
    translate: 0 -6px;
  }
}

@keyframes testimonialShine {
  from {
    left: -120%;
  }

  to {
    left: 150%;
  }
}

/* Mobile-la floating reduce pannuvom */
@media (max-width: 992px) {
  .testimonials.in-view .testimonial-card {
    animation: none;
  }

  .testimonial-card:hover {
    transform: translateY(-8px) scale(1.015);
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials *,
  .testimonials *::before,
  .testimonials *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* ================= OUR TRUSTED BRANDS ================= */
.brands {
  background-color: #f1f1f1;
  padding: 90px 0 100px;
  overflow: hidden;
}

.brands-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.brands-header {
  text-align: center;
  padding: 0 40px;
  margin-bottom: 55px;
}

.brands-eyebrow {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--brand-red);
  text-transform: uppercase;
}

.brands-underline-top {
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--brand-red);
  margin: 10px auto 26px;
}

.brands-heading {
  font-size: 38px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 18px;
  line-height: 1.25;
}

.brands-heading .brand-red {
  color: var(--brand-red);
}

.brands-desc {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
}

.brands-underline {
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--brand-red);
  margin: 20px auto 0;
}

/* ================= TRUSTED BRANDS — PREMIUM CONTINUOUS MOTION ================= */

.marquee-row {
  width: 100%;
  overflow: hidden;
  margin-bottom: 32px;
  padding: 12px 0;
}

.marquee-row:last-child {
  margin-bottom: 0;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  will-change: transform;
}

/* First row moves left */
.track-rtl {
  animation: brandMoveLeft 32s linear infinite;
}

/* Second row moves right */
.track-ltr {
   animation: brands-scroll-left 32s linear infinite;
}

/* Hover panna entire row pause aagum */
.marquee-row:hover .marquee-track {
  animation-play-state: paused;
}

/* Continuous seamless movement */
@keyframes brandMoveLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 13px));
  }
}

@keyframes brands-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 13px));
  }
}

/* ================= BRAND CARD ================= */

.brand-logo {
  position: relative;
  flex: 0 0 220px;
  width: 220px;
  height: 180px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  border: 1px solid rgba(20, 33, 61, 0.08);
  border-radius: 18px;
  padding: 24px;
  overflow: hidden;

  box-shadow: 0 8px 24px rgba(20, 33, 61, 0.07);

  animation: brandFloat 5s ease-in-out infinite;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

/* Alternate cards different timing */
.brand-logo:nth-child(2n) {
  animation-delay: -1.4s;
}

.brand-logo:nth-child(3n) {
  animation-delay: -2.7s;
}

/* Subtle moving highlight */
.brand-logo::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 65%;
  height: 100%;

  background: linear-gradient(
    110deg,
    transparent,
    rgba(255, 255, 255, 0.75),
    transparent
  );

  transform: skewX(-18deg);
  transition: left 0.75s ease;
  pointer-events: none;
}

/* Bottom corporate accent */
.brand-logo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 3px;

  background: var(--brand-red);
  transform: translateX(-50%);
  transition: width 0.4s ease;
}

.brand-logo:hover {
  transform: translateY(-10px) scale(1.04);
  border-color: rgba(193, 39, 45, 0.35);
  box-shadow: 0 20px 42px rgba(20, 33, 61, 0.15);
}

.brand-logo:hover::before {
  left: 145%;
}

.brand-logo:hover::after {
  width: 72%;
}

.brand-logo img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.brand-logo:hover img {
  transform: scale(1.07);
}

/* Each card subtle floating movement */
@keyframes brandFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -7px;
  }
}

/* ================= TRUSTED BRANDS MICRO ANIMATION ================= */

.brand-logo {
  position: relative;
  overflow: hidden;

  animation: brandFloat 5s ease-in-out infinite;

  transition:
    transform 0.45s cubic-bezier(.2, .8, .2, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}

/* Every card different timing-la float aagum */
.brand-logo:nth-child(2n) {
  animation-delay: -1.3s;
}

.brand-logo:nth-child(3n) {
  animation-delay: -2.6s;
}

.brand-logo:nth-child(4n) {
  animation-delay: -3.7s;
}

/* Shine line */
.brand-logo::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;

  width: 55%;
  height: 100%;

  background: linear-gradient(
    115deg,
    transparent,
    rgba(255, 255, 255, 0.75),
    transparent
  );

  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 2;
}

/* Bottom red accent */
.brand-logo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;

  width: 0;
  height: 3px;

  background: var(--brand-red);
  transform: translateX(-50%);
  transition: width 0.4s ease;
}

.brand-logo img {
  position: relative;
  z-index: 1;

  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

  transition:
    transform 0.55s cubic-bezier(.2, .8, .2, 1),
    filter 0.4s ease;
}

.brand-logo:hover {
  transform: translateY(-10px) scale(1.035);

  border-color: rgba(193, 39, 45, 0.28);

  box-shadow:
    0 20px 42px rgba(20, 33, 61, 0.15);
}

.brand-logo:hover::before {
  animation: brandShine 0.85s ease forwards;
}

.brand-logo:hover::after {
  width: 72%;
}

.brand-logo:hover img {
  transform: scale(1.08);
}

/* Subtle up/down movement */
@keyframes brandFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -7px;
  }
}

/* Hover shine movement */
@keyframes brandShine {
  from {
    left: -100%;
  }

  to {
    left: 150%;
  }
}

/* Responsive */
@media (max-width: 992px) {
  .brand-logo {
    flex-basis: 175px;
    width: 175px;
    height: 145px;
    padding: 18px;
  }

  .track-rtl,
  .track-ltr {
    animation-duration: 27s;
  }
}

@media (max-width: 600px) {
  .marquee-track {
    gap: 16px;
  }

  .brand-logo {
    flex-basis: 135px;
    width: 135px;
    height: 115px;
    padding: 14px;
    border-radius: 13px;
  }

  .track-rtl,
  .track-ltr {
    animation-duration: 21s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .track-rtl,
  .track-ltr,
  .brand-logo {
    animation: none;
  }
}



/* ================= FOOTER / CONTACT INFO ================= */
.site-footer {
  width: 100%;
  background-color: #07111d;
  color: #ffffff;
  overflow-x: hidden;
}

.footer-top {
  width: 100%;
}

.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 70px 40px;
  display: grid;
  grid-template-columns: 360px 1px 1fr;
  gap: 45px;
  box-sizing: border-box;
}

/* Explicit column assignment + min-width: 0 - this combination is
   what prevents .footer-right from collapsing into the 1px divider column */
.footer-left {
  grid-column: 1;
  min-width: 0;
}

.footer-divider {
  grid-column: 2;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.18);
}

.footer-right {
  grid-column: 3;
  min-width: 0;
}

.footer-logo {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 22px;
}

.footer-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.footer-desc {
  font-size: 14.5px;
  color: #c7cbd4;
  line-height: 1.7;
  margin-bottom: 26px;
}

.footer-socials {
  display: flex;
  gap: 16px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.social-icon svg {
  width: 18px;
  height: 18px;
}

.social-icon:hover {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  transform: translateY(-4px);
}

.footer-contact-heading {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 36px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px 45px;
  position: relative;
  min-width: 0;
}

.contact-row-divider {
  grid-column: 1 / -1;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.18);
  margin: -10px 0;
}

.contact-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  min-width: 0;
}

.contact-icon {
  width: 26px;
  color: var(--brand-red);
  flex-shrink: 0;
  margin-top: 3px;
}

.contact-icon svg {
  width: 24px;
  height: 24px;
}

.contact-text {
  min-width: 0;
  overflow-wrap: break-word;
}

.contact-text h4 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

.contact-text p {
  font-size: 18px;
  color: #d6d9e2;
  line-height: 1.45;
}

/* ================= FOOTER BOTTOM ================= */

.footer-bottom{
    width:100%;
    padding:20px 15px;
    margin-top:40px;

    border-top:1px solid rgba(255,255,255,.15);

    text-align:center;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.footer-bottom p{
    margin:0;
    color:#ffffff;
    font-size:14px;
    line-height:1.7;
}

.footer-bottom a{
    color:#ffffff;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.footer-bottom a:hover{
    color:#c1272d;
}
/* Responsive */
@media (max-width: 1100px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .footer-left,
  .footer-right {
    grid-column: 1;
  }
  .footer-divider {
    display: none;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .contact-row-divider {
    display: none;
  }
}

@media (max-width:768px){

    .footer-bottom{
        padding:18px 20px;
    }

    .footer-bottom p{
        font-size:13px;
        line-height:1.8;
    }

}
/* ===== FIX FOOTER HEADING COLORS ===== */

.site-footer .footer-contact-heading,
.site-footer .contact-text h4,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
  color: #ffffff;
}
/* ================= FLOATING WHATSAPP ================= */

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-float svg {
  width: 45px;
  height: 45px;
}

.whatsapp-float:hover {
  transform: translateY(-5px) scale(1.06);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
}

@media (max-width: 600px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }

  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }
}
/* ==================================================
   HERO SLIDER FIX
================================================== */

.hero {
  position: relative;
  overflow: hidden;
}

.hero-slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.hero-slide .hero-bg,
.hero-slide .hero-img {
  width: 100%;
  height: 100%;
}

.hero-slide .hero-img {
  display: block;
  object-fit: cover;
}

/* Content above image */
.hero-content {
  position: relative;
  z-index: 10;
}

.hero-text {
  display: none;
  opacity: 0;
  transform: translateY(25px);
}

.hero-text.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
  animation: heroContentShow 0.8s ease both;
}

@keyframes heroContentShow {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-dots,
.hero-arrow {
  position: absolute;
  z-index: 20;
}

.hero-dot.active {
  background: #cb1d2b;
}
/* ==================================================
   HERO CONTENT ALIGNMENT FIX
================================================== */

.hero {
  position: relative;
  width: 100%;
  min-height: 720px;
  overflow: hidden;
}

/* Background slides */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.9s ease,
    visibility 0.9s ease;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
}

.hero-bg,
.hero-img {
  width: 100%;
  height: 100%;
}

.hero-img {
  display: block;
  object-fit: cover;
}

.hero-content{
    position:relative;
    z-index:5;
    max-width:1350px;
    width:100%;
    margin:0 auto;
    height:100%;
    display:flex;
    align-items:center;
}

.hero-text{
    position:absolute;
    left:0;
    top:60px;          /* fixed position */
    width:700px;

    opacity:0;
    visibility:hidden;
    transition:.5s;
    transform:translateY(40px);
}

.hero-text.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
} 

/* Controls */
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 20;
  transform: translateX(-50%);
}

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  transform: translateY(-50%);
}

.hero-arrow-prev {
  left: 25px;
}

.hero-arrow-next {
  right: 25px;
}

/* Mobile */
@media (max-width: 768px) {
  .hero {
    min-height: 680px;
  }

  .hero-content {
    width: calc(100% - 40px);
    min-height: 680px;
  }

  .hero-text {
    width: 100%;
  }

  .hero-heading {
    font-size: clamp(38px, 10vw, 56px);
  }

  .hero-arrow-prev {
    left: 10px;
  }

  .hero-arrow-next {
    right: 10px;
  }
}
/* =====================================================
   RESPONSIVE FIXES - HEADER & HERO
===================================================== */

/* ---------- Laptop ---------- */
@media (max-width:1200px){

.header-inner{
    padding:14px 25px;
}

.hero-content{
    padding:0 40px;
}

.hero-text{
    left:40px;
    width:560px;
}

.hero-heading{
    font-size:54px;
}

.hero-desc{
    font-size:17px;
}

}

/* ---------- Tablet ---------- */
@media (max-width:991px){

.header-inner{
    padding:16px 20px;
}

.logo img,
.logo-img{
    height:58px;
}

.main-nav{
    display:none;
}

.quote-btn{
    display:none;
}

.hero{
    min-height:700px;
}

.hero-content{
    padding:0 30px;
}

.hero-text{
    position:relative;
    left:auto;
    top:auto;
    transform:none !important;
    width:100%;
    max-width:650px;
}

.hero-text.active{
    position:relative;
}

.hero-heading{
    font-size:46px;
    line-height:1.1;
}

.hero-desc{
    max-width:100%;
}

.hero-actions{
    margin-top:30px;
}

.hero-arrow{
    display:none;
}

.hero-dots{
    bottom:25px;
}

}

/* ---------- Mobile ---------- */
@media (max-width:767px){

.hero{
    min-height:650px;
}

.hero-content{
    padding:90px 22px 70px;
    align-items:center;
}

.hero-text{
    width:100%;
}

.hero-tagline{
    font-size:12px;
    letter-spacing:1px;
}

.hero-heading{
    font-size:34px;
    line-height:1.15;
    min-height:auto;
    margin-bottom:18px;
}

.hero-desc{
    font-size:15px;
    line-height:1.7;
    min-height:auto;
}

.hero-actions{
    flex-direction:column;
    gap:14px;
}

.btn-hero-red,
.btn-hero-outline{
    width:100%;
    justify-content:center;
}

.hero-overlay{
    background:
    linear-gradient(
    180deg,
    rgba(242,242,242,.94),
    rgba(242,242,242,.82),
    rgba(20,33,61,.15)
    );
}

.hero-img{
    object-position:center;
}

.hero-dots{
    left:50%;
    transform:translateX(-50%);
    bottom:20px;
}

}

/* ---------- Small Mobile ---------- */
@media (max-width:480px){

.header-inner{
    padding:12px 16px;
}

.logo img,
.logo-img{
    height:48px;
}

.hero{
    min-height:600px;
}

.hero-content{
    padding:80px 18px 60px;
}

.hero-heading{
    font-size:28px;
}

.hero-desc{
    font-size:14px;
}

.btn-hero-red,
.btn-hero-outline{
    padding:14px;
    font-size:13px;
}

.hero-dot{
    width:10px;
    height:10px;
}

.hero-dot.active{
    width:28px;
}

} 
/* =====================================================
   RESPONSIVE FIXES - ABOUT SECTION + PRODUCTS CAROUSEL
===================================================== */

/* =====================================================
   ABOUT SECTION - LARGE TABLET
===================================================== */
@media (max-width: 1200px) {

  .about-section {
    padding: 70px 30px 85px;
  }

  .about-wrap {
    gap: 45px;
  }

  .about-image {
    width: 470px;
    height: 470px;
  }

  .about-content {
    min-width: 0;
    flex: 1 1 430px;
  }

  .content-heading {
    font-size: 34px;
  }

  .stats-grid {
    gap: 14px;
  }

  .stat-card {
    padding: 18px;
    gap: 14px;
  }

  .stat-icon {
    width: 48px;
    height: 48px;
  }

  .stat-icon svg {
    width: 28px;
    height: 28px;
  }
}

/* =====================================================
   ABOUT SECTION - TABLET
===================================================== */
@media (max-width: 992px) {

  .about-section {
    padding: 65px 24px 75px;
  }

  .about-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .eyebrow {
    margin-bottom: 5px;
  }

  .eyebrow h4 {
    font-size: 22px;
  }

  .about-image {
    width: min(100%, 520px);
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }

  .about-content {
    width: 100%;
    min-width: 0;
    max-width: 720px;
    margin: 0 auto;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-heading {
    font-size: 32px;
    text-align: center;
  }

  .content-para {
    max-width: 100%;
    text-align: center;
  }

  .company-badge {
    width: 125px;
    height: 125px;
    right: 22px;
    bottom: 22px;
  }

  .badge-center {
    width: 72px;
    height: 72px;
  }

  .badge-center strong {
    font-size: 21px;
  }

  .badge-outer-text span {
    transform-origin: 0 48px;
  }

  .badge-outer-text span:nth-child(1)  { transform: rotate(0deg) translateY(-48px); }
  .badge-outer-text span:nth-child(2)  { transform: rotate(20deg) translateY(-48px); }
  .badge-outer-text span:nth-child(3)  { transform: rotate(40deg) translateY(-48px); }
  .badge-outer-text span:nth-child(4)  { transform: rotate(60deg) translateY(-48px); }
  .badge-outer-text span:nth-child(5)  { transform: rotate(80deg) translateY(-48px); }
  .badge-outer-text span:nth-child(6)  { transform: rotate(100deg) translateY(-48px); }
  .badge-outer-text span:nth-child(7)  { transform: rotate(120deg) translateY(-48px); }
  .badge-outer-text span:nth-child(8)  { transform: rotate(140deg) translateY(-48px); }
  .badge-outer-text span:nth-child(9)  { transform: rotate(160deg) translateY(-48px); }
  .badge-outer-text span:nth-child(10) { transform: rotate(180deg) translateY(-48px); }
  .badge-outer-text span:nth-child(11) { transform: rotate(200deg) translateY(-48px); }
  .badge-outer-text span:nth-child(12) { transform: rotate(220deg) translateY(-48px); }
  .badge-outer-text span:nth-child(13) { transform: rotate(240deg) translateY(-48px); }
  .badge-outer-text span:nth-child(14) { transform: rotate(260deg) translateY(-48px); }
  .badge-outer-text span:nth-child(15) { transform: rotate(280deg) translateY(-48px); }
  .badge-outer-text span:nth-child(16) { transform: rotate(300deg) translateY(-48px); }
  .badge-outer-text span:nth-child(17) { transform: rotate(320deg) translateY(-48px); }
  .badge-outer-text span:nth-child(18) { transform: rotate(340deg) translateY(-48px); }
}

/* =====================================================
   ABOUT SECTION - MOBILE
===================================================== */
@media (max-width: 600px) {

  .about-section {
    padding: 55px 18px 65px;
  }

  .about-wrap {
    gap: 30px;
  }

  .eyebrow {
    margin-bottom: 0;
  }

  .eyebrow h4 {
    font-size: 19px;
  }

  .eyebrow-underline {
    width: 48px;
  }

  .about-image {
    width: 100%;
    max-width: 360px;
  }

  .about-image-tilt {
    border-radius: 35px 8px 35px 8px;
  }

  .image-border-line {
    inset: 10px;
    border-radius: 28px 6px 28px 6px;
  }

  .about-corner {
    width: 58px;
    height: 58px;
  }

  .corner-one {
    border-top-width: 5px;
    border-left-width: 5px;
  }

  .corner-two {
    border-right-width: 5px;
    border-bottom-width: 5px;
  }

  .company-badge {
    width: 96px;
    height: 96px;
    right: 15px;
    bottom: 15px;
  }

  .badge-center {
    width: 58px;
    height: 58px;
  }

  .badge-center strong {
    font-size: 17px;
  }

  .badge-center small {
    font-size: 7px;
    margin-top: 3px;
  }

  .badge-outer-text {
    display: none;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 28px;
  }

  .stat-card {
    min-height: 88px;
    padding: 16px;
    border-radius: 12px;
  }

  .stat-icon {
    width: 46px;
    height: 46px;
  }

  .stat-text strong {
    font-size: 23px;
  }

  .stat-text em {
    font-size: 13px;
  }

  .content-heading {
    font-size: 25px;
    line-height: 1.25;
    margin-bottom: 16px;
  }

  .content-para {
    font-size: 15px;
    line-height: 1.7;
  }
}

/* =====================================================
   ABOUT SECTION - SMALL MOBILE
===================================================== */
@media (max-width: 380px) {

  .about-section {
    padding-left: 14px;
    padding-right: 14px;
  }

  .about-image {
    max-width: 300px;
  }

  .content-heading {
    font-size: 22px;
  }

  .stat-card {
    padding: 14px;
  }
}


/* =====================================================
   PRODUCTS CAROUSEL - LARGE TABLET
===================================================== */
@media (max-width: 1200px) {

  .productsNavy {
    padding: 90px 0;
  }

  .productsNavy__inner {
    width: min(100% - 40px, 1180px);
  }

  .productsNavy__title {
    font-size: clamp(38px, 5vw, 52px);
  }

  .productsNavy__card {
    flex-basis: calc((100% - 48px) / 3);
  }

  .productsNavy__image {
    height: 280px;
  }
}

/* =====================================================
   PRODUCTS CAROUSEL - TABLET
===================================================== */
@media (max-width: 820px) {

  .productsNavy {
    padding: 75px 0;
  }

  .productsNavy__inner {
    width: calc(100% - 34px);
  }

  .productsNavy__header {
    margin-bottom: 38px;
  }

  .productsNavy__title {
    font-size: 42px;
    letter-spacing: -1px;
  }

  .productsNavy__desc {
    font-size: 14px;
    line-height: 1.7;
  }

  .productsNavy__track {
    gap: 18px;
  }

  .productsNavy__card {
    flex: 0 0 calc((100% - 18px) / 2);
  }

  .productsNavy__image {
    height: 260px;
  }

  .productsNavy__content {
    padding: 19px 18px 21px;
  }

  .productsNavy__content h3 {
    font-size: 19px;
  }
}

/* =====================================================
   PRODUCTS CAROUSEL - MOBILE
===================================================== */
@media (max-width: 560px) {

  .productsNavy {
    padding: 65px 0 70px;
  }

  .productsNavy__inner {
    width: calc(100% - 28px);
  }

  .productsNavy__header {
    margin-bottom: 32px;
  }

  .productsNavy__eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
  }

  .productsNavy__title {
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -0.8px;
  }

  .productsNavy__desc {
    margin-top: 16px;
    font-size: 13.5px;
    line-height: 1.65;
  }

  .productsNavy__controls {
    margin-top: 22px;
  }

  .productsNavy__btn {
    width: 44px;
    height: 44px;
  }

  .productsNavy__viewport {
    overflow: hidden;
    touch-action: pan-y;
  }

  .productsNavy__track {
    gap: 14px;
  }

  .productsNavy__card {
    flex: 0 0 88%;
  }

  .productsNavy__link {
    border-radius: 15px;
  }

  .productsNavy__image {
    height: 245px;
  }

  .productsNavy__content {
    padding: 18px 17px 20px;
  }

  .productsNavy__content h3 {
    font-size: 18px;
    margin-bottom: 14px;
  }

  .productsNavy__more {
    font-size: 10px;
  }

  .productsNavy__progress {
    width: 72%;
    margin-top: 28px;
  }
}

/* =====================================================
   PRODUCTS CAROUSEL - SMALL MOBILE
===================================================== */
@media (max-width: 380px) {

  .productsNavy__inner {
    width: calc(100% - 22px);
  }

  .productsNavy__title {
    font-size: 28px;
  }

  .productsNavy__card {
    flex-basis: 91%;
  }

  .productsNavy__image {
    height: 215px;
  }

  .productsNavy__content {
    padding: 16px;
  }
}
/* =====================================================
   RESPONSIVE FIXES - BRANDS
===================================================== */

@media (max-width:1200px){

.brands{
    padding:90px 0;
}

.brands-inner{
    width:calc(100% - 40px);
}

.brands-heading{
    font-size:46px;
}

.brand-logo{
    width:220px;
    height:160px;
    padding:24px;
}

.brand-logo img{
    max-width:130px;
}

}

@media (max-width:992px){

.brands{
    padding:80px 0;
}

.brands-header{
    padding:0;
}

.brands-heading{
    font-size:34px;
}

.brands-desc{
    font-size:15px;
    line-height:1.7;
}

.brand-logo{
    width:180px;
    height:135px;
    padding:20px;
}

.brand-logo img{
    max-width:110px;
}

.marquee-track{
    gap:18px;
}

}

@media (max-width:768px){

.brands{
    padding:70px 18px;
}

.brands-inner{
    width:100%;
}

.brands-eyebrow{
    font-size:16px;
}

.brands-heading{
    font-size:28px;
    line-height:1.2;
}

.brands-desc{
    font-size:14px;
}

.brand-logo{
    width:145px;
    height:115px;
    padding:16px;
    border-radius:14px;
}

.brand-logo img{
    max-width:90px;
}

.marquee-track{
    gap:14px;
}

}

/* =====================================================
   RESPONSIVE FIXES - SERVICES
===================================================== */

@media (max-width:1200px){

.services{
    padding:85px 30px;
}

.services-grid{
    gap:22px;
}

.service-img{
    height:200px;
}

}

@media (max-width:992px){

.services{
    padding:75px 24px;
}

.services-grid{
    grid-template-columns:repeat(2,1fr);
}

.service-title{
    font-size:20px;
}

.service-body{
    padding:36px 24px 26px;
}

}

@media (max-width:768px){

.services{
    padding:65px 18px;
}

.services-heading{
    font-size:28px;
}

.services-desc{
    font-size:14px;
}

.services-grid{
    grid-template-columns:1fr;
    gap:22px;
}

.service-card{
    max-width:500px;
    margin:auto;
}

.service-img{
    height:220px;
}

.service-body{
    padding:34px 22px 24px;
}

.service-icon{
    width:54px;
    height:54px;
}

.service-title{
    font-size:19px;
}

.service-text{
    font-size:14px;
}

.service-list li{
    font-size:14px;
}

}

/* =====================================================
   RESPONSIVE FIXES - INDUSTRIES
===================================================== */

@media (max-width:1200px){

.industries{
    padding:85px 0;
}

.industry-card{
    width:360px;
    min-width:360px;
    flex:0 0 360px;
}

.industry-img{
    height:330px;
}

}

@media (max-width:992px){

.industries-header{
    padding:0 24px;
}

.industries-heading{
    font-size:30px;
}

.industries-desc{
    font-size:15px;
}

.industries-track-outer{
    padding:0 24px;
}

.industry-card{
    width:320px;
    min-width:320px;
    flex:0 0 320px;
}

.industry-img{
    height:280px;
}

.industry-title{
    font-size:18px;
}

}

@media (max-width:768px){

.industries{
    padding:70px 0;
}

.industries-header{
    padding:0 18px;
}

.industries-eyebrow{
    font-size:16px;
}

.industries-heading{
    font-size:27px;
}

.industries-desc{
    font-size:14px;
}

.industries-track-outer{
    padding:0 14px;
}

.industry-card{
    width:270px;
    min-width:270px;
    flex:0 0 270px;
}

.industry-img{
    height:230px;
}

.industry-footer{
    padding:18px;
}

.industry-title{
    font-size:17px;
}

.industry-text{
    font-size:13px;
}

.industry-arrow svg{
    width:18px;
    height:18px;
}

}
/* =====================================================
   FINAL RESPONSIVE FIXES
   WHY CHOOSE + TESTIMONIALS + FOOTER + GLOBAL
===================================================== */

/* ================= WHY CHOOSE ================= */

@media (max-width:1200px){

.why-premium{
    padding:90px 30px;
}

.why-premium-inner{
    max-width:1100px;
}

.why-stat{
    width:310px;
}

.connector{
    display:none;
}

}

@media (max-width:992px){

.why-premium{
    padding:75px 24px;
}

.why-premium-header{
    margin-bottom:45px;
}

.why-premium-header h2{
    font-size:38px;
}

.why-stats-layout{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.why-center-stat{
    position:relative;
    inset:auto;
    transform:none !important;
    margin:auto;
    grid-column:1/-1;
}

.why-stat{
    position:relative;
    inset:auto;
    width:100%;
    min-height:170px;
}

}

@media (max-width:768px){

.why-premium{
    padding:65px 18px;
}

.why-premium-header h2{
    font-size:30px;
}

.why-premium-header p{
    font-size:14px;
}

.why-stats-layout{
    grid-template-columns:1fr;
}

.why-center-stat{
    width:200px;
    height:200px;
}

.center-stat-content{
    width:150px;
    height:150px;
}

.center-number{
    font-size:40px;
}

.why-stat{
    display:flex;
    gap:16px;
    align-items:flex-start;
    padding:20px;
}

.why-stat h3{
    font-size:15px;
}

.why-stat p{
    font-size:13px;
}

}

/* ================= TESTIMONIALS ================= */

@media (max-width:992px){

.testimonials{
    padding:75px 24px;
}

.testimonials-grid{
    grid-template-columns:1fr;
    gap:22px;
}

.testimonial-card{
    max-width:700px;
    margin:auto;
}

.testimonials-heading{
    font-size:30px;
}

}

@media (max-width:768px){

.testimonials{
    padding:65px 18px;
}

.testimonials-heading{
    font-size:26px;
}

.testimonials-desc{
    font-size:14px;
}

.testimonial-card{
    padding:24px 20px;
}

.testimonial-text{
    font-size:14px;
    min-height:auto;
}

.author-icon{
    width:48px;
    height:48px;
}

.author-info strong{
    font-size:15px;
}

.author-info span{
    font-size:13px;
}

}

/* ================= FOOTER ================= */

@media (max-width:992px){

.footer-inner{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:35px;
}

.footer-logo img{
    max-width:170px;
}

}

@media (max-width:768px){

.site-footer{
    padding:60px 18px 30px;
}

.footer-inner{
    grid-template-columns:1fr !important;
    text-align:center;
}

.footer-left,
.footer-right,
.footer-links,
.footer-contact{
    width:100%;
}

.footer-links ul{
    padding:0;
}

.footer-links li{
    margin-bottom:10px;
}

.footer-contact p{
    justify-content:center;
}

.footer-social{
    justify-content:center;
    display:flex;
    gap:14px;
    margin-top:18px;
}

.footer-bottom{
    text-align:center;
    font-size:13px;
}

}

/* ================= GLOBAL FIXES ================= */

html{
    overflow-x:hidden;
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
}

section{
    overflow:hidden;
}

img{
    max-width:100%;
    height:auto;
}

.container,
.about-wrap,
.productsNavy__inner,
.services-inner,
.industries-inner,
.brands-inner,
.testimonials-inner,
.footer-inner{
    width:100%;
}

iframe{
    max-width:100%;
}

table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
}

button,
a{
    -webkit-tap-highlight-color:transparent;
}

*{
    word-wrap:break-word;
}
form.enquiry{
  max-width:1080px;
  margin:0 auto;
  text-align:left;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:20px;
}
.enquiry input,
.enquiry textarea{
  width:100%;
  border:1px solid var(--border-gray);
  background:#fbfbfc;
  padding:16px 18px;
  font-family:'Poppins', sans-serif;
  font-size:14px;
  color:#444;
  border-radius:2px;
}
.enquiry input:focus,
.enquiry textarea:focus{
  outline:none;
  border-color:var(--red);
}
.enquiry textarea{
  min-height:160px;
  resize:vertical;
  margin-bottom:30px;
}
.btn-send{
  display:inline-block;
  background:var(--red);
  color:#fff;
  border:none;
  padding:16px 38px;
  font-size:15px;
  font-weight:600;
  letter-spacing:.3px;
  border-radius:2px;
  cursor:pointer;
  transition:background .2s ease;
}
.btn-send:hover{
  background:#c81a1f;
}
/* ================= QUOTE POPUP ================= */

.quote-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.6);

    display:none;

    justify-content:center;
    align-items:center;

    z-index:9999;
}

.quote-modal.active{
    display:flex;
}

.quote-box{
    width:650px;
    max-width:95%;
    background:#fff;
    border-radius:12px;
    padding:35px;
    position:relative;
}

.quote-close{
    position:absolute;
    right:18px;
    top:12px;
    font-size:32px;
    border:none;
    background:none;
    cursor:pointer;
}

.form-row{
    display:flex;
    gap:15px;
    margin-bottom:15px;
}

.form-row input{
    flex:1;
}

.quote-box input,
.quote-box textarea{
    width:100%;
    padding:12px;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:15px;
}

.quote-box textarea{
    height:140px;
    resize:none;
    margin-bottom:18px;
}

.btn-send{
    background:#c1272d;
    color:#fff;
    border:none;
    padding:14px 28px;
    border-radius:6px;
    cursor:pointer;
}
/* =========================================================
   ABOUT COMPANY — 3D CINEMATIC PORTAL
========================================================= */

.about-portal {
  position: relative;

  width: 100%;
  max-width: 570px;
  height: 590px;

  display: flex;
  align-items: center;
  justify-content: center;

  perspective: 1500px;
  transform-style: preserve-3d;
  isolation: isolate;
}

/* =========================================================
   BACK DEPTH LAYERS
========================================================= */

.portal-depth {
  position: absolute;

  width: 77%;
  height: 83%;

  border-radius: 42px 12px 42px 12px;

  pointer-events: none;
}

.portal-depth-one {
  z-index: 0;

  background:
    linear-gradient(
      145deg,
      #182943,
      #091423
    );

  transform: translate(-32px, 25px) rotate(-6deg);

  animation: portalDepthOne 7s ease-in-out infinite;
}

.portal-depth-two {
  z-index: 1;

  border: 2px solid rgba(193, 39, 45, 0.5);

  transform: translate(30px, -22px) rotate(5deg);

  animation: portalDepthTwo 7s ease-in-out infinite reverse;
}

@keyframes portalDepthOne {
  0%,
  100% {
    transform:
      translate(-32px, 25px)
      rotate(-6deg)
      scale(0.96);
  }

  50% {
    transform:
      translate(-20px, 13px)
      rotate(-3deg)
      scale(1.01);
  }
}

@keyframes portalDepthTwo {
  0%,
  100% {
    transform:
      translate(30px, -22px)
      rotate(5deg)
      scale(0.97);
  }

  50% {
    transform:
      translate(18px, -10px)
      rotate(2deg)
      scale(1.02);
  }
}

/* =========================================================
   ORBIT RING
========================================================= */

.portal-orbit {
  position: absolute;
  z-index: 2;

  width: 94%;
  height: 94%;

  border: 1px dashed rgba(20, 33, 61, 0.25);
  border-radius: 50%;

  animation: portalOrbitRotate 24s linear infinite;
  pointer-events: none;
}

.portal-orbit::before {
  content: "";

  position: absolute;
  inset: 28px;

  border-top: 2px solid rgba(193, 39, 45, 0.72);
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;

  border-radius: 50%;
}

.orbit-dot {
  position: absolute;

  width: 12px;
  height: 12px;

  background: var(--brand-red);
  border: 3px solid #ffffff;
  border-radius: 50%;

  box-shadow:
    0 0 0 7px rgba(193, 39, 45, 0.12),
    0 0 20px rgba(193, 39, 45, 0.48);
}

.orbit-dot-one {
  top: 7%;
  left: 25%;
}

.orbit-dot-two {
  right: 12%;
  bottom: 17%;
}

@keyframes portalOrbitRotate {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   3D SCENE
========================================================= */

.portal-scene {
  position: relative;
  z-index: 5;

  width: 83%;
  height: 86%;

  transform-style: preserve-3d;

  animation: portalSceneMove 8s ease-in-out infinite;
}

@keyframes portalSceneMove {
  0%,
  100% {
    transform:
      rotateX(2deg)
      rotateY(-9deg)
      translateZ(0)
      translateY(7px)
      scale(0.97);
  }

  25% {
    transform:
      rotateX(-2deg)
      rotateY(-3deg)
      translateZ(45px)
      translateY(-5px)
      scale(1);
  }

  50% {
    transform:
      rotateX(2deg)
      rotateY(9deg)
      translateZ(75px)
      translateY(-12px)
      scale(1.025);
  }

  75% {
    transform:
      rotateX(-1deg)
      rotateY(3deg)
      translateZ(35px)
      translateY(-3px)
      scale(1);
  }
}

/* Main card */

.portal-card {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #0b1728;
  border-radius: 46px 10px 46px 10px;

  box-shadow:
    0 42px 85px rgba(9, 20, 36, 0.28),
    0 15px 38px rgba(0, 0, 0, 0.14);

  transform-style: preserve-3d;

  transition:
    box-shadow 0.5s ease,
    filter 0.5s ease;
}

.about-portal:hover .portal-card {
  box-shadow:
    0 55px 110px rgba(9, 20, 36, 0.36),
    0 18px 45px rgba(193, 39, 45, 0.15);
}

/* =========================================================
   IMAGE ANIMATION
========================================================= */

.portal-image-wrap {
  position: absolute;
  inset: 0;

  overflow: hidden;
}

.portal-image {
  width: 118%;
  height: 118%;

  position: absolute;
  top: -9%;
  left: -9%;

  display: block;

  object-fit: cover;
  object-position: center;

  animation: portalImageJourney 12s ease-in-out infinite;

  filter:
    contrast(1.05)
    saturate(0.92)
    brightness(0.96);

  will-change: transform;
}

@keyframes portalImageJourney {
  0% {
    transform:
      scale(1.03)
      translate3d(-2%, 1%, 0)
      rotate(-1deg);
  }

  25% {
    transform:
      scale(1.13)
      translate3d(3%, -2%, 0)
      rotate(0.5deg);
  }

  50% {
    transform:
      scale(1.22)
      translate3d(-1%, -4%, 0)
      rotate(1deg);
  }

  75% {
    transform:
      scale(1.12)
      translate3d(-4%, 1%, 0)
      rotate(-0.5deg);
  }

  100% {
    transform:
      scale(1.03)
      translate3d(-2%, 1%, 0)
      rotate(-1deg);
  }
}

/* Image depth overlay */

.portal-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 38%,
      transparent 0%,
      transparent 38%,
      rgba(7, 15, 27, 0.15) 70%,
      rgba(7, 15, 27, 0.6) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 17, 30, 0.02) 25%,
      rgba(8, 17, 30, 0.2) 58%,
      rgba(8, 17, 30, 0.88) 100%
    );
}

/* Moving scan light */

.portal-light-scan {
  position: absolute;
  z-index: 3;

  top: -25%;
  left: -75%;

  width: 44%;
  height: 155%;

  pointer-events: none;

  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(193, 39, 45, 0.12) 62%,
    transparent 100%
  );

  transform: skewX(-22deg);

  animation: portalLightScan 6s ease-in-out infinite;
}

@keyframes portalLightScan {
  0%,
  30% {
    left: -75%;
  }

  75%,
  100% {
    left: 145%;
  }
}

/* Reflection movement */

.portal-reflection {
  position: absolute;
  z-index: 4;

  top: -15%;
  right: -35%;

  width: 65%;
  height: 65%;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.16),
      transparent 68%
    );

  filter: blur(5px);

  animation: portalReflection 7s ease-in-out infinite;
}

@keyframes portalReflection {
  0%,
  100% {
    transform: translate(0, 0) scale(0.85);
    opacity: 0.35;
  }

  50% {
    transform: translate(-90px, 110px) scale(1.2);
    opacity: 0.8;
  }
}

/* =========================================================
   CORNER DETAILS
========================================================= */

.portal-corner {
  position: absolute;
  z-index: 7;

  width: 115px;
  height: 115px;

  pointer-events: none;
}

.portal-corner-top {
  top: 15px;
  left: 15px;

  border-top: 4px solid var(--brand-red);
  border-left: 4px solid var(--brand-red);

  border-radius: 30px 0 0 0;

  animation: portalCornerTop 4s ease-in-out infinite;
}

.portal-corner-bottom {
  right: 15px;
  bottom: 15px;

  border-right: 4px solid rgba(255, 255, 255, 0.75);
  border-bottom: 4px solid rgba(255, 255, 255, 0.75);

  border-radius: 0 0 30px 0;

  animation: portalCornerBottom 4s ease-in-out infinite;
}

@keyframes portalCornerTop {
  0%,
  100% {
    width: 75px;
    height: 75px;
  }

  50% {
    width: 145px;
    height: 145px;
  }
}

@keyframes portalCornerBottom {
  0%,
  100% {
    width: 135px;
    height: 135px;
  }

  50% {
    width: 70px;
    height: 70px;
  }
}

/* =========================================================
   GLASS INFORMATION PANEL
========================================================= */

.portal-info {
  position: absolute;
  z-index: 8;

  left: 24px;
  right: 24px;
  bottom: 23px;

  min-height: 105px;

  display: grid;
  grid-template-columns: auto 1fr 4px;
  align-items: center;
  gap: 17px;

  padding: 18px 20px;

  background:
    linear-gradient(
      135deg,
      rgba(7, 17, 31, 0.91),
      rgba(27, 38, 58, 0.76)
    );

  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 14px;

  box-shadow:
    0 22px 45px rgba(0, 0, 0, 0.3);

  backdrop-filter: blur(15px);

  animation: portalInfoFloat 4.5s ease-in-out infinite;
}

.portal-info-number {
  color: var(--brand-red);

  font-size: 36px;
  font-weight: 900;
  line-height: 1;
}

.portal-info-text {
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.portal-info-text span {
  display: block;
  margin-bottom: 5px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.portal-info-text strong {
  display: block;

  color: #ffffff;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.portal-info-line {
  width: 4px;
  height: 55px;

  background: var(--brand-red);
  border-radius: 20px;

  box-shadow: 0 0 15px rgba(193, 39, 45, 0.5);

  animation: portalInfoLine 2.5s ease-in-out infinite;
}

@keyframes portalInfoFloat {
  0%,
  100% {
    transform: translateY(0) translateZ(35px);
  }

  50% {
    transform: translateY(-8px) translateZ(55px);
  }
}

@keyframes portalInfoLine {
  0%,
  100% {
    height: 35px;
  }

  50% {
    height: 62px;
  }
}

/* =========================================================
   MOVING FLOOR SHADOW
========================================================= */

.portal-shadow {
  position: absolute;
  z-index: -1;

  left: 15%;
  bottom: 5px;

  width: 70%;
  height: 45px;

  border-radius: 50%;

  background: rgba(10, 22, 40, 0.25);

  filter: blur(18px);

  animation: portalShadow 8s ease-in-out infinite;
}

@keyframes portalShadow {
  0%,
  100% {
    transform: scaleX(0.75);
    opacity: 0.32;
  }

  50% {
    transform: scaleX(1.1);
    opacity: 0.58;
  }
}

/* Hover-la animation more dynamic */

.about-portal:hover .portal-scene {
  animation-duration: 5s;
}

.about-portal:hover .portal-image {
  animation-duration: 8s;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
  .about-wrap {
    grid-template-columns: minmax(390px, 490px) minmax(0, 1fr);
    gap: 45px;
  }

  .about-portal {
    height: 520px;
  }

  .content-heading {
    font-size: 34px;
  }
}

@media (max-width: 850px) {
  .about-wrap {
    grid-template-columns: 1fr;
  }

  .eyebrow {
    grid-column: 1;
  }

  .about-portal {
    max-width: 570px;
    height: 580px;
    margin: 0 auto 25px;
  }
}

@media (max-width: 560px) {
  .about-section {
    padding: 55px 18px 75px;
  }

  .about-portal {
    height: 430px;
  }

  .portal-scene {
    width: 87%;
    height: 86%;
  }

  .portal-card {
    border-radius: 30px 8px 30px 8px;
  }

  .portal-info {
    left: 13px;
    right: 13px;
    bottom: 13px;

    min-height: 88px;

    padding: 13px 14px;
    gap: 11px;
  }

  .portal-info-number {
    font-size: 28px;
  }

  .portal-info-text {
    padding-left: 11px;
  }

  .portal-info-text strong {
    font-size: 11px;
  }

  .portal-orbit {
    width: 97%;
    height: 97%;
  }

  .portal-depth {
    width: 78%;
    height: 80%;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .content-heading {
    font-size: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-depth,
  .portal-orbit,
  .portal-scene,
  .portal-image,
  .portal-light-scan,
  .portal-reflection,
  .portal-corner,
  .portal-info,
  .portal-info-line,
  .portal-shadow {
    animation: none !important;
  }
}

/* =========================================
   TESTIMONIALS SECTION
========================================= */

.testimonials {
    --testimonial-red: #c1272d;
    --testimonial-navy: #14213d;

    width: 100%;
    padding: 60px 40px 70px;

    background: #f8fafc;

    font-family: Arial, Helvetica, sans-serif;

    overflow: hidden;
}

.testimonials *,
.testimonials *::before,
.testimonials *::after {
    box-sizing: border-box;
}

/* MAIN CONTAINER */

.testimonials-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}


/* =========================================
   SECTION HEADER
========================================= */

.testimonials-header {
    text-align: center;
    margin-bottom: 45px;
}

.testimonials-label {
    display: inline-block;

    position: relative;

    margin: 0 0 38px;

    font-size: 28px;
    font-weight: 800;

    color: var(--testimonial-red);

    line-height: 1.3;
}

.testimonials-label::after {
    content: "";

    position: absolute;
    bottom: -5px;
    left: 50%;

    transform: translateX(-50%);

    width: 80%;
    height: 1px;

    background: var(--testimonial-red);
}


/* MAIN HEADING */

.testimonials-heading {
    margin: 0;

    font-size: clamp(30px, 3.5vw, 56px);

    font-weight: 800;

    line-height: 1.22;

    letter-spacing: -0.8px;

    color: #080808;
}

.testimonials-heading span {
    display: block;
    color: var(--testimonial-red);
}


/* DESCRIPTION */

.testimonials-description {
    margin: 24px auto 0;

    font-size: 22px;
    font-weight: 500;

    line-height: 1.35;

    color: #555b63;
}

.testimonials-small-line {
    display: block;

    width: 105px;
    height: 1px;

    margin: 20px auto 0;

    background: var(--testimonial-red);
}


/* =========================================
   TESTIMONIAL GRID
========================================= */

.testimonials-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;

    align-items: stretch;

    perspective: 1200px;
}


/* =========================================
   TESTIMONIAL CARD
========================================= */

.testimonial-card {
    position: relative;

    min-width: 0;
    min-height: 510px;

    background: #ffffff;

    border: 1px solid #d6d8dc;

    border-radius: 34px;

    overflow: hidden;

    opacity: 1;

    transform: translateY(0);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;

    transform-style: preserve-3d;
}


/* SCROLL REVEAL */

.testimonials.js-animations .testimonial-card {
    opacity: 0;

    transform: translateY(45px) scale(0.96);
}

.testimonials.js-animations .testimonial-card.is-visible {
    animation: testimonialReveal 0.8s ease forwards;
}

.testimonials.js-animations .testimonial-card:nth-child(2).is-visible {
    animation-delay: 0.15s;
}

.testimonials.js-animations .testimonial-card:nth-child(3).is-visible {
    animation-delay: 0.3s;
}

@keyframes testimonialReveal {

    from {
        opacity: 0;
        transform: translateY(45px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* HOVER EFFECT */

.testimonial-card:hover {
    transform: translateY(-10px) rotateY(2deg);

    border-color: rgba(193, 39, 45, 0.35);

    box-shadow:
        0 22px 50px rgba(20, 33, 61, 0.12);
}


/* INNER CONTENT */

.testimonial-card-inner {
    display: flex;

    flex-direction: column;

    height: 100%;

    padding: 35px 20px 40px;
}


/* =========================================
   QUOTE ICON
========================================= */

.testimonial-quote {
    height: 75px;

    display: flex;
    align-items: flex-start;

    color: #e00012;
}

.testimonial-quote span {
    display: block;

    font-family: Georgia, serif;

    font-size: 100px;
    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -12px;

    transition: transform 0.5s ease;
}

.testimonial-card:hover .testimonial-quote span {
    transform: rotate(-12deg) scale(1.12);
}


/* =========================================
   TESTIMONIAL TEXT
========================================= */

.testimonial-text {
    margin: 5px 0 0;

    color: #111111;

    font-size: 22px;
    font-weight: 500;

    line-height: 1.58;

    letter-spacing: 0;
}


/* =========================================
   DASHED DIVIDER
========================================= */

.testimonial-divider {
    width: 100%;
    height: 1px;

    margin-top: auto;
    margin-bottom: 52px;

    background-image: repeating-linear-gradient(
        to right,
        #111111 0,
        #111111 8px,
        transparent 8px,
        transparent 16px
    );
}


/* =========================================
   AUTHOR DETAILS
========================================= */

.testimonial-author {
    display: flex;

    align-items: center;

    gap: 30px;

    min-height: 80px;
}


/* AVATAR */

.testimonial-avatar {
    position: relative;

    width: 78px;
    height: 78px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #111b2d;

    color: #ffffff;

    border: 3px solid #ffffff;

    border-radius: 50%;

    outline: 2px solid var(--testimonial-red);

    transition:
        transform 0.65s ease,
        background 0.4s ease;
}

.testimonial-avatar i {
    font-size: 34px;

    transition: transform 0.65s ease;
}


/* ICON ROTATION */

.testimonial-card:hover .testimonial-avatar {
    transform: rotate(360deg);

    background: var(--testimonial-red);
}

.testimonial-card:hover .testimonial-avatar i {
    transform: rotate(-360deg);
}


/* AUTHOR TEXT */

.testimonial-author-info {
    min-width: 0;
}

.testimonial-author-info h4 {
    margin: 0 0 4px;

    font-size: 22px;

    font-weight: 800;

    line-height: 1.3;

    color: #111111;
}

.testimonial-author-info p {
    margin: 0;

    font-size: 21px;

    font-weight: 500;

    line-height: 1.5;

    color: #111111;
}


/* =========================================
   TABLET RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .testimonials {
        padding: 65px 30px;
    }

    .testimonials-grid {
        gap: 16px;
    }

    .testimonial-card {
        min-height: 460px;
    }

    .testimonial-card-inner {
        padding: 30px 18px;
    }

    .testimonial-text {
        font-size: 17px;
    }

    .testimonial-author {
        gap: 15px;
    }

    .testimonial-avatar {
        width: 65px;
        height: 65px;
    }

    .testimonial-avatar i {
        font-size: 27px;
    }

    .testimonial-author-info h4 {
        font-size: 18px;
    }

    .testimonial-author-info p {
        font-size: 16px;
    }

}


/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 767px) {

    .testimonials {
        padding: 55px 20px;
    }

    .testimonials-header {
        margin-bottom: 35px;
    }

    .testimonials-label {
        font-size: 18px;
        margin-bottom: 28px;
    }

    .testimonials-heading {
        font-size: 30px;
        line-height: 1.3;
    }

    .testimonials-description {
        font-size: 15px;
        line-height: 1.6;
    }

    .testimonials-description br {
        display: none;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .testimonial-card {
        min-height: 390px;

        border-radius: 24px;
    }

    .testimonial-card-inner {
        padding: 28px 24px;
    }

    .testimonial-quote {
        height: 60px;
    }

    .testimonial-quote span {
        font-size: 80px;
    }

    .testimonial-text {
        font-size: 18px;
        line-height: 1.6;
    }

    .testimonial-divider {
        margin-bottom: 30px;
    }

    .testimonial-author-info h4 {
        font-size: 18px;
    }

    .testimonial-author-info p {
        font-size: 16px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .testimonials .testimonial-card,
    .testimonials.js-animations .testimonial-card {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .testimonial-avatar,
    .testimonial-avatar i,
    .testimonial-quote span {
        transition: none !important;
    }

}