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


/* RESET */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:Segoe UI, sans-serif;
  background:var(--bg);
  color:#222;
  line-height:1.6;
}


nav img{height:55px;}
nav ul{display:flex;gap:30px;list-style:none;}
nav a{text-decoration:none;color:var(--dark);font-weight:600;}
.menu-toggle{display:none;font-size:26px;}

/* HERO */
.hero{
  height:100vh;
  background:linear-gradient(rgba(47,66,102,.75),rgba(47,66,102,.75)),
             url('hero.jpg') center/cover;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}
.hero h1{font-size:3.8rem;}
.hero p{font-size:1.3rem;margin-top:10px;}

/* SECTIONS */
section{padding:0px 0px 0px 0px;}
h2{text-align:center;font-size:2.6rem;color:var(--dark);margin-bottom:50px;}

/* CARDS */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}
.card{
  background:var(--white);
  padding:35px;
  border-radius:16px;
  box-shadow:0 20px 40px rgba(0,0,0,0.1);
  transition:.4s;
  border-top:6px solid var(--primary);
}


/* TIMELINE */
.timeline{
  max-width:900px;
  margin:auto;
}
.step{
  background:var(--white);
  padding:25px;
  margin:20px 0;
  border-left:5px solid var(--primary);
  border-radius:8px;
}

/* PORTFOLIO */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}
.gallery div{
  background:#ccc;
  height:180px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
}

/* CLIENTS */
.clients{
  background:#eef1f8;
  overflow:hidden;
}
.logo-track{
  display:flex;
  width:200%;
  animation:scroll 25s linear infinite;
}
.logo-track img{
  width:150px;
  margin:30px;
  filter:grayscale(100%);
}
@keyframes scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* CONTACT */
.contact{
  background:var(--dark);
  color:#fff;
  text-align:center;
}

/* FOOTER */
footer{
  background:#1c2740;
  color:#ccc;
  text-align:center;
  padding:15px;
}

/* RESPONSIVE */
@media(max-width:768px){
  nav ul{display:none;flex-direction:column;}
  nav ul.active{display:flex;}
  .menu-toggle{display:block;}
}

/* NAVBAR */
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 40px;
  background:#fff;
  box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.logo{height:55px;}

.menu{
  list-style:none;
  display:flex;
  gap:30px;
}

.menu li{
  position:relative;
}

.menu a{
  text-decoration:none;
  color:#2F4266;
  font-weight:600;
  padding:10px;
}

/* SUB MENU */
.sub-menu{
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  min-width:240px;
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
  border-radius:10px;
  display:none;
  animation:fadeIn 0.3s ease;
  z-index:999;
}

.sub-menu li a{
  display:block;
  padding:12px 18px;
  color:#425E8F;
}

.sub-menu li a:hover{
  background:#f1f4fb;
}

/* SHOW ON HOVER (DESKTOP) */
.has-sub:hover .sub-menu{
  display:block;
}

/* ANIMATION */
@keyframes fadeIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

/* MOBILE */
.menu-toggle{
  display:none;
  font-size:28px;
  cursor:pointer;
}

@media(max-width:768px){
  .menu{
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:#fff;
    flex-direction:column;
    display:none;
  }

  .menu.active{display:flex;}

  .has-sub:hover .sub-menu{display:none;}

  .sub-menu{
    position:relative;
    box-shadow:none;
    border-radius:0;
  }

  .menu-toggle{display:block;}
}


:root{
  --nav-bg:#243A5E;
  --text:#F4F6FB;
  --gold:#FF9215;
  --dropdown-bg:#ffffff;
  --dark:#334155;
}

/* HEADER */
.header{
  position:fixed;
  top:0;
  width:100%;
  z-index:999;
  background:var(--nav-bg);
  box-shadow:0 8px 30px rgba(36,58,94,0.45);
}

/* NAV */
.nav{
  max-width:1300px;
  margin:auto;
  padding:14px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo img{
  height:55px;
}

/* MENU */
.nav-menu{
  display:flex;
  gap:36px;
  list-style:none;
  align-items:center;
}

.nav-menu a{
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  letter-spacing:0.6px;
  position:relative;
  padding:8px 0;
}

/* UNDERLINE */
.nav-menu a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:var(--gold);
  transition:0.3s ease;
}
.nav-menu a:hover::after{
  width:100%;
}

/* DROPDOWN */
.dropdown{position:relative;}

.dropdown-menu{
  position:absolute;
  top:130%;
  left:0;
  background:var(--dropdown-bg);
  border-radius:12px;
  padding:18px;
  min-width:260px;
  box-shadow:0 25px 45px rgba(36,58,94,0.25);
  opacity:0;
  pointer-events:none;
  transform:translateY(12px);
  transition:0.3s ease;
}
.dropdown:hover .dropdown-menu{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.dropdown-menu a{
  display:block;
  padding:10px 14px;
  color:var(--dark);
  border-radius:8px;
}
.dropdown-menu a:hover{
  background:#F1F5F9;
  color:#1E293B;
}

/* TWO COLUMN */
.two-column{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

/* HAMBURGER */
.hamburger{
  display:none;
  font-size:28px;
  color:var(--text);
  cursor:pointer;
}

/* MOBILE */
@media(max-width:900px){
  .nav-menu{
    position:fixed;
    top:78px;
    right:-100%;
    width:300px;
    height:100vh;
    background:var(--nav-bg);
    flex-direction:column;
    padding:30px;
    transition:0.4s ease;
  }
  .nav-menu.active{right:0;}

  .dropdown-menu{
    position:relative;
    opacity:1;
    transform:none;
    background:transparent;
    box-shadow:none;
    padding:0;
  }

  .dropdown-menu a{
    color:var(--text);
  }

  .hamburger{display:block;}
}

/********************What we offer***********************/

.what-we-do{
  padding:110px 40px;
  background:#f5f7fb;
  overflow:hidden;
}

.wwd-container{
  max-width:1300px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:70px;
  align-items:center;
}

/* IMAGE */
.wwd-image img{
  width:100%;
  border-radius:22px;
  box-shadow:0 35px 70px rgba(36,58,94,0.28);
  transform:scale(0.9);
  transition:0.8s ease;
}
.reveal-section.active .wwd-image img{
  transform:scale(1);
}

/* CONTENT */
.wwd-content h2{
  font-size:2.9rem;
  color:#243A5E;
  margin-bottom:15px;
}
.wwd-intro{
  font-size:1.15rem;
  color:#475569;
  margin-bottom:40px;
  max-width:620px;
}

/* SERVICES */
.wwd-services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:26px;
}

/* CARD */
.wwd-card{
  background:#fff;
  padding:28px 30px;
  border-radius:18px;
  position:relative;
  box-shadow:0 25px 50px rgba(36,58,94,0.15);
  border-left:5px solid #FF9215;
  transition:0.45s ease;
  overflow:hidden;
}
.wwd-card span{
  position:absolute;
  top:18px;
  right:22px;
  font-size:2.6rem;
  font-weight:700;
  color:#E2E8F0;
}
.wwd-card h4{
  color:#243A5E;
  margin-bottom:10px;
}
.wwd-card p{
  color:#64748B;
  font-size:0.95rem;
}

/* HOVER EFFECT */
.wwd-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.3),transparent);
  transform:translateX(-100%);
}
.wwd-card:hover::before{
  animation:shine 1s ease;
}
@keyframes shine{
  to{transform:translateX(100%);}
}

.wwd-card:hover{
  transform:translateY(-14px);
  background:linear-gradient(135deg,#243A5E,#3B5175);
}
.wwd-card:hover h4,
.wwd-card:hover p,
.wwd-card:hover span{
  color:#fff;
}

/* SCROLL REVEAL */
.reveal-up{
  opacity:0;
  transform:translateY(40px);
  transition:0.7s ease;
}
.reveal-left{
  opacity:0;
  transform:translateX(-60px);
  transition:0.8s ease;
}

.reveal-section.active .reveal-up,
.reveal-section.active .reveal-left{
  opacity:1;
  transform:none;
}

/* DELAYS */
.delay-1{transition-delay:.2s}
.delay-2{transition-delay:.3s}
.delay-3{transition-delay:.4s}
.delay-4{transition-delay:.5s}
.delay-5{transition-delay:.6s}
.delay-6{transition-delay:.7s}
.delay-7{transition-delay:.8s}

/* RESPONSIVE */
@media(max-width:900px){
  .wwd-container{
    grid-template-columns:1fr;
  }
  .wwd-image{
    order:-1;
  }
}

/********************** Video ***********************/
/* VIDEO CONTAINER */
.video-box{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  box-shadow:0 35px 70px rgba(36,58,94,0.28);
}

/* VIDEO */
.wwd-video{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:22px;
  transform:scale(1.1);
  transition:1s ease;
}

/* ON REVEAL */
.reveal-section.active .wwd-video{
  transform:scale(1);
}

/* OVERLAY */
.video-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    rgba(36,58,94,0.25),
    rgba(36,58,94,0.45)
  );
  pointer-events:none;
}
/***************** SLIDER *****************/

.slider{
  position:relative;
  width:100%;
  height:100vh;
  margin-top:83px; /* header height */
  overflow:hidden;
}

/* Slides */
.slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 1s ease-in-out;
}

.slide.active{
  opacity:1;
  z-index:1;
}

/* Media */
.slide img,
.video-slide video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* DOTS FIXED */
.slider-dots{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:10;
}

.dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,0.6);
  cursor:pointer;
  transition:0.3s ease;
}

.dot.active{
  background:#FF9215;
  transform:scale(1.2);
}

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

  .slider{
    height:65vh;  /* smaller but stable */
    margin-top:78px;
  }

  .slider-dots{
    bottom:12px;  /* keep inside slider */
  }

  .dot{
    width:9px;
    height:9px;
  }
}
/***************** WHAT WE DO *****************/

.whatwedo-ultimate{
  padding:120px 40px;
  background:#f5f7fb;
  overflow:hidden;
}

/* ================= GRID ================= */
.wwd-grid{
  max-width:1300px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  gap:50px;
  align-items:center;
}

/* ================= LEFT ================= */
.wwd-left h2{
  font-size:2.7rem;
  color:#243A5E;
  margin-bottom:15px;
}

.wwd-left p{
  color:#475569;
  margin-bottom:25px;
  font-size:1.05rem;
}

.wwd-points{
  list-style:none;
  padding:0;
  margin-bottom:30px;
}

.wwd-points li{
  margin-bottom:10px;
  font-weight:500;
  color:#243A5E;
}

.wwd-btn{
  display:inline-block;
  padding:14px 32px;
  background:#243A5E;
  color:#fff;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  transition:0.3s ease;
}

.wwd-btn:hover{
  background:#FF9215;
  transform:translateY(-3px);
}

/* ================= CENTER ORBIT ================= */

.wwd-center{
  display:flex;
  justify-content:center;
}

.orbit-container{
  position:relative;
  width:460px;
  height:460px;
}

/* Center Logo */
.orbit-video{
  position:absolute;
  inset:95px;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 30px 70px rgba(36,58,94,0.25);
  z-index:2;
}

.orbit-video img{
  width:70%;
  height:auto;
  object-fit:contain;
}

/* Orbit Ring */
.orbit-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px dashed rgba(201,162,77,0.4);
  animation:spin 22s linear infinite;
}

