* {
  box-sizing: border-box;
}

img, video {
  max-width: 100%;
  height: auto;
}

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&family=Poppins:wght@300;400;500;600;700&display=swap');

/* RESPONSIVE FIXES */
.hero-title h1{
  font-size: clamp(35px, 6vw, 70px);
}

.hero-title h2{
  font-size: clamp(30px, 5vw, 60px);
}

.small-title{
  font-size: clamp(10px, 2vw, 14px);
}

.section{
  padding: clamp(35px, 6vw, 70px) clamp(15px, 4vw, 50px);
}

.services-grid{
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.work-grid{
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.logo-grid{
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.hero-screen{
  width: 100%;
  max-width: 900px;
  height: auto;
  min-height: 500px;
  padding-bottom: 60px;
}

.hero{
  height: auto;
  padding: 40px 15px;
}



.hero-logo{
  width: 350px;
  max-width: 100%;
  height: auto;
  margin: -70px auto 15px auto;
  display: block;
  animation: logoHeroFloat 3.5s ease-in-out infinite;
  filter: drop-shadow(0px 10px 25px rgba(0,0,0,0.4));
}

/* smooth premium floating */
@keyframes logoHeroFloat{
  0%,100%{ transform: translateY(0px) scale(1); }
  50%{ transform: translateY(-12px) scale(1.05); }
}




/* GLOBAL RESET */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body{
  font-family: "Poppins", sans-serif;
  background: #fff;
  overflow-x: hidden;
}

/* PERFORMANCE OPTIMIZATION */
.hero-screen,
.service-card,
.work-card,
.work-big,
.logo-card,
.founder-box{
  will-change: transform, opacity;
  transform: translateZ(0);
}


/* HERO */
.hero{
  width: 100%;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  padding: 20px;
}

.hero-screen{
  width: 95%;
  max-width: 800px;
  height: 90%;
  border-radius: 55px;
  background: linear-gradient(to bottom, #ffb000, #ff9800);
  position: relative;
  overflow: hidden;
  box-shadow: 0px 0px 60px rgba(0,0,0,0.9);
  transform: scale(0.95);
  animation: zoomHero 1.3s ease forwards;
}

/* CURVED SCREEN EFFECT (CRT STYLE) */
.hero-screen::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 55px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.12), rgba(0,0,0,0.35));
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}

.hero-screen::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 55px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.05) 2px,
    rgba(255,255,255,0.02) 3px,
    rgba(255,255,255,0.02) 5px
  );
  opacity: 0.35;
  pointer-events: none;
  z-index: 3;
  animation: scanMove 3s linear infinite;
}

@keyframes scanMove{
  0%{ transform: translateY(-30px); }
  100%{ transform: translateY(30px); }
}

/* BENDING EFFECT (CURVE FEEL) */
.hero-screen{
  transform-origin: center;
  filter: contrast(1.1) saturate(1.2);
  animation: zoomHero 1.3s ease forwards, screenBend 5s ease-in-out infinite;
}

@keyframes screenBend{
  0%,100%{ transform: scale(1) perspective(900px) rotateX(1deg) rotateY(-1deg); }
  50%{ transform: scale(1.01) perspective(900px) rotateX(-1deg) rotateY(1deg); }
}

@keyframes zoomHero{
  to{
    transform: scale(1);
  }
}

/* TOP ICONS */
.hero-top-icons{
  display: flex;
  justify-content: space-between;
  padding: 18px 25px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  z-index: 5;
  animation: slideDown 1.2s ease forwards;
}

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

/* HERO TITLE */
.hero-title{
  text-align: center;
  margin-top: 60px;
  color: black;
  position: relative;
  z-index: 5;
  animation: titlePop 1.3s ease forwards;
}

@keyframes titlePop{
  0%{ opacity: 0; transform: translateY(30px) scale(0.95); }
  100%{ opacity: 1; transform: translateY(0px) scale(1); }
}

.small-title{
  font-size: 50px;
  letter-spacing: 2px;
  font-weight: 700;
  opacity: 0;
  animation: fadeGlow 1.6s ease forwards;
  animation-delay: 0.4s;
}

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

