body{
    font-family:'Poppins',sans-serif;
}

.navbar{
    
    height:155px;
}

.menu-btn{
    width:45px;
    height:38px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
}

.menu-btn span{
    display:block;
    width:100%;
    height:3px;
    background:#000;
    border-radius:5px;
}
.navbar-logo{
    height:110px ;
}

.offcanvas{
    width:360px;
}

.offcanvas-body{
    padding:40px;
}

.nav-link{
    font-size:22px;
    padding:15px 0;
    color:#111;
}

.nav-link.active{
    font-weight:700;
}

   .video-banner {
    height: 200vh;
}

.navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
    justify-content: space-between !important;
   }
/* Desktop only */
@media (min-width: 992px) {
   
    .desktop-width {
        width: 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .spacer{
        padding:0px 30px;
    }
}

.video-wrapper {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-bg {
    width: 80%;
    border-radius: 20px;
    transform: scale(0.9);
}
@media (max-width: 768px) {
.navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
    justify-content: space-around !important;
   }

    .navbar-logo{
        height:70px;
    }

    .video-bg {
        width: 100%;     /* 👈 better for mobile */
        transform: scale(1);
        border-radius:0px; /* remove zoom issues */
    }

    .spacer h1{
        font-size: 30px !important;
    }
    .span{
        font-size: 16px !important;
    }
    .stats-section{
        padding:80px 30px;
    }
    .spacer{
        padding:0px 20px;
        height:40vh !important;
    }
}
.spacer {
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.spacer h1 {
  font-size: 62px;
  line-height: 0.9;
  max-width: 800px;
  color:#000;
  font-weight: 600;
}
.s1{
     height: 50vh !important;
}
.span{
    font-size: 48px;
    font-weight: 500;
    line-height: 0.5;
}

/* Dark Overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
.offcanvas-backdrop.show {
    opacity: 0.6;
}


/* banner section start */

/* Responsive */
@media (max-width: 992px) {
    .video-banner {
        height: 18vh;
    }
    .video-wrapper {
    height: 8vh;
  
}
}
.word-animate span {
  opacity: 0;
  display: inline-block;
  transform: translateY(20px);
  animation: wordFade 0.6s ease forwards;
}

/* Delay each word */
.word-animate span:nth-child(1) { animation-delay: 0.2s; }
.word-animate span:nth-child(2) { animation-delay: 0.4s; }
.word-animate span:nth-child(3) { animation-delay: 0.6s; }
.word-animate span:nth-child(4) { animation-delay: 0.8s; }
.word-animate span:nth-child(5) { animation-delay: 1s; }
.word-animate span:nth-child(6) { animation-delay: 1.2s; }
.word-animate span:nth-child(7) { animation-delay: 1.4s; }
.word-animate span:nth-child(8) { animation-delay: 1.6s; }
.word-animate span:nth-child(9) { animation-delay: 1.8s; }

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

/* Background Shape */
.stats-bg-shape {
    position: absolute;
    left: -24px;
    top: 75%;
    transform: translateY(-50%);
    width: 200px;
    opacity: 0.8;

    z-index: 0;
    pointer-events: none;
}
.stats-bg-shape {
    animation: bounce 3s infinite ease-in-out;
}

/* Keyframes */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}
.stats-bg-shapes {
    position: absolute;
    right: 5px !important;
    /* top: 11%; */
    transform: translateY(-50%);
    width: 200px;

    z-index: 0;
    pointer-events: none;
     animation: bounce 3s infinite ease-in-out;
}

/* Keep content above shape */
.stats-section .container {
    position: relative;
    z-index: 2;
}

/* counter section start */
.stats-section {
     position: relative;
    overflow: hidden; /* important */
    background: #fff;
    padding: 100px 20px;
}



.main-title {
  font-size: 42px;
  font-weight: 600;
  color:#000;
}



.divider {
    width: 80px;
    height: 3px;
    background: transparent;
    margin: 15px auto;
    position: relative;
    border-radius: 999px;
}

.divider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(to right, #00c6ff, #8e2de2);
    animation: grow 1.9s ease-in-out infinite;
}

@keyframes grow {
    0%   { width: 0; }
    100% { width: 80px; }
}

.description {
    max-width: 1130px;
    margin: auto;
    font-size: 16px;
    line-height: 1.3;
    color: #000;
}

.stat-box {
    text-align: left;
}

.stat-box h5 {
    font-weight: 600;
    font-size: 20px;
    text-align: left;
}
.learn-btn{
    text-decoration:none;
    font-size:16px;
}

.line {
    width: 50px;
    height: 3px;
    background: linear-gradient(to right, #00c6ff, #8e2de2);
    margin: 10px 0;
}

.stat-box h2 {
    font-size: 60px;
    font-weight: 600;
    display: inline-block;
}

.stat-box span {
    font-size: 40px;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
    .description {
        font-size: 14px;
    }
    .stat-box {
        margin-bottom: 25px;
    text-align: center;
}
    .stat-box h5 {
   
    text-align: center !important;
}
.line { 
     margin: 10px 55px;
}
    .stats-bg-shape {
    left: -19px;
    top: -1%;
    transform: translateY(-50%);
    width: 171px;
    }
    .main-title {
        font-size: 20px;
    }

    .stat-box h2 {                               
        font-size: 25px;
       
    }

    .stat-box span {
        font-size: 25px;
    }
    .client-title {
        font-size: 30px !important;
    }
    h4{
        font-size: 18px !important;
    }
    .section-title{
        font-size: 20px !important;
    }
    .overlay-content h2 {
    font-size: 20px !important;
    }
    .overlay-content p {
        font-size: 14px !important;
    }
}

.who-we-are{
    background-image: url('../image/bannersize.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding:80px 0;
}

.section-subtitle{

    display:inline-block;
    font-size:20px;
    font-weight:400;
    color:#111;
    position:relative;
}

.hero-title{

    margin:auto;
    max-width:900px;

    font-size:42px;
    /* font-weight:600; */
    line-height:1.3;
    color:#000;
    letter-spacing:-2px;
}

.highlight{

    color:#4C8FD4;
    display:inline-block;
    transition:.4s;
}

.highlight:hover{

    color:#2b6cb0;
    transform:translateY(-3px);

}

@media(max-width:1200px){

.hero-title{

    font-size:58px;

}

}

@media(max-width:992px){

.hero-title{

    font-size:15px;
    line-height:1.3;
     letter-spacing: -1px !important;

}

.section-subtitle{

    font-size:22px;

}

}

@media(max-width:768px){

.who-we-are{

    padding:36px 20px;
    height:193px;

}

.section-subtitle{

    font-size:18px;

}
.portfolio-item img {
    height:auto !important;
}
.portfolio-item{
    height:303px !important;
}
ol, ul {
    padding-left: 1rem;
}
li{
    font-size:12px !important;
}
.sticky-scene {
    height:47vh !important;
}
.hero-section{
    height:140vh !important;
}
.scroll-driver {
    height:50vh !important;
}
.spacer h1{
    padding-bottom:173px
}
.tag{
    font-size:11px !important;
    padding:5px 7px !important;
}


}

/* Section spacing */
.portfolio-section {
    padding: 0px 150px;
    padding-top: 80px;
}

/* Portfolio Item */
.portfolio-item {
    position: relative;
    overflow: hidden;
    height: 400px ;
}

/* Image */
.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s ease;
}

/* Overlay */
.overlay-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.55) !important;
    /* backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); */

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

    opacity: 0;
    transition: 0.4s ease;
}