/* Orbit Items */
.orbit-item{
  position:absolute;
  top:50%;
  left:50%;
  width:115px;
  height:115px;
  margin:-57.5px;

  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;

  font-weight:600;
  font-size:0.9rem;
  color:#243A5E;

  background:linear-gradient(135deg,#FDF6E3,#FFE08A);
  box-shadow:0 20px 40px rgba(36,58,94,0.25);
  transition:0.4s ease;
}

.orbit-item:nth-child(even){
  background:linear-gradient(135deg,#EAF0FF,#C7D2FE);
}

.orbit-item:hover{
  background:#243A5E;
  color:#fff;
  transform:scale(1.08);
}

/* Position Around Circle */
.orbit-item:nth-child(1){ transform:rotate(0deg) translate(215px) rotate(0deg); }
.orbit-item:nth-child(2){ transform:rotate(60deg) translate(215px) rotate(-60deg); }
.orbit-item:nth-child(3){ transform:rotate(120deg) translate(215px) rotate(-120deg); }
.orbit-item:nth-child(4){ transform:rotate(180deg) translate(215px) rotate(-180deg); }
.orbit-item:nth-child(5){ transform:rotate(240deg) translate(215px) rotate(-240deg); }
.orbit-item:nth-child(6){ transform:rotate(300deg) translate(215px) rotate(-300deg); }

/* Animation */
@keyframes spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

/* ================= RIGHT STATS ================= */

.wwd-right{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.stat-box{
  background:#fff;
  padding:30px 20px;
  border-radius:18px;
  text-align:center;
  box-shadow:0 20px 40px rgba(36,58,94,0.15);
  transition:0.3s ease;
}

.stat-box h3{
  font-size:1.8rem;
  color:#243A5E;
}

.stat-box p{
  font-size:0.95rem;
  color:#64748B;
}

.stat-box:hover{
  background:#243A5E;
  color:#fff;
  transform:translateY(-8px);
}

.stat-box:hover h3,
.stat-box:hover p{
  color:#fff;
}

/**************** RESPONSIVE ****************/

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

  .wwd-grid{
    grid-template-columns:1fr;
    text-align:center;
    gap:70px;
  }

  .wwd-left{ order:2; }
  .wwd-center{ order:1; }
  .wwd-right{ order:3; }

  .orbit-container{
    width:360px;
    height:360px;
  }

  .orbit-video{ inset:70px; }

  .orbit-item{
    width:90px;
    height:90px;
    margin:-45px;
    font-size:0.8rem;
  }

  .orbit-item:nth-child(1){ transform:rotate(0deg) translate(165px) rotate(0deg); }
  .orbit-item:nth-child(2){ transform:rotate(60deg) translate(165px) rotate(-60deg); }
  .orbit-item:nth-child(3){ transform:rotate(120deg) translate(165px) rotate(-120deg); }
  .orbit-item:nth-child(4){ transform:rotate(180deg) translate(165px) rotate(-180deg); }
  .orbit-item:nth-child(5){ transform:rotate(240deg) translate(165px) rotate(-240deg); }
  .orbit-item:nth-child(6){ transform:rotate(300deg) translate(165px) rotate(-300deg); }
}

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

  .whatwedo-ultimate{
    padding:90px 20px;
  }

  .orbit-container{
    width:280px;
    height:280px;
  }

  .orbit-video{ inset:55px; }

  .orbit-item{
    width:70px;
    height:70px;
    margin:-35px;
    font-size:0.7rem;
  }

  .orbit-item:nth-child(1){ transform:rotate(0deg) translate(125px) rotate(0deg); }
  .orbit-item:nth-child(2){ transform:rotate(60deg) translate(125px) rotate(-60deg); }
  .orbit-item:nth-child(3){ transform:rotate(120deg) translate(125px) rotate(-120deg); }
  .orbit-item:nth-child(4){ transform:rotate(180deg) translate(125px) rotate(-180deg); }
  .orbit-item:nth-child(5){ transform:rotate(240deg) translate(125px) rotate(-240deg); }
  .orbit-item:nth-child(6){ transform:rotate(300deg) translate(125px) rotate(-300deg); }

  .wwd-right{
    grid-template-columns:1fr;
  }
}
/**********************How we works start**************************/
.process-modern{
  padding:140px 40px;
  background:#f8fafc;
}

.section-head{
  text-align:center;
  max-width:900px;
  margin:0 auto 100px;
}

.section-head h2{
  font-size:2.8rem;
  color:#243A5E;
}

.section-head p{
  color:#64748B;
  font-size:1.1rem;
  margin-top:12px;
}

/* TIMELINE */
.timeline-container{
  position:relative;
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-between;
}

/* SVG LINE */
.timeline-svg{
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:4px;
  transform:translateY(-50%);
}

.timeline-svg line{
  stroke:#FF9215;
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:1200;
  stroke-dashoffset:1200;
  filter:drop-shadow(0 0 8px rgba(201,162,77,0.6));
}

/* STEP */
.step{
  position:relative;
  width:170px;
  text-align:center;
}

.step.top{ transform:translateY(-120px); }
.step.bottom{ transform:translateY(120px); }

/* CIRCLE */
.circle{
  width:70px;
  height:70px;
  margin:0 auto 16px;
  background:#ffffff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  font-size:1.4rem;
  box-shadow:0 20px 50px rgba(36,58,94,0.25);
  position:relative;
}

.circle span{
  position:absolute;
  top:-18px;
  background:#FF9215;
  color:#243A5E;
  font-size:0.75rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:20px;
}

/* CONNECTOR */
.step.top .circle::after,
.step.bottom .circle::after{
  content:'';
  position:absolute;
  width:2px;
  height:50px;
  background:#FF9215;
  left:50%;
}

.step.top .circle::after{ bottom:-50px; }
.step.bottom .circle::after{ top:-50px; }

/* CARD */
.card{
  background:rgba(255,255,255,0.95);
  padding:20px 18px;
  border-radius:16px;
  box-shadow:0 15px 40px rgba(36,58,94,0.15);
}

.card h4{
  color:#243A5E;
  margin-bottom:6px;
  font-size:1rem;
}

.card p{
  font-size:0.85rem;
  color:#64748B;
}

/* RESPONSIVE */
@media(max-width:900px){
  .timeline-container{
    flex-direction:column;
    gap:70px;
  }
  .timeline-svg{ display:none; }
  .step.top,.step.bottom{ transform:none; }
}

.card{
  position:relative;
  border-left:4px solid #FF9215;
  background:linear-gradient(
    180deg,
    #ffffff,
    #fdfbf7
  );
}
.process-modern{
  position:relative;
  padding:160px 40px;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(201,162,77,0.25), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(36,58,94,0.25), transparent 45%),
    linear-gradient(135deg, #f8fafc, #eef2f7);
}

/* ANIMATED GRADIENT FLOW */
.process-modern::before{
  content:'';
  position:absolute;
  inset:-50%;
  background:
    linear-gradient(
      120deg,
      rgba(201,162,77,0.18),
      rgba(36,58,94,0.18),
      rgba(201,162,77,0.18)
    );
  animation:gradientFlow 18s linear infinite;
  z-index:0;
}

/* FLOATING SHAPES */
.process-modern::after{
  content:'';
  position:absolute;
  top:-120px;
  left:-120px;
  width:420px;
  height:420px;
  background:radial-gradient(circle, rgba(201,162,77,0.35), transparent 70%);
  border-radius:50%;
  animation:floatBlob 10s ease-in-out infinite;
  z-index:0;
}

/* KEEP CONTENT ABOVE BACKGROUND */
.process-modern > *{
  position:relative;
  z-index:2;
}
@keyframes gradientFlow{
  0%{ transform:translateX(0); }
  50%{ transform:translateX(25%); }
  100%{ transform:translateX(0); }
}

@keyframes floatBlob{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(40px,30px); }
  100%{ transform:translate(0,0); }
}
.process-modern .bg-blob{
  position:absolute;
  bottom:-150px;
  right:-150px;
  width:480px;
  height:480px;
  background:radial-gradient(circle, rgba(36,58,94,0.35), transparent 70%);
  border-radius:50%;
  animation:floatBlob 14s ease-in-out infinite reverse;
  z-index:1;
}
.process-title{
  font-size:3.2rem;
  font-weight:800;
  text-align:center;
  margin-bottom:18px;
  background:linear-gradient(
    90deg,
    #243A5E,
    #FF9215,
    #243A5E
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;
  animation:titleShine 6s linear infinite;
}
@keyframes titleShine{
  0%{
    background-position:0%;
  }
  100%{
    background-position:200%;
  }
}

/**********************How we works End**************************/
/******************** Gallery Section Start *************************/

/* SECTION BASE */
.gallery-carousel{
  position:relative;
  padding:160px 40px;
  overflow:hidden;
  background:linear-gradient(135deg,#F1F5FF,#E9F0FF);
  color:#243A5E;
}

/* SOFT BACKGROUND GLOW */
.gallery-carousel::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, #FF921533, transparent 40%),
    radial-gradient(circle at 80% 60%, #243A5E33, transparent 45%);
  z-index:1;
}

.gallery-content{
  position:relative;
  z-index:3;
}

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

.gallery-header{
  text-align:center;
  margin-bottom:70px;
}

.gallery-title{
  font-size:3.2rem;
  font-weight:800;
  letter-spacing:1px;
  display:inline-block;
  position:relative;
}

.gallery-title span{
  color:#FF9215;
}

.gallery-title::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-10px;
  width:60%;
  height:4px;
  background:linear-gradient(90deg,transparent,#FF9215,transparent);
  transform:translateX(-50%);
  border-radius:2px;
  opacity:0.8;
}

.gallery-header p{
  max-width:820px;
  margin:auto;
  font-size:1.1rem;
  color:#5A6B8A;
}

/* ================= CAROUSEL ================= */

.carousel-wrapper{
  position:relative;
  max-width:1200px;
  margin:auto;
}

.carousel-container{
  overflow:hidden;
  position:relative;
}

.carousel-track{
  display:flex;
  gap:25px;
  will-change:transform;
  transition:transform 0.6s ease;
}

/* 🔥 FIXED: 2 items on desktop & MacBook */
.carousel-item{
  flex:0 0 calc(50% - 12.5px);
  height:420px;
  border-radius:22px;
  overflow:hidden;
  position:relative;
  box-shadow:0 30px 60px rgba(0,0,0,0.15);
  cursor:pointer;
  transition:0.4s ease;
  background:#fff;
  min-width:0; /* Safari fix */
}

.carousel-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.8s ease;
}

/* Overlay */
.carousel-item .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    rgba(36,58,94,0.2),
    rgba(36,58,94,0.85)
  );
  display:flex;
  align-items:flex-end;
  padding:25px;
  font-weight:600;
  color:#fff;
  opacity:0;
  transition:0.4s ease;
}

/* Hover Effects */
.carousel-item:hover{
  transform:translateY(-12px);
  box-shadow:0 40px 80px rgba(0,0,0,0.2);
}

.carousel-item:hover img{
  transform:scale(1.1);
}

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

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

.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,0.7);
  border:none;
  color:#243A5E;
  font-size:26px;
  width:50px;
  height:50px;
  border-radius:50%;
  cursor:pointer;
  transition:0.3s ease;
  z-index:5;
}

.carousel-btn:hover{
  background:#FF9215;
  color:#fff;
}

.carousel-prev{ left:-15px; }
.carousel-next{ right:-15px; }

/* ================= REVEAL ================= */

.reveal-up{
  opacity:0;
  transform:translateY(40px);
  transition:0.9s ease;
}

.reveal-section.active .reveal-up{
  opacity:1;
  transform:none;
}

/* ================= WAVE BACKGROUND ================= */