.hero-title h1{
  font-family: "Orbitron", sans-serif;
  font-size: 45px;
  letter-spacing: 5px;
  font-weight: 800;
  text-shadow: 0px 0px 12px rgba(0,0,0,0.3);
  animation: flickerText 2.8s ease-in-out infinite;
}

.hero-title h2{
  font-family: "Orbitron", sans-serif;
  font-size: 55px;
  font-weight: 800;
  margin-top: -10px;
  text-shadow: 0px 0px 12px rgba(0,0,0,0.3);
  animation: flickerText 3.2s ease-in-out infinite;
}

@keyframes flickerText{
  0%,100%{ opacity: 1; filter: blur(0px); }
  50%{ opacity: 0.92; filter: blur(0.4px); }
  60%{ opacity: 1; filter: blur(0px); }
  65%{ opacity: 0.85; filter: blur(0.6px); }
  75%{ opacity: 1; filter: blur(0px); }
}

/* BOTTOM NAV */
.hero-bottom-nav{
  position: absolute;
  bottom: 15px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0px 30px;
  font-weight: 700;
  font-size: 14px;
  z-index: 5;
  animation: slideUp 1.3s ease forwards;
}

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

.hero-bottom-nav .center-text{
  font-weight: 800;
}

/* MOVING LIGHT GLOW IN HERO */
.hero-screen .glow-strip{
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-20deg);
  animation: glowSlide 4.5s ease-in-out infinite;
  z-index: 1;
}

@keyframes glowSlide{
  0%{ left: -60%; opacity: 0; }
  30%{ opacity: 1; }
  60%{ opacity: 0.8; }
  100%{ left: 120%; opacity: 0; }
}


/* SECTION COMMON */
.section-heading{
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 800;
  margin-bottom: 25px;
  text-transform: uppercase;
  color: #111;
  position: relative;
}

.section-heading::after{
  content: "";
  width: 60px;
  height: 4px;
  background: #ff9800;
  display: block;
  margin-top: 8px;
  border-radius: 20px;
  animation: barPulse 2s ease-in-out infinite;
}

@keyframes barPulse{
  0%,100%{ width: 50px; opacity: 0.6; }
  50%{ width: 80px; opacity: 1; }
}

.section-heading.white{
  color: white;
}

.section-line{
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 35px;
}

.section-line span{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff9800;
  opacity: 0.4;
  animation: dotsWave 2s ease-in-out infinite;
}

.section-line span:nth-child(1){ animation-delay: 0s; }
.section-line span:nth-child(2){ animation-delay: 0.2s; }
.section-line span:nth-child(3){ animation-delay: 0.4s; }
.section-line span:nth-child(4){ animation-delay: 0.6s; }
.section-line span:nth-child(5){ animation-delay: 0.8s; }

@keyframes dotsWave{
  0%,100%{ transform: translateY(0px); opacity: 0.4; }
  50%{ transform: translateY(-10px); opacity: 1; }
}

.section-line span.active{
  width: 12px;
  height: 12px;
  opacity: 1;
  background: #000;
}

.white-line span{
  background: white;
  opacity: 0.4;
}

.white-line span.active{
  background: black;
  opacity: 1;
}


/* ABOUT */
.about{
  background: #fff6e8;
  position: relative;
  overflow: hidden;
}

.about::before{
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  background: rgba(255,152,0,0.25);
  border-radius: 50%;
  top: -80px;
  left: -80px;
  filter: blur(10px);
  animation: floatBubble 6s ease-in-out infinite;
}

.about::after{
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  background: rgba(0,0,0,0.08);
  border-radius: 50%;
  bottom: -120px;
  right: -120px;
  filter: blur(10px);
  animation: floatBubble2 7s ease-in-out infinite;
}

@keyframes floatBubble{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(30px); }
}

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

.about-grid{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
  align-items: center;
  position: relative;
  z-index: 5;
}

.label{
  font-weight: 800;
  font-size: 25px;
  margin-bottom: 8px;
  color: #111;
  letter-spacing: 1px;
}


.founder-box{
  background: #ff9800;
  border-radius: 30px;
  padding: 0;                 /* remove padding */
  width: 350px;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;           /* important */
  box-shadow: 0px 10px 25px rgba(0,0,0,0.25);
  animation: founderFloat 3.5s ease-in-out infinite;
}



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