/* ICON (FIXED SMALL SIZE) */
.overlay-icon {
    width: 200px !important;
    height: auto !important;
    object-fit: cover !important;

    transform: scale(0.7);
    transition: 0.4s ease;
}

/* Optional Text */
.overlay-text {
    color: #fff;
    font-size: 26px;
    letter-spacing: 2px;
    transform: translateY(15px);
    transition: 0.4s ease;
}
.overlay-content h2 {
    font-size: 20px;
    font-weight: 300;
    color: #fff !important;
}
.overlay-content p {
    font-size: 12px;
    color: #fff !important;
    line-height: 1.6;
}

/* Hover Effects */
.portfolio-item:hover img {
    transform: scale(1.08);
}

.portfolio-item:hover .center-logo,
.portfolio-item:hover .center-logo img {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.portfolio-item:hover .overlay-item {
    opacity: 1;
}


/* KEEP ICON SMALL EVEN ON HOVER */
.portfolio-item:hover .overlay-icon {
    transform: scale(0.85);
}

/* Text animation */
.portfolio-item:hover .overlay-text {
    transform: translateY(0);
}

/* Optional smooth fade-in animation */
@keyframes fadeZoom {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }
    100% {
        transform: scale(0.85);
        opacity: 1;
    }
}

.portfolio-item:hover .overlay-icon {
    animation: fadeZoom 0.4s ease;
}

/* Responsive */
@media (max-width: 992px) {
    .portfolio-section {
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .portfolio-item {
        height: 250px;
    }

    .overlay-icon {
        width: 28px;
        height: 28px;
    }

    .overlay-text {
        font-size: 20px;
    }
    .curve-content{
        padding:0px 30px !important;
    }
    .client-section{
        padding-bottom: 0px !important;
    }
    .footer-section{
        padding-top: 0px !important;
    }
}

@media (max-width: 480px) {
    .portfolio-item {
        height: 200px;
    }

    .overlay-icon {
        width: 24px;
        height: 24px;
    }
}
.center-logo{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:2;
    transition:.4s;
}
.center-logo img{
    width:120px;      /* Change as required */
    height:auto;
}
[data-aos="zoom-in"] {
    transform: scale(0.8);
    opacity: 0;
    transition-property: transform, opacity;
}

[data-aos="zoom-in"].aos-animate {
    transform: scale(1);
    opacity: 1;
}

 /* ── sections before and after the banner ── */
    .section-before, .section-after {
      height: 60vh;
      display: flex; align-items: center; justify-content: center;
      background: #111;
      color: #fff;
      font-size: 1.2rem;
      letter-spacing: .05em;
    }

    /* ── sticky wrapper ── */
    .sticky-scene {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
        background: url('../image/growbanner.jpg') center center / cover no-repeat;
      z-index: 10;
    }
    .sticky-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* adjust opacity */
  z-index: 0;
}
   

    /* the tall scroll container that drives the sticky effect */
    .scroll-driver {
      height: 140vh; /* how long the banner "sticks" */
    }

    /* ── headline text ── */
    .headline {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 2vw;
      pointer-events: none;
      user-select: none;
    }

    .headline h1 {
      font-weight: 600;
      font-size: clamp(4rem, 11vw, 14rem);
      line-height: .88;
      color: #ffffff45;
      letter-spacing: -.01em;
    }
    .tags-slider{
  position:absolute;
  inset:0;
  z-index:2;
  will-change:transform;
}

.tag-slide{
  position:relative;
  width:100%;
  height:100vh;
}

.tag{
  position:absolute;
  background:#fff;
  border:2px solid #111;
  border-radius:999px;
  padding:8px 16px;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}



        
.curve-overlay {
  position: absolute;     
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2; /* above image */
  pointer-events: auto; /* allow clicks through overlay content */
}
.curve-overlay .curve-bg {
  width: 100%;
  height:60vh;
  background-color: #fff; 
  display: block;
}

.curve-content {
    padding: 40px 150px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  z-index: 3;
}
h4{
    font-size: 18px;
    font-weight: 600;
    color:#000;
}
li{
    font-size: 14px;
    color:#000;
    margin-bottom: 5px;
}
.client-section {
    padding-bottom:80px;
    background: #fff;
}
.client-title {
    font-size: 42px;
    font-weight: 600;
}

.client-subtitle {
    color: #000;
}

.logo-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.logo-track {
    display: flex;
    gap: 30px;
    will-change: transform;
}

.logos {
    flex: 0 0 auto;
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logos img {
    max-width: 280px;
}

/* market insight section */
 

      .market-title {
        font-size: 42px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 20px;
        color: #111;
      }

      .market-card {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        /* height: 445px; */
      }

      .market-card img {
        width: 100%;
        /* height: 100%; */
        object-fit: cover;
        transition: 0.6s;
      }

      .market-card:hover img {
        transform: scale(1.1);
      }

      .market-overlay {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
       
         background: linear-gradient(transparent, rgba(0,0,0,0.2));
      }

      .market-overlay h5 {
        color: #fff;
        margin: 0;
        font-size: 15px;
        font-weight: 400;
         padding: 20px 18px;
          background:#0b0b0b8b;
      }

      .market-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.05);
        opacity: 0;
        transition: 0.4s;
      }

      .market-card:hover::after {
        opacity: 1;
      }

      @media (max-width: 991px) {
        .market-title {
          font-size: 42px;
        }

        .market-card {
          height: 350px;
        }

        .market-overlay h5 {
          font-size: 22px;
        }
      }

      @media (max-width: 767px) {
        .market-section {
          padding: 50px 30px;
        }

        .market-title {
          font-size: 30px;
          margin-bottom: 25px;
        }

        .market-card {
          height: auto;
        }

        .market-overlay h5 {
          font-size: 11px;
        }
        .footer-content{
            padding-top:0px !important;
        }
        .footer-box{
            padding:0px 30px !important;
        }
        dl, ol, ul {
    margin-top: 0;
    margin-bottom: 0rem;
}
      }


      .footer-section{
    padding-top:80px;
}

/* Footer */
.footer {
    background: #0a0a0a;
    color: #fff;
    padding-top:60px;
    position: relative;
    overflow: hidden;
}