.gallery-bg-new{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.gallery-bg-new svg{
  position:absolute;
  bottom:-1px;
  width:200%;
  height:260px;
  animation:waveMove 18s linear infinite;
}

.gallery-bg-new path{
  fill:#243A5E;
  opacity:0.08;
}

@keyframes waveMove{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

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

/* Tablet */
@media(max-width:1024px){
  .carousel-item{
    flex:0 0 100%;
  }
}

/* Mobile */
@media(max-width:768px){
  .gallery-carousel{
    padding:120px 20px;
  }

  .carousel-item{
    flex:0 0 100%;
    height:360px;
  }

  .carousel-btn{
    display:none;
  }
}

/******************** Gallery Section End *************************/

/* CLIENT */
.client-info{
  display:flex;
  align-items:center;
  gap:15px;
}

.client-info img{
  width:55px;
  height:55px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #FF9215;
}

.client-info h4{
  color:#243A5E;
  font-size:1.05rem;
}
.client-info span{
  font-size:0.85rem;
  color:#64748B;
}


/* REVEAL */
.reveal-up{
  opacity:0;
  transform:translateY(40px);
  transition:0.8s ease;
}
.reveal-section.active .reveal-up{
  opacity:1;
  transform:none;
}
/******************* TESTIMONIAL SECTION *******************/
.testimonial-section{
  padding: 120px 40px;
  background: linear-gradient(135deg,#F1F5FF,#E9F0FF);
  overflow: hidden;
}

/* ================= HEADER ================= */
.testimonial-header{
  text-align: center;
  margin-bottom: 60px;
}

.testimonial-title{
  font-size: 3rem;
  font-weight: 800;
  color: #243A5E;
  margin-bottom: 12px;
}

.testimonial-header p{
  max-width: 780px;
  margin: auto;
  font-size: 1.1rem;
  color: #475569;
}

/* ================= WRAPPER ================= */
.testimonial-wrapper{
  max-width: 1100px;
  margin: auto;
  position: relative;
  overflow: hidden;
}

/* ================= TRACK ================= */
.testimonial-track{
  display: flex;
  transition: transform 0.6s ease-in-out;
}

/* ================= CARD ================= */
.testimonial-card{
  flex: 0 0 100%;
  padding: 40px;
  box-sizing: border-box;

  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(36,58,94,0.15);
  position: relative;

  min-height: 250px;
}

/* TEXT */
.testimonial-card p{
  font-size: 1.05rem;
  color: #334155;
  margin-bottom: 30px;
  line-height: 1.7;

  word-break: break-word;
}

/* QUOTE ICON */
.testimonial-card::before{
  content: "“";
  position: absolute;
  top: 20px;
  left: 30px;
  font-size: 70px;
  color: #FF9215;
  /*opacity: 0.15;*/
  line-height: 1;
  pointer-events: none;
}

/* ================= NAV BUTTONS ================= */
.testimonial-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.95);
  font-size: 26px;
  font-weight: 600;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  transition: all .3s ease;
  opacity: .7;
}

.testimonial-nav:hover{
  transform: translateY(-50%) scale(1.1);
  opacity: 1;
}

.testimonial-nav.prev{ left: 10px; }
.testimonial-nav.next{ right: 10px; }

/******************* RESPONSIVE *******************/

/* Tablet */
@media (max-width: 992px){
  .testimonial-section{
    padding: 100px 30px;
  }

  .testimonial-title{
    font-size: 2.4rem;
  }

  .testimonial-card{
    padding: 30px;
  }

  .testimonial-card::before{
    font-size: 55px;
  }
}

/* Mobile */
@media (max-width: 768px){
  .testimonial-section{
    padding: 80px 20px;
  }

  .testimonial-title{
    font-size: 2rem;
  }

  .testimonial-header p{
    font-size: 1rem;
  }

  .testimonial-card{
    padding: 22px;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(36,58,94,0.12);
  }

  .testimonial-card p{
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .testimonial-card::before{
    font-size: 40px;
    top: 15px;
    left: 18px;
  }

  .testimonial-nav{
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
}

/*******************Social Media***********************************/
.social-orbit{
  position:fixed;
  right:26px;
  top:50%;
  transform:translateY(-50%);
  z-index:999;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* CIRCLE BUTTON */
.orbit-icon{
  width:54px;
  height:54px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(8px);
  box-shadow:0 20px 40px rgba(36,58,94,0.25);
  color:#243A5E;
  text-decoration:none;
  font-size:18px;
  position:relative;
  transition:0.4s ease;
}

/* RIPPLE EFFECT */
.orbit-icon::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:currentColor;
  opacity:0.15;
  transform:scale(0);
  transition:0.5s ease;
}
.orbit-icon:hover::after{
  transform:scale(1.4);
}

/* HOVER */
.orbit-icon:hover{
  transform:translateY(-6px) scale(1.08);
}

/* FLOAT ANIMATION */
.orbit-icon{
  animation: orbitFloat 4s ease-in-out infinite;
}
.orbit-icon:nth-child(2){ animation-delay:0.5s; }
.orbit-icon:nth-child(3){ animation-delay:1s; }
.orbit-icon:nth-child(4){ animation-delay:1.5s; }

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

/* BRAND COLORS */
.facebook{ color:#1877F2; }
.instagram{ color:#E1306C; }
.linkedin{ color:#0A66C2; }
.youtube{ color:#FF0000; }

/* MOBILE */
@media(max-width:768px){
  .social-orbit{
    right:12px;
  }
  .orbit-icon{
    width:48px;
    height:48px;
  }
}

/*******************Social Media End***********************************/
/*******************Footer*********************************************/
.site-footer{
  position:relative;
  background:linear-gradient(135deg,#243A5E,#324A72);
  color:#ffffff;
  padding:120px 40px 0;
  overflow:hidden;
}

/* BACKGROUND SHAPES */
.footer-bg span{
  position:absolute;
  width:300px;
  height:300px;
  background:radial-gradient(circle,#FF921555,transparent);
  filter:blur(60px);
  animation: footerFloat 20s infinite ease-in-out;
}
.footer-bg span:nth-child(1){
  top:-100px;
  left:-80px;
}
.footer-bg span:nth-child(2){
  bottom:-120px;
  right:-80px;
  animation-duration:28s;
}

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

/* GRID */
.footer-container{
  max-width:1300px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:50px;
  position:relative;
  z-index:5;
}

/* LOGO */
.footer-logo{
  width:170px;
  margin-bottom:20px;
}

/* HEADINGS */
.footer-col h4{
  font-size:1.2rem;
  margin-bottom:18px;
  color:#FF9215;
}

/* TEXT */
.footer-about p{
  font-size:0.95rem;
  line-height:1.7;
  color:#E2E8F0;
}

/* LINKS */
.footer-col ul{
  list-style:none;
  padding:0;
}
.footer-col ul li{
  margin-bottom:12px;
}
.footer-col ul li a{
  color:#E2E8F0;
  text-decoration:none;
  transition:0.3s;
}
.footer-col ul li a:hover{
  color:#FF9215;
  padding-left:6px;
}

/* CONTACT */
.footer-contact li{
  display:flex;
  align-items:center;
  gap:10px;
  color:#E2E8F0;
}
.footer-contact i{
  color:#FF9215;
}

/* FACEBOOK */
.footer-facebook iframe{
  border-radius:14px;
  overflow:hidden;
}

/* BOTTOM */
.footer-bottom{
  margin-top:80px;
  text-align:center;
  padding:20px;
  background:rgba(0,0,0,0.15);
}
.footer-bottom p{
  font-size:0.9rem;
  color:#CBD5E1;
}

/* MOBILE */
@media(max-width:768px){
  .site-footer{
    padding:80px 20px 0;
  }
}
@keyframes footerFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-30px); }
}
.whatsapp-float{
  position:fixed;
  bottom:30px;
  right:30px;
  width:62px;
  height:62px;
  background:linear-gradient(135deg,#25D366,#1EBE5D);
  color:#ffffff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  box-shadow:0 20px 40px rgba(37,211,102,0.45);
  z-index:999;
  animation: whatsappPulse 2.5s infinite;
  transition:0.4s ease;
}

/* HOVER */
.whatsapp-float:hover{
  transform:scale(1.1);
  box-shadow:0 30px 60px rgba(37,211,102,0.6);
}

/* PULSE */
@keyframes whatsappPulse{
  0%{
    box-shadow:0 0 0 0 rgba(37,211,102,0.5);
  }
  70%{
    box-shadow:0 0 0 18px rgba(37,211,102,0);
  }
  100%{
    box-shadow:0 0 0 0 rgba(37,211,102,0);
  }
}

/* MOBILE */
@media(max-width:768px){
  .whatsapp-float{
    width:54px;
    height:54px;
    font-size:26px;
    bottom:20px;
    right:20px;
  }
}

/*******************Footer End*****************************************/
/*********************Popup*****************************************/
.lead-popup{
  position:fixed;
  inset:0;
  background:rgba(36,58,94,0.65);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.lead-box{
  position:relative;
  background:#ffffff;
  padding:45px 40px;
  border-radius:26px;
  max-width:420px;
  width:90%;
  text-align:center;
  box-shadow:0 40px 80px rgba(0,0,0,0.35);
  animation: popIn 0.5s ease;
}

@keyframes popIn{
  from{ transform:scale(0.8); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}

.lead-box h3{
  font-size:1.8rem;
  color:#243A5E;
  margin-bottom:10px;
}
.lead-box p{
  font-size:0.95rem;
  color:#475569;
  margin-bottom:25px;
}

.lead-box input,
.lead-box textarea{
  width:100%;
  padding:14px 16px;
  margin-bottom:14px;
  border-radius:12px;
  border:1px solid #CBD5E1;
  font-size:0.95rem;
}

.lead-box textarea{
  resize:none;
  height:90px;
}

.lead-box button{
  width:100%;
  padding:15px;
  border:none;
  border-radius:50px;
  background:linear-gradient(135deg,#FF9215,#E3C36A);
  color:#243A5E;
  font-weight:700;
  cursor:pointer;
}

.lead-box small{
  display:block;
  margin-top:12px;
  color:#64748B;
}

.close-popup{
  position:absolute;
  top:15px;
  right:20px;
  font-size:22px;
  cursor:pointer;
}
/*********************Popup End*****************************************/
.sticky-cta{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:#ffffff;
  padding:14px 24px;
  border-radius:50px;
  display:flex;
  align-items:center;
  gap:18px;
  box-shadow:0 20px 40px rgba(36,58,94,0.3);
  z-index:999;
}

.sticky-cta span{
  font-size:0.95rem;
  font-weight:600;
  color:#243A5E;
}

.sticky-cta button{
  padding:10px 24px;
  border:none;
  border-radius:50px;
  background:#FF9215;
  color:#243A5E;
  font-weight:700;
  cursor:pointer;
}

/* Mobile */
@media(max-width:768px){
  .sticky-cta{
    width:90%;
    justify-content:space-between;
  }
}

.popup-close{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  background:#F1F5FF;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(36,58,94,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.3s ease, box-shadow 0.3s ease;
  z-index:10;
}

/* MORPHING X */
.popup-close span{
  position:absolute;
  width:18px;
  height:2.5px;
  background:#243A5E;
  border-radius:2px;
  transition:0.35s ease;
}
.popup-close span:first-child{
  transform:rotate(45deg);
}
.popup-close span:last-child{
  transform:rotate(-45deg);
}

/* HOVER – NO TRANSLATE / SCALE */
.popup-close:hover{
  background:#FF9215;
  box-shadow:0 10px 24px rgba(36,58,94,0.3);
}
.popup-close:hover span:first-child{
  transform:rotate(0deg);
}
.popup-close:hover span:last-child{
  transform:rotate(0deg);
}



/***********************NAV MENU*************************/
/* HEADER */
.main-header{
  position:fixed;
  top:0;
  width:100%;
  background:linear-gradient(135deg,#ffffff,#F1F5FF);
  box-shadow:0 10px 30px rgba(36,58,94,0.15);
  z-index:999;
}

/* CONTAINER */
.nav-container{
  max-width:1300px;
  margin:auto;
  padding:14px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* LOGO */
.nav-logo img{
  height:52px;
}

/* MENU */
.nav-menu ul{
  display:flex;
  gap:36px;
  list-style:none;
  margin:0;
  padding:0;
}

.nav-menu a{
  position:relative;
  font-weight:600;
  color:#fbfbfb;
  text-decoration:none;
  padding:8px 0;
  transition:0.3s ease;
}

/* UNDERLINE ANIMATION */
.nav-menu a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:3px;
  background:linear-gradient(90deg,#FF9215,#E3C36A);
  border-radius:4px;
  transition:0.4s ease;
}

.nav-menu a:hover::after{
  width:100%;
}

/* HOVER */
.nav-menu a:hover{
  color:#FF9215;
}

/* SUB MENU */
.has-sub{
  position:relative;
}
.sub-menu{
  position:absolute;
  top:100%;
  left:0;
  background:#ffffff;
  border-radius:16px;
  padding:18px 0;
  min-width:220px;
  box-shadow:0 20px 40px rgba(36,58,94,0.25);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:0.35s ease;
}

.sub-menu li{
  padding:8px 26px;
}
.sub-menu a{
  color:#243A5E;
  font-size:0.95rem;
}
.sub-menu a:hover{
  color:#FF9215;
}

.has-sub:hover .sub-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* MOBILE TOGGLE */
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}
.nav-toggle span{
  width:26px;
  height:3px;
  background:#243A5E;
  border-radius:3px;
}

/* MOBILE */



/* DROPDOWN WRAPPER */
.dropdown{
  position:relative;
}

/* LINK */
.nav-link{
  position:relative;
  font-weight:600;
  color:#243A5E;
  text-decoration:none;
  padding:10px 0;
  display:flex;
  align-items:center;
  gap:6px;
}

/* ARROW */
.arrow{
  width:8px;
  height:8px;
  border-right:2px solid #FF9215;
  border-bottom:2px solid #FF9215;
  transform:rotate(45deg);
  transition:0.4s ease;
}

/* DROPDOWN BOX */
.dropdown-menu{
  position:absolute;
  top:130%;
  left:0;
  width:260px;
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(12px);
  box-shadow:0 30px 60px rgba(36,58,94,0.25);
  opacity:0;
  visibility:hidden;
  transform:translateY(25px) scale(0.95);
  transition:0.45s cubic-bezier(.23,1,.32,1);
  z-index:100;
}

/* ITEMS */
.dropdown-menu a{
  display:block;
  padding:12px 16px;
  margin-bottom:6px;
  border-radius:12px;
  font-size:0.95rem;
  color:#243A5E;
  text-decoration:none;
  transition:0.35s ease;
}

/* ITEM HOVER */
.dropdown-menu a:hover{
  background:linear-gradient(135deg,#FF9215,#E3C36A);
  color:#243A5E;
  padding-left:22px;
}

/* SHOW DROPDOWN */
.dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.dropdown:hover .arrow{
  transform:rotate(-135deg);
}
@media(max-width:992px){
  .dropdown-menu{
    position:static;
    width:100%;
    box-shadow:none;
    transform:none;
    opacity:1;
    visibility:visible;
    padding:12px 0;
    display:none;
  }
  .dropdown.open .dropdown-menu{
    display:block;
  }
}

/*****************Nav menu end*****************/

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

img, video{
  padding: 0px;
  max-width:100%;
  height:auto;
  display:block;
}

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

.hero-section,
.video-section{
  min-height:100vh;
  padding:120px 20px 60px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

@media(max-width:768px){
  .hero-section{
    min-height:85vh;
  }
}
.wwd-wrapper{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

@media(max-width:992px){
  .wwd-wrapper{
    grid-template-columns:1fr;
  }
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

@media(max-width:1200px){
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
}

@media(max-width:768px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:480px){
  .gallery-grid{ grid-template-columns:1fr; }
}
.testimonial-wrap{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

@media(max-width:992px){
  .testimonial-wrap{
    grid-template-columns:1fr;
  }
}
.client-logos{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  justify-content:center;
}

.client-logos img{
  max-width:140px;
}

@media(max-width:480px){
  .client-logos img{
    max-width:100px;
  }
}
button,
.cta-btn{
  min-height:48px;
  padding:14px 28px;
  border-radius:50px;
  font-size:1rem;
}

@media(max-width:480px){
  button{
    width:100%;
  }
}
@media(max-width:480px){
  .lead-box{
    width:95%;
    padding:30px 22px;
  }

  .sticky-cta{
    bottom:10px;
    width:95%;
  }

  .floating-social{
    right:12px;
    bottom:90px;
  }
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

@media(max-width:992px){
  .footer-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:480px){
  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
}





/*****************Printing****************************/
/* PRINTING SERVICES PAGE */

/* ================= PRINTING SERVICES PAGE ================= */

.printing-hero{
  position:relative;
  height:70vh;
 /* background:url('../images/Latex-Printing.JPG') center/cover no-repeat;*/
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    135deg,
    rgba(36,58,94,0.85),
    rgba(201,162,77,0.75)
  );
}

.hero-content{
  position:relative;
  max-width:700px;
  z-index:1;
}

.hero-content h1{
  font-size:3rem;
  margin-bottom:15px;
}

.hero-content p{
  font-size:1.1rem;
  opacity:0.95;
}

/* SERVICES */
.printing-services{
  max-width:1200px;
  margin:auto;
  padding:90px 20px;
}

.service-card{
  display:flex;
  align-items:center;
  gap:50px;
  margin-bottom:90px;
}

.service-card.reverse{
  flex-direction:row-reverse;
}

.service-img{
  width:45%;
  overflow:hidden;
  border-radius:22px;
}

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

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

.service-content{
  width:70%;
}

.service-content h2{
  color:#243A5E;
  font-size:2rem;
  margin-bottom:12px;
}

.service-content ul{
  margin-top:15px;
  padding-left:20px;
}

.service-content li{
  margin-bottom:8px;
}

/* CTA */
.service-cta{
  background:linear-gradient(135deg,#F5D37A,#FF9215);
  padding:90px 20px;
  text-align:center;
  color:#243A5E;
}

.service-cta h2{
  font-size:2.3rem;
  margin-bottom:10px;
}

.btn-primary{
  display:inline-block;
  margin-top:25px;
  padding:14px 36px;
  background:#243A5E;
  color:#fff;
  border-radius:30px;
  font-weight:600;
  transition:all 0.3s ease;
}

.btn-primary:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(36,58,94,0.4);
}

/* MOBILE */
@media(max-width:768px){
  .printing-hero{
    height:55vh;
  }

  .hero-content h1{
    font-size:2.2rem;
  }

  .service-card,
  .service-card.reverse{
    flex-direction:column;
  }

  .service-img,
  .service-content{
    width:100%;
  }
}
.reveal-up{
  opacity:0;
  transform:translateY(40px);
  animation:revealUp 0.9s ease forwards;
}

@keyframes revealUp{
  to{opacity:1;transform:none;}
}


/* ================= HERO IMAGE BASED ================= */

.service-hero{
  position:relative;
  height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}

/* Image */
.hero-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  transform:scale(1.05);
  animation:heroZoom 10s ease-in-out infinite alternate;
}

/* Overlay */
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    135deg,
    rgba(36,58,94,0.85),
    rgba(201,162,77,0.75)
  );
  z-index:1;
}

/* Content */
.hero-content{
  position:relative;
  z-index:2;
  max-width:850px;
  padding:20px;
}

/* Zoom animation */
@keyframes heroZoom{
  from{transform:scale(1);}
  to{transform:scale(1.08);}
}
@media(max-width:768px){
  .service-hero{
    height:55vh;
  }

  .hero-bg-img{
    animation:none; /* reduce motion */
  }
}
/**********************MICE***************************/
/* ===============================
   PRINTING HERO (SCOPED)
================================ */


/* ===============================
   MICE PAGE SCOPE
================================ */

.page-mice{
  overflow:hidden;
  background:#ffffff;
}

/* ===============================
   MICE STORY
================================ */

.page-mice .mice-story{
  padding:140px 40px;
  background:#F8FAFF;
}

.page-mice .mice-story-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:80px;
  align-items:center;
}

.page-mice .mice-story-text h2{
  font-size:2.6rem;
  margin-bottom:20px;
  color:#243A5E;
}

.page-mice .mice-story-text p{
  font-size:1.1rem;
  line-height:1.7;
  margin-bottom:18px;
  color:#555;
}

.page-mice .mice-story-images{
  position:relative;
}

.page-mice .img-main{
  width:100%;
  border-radius:26px;
  box-shadow:0 40px 80px rgba(36,58,94,0.25);
}

.page-mice .img-float{
  position:absolute;
  width:60%;
  bottom:-40px;
  right:-30px;
  border-radius:22px;
  box-shadow:0 30px 60px rgba(0,0,0,0.35);
  animation:miceFloat 6s ease-in-out infinite;
}

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

/* ===============================
   MICE SOLUTIONS
================================ */

.page-mice .mice-solutions{
  padding:150px 40px;
  background:linear-gradient(135deg,#ffffff,#F1F5FF);
}

.page-mice .mice-solutions .section-title{
  text-align:center;
  font-size:2.8rem;
  color:#243A5E;
}

.page-mice .solutions-grid{
  max-width:1200px;
  margin:70px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:36px;
}

.page-mice .solution-card{
  padding:42px;
  border-radius:28px;
  background:#fff;
  box-shadow:0 30px 60px rgba(36,58,94,0.15);
  transition:0.45s ease;
}

.page-mice .solution-card h4{
  font-size:1.5rem;
  margin-bottom:14px;
  color:#243A5E;
}

.page-mice .solution-card p{
  font-size:1.05rem;
  line-height:1.6;
  color:#555;
}

.page-mice .solution-card:hover{
  transform:translateY(-14px);
  background:linear-gradient(135deg,#243A5E,#3B5175);
}

.page-mice .solution-card:hover h4,
.page-mice .solution-card:hover p{
  color:#fff;
}

/* ===============================
   MICE IMPACT STATS
================================ */

.page-mice .mice-impact{
  padding:130px 40px;
  background:#243A5E;
}

.page-mice .impact-grid{
  max-width:1000px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:40px;
  text-align:center;
}

.page-mice .impact-card{
  padding:36px;
  border-radius:24px;
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
}

.page-mice .impact-card h3{
  font-size:3rem;
  color:#FF9215;
  margin-bottom:10px;
}

.page-mice .impact-card p{
  font-size:1.1rem;
  color:#fff;
}

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

@media(max-width:992px){
  .page-mice .mice-story-grid{
    grid-template-columns:1fr;
    text-align:center;
  }

  .page-mice .img-float{
    position:relative;
    width:80%;
    right:auto;
    bottom:auto;
    margin:30px auto 0;
  }
}

@media(max-width:768px){
  .service-hero.printing-hero{
    height:55vh;
  }

  .printing-hero .hero-content h1{
    font-size:2.3rem;
  }

  .page-mice .mice-story,
  .page-mice .mice-solutions,
  .page-mice .mice-impact{
    padding:90px 20px;
  }

  .page-mice .mice-solutions .section-title{
    font-size:2.2rem;
  }
}
/**********************MICE End***************************/
/* ===============================
   BRAND ACTIVATION – CORE
================================ */

.brand-activation{
  padding:150px 40px;
  background:
    radial-gradient(circle at top left,#FF921522,transparent 40%),
    linear-gradient(135deg,#F8FAFF,#ffffff);
}

.brand-activation .ba-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:90px;
  align-items:center;
}

.brand-activation .ba-tag{
  background:#243A5E;
  color:#fff;
  padding:10px 26px;
  border-radius:40px;
  font-weight:700;
  display:inline-block;
  margin-bottom:22px;
}

.brand-activation h2{
  font-size:3rem;
  line-height:1.2;
  color:#243A5E;
}

.brand-activation h2 span{
  color:#FF9215;
}

.brand-activation p{
  font-size:1.1rem;
  line-height:1.7;
  margin-top:18px;
  color:#555;
}

.brand-activation .ba-cta{
  margin-top:32px;
  display:inline-block;
  padding:15px 38px;
  background:#FF9215;
  color:#243A5E;
  font-weight:700;
  border-radius:50px;
  text-decoration:none;
}

/* IMAGE STACK */
.ba-image-stack{
  position:relative;
}

.ba-image-stack .img-main{
  width:100%;
  border-radius:28px;
  box-shadow:0 40px 80px rgba(36,58,94,0.3);
}

.ba-image-stack .img-float{
  position:absolute;
  width:60%;
  bottom:-40px;
  right:-30px;
  border-radius:22px;
  animation:baFloat 6s ease-in-out infinite;
}

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

/* ===============================
   TYPES GRID
================================ */

.ba-types{
  padding:140px 40px;
  background:#ffffff;
  text-align:center;
}

.ba-section-title{
  font-size:2.6rem;
  color:#243A5E;
  margin-bottom:70px;
}

.ba-types-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:40px;
}

.ba-type-card{
  padding:34px;
  border-radius:28px;
  background:#F8FAFF;
  box-shadow:0 25px 50px rgba(36,58,94,0.12);
  transition:0.45s ease;
}

.ba-type-card img{
  width:100%;
  border-radius:18px;
  margin-bottom:18px;
}

.ba-type-card:hover{
  transform:translateY(-14px);
}

/* ===============================
   PROCESS
================================ */

.ba-process{
  padding:150px 40px;
  background:linear-gradient(135deg,#243A5E,#3B5175);
  color:#fff;
}

.ba-process-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.ba-process-content h3{
  font-size:2.5rem;
  margin-bottom:20px;
}

.ba-process-content ul{
  margin-top:30px;
  padding-left:20px;
}

.ba-process-content li{
  margin-bottom:14px;
}

.ba-process-images img{
  width:100%;
  border-radius:22px;
  margin-bottom:20px;
}
@media(max-width:992px){
  .brand-activation .ba-container,
  .ba-process-grid{
    grid-template-columns:1fr;
    text-align:center;
  }

  .img-float{
    position:relative;
    width:80%;
    right:auto;
    bottom:auto;
    margin:30px auto 0;
  }
}

@media(max-width:768px){
  .brand-activation,
  .ba-types,
  .ba-process{
    padding:90px 20px;
  }

  .brand-activation h2{
    font-size:2.3rem;
  }
}


.brand-activation{
  position:relative;
  padding:150px 40px;
  overflow:hidden;

  background:
    radial-gradient(circle at 15% 20%, rgba(201,162,77,0.22), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(36,58,94,0.25), transparent 45%),
    linear-gradient(135deg, #F8FAFF, #FFFFFF);
}
.brand-activation::before,
.brand-activation::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.6;
  animation:baBGMove 14s ease-in-out infinite alternate;
  z-index:0;
}

.brand-activation::before{
  background:#FF9215;
  top:-140px;
  left:-140px;
}

.brand-activation::after{
  background:#243A5E;
  bottom:-160px;
  right:-160px;
  animation-delay:4s;
}

@keyframes baBGMove{
  from{transform:translateY(0) translateX(0);}
  to{transform:translateY(60px) translateX(60px);}
}
.brand-activation *{
  position:relative;
  z-index:2;
}
@media(max-width:768px){
  .brand-activation{
    padding:100px 20px;
  }

  .brand-activation::before,
  .brand-activation::after{
    width:280px;
    height:280px;
    filter:blur(60px);
  }
}

/***********************Corporate Event*******************************/
.corp-story-new{
  position:relative;
  padding:160px 40px;
  overflow:hidden;

  background:
    radial-gradient(circle at 20% 20%, rgba(201,162,77,0.22), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(36,58,94,0.18), transparent 45%),
    linear-gradient(135deg, #F8FAFF, #FFFFFF);
}
.corp-story-new::before,
.corp-story-new::after{
  content:"";
  position:absolute;
  width:380px;
  height:380px;
  border-radius:50%;
  filter:blur(70px);
  opacity:0.6;
  z-index:0;
  animation: corpStoryFloat 14s ease-in-out infinite alternate;
}

.corp-story-new::before{
  background:#FF9215;
  top:-120px;
  left:-120px;
}

.corp-story-new::after{
  background:#243A5E;
  bottom:-140px;
  right:-120px;
  animation-delay:5s;
}

@keyframes corpStoryFloat{
  from{transform:translate(0,0);}
  to{transform:translate(50px,40px);}
}
.corp-story-new *{
  position:relative;
  z-index:2;
}
.corp-story-images img{
  box-shadow:0 30px 60px rgba(36,58,94,0.25);
}
.corp-story-text{
  color:#243A5E;
}

.corp-story-text p{
  color:#475569;
}
@media(max-width:768px){
  .corp-story-new{
    padding:110px 20px;
  }

  .corp-story-new::before,
  .corp-story-new::after{
    width:260px;
    height:260px;
    filter:blur(55px);
  }
}


.corp-story-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

.corp-story-images{
  position:relative;
}

.corp-story-images img{
  width:100%;
  border-radius:26px;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
}

.img-back{
  opacity:.7;
  transform:translateX(-40px);
}

.img-front{
  position:absolute;
  top:80px;
  left:80px;
}

.corp-story-text h2{
  font-size:2.8rem;
  margin-bottom:18px;
}

.corp-story-text p{
  color:#192841;
  font-size:1.05rem;
  margin-bottom:16px;
}
.corp-experience{
  padding:160px 40px;
  background:radial-gradient(circle at top,#1B2A4A,#0B1020);
  color:#fff;
}

.corp-title-glow{
  text-align:center;
  font-size:3rem;
  margin-bottom:90px;
  background:linear-gradient(90deg,#FF9215,#ffffff,#FF9215);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.corp-exp-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:36px;
}

.corp-exp-card{
  padding:40px 30px;
  border-radius:26px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(201,162,77,0.35);
  backdrop-filter:blur(10px);
  transition:.5s ease;
}

.corp-exp-card:hover{
  transform:translateY(-18px);
  box-shadow:0 0 40px rgba(201,162,77,.6);
}

.corp-exp-card h4{
  color:#FF9215;
  margin-bottom:12px;
}
.corp-impact-strip{
  padding:120px 40px;
  background:#FF9215;
}

.corp-impact-strip-inner{
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-around;
  text-align:center;
}

.corp-impact-strip h3{
  font-size:3.2rem;
  color:#243A5E;
}

.corp-impact-strip p{
  font-weight:600;
  color:#243A5E;
}
@media(max-width:992px){
  .corp-story-grid{
    grid-template-columns:1fr;
  }

  .img-front{
    position:relative;
    top:0;
    left:0;
    margin-top:30px;
  }

  .corp-hero-content h1{
    font-size:2.6rem;
  }
}

/**************************Sports Event Start**************************************/
.sports-action-strip{
  padding:160px 40px;
  background:linear-gradient(135deg,#F8FAFF,#FFFFFF);
}

.action-strip-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  align-items:center;
}

.action-img img{
  width:100%;
  border-radius:30px;
  box-shadow:0 40px 90px rgba(36,58,94,.35);
}

.action-content h2{
  font-size:3rem;
  color:#243A5E;
  margin-bottom:20px;
}

.action-content ul{
  margin-top:26px;
  list-style:none;
}

.action-content li{
  margin-bottom:14px;
  font-weight:600;
  color:#475569;
}
.sports-mosaic{
  padding:160px 40px;
  background:#0B1020;
}

.mosaic-grid{
  max-width:1200px;
  margin:80px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.mosaic-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:22px;
  transition:.6s ease;
}

.mosaic-grid img:hover{
  transform:scale(1.08);
  box-shadow:0 0 50px rgba(255,209,102,.6);
}

.m1{grid-row:span 2;}
.m3{grid-column:span 2;}
.sports-services{
  padding:160px 40px;
  background:linear-gradient(135deg,#FFFFFF,#F1F5FF);
}

.sports-service-grid{
  max-width:1200px;
  margin:90px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:40px;
}

.sports-service-card{
  background:#fff;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 40px 90px rgba(36,58,94,.25);
  transition:.6s ease;
}

.sports-service-card img{
  width:100%;
  height:240px;
  object-fit:cover;
}

.sports-service-card:hover{
  transform:translateY(-20px);
}

.sports-service-card h4{
  padding:24px 24px 10px;
  color:#243A5E;
}

.sports-service-card p{
  padding:0 24px 28px;
  color:#475569;
}
.sports-cta{
  padding:140px 40px;
  text-align:center;
  background:
    radial-gradient(circle at center,#FFD166,#FF9215);
  color:#243A5E;
}

.sports-cta h2{
  font-size:3.2rem;
  margin-bottom:18px;
}

.sports-cta p{
  max-width:720px;
  margin:auto;
  font-size:1.1rem;
}
@media(max-width:992px){
  .action-strip-grid,
  .mosaic-grid{
    grid-template-columns:1fr;
  }

  .mosaic-grid img{
    grid-column:auto;
    grid-row:auto;
  }
}
/***************************Creative Service***********************************/
.creative-story{
  padding:160px 40px;
  background:#ffffff;
}

.creative-story-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.creative-images{
  position:relative;
}

.creative-images .img-main{
  width:100%;
  border-radius:28px;
  box-shadow:0 40px 90px rgba(36,58,94,.35);
}

.creative-images .img-float{
  position:absolute;
  width:46%;
  bottom:-50px;
  right:-50px;
  border-radius:22px;
  animation:creativeImgFloat 6s ease-in-out infinite;
}

@keyframes creativeImgFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-18px);}
}
.creative-services{
  padding:160px 40px;
  background:linear-gradient(135deg,#F8FAFF,#FFFFFF);
}

.creative-title{
  text-align:center;
  font-size:3rem;
  margin-bottom:90px;
  color:#243A5E;
}

.creative-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:36px;
}

.creative-card{
  padding:44px 32px;
  border-radius:28px;
  background:#ffffff;
  box-shadow:0 30px 60px rgba(36,58,94,.18);
  transition:.6s ease;
  position:relative;
  overflow:hidden;
}

.creative-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#FF9215,#6A5ACD);
  opacity:0;
  transition:.6s ease;
}

.creative-card:hover::before{
  opacity:1;
}

.creative-card:hover{
  transform:translateY(-20px) rotate(-1deg);
}

.creative-card h4,
.creative-card p{
  position:relative;
  z-index:2;
}

.creative-card:hover h4,
.creative-card:hover p{
  color:#fff;
}
.creative-showcase{
  padding:160px 40px;
  background:#0F172A;
}

.creative-showcase .creative-title{
  color:#ffffff;
}

.showcase-strip{
  margin-top:80px;
  display:flex;
  gap:30px;
  overflow-x:auto;
}

.showcase-strip img{
  height:340px;
  border-radius:26px;
  transition:.6s ease;
}

.showcase-strip img:hover{
  transform:scale(1.08);
}
@media(max-width:992px){
  .creative-story-grid{
    grid-template-columns:1fr;
  }

  .creative-hero h1{
    font-size:2.6rem;
  }

  .img-float{
    position:relative;
    width:80%;
    right:0;
    bottom:0;
    margin-top:30px;
  }
}

/**************************OOH***********************************/
.ooh-story{
  padding:160px 40px;
  background:linear-gradient(135deg,#F8FAFF,#FFFFFF);
}

.ooh-story-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.ooh-story-text h2{
  font-size:3rem;
  color:#243A5E;
}

.ooh-story-images{
  position:relative;
}

.ooh-story-images .img-main{
  width:100%;
  border-radius:26px;
  box-shadow:0 40px 90px rgba(36,58,94,.35);
}

.ooh-story-images .img-float{
  position:absolute;
  width:48%;
  bottom:-60px;
  right:-60px;
  border-radius:20px;
  animation:oohFloat 6s ease-in-out infinite;
}

@keyframes oohFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-20px);}
}
.ooh-formats{
  padding:160px 40px;
  background:#0B1020;
}

.ooh-title{
  text-align:center;
  font-size:3rem;
  margin-bottom:90px;
  background:linear-gradient(90deg,#FFD166,#ffffff,#FFD166);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.ooh-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:36px;
}

.ooh-card{
  padding:44px 32px;
  border-radius:26px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,209,102,0.45);
  transition:.5s ease;
  color:#ffffff;
}

.ooh-card:hover{
  transform:translateY(-20px);
  box-shadow:0 0 40px rgba(255,209,102,.6);
}

.ooh-card h4{
  color:#FFD166;
  margin-bottom:10px;
}
@media(max-width:992px){
  .ooh-story-grid{
    grid-template-columns:1fr;
  }

  .img-float{
    position:relative;
    width:80%;
    right:0;
    bottom:0;
    margin-top:30px;
  }

  .ooh-hero h1{
    font-size:2.5rem;
  }
}
/*****************************Contact US***********************************/
.contact-main{
  padding:140px 40px;
  background:#ffffff;
}

.contact-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:80px;
  align-items:flex-start;
}

.contact-info h2{
  font-size:2.6rem;
  color:#243A5E;
  margin-bottom:30px;
}

.contact-item{
  display:flex;
  gap:16px;
  margin-bottom:18px;
  font-size:1.05rem;
  color:#475569;
}

.contact-socials{
  margin-top:30px;
  display:flex;
  gap:18px;
}

.contact-socials a{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:#F1F5FF;
  border-radius:50%;
  transition:.4s ease;
}

.contact-socials a:hover{
  background:#FF9215;
  color:#243A5E;
}
.contact-form{
  background:#ffffff;
  padding:50px 40px;
  border-radius:30px;
  box-shadow:0 40px 90px rgba(36,58,94,.25);
}

.contact-form h3{
  margin-bottom:24px;
  color:#243A5E;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:14px 18px;
  margin-bottom:16px;
  border-radius:14px;
  border:1px solid #CBD5E1;
  font-size:1rem;
}

.contact-form button{
  margin-top:10px;
  padding:16px;
  width:100%;
  border:none;
  border-radius:40px;
  background:linear-gradient(135deg,#FF9215,#FFD166);
  font-weight:800;
  cursor:pointer;
  box-shadow:0 20px 40px rgba(201,162,77,.45);
}
.contact-map iframe{
  width:100%;
  height:420px;
  border:0;
}
@media(max-width:992px){
  .contact-grid{
    grid-template-columns:1fr;
  }

  .contact-hero h1{
    font-size:2.4rem;
  }

  .contact-main{
    padding:100px 20px;
  }
}

/*********************Portfolio********************************/
/* ================= PORTFOLIO ================= */
.portfolio-section{
  padding:140px 40px;
  background:linear-gradient(135deg,#F8FAFF,#EEF3FF);
}

/* HEADER */
.portfolio-header{
  text-align:center;
  margin-bottom:60px;
}
.portfolio-header h2{
  font-size:3rem;
  color:#243A5E;
}
.portfolio-header p{
  color:#64748B;
  font-size:1.1rem;
}

/* FILTERS */
.portfolio-filters{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-bottom:60px;
  flex-wrap:wrap;
}
.filter-btn{
  padding:12px 26px;
  border-radius:30px;
  border:2px solid #FF9215;
  background:transparent;
  color:#243A5E;
  font-weight:600;
  cursor:pointer;
  transition:.35s ease;
}
.filter-btn.active,
.filter-btn:hover{
  background:#FF9215;
  color:#243A5E;
}

/* GRID */
.portfolio-grid{
  max-width:1300px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
}

/* ITEM */
.portfolio-item{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 25px 55px rgba(36,58,94,.2);
  cursor:pointer;
  transition:.45s ease;
}
.portfolio-item img{
  width:100%;
  height:380px;
  object-fit:cover;
  transition:.6s ease;
}

/* OVERLAY */
.portfolio-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    rgba(36,58,94,.15),
    rgba(36,58,94,.9)
  );
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:26px;
  color:#fff;
  opacity:0;
  transition:.45s ease;
}

.portfolio-overlay h4{
  font-size:1.2rem;
}
.portfolio-overlay span{
  font-size:.85rem;
  color:#FFD166;
}

/* HOVER */
.portfolio-item:hover img{
  transform:scale(1.15);
}
.portfolio-item:hover{
  transform:translateY(-12px);
}
.portfolio-item:hover .portfolio-overlay{
  opacity:1;
}

/* LOAD MORE */
.portfolio-loadmore{
  text-align:center;
  margin-top:80px;
}
#loadMoreBtn{
  padding:18px 52px;
  border:none;
  border-radius:50px;
  background:linear-gradient(135deg,#FF9215,#FFD166);
  color:#243A5E;
  font-weight:800;
  box-shadow:0 20px 40px rgba(201,162,77,.45);
  cursor:pointer;
  transition:.4s ease;
}
#loadMoreBtn:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px rgba(201,162,77,.6);
}

/* HIDDEN */
.hidden{ display:none; }
.show{
  display:block;
  animation:fadeUp .6s ease forwards;
}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(30px);}
  to{opacity:1; transform:none;}
}

/* MOBILE */
@media(max-width:768px){
  .portfolio-header h2{font-size:2.2rem;}
  .portfolio-item img{height:300px;}
}
.hidden{
  display:none;
}
.show{
  display:block;
  animation:fadeUp .6s ease forwards;
}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(30px);}
  to{opacity:1; transform:none;}
}


/************************Home Mutibrand****************************************/
.brand-circles{
  padding:120px 20px;
  background:
    radial-gradient(circle at top,#f4f7fb,#e8edf5);
  text-align:center;
}

.brand-title{
  font-size:42px;
  font-weight:800;
  color:#1b2b4a;
}

.brand-subtitle{
  max-width:700px;
  margin:15px auto 70px;
  font-size:18px;
  color:#5f6f8f;
}

.circle-wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:50px;
}

.brand-circle{
  width:200px;
  height:200px;
  border-radius:50%;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(14px);
  box-shadow:
    0 25px 45px rgba(0,0,0,.08),
    inset 0 0 0 2px rgba(255,255,255,.9);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:.5s ease;
  position:relative;
}

.brand-circle img{
  width:110px;
  transition:.4s ease;
}

.brand-circle span{
  margin-top:14px;
  font-weight:600;
  color:#2c3e60;
  font-size:15px;
}

/* Glow Ring */
.brand-circle::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:linear-gradient(120deg,#4facfe,#00f2fe,#c77dff);
  opacity:0;
  transition:.5s;
  z-index:-1;
}

/* Hover Effect */
.brand-circle:hover{
  transform:translateY(-15px) scale(1.07);
}

.brand-circle:hover::after{
  opacity:1;
}

.brand-circle:hover img{
  transform:scale(1.1);
}

/* Highlight Center */
.brand-circle.main{
  transform:scale(1.1);
  box-shadow:
    0 40px 80px rgba(79,172,254,.25);
}

/* Mobile */
@media(max-width:768px){
  .brand-circle{
    width:160px;
    height:160px;
  }
  .brand-circle img{
    width:85px;
  }
}


/* Floating Animation */
@keyframes floatSlow {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

.brand-circle{
  animation: floatSlow 6s ease-in-out infinite;
}

.brand-circle:nth-child(2){ animation-delay:1s; }
.brand-circle:nth-child(3){ animation-delay:2s; }
.brand-circle:nth-child(4){ animation-delay:3s; }
.brand-circle:nth-child(5){ animation-delay:4s; }

/* Breathing Glow */
.brand-circle::after{
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse{
  0%,100%{ opacity:.25; filter:blur(8px); }
  50%{ opacity:.7; filter:blur(14px); }
}

/* Light Sweep Effect */
.brand-circle::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,.7),
    transparent 70%
  );
  opacity:0;
  transform:translateX(-100%);
}

.brand-circle:hover::before{
  opacity:1;
  animation:sweep 1s ease forwards;
}

@keyframes sweep{
  to{ transform:translateX(100%); }
}

/* Hover Lift */
.brand-circle:hover{
  transform:translateY(-20px) scale(1.1);
  box-shadow:
    0 60px 120px rgba(79,172,254,.35);
}
@media(max-width:768px){
  .brand-circle{
    animation: floatSlow 5s ease-in-out infinite;
  }
  .brand-circle:hover{
    transform:none;
  }
}

/**********************Client Home*******************************/
/* SECTION */
.clients-marquee{
  padding:140px 0 120px;
  background:#F8FAFF;
  overflow:hidden;
}

/* HEADER */
.clients-head{
  text-align:center;
  margin-bottom:70px;
}
.clients-head h2{
  font-size:3.2rem;
  font-weight:800;
  color:#243A5E;
}
.clients-head h2 span{
  color:#FF9215;
}
.clients-head p{
  margin-top:12px;
  font-size:1.1rem;
  color:#64748B;
}

/* MARQUEE */
.marquee-wrap{
  position:relative;
  overflow:hidden;
  mask-image:linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}

/* TRACK */
.marquee-track{
  display:flex;
  gap:60px;
  width:max-content;
  animation:marquee 28s linear infinite;
}

/* PAUSE ON HOVER */
.marquee-wrap:hover .marquee-track{
  animation-play-state:paused;
}

/* LOGO CARD */
.logo-pill{
  width:240px;
  height:120px;
  background:#ffffff;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 20px 40px rgba(36,58,94,0.15);
  transition:all 0.4s ease;
}

/* LOGO */
.logo-pill img{
  max-width:150px;
  max-height:70px;
  filter:grayscale(100%);
  opacity:0.7;
  transition:0.4s ease;
}

/* HOVER – PREMIUM FOCUS */
.logo-pill:hover{
  transform:scale(1.08);
  box-shadow:0 35px 70px rgba(36,58,94,0.3);
}
.logo-pill:hover img{
  filter:grayscale(0);
  opacity:1;
}

/* ANIMATION */
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* MOBILE */
@media(max-width:768px){
  .clients-head h2{
    font-size:2.4rem;
  }
  .logo-pill{
    width:190px;
    height:100px;
  }
  .logo-pill img{
    max-width:120px;
  }
}


/******************Client logo Start****************************/
/************ CLIENTS CLEAN PREMIUM ************/

.clients-cinematic{
  padding:100px 0;
  background:#243A5E; /* solid clean color */
  overflow:hidden;
}

/* HEADER */
.clients-head{
  text-align:center;
  margin-bottom:60px;
}

.clients-head h2{
  font-size:2.8rem;
  color:#ffffff;
  font-weight:700;
}

.clients-head span{
  color:#FF9215;
}

.clients-head p{
  color:#cbd5e1;
  margin-top:10px;
  font-size:1.05rem;
}

/* SCROLL WRAPPER */
.clients-scroll{
  display:flex;
  flex-direction:column;
  gap:40px;
  overflow:hidden;
}

/* TRACK */
.clients-track{
  display:flex;
  gap:50px;
  width:max-content;
}

/* CARD */
.client-card{
  background:#ffffff;
  padding:25px 40px;
  border-radius:18px;
  box-shadow:0 15px 35px rgba(0,0,0,0.15);
  transition:0.4s ease;
}

/* LOGO */
.client-card img{
  height:55px;
  display:block;
  transition:0.4s ease;
}

/************ HOVER ************/



.client-card:hover{
  transform:translateY(-8px) scale(1.05);
  box-shadow:0 25px 60px rgba(255,146,21,0.35);
}

.client-card:hover img{
  transform:scale(1.05);
}
/************ SCROLL ANIMATION ************/

.left-scroll{
  animation:scrollLeft 25s linear infinite;
}

.right-scroll{
  animation:scrollRight 25s linear infinite;
}

@keyframes scrollLeft{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

@keyframes scrollRight{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}

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

  .client-card{
    padding:18px 25px;
  }

  .client-card img{
    height:40px;
  }

  .left-scroll,
  .right-scroll{
    animation-duration:18s;
  }
}

/******************Client logo end****************************/

/******************About Us***************************/
/* =====================================================
   FLAGSHIP ABOUT US PAGE — ALL CSS (NO CONFLICTS)
===================================================== */

.page-brand-flagship{
  --gold:#FF9215;
  --dark:#020617;
  --ink:#0F172A;
  --soft:#F8FAFF;
  font-family:'Inter',system-ui,sans-serif;
}

/* ================= HERO ================= */

.page-brand-flagship .service-hero{
  position:relative;
  height:85vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.page-brand-flagship .hero-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.1);
  animation:heroZoom 18s linear infinite;
}

@keyframes heroZoom{
  0%{transform:scale(1.1);}
  100%{transform:scale(1.2);}
}

.page-brand-flagship .hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(2,6,23,.5),rgba(2,6,23,.9));
}

.page-brand-flagship .hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  color:#fff;
}

.page-brand-flagship .hero-content h1{
  font-size:4rem;
  font-weight:800;
  letter-spacing:-.02em;
}

.page-brand-flagship .hero-content p{
  margin-top:14px;
  font-size:1.15rem;
  opacity:.85;
}

/* Floating glow */
.page-brand-flagship .service-hero::after{
  content:'';
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(600px 400px at 50% 40%,
      rgba(201,162,77,.25),
      transparent 65%);
  animation:heroGlow 20s linear infinite;
}

@keyframes heroGlow{
  0%{transform:translate(0,0);}
  50%{transform:translate(-6%,4%);}
  100%{transform:translate(0,0);}
}

/* ================= STORY ================= */

.page-brand-flagship .brand-story{
  padding:140px 8%;
  background:var(--soft);
}

.page-brand-flagship .story-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:90px;
  align-items:center;
}

.page-brand-flagship .story-text h2{
  font-size:3.2rem;
  margin-bottom:20px;
}

.page-brand-flagship .story-text p{
  font-size:1.05rem;
  color:#475569;
  margin-bottom:16px;
}

.page-brand-flagship .story-image img{
  width:100%;
  border-radius:34px;
  box-shadow:0 50px 120px rgba(15,23,42,.25);
  transition:1s cubic-bezier(.22,.61,.36,1);
}

.page-brand-flagship .brand-story:hover img{
  transform:translateY(-18px) scale(1.04);
}

/* ================= VISION / MISSION ================= */

.page-brand-flagship .vision-mission{
  padding:140px 8%;
  background:#fff;
}

.page-brand-flagship .vm-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:70px;
}

.page-brand-flagship .vm-card{
  position:relative;
  padding:70px;
  border-radius:36px;
  background:rgba(248,250,255,.8);
  backdrop-filter:blur(18px);
  box-shadow:0 30px 80px rgba(15,23,42,.12);
  transition:.6s;
}

.page-brand-flagship .vm-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:36px;
  border:1px solid rgba(201,162,77,.2);
}