.founder-img{
  width: 150%;
  height: 150%;
  object-fit: cover;          /* makes it perfectly fit */
  object-position: center;    /* keeps image centered */
  display: block;
  filter: grayscale(1);
}

.founder-box:hover .founder-img{
  filter: grayscale(0);
  transform: scale(1.05);
}

.label-bottom{
  margin-top: 10px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 1px;
}

.hello{
  font-family: "Orbitron", sans-serif;
  font-size: 30px;
  font-weight: 900;
  color: #ff9800;
  margin-bottom: 10px;
  animation: helloGlow 2.5s ease-in-out infinite;
}

@keyframes helloGlow{
  0%,100%{ text-shadow: 0px 0px 0px rgba(255,152,0,0); }
  50%{ text-shadow: 0px 0px 18px rgba(255,152,0,0.7); }
}

.about-text{
  font-size: 20px;
  line-height: 20px;
  color: #222;
  text-transform: uppercase;
}

.exp{
  margin-top: 20px;
  animation: expSlide 2.5s ease-in-out infinite;
}

@keyframes expSlide{
  0%,100%{ transform: translateX(0px); }
  50%{ transform: translateX(12px); }
}

.exp-title{
  font-weight: 800;
  font-size: 20px;
  color: #111;
}

.exp-year{
  font-size: 17px;
  font-weight: 800;
  color: #111;
}



/* ============================= */
/* ACHIEVEMENTS SECTION */
/* ============================= */

.achievements{
  background: #fff6e8;
  position: relative;
  overflow: hidden;
}

.achievements::before{
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  background: rgba(255,152,0,0.20);
  border-radius: 50%;
  top: -120px;
  right: -120px;
  filter: blur(15px);
  animation: achieveBubble 6s ease-in-out infinite;
}

.achievements::after{
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(0,0,0,0.08);
  border-radius: 50%;
  bottom: -120px;
  left: -120px;
  filter: blur(15px);
  animation: achieveBubble2 7s ease-in-out infinite;
}

@keyframes achieveBubble{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(35px); }
}

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

.achievement-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 25px;
  margin-top: 30px;
  position: relative;
  z-index: 5;
}

.achievement-card{
  background: #0c1325;
  border-radius: 20px;
  padding: 35px 20px;
  text-align: center;
  box-shadow: 0px 15px 35px rgba(0,0,0,0.25);
  overflow: hidden;
  position: relative;
  transition: 0.5s ease;
  animation: cardBreath 4s ease-in-out infinite;
}

.achievement-card:nth-child(1){ animation-delay: 0s; }
.achievement-card:nth-child(2){ animation-delay: 0.3s; }
.achievement-card:nth-child(3){ animation-delay: 0.6s; }
.achievement-card:nth-child(4){ animation-delay: 0.9s; }

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

/* Shine Strip Animation */
.achievement-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 70%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-25deg);
  animation: achieveShine 4s ease-in-out infinite;
}

@keyframes achieveShine{
  0%{ left: -80%; opacity: 0; }
  40%{ opacity: 1; }
  70%{ opacity: 0.7; }
  100%{ left: 150%; opacity: 0; }
}

.achievement-card h2{
  font-family: "Orbitron", sans-serif;
  font-size: clamp(35px, 4vw, 55px);
  font-weight: 900;
  color: #ff9800;
  margin-bottom: 10px;
  text-shadow: 0px 0px 18px rgba(255,152,0,0.5);
}

.achievement-card p{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: white;
}

/* Hover Animation */
.achievement-card:hover{
  transform: scale(1.06) rotate(-1deg);
  box-shadow: 0px 25px 45px rgba(0,0,0,0.35);
}

.achievement-card:hover h2{
  text-shadow: 0px 0px 25px rgba(255,152,0,0.9);
}


/* ============================= */
/* FLOATING ICONS */
/* ============================= */

.floating-icons{
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 9999;
}

.float-btn{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 28px;
  color: white;
  box-shadow: 0px 12px 25px rgba(0,0,0,0.35);
  transition: 0.4s ease;
  animation: floatPulse 2.5s ease-in-out infinite;
}

@keyframes floatPulse{
  0%,100%{ transform: translateY(0px) scale(1); }
  50%{ transform: translateY(-10px) scale(1.05); }
}