/* Glow background */


/* Titles */
.footer h5 {
    font-weight: 600;
    margin-bottom: 15px;
}

/* Contact */
.footer p {
    margin: 5px 0;
    font-size: 14px;
    opacity: 0.8;
}

/* Icons */
.footer i {
    margin-right: 8px;
}

/* Links */
.footer ul {
    list-style: none;
    padding: 0;
}

.footer ul li {
    margin-bottom: 26px !important;
}

.footer ul li a {
    color: #ccc;
    text-decoration: none;
    transition: 0.3s;
}

.footer ul li a:hover {
    color: #00c6ff;
    padding-left: 5px;
}

/* Divider */
.footer .dividers {
    border-left: 1px solid #fff;
    height: 59%;
}

/* Input */
.footer input {
    background: transparent;
    border: 1px solid #fff;
    padding: 10px;
    color: #fff;
    border-radius: 10px;
    width: 100%;
}


/* Social */
.footer .social a {
    color: #fff;
    margin-right: 10px;
    font-size: 18px;
    transition: 0.3s;
}

.footer .social a:hover {
    color: #00c6ff;
}

/* Logo */
.footer-logo {
    height:170px;
}


.footer-box {
    /* background: #0b0b0b; */
    padding: 40px;
    border-radius: 10px;
    overflow: hidden;
}

/* Glow Image */
.glow-img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    z-index: 1;
}
.glow-img {
    animation: bounceSmooth 3s infinite ease-in-out;
}


@keyframes bounceSmooth {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-25px);
    }
}

/* Content above glow */
.footer-content {
    padding-top: 68px;
    position: relative;
    z-index: 2;
}


/* Heading */
.footer-content h5 {
    color: #fff;
    font-size: 14px;
    opacity: 0.8;
}


/* Button */
.btn-send {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(45deg, #00c6ff, #d946ef);
    color: #fff;
    font-weight: 500;
}
.btn-send:hover{
       transform: scale(1.05);
}



/* Responsive */
@media(max-width:768px){
    .footer {
        text-align: center;
    }
    .footer .dividers {
        display: none;
    }
    .footer-logo {
    height: 100px;
}
}

/* Project pages case studies*/


      /*==========================*/

      .hero-sections {
        position: relative;
        min-height: 650px;
        background: url("../image/car parking 1.jpg") center center/cover
          no-repeat;
        overflow: hidden;
      }

      .hero-sections1 {
        position: relative;
        min-height: 650px;
        background: url("../image/nichromepackaging.jpg") center center/cover
          no-repeat;
        overflow: hidden;
      }
      .hero-sections2 {
        position: relative;
        min-height: 700px;
        background: url("../image/fabledbannerimage.jpg") center center/cover
          no-repeat;
        overflow: hidden;
      }
       .hero-sections3 {
        position: relative;
        min-height: 650px;
        background: url("../image/Messung\ 1.jpg") center center/cover
          no-repeat;
        overflow: hidden;
      }
       .hero-sections4 {
        position: relative;
        min-height: 650px;
        background: url("../image/padelhubbanner.jpg") center center/cover
          no-repeat;
        overflow: hidden;
      }
      .hero-sections5 {
        position: relative;
        min-height: 730px;
        background: url("../image/premiumbanner.jpg") center center/cover
          no-repeat;
        overflow: hidden;
      }
      .hero-sections6 {
        position: relative;
        min-height: 680px;
        background: url("../image/simlionicbanner.jpg") center center/cover
          no-repeat;
        overflow: hidden;
      }
      .hero-sections7 {
        position: relative;
        min-height: 680px;
        background: url("../image/nityashabanner.jpg") center center/cover
          no-repeat;
        overflow: hidden;
      }
      .hero-sections8 {
        position: relative;
        min-height: 700px;
        background: url("../image/sancturybanner.jpg") center center/cover
          no-repeat;
        overflow: hidden;
      }
      .hero-sections9 {
        position: relative;
        min-height: 650px;
        background: url("../image/unifybanner.jpg") center center/cover
          no-repeat;
        overflow: hidden;
      }
      .hero-sections10 {
        position: relative;
        min-height: 650px;
        background: url("../image/vendkinbanner.png") center center/cover
          no-repeat;
        overflow: hidden;
      }
      .hero-sections10::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.75) 0%,
          rgba(0, 0, 0, 0.45) 40%,
          rgba(0, 0, 0, 0.08) 70%,
          rgba(0, 0, 0, 0) 100%
        );
      }
      .hero-sections9::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.75) 0%,
          rgba(0, 0, 0, 0.45) 40%,
          rgba(0, 0, 0, 0.08) 70%,
          rgba(0, 0, 0, 0) 100%
        );
      }
      .hero-sections8::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.75) 0%,
          rgba(0, 0, 0, 0.45) 40%,
          rgba(0, 0, 0, 0.08) 70%,
          rgba(0, 0, 0, 0) 100%
        );
      }
      .hero-sections7::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.75) 0%,
          rgba(0, 0, 0, 0.45) 40%,
          rgba(0, 0, 0, 0.08) 70%,
          rgba(0, 0, 0, 0) 100%
        );
      }
      .hero-sections6::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.75) 0%,
          rgba(0, 0, 0, 0.45) 40%,
          rgba(0, 0, 0, 0.08) 70%,
          rgba(0, 0, 0, 0) 100%
        );
      }
      .hero-sections5::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.75) 0%,
          rgba(0, 0, 0, 0.45) 40%,
          rgba(0, 0, 0, 0.08) 70%,
          rgba(0, 0, 0, 0) 100%
        );
      }

      .hero-sections4::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.75) 0%,
          rgba(0, 0, 0, 0.45) 40%,
          rgba(0, 0, 0, 0.08) 70%,
          rgba(0, 0, 0, 0) 100%
        );
      }
      .hero-sections3::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.75) 0%,
          rgba(0, 0, 0, 0.45) 40%,
          rgba(0, 0, 0, 0.08) 70%,
          rgba(0, 0, 0, 0) 100%
        );
      }
      .hero-sections2::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.75) 0%,
          rgba(0, 0, 0, 0.45) 40%,
          rgba(0, 0, 0, 0.08) 70%,
          rgba(0, 0, 0, 0) 100%
        );
      }
       .hero-sections1::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.75) 0%,
          rgba(0, 0, 0, 0.45) 40%,
          rgba(0, 0, 0, 0.08) 70%,
          rgba(0, 0, 0, 0) 100%
        );
      }

      /* Dark Overlay */

      .hero-sections::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.75) 0%,
          rgba(0, 0, 0, 0.45) 40%,
          rgba(0, 0, 0, 0.08) 70%,
          rgba(0, 0, 0, 0) 100%
        );
      }

      /* Content */

      .hero-content {
        margin-top:252px;
        position: relative;
        z-index: 2;
        max-width: 700px;
        color: #fff;
      }

      .hero-content h1 {
        font-size: 42px;
        font-weight: 500;
        line-height: 1.05;
      }

      .hero-content span {
        color: #FAD30A;
        font-weight: 700;
      }

      .hero-content p {
        margin-top: 25px;
        color: #ddd;
        line-height: 1.8;
      }
     
      .hero-btn {
        margin-top: 15px;
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        color: #fff;
        font-weight: 600;
        transition: 0.4s;
      }

      .hero-btn:hover {
        color: #fff;
      }

      .arrow {
        width: 46px;
        height: 46px;
        margin-left: 15px;
        border-radius: 50%;
        background: #3E9FEF;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.4s;
      }

      .hero-btn:hover .arrow {
        transform: translateX(8px) rotate(360deg);
      }

      /* Floating Animation */

      .hero-image {
        animation: float 5s ease-in-out infinite;
      }

      @keyframes float {
        0% {
          transform: translateY(0);
        }

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

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

      /* Responsive */

      @media (max-width: 991px) {
        .hero-section {
          min-height: 500px;
          padding: 100px 0;
        }

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

        .hero-content h1 {
          font-size: 42px;
        }

        .hero-btn {
          justify-content: center;
        }
      }

      @media (max-width: 576px) {
        .hero-content h1 {
          font-size: 32px;
        }

        .hero-content p {
          font-size: 15px;
        }

        .hero-section {
          min-height: 430px;
        }
      }
      

/*======================*/


.parking-text{
     padding:80px 0;

    font-size:16px;
    line-height:1.8;
    text-align: center;
    color:#222;
    font-weight:400;

}

/*======================*/

.video-box{

    position:relative;
    overflow:hidden;
    cursor:pointer;

}

.video-box img{

    width:100%;
    transition:.8s;
    display:block;

}

.video-box:hover img{

    transform:scale(1.08);

}

/* Overlay */

.overlay{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.18);

}