.page-brand-flagship .vm-card:hover{
  transform:translateY(-14px);
  box-shadow:0 60px 140px rgba(201,162,77,.35);
}

.page-brand-flagship .vm-card h3{
  font-size:2.2rem;
  margin-bottom:14px;
}

/* ================= DIFFERENTIATORS ================= */

.page-brand-flagship .brand-diff{
  padding:160px 8%;
  background:var(--dark);
  color:#fff;
}

.page-brand-flagship .section-title{
  text-align:center;
  font-size:3.2rem;
  margin-bottom:80px;
}

.page-brand-flagship .diff-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:50px;
}

.page-brand-flagship .diff-card{
  padding:60px;
  border-radius:32px;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(14px);
  transition:.5s;
}

.page-brand-flagship .diff-card span{
  font-size:2.5rem;
  color:var(--gold);
  display:block;
  margin-bottom:14px;
}

.page-brand-flagship .diff-card:hover{
  transform:translateY(-12px) scale(1.05);
  background:rgba(255,255,255,.12);
}

/* ================= DIRECTOR ================= */

.page-brand-flagship .director-section{
  padding:160px 8%;
  background:
    radial-gradient(700px 400px at 10% 20%,
      rgba(201,162,77,.18),
      transparent 60%),
    var(--soft);
}