.float-btn.whatsapp{
  background: linear-gradient(to bottom, #ff9800, #ffb000);
}

.float-btn.call{
  background: linear-gradient(to bottom, #111, #222);
}

/* Hover Effect */
.float-btn:hover{
  transform: scale(1.12) rotate(8deg);
  box-shadow: 0px 20px 35px rgba(0,0,0,0.45);
}

/* Extra Glow */
.float-btn.whatsapp:hover{
  box-shadow: 0px 0px 25px rgba(255,152,0,0.9);
}

.float-btn.call:hover{
  box-shadow: 0px 0px 25px rgba(0,0,0,0.8);
}


/* ============================= */
/* FOOTER RESPONSIVE + CLICKABLE */
/* ============================= */

.footer{
  background: white;
  padding: 60px 30px;
  position: relative;
  overflow: hidden;
}

.footer-title{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 20px;
  animation: footerGlow 3s ease-in-out infinite;
}

.footer-info{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-info a{
  font-size: 13px;
  font-weight: 700;
  color: #111;
  text-decoration: none;
  transition: 0.4s ease;
  display: inline-flex;
  align-items: center;
}

.footer-info a i{
  color: #ff9800;
  margin-right: 10px;
  font-size: 16px;
}

.footer-info a:hover{
  transform: translateX(12px);
  color: #ff9800;
}

.footer-circle{
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: #ff9800;
  position: absolute;
  right: -160px;
  bottom: -180px;
  opacity: 0.9;
  animation: circleFloat 5s ease-in-out infinite;
}


/* Mobile Adjust */
@media(max-width: 480px){
  .float-btn{
    width: 52px;
    height: 52px;
    font-size: 24px;
  }

  .floating-icons{
    right: 12px;
    bottom: 12px;
  }

  .achievement-card{
    padding: 28px 18px;
  }
}


/* SERVICES */

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

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}


.services{
  background: #fff6e8;
  position: relative;
  overflow: hidden;
}

.services::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255,152,0,0.12), transparent 70%);
  animation: pulseBg 5s ease-in-out infinite;
}

@keyframes pulseBg{
  0%,100%{ opacity: 0.7; }
  50%{ opacity: 1; }
}

.services-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 5;
}

.service-card{
  background: #ff9800;
  border-radius: 22px;
  padding: 22px;
  text-align: center;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
  transition: 0.5s ease;
  position: relative;
  overflow: hidden;
  animation: serviceIdle 3.8s ease-in-out infinite;
}

.service-card:nth-child(1){ animation-delay: 0s; }
.service-card:nth-child(2){ animation-delay: 0.3s; }
.service-card:nth-child(3){ animation-delay: 0.6s; }
.service-card:nth-child(4){ animation-delay: 0.9s; }
.service-card:nth-child(5){ animation-delay: 1.2s; }
.service-card:nth-child(6){ animation-delay: 1.5s; }

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

/* SHINY STRIP AUTO MOVING */
.service-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 70%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-25deg);
  animation: shineMove 4s ease-in-out infinite;
}

@keyframes shineMove{
  0%{ left: -80%; opacity: 0; }
  40%{ opacity: 1; }
  70%{ opacity: 0.7; }
  100%{ left: 150%; opacity: 0; }
}

/* HOVER DIFFERENT */
.service-card:hover{
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0px 18px 35px rgba(0,0,0,0.35);
}

.service-card:hover .icon{
  transform: rotate(10deg) scale(1.2);
}