/*======================*/
.play-btn{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:160px;
    height:160px;
    border:3px solid #fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:10;
    transition:.4s;
    background:transparent;
}

.play-btn svg{
    width:70px;
    height:70px;
}

.video-box:hover .play-btn{
    transform:translate(-50%,-50%) scale(1.08);
    background:rgba(255,255,255,.08);
}



/* Ripple */

.play-btn::before{

    content:"";
    position:absolute;

    width:100%;
    height:100%;

    border-radius:50%;
    border:2px solid rgba(255,255,255,.7);

    animation:ripple 2s infinite;

}

@keyframes ripple{

0%{

transform:scale(1);
opacity:1;

}

100%{

transform:scale(1.5);
opacity:0;

}

}

/*======================*/

@media(max-width:991px){

.parking-section{

padding:70px 0;

}

.play-btn{

width:120px;
height:120px;
font-size:45px;

}

.parking-text{

font-size:19px;

}

}

@media(max-width:767px){

.parking-text{

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

}

.play-btn{

width:90px;
height:90px;
font-size:35px;

}

}

@media(max-width:575px){

.parking-section{

padding:50px 15px;

}

.parking-text{

font-size:15px;
line-height:1.8;

}

.play-btn{

width:75px;
height:75px;
font-size:28px;
border-width:2px;

}

}
/* ---------- METRICS ---------- */
.metrics{
    padding:80px 0px;
}
.metrics{ background:#fff; }
.donut-wrap{ position:relative; width:240px; height:240px; margin:0 auto; }
.donut-wrap svg{ transform:rotate(-90deg); }
.donut-track{ fill:none; stroke:#eceef2; stroke-width:30; }
.donut-fill{
  fill:none; stroke:url(#donutGradient); stroke-width:30; 
  stroke-dasharray:534; stroke-dashoffset:534;
  transition:stroke-dashoffset 2s cubic-bezier(.16,1,.3,1);
}
.donut-center{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
}
.donut-center .num{ font-family:var(--display); font-weight:600; font-size:2.3rem; line-height:1;margin-top: 10px;}
.donut-center .lbl{ font-weight:600; font-size:.95rem; color:#333;line-height:20px; margin-top:.25rem; }

.big-stat{ margin-top:80px;display:flex; align-items:flex-start; gap:.4rem; }
.big-stat .pct{ font-family:var(--display); font-weight:600; font-size:clamp(3rem,8vw,5rem); line-height:1; }
.big-stat .arrow{
   
  font-size:4rem; 
  color: rgba(234, 165, 25, 1);
  background: none;
  /* background:linear-gradient(90deg, rgba(234, 165, 25, 1) 0%, rgba(250, 211, 10, 1) 100%); */
  /* -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text; */
  transition:transform .4s ease;
}
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
    font-weight: 1000 !important;
}
.metric-sub{ color:var(--muted); font-size:14px; line-height:1.7; max-width:406px; }

/* ---------- APPROACH ---------- */
.text{
    font-size: 24px;
    font-weight:600;
}

/* ---------- SEO RESULTS (dark) ---------- */
.seo{
  position:relative; color:#fff; padding:80px 0;
  background:linear-gradient(rgba(76, 76, 76, 0.7),rgba(76, 76, 76, 0.7)),
             url('../image/Firefly_GeminiFlash_Interior.jpg') center/cover fixed;
}
.seo1{
  position:relative; color:#fff; padding:80px 0;
  background:linear-gradient(rgba(60, 111, 139, 0.7),rgba(60, 111, 139, 0.7)),
             url('../image/nichromebannerseo.jpg') center/cover fixed;
}
.seo2{
  position:relative; color:#fff; padding:80px 0;
  background:linear-gradient(rgba(41, 41, 41, 0.7),rgba(31, 31, 31, 0.7)),
             url('../image/Fabled retail soap v2 2.jpg') center/cover fixed;
             
}
.seo3{
  position:relative; color:#fff; padding:80px 0;
  background:linear-gradient(rgba(69, 125, 178, 0.5),rgba(69, 125, 178, 0.5)),
             url('../image/messungseobanner.jpg') center/cover fixed;
}
.seo4{
  position:relative; color:#fff; padding:80px 0;
  background:linear-gradient(rgba(20, 114, 109, 0.658),rgba(31, 45, 71, 0.612)),
             url('../image/padelhubseobanner.jpg') center/cover fixed;
}
.seo5{
  position:relative; color:#fff; padding:80px 0; 
  background:linear-gradient(rgba(12, 21, 61, 0.24),rgba(12, 21, 61, 0.24)),
             url('../image/premiumbanners.jpg') center/cover fixed;
}
.seo6{
  position:relative; color:#fff; padding:80px 0;
  background:linear-gradient(rgba(10, 28, 67, 0.6),rgba(10, 28, 67, 0.6)),
             url('../image/simplionicseobanner.jpg') center/cover fixed;
}
.seo7{
  position:relative; color:#fff; padding:80px 0;
  background:linear-gradient(rgba(43, 10, 0, 0.75),rgba(43, 10, 0, 0.75)),
             url('../image/nityashaseobanner.jpg') center/cover fixed;
}
.seo8{
  position:relative; color:#fff; padding:80px 0;
  background:linear-gradient(rgba(27, 28, 32, 0),rgba(99, 64, 51, 0.2)),
             url('../image/sancturyseobanner.jpg') center/cover fixed;
}
.seo9{
  position:relative; color:#fff; padding:80px 0;
  background:linear-gradient(rgba(11, 52, 99, 0.8),rgba(11, 52, 99, 0.8)),
             url('../image/unifyseobanner.jpg') center/cover fixed;
}
.seo10{
  position:relative; color:#fff; padding:80px 0;
  background:
             url('../image/Vend\ 3.jpg') center/cover fixed;
}
.mock-stage{ position:relative; max-width:1260px; margin:0 auto; }
/* .laptop{
  position:relative; border-radius:14px 14px 0 0; overflow:hidden;
  border:10px solid #1c1f24; border-bottom:none;
  box-shadow:0 30px 80px rgba(0,0,0,.6); */
/* } */
.laptop img{ width:100%; display:block; }
.laptop-base{
  max-width:1100px; margin:0 auto; position:relative; overflow:hidden;
  border-radius:0 0 16px 16px;
}
.laptop-base img{
  width:100%; display:block; height:auto;
}


.badge-chip{
  position:absolute; z-index:5;
  background:rgba(20,23,28,.9); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding: 0.55rem 1.85rem;
  display:flex; align-items:center; gap:.55rem;
  font-size:.78rem; line-height:1.2; white-space:nowrap;
  box-shadow:0 14px 30px rgba(0,0,0,.4);
}
.badge-chip i{ font-size:1rem; }
.badge-chip small{ color:rgba(255,255,255,.55); display:block; font-size:.66rem; }
.chip-1{ top:1%; left:26%; }
.chip-1 i{ color:var(--accent); }
.chip-2{ top:31%; right:7%; }
.chip-2 i{ color:var(--accent-2); }
.chip-3{ bottom:7%; left:28%; }
.chip-3 i{ color:#28c76f; }     
.chip-know{ bottom: -1%;
    left: 53%; transform:translateX(-50%); cursor:pointer; }
.chip-know:hover{ border-color:var(--accent); }

/* .rank-card{
  position:absolute; right:-10px; bottom:6%; z-index:6;
  background:#fff; color:var(--ink); border-radius:12px;
  padding:.9rem 1rem; width:210px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.rank-card h6{ font-weight:700; font-size:.82rem; text-align:center; margin-bottom:.7rem; }
.rank-row{ display:flex; gap:.4rem; }
.rank-pill{ flex:1; text-align:center; border-radius:7px; padding:.35rem 0; color:#fff; font-weight:700; font-size:.78rem; }
.rank-pill small{ display:block; font-weight:600; font-size:.62rem; opacity:.9; }
.rank-pill.p1{ background:#23a55a; }
.rank-pill.p2{ background:#2f7de1; }
.rank-pill.p3{ background:#7a5cf0; } */

/* ---------- RELATED ---------- */
/*==============================
Related Case Study
==============================*/

.case-study{
    background:#fff;
    padding:80px 0;
}

.case-study h2{
    font-size:42px;
    font-weight:600;
    margin-bottom:60px;
}

/* Card */

.study-card{
    position:relative;
    overflow:hidden;
    cursor:pointer;
}

.study-card img{
    width:100%;
    height:420px;
    object-fit:cover;
    transition:0.6s ease;
}

/* Zoom Image */

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

/* Overlay */

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0);
    transition:.5s ease;
}

.study-card:hover .overlay{
    background:rgba(0,0,0,.65);
}

/*==============================
Text
==============================*/

.content{
    position:absolute;
    top:50%;
    left:50%;
    width:85%;
    text-align:center;
    color:#fff;

    opacity:0;
    transform:translate(-50%, -40%);
    transition:all .5s ease;
}

.study-card:hover .content{
    opacity:1;
    transform:translate(-50%, -50%);
}
.content h3{
    font-size:25px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:15px;
}

.content p{
    font-size:14px;
    line-height:24px;
    margin:0;
    color:#f2f2f2;
}


.offcanvas .dropdown-menu{
    position: static !important;
    transform: none !important;
    inset: auto !important;
    float: none;
    width: 100%;
    margin-top: 5px;
    border: 0;
    box-shadow: none;
    padding-left: 20px;
}

.offcanvas .dropdown-item{
    padding:8px 0;
}
#expertiseMenu .nav-link{
    font-size:16px;
    padding:4px 0;
    color:#000;
}

.btn:focus{
    box-shadow:none;
}

.offcanvas .dropdown-item:hover {
    background: #000;
    color: #fff;
    padding-left: 30px;
}


.dropdown-toggle::after {
    margin-top: 12px;
}

/*==============================
Circle Arrow
==============================*/

.arrow-btn{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:78px;
    height:78px;

    border:2px solid #fff;
    border-radius:50%;

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

    color:#fff;
    font-size:26px;

    transition:all .45s ease;

}

/* Hide icon on hover */

.study-card:hover .arrow-btn{

    opacity:0;
    visibility:hidden;

    transform:translate(-50%,-50%) scale(.6);

}

/*==============================
Responsive
==============================*/

@media(max-width:991px){

.study-card img{
    height:350px;
}

.content h3{
    font-size:28px;
}

}

@media(max-width:767px){

.study-card{
    margin-bottom:25px;
}

.study-card img{
    height:320px;
}

.case-study h2{
    font-size:32px;
}

.content{
    left:20px;
    right:20px;
    bottom:20px;
}

.content h3{
    font-size:24px;
}

.content p{
    font-size:14px;
    line-height:22px;
}

.arrow-btn{
    width:65px;
    height:65px;
    font-size:22px;
}

}

/* ---------- CTA ---------- */
.cta{ text-align:center;  }
.cta h2{ font-weight:500; font-size:42px; }
.cta p{ color:var(--muted); margin:1rem auto 2rem; max-width:560px; }
.btn-dark-pill{
background:#000;  color:#fff; border:none; border-radius:6px;
  padding:.85rem 2.2rem; font-weight:600; transition:transform .25s ease, background .25s ease;
}
.btn-dark-pill:hover{ background:#000; color:#fff; transform:translateY(-3px); }

/* expertise start */
.expertise-section{
    background:#fff;
    padding:80px 240px;
}

.section-title{
    font-size:42px;
    font-weight:600;
    color:#111;
}

.expertise-item{
    padding:26px 0;
    border-bottom:1px solid #ececec;
    transition:.4s;
}

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

.number{
    font-size:20px;
    color:#222;
    font-weight:500;
}

.expertise-item h3{
    font-size:20px;
    font-weight:700;
    color:#111;
    line-height:1.2;
    margin:0;
    transition:.3s;
}

.arrows{
    width:60px;
    height:60px;
    /* border-radius:50%; */
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
    color:#408CCA;
    transition:.4s;
}

.expertise-item p{
    font-size:16px;
    line-height:1.6;
    color:#222;
    margin:0;
}

.expertise-item:hover{
    transform:translateX(12px);
}

.expertise-item:hover h3{
    color:#408CCA;
}

.expertise-item:hover .arrow{
    transform:translateX(12px);
}

/* Tablet */

@media(max-width:991px){

.section-title{
    font-size:42px;
}

.expertise-item{
    padding:30px 0;
}

.number{
    font-size:24px;
}

.expertise-item h3{
    font-size:28px;
}

.expertise-item p{
    font-size:18px;
}

}

/* Mobile */

@media(max-width:576px){

.section-title{
    font-size:34px;
}

.number{
    font-size:18px;
}

.expertise-item h3{
    font-size:22px;
}

.expertise-item p{
    font-size:16px;
}

}
/* expertise end */

/* toolkit start */
.toolkit-section{
    position:relative;
    background:url("../image/Group 918.jpg") center center/cover no-repeat;
    min-height:75vh;
    overflow:hidden;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.toolkit-content{
    position:relative;
    z-index:2;
    color:#fff;
}

.heading span{
    font-size:13px;
    letter-spacing:2px;
    display:block;
    margin-bottom:10px;
    text-transform:uppercase;
}

.heading h2{
    font-size:42px;
    font-weight:700;
    margin-bottom:0;
}

.toolkit-box{
    position:relative;
    padding:15px 35px;
    border-color:rgba(255,255,255,.35)!important;
    transition:.4s;
}

.numbers{
    width:48px;
    height:34px;
    background:#fff;
    color:#000;
    border-radius:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    font-weight:700;
    margin-bottom:25px;
}

.toolkit-box h3{
    font-size:20px;
    font-weight:400;
    line-height:1.3;
    margin-bottom:12px;
    transition:.4s;
}

.toolkit-box p{
    font-size:16px;
    color:#ddd;
    margin:0;
    transition:.4s;
}

.toolkit-box:hover{
    background:rgba(255,255,255,.08);
}

.toolkit-box:hover h3{
    color:#408CCA;
    transform:translateX(8px);
}

.toolkit-box:hover p{
    color:#fff;
}

/* Tablet */

@media(max-width:991px){

.toolkit-section{
    min-height:auto;
    padding:90px 0;
}

.heading h2{
    font-size:42px;
}

.toolkit-box{
    padding:40px 25px;
}

.toolkit-box h3{
    font-size:24px;
}

}

/* Mobile */

@media(max-width:767px){

.toolkit-box{
    border-right:none!important;
    border-bottom:1px solid rgba(255,255,255,.25)!important;
}

.toolkit-box:last-child{
    border-bottom:none!important;
}

.heading h2{
    font-size:34px;
}

.toolkit-box h3{
    font-size:22px;
}

.toolkit-box p{
    font-size:15px;
}

}
/* toolkit end */
.engagement-section {
  padding: 80px 200px;
}
.main-title {
  font-size: 42px;
  font-weight: 600;
}
.digital-footprint{
    width:100%;
    overflow:hidden;
    background:#fff;
}

.footprint-banner{
    width:100%;
}

.footprint-banner img{
    width:100%;
    height:auto;
    display:block;
}
.digital-footprint{
    position: relative;
}

.footprint-banner{
    position: relative;
}

.banner-buttons{
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 2;
}

.banner-buttons .btn{
    min-width: 160px;
    padding: 10px 25px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: capitalize;
    transition: all .4s ease;
}

/* View Work Button */
.btn-view{
    background: #000;
    color: #fff;
    border: 1px solid #fff;
}

.btn-view:hover{
    background: #fff;
    color: #000;
}

/* Get Proposal Button */
.btn-proposal{
    background: #000;
    color: #fff;
    border: 1px solid rgba(59, 137, 32, 1);
}

.btn-proposal:hover{
    background: rgba(59, 137, 32, 1);
    color: #fff;
}

/* Mobile */
@media (max-width:768px){

    .banner-buttons{
        bottom: 10%;
        flex-direction: column;
        width: 85%;
        align-items: center;
    }

    .banner-buttons .btn{
        width: 100%;
        text-align: center;
    }
}

.ai-engine-section{

    position:relative;
    overflow:hidden;
    background:#02060d;
    padding:100px 0;
}

/* Background */

.ai-bg{

    position:absolute;
    inset:0;

    background:url("../image/AdobeStock_1158385112 1.png") center center/cover no-repeat;

    opacity:.28;

    animation:bgZoom 20s linear infinite alternate;
}

/* Blue PNG */

.blue-glow{

    position:absolute;
    right:0;
    bottom:20px;
    width:320px;

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

    z-index:1;
}

.container{

    position:relative;
    z-index:3;
}

.small-title{

    color:#6fb8ff;
    letter-spacing:3px;
    font-size:14px;
    text-transform:uppercase;
}

.main-titles{

    color:#fff;
    font-size:35px;
    font-weight:600;
    margin-top:15px;
}

/* .main-titles span{

    color:#4ab7ff;
} */

.subtitles{

    color:#b9c5d6;
    max-width:720px;
    margin:10px auto;
    line-height:1.3;
}

/* Feature */

.feature-box{

    display:flex;
    align-items:center;

    gap:20px;

    padding:22px;

    margin-bottom:20px;

    border-radius:18px;

    background:rgba(0,0,0,.055);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.08);

    transition:.45s;
}

.feature-box:hover{

    transform:translateX(18px);

    background:rgba(255,255,255,.08);

    border-color:#408cca;
}

.icon-box{

    width:65px;
    height:65px;

    border-radius:18px;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:#000;

    flex-shrink:0;
}

.feature-box h5{

    color:#fff;
    margin-bottom:6px;
}

.feature-box p{

    margin:0;
    color:#bfc9d7;
}

.appointment-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:15px 38px;

    color:#000;

    text-decoration:none;

    background:#fff;

    border-radius:50px;

    font-weight:600;

    transition:.4s;
}

.appointment-btn:hover{

    background:#408cca;

    color:#fff;

    transform:translateY(-6px);
}


/************ Animation **************/

@keyframes floatGlow{

0%{

transform:translateY(0px);
}

50%{

transform:translateY(-20px);
}

100%{

transform:translateY(0px);
}

}

@keyframes pulse{

0%{

box-shadow:0 0 0 rgba(0,153,255,.6);
}

50%{

box-shadow:0 0 25px rgba(0,153,255,.8);
}

100%{

box-shadow:0 0 0 rgba(0,153,255,.6);
}

}

@keyframes bgZoom{

from{

transform:scale(1);
}

to{

transform:scale(1.08);
}

}

/************ Responsive ************/

@media(max-width:991px){

.main-title{

font-size:30px;
}

.blue-glow{

width:180px;
opacity:.6;
}

.feature-box{

padding:18px;
}

}

@media(max-width:576px){

.ai-engine-section{

padding:70px 0;
}

.main-title{

font-size:30px;   }   

.subtitle{

font-size:15px;
}

.feature-box{

flex-direction:column;
text-align:center;
}

.icon-box{

margin-bottom:10px;
}

.blue-glow{

display:none;
}

}

    .journey-wrap{ max-width:1000px; margin:0 auto; }
    .journey-svg{ width:100%; height:auto; display:block; }
    .journey-svg text{ font-family:'Poppins',system-ui,sans-serif; }

    /* dotted line look */
    .dotted{
      fill:none; stroke:#8e8f92; stroke-width:3.6;
      stroke-linecap:round; stroke-dasharray:0.1 11;
    }

    /* sequential reveal: each mask stroke "draws" along its segment in turn.
       same 9s timeline, no per-element delay (so it loops in perfect sync). */
    .reveal{ fill:none; stroke:#fff; stroke-width:16; stroke-linecap:round;
             stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:100; }
    .r1{ animation:drawA 9s linear infinite; }
    .r2{ animation:drawB 9s linear infinite; }
    .r3{ animation:drawC 9s linear infinite; }
    .r4{ animation:drawD 9s linear infinite; }
    .r5{ animation:drawE 9s linear infinite; }

    @keyframes drawA{ 0%{stroke-dashoffset:100} 13%{stroke-dashoffset:0} 93%{stroke-dashoffset:0} 100%{stroke-dashoffset:100} }
    @keyframes drawB{ 0%,13%{stroke-dashoffset:100} 26%{stroke-dashoffset:0} 93%{stroke-dashoffset:0} 100%{stroke-dashoffset:100} }
    @keyframes drawC{ 0%,26%{stroke-dashoffset:100} 39%{stroke-dashoffset:0} 93%{stroke-dashoffset:0} 100%{stroke-dashoffset:100} }
    @keyframes drawD{ 0%,39%{stroke-dashoffset:100} 55%{stroke-dashoffset:0} 93%{stroke-dashoffset:0} 100%{stroke-dashoffset:100} }
    @keyframes drawE{ 0%,55%{stroke-dashoffset:100} 66%{stroke-dashoffset:0} 93%{stroke-dashoffset:0} 100%{stroke-dashoffset:100} }

    /* slow accent ring rotation */
    .ring{ transform-box:fill-box; transform-origin:center; }
    .cw{ animation:spin 20s linear infinite; }
    .ccw{ animation:spin 24s linear infinite reverse; }
    @keyframes spin{ to{ transform:rotate(360deg); } }

    .plane{ animation:drift 6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
    @keyframes drift{ 0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(6px,-5px) rotate(-3deg)} }

    @media (prefers-reduced-motion: reduce){
      .reveal{ stroke-dashoffset:0; animation:none; }
      .cw,.ccw,.plane{ animation:none; }
    }

    .cta-section {
    position: relative;
    overflow: hidden;
    padding: 80px 20px;
    background: linear-gradient(180deg, #014682 0%, #428CCB 100%);
}

/* Glow Effect */

.cta-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle,
            rgba(255,255,255,.7) 0%,
            rgba(255,255,255,.15) 45%,
            transparent 70%);
    top: -80px;
    right: -60px;
    filter: blur(18px);
    animation: floatGlow 5s ease-in-out infinite;
}

