/* RESET */

@import url('https://fonts.googleapis.com/css2?family=BBH+Bogle&family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Luckiest+Guy&family=Protest+Guerrilla&display=swap');
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
  background-image: url('assets/body.webp');
  background-size: cover;
  background-position: center;
  background-attachment: scroll; /* Enforced scroll for all - fixed is perf killer */
}
@media (max-width: 1020px){
 body{
 overflow-x: hidden;
 }
}
/* Headings */
h1, h2, h3, h4, h5, h6,
.section-title h2,
.testimonial-title h4,
.portfolio-item h3,
.clients-section span {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

/* Big titles */
.display-1, .display-2, .display-3, .display-4,
.hero-title, .main-heading {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(255,215,0,0.06);
  z-index:-1;
}

/* ==============================
      HEADER FIX (WITH GAP)
   ============================== */
.header-box{
  width:100%;
  padding:16px 0;
  position:fixed;
  top:0;
  left:0;
  z-index:900;
  display:flex;
  justify-content:center;
  pointer-events:none;
}

.header-inner-box{
  width:92%;
  max-width:1250px;
  background:#fff;
  padding:12px 25px;
  border-radius:20px 0px 20px 0px;
  box-shadow:0 4px 25px rgba(0,0,0,0.15);
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:auto;
}

/* LOGO */
.logo{
  height:55px;
}

/* ======================================
   SOCIAL ICONS – FIXED RIGHT ALWAYS
   ====================================== */
.top-social{
  display:flex;
  gap:22px;
}

.top-social a {
  font-size: 24px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  transition: all 0.4s ease;
  text-decoration: none;
}

/* Hover animation */
.top-social a:hover {
  transform: scale(1.25) translateY(-4px) rotate(8deg);
}

/* Icons turn white on hover */
.top-social a:hover i {
  color: #fff;
}
/* Facebook */
.top-social a[aria-label="Facebook"] i {
  color: #1877F2;
}

/* WhatsApp */
.top-social a[aria-label="WhatsApp"] i {
  color: #25D366;
}

/* Email */
.top-social a[aria-label="email"] i {
  color: #EA4335;
}

/* Search (main color) */
.top-social .mobile-search-btn i {
  color: hsl(0, 0%, 100%); /* your brand color */
}
/* Instagram gradient icon */
.top-social a[aria-label="Instagram"] i {
  background: linear-gradient(
    45deg,
    #F58529,
    #DD2A7B,
    #8134AF,
    #515BD4
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Force icon to turn white on hover */
.top-social a:hover i {
  color: #fff !important;
}

/* Instagram hover */
.top-social a[aria-label="Instagram"]:hover {
  background: linear-gradient(
    45deg,
    #F58529,
    #DD2A7B,
    #8134AF,
    #515BD4
  );
}

.top-social a[aria-label="Instagram"]:hover i {
  -webkit-text-fill-color: #fff;
  color: #fff !important;
  background: none;
}

/* Facebook */
.top-social a[aria-label="Facebook"]:hover {
  background: #1877F2;
}

/* WhatsApp */
.top-social a[aria-label="WhatsApp"]:hover {
  background: #25D366;
}

/* Email */
.top-social a[aria-label="email"]:hover {
  background: #EA4335;
}

/* Search */
.top-social .mobile-search-btn:hover {
  background: hsl(0, 0%, 100%);
}


/* ======================================
   HAMBURGER (OUTSIDE HEADER, LEFT)
   ====================================== */
.hamburger-wrapper{
  position:fixed;
  left:22px;
  top:22px;
  width:50px;
  height:50px;
  background:#000;
  border-radius:50%;
  z-index:1003;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  cursor:pointer;
}

.hamburger{
  width:23px;
  height:23px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-gap:4px;
}

.hamburger div{
  width:4.5px;
  height:4.5px;
  background:#FFD700;
  border-radius:50%;
}
/* Hide hamburger by default */
.hamburger-wrapper{
  opacity:0;
  visibility:hidden;
  transition:0.4s ease;
}

/* Show after scroll */
.hamburger-wrapper.show{
  opacity:1;
  visibility:visible;
}
.hamburger span{
  width:4.5px;
  height:4.5px;
  background:#FFD700 !important; /* BRIGHT YELLOW */
  border-radius:50%;
}
/* Hidden state for sidebar */
.sidebar.hide {
  transform: translateX(-100%) !important;
}

/* ======================================
   SIDEBAR
   ====================================== */
.sidebar{
  position:fixed;
  left:0;
  top:0;
  width:80px;
  height:100vh;
  padding-top:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:transparent;
  z-index:1001;
  transform:translateX(-100%);
  transition:0.6s cubic-bezier(0.7,0,0.3,1);
}

.sidebar.show{
  transform:translateX(0);
}

/* NAV ITEMS */
.nav-item{
  position:relative;
  width:50px;
  height:50px;
  margin:16px 0;
  background:#fff;
  border-radius:20px 0 20px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 40px #ffd90000;
  transition:0.4s ease;
}

.nav-item:hover{
  background:#000;
  transform:scale(1.25);
}

.nav-item i{
  font-size:25px;
  color:#000;
  transition:0.4s;
}

.nav-item:hover i{
  color:#FFD700;
}
.nav-item span{
  position: absolute;
  left: 85px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;                 /* White fill */
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
  -webkit-text-stroke: 0.2px #000;   /* Black outline (Chrome, Edge, Safari) */
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

.nav-item:hover span{
  opacity:1;
  transform:translate(12px,-50%);
}

/* ==============================
   MOBILE RESPONSIVE FIXES
   ============================== */
@media(max-width:900px){

  .header-inner-box{
    width:95%;
    padding:10px 15px;
  }

  .top-social a{
    width:40px;
    height:40px;
    font-size:18px;
  }

  .sidebar{
    width:70px;
  }

  .hamburger-wrapper{
    top:100px;
    left:15px;
    transform:scale(0.9);
  }
}
#preloader {
  position: fixed;
  inset: 0;
  background: #ffffff; /* or #000 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

#preloader img {
  width: 120px; /* adjust size */
  height: auto;
}

/* HERO */
.hero {
    min-height: 100vh;
    background:url("../assets/background.webp") no-repeat center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0px 0 180px;
    position: relative;
    overflow: visible;
    flex-wrap: wrap;
    gap: 40px;
    transition: transform 1.4s cubic-bezier(0.25,1,0.35,1);
}

.hero-text p{font-size:32px;font-weight:700;color:#FFD700;margin-bottom:30px;letter-spacing:1px;}
.hero-text h1{font-size:60px;font-weight:900;line-height:0.88;background:#ffd90000;color:hsl(0, 0%, 100%); margin-bottom:100px;}

.hero-btn{
    min-width:1050px !important;
    background:hsl(0, 0%, 100%);color:hsl(0, 0%, 0%);padding:18px 40px;
    border-radius:25px 0 25px 0;
    font-size:20px;font-weight:700;text-decoration:none;
    box-shadow:0 10px 30px rgba(255,215,0,0.4);
    transition:all 0.4s ease;
}
.hero-btn:hover{
    background:#FFD700;color:#000;
    transform:scale(1.1);
     box-shadow:0 10px 30px hsla(51, 81%, 13%, 1.00);
}
.hero-gif{
    max-width:610px;width:100%;height:450px;top:40px;position:relative;
 filter:drop-shadow(0 30px 60px rgba(0,0,0,0.4));
 border-radius:40px 0 40px 0;overflow:hidden;object-fit:cover;
}

/* SECTION 2 - ABOUT */
.section2{
    height:100vh;background:#fff;
    background-image:url('https://images.unsplash.com/photo-1559028012-481c04fa702d?ixlib=rb-4.0.3&auto=format&fit=crop&q=80');
    background-size:cover;background-position:center;position:relative;
    display:flex;align-items:center;padding:0 5%;
    transform-origin:bottom left;
    transform:scale(0.6);
    transition:transform 1.2s cubic-bezier(0.25,1,0.35,1);
}
.section2.visible{
    transform:scale(1);
}
.section2::before{
    content:'';position:absolute;top:0;left:0;width:100%;height:100%;
    background:rgba(255,255,255,0.94);z-index:1;
}
.about-container{
    position:relative;z-index:2;width:100%;max-width:1400px;margin:0 auto;
    display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.about-gif{max-width:600px;height:450px!important;border-radius:20px;}
.about-text h2{
    font-size:38px !important;font-weight:900;color:#000;margin-bottom:11px;margin-top:100px;
}

.about-text h2::after{
  content: "";
  display: block;
  width: 120px;
  height: 5px;
  background-color: #FFD700;
  border-radius: 3px;
}

.about-text h2 span{color:#FFD700;}
.about-text h3{
    font-size:30px !important;font-weight:800;color:hsl(0, 0%, 0%);margin:15px 0 4px;
}
.about-text p{font-size:16px;line-height:1.4;color:#333;margin-bottom:25px;}

/* PUSHING IMAGE */
.pushing-image{
    position:absolute;
    right:-300px;
    bottom:2%;
    width:300px;
    z-index:10;
    pointer-events:none;
    opacity:1;
    transform:scale(1) translateX(0);
    transform-origin:bottom left;
    transition:all 2.4s cubic-bezier(0.25,1,0.35,1);
}
.section2.visible .pushing-image{
    opacity:1;
    transform:scale(1) translateX(0);
}
.pushing-image.pushing{
    transform:translateX(-180vw) scale(0.7);
    opacity:0;
}
.pushing-image img{
    width:100%;
    border-radius:0;
    filter:drop-shadow(0 30px 60px rgba(0,0,0,0.4));
}

/* HORIZONTAL FLOW - ADDED GAP IN MIDDLE */
.horizontal-flow{
    position:relative;
    width:100%;
    height:250vh;
    pointer-events:none;
}
.horizontal-inner{
    position:sticky;
    top:0;
    height:100vh;
    width:210vw;
    display:flex;
    transform:translateX(0);
    transition:transform 2.2s cubic-bezier(0.25,1,0.35,1);
    pointer-events:auto;
}

/* SECTION 3 - SERVICES */
.section3{
    width:120vw;height:100vh;background:#ffffff;display:flex;align-items:center;padding-left:120px;
    padding:80px 4% 80px;box-sizing:border-box;
}
.services-container{
    width:100%;max-width:1600px;margin:0 auto;
    margin-left:0px !important;
    display:flex;flex-direction:column;gap:60px;
}
.services-top{
    display:flex;align-items:center;justify-content:space-between;gap:80px;
}
.services-text{width:55%;}
.services-text h2{
    font-size:35px;font-weight:800;color:#000;margin-bottom:10px;margin-top:33px;
}
.services-text h2 span{color:#FFD700;}
.services-text p{
    font-size:16px;margin-top:0px;line-height:1.4;color:#333;margin-bottom:-30px;text-align: justify;
}
.services-img-box{width:45%;display:flex;justify-content:flex-end;}
.services-img{
    width:600px;
     margin-bottom:-50px;
}

/* STATS */
.stats-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:35px;
    width:100%;
}
.stat-box{
    background:#FFD700;color:#000;padding:10px;
    border-radius:30px 0 30px 0;text-align:center;
    box-shadow:0 15px 40px rgba(255,215,0,0.3);
    transition:transform 0.4s ease;
}
.stat-box:hover{transform:translateY(-10px);}
.stat-box h3{font-size:42px;font-weight:900;line-height:1;}
.stat-box p{font-size:18px;font-weight:700;margin-top:8px;}

/* PUSHER MAN */
.pusher-gif{
    position:absolute;bottom:-90px;left:-400px;width:400px;z-index:5;
    pointer-events:none;transform-origin:bottom left;
}

/* RESPONSIVE FIXES FOR TABLET AND MID-SIZED DEVICES */
@media (min-width: 993px) and (max-width: 1400px) {
    /* HERO SECTION */
    .hero {
        padding: 0 60px;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        gap: 30px;
    }
    
    .hero-text h1 {
        font-size: 48px;
        margin-bottom: 60px;
    }
    
    .hero-btn {
        min-width: 400px !important;
        width: auto;
        display: inline-block;
    }
    
    .hero-gif {
        max-width: 500px;
        height: 350px;
        margin: 0 auto;
    }
    
    /* ABOUT SECTION */
    .section2 {
        height: auto;
        min-height: 100vh;
        padding: 100px 5%;
    }
    
    .about-container {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    
    .about-gif {
        max-width: 100%;
        height: 350px !important;
    }
    
    /* SERVICES SECTION */
    .section3 {
        width: 100vw !important;
        height: auto;
        min-height: 100vh;
        padding: 100px 5%;
        padding-left: 60px;
    }
    
    .services-container {
        max-width: 100%;
    }
    
    .services-top {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    
    .services-text, .services-img-box {
        width: 100%;
    }
    
    .services-img {
        max-width: 400px !important;
        margin: 0 auto;
    }
    
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    /* HORIZONTAL FLOW FIX */
    .horizontal-flow {
        height: auto;
        pointer-events: auto;
    }
    
    .horizontal-inner {
        position: static;
        height: auto;
        width: 100% !important;
        flex-direction: column;
        transform: none !important;
    }
    
    /* SERVICE CARDS */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .service-card {
        height: auto;
        padding-bottom: 90px;
    }
    
    /* PORTFOLIO */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .portfolio-item {
        width: 100% !important;
        height: 300px;
    }

    
    .cta-left {
        max-width: 100%;
    }
  
    
    /* TECHNOLOGY SECTION */
    .tech-category {
        grid-template-columns: repeat(auto-fill, 90px);
        gap: 20px;
        justify-content: center;
    }
}

@media (max-width: 900px){
    .horizontal-flow{height:auto;}
    .horizontal-inner{position:static;height:auto;width:100%;flex-direction:column;transform:none !important;}
    .section2,.section3{width:100% !important;height:auto;min-height:100vh;}
    .pushing-image{display:none;}
    .hero{padding:0 40px;flex-direction:column;text-align:center;gap:30px;}
    .hero-text{max-width:90%;}
    .hero-gif{max-width:100% !important;margin:40px auto 0 !important;height:auto;}
    .pusher-gif{display:none;}
    .top-social{top:20px;right:20px;gap:10px;}
    .logo{left:20px;height:50px;}
    .hamburger-wrapper{display:flex;}
    .about-container{grid-template-columns:1fr;text-align:justify;gap:40px;}
    .services-top{flex-direction:column;text-align:center;}
    .services-text,.services-img-box{width:100%;}
    .stats-row{grid-template-columns:1fr 1fr;gap:20px;}
    .about-gif{max-width:370px;max-height:280px !important;border-radius:20px;}
    .about-text h2{margin-top:0px;}
}

/* SECTION 4 - SERVICE CARDS */
.section4 {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 80px 50px;
  padding-bottom:200px !important;
  background: #ffffff;
}

.service-heading {
  font-size: 45px;
  font-weight: 800;
  margin-bottom: 50px;
  text-align: center;
  position: relative;
}

.service-heading::after {
  content: "";
  display: block;
  width: 120px;
  height: 5px;
  background-color: #FFD700;
  margin: 12px auto 0;
  border-radius: 3px;
}

.service-heading span {
  color: #ffcc00;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;
}

/* CARD DESIGN */
.service-card {
  background: linear-gradient(
    145deg,
    #f7f7f7 0%,
    #ffffff 45%,
    #ededed 100%
  );
  color: #111;
  padding: 30px 20px 80px 20px;
  height: 340px;
  border-radius: 18px;
  box-shadow:0 18px 38px rgba(0, 0, 0, 0.28); /* Removed inset for perf */
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateY(60px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}

.service-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.service-icon {
  width: 2px;
    border-radius: 20px 0 20px 0; 
}

/* SERVICE CARD TITLE */
.service-card h3 {
    display: flex;
  font-size: 21.5px;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.3;
}

/* Hover effect */
.service-card:hover {
  background: #ffcc00;
  color: #111;
  transform: translateY(-10px);
}

/* BUTTON DESIGN (like hero button) */
.card-btn {
  background: hsl(0, 0%, 44%);
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 20px 0 20px 0;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 400;
  position: absolute;
  bottom: 20px;
  min-width:100px !important;
}

 .card-btn:hover{
  background: #111;
  color: #fff;
}

/* STAGGERED SLIDE ANIMATIONS */
.slide-1 { transform: translateX(-80px); }
.slide-2 { transform: translateY(80px); }
.slide-3 { transform: translateX(80px); }
.slide-4 { transform: translateX(-80px); }
.slide-5 { transform: translateY(80px); }
.slide-6 { transform: translateX(80px); }

.service-card.visible.slide-1,
.service-card.visible.slide-2,
.service-card.visible.slide-3,
.service-card.visible.slide-4,
.service-card.visible.slide-5,
.service-card.visible.slide-6 {
  transform: translateX(0) translateY(0);
  opacity: 1;
}

/* ICON + HEADING SIDE BY SIDE */
.service-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 15px;
}

/* ICON SIZE (already large, keeping clean) */
.service-icon {
  width: 102px;
  height: 102px;
  flex-shrink: 0;
  border-radius: 20px 0 20px 0;
}

/* HEADING ALIGNMENT */
.service-card h3 {
  font-size: 24.5px;
  font-weight: 800;
  margin: 0;
  line-height: 1.3;
}

/* RESPONSIVE GRID */
@media (max-width: 1200px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
  }
  
  .service-card {
    height: auto;
    min-height: 340px;
  }
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .section4 {
    padding: 80px 30px;
  }
}

@media (max-width: 480px) {
  .services-grid {
    gap: 25px;
  }
  
  .service-card {
    height: auto;
    padding-bottom: 90px;
  }
  
  .service-header {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .service-icon {
    width: 80px;
    height: 80px;
  }
}

.portfolio-area {
  background: #000;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

/* Container */
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Golden Gradient Heading */
.section-title h2 {
    margin-top:30px;
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 90px;
  position: relative;
  color:#ffcc00;
}

.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 7px;
  background: #FFD700;
  border-radius: 4px;
}

/* FILTER BUTTONS */
.portfolio-filters {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-bottom: 80px;
  flex-wrap: wrap;
}

.portfolio-filters button {
  background: #111;
  color: #fff;
  padding: 16px 36px;
  border: none;
  border-radius: 30px 0 30px 0;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.25,0.8,0.25,1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  min-width: 180px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.portfolio-filters button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.4), transparent);
  transition: left 0.7s ease;
}

.portfolio-filters button:hover::before,
.portfolio-filters button.active::before {
  left: 100%;
}

.portfolio-filters button:hover,
.portfolio-filters button.active {
  background: #FFD700;
  color: #000;
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(255,215,0,0.35);
}

/* PORTFOLIO GRID */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Portfolio Item Card */
.portfolio-item {
  border-radius:20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  transition: all 0.6s cubic-bezier(0.25,0.8,0.25,1);
  width:330px !important;
  height: 250px;
  background: #111;
  opacity: 1;
  transform: translateY(0);
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.portfolio-item:hover img {
  transform: scale(1.12);
}

/* Overlay */
.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.3));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 30px;
  opacity: 0;
  transition: opacity 0.6s ease;
}

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

/* TEXT & HEADING */
.overlay-content {
  text-align: left;
}

.overlay-content h3 {
  font-size: 28px;
  font-weight: 720;
  color: #FFFFFF !important;
  margin-bottom: 12px;
}

.overlay-content h3 a {
  color: #FFFFFF !important;
  text-decoration: none;
  transition: opacity 0.3s;
}

.overlay-content h3 a:hover {
  opacity: 0.8;
}

.overlay-content p {
  font-size: 16px;
  color: #FFFFFF !important;
  line-height: 1.6;
  margin-bottom: 30px;
  font-weight: 500;
  max-width: 90%;
}

/* View Project Button */
.view-btn {
  align-self: flex-start;
  margin-top: auto;
  background: #FFD700;
  color: #000;
  padding: 14px 36px;
  border-radius: 30px 0 30px 0;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.4s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.view-btn:hover {
  background: #fff;
  color: #000;
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(255,255,255,0.2);
}

/* RESPONSIVE */
@media (max-width: 1400px) {
  .portfolio-grid { 
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
  }
  
  .portfolio-item {
    width: 100% !important;
    height: 280px;
  }
}

@media (max-width: 1200px) {
  .portfolio-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 25px;
  }
  
  .portfolio-item {
    height: 300px;
  }
}

@media (max-width: 992px) {
  .portfolio-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px;
    padding: 0 15px;
  }
  
  .portfolio-item { 
    height: 280px; 
  }
  
  .section-title h2 { 
    font-size: 42px; 
    margin-bottom: 60px;
  }
  
  .portfolio-filters { 
    gap: 15px; 
    margin-bottom: 50px;
  }
  
  .portfolio-filters button { 
    padding: 14px 28px; 
    font-size: 16px; 
    min-width: 160px; 
  }
}

@media (max-width: 768px) {
  .portfolio-grid { 
    grid-template-columns: 1fr; 
    gap: 30px;
    max-width: 500px;
    margin: 0 auto;
  }
  
  .portfolio-item { 
    height: 350px; 
  }
  
  .section-title h2 { 
    font-size: 38px; 
  }
  
  .portfolio-filters { 
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  
  .portfolio-filters button {
    width: 80%;
    max-width: 280px;
  }
}

@media (max-width: 480px) {
  .portfolio-area { 
    padding: 100px 0 120px; 
  }
  
  .section-title h2 { 
    font-size: 34px; 
    margin-bottom: 40px;
  }
  
  .overlay { 
    padding: 25px; 
  }
  
  .overlay-content h3 {
    font-size: 24px;
  }
  
  .overlay-content p {
    font-size: 14px;
  }
  
  .view-btn {
    padding: 12px 28px;
    font-size: 15px;
  }
}

/* Portfolio entrance from bottom-right */
#portfolioSection {
  opacity: 0;
  transform: translate(150px, 150px);
  transition: opacity 0.8s ease-out, transform 1s ease-out;
}

/* When visible */
#portfolioSection.show-portfolio {
  opacity: 1;
  transform: translate(0, 0);
}

.portfolio-area {
  position: relative;
  padding: 260px 0 120px;
  background: #000000;
  overflow: visible;
}

/* CTA CARD */
.portfolio-cta-card {
  margin-top:30px;
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height:300px;
  padding:20px;
  max-width: 1200px;
  background: linear-gradient(135deg, #ffcc00, hsl(60, 100%, 100%));
  border-radius: 30px;
  display: flex;
  align-items:left !important;
  justify-content: space-between;
  box-shadow: 0 40px 80px rgba(0,0,0,0.2);
  overflow: visible;
  z-index: 5;
}

.cta-left {
  max-width: 65%;
  text-align:left;
}

.cta-call {
  font-weight: 700;
  color: hsl(0, 0%, 100%);
  letter-spacing: 1px;
}

.cta-left h3 {
  font-size: 36px;
  font-weight: 900;
  margin: 10px 0;
}

.cta-left p {
  font-size: 17px;
  margin-bottom: 25px;
  color: #444;
}

.cta-btn {
  background: #111;
  color: #fff;
  padding: 16px 40px;
  border: none;
  border-radius: 30px 0 30px 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.4s ease;
  margin-top:20px;
  bottom:2px;
}

.cta-btn:hover {
  background: hsl(0, 0%, 100%);
  color: #000;
  transform: translateY(-4px);
}

.cta-right img {
width: 250px;
height:370px;
    padding: 0px !important;
    margin: a;
    max-width: 100%;
    margin-top: -85px;
    margin-left: 260px !important;
}

/* DECORATIONS */
.cta-stripes {
  position: absolute;
  top: -30px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,204,0,0.15),
    rgba(255,204,0,0.15) 10px,
    transparent 10px,
    transparent 20px
  );
  border-radius: 50%;
}

.cta-dots {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 120px;
  height: 120px;
  background-image: radial-gradient(#ffcc00 2px, transparent 2px);
  background-size: 14px 14px;
  opacity: 0.4;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .portfolio-cta-card {
    flex-direction: column;
    text-align: center;
    padding: 40px 30px;
    height: auto;
    min-height: 300px;
  }
  
  .cta-left {
    max-width: 100%;
    text-align: center;
  }
  
  .cta-right img {
    width: 200px;
    margin: 20px auto 0 !important;
    display: block;
  }
  
  .cta-left h3 {
    font-size: 32px;
  }
}

@media (max-width: 992px) {
  .portfolio-cta-card {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: 90%;
    margin: -150px auto 60px;
    flex-direction: column;
    text-align: center;
    padding: 40px;
  }

  .cta-left {
    max-width: 100%;
  }
  
  .cta-left h3 {
    font-size:28px;
  }
  

}

@media (max-width: 768px) {
  .portfolio-cta-card {
    width: 95%;
    padding: 30px 20px;
    margin-top: -180px;
  }
  
  .cta-left h3 {
    font-size: 24px;
  }
  
  .cta-left p {
    font-size: 15px;
  }
  
  .cta-btn {
    padding: 14px 30px;
    font-size: 15px;
  }
  
  .cta-right img {
    width: 120px;
    height: 150px;
  }
}

/* SCROLL TRANSITION BASE */
.clients-showcase-section,
#tech-simple-section {
    transition: transform 0.7s ease, opacity 0.7s ease;
    will-change: transform, opacity;
    margin-bottom:80px;
}

/* TECHNOLOGY STATES */
.tech-hidden {
    transform: translate(-40%, 40%) scale(0.7);
}

.tech-step-1 {
    transform: translate(-25%, 25%) scale(0.85);
}

.tech-step-2 {
    transform: translate(-10%, 10%) scale(0.95);
}

.tech-step-3 {
    transform: translate(0, 0) scale(1);
}

html {
  scroll-behavior: smooth;
}

/* Black dot (main cursor) */
.cursor-dot {
  width: 9px;
  height: 9px;
  background: #000;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

/* Black outline circle */
.cursor-outline {
  width: 28px;
  height: 28px;
  border: 2px solid #000;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease-out;
}

/* Yellow trailing filled circle */
.cursor-trail {
  width: 16px;
  height: 16px;
  background: #ffd700;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease-out;
  opacity: 0.85;
}

a:hover ~ .cursor-outline,
button:hover ~ .cursor-outline {
  transform: translate(-50%, -50%) scale(1.4);
}

@media (max-width: 768px) {
  body {
    cursor: auto;
  }
  .cursor-dot,
  .cursor-outline,
  .cursor-trail {
    display: none;
  }
}

/* =====================================
   MOBILE OVERFLOW & RESPONSIVE FIX
   (DO NOT AFFECT DESKTOP)
===================================== */
@media (max-width: 992px) {

  /* HARD STOP HORIZONTAL SCROLL */
  html, body {
    width: 100%;
    overflow-x: hidden !important;
    position: relative;
  }

  /* Kill any accidental overflow */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Fix sections using vw */
  .horizontal-flow,
  .horizontal-inner,
  .section3,
  .section4 {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

   .portfolio-area {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
  }

  /* Disable transform-based overflow */
  .horizontal-inner {
    transform: none !important;
  }

  /* HERO FIX */
  .hero {
    padding: 120px 20px 60px !important;
    flex-direction: column;
    text-align: center;
    overflow-x: hidden;
    transform: none !important;
    transition: none !important;
  }

  .hero-text h1 {
    font-size: 38px;
    line-height: 1.1;
  }

  .hero-btn {
    min-width: auto !important;
    width: 100%;
    max-width: 320px;
  }

  /* REMOVE OFF-SCREEN IMAGES */
  .pusher-gif,
  .pushing-image {
    display: none !important;
  }

  /* ABOUT SECTION */
  .section2 {
    transform: none !important;
    padding: 10px 20px;
    height: auto;
    transition: none !important;
  }
  
  .section2.visible {
    transform: none !important;
  }

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

  /* SERVICES */
  .section3 {
    padding: 0px 20px;
    height: auto;
  }

  .services-container {
    gap: 40px;
  }

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

  /* SERVICE CARDS */
  .services-grid {
    grid-template-columns: 1fr !important;
  }

  .service-card {
    height: auto;
    padding-bottom: 90px;
  }

  .card-btn {
    min-width: auto !important;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
  }

  /* PORTFOLIO */
  .portfolio-grid {
    grid-template-columns: 1fr !important;
    padding: 0 15px;
  }

  .portfolio-item {
    height: auto;
  }

  /* CTA CARD FIX */
  .portfolio-cta-card {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: auto;
    flex-direction: column;
    padding: 30px 20px 0px;
    margin-top:-350px;
  }

  .cta-right img {
    display: block;
    max-width: 200px;
  }

/* =====================================
   MOBILE SIDEBAR FIX (ALLOW TOGGLE)
===================================== */
  .hamburger-wrapper {
    display: flex;
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: 0.6s cubic-bezier(0.7,0,0.3,1);
  }

  .sidebar.show {
    transform: translateX(0);
  }
}

.idea-section {
  position: relative;
  padding: 30px 0;
  background: linear-gradient(to bottom, #ffffff 0%, hsla(50, 100%, 90%, 0.4) 100%);
  overflow: hidden;
  text-align:center;
}

.idea-content {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  align-items:center;
}

.idea-content h2 {
  font-size: 48px;
  font-weight: 900;
  color: #111;
  line-height: 1.2;
  margin-bottom: 20px;
}

.idea-content p {
  font-size: 20px;
  line-height: 1.5;
  color: #444;
  margin-bottom: 32px;
  font-weight: 400;
  max-width: 800px;
  margin-left:250px;
  text-align: left;
}

.idea-btn {
  display: inline-block;
  background: #FFD700;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  padding: 16px 40px;
  border-radius: 20px 0px 20px 0px;
  text-decoration: none;
  transition: all 0.4s ease;
  box-shadow: 0 8px 20px rgba(255,215,0,0.3);
}

.idea-btn:hover {
  background: #e6c200;
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(255,215,0,0.4);
}

/* Floating dots background design */
.idea-floating-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.idea-floating-dots .dot {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #FFD700;
  border-radius: 50%;
  opacity: 0.2;
  animation: float 25s infinite linear;
}

.idea-floating-dots .dot:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.idea-floating-dots .dot:nth-child(2) { top: 50%; left: 80%; animation-delay: 5s; }
.idea-floating-dots .dot:nth-child(3) { top: 70%; left: 30%; animation-delay: 10s; }
.idea-floating-dots .dot:nth-child(4) { top: 10%; left: 60%; animation-delay: 3s; }
.idea-floating-dots .dot:nth-child(5) { top: 80%; left: 85%; animation-delay: 8s; }
.idea-floating-dots .dot:nth-child(6) { top: 40%; left: 10%; animation-delay: 12s; }

/* Reuse the float animation from process section */
@keyframes float {
  0% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-80px) translateX(40px); }
  100% { transform: translateY(0) translateX(0); }
}

/* Responsive for IDEA section */
@media (max-width: 1200px) {
  .idea-content p {
    margin-left: 0;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 32px;
  }
  
  .idea-content h2 {
    font-size: 42px;
  }
}

/* Mobile Responsive */
@media (max-width: 992px) {
  .idea-content {
    padding: 0 30px;
  }
  .idea-content h2 {
    font-size: 42px;
  }
}

@media (max-width: 768px) {
  .idea-section {
    padding: 60px 0;
  }
  .idea-content {
    padding: 0 20px;
  }
  .idea-content h2 {
    font-size: 38px;
  }
  .idea-content p {
    font-size: 18px;
    margin-bottom: 28px;
    margin-left:0px;
  }
  .idea-btn {
    padding: 14px 32px;
    font-size: 17px;
    margin-left:0px;
  }
}

/* ==============================
   MOBILE: SHOW ONLY SEARCH ICON
============================== */

@media (max-width: 992px) {

  /* Hide ALL social icons */
  .header-right a:not(.mobile-search-btn) {
    display: none !important;
  }
/* Search (main color) */
.top-social .mobile-search-btn i {
  color: hwb(0 0% 100%); /* your brand color */
}
  /* Ensure search icon is visible */
  .mobile-search-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #000 !important;
    font-size: 18px;
  }
}

#tech-simple-section {
    padding: 100px 0;
    text-align: center;
    background: #000;
    color: white;
}

#tech-simple-section h2 {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 50px;
    position: relative;
    color: #ffcc00;
}

/* ================= FILTERS ================= */
.filters {
    margin-bottom: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.filters button {
    background: #111;
    color: #fff;
    padding: 14px 24px;
    border: none;
    border-radius: 30px 0 30px 0;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    min-width: 160px;
}

.filters button:hover,
.filters button.active {
    background: #FFD700;
    color: #000;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(255,215,0,0.35);
}

/* ================= GALLERY ================= */
.tech-gallery-container {
    padding: 20px 5%;
    max-width: 1400px;
    margin: 0 auto;
    border-radius: 30px 0px 30px 0px;
    background: #fff;
    height: auto;
    overflow: visible;
}

.tech-gallery {
    position: relative;
    height: auto;
    min-height: unset;
}

/* ================= CATEGORY ================= */
.tech-category {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    justify-content: center;
    justify-items: center;
    gap: 25px;
    padding: 20px 0;
    width: 100%;
    height: auto;
    position: relative;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

.tech-category {
    justify-content: center !important;
    align-content: flex-start !important;
}

.tech-category {
    display: none;
}

.tech-category.active {
    display: grid;
}

.tech-category.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* ================= ICONS ================= */
.tech-category img {
    width: 80px;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.tech-category img:hover {
    transform: scale(0.9) translateX(5px);
}

/* ================= ANIMATIONS ================= */
.tech-category.slide-left { animation: slideLeft 1s ease-out forwards; }
.tech-category.slide-right { animation: slideRight 1s ease-out forwards; }
.tech-category.slide-top { animation: slideTop 1s ease-out forwards; }
.tech-category.slide-bottom { animation: slideBottom 1s ease-out forwards; }
.tech-category.fade-scale { animation: fadeScale 1.2s ease-out forwards; }

@keyframes slideLeft {
    from { transform: translateX(-80px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideRight {
    from { transform: translateX(80px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideTop {
    from { transform: translateY(-60px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideBottom {
    from { transform: translateY(60px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeScale {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ================= RESPONSIVE FOR TABLET ================= */
@media (min-width: 993px) and (max-width: 1400px) {
    #tech-simple-section {
        padding: 80px 0;
    }
    
    #tech-simple-section h2 {
        font-size: 42px;
        margin-bottom: 40px;
    }
    
    .filters {
        margin-bottom: 40px;
    }
    
    .filters button {
        min-width: 140px;
        padding: 12px 20px;
        font-size: 15px;
    }
    
    .tech-category {
        grid-template-columns: repeat(auto-fill, 90px);
        gap: 22px;
        justify-content: center;
    }
    
    .tech-category img {
        width: 75px;
    }
    
    .tech-gallery-container {
        padding: 20px 3%;
    }
}

@media (max-width: 1024px) {
    .tech-category {
        grid-template-columns: repeat(auto-fill, 90px);
        gap: 22px;
    }

    .tech-category img {
        width: 80px;
    }
}

@media (max-width: 768px) {
    #tech-simple-section h2 {
        font-size: 2.4rem;
    }

    .filters {
        margin-bottom: 10px !important;
    }

    .filters button {
        min-width: 130px;
        padding: 12px 18px;
        font-size: 15px;
    }

    .tech-category {
        grid-template-columns: repeat(auto-fill, 80px);
        gap: 20px;
        margin-left:25px;
    }

    .tech-category img {
        width: 70px;
    }
}

@media (max-width: 480px) {
    .tech-category {
        grid-template-columns: repeat(auto-fill, 70px);
        gap: 15px;
        justify-content: center;
        margin-left: 0;
    }

    .tech-category img {
        width: 60px;
    }
}

/* ===== FIX SECTION AUTO HEIGHT ===== */
#tech-simple-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    height: auto !important;
    min-height: unset !important;
}

/* ===============================
   TESTIMONIAL SLIDER
=============================== */
.section-heading {
  text-align: center;
  margin-bottom: 60px;
}

/* Floating Animation for image */
@keyframes float {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-55%) translateX(5px); }
}

/* Glowing Dots */
.glow-dot {
  position: absolute;
  border-radius: 50%;
  animation: floatDots 6s ease-in-out infinite;
}

.white-dot {
  width: 15px;
  height: 15px;
  background: white;
  box-shadow: 0 0 10px white, 0 0 20px white;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.yellow-dot {
  width: 20px;
  height: 20px;
  background: #ffd700;
  box-shadow: 0 0 15px #ffd700, 0 0 30px #ffd700;
  top: 50%;
  left: 70%;
  animation-delay: 2s;
}

.small {
  width: 8px !important;
  height: 8px !important;
  top: 70%;
  left: 40%;
}

/* Floating animation for dots */
@keyframes floatDots {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.8; }
  25% { transform: translateY(-15px) translateX(10px); opacity: 1; }
  50% { transform: translateY(10px) translateX(-10px); opacity: 0.6; }
  75% { transform: translateY(-10px) translateX(5px); opacity: 0.9; }
}

/* ===== ISOLATED CLIENT LOGO CAROUSEL ===== */
#clientsSection .clients-carousel-unique {
  position: relative;
  overflow: hidden;
}

#clientsSection .clients-wrapper-unique {
  overflow: hidden;
  cursor: grab;
}

#clientsSection .clients-wrapper-unique:active {
  cursor: grabbing;
}

#clientsSection .clients-row-unique {
  display: flex;
  gap: 36px;
  will-change: transform;
}

#clientsSection .clients-wrapper-unique:hover .clients-row-unique {
  animation-play-state: paused;
}

/* LOGO SIZE (INCREASED) */
#clientsSection .logo-box-unique {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#clientsSection .logo-box-unique img {
  max-width: 210px;
  max-height: 120px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

#clientsSection .logo-box-unique img:hover {
  transform: scale(1.12);
}

/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {
  #clientsSection .clients-row-unique {
    gap: 18px;
    animation-duration: 10s;
  }

  #clientsSection .logo-box-unique {
    height: 135px;
    gap:10px !important;
  }

  #clientsSection .logo-box-unique img {
    max-height: 155px;
  }
}

.clients-carousel-unique {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.clients-row-unique {
  display: flex;
  gap: 40px;
  align-items: center;
  will-change: transform;
  transition: transform 0.4s ease;
}

.logo-box-unique {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-box-unique img {
  height: 80px;
  max-width: 160px;
  object-fit: contain;
}

/* BUTTONS */
.clients-btn {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  z-index: 10;
  background: #FFD700;
  border: none;
  font-size: 26px;
  padding: 12px 18px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.clients-btn:hover {
  background: #e6c200;
  transform: translateY(-50%) scale(1.1);
}

.clients-btn.left {
  left: 10px;
}

.clients-btn.right {
  right: 10px;
}

/* MOBILE */
@media (max-width: 768px) {
  .logo-box-unique img {
    height: 60px;
    max-width: 120px;
  }

  .clients-btn {
    font-size: 22px;
    padding: 10px 14px;
  }
}

/* STATIC GLASS SHIMMER CARD */
.view-more-card {
  position: relative;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* STATIC SHINE OVERLAY */
.view-more-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 25%,
    rgba(255, 255, 255, 0.18) 45%,
    transparent 65%
  );
  pointer-events: none;
}

/* SOFT DEPTH */
.view-more-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

/* CONTENT */
.view-more-inner {
  position: relative;
  text-align: center;
  color: #ffffff;
  z-index: 1;
}

/* TITLE */
.view-more-inner h3 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 10px;
}

/* TEXT */
.view-more-inner p {
  opacity: 0.85;
  margin-bottom: 20px;
}

/* WHITE BUTTON */
.view-more-inner .view-btn {
  background: #ffffff;
  color: #000000;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 700;
  display: inline-block;
  transition: background 0.3s ease, transform 0.3s ease;
}

.view-more-inner .view-btn:hover {
  background: #f1f1f1;
  transform: scale(1.04);
}

/* ==============================
   ADDITIONAL TABLET OPTIMIZATIONS
   ============================== */
@media (min-width: 769px) and (max-width: 1200px) {
  /* Adjust header for tablet */
  .header-inner-box {
    width: 95%;
    padding: 10px 20px;
  }
  
  /* Adjust hero button width */
  .hero-btn {
    min-width: 500px !important;
  }
  
  /* Service cards tablet optimization */
  .service-card {
    height: auto;
    min-height: 320px;
  }
  
  /* Portfolio items */
  .portfolio-item {
    height: 220px;
  }
  
  /* Technology section */
  .tech-category {
    justify-content: center !important;
  }
  
  /* Idea section text alignment */
  .idea-content p {
    margin-left: 0;
    text-align: center;
  }
}

/* ==============================
   SPECIFIC FIX FOR 992px-1200px RANGE
   ============================== */
@media (min-width: 992px) and (max-width: 1200px) {
  /* Hero section */
  .hero {
    padding: 0 80px 0 120px;
  }
  
  .hero-text h1 {
    font-size: 52px;
  }
  
  .hero-gif {
    max-width: 500px;
    height: 380px;
  }
  
  /* About section */
  .about-container {
    gap: 50px;
  }
  
  .about-gif {
    height: 380px !important;
  }
  
  /* Services section */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Portfolio grid */
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .portfolio-item {
    width: 100% !important;
    height: 240px;
  }
}

/* ==============================
   DISABLE ANIMATIONS ON MOBILE
   ============================== */
@media (max-width: 992px) {
  /* Disable all transform animations */
  .service-card,
  .portfolio-item,
  .tech-category,
  .stat-box,
  .nav-item {
    transform: none !important;
    transition: none !important;
  }
  
  /* Disable hover effects on touch devices */
  .service-card:hover,
  .portfolio-item:hover,
  .stat-box:hover,
  .nav-item:hover {
    transform: none !important;
  }
  
  /* Keep only color transitions for better UX */
  .service-card:hover {
    background: #ffcc00;
    color: #111;
  }
  
  .stat-box:hover {
    background: #FFD700;
  }
  
  /* Disable complex animations */
  @keyframes none {
    from { opacity: 1; }
    to { opacity: 1; }
  }
  
  .service-card.slide-1,
  .service-card.slide-2,
  .service-card.slide-3,
  .service-card.slide-4,
  .service-card.slide-5,
  .service-card.slide-6 {
    transform: none !important;
  }
}

/* ==============================
   HEADER SEARCH (BOTTOM LINE ONLY)
   ============================== */

.header-search-wrap{
  flex:1;
  display:flex;
  justify-content:center;
}

.header-search{
  position:relative;
  width:320px;
}

.header-search input{
  width:100%;
  padding:8px 32px 8px 4px;
  font-size:16px;
  color:#000;
  background:transparent;
  border:none;
  border-bottom:2px solid #000;   /* ONLY BOTTOM LINE */
  outline:none;
}

.header-search input::placeholder{
  color:#000;
  opacity:0.6;
}

/* Search icon */
.header-search i{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:#000;
  font-size:16px;
  pointer-events:none;
}

/* Focus effect */
.header-search input:focus{
  border-bottom-color:#FFD700;
}

/* ==============================
   SEARCH DROPDOWN
   ============================== */

.search-dropdown{
  position:absolute;
  top:110%;
  left:0;
  width:100%;
  background:#fff;
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,0.15);
  overflow:hidden;
  display:none;
  z-index:999;
}

.search-dropdown div{
  padding:10px 14px;
  font-size:14px;
  cursor:pointer;
  border-bottom:1px solid #eee;
}

.search-dropdown div:last-child{
  border-bottom:none;
}

.search-dropdown div:hover{
  background:#000;
  color:#FFD700;
}
/* ==============================
   SEARCH BASE STYLE
   ============================== */

.header-search-wrap{
  flex:1;
  display:flex;
  justify-content:center;
}

.header-search{
  position:relative;
  width:320px;
}

.header-search input{
  width:100%;
  padding:8px 30px 8px 4px;
  font-size:16px;
  border:none;
  border-bottom:2px solid #000;
  background:transparent;
  outline:none;
  color:#000;
}

.header-search i{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:#000;
}

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

.mobile-search-btn{
  display:none;
}

.mobile-search-panel{
  position:fixed;
  top:90px;
  left:0;
  width:100%;
  background:#fff;
  padding:15px;
  box-shadow:0 15px 40px rgba(0,0,0,0.25);
  display:none;
  z-index:1200;
}

.mobile-search-panel.show{
  display:block;
}

.mobile-search-inner{
  position:relative;
}

.mobile-search-inner input{
  width:100%;
  padding:10px 35px 10px 5px;
  font-size:16px;
  border:none;
  border-bottom:2px solid #000;
  outline:none;
}

.mobile-search-inner i{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
  cursor:pointer;
}

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

@media (max-width: 768px){
  .desktop-search{
    display:none;
  }

  .mobile-search-btn{
    display:flex;
  }
}
/* =====================================
   SEARCH VISIBILITY CONTROL (FINAL)
===================================== */

/* DESKTOP DEFAULT */
.desktop-search {
  display: flex;
}

.mobile-search-btn {
  display: none;
  color:white !important;   /* ❌ Hide search icon on desktop */
}

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

  .desktop-search {
    display: none;   /* ❌ Hide search bar on mobile */
  }

  .mobile-search-btn {
      color:black !important; 
    display: flex ;   /* ✅ Show search icon only on mobile */
    align-items: center;
    justify-content: center;
  }
}