.service-card p{
  margin-top: 12px;
  font-size: 12px;
  font-weight: 800;
  color: black;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.icon{
  font-size: 30px;
  color: black;
  transition: 0.4s ease;
}


/* Make last row (2 cards) center aligned */
.services-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 5th and 6th service card in middle */
.services-grid .service-card:nth-child(5){
  grid-column: 2 / 3;
  transform: scale(0.9);
}

.services-grid .service-card:nth-child(6){
  grid-column: 3 / 4;
  transform: scale(0.9);
}


/* ============================= */
/* WORKSLIDE SECTION (DIRECT IMAGE ONLY) */
/* ============================= */


.work-card img {
  width: 100%;
  max-width: 1200px;
}

@media (max-width: 768px) {
  .work-card img {
    max-width: 100%;
  }

  .work-row-slant {
    flex-direction: column;
    gap: 40px;
  }

  .insta-card {
    width: 100%;
  }

  .insta-card img {
    transform: scale(1);
  }
}

.workslide{
  background: linear-gradient(to bottom, #ff9800, #ffb000);
  padding: 50px 20px;
  position: relative;
  overflow: hidden;
}

/* Premium moving background glow */
.workslide::before{
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  top: -200px;
  left: -250px;
  filter: blur(30px);
  animation: workGlowMove 8s ease-in-out infinite;
}

.workslide::after{
  content: "";
  position: absolute;
  width: 650px;
  height: 650px;
  background: rgba(0,0,0,0.12);
  border-radius: 50%;
  bottom: -250px;
  right: -250px;
  filter: blur(35px);
  animation: workGlowMove2 9s ease-in-out infinite;
}

@keyframes workGlowMove{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(70px); }
}

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


/* TOP WORK TITLE + LINE */
.work-top{
  position: relative;
  margin-bottom: 30px;
  z-index: 5;
  display: flex;
  align-items: center;
}

/* Title stays left */
.work-title{
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 2px;
  color: black;
  text-transform: uppercase;
  animation: workTitleAnim 2.5s ease-in-out infinite;
}

/* Dots always centered */
.work-slider-line{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 25px;
}

.work-title{
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 2px;
  color: black;
  text-transform: uppercase;
  animation: workTitleAnim 2.5s ease-in-out infinite;
}

/* Attractive glowing slide animation */
@keyframes workTitleAnim{
  0%{
    transform: translateX(0px);
    letter-spacing: 2px;
    opacity: 0.8;
    text-shadow: 0px 0px 0px rgba(0,0,0,0);
  }
  50%{
    transform: translateX(12px);
    letter-spacing: 6px;
    opacity: 1;
    text-shadow: 0px 0px 15px rgba(0,0,0,0.3);
  }
  100%{
    transform: translateX(0px);
    letter-spacing: 2px;
    opacity: 0.8;
    text-shadow: 0px 0px 0px rgba(0,0,0,0);
  }
}

.work-slider-line{
  display: flex;
  align-items: center;
  gap: 25px;
}

.work-slider-line span{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.75);
  animation: dotWave 2s ease-in-out infinite;
}

.work-slider-line span:nth-child(1){ animation-delay: 0s; }
.work-slider-line span:nth-child(2){ animation-delay: 0.2s; }
.work-slider-line span:nth-child(3){ animation-delay: 0.4s; }
.work-slider-line span:nth-child(4){ animation-delay: 0.6s; }
.work-slider-line span:nth-child(5){ animation-delay: 0.8s; }

@keyframes dotWave{
  0%,100%{ transform: translateY(0px); opacity: 0.6; }
  50%{ transform: translateY(-8px); opacity: 1; }
}

.work-slider-line span.active{
  background: black;
  opacity: 1;
}

.work-slider-line span.big{
  width: 18px;
  height: 18px;
  background: white;
  opacity: 1;
}


/* ============================= */
/* ROW 1 & ROW 2 (ONLY 1 IMAGE CENTER) */
/* ============================= */

.work-row{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px; /* MOST IMPORTANT GAP FIX */
  position: relative;
  z-index: 5;
}

/* No box / no card */
.work-card{
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}


.workslide .work-row:nth-child(3){
  margin-top: -200px !important;
}

/* DIRECT IMAGE ONLY */
.work-card img{
  width: 1500px;
  max-width: 100%;
  height: auto;
  display: block;

  background: transparent;
  border-radius: 0;
  box-shadow: none;

  transition: 0.9s cubic-bezier(.19,1,.22,1);

  filter: drop-shadow(0px 35px 60px rgba(0,0,0,0.35));

  animation: smoothFloat 4.5s ease-in-out infinite,
             shineSweep 4.5s ease-in-out infinite;
}

/* BEST SHINE ANIMATION (PREMIUM EFFECT) */
@keyframes shineSweep{
  0%,100%{
    filter: drop-shadow(0px 35px 60px rgba(0,0,0,0.35));
  }
  50%{
    filter: drop-shadow(0px 55px 85px rgba(0,0,0,0.55))
            brightness(1.05) contrast(1.05);
  }
}