/* Heading */

.cta-title {
    color: #fff;
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 25px;
}

/* Paragraph */

.cta-text {
    color: rgba(255,255,255,.9);
    font-size: 22px;
    line-height: 1.7;
    max-width: 650px;
    margin: auto auto 35px;
}

/* Button */

.cta-btn {
    display: inline-block;
    background: #fff;
    color: #111;
    padding: 14px 36px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: .4s;
}

.cta-btn:hover {
    background: #000;
    color: #fff;
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,.25);
}

/* Animation */

@keyframes floatGlow {

    0% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(15px) scale(1.08);
    }

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

/* Responsive */

@media (max-width:991px) {

    .cta-title {
        font-size: 48px;
    }

    .cta-text {
        font-size: 18px;
    }

}

@media (max-width:767px) {

    .cta-section {
        padding: 80px 20px;
    }

    .cta-title {
        font-size: 36px;
    }

    .cta-text {
        font-size: 16px;
    }

    .cta-btn {
        padding: 12px 28px;
    }

}

.experience-section{

    background:#fff;
    padding:80px 0px;
}

.service-block h2{

    font-size:42px;
    font-weight:700;
    color:#111;
}

.section-desc{

    max-width:1100px;
    margin:auto;
    color:#000;
    line-height:1.4;
    margin-top:15px;
}

