:root{
    --navy-950:#0A1424;
    --navy-800:#122036;
    --navy-700:#1B2E4A;
    --orange-500:#F5821E;
    --orange-400:#FF9A3D;
    --cyan-400:#29C4F0;
    --cyan-300:#6DDBFA;
    --paper:#EEF1F4;
    --paper-2:#E2E7EC;
    --ink:#0A1424;
    --slate-600:#57687C;
    --line:rgba(10,20,36,0.12);
    --line-dark:rgba(255,255,255,0.14);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.mono-label{font-family:'Space Grotesk',sans-serif;}
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
  @media (max-width:640px){.wrap{padding:0 20px;}}

  /* ===== Blueprint grid backdrop ===== */
  .grid-dark{
    background-image:
      radial-gradient(circle at 1px 1px, rgba(255,255,255,0.09) 1px, transparent 1px);
    background-size:26px 26px;
  }

  /* ===== Nav ===== */
  .nav{
    position:sticky;top:0;z-index:50;
    background:var(--navy-950);
    border-bottom:1px solid var(--line-dark);
  }
  .nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100px;
}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;}
  .brand img {
  height: 80px;
  width: 80px;
  object-fit: contain;
}

.brand-name {
  font-weight: 650;
  font-size: 30px;
  line-height: 1.0;
  letter-spacing: 0.1px;
}
  .brand-name span{display:block;font-family:'Inter';font-weight:400;font-size:11.5px;color:var(--cyan-300);margin-top:2px;}
.nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100px;
}

.nav-links{
  display:flex;
  gap:32px;
  align-items:center;
}

.nav-links a{
  color:#C4CEDA;
  text-decoration:none;
  font-size:14.5px;
  font-weight:500;
  transition:color .15s ease;
}

.nav-links a:hover{
  color:#fff;
}