.page-brand-flagship .director-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:100px;
  align-items:center;
}

.page-brand-flagship .director-image img{
  width:100%;
  border-radius:40px;
  box-shadow:0 60px 140px rgba(0,0,0,.25);
}

/* ================= TIMELINE ================= */

.page-brand-flagship .brand-timeline{
  padding:160px 0;
  background:var(--ink);
  color:#fff;
  overflow:hidden;
}

.page-brand-flagship .timeline-track{
  display:flex;
  gap:140px;
  padding:0 15vw;
}

.page-brand-flagship .timeline-step{
  min-width:280px;
  font-size:1.15rem;
  opacity:.35;
  transition:.6s;
}

.page-brand-flagship .timeline-step:hover{
  opacity:1;
  transform:scale(1.12);
}

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

.page-brand-flagship .brand-stats{
  padding:130px 8%;
  background:#fff;
}

.page-brand-flagship .stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  text-align:center;
}

.page-brand-flagship .stats-grid h3{
  font-size:2.6rem;
  background:linear-gradient(90deg,var(--gold),#EAD07B);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ================= CTA ================= */

.page-brand-flagship .brand-cta{
  padding:180px 20px;
  background:
    radial-gradient(800px 500px at 50% 30%,
      rgba(201,162,77,.3),
      transparent 65%),
    var(--dark);
  text-align:center;
  color:#fff;
}

.page-brand-flagship .cta-btn{
  display:inline-block;
  margin-top:34px;
  padding:20px 46px;
  border-radius:999px;
  background:var(--gold);
  color:#000;
  font-weight:600;
  transition:.4s;
}

.page-brand-flagship .cta-btn:hover{
  transform:translateY(-6px) scale(1.08);
  box-shadow:0 40px 120px rgba(201,162,77,.7);
}

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

@media(max-width:992px){
  .page-brand-flagship .story-grid,
  .page-brand-flagship .director-grid,
  .page-brand-flagship .vm-grid,
  .page-brand-flagship .diff-grid,
  .page-brand-flagship .stats-grid{
    grid-template-columns:1fr;
  }

  .page-brand-flagship .hero-content h1{
    font-size:2.7rem;
  }
}


/******************************************************/
/* =========================
   CINEMATIC VIDEO SECTION
========================= */

/* SECTION SPACING */
.cinematic-video-section{
  padding: 140px 0;               /* more vertical space */
  background: radial-gradient(circle at top, #f4f7fb, #ffffff);
}

/* VIDEO CONTAINER — INCREASED SIZE */
.video-wrap{
  width: 94vw;                    /* wider */
  max-width: 1600px;              /* larger screens */
  height: 85vh;                   /* taller */
  margin: 0 auto;

  border-radius: 32px;            /* premium curves */
  overflow: hidden;

  box-shadow:
    0 50px 120px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.15);
}

/* VIDEO FIT — NO CUT */
.video-main{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* BLURRED BACKGROUND VIDEO */
.video-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(30px) brightness(.7);
  transform: scale(1.2);
}

/* CONTENT CENTERING */
.video-content{
  padding: 40px;
}
@media(max-width: 768px){
  .cinematic-video-section{
    padding: 90px 0;
  }

  .video-wrap{
    width: 96vw;
    height: 24vh;
    border-radius: 22px;
  }
}
@media(min-width:1200px){
  .video-wrap{
    height: 90vh;
  }
}


/* ================= SERVICES PAGE ONLY ================= */

.services-page .services-hero{
  height:65vh;
  background:linear-gradient(120deg,#0f172a,#1e293b);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}

.services-page .services-hero h1{
  font-size:3.5rem;
  margin-bottom:10px;
}

.services-page .services-hero p{
  opacity:.85;
  font-size:1.1rem;
}

/* SECTION BACKGROUND */
.services-page .services-grid-section{
  padding:140px 30px;
  background:
    radial-gradient(circle at top left, #fef3c7 0%, transparent 35%),
    radial-gradient(circle at bottom right, #dbeafe 0%, transparent 40%),
    linear-gradient(180deg, #f8fafc, #ffffff);
  overflow:hidden;
}

/* GRID */
.services-page .services-grid{
  max-width:1300px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:35px;
}

/* SERVICE CARD */
.services-page .service-card{
  position:relative;
  height:420px;
  border-radius:26px;
  overflow:hidden;
  color:#fff;
  isolation:isolate;
  transition:.7s cubic-bezier(.22,1,.36,1);
  transform:translateY(40px);
  opacity:0;
}

/* Reveal */
.services-page.reveal-section.active .service-card{
  transform:none;
  opacity:1;
}

/* Background Image */
.services-page .service-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:1.2s ease;
}

/* Overlay */
.services-page .service-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(15,23,42,.9),
    rgba(15,23,42,.35),
    transparent
  );
}

/* CONTENT */
.services-page .service-content{
  position:absolute;
  bottom:30px;
  left:30px;
  right:30px;
}

/* TITLE */
.services-page .service-content h3{
  font-size:1.85rem;
  font-weight:800;
  line-height:1.2;
  background:linear-gradient(90deg,#ffffff,#facc15);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* TEXT */
.services-page .service-content p{
  font-size:.95rem;
  opacity:.9;
  max-width:90%;
}

/* CTA */
.services-page .service-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  padding:6px 14px;
  font-size:.75rem;
  font-weight:600;
  border-radius:999px;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.25);
  transition:.35s ease;
}

/* HOVER EFFECTS */
.services-page .service-card:hover .service-bg{
  transform:scale(1.12);
}

.services-page .service-card:hover{
  transform:translateY(-14px) scale(1.02);
  box-shadow:
    0 50px 120px rgba(15,23,42,.35),
    0 0 40px rgba(250,204,21,.25);
}

.services-page .service-card:hover .service-cta{
  background:#facc15;
  color:#0f172a;
  transform:translateX(6px);
}

/* DELAYS */
.services-page .delay-1{transition-delay:.15s;}
.services-page .delay-2{transition-delay:.3s;}
.services-page .delay-3{transition-delay:.45s;}

/* MOBILE */
@media(max-width:768px){
  .services-page .services-hero h1{font-size:2.5rem;}
  .services-page .service-card{height:360px;}
}




/* ================= ABOUT PAGE ONLY ================= */
/* =====================================================
   ABOUT US – PREMIUM EYECATCHY DESIGN
===================================================== */

.about-glass-page{
  --gold:#facc15;
  --blue:#60a5fa;
  --dark:#0f172a;
  --glass:rgba(255,255,255,.55);
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI;
  color:#0f172a;
}

/* ================= HERO ================= */

.about-hero{
  height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(250,204,21,.15), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(96,165,250,.18), transparent 45%),
    linear-gradient(180deg,#f8fafc,#ffffff);
}

.about-hero::before{
  content:'';
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle,#facc15 0%,transparent 60%);
  opacity:.08;
  animation:heroGlow 18s ease-in-out infinite;
}

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

.about-hero h1{
  font-size:4rem;
  line-height:1.1;
  letter-spacing:-.03em;
}

.about-hero h1 span{
  background:linear-gradient(90deg,var(--gold),var(--blue));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ================= SECTIONS ================= */

.about-section{
  padding:20px 30px;
  position:relative;
}

/* ================= GLASS CARD ================= */

.about-text,
.about-image img,
.vm-card,
.director-content,
.timeline-step,
.stat-card{
  background:var(--glass);
  backdrop-filter:blur(22px);
  border-radius:30px;
  padding:44px;
  box-shadow:
    0 40px 120px rgba(15,23,42,.18),
    inset 0 0 0 1px rgba(255,255,255,.55);
  transition:.6s cubic-bezier(.22,1,.36,1);
  position:relative;
}

.about-text::after,
.vm-card::after,
.director-content::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,var(--gold),var(--blue));
  opacity:.12;
  pointer-events:none;
}

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

.about-grid{
  max-width:1250px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

/* ================= HEADINGS ================= */

.about-glass-page h2{
  font-size:2.8rem;
  margin-bottom:20px;
  letter-spacing:-.02em;
}

.about-glass-page p{
  opacity:.85;
  line-height:1.7;
}

/* ================= VISION / MISSION ================= */

.vm-grid{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
}

.vm-card{
  text-align:center;
}

.vm-card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:
    0 60px 160px rgba(15,23,42,.22),
    0 0 50px rgba(250,204,21,.25);
}

/* ================= DIRECTOR ================= */

.director-grid{
  max-width:1300px;
  margin:auto;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:100px;
  align-items:center;
}

.director-image img{
  border-radius:30px;
  box-shadow:0 50px 140px rgba(0,0,0,.35);
  transition:.8s ease;
}

.director-image img:hover{
  transform:scale(1.05) rotate(-1deg);
}

.director-badge{
  display:inline-block;
  padding:7px 22px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  font-size:.75rem;
  margin-bottom:18px;
}

.director-btn{
  display:inline-block;
  margin-top:24px;
  padding:16px 44px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold),#fde68a);
  color:#0f172a;
  font-weight:700;
  text-decoration:none;
  transition:.4s ease;
}

.director-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(250,204,21,.6);
}

/* ================= TIMELINE ================= */

.timeline-track{
  max-width:1200px;
  margin:auto;
  display:flex;
  gap:30px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}

.timeline-step{
  min-width:280px;
  scroll-snap-align:center;
  font-weight:600;
  text-align:center;
}

.timeline-step:hover{
  transform:translateY(-10px);
  box-shadow:0 40px 120px rgba(96,165,250,.4);
}

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

.stats-grid{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

.stat-card{
  text-align:center;
}

.stat-card h3{
  font-size:2.4rem;
  background:linear-gradient(90deg,var(--gold),var(--blue));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.stat-card:hover{
  transform:translateY(-14px);
  box-shadow:0 60px 140px rgba(15,23,42,.25);
}

/* ================= CTA ================= */

.about-cta{
  padding:180px 30px;
  text-align:center;
  background:
    radial-gradient(circle at top,#1e293b,#020617);
  color:#fff;
}

.cta-btn{
  display:inline-block;
  margin-top:26px;
  padding:18px 54px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold),#fde68a);
  color:#020617;
  font-weight:800;
  text-decoration:none;
  transition:.4s ease;
}

.cta-btn:hover{
  transform:scale(1.06);
  box-shadow:0 30px 80px rgba(250,204,21,.65);
}

/* ================= REVEAL ================= */

.about-glass-page .reveal-up{
  opacity:0;
  transform:translateY(60px);
  transition:1s cubic-bezier(.22,1,.36,1);
}

.about-glass-page.reveal-section.active .reveal-up{
  opacity:1;
  transform:none;
}

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

@media(max-width:992px){
  .about-grid,
  .director-grid,
  .vm-grid{
    grid-template-columns:1fr;
    text-align:center;
  }

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

  .about-hero h1{
    font-size:2.6rem;
  }
}


/* =========================
   MASTER PAGE LOADER
========================= */

#mmz-loader{
  position:fixed;
  inset:0;
  background:radial-gradient(circle at top,#0f172a,#020617);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
  transition:opacity .8s ease, visibility .8s ease;
}

#mmz-loader.hide{
  opacity:0;
  visibility:hidden;
}

/* CENTER */
.mmz-loader-inner{
  position:relative;
  width:220px;
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

/* LOGO */
.mmz-loader-inner img{
  max-width:110px;
  animation:logoPulse 2.2s ease-in-out infinite;
  filter:drop-shadow(0 12px 35px rgba(79,70,229,.55));
  z-index:2;
}

/* PERCENT TEXT */
.mmz-percent{
  position:absolute;
  bottom:18px;
  font-size:.9rem;
  font-weight:600;
  color:#facc15;
  letter-spacing:1px;
}

/* SVG RING */
.mmz-progress-ring{
  position:absolute;
  inset:0;
  transform:rotate(-90deg);
}

/* BG RING */
.mmz-ring-bg{
  fill:none;
  stroke:rgba(255,255,255,.08);
  stroke-width:8;
}

/* PROGRESS RING */
.mmz-ring-progress{
  fill:none;
  stroke:#facc15;
  stroke-width:8;
  stroke-linecap:round;
  stroke-dasharray:553;
  stroke-dashoffset:553;
  transition:stroke-dashoffset .3s ease;
  filter:drop-shadow(0 0 10px rgba(250,204,21,.8));
}

/* GLOW */
.mmz-loader-inner::before{
  content:'';
  position:absolute;
  inset:-40px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(250,204,21,.35),
    rgba(79,70,229,.25),
    transparent 70%);
  filter:blur(50px);
  animation:glowPulse 4s ease-in-out infinite;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes logoPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.06);}
}