/* Image */

.image-box{
    margin-bottom:10px !important;

    overflow:hidden;
  
    position:relative;
}

.image-box img{

    width:100%;
    transition:.8s;
}

.image-box:hover img{

    transform:scale(1.08);
}

/* Blue Overlay */

.image-box::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(90deg,
    rgba(0,120,255,.15),
    transparent);

    opacity:0;

    transition:.5s;
}

.image-box:hover::after{

    opacity:1;
}

/* Text */

.content-box{

    padding:20px;
}

.content-box p{

    color:#000;
    line-height:1.3;
    font-size:16px;
}

/* Divider */

.section-divider{

    margin:50px auto;
    border-top:1px solid #000;
    width:85%;
}



/* Responsive */

@media(max-width:991px){

.service-block h2{

font-size:32px;
}

.section-desc{

font-size:15px;
}

.content-box{

padding:0;
margin-top:20px;
}

}

@media(max-width:576px){

.experience-section{

padding:70px 0;
}

.service-block h2{

font-size:28px;
}

.content-box p{

font-size:15px;
line-height:1.8;
}

}

/* .expertise-section{
    background:#fff;
    padding:90px 0;
} */

.expertise-title{
    font-size:42px;
    font-weight:600;
    color:#111;
}

.expertise-card{

    background:#f6f6f6;

    border-radius:18px;

    padding:28px 22px;

    height:100%;

    position:relative;

    transition:.45s ease;

    overflow:hidden;
}