.nav-call{
  background:var(--orange-500);
  color:#0A1424 !important;
  padding:9px 18px;
  border-radius:3px;
  font-weight:600;
  font-size:14px;
}
  .nav-toggle{display:none;background:none;border:0;color:#fff;font-size:24px;cursor:pointer;}
  @media (max-width:820px){
    .nav-links{
      display:none;position:absolute;top:88px;left:0;right:0;
      background:var(--navy-950);flex-direction:column;align-items:flex-start;
      padding:18px 20px 26px;gap:18px;border-bottom:1px solid var(--line-dark);
    }
    .nav-links.open{display:flex;}
    .nav-toggle{display:block;}
  }

  /* ===== Hero ===== */
  .hero{
    background:var(--navy-950);color:#fff;
    position:relative;overflow:hidden;
    padding:88px 0 96px;
  }
  .hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;}
  @media (max-width:900px){.hero .wrap{grid-template-columns:1fr;}}
  .hero-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--cyan-300);font-size:13.5px;font-weight:500;margin-bottom:18px;
  }
  .hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--orange-500);}
  .hero h1{
    font-size:clamp(32px,4.4vw,50px);line-height:1.12;font-weight:700;margin:0 0 22px;
    max-width:15ch;
  }
  .hero p{font-size:17px;line-height:1.65;color:#B7C2D1;max-width:46ch;margin:0 0 34px;}
  .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;}
  .btn{
    display:inline-flex;align-items:center;gap:9px;
    padding:14px 24px;border-radius:3px;font-weight:600;font-size:15px;
    text-decoration:none;border:1px solid transparent;transition:transform .15s ease, background .15s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--orange-500);color:#0A1424;}
  .btn-primary:hover{background:var(--orange-400);}
  .btn-ghost{border-color:var(--line-dark);color:#fff;}
  .btn-ghost:hover{background:rgba(255,255,255,0.06);}

  .hero-panel{
    position:relative;background:var(--navy-800);
    border:1px solid var(--line-dark);border-radius:4px;
    padding:30px 26px;
  }
  .hero-panel::before{
    content:"";position:absolute;top:-1px;left:-1px;width:22px;height:22px;
    border-top:2px solid var(--cyan-400);border-left:2px solid var(--cyan-400);
  }
  .hero-panel::after{
    content:"";position:absolute;bottom:-1px;right:-1px;width:22px;height:22px;
    border-bottom:2px solid var(--orange-500);border-right:2px solid var(--orange-500);
  }
  .hero-panel h3{font-size:13.5px;font-weight:500;color:#8FA0B5;margin:0 0 18px;font-family:'Inter';}
  .contact-row{
    display:flex;align-items:baseline;justify-content:space-between;
    padding:13px 0;border-bottom:1px solid var(--line-dark);
    font-size:14.5px;
  }
  .contact-row:last-child{border-bottom:0;}
  .contact-row span:first-child{color:#8FA0B5;}
  .contact-row a{color:#fff;font-weight:600;text-decoration:none;}
  .contact-row a:hover{color:var(--cyan-300);}

  /* ===== Section headers ===== */
  .section{padding:84px 0;}
  .section-head{max-width:640px;margin-bottom:52px;}
  .section-head h2{font-size:clamp(24px,3vw,34px);font-weight:700;margin:0 0 14px;line-height:1.2;}
  .section-head p{font-size:15.5px;color:var(--slate-600);line-height:1.65;margin:0;}
  .on-dark .section-head p{color:#9FADBE;}

  /* ===== Services (connected sequence) ===== */
  .services{background:var(--paper);}
  .service-flow{position:relative;}
  .service-flow::before{
    content:"";position:absolute;left:23px;top:14px;bottom:14px;width:2px;
    background:repeating-linear-gradient(to bottom, var(--cyan-400) 0 6px, transparent 6px 12px);
  }
  @media (max-width:640px){.service-flow::before{left:17px;}}
  .service-item {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 24px;
    padding: 26px 24px;

    border-radius: 8px;

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

    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

/* When visible on scroll */
.service-item.show {
    opacity: 1;
    transform: translateY(0);
}

/* Premium hover effect */
.service-item:hover {
    background: rgba(255,255,255,0.65);
    box-shadow: 0 12px 35px rgba(10,20,36,0.08);
    transform: translateY(-5px);
}
@media (max-width:640px){
    .service-item{
        grid-template-columns:36px 1fr;
        gap:16px;
        padding: 20px 12px;
    }

    .service-item:hover {
        transform: translateY(-3px);
    }
}
     .service-node {
        transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

.service-item:hover .service-node {
    transform: rotate(8deg) scale(1.08);

    background: var(--navy-800);

    box-shadow:
        0 0 0 7px rgba(41,196,240,0.12),
        0 10px 25px rgba(10,20,36,0.18);
}
.service-node svg {
    transition: transform 0.35s ease;
}

.service-item:hover .service-node svg {
    transform: scale(1.12);
}
.service-item:nth-child(1) {
    transition-delay: 0.05s;
}

.service-item:nth-child(2) {
    transition-delay: 0.15s;
}

.service-item:nth-child(3) {
    transition-delay: 0.25s;
}

.service-item:nth-child(4) {
    transition-delay: 0.35s;
}
  @media (max-width:640px){.service-node{width:36px;height:36px;}}
  .service-node svg{width:22px;height:22px;stroke:var(--cyan-300);}
  @media (max-width:640px){.service-node svg{width:17px;height:17px;}}
  .service-item h3{font-size:19px;font-weight:600;margin:2px 0 8px;}
  .service-item p{font-size:15px;color:var(--slate-600);line-height:1.6;margin:0;max-width:56ch;}

  /* ===== Products ===== */
  .products{background:var(--navy-950);color:#fff;}
  /* ===== Product Gallery ===== */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.gallery-card {
    background: #122036;
    border: 1px solid rgba(255,255,255,0.14);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.gallery-card:hover {
    transform: translateY(-6px);
}

.gallery-card img {
    width: 100%;
    height: 190px;
    object-fit: contain;
    background: #ffffff;
    padding: 10px;
}

.gallery-card h3 {
    margin: 0;
    padding: 16px;
    text-align: center;
    font-size: 15px;
    color: white;
}

/* Tablet */

@media (max-width: 900px) {

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* Mobile */

@media (max-width: 500px) {

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-card img {
        height: 220px;
    }

}
  @media (max-width:820px){.product-grid{grid-template-columns:repeat(2,1fr);}}
  .product-card svg{width:34px;height:34px;stroke:var(--orange-500);margin-bottom:20px;}
  .product-card h3{font-size:16.5px;font-weight:600;margin:0 0 9px;}
  .product-card p{font-size:14px;color:#95A3B5;line-height:1.55;margin:0;}

  /* ===== Approach ===== */
  .approach{background:var(--paper-2);}
  .approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;}
  @media (max-width:820px){.approach-grid{grid-template-columns:1fr;gap:36px;}}
  .approach-grid p{font-size:15.5px;line-height:1.7;color:var(--slate-600);margin:0 0 18px;}
  .approach-figures{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
  .fig{background:var(--paper-2);padding:26px;}
  .fig .num{font-family:'Space Grotesk';font-size:15px;color:var(--slate-600);}
  .fig .label{font-size:14.5px;font-weight:600;margin-top:6px;}

  /* ===== Contact ===== */
  .contact{background:var(--navy-950);color:#fff;}
  .contact-grid {
    display: block;
    border: none;
    background: none;
}
  @media (max-width:820px){.contact-grid{grid-template-columns:1fr;}}
  .contact-card{background:var(--navy-950);padding:30px 28px;}
  .contact-card h3{font-size:14px;font-weight:500;color:var(--cyan-300);margin:0 0 14px;font-family:'Inter';}
  .contact-card address{font-style:normal;font-size:15px;line-height:1.7;color:#D5DCE5;margin:0 0 16px;}
  .contact-card .link-row{display:flex;flex-direction:column;gap:10px;}
  .contact-card .link-row a{
    font-size:14.5px;font-weight:600;color:#fff;text-decoration:none;
    display:inline-flex;align-items:center;gap:8px;
  }
  .contact-card .link-row a:hover{color:var(--orange-400);}
  .contact-card .link-row svg{width:16px;height:16px;stroke:var(--orange-500);}
  .map-btn{
    margin-top:16px;display:inline-block;font-size:13.5px;font-weight:600;
    color:var(--cyan-300);text-decoration:none;border-bottom:1px solid var(--cyan-400);padding-bottom:2px;
  }

  /* ===== Footer ===== */
  footer{background:var(--navy-950);border-top:1px solid var(--line-dark);padding:30px 0;}
  footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center;}
  footer p{font-size:13px;color:#7C8CA0;margin:0;}
  footer a{color:#B7C2D1;text-decoration:none;font-size:13px;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .btn:hover{transform:none;}
  }

  /* ===== Industries We Serve ===== */

.industries {
    background: var(--paper);
}

.industry-title {
    display: inline-block;
    background: linear-gradient(
        90deg,
        var(--orange-500),
        var(--orange-400)
    );
    padding: 10px 45px 10px 25px;
    margin-bottom: 20px;
    border-radius: 0 45px 45px 0;
}

.industry-title h2 {
    margin: 0;
    color: white;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    letter-spacing: 1px;
}

.industry-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 80px;
    padding: 10px 25px 25px;
    font-size: 19px;
    color: #344454;
}

/* Image Gallery */

.industry-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.industry-image {
    height: 230px;
    overflow: hidden;
}

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

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


/* Tablet */

@media (max-width: 800px) {

    .industry-images {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* Mobile */

@media (max-width: 600px) {

    .industry-list {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-left: 10px;
        font-size: 17px;
    }

    .industry-images {
        grid-template-columns: 1fr;
    }

    .industry-image {
        height: 220px;
    }

    .industry-title {
        padding: 10px 25px 10px 18px;
    }

    .industry-title h2 {
        font-size: 24px;
    }
}

/* ===== Why Choose Us ===== */

.why-choose {
    background: var(--paper-2);
}

.why-title {
    display: inline-block;
    background: linear-gradient(
        90deg,
        var(--orange-500),
        var(--orange-400)
    );

    padding: 12px 55px 12px 28px;
    margin-bottom: 45px;

    border-radius: 0 45px 45px 0;
}

.why-title h2 {
    margin: 0;
    color: white;

    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    letter-spacing: 1px;
}


/* Cards Grid */

.why-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}


/* Individual Card */

.why-card {
    background: var(--navy-950);

    padding: 28px 22px;

    min-height: 230px;

    position: relative;

    border-top: 4px solid var(--orange-500);

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

    overflow: hidden;
}


.why-card:hover {
    transform: translateY(-8px);
    background: var(--navy-800);
}


/* Big Background Number */

.why-number {
    position: absolute;

    top: 12px;
    right: 18px;

    font-family: 'Space Grotesk', sans-serif;

    font-size: 55px;

    font-weight: 700;

    color: rgba(255, 255, 255, 0.06);
}


/* Heading */

.why-card h3 {
    position: relative;

    color: white;

    font-size: 18px;

    line-height: 1.35;

    margin: 20px 0 14px;
}


/* Description */

.why-card p {
    position: relative;

    color: #AEBACA;

    font-size: 14px;

    line-height: 1.6;

    margin: 0;
}


/* Orange Line Decoration */

.why-card::before {

    content: "";

    width: 45px;
    height: 4px;

    background: var(--cyan-400);

    position: absolute;

    top: 28px;
    left: 22px;

}


/* Tablet */

@media (max-width: 950px) {

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* Mobile */

@media (max-width: 550px) {

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

    .why-card {
        min-height: 200px;
    }

    .why-title {
        padding: 10px 30px 10px 20px;
        margin-bottom: 30px;
    }

    .why-title h2 {
        font-size: 26px;
    }

}
/* ==============================
   ABOUT US
============================== */

.about {
    background: #ffffff;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 70px;
    align-items: center;
}

.section-tag {
    display: inline-block;
    color: var(--orange-500);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.about-content h2 {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    margin: 0 0 22px;
}

.about-content p {
    color: var(--slate-600);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 18px;
}

.about-content .btn {
    margin-top: 15px;
}


/* ABOUT BOX */

.about-box {
    background: var(--navy-950);
    color: white;
    padding: 45px 38px;
    position: relative;
    overflow: hidden;
    border-top: 5px solid var(--orange-500);
}

.about-box::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    top: -80px;
    right: -60px;
}

.about-icon {
    font-size: 45px;
    margin-bottom: 20px;
}

.about-box h3 {
    font-size: 25px;
    margin-bottom: 15px;
}

.about-box p {
    color: #AEBACA;
    line-height: 1.7;
}

.about-line {
    width: 55px;
    height: 4px;
    background: var(--cyan-400);
    margin: 25px 0;
}

.about-location {
    color: var(--cyan-300);
    font-size: 14px;
    font-weight: 600;
}


/* ==============================
   TRUST SECTION
============================== */

.trust-section {
    background: var(--navy-950);
    color: white;
    padding: 55px 0;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.trust-item {
    text-align: center;
    padding: 20px;
    border-right: 1px solid rgba(255,255,255,0.12);
}

.trust-item:last-child {
    border-right: none;
}

.trust-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.trust-item h3 {
    margin: 0 0 6px;
    font-size: 19px;
}

.trust-item p {
    margin: 0;
    color: #9FADBE;
    font-size: 14px;
}


/* ==============================
   FLOATING WHATSAPP
============================== */

.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 27px;

    width: 58px;
    height: 58px;

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

    background: #25D366;
    color: white;

    border-radius: 50%;

    text-decoration: none;

    font-size: 28px;

    box-shadow: 0 6px 20px rgba(0,0,0,0.25);

    z-index: 999;

    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.12);
}


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

@media (max-width: 850px) {

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

    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-item:nth-child(2) {
        border-right: none;
    }

}


@media (max-width: 500px) {

    .trust-grid {
        grid-template-columns: 1fr;
    }

    .trust-item {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.12);
    }

    .trust-item:last-child {
        border-bottom: none;
    }

    /* ===== Premium Floating WhatsApp ===== */

.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;

    width: 58px;
    height: 58px;

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

    background: #ffffff;
    color: #25D366;

    border-radius: 50%;

    text-decoration: none;

    box-shadow: 0 8px 25px rgba(0,0,0,0.28);

    z-index: 999;

    animation: whatsappPulse 2.5s infinite;
}

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

.whatsapp-tooltip {
    position: absolute;
    right: 70px;

    background: var(--navy-950);
    color: white;

    padding: 9px 13px;
    border-radius: 4px;

    font-size: 2px;
    font-weight: 100;

    white-space: nowrap;

    opacity: 0;
    pointer-events: none;

    transform: translateX(8px);

    transition: 0.25s ease;
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    transform: translateX(0);
}

@keyframes whatsappPulse {

    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }

}

@media (max-width: 500px) {

    .whatsapp-float {
        width: 54px;
        height: 54px;
        right: 18px;
        bottom: 18px;
    }

    .whatsapp-tooltip {
        display: none;
    }

}

}

/* =========================================
   PREMIUM HERO UPGRADE
========================================= */

.hero {
    isolation: isolate;
}

/* Animated glowing background */

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}

.glow-one {
    width: 350px;
    height: 350px;
    background: var(--cyan-400);
    top: -120px;
    right: -80px;

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

.glow-two {
    width: 300px;
    height: 300px;
    background: var(--orange-500);
    bottom: -150px;
    left: -100px;

    animation: floatGlow 10s ease-in-out infinite reverse;
}


/* Technical animated lines */

.hero-lines {
    position: absolute;
    inset: 0;

    opacity: 0.12;

    background:
        linear-gradient(
            90deg,
            transparent 49.5%,
            var(--cyan-400) 50%,
            transparent 50.5%
        );

    background-size: 120px 100%;

    animation: moveLines 12s linear infinite;

    pointer-events: none;
    z-index: 0;
}


/* Entrance animations */

.hero .wrap > div:first-child {
    animation: heroTextIn 0.9s ease forwards;
}

.hero-panel {
    animation: heroPanelIn 1s ease forwards;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.hero-panel:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}


/* Animations */

@keyframes floatGlow {

    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(40px, 25px) scale(1.12);
    }

}


@keyframes moveLines {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 120px 0;
    }

}


@keyframes heroTextIn {

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

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

}


@keyframes heroPanelIn {

    from {
        opacity: 0;
        transform: translateX(35px);
    }

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

}


/* Mobile */

@media (max-width: 700px) {

    .hero-glow {
        opacity: 0.15;
    }

    .glow-one {
        width: 250px;
        height: 250px;
    }

    .glow-two {
        width: 200px;
        height: 200px;
    }

}
/* =========================================
   PREMIUM PRODUCT CARDS
========================================= */

.gallery-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;

    opacity: 0;
    transform: translateY(30px);
}

.gallery-card.show {
    opacity: 1;
    transform: translateY(0);
}

.gallery-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--orange-500);
    transition: width 0.35s ease;
}

.gallery-card:hover {
    transform: translateY(-8px);
    border-color: rgba(41, 196, 240, 0.6);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.gallery-card:hover::after {
    width: 100%;
}

.gallery-card img {
    transition: transform 0.45s ease;
}

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

/* =========================================
   PREMIUM INDUSTRIES SECTION
========================================= */

.industry-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.industry-image {
    position: relative;
    height: 260px;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
}

.industry-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 0.6s ease;
}

/* Dark overlay */

.industry-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 24px;

    background: linear-gradient(
        to top,
        rgba(10,20,36,0.95),
        rgba(10,20,36,0.15)
    );

    transition: background 0.4s ease;
}

.industry-overlay span {
    color: var(--orange-400);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.industry-overlay h3 {
    color: white;
    margin: 0;
    font-size: 21px;
}

.industry-image:hover img {
    transform: scale(1.1);
}

.industry-image:hover .industry-overlay {
    background: linear-gradient(
        to top,
        rgba(10,20,36,0.98),
        rgba(10,20,36,0.35)
    );
}

.industry-image:hover h3 {
    color: var(--cyan-300);
}


/* Tablet */

@media (max-width: 850px) {

    .industry-images {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* Mobile */

@media (max-width: 550px) {

    .industry-images {
        grid-template-columns: 1fr;
    }

    .industry-image {
        height: 230px;
    }

}

/* =========================================
   WHY CHOOSE US - SCROLL ANIMATION
========================================= */

.why-card {
    opacity: 0;
    transform: translateY(35px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.why-card.show {
    opacity: 1;
    transform: translateY(0);
}

/* Premium hover */

.why-card:hover {
    transform: translateY(-10px);
    background: var(--navy-800);

    box-shadow:
        0 20px 40px rgba(10, 20, 36, 0.22);
}

/* Cyan glow on top */

.why-card::after {
    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 4px;

    background: var(--cyan-400);

    transition: width 0.35s ease;
}

.why-card:hover::after {
    width: 100%;
}

/* Number animation feeling */

.why-card:hover .why-number {
    transform: scale(1.12);
    color: rgba(255, 255, 255, 0.1);
}

.why-number {
    transition:
        transform 0.35s ease,
        color 0.35s ease;
}
/* =========================================
   PREMIUM PROCESS TIMELINE
========================================= */

.approach {
    background: var(--paper-2);
}

.section-tag {
    display: inline-block;

    color: var(--orange-500);

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

    letter-spacing: 2px;

    margin-bottom: 14px;
}


/* Timeline */

.process-timeline {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 0;

    position: relative;

    margin-top: 60px;

}


/* Connecting Line */

.process-timeline::before {

    content: "";

    position: absolute;

    top: 38px;

    left: 10%;

    width: 80%;

    height: 2px;

    background: linear-gradient(
        90deg,
        var(--cyan-400),
        var(--orange-500)
    );

    z-index: 0;

}


/* Individual Step */

.process-step {

    position: relative;

    text-align: center;

    padding: 0 18px;

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;

}


.process-step.show {

    opacity: 1;

    transform: translateY(0);

}


/* Number Circle */

.process-number {

    position: relative;

    z-index: 2;

    width: 76px;

    height: 76px;

    margin: 0 auto 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--navy-950);

    border: 3px solid var(--cyan-400);

    color: white;

    font-family: 'Space Grotesk', sans-serif;

    font-size: 20px;

    font-weight: 700;

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

}


.process-content h3 {

    font-size: 18px;

    margin: 0 0 10px;

    color: var(--navy-950);

}


.process-content p {

    font-size: 14px;

    line-height: 1.65;

    color: var(--slate-600);

    margin: 0;

}


/* Hover */

.process-step:hover .process-number {

    transform: scale(1.12);

    background: var(--orange-500);

    border-color: var(--orange-500);

    box-shadow:
        0 0 0 8px rgba(245,130,30,0.12);

}


/* Tablet */

@media (max-width: 850px) {

    .process-timeline {

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

        gap: 45px 20px;

    }


    .process-timeline::before {

        display: none;

    }

}


/* Mobile */

@media (max-width: 550px) {

    .process-timeline {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .process-step {

        display: flex;

        text-align: left;

        gap: 18px;

        padding: 0;

    }


    .process-number {

        width: 58px;

        height: 58px;

        min-width: 58px;

        margin: 0;

        font-size: 16px;

    }

}
/* =========================================
   PREMIUM CONTACT SECTION
========================================= */

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

/* Background decoration */

.contact::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background: var(--cyan-400);

    filter: blur(150px);

    opacity: 0.06;

    top: -250px;
    right: -150px;

    pointer-events: none;
}


/* Contact Intro */

.contact-intro {

    position: relative;
    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 40px;

    margin-bottom: 55px;

}

.contact-intro h2 {

    font-size: clamp(30px, 4vw, 46px);

    max-width: 650px;

    margin: 0 0 18px;

    line-height: 1.15;

}

.contact-intro p {

    max-width: 600px;

    color: #AEBACA;

    line-height: 1.7;

    font-size: 16px;

}


/* WhatsApp Button */

.contact-whatsapp {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: var(--orange-500);

    color: var(--navy-950);

    padding: 15px 24px;

    font-weight: 700;

    text-decoration: none;

    border-radius: 5px;

    white-space: nowrap;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}

.contact-whatsapp:hover {

    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(245,130,30,0.25);

}


/* Contact Cards */

.contact-grid-premium {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

}


.contact-box {

    background: var(--navy-800);

    border: 1px solid var(--line-dark);

    padding: 34px 28px;

    min-height: 280px;

    position: relative;

    overflow: hidden;

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

}


.contact-box::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        var(--cyan-400),
        var(--orange-500)
    );

    transition: width 0.4s ease;

}


.contact-box:hover {

    transform: translateY(-8px);

    border-color: rgba(41,196,240,0.5);

    box-shadow:
        0 20px 45px rgba(0,0,0,0.25);

}


.contact-box:hover::before {

    width: 100%;

}


/* Icons */

.contact-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(41,196,240,0.1);

    border: 1px solid rgba(41,196,240,0.3);

    font-size: 23px;

    border-radius: 50%;

    margin-bottom: 22px;

}


.contact-box h3 {

    font-size: 21px;

    margin: 0 0 12px;

    color: white;

}


.contact-box p {

    color: #AEBACA;

    line-height: 1.7;

    font-size: 14px;

    margin-bottom: 22px;

}


.contact-link {

    position: absolute;

    bottom: 28px;

    left: 28px;

    color: var(--cyan-300);

    font-weight: 700;

    text-decoration: none;

}


.contact-link:hover {

    color: var(--orange-400);

}


/* Tablet */

@media (max-width: 850px) {

    .contact-intro {

        flex-direction: column;

        align-items: flex-start;

    }

    .contact-grid-premium {

        grid-template-columns: 1fr;

    }

}


/* Mobile */

@media (max-width: 550px) {

    .contact-intro h2 {

        font-size: 32px;

    }

    .contact-whatsapp {

        width: 100%;

        justify-content: center;

    }

    .contact-box {

        min-height: 250px;

    }

}
.whatsapp-tooltip {
    font-size: 9px !important;
    line-height: 1.1;
}

/* =========================================
   INDUSTRIES PHOTO SHOWCASE - BRIGHT VERSION
========================================= */

.industries {
    background: var(--paper);
}

.industries-head {
    margin-bottom: 35px;
}


/* Main Layout */

.industry-showcase {

    display: grid;

    grid-template-columns: 1.25fr 1fr;

    gap: 14px;

}


/* Main Image - smaller */

.industry-main {

    height: 390px;

}


/* Right Images */

.industry-side {

    display: grid;

    grid-template-rows: 1fr 1fr;

    gap: 14px;

}


/* Image Container */

.industry-feature {

    position: relative;

    overflow: hidden;

    min-height: 185px;

    border-radius: 8px;

    background: var(--navy-950);

}


/* Image */

.industry-feature img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}


/* LIGHTER Overlay */

.industry-feature::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to top,
        rgba(10,20,36,0.65),
        rgba(10,20,36,0.02) 65%
    );

    transition: background 0.3s ease;

}


/* Text Overlay */

.industry-overlay {

    position: absolute;

    z-index: 2;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 18px 20px;

    color: white;

}


/* REMOVE BIG NUMBER COMPLETELY */

.industry-overlay span {

    display: none;

}


.industry-overlay h3 {

    margin: 0 0 5px;

    font-size: 19px;

}


.industry-overlay p {

    margin: 0;

    color: #E2E7EC;

    font-size: 13px;

    line-height: 1.5;

}


/* Hover */

.industry-feature:hover img {

    transform: scale(1.05);

}


.industry-feature:hover::after {

    background: linear-gradient(
        to top,
        rgba(10,20,36,0.72),
        rgba(10,20,36,0.08) 70%
    );

}


/* Bottom Tags */

.industry-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 16px;

}


.industry-tags div {

    background: white;

    border: 1px solid rgba(10,20,36,0.12);

    padding: 12px 17px;

    font-size: 13.5px;

    font-weight: 600;

    color: var(--navy-950);

    border-radius: 4px;

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

}


.industry-tags div:hover {

    transform: translateY(-3px);

    background: var(--navy-950);

    color: white;

}


/* Tablet */

@media (max-width: 800px) {

    .industry-showcase {

        grid-template-columns: 1fr;

    }

    .industry-main {

        height: 340px;

    }

    .industry-side {

        grid-template-columns: 1fr 1fr;

        grid-template-rows: none;

    }

}


/* Mobile */

@media (max-width: 550px) {

    .industry-main {

        height: 280px;

    }

    .industry-side {

        grid-template-columns: 1fr;

    }

    .industry-feature {

        height: 210px;

    }

}