@keyframes glowPulse{
  0%,100%{opacity:.6;}
  50%{opacity:1;}
}

/* MOBILE */
@media(max-width:480px){
  .mmz-loader-inner{
    width:180px;
    height:180px;
  }
  .mmz-loader-inner img{
    max-width:90px;
  }
}



.chat-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #25D366;
  color: white;
  padding: 15px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
}
.chat-box {
  display: none;
  position: fixed;
  bottom: 80px;
  left: 20px;
  width: 300px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 10px #aaa;
  z-index: 9999;
}


.chat-box.show { display: block; }

.chat-header {
  background: #25D366;
  color: white;
  padding: 10px;
}

.chat-body {
  height: 300px;
  overflow-y: auto;
  padding: 10px;
  background: #f7f7f7;
  scroll-behavior: smooth; /* ⭐ key */
}

/* User message */
.user {
  text-align: right;
  margin: 8px 0;
}

.user span {
  background: #007bff;
  color: #fff;
  padding: 8px 12px;
  border-radius: 12px 12px 0 12px;
  display: inline-block;
  max-width: 80%;
}

/* Bot message */
.bot {
  text-align: left;
  margin: 8px 0;
}

.bot span {
  background: #e4e6eb;
  color: #000;
  padding: 8px 12px;
  border-radius: 12px 12px 12px 0;
  display: inline-block;
  max-width: 80%;
}