.expertise-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:3px;

    height:100%;
}

.border-blue::before{
    background:rgba(20, 186, 211, 1);
}

.border-sky::before{
    background:rgba(66, 140, 203, 1);
}

.border-purple::before{
    background:rgba(101, 74, 158, 1);
}

.border-pink::before{
    background:rgba(144, 63, 152, 1);
}

.number{

    font-size:18px;

    font-weight:700;

    display:block;

    margin-bottom:15px;
}

.expertise-card h5{

    font-size:16px;

    font-weight:600;

    color:#111;

    margin-bottom:18px;

    line-height:1.4;
}

.expertise-card p{

    font-size:14px;

    color:#666;

    line-height:1.4;

    margin:0;
}

/* Hover */

.expertise-card:hover{

    transform:translateY(-10px);

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

    background:#fff;
}

.expertise-card:hover::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,
    rgba(0,140,255,.06),
    transparent);

}

/* Responsive */

@media(max-width:991px){

.expertise-title{

font-size:34px;
}

}

@media(max-width:767px){

.expertise-section{

padding:70px 0;
}

.expertise-title{

font-size:28px;
}

.expertise-card{

padding:25px 20px;
}

}

.tag1{
    top:12%;left:21%;
}
.tag2{
    top:11%;left:51%;
}
.tag3{
    top:10%;right:9%;
}
.tag4{
    top:87%;left:17%;
}
.tag5{
    top:52%;left:32%;
}
.tag6{
     top:52%;right:26%;
}
.tag7{
     top:32%;left:26%;
}
.tag8{
     top:-13%;right:12%;
}
.tag9{
    top:32%;right:23%;
}
.tag10{
    top: 79%;right: 44%;
}
.tag11{
    top: -14%;left: 47%;
}
.tag12{
    top:80%;right:14%;
}
.tag13{
    top:-20%;left:18%;
}
.tag14{
    top:28%;right:23%;
}
.tag15{
    top:73%;left:10%;
}
.tag16{
    top:31%;left:30%;
}
.tag17{
    top:72%;left:40%;
}
.tag18{
    top:80%;right:12%;
}