/* Hover animation */
.work-card img:hover{
  transform: scale(1.06);
  filter: drop-shadow(0px 65px 100px rgba(0,0,0,0.6))
          brightness(1.05);
}

/* Smooth Floating Animation */
@keyframes smoothFloat{
  0%,100%{ transform: translateY(0px) scale(1); }
  50%{ transform: translateY(-14px) scale(1.01); }
}


/* ============================= */
/* THIRD ROW SLANTED INSTAGRAM POSTS */
/* ============================= */


.work-row-slant{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  position: relative;
  z-index: 5;
}

.insta-card{
  width: 670px;        /* increase this for bigger */
  flex-shrink: 0;      /* THIS IS THE MAIN FIX */
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
  margin: 0;
}

.insta-card img{
  width: 100%;
  max-width: none;     /* allows full growth */
  height: auto;
  display: block;

  transform: scale(1.25);
  filter: drop-shadow(0px 55px 85px rgba(0,0,0,0.55));
  animation: instaFloat 5.5s ease-in-out infinite;
  transition: 0.9s cubic-bezier(.19,1,.22,1);
}
/* .work-row-slant{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  margin-top: 40px; /* reduced gap */
  /* position: relative; */
  /* z-index: 5;
} */ 

/* NO CARD / NO BOX */
/* .insta-card{
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
  margin: 0;
  transition: 0.9s cubic-bezier(.19,1,.22,1);
} */

/* DIRECT IMAGE ONLY */
/* .insta-card img{
  width: 620px; /* FIXED SIZE (your 10000px was wrong) */
  /* max-width: 100%;
  height: auto;
  display: block;

  background: transparent;
  border-radius: 0;
  box-shadow: none;

  transform: scale(1.35);
  transition: 0.9s cubic-bezier(.19,1,.22,1);

  filter: drop-shadow(0px 55px 85px rgba(0,0,0,0.55));
  animation: instaFloat 5.5s ease-in-out infinite;
} */ 

/* SLANTING POSITIONS SAME AS IMAGE */
/* .insta-card.left{
  transform: rotate(-16deg) translateY(55px);
}

.insta-card.mid{
  transform: rotate(-5deg) translateY(-45px);
  z-index: 15;
}

.insta-card.right{
  transform: rotate(12deg) translateY(40px);
} */

/* Different animation delay */
.insta-card.left img{ animation-delay: 0s; }
.insta-card.mid img{ animation-delay: 0.4s; }
.insta-card.right img{ animation-delay: 0.8s; }

/* Floating motion */
@keyframes instaFloat{
  0%,100%{ transform: scale(1.35) translateY(0px); }
  50%{ transform: scale(1.42) translateY(-28px); }
}

/* Hover effect */
.insta-card:hover img{
  transform: scale(1.55);
  filter: drop-shadow(0px 85px 120px rgba(0,0,0,0.8))
          brightness(1.08);
}


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

.work-bottom{
  margin-top: 60px; /* reduced */
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 5;
}

.work-slider-line.bottom span{
  background: rgba(255,255,255,0.75);
}

.work-slider-line.bottom span.active{
  background: black;
}

.work-slider-line.bottom span.big{
  background: white;
}


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

@media(max-width: 1100px){

  .work-card img{
    width: 100%;
  }

.work-row-slant{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 120px;
  margin-top: 40px;
  position: relative;
  z-index: 5;
}

.insta-card img{
  width: 650px;
  max-width: none; /* VERY IMPORTANT */
  height: auto;
  display: block;

  background: transparent;
  border-radius: 0;
  box-shadow: none;

  transform: scale(1.5);
  transition: 0.9s cubic-bezier(.19,1,.22,1);

  filter: drop-shadow(0px 55px 85px rgba(0,0,0,0.55));
  animation: instaFloat 5.5s ease-in-out infinite;
}

  .insta-card.left,
  .insta-card.mid,
  .insta-card.right{
    transform: rotate(0deg) translateY(0px);
  }


}
/* LOGOS */


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

  .logo-card {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .logo-grid {
    grid-template-columns: 1fr;
  }
}

.section-heading{
  animation: sectionHeadingAnim 2.5s ease-in-out infinite;
}