input {
  width: 100%;
  border: none;
  padding: 10px;
}

/* Typing indicator container */
.typing {
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.typing span {
  height: 8px;
  width: 8px;
  background: #aaa;
  border-radius: 50%;
  margin-right: 5px;
  animation: blink 1.4s infinite both;
}

.typing span:nth-child(1) { animation-delay: 0s; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0%   { opacity: 0.2; }
  20%  { opacity: 1; }
  100% { opacity: 0.2; }
}

/* Hide helper */
.hidden {
  display: none;
}

.chat-footer {
  border-top: 1px solid #ddd;
}

.chat-date {
  width: 100%;
  padding: 8px;
  border: none;
  outline: none;
}

.hidden {
  display: none;
}









/* Floating Button */
.chat-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  z-index: 9999;
  transition: 0.3s;
}

.chat-btn img {
  width: 88px;
}

.chat-btn:hover {
  transform: scale(1.1) rotate(8deg);
}

/* Chat Box */
.chat-box {
  position: fixed;
  bottom: 95px;
  left: 20px;
  width: 360px;
  height: 520px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.2);
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Segoe UI', sans-serif;
}

/* Header */
.chat-header {
  background: linear-gradient(135deg,#6a11cb,#2575fc);
  color: #fff;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.header-title {
  font-weight: bold;
}

.header-status {
  font-size: 12px;
  opacity: 0.9;
}

.header-close {
  cursor: pointer;
  font-size: 18px;
}

/* Chat Body */
.chat-body {
  flex: 1;
  padding: 15px;
  background: #f4f7ff;
  overflow-y: auto;
}

/* Message Layout */
.message {
  display: flex;
  margin-bottom: 12px;
  align-items: flex-end;
}

.avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 8px;
}