@media(max-width:786px){
    .tag1{
    top:4%;left:8%;
}
.tag2{
    top:12%;left:49%;
}
.tag3{
    top:21%;right:46%;
}
.tag4{
   top: 32%;
        left: 39%;
}
.tag5{
    top:39%;left:5%;
}
.tag6{
     top:47%;right:5%;
}
.tag7{
     top:-42%;left:4%;
}
.tag8{
     top:-36%;right:8%;
}
.tag9{
           top: -23%;
        right: 49%;
}
.tag10{
    top: -11%;right: 8%;
}
.tag11{
    top: 0%;left: 9%;
}
.tag12{
    top:11%;right:14%;
}
.tag13{
        top: -78%;
    left: 9%;
}
.tag14{
    top: -70%;
    right: 11%;
}
.tag15{
    top:-59%;left:6%;
}
.tag16{
    top:-48%;left:44%;
}
.tag17{
    top:-37%;left:10%;
}
.tag18{
    top:-25%;right:12%;
}
}

/* Form box */
.form-box{
    background: #f5f5f5;
    padding: 30px;
    border-radius: 10px;
}
.form-box input{
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
}
.form-box input:focus{
    box-shadow: none;
    border-color: #000;
}
.form-control{
    background-color: #f5f5f5;
}
h4{
    font-size: 20px;
    font-weight: 500;
}

.btn-dark-custom{
    background: #000;
    color: #fff;
    border-radius: 6px;
    padding: 8px 20px;
    border: none;
}

/* Open positions */
.job-box{
   
    padding-left: 40px;
    border-left: 1px solid #ccc;
}
.job-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.job-item span{
    font-size: 20px;
    font-weight: 500;
}

/* Responsive */
@media(max-width:768px){
    .job-box{
        border-left: none;
        padding-left: 0;
        margin-top: 30px;
    }
    .career-title{
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-left: 15px;
}
.overlay-text h2{
    font-size: 60px !important;
}
}
/* career section */
.career-section{

    padding: 80px 150px;
    background: #fff;
}

/* Title */
.career-title{
    font-weight: 600;
    font-size: 42px;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-left: 113px;
}
.section-line{
    width: 350px !important;
    height: 2px !important;
    background: #000 !important;
  
}


/* frugal */
.approach-section{
    background:#fff;
    padding:140px 0;
}

.approach-content{
    text-align:center;
}

.approach-content h2{
    font-size:42px;
    font-weight:600;
    line-height:1.1;
    color:#111;
    margin:0;
    letter-spacing:-1px;
    font-family:'Poppins',sans-serif;
}

.approach-content .green{
    color:#5f9446;
}

/* Tablet */
@media (max-width:991px){

.approach-section{
    padding:90px 20px;
}

.approach-content h2{
    font-size:36px;
}

}

/* Mobile */
@media (max-width:767px){

.approach-section{
    padding:70px 15px;
}

.approach-content h2{
    font-size:26px;
    line-height:1.35;
}

}



/* ======================================================
   5. PROJECTS SECTION
   ====================================================== */
.projects-section {
  /* background-image: url('../image/banner\ blank\ 1.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat; */
   background: #082038;
  position: relative;
  z-index: 10;
  padding: 80px 0px;
}




.pillar-title {
      font-size: 42px;
      font-weight: 600;
      text-align: center;
      color: #fff;
      /* margin-bottom: 30px; */
      line-height: 1.15;
    }
.pillar-desc {
      font-size: 16px;
      color: #fff;
      line-height: 1.65;
      max-width: 800px;
    }

.projects-stack {
  max-width: 60rem;
  margin: 0 auto;
  position: relative;
}

.project-card-outer {
  position: sticky;
  top: 4rem;
  display: flex;
  align-items: flex-start;
  /* padding-bottom: 2rem; */
}

@media (min-width: 768px) {
  .project-card-outer { top: 8rem; }
}

.project-card {
  width: 100%;
  /* border-radius: 40px; 
   border: 2px solid #D7E2EA; */
  background: #082038;
  /* padding: 1rem; */
  will-change: transform;
  transform-origin: top center;
  transition: transform 0.1s linear;
}


.project-card-top {
    padding-top:10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  /* margin-bottom: 1.5rem; */
}

.project-top-left {
  flex-shrink: 0;
}

 .pillar-number {
      font-size: clamp(3.5rem, 10vw, 7rem);
      font-weight: 900;
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(215, 226, 234, 0.35);
      flex-shrink: 0;
      /* nudge baseline to align with text */
      margin-top: -0.1em;
    }

.project-top-mid {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 150px;
}

 .pillar-divider {
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, transparent 0%, #77ED55 30%, #399BEB 70%, transparent 100%);
      margin-top: 1.5rem;
    }
    .border-top{    
    border: 4px solid;
    border-image: linear-gradient(90deg, transparent 0%, #77ED55 30%, #399BEB 70%, transparent 100%) 1;
}

  



.project-name {
  color: #fff;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
}

.project-card-bottom {
  display: flex;
  gap: 0.75rem;
}

.project-col1 {
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.project-col2 {
  width: 60%;
}