@keyframes sectionHeadingAnim{
  0%{
    transform: translateX(0px);
    letter-spacing: 2px;
    opacity: 0.85;
  }
  50%{
    transform: translateX(12px);
    letter-spacing: 5px;
    opacity: 1;
  }
  100%{
    transform: translateX(0px);
    letter-spacing: 2px;
    opacity: 0.85;
  }
}

.logos{
  background: white;
  position: relative;
  overflow: hidden;
}

.logos::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,152,0,0.1), transparent);
  animation: bgShift 6s ease-in-out infinite;
}

@keyframes bgShift{
  0%,100%{ opacity: 0.6; }
  50%{ opacity: 1; }
}

.logo-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
  position: relative;
  z-index: 5;

  justify-items: center;   /* centers each logo box */
  align-items: center;     /* vertically centers */
}

.logo-card{
  background: #fff;
  border-radius: 18px;
  padding: 25px;
  width: 430px;   /* reduce breadth */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 10px 25px rgba(0,0,0,0.15);
  transition: 0.5s ease;
  animation: logoPulse 3.2s ease-in-out infinite;
}

.logo-card:nth-child(1){ animation-delay: 0s; }
.logo-card:nth-child(2){ animation-delay: 0.2s; }
.logo-card:nth-child(3){ animation-delay: 0.4s; }
.logo-card:nth-child(4){ animation-delay: 0.6s; }
.logo-card:nth-child(5){ animation-delay: 0.8s; }
.logo-card:nth-child(6){ animation-delay: 1s; }

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

.logo-card:hover{
  transform: scale(1.12) rotate(2deg);
  box-shadow: 0px 20px 35px rgba(0,0,0,0.25);
}

.logo-card img{
  width: 200px;
  opacity: 0.95;
  transition: 0.5s ease;
}

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




/* VIDEO SECTION */



.video-section{
  background: #fff6e8;
  padding: 70px 30px;
  text-align: left;
}

.video-box{
  width: 100%;
  max-width: 900px;
  margin: auto;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0px 20px 50px rgba(0,0,0,0.25);
  animation: videoFloat 4s ease-in-out infinite;
}

.video-box video{
  width: 100%;
  height: auto;
  display: block;
}

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



/* FOOTER */
.footer{
  background: white;
  padding: 60px 30px;
  position: relative;
  overflow: hidden;
}

.footer-title{
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 20px;
  animation: footerGlow 3s ease-in-out infinite;
}

@keyframes footerGlow{
  0%,100%{ text-shadow: 0px 0px 0px rgba(255,152,0,0); }
  50%{ text-shadow: 0px 0px 15px rgba(255,152,0,0.7); }
}

.footer-info p{
  font-size: 25px;
  margin: 10px 0;
  font-weight: 700;
  color: #111;
  transition: 0.4s ease;
}

.footer-info p:hover{
  transform: translateX(12px);
  color: #ff9800;
}

.footer-info i{
  color: #ff9800;
  margin-right: 10px;
}

.footer-circle{
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: #ff9800;
  position: absolute;
  right: -160px;
  bottom: -180px;
  opacity: 0.9;
  animation: circleFloat 5s ease-in-out infinite;
}

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


/* HOVER ANIMATION */
.hover-pop:hover{
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0px 18px 35px rgba(0,0,0,0.3);
}


/* REVEAL ANIMATION */
.reveal{
  opacity: 0;
  transform: translateY(80px) scale(0.96);
  transition: 1s cubic-bezier(.19,1,.22,1);
}

.reveal.active{
  opacity: 1;
  transform: translateY(0px) scale(1);
}


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

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

  .about-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .founder-box{
    margin: auto;
  }

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

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

  .hero-title{
    margin-top: 40px;
  }

  .hero-title h1{
    font-size: 45px;
  }

  .hero-title h2{
    font-size: 40px;
  }

  .hero-top-icons{
    font-size: 12px;
    padding: 14px 18px;
  }

  .hero-bottom-nav{
    font-size: 12px;
    padding: 0px 18px;
  }
}

@media(max-width: 480px){

  .hero-screen{
    border-radius: 35px;
  }

  .hero-title h1{
    letter-spacing: 2px;
  }

  .hero-title h2{
    letter-spacing: 2px;
  }

  .section-heading{
    font-size: 15px;
  }

  .founder-box{
    width: 170px;
    height: 170px;
  }

  .founder-img{
    width: 120px;
  }
}