.bubble {
  background: #fff;
  padding: 10px 14px;
  border-radius: 18px;
  max-width: 70%;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* User message */
.user {
  justify-content: flex-end;
}

.user .bubble {
  background: linear-gradient(135deg,#6a11cb,#2575fc);
  color: #fff;
  border-top-right-radius: 0;
}

.user .avatar {
  order: 2;
  margin-left: 8px;
  margin-right: 0;
}

/* Footer */
.chat-footer {
  display: flex;
  padding: 10px;
  border-top: 1px solid #eee;
  background: #fff;
}

.chat-footer input {
  flex: 1;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid #ddd;
  outline: none;
}

.send-btn {
  background: linear-gradient(135deg,#6a11cb,#2575fc);
  border: none;
  color: white;
  margin-left: 8px;
  padding: 0 15px;
  border-radius: 20px;
  cursor: pointer;
}

/* Typing Indicator */
.typing-bubble {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #999;
  border-radius: 50%;
  animation: bounce 1.4s infinite;
}

.dots span:nth-child(2){ animation-delay: 0.2s; }
.dots span:nth-child(3){ animation-delay: 0.4s; }

@keyframes bounce {
  0%,80%,100%{ transform: scale(0.8); }
  40%{ transform: scale(1.3); }
}

.hidden {
  display: none;
}