/* =========================
   GLOBAL
========================= */

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

html{
  scroll-behavior:smooth;
}


body{
  font-family:'Poppins',sans-serif;
  background:#060b16;
  color:#fff;
  overflow-x:hidden;
  line-height:1.7;
}
p{
  max-width:700px;
}

.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

img{
  width:100%;
  display:block;
}

a{
  text-decoration:none;
}

section{
  padding:120px 0;
}


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

.header{
  position:fixed;
  top:0;
  width:100%;
  z-index:1000;
  backdrop-filter:blur(15px);
  background:rgba(6,11,22,0.85);
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.nav-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
}

.logo img{
  height:90px;
  width:auto;
}

.navbar{
  display:flex;
  align-items:center;
  gap:30px;
}

.navbar a{
  color:#fff;
  font-weight:500;
  position:relative;
  transition:0.3s;
}

.navbar a:hover,
.navbar .active{
  color:#38bdf8;
}

.navbar a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-7px;
  width:0%;
  height:2px;
  background:#38bdf8;
  transition:0.3s;
}

.navbar a:hover::after,
.navbar .active::after{
  width:100%;
}

.nav-btn{
  background:linear-gradient(135deg,#2563eb,#38bdf8);
  padding:14px 28px;
  border-radius:60px;
  box-shadow:0 15px 35px rgba(37,99,235,0.35);
}
/* =========================================
   MOBILE HAMBURGER MENU
========================================= */

.menu-toggle{
  display:none;
  font-size:1.8rem;
  color:#fff;
  cursor:pointer;
  z-index:1001;
}


/* MOBILE NAVIGATION */

@media(max-width:768px){

  .nav-container{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }

  .logo img{
    height:70px;
  }

  .menu-toggle{
    display:block;
  }

  .navbar{
    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:
    rgba(6,11,22,0.98);

    backdrop-filter:blur(15px);

    flex-direction:column;

    align-items:center;

    gap:25px;

    padding:35px 0;

    border-top:
    1px solid rgba(255,255,255,0.05);

    transform:
    translateY(-20px);

    opacity:0;

    visibility:hidden;

    transition:0.4s ease;

    z-index:999;
  }

  .navbar.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .navbar a{
    font-size:1rem;
  }

  .nav-btn{
    margin-top:10px;
  }

}


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

.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  padding-top:120px;
  isolation:isolate;
  background:#060b16;
}



/* ===== SLIDES ===== */

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

  opacity:0;

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  transform:scale(1);

  animation:heroSlider 24s infinite;
}

/* SLIDE 1 */

.hero-slide:nth-child(1){
  background:
  linear-gradient(
  rgba(2,6,23,0.78),
  rgba(2,6,23,0.88)),
  url('../images/imageB.png');

  animation-delay:0s;
}

/* SLIDE 2 */

.hero-slide:nth-child(2){
  background:
  linear-gradient(
  rgba(2,6,23,0.78),
  rgba(2,6,23,0.88)),
  url('../images/imageC.png');

  animation-delay:6s;
}

/* SLIDE 3 */

.hero-slide:nth-child(3){
  background:
  linear-gradient(
  rgba(2,6,23,0.78),
  rgba(2,6,23,0.88)),
  url('../images/imageD.png');

  animation-delay:12s;
}

/* SLIDE 4 */

.hero-slide:nth-child(4){
  background:
  linear-gradient(
  rgba(2,6,23,0.78),
  rgba(2,6,23,0.88)),
  url('../images/project4.png');

  animation-delay:18s;
}


/* =========================
   SLIDER ANIMATION
========================= */

@keyframes heroSlider{

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

  8%{
    opacity:1;
  }

  25%{
    opacity:1;
    transform:scale(1.06);
  }

  33%{
    opacity:0;
  }

  100%{
    opacity:0;
    transform:scale(1.1);
  }

}





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

.hero::before{
  content:'';
  position:absolute;
  inset:0;

  background:
  radial-gradient(
  circle at top left,
  rgba(56,189,248,0.18),
  transparent 35%),

  radial-gradient(
  circle at bottom right,
  rgba(37,99,235,0.18),
  transparent 35%);

  z-index:-1;
}

/* =========================
   GLOW EFFECTS
========================= */

.hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  opacity:0.45;
}

.hero-glow1{
  width:320px;
  height:320px;
  background:#2563eb;
  top:-120px;
  left:-120px;
}

.hero-glow2{
  width:320px;
  height:320px;
  background:#38bdf8;
  right:-120px;
  bottom:-120px;
}

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

.hero-content{
  display:grid;
  grid-template-columns:1fr;
  gap:70px;
  align-items:center;
  position:relative;
  z-index:2;
}

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

.hero-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:12px 24px;

  border-radius:60px;

  background:rgba(56,189,248,0.1);

  color:#38bdf8;

  border:1px solid rgba(56,189,248,0.2);

  margin-bottom:28px;

  backdrop-filter:blur(10px);

  font-size:14px;
  font-weight:600;
  letter-spacing:0.5px;
}

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

.hero-text h1{
  font-size:5.2rem;
  line-height:1.02;
  margin-bottom:28px;
  font-weight:800;
  max-width:850px;
}

.hero-text h1 span{
  background:linear-gradient(
  135deg,
  #38bdf8,
  #2563eb);

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

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

.hero-text p{
  font-size:1.15rem;
  color:#cbd5e1;
  margin-bottom:42px;
  max-width:720px;
  line-height:1.9;
}

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

.hero-buttons{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:55px;
}

.btn-primary{
  background:
  linear-gradient(
  135deg,
  #2563eb,
  #38bdf8);

  color:#fff;

  padding:17px 36px;

  border-radius:60px;

  font-weight:600;

  display:inline-flex;
  align-items:center;
  gap:12px;

  transition:0.4s ease;

  box-shadow:
  0 15px 35px rgba(37,99,235,0.35);
}

.btn-primary:hover{
  transform:translateY(-6px);
  box-shadow:
  0 25px 45px rgba(37,99,235,0.45);
}

.btn-secondary{
  border:1px solid rgba(255,255,255,0.14);

  padding:17px 34px;

  border-radius:60px;

  color:#fff;

  transition:0.4s ease;

  backdrop-filter:blur(10px);

  background:rgba(255,255,255,0.03);
}

.btn-secondary:hover{
  background:#fff;
  color:#111827;
  transform:translateY(-4px);
}

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

.hero-stats{
  display:flex;
  gap:50px;
  flex-wrap:wrap;
}

.stat-box{
  position:relative;
}

.stat-box::before{
  content:'';
  position:absolute;
  left:-18px;
  top:5px;

  width:2px;
  height:45px;

  background:#38bdf8;
}

.stat-box h3{
  color:#38bdf8;
  font-size:2.3rem;
  font-weight:800;
}

.stat-box p{
  color:#94a3b8;
  font-size:15px;
}

/* =========================
   FLOAT ANIMATION
========================= */

@keyframes float{

  0%{
    transform:translateY(0);
  }

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

  100%{
    transform:translateY(0);
  }

}

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

@media(max-width:991px){

  .hero{
    padding-top:180px;
  }

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

  .hero-text h1{
    font-size:3.8rem;
    margin:auto auto 25px;
  }

  .hero-text p{
    margin:auto auto 40px;
  }

  .hero-buttons,
  .hero-stats{
    justify-content:center;
  }

  .stat-box::before{
    display:none;
  }

}

@media(max-width:768px){

.hero{
  min-height:auto;
  padding-top:140px;
  padding-bottom:80px;
}

  .hero-text h1{
    font-size:2.8rem;
  }

  .hero-text p{
    font-size:1rem;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .btn-primary,
  .btn-secondary{
    width:100%;
    justify-content:center;
  }

}

@media(max-width:480px){

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

  .hero-tag{
    font-size:12px;
  }

  .hero-stats{
    gap:30px;
  }

}
/* =========================
   TRUST
========================= */

.trust-section{
  background:#0f172a;
}

.trust-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
}

.trust-box{
  background:rgba(255,255,255,0.03);
  border-radius:30px;
  padding:45px 35px;
  text-align:center;
  border:1px solid rgba(255,255,255,0.05);
  transition:0.4s;
}

.trust-box:hover{
  transform:translateY(-10px);
  border-color:#38bdf8;
}

.trust-box i{
  font-size:3rem;
  margin-bottom:20px;
  color:#38bdf8;
}

.trust-box p{
  color:#94a3b8;
}


/* =========================
   SERVICES
========================= */

.services{
  background:#060b16;
}

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

.service-card{
  background:#111827;
  padding:40px 35px;
  border-radius:30px;
  transition:0.4s;
  border:1px solid rgba(255,255,255,0.05);
  position:relative;
  overflow:hidden;
}

.service-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(135deg,#2563eb,#38bdf8);
}

.service-card:hover{
  transform:translateY(-12px);
  box-shadow:0 25px 60px rgba(0,0,0,0.4);
  border-color:#38bdf8;
}

.service-icon{
  width:80px;
  height:80px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:20px;
  background:rgba(56,189,248,0.1);
  margin-bottom:25px;
}

.service-icon i{
  font-size:2rem;
  color:#38bdf8;
}

.service-card h3{
  margin-bottom:18px;
  font-size:1.4rem;
}

.service-card p{
  color:#94a3b8;
}


/* =========================
   PORTFOLIO
========================= */

.portfolio-preview{
  background:#0f172a;
}

.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:30px;
}

.portfolio-card{
  position:relative;
  overflow:hidden;
  border-radius:30px;
}

.portfolio-card img{
  height:420px;
  object-fit:cover;
  transition:0.5s;
}

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

.portfolio-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
  rgba(0,0,0,0.9),
  transparent);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:35px;
}

.portfolio-overlay h3{
  margin-bottom:10px;
}

.portfolio-overlay p{
  color:#cbd5e1;
  margin-bottom:15px;
}

.portfolio-overlay a{
  color:#38bdf8;
  font-weight:600;
}


/* =========================
   TESTIMONIALS
========================= */

.testimonials{
  background:#060b16;
}

.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
}

.testimonial-card{
  background:#111827;
  padding:40px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,0.05);
}

.client-info{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:25px;
}

.client-info img{
  width:70px;
  height:70px;
  border-radius:50%;
  object-fit:cover;
}

.client-info span{
  color:#38bdf8;
  font-size:14px;
}

.testimonial-card p{
  color:#cbd5e1;
}


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

.cta-section{
  background:
  linear-gradient(135deg,
  rgba(37,99,235,0.95),
  rgba(56,189,248,0.95));
  text-align:center;
}

.cta-container h2{
  font-size:3rem;
  margin-bottom:20px;
}

.cta-container p{
  margin-bottom:35px;
  font-size:1.1rem;
}


/* =========================
   FOOTER
========================= */

.footer{
  background:#020617;
  padding-top:90px;
}

.footer-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:50px;
  padding-bottom:50px;
}

.footer-logo img{
  width:180px;
  margin-bottom:20px;
}

.footer-logo p,
.footer-contact p{
  color:#94a3b8;
}

.footer-links h4,
.footer-contact h4{
  margin-bottom:20px;
}

.footer-links a{
  display:block;
  color:#94a3b8;
  margin-bottom:12px;
  transition:0.3s;
}

.footer-links a:hover{
  color:#38bdf8;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.05);
  text-align:center;
  padding:25px 0;
  color:#94a3b8;
}


/* =========================
   WHY US
========================= */

.why-us{
  background:#0f172a;
}

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

.why-card{
  background:#111827;
  padding:40px 30px;
  border-radius:30px;
  text-align:center;
  transition:0.4s;
  border:1px solid rgba(255,255,255,0.05);
}

.why-card:hover{
  transform:translateY(-10px);
  border-color:#38bdf8;
}

.why-icon{
  width:90px;
  height:90px;
  margin:auto;
  margin-bottom:25px;
  border-radius:25px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(56,189,248,0.1);
}

.why-icon i{
  font-size:2rem;
  color:#38bdf8;
}


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

.process-section{
  background:#060b16;
}

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

.process-card{
  background:#111827;
  padding:40px 30px;
  border-radius:30px;
  transition:0.4s;
  border:1px solid rgba(255,255,255,0.05);
}

.process-card:hover{
  transform:translateY(-10px);
}

.process-number{
  font-size:4rem;
  font-weight:800;
  color:rgba(56,189,248,0.15);
  margin-bottom:20px;
}


/* =========================
   PRICING
========================= */

.pricing-section{
  background:#0f172a;
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:35px;
}

.pricing-card{
  background:#111827;
  padding:50px 35px;
  border-radius:35px;
  position:relative;
  text-align:center;
  border:1px solid rgba(255,255,255,0.05);
}

.featured-price{
  border:1px solid #38bdf8;
  transform:scale(1.05);
}

.popular-tag{
  position:absolute;
  top:20px;
  right:20px;
  background:#38bdf8;
  color:#000;
  padding:8px 14px;
  border-radius:30px;
  font-size:13px;
  font-weight:700;
}

.price{
  font-size:3rem;
  font-weight:800;
  margin:25px 0;
  color:#38bdf8;
}

.pricing-card ul{
  list-style:none;
  margin-bottom:35px;
}

.pricing-card ul li{
  margin-bottom:15px;
  color:#cbd5e1;
}


/* =========================
   FAQ
========================= */

.faq-section{
  background:#060b16;
}

.faq-container{
  max-width:900px;
  margin:auto;
}

.faq-item{
  background:#111827;
  padding:35px;
  border-radius:25px;
  margin-bottom:25px;
  border:1px solid rgba(255,255,255,0.05);
}

.faq-item h3{
  margin-bottom:15px;
  color:#fff;
}

.faq-item p{
  color:#94a3b8;
}


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

.page-hero{
  padding-top:180px;
  padding-bottom:120px;
  text-align:center;
  position:relative;

  background:
  linear-gradient(
  rgba(2,6,23,0.88),
  rgba(2,6,23,0.92)),
  url('../images/project4.png');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.page-hero::before{
  content:'';
  position:absolute;
  inset:0;

  background:
  radial-gradient(circle at top left,
  rgba(56,189,248,0.10),
  transparent 30%),

  radial-gradient(circle at bottom right,
  rgba(37,99,235,0.12),
  transparent 30%);
}

.page-hero-content{
  position:relative;
  z-index:2;
}

.page-tag{
  display:inline-block;
  background:rgba(56,189,248,0.1);
  color:#38bdf8;
  padding:10px 22px;
  border-radius:40px;
  margin-bottom:25px;
  border:1px solid rgba(56,189,248,0.2);
}

.page-hero h1{
  font-size:4rem;
  margin-bottom:25px;
  line-height:1.1;
}

.page-hero p{
  max-width:750px;
  margin:auto;
  color:#94a3b8;
  font-size:1.1rem;
}


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

.services-page{
  background:#0f172a;
}

.services-page-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:35px;
}

.service-page-card{
  background:#111827;
  padding:45px 35px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,0.05);
  transition:0.4s;
  position:relative;
  overflow:hidden;
}

.service-page-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(135deg,#2563eb,#38bdf8);
}

.service-page-card:hover{
  transform:translateY(-10px);
}

.featured-service-card{
  border:1px solid #38bdf8;
}

.service-page-icon{
  width:85px;
  height:85px;
  border-radius:24px;
  background:rgba(56,189,248,0.1);
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:25px;
}

.service-page-icon i{
  font-size:2rem;
  color:#38bdf8;
}

.service-page-card h3{
  font-size:1.7rem;
  margin-bottom:20px;
}

.service-page-card p{
  color:#94a3b8;
  margin-bottom:30px;
}

.service-page-card ul{
  list-style:none;
  margin-bottom:35px;
}

.service-page-card ul li{
  margin-bottom:14px;
  color:#cbd5e1;
  position:relative;
  padding-left:22px;
}

.service-page-card ul li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:#38bdf8;
}

.service-page-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.service-page-footer span{
  color:#38bdf8;
  font-size:1.3rem;
  font-weight:700;
}

.service-page-footer a{
  background:linear-gradient(135deg,#2563eb,#38bdf8);
  color:#fff;
  padding:12px 22px;
  border-radius:50px;
  font-weight:600;
}


/* =========================
   WHY SERVICES
========================= */

.why-services{
  background:#060b16;
}

.why-services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
}

.why-service-box{
  background:#111827;
  padding:40px 30px;
  border-radius:30px;
  text-align:center;
  border:1px solid rgba(255,255,255,0.05);
  transition:0.4s;
}

.why-service-box:hover{
  transform:translateY(-10px);
}

.why-service-box i{
  font-size:3rem;
  color:#38bdf8;
  margin-bottom:25px;
}

.why-service-box h3{
  margin-bottom:18px;
}

.why-service-box p{
  color:#94a3b8;
}


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

@media(max-width:991px){

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

  .hero-text p{
    margin:auto auto 40px;
  }

  .hero-buttons,
  .hero-stats{
    justify-content:center;
  }

  .hero-text h1{
    font-size:3.5rem;
  }

}

@media(max-width:768px){

  .header{
    padding:10px 0;
  }

  .nav-container{
    flex-direction:column;
    gap:15px;
  }

  .logo img{
    height:70px;
  }

  .navbar{
    gap:15px;
    flex-wrap:wrap;
    justify-content:center;
  }

  .navbar a{
    font-size:14px;
  }

}

  .hero{
    padding-top:180px;
  }

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

  .btn-primary,
  .btn-secondary{
    width:100%;
    justify-content:center;
  }

  .section-title h2,
  .cta-container h2{
    font-size:2.2rem;
  }

  .page-hero{
    padding-top:160px;
  }

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

}

@media(max-width:480px){

  .hero-text h1{
    font-size:2rem;
  }

  .section-title h2,
  .cta-container h2{
    font-size:1.8rem;
  }

}
/* =========================
   PORTFOLIO PAGE
========================= */

.portfolio-hero{
  background:
  linear-gradient(
  rgba(2,6,23,0.88),
  rgba(2,6,23,0.92)),
  url('../images/imageD.png');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.portfolio-page{
  background:#060b16;
}

.portfolio-page-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:35px;
}

.portfolio-page-card{
  background:#111827;
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.05);
  transition:0.4s;
}

.portfolio-page-card:hover{
  transform:translateY(-12px);
  box-shadow:0 25px 60px rgba(0,0,0,0.45);
  border-color:#38bdf8;
}

.portfolio-page-image{
  overflow:hidden;
}

.portfolio-page-image img{
  height:260px;
  object-fit:cover;
  transition:0.5s;
}

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

.portfolio-page-content{
  padding:35px;
}

.portfolio-page-content span{
  color:#38bdf8;
  font-size:14px;
  font-weight:600;
  letter-spacing:1px;
}

.portfolio-page-content h3{
  font-size:1.7rem;
  margin:15px 0;
}

.portfolio-page-content p{
  color:#94a3b8;
  margin-bottom:25px;
}

.portfolio-page-content a{
  color:#38bdf8;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:0.3s;
}

.portfolio-page-content a:hover{
  gap:16px;
}
/* =========================
   ABOUT PAGE
========================= */

.about-hero{
  background:
  linear-gradient(
  rgba(2,6,23,0.88),
  rgba(2,6,23,0.92)),
  url('../images/imageC.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.about-text h2{
  font-size:2.6rem;
  margin-bottom:20px;
}

.about-text p{
  color:#94a3b8;
  margin-bottom:15px;
}

.about-badges{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  margin-top:25px;
}

.badge{
  background:#111827;
  padding:12px 18px;
  border-radius:50px;
  border:1px solid rgba(255,255,255,0.05);
  display:flex;
  align-items:center;
  gap:10px;
  color:#cbd5e1;
}

.badge i{
  color:#38bdf8;
}

.about-image{
  width:100%;
  min-height:500px;
  border-radius:30px;

  background:
  linear-gradient(
  rgba(2,6,23,0.25),
  rgba(2,6,23,0.35)),
  url('../images/imageB.png');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  box-shadow:0 25px 60px rgba(0,0,0,0.45);
}
.about-image{
  transition:0.5s;
}

.about-image:hover{
  transform:scale(1.02);
}

/* STATS */
.about-stats{
  background:#0f172a;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:30px;
  text-align:center;
}

.stat-card{
  background:#111827;
  padding:40px;
  border-radius:25px;
  border:1px solid rgba(255,255,255,0.05);
}

.stat-card h3{
  font-size:2.5rem;
  color:#38bdf8;
}
.about-story{
  background:#0f172a;
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.about-text p{
  color:#94a3b8;
  margin-bottom:15px;
}



@media(max-width:768px){
  .about-grid{
    grid-template-columns:1fr;
  }
}
/* =========================
   FOUNDER SECTION
========================= */

.founder-section{
  background:#060b16;
}

.founder-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.founder-image img{
  border-radius:30px;
  box-shadow:0 25px 60px rgba(0,0,0,0.45);
  transition:0.4s;
}

.founder-image img:hover{
  transform:scale(1.02);
}

.founder-text h3{
  font-size:2rem;
  margin-bottom:8px;
}

.founder-role{
  display:inline-block;
  color:#38bdf8;
  margin-bottom:20px;
  font-weight:500;
}

.founder-text p{
  color:#94a3b8;
  margin-bottom:15px;
  line-height:1.8;
}

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

  .founder-role{
    display:block;
  }
}
/* =========================
   CONTACT HERO
========================= */

.contact-hero{
  background:
  linear-gradient(
  rgba(2,6,23,0.86),
  rgba(2,6,23,0.92)),
  url('../images/call.png');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* =========================
   CONTACT SECTION
========================= */

.contact-section{
  background:#060b16;
}
.contact-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:start;
}


/* LEFT */

.section-title.left{
  text-align:left;
}

.contact-text{
  color:#94a3b8;
  margin-bottom:40px;
  line-height:1.9;
}

.contact-card{
  display:flex;
  gap:20px;
  align-items:flex-start;

  background:#111827;

  padding:25px;

  border-radius:25px;

  margin-bottom:25px;

  border:1px solid rgba(255,255,255,0.05);

  transition:0.4s;
  min-height:140px;
}

.contact-card:hover{
  transform:translateY(-8px);
  border-color:#38bdf8;
}

.contact-icon{
  width:70px;
  height:70px;

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

  border-radius:20px;

  background:rgba(56,189,248,0.1);
}

.contact-icon i{
  color:#38bdf8;
  font-size:1.5rem;
}

.contact-card h3{
  margin-bottom:8px;
}

.contact-card p{
  color:#94a3b8;
}

/* RIGHT */

.contact-form-box{
  background:#111827;

  padding:45px;

  border-radius:35px;

  border:1px solid rgba(255,255,255,0.05);

  box-shadow:0 25px 60px rgba(0,0,0,0.35);
}

.input-group{
  margin-bottom:25px;
}

.input-group input,
.input-group textarea{
  width:100%;

  background:#0f172a;

  border:1px solid rgba(255,255,255,0.06);

  border-radius:18px;

  padding:18px 20px;

  color:#fff;

  font-size:1rem;

  outline:none;

  transition:0.3s;
}

.input-group input:focus,
.input-group textarea:focus{
  border-color:#38bdf8;
  box-shadow:0 0 0 4px rgba(56,189,248,0.08);
}

.input-group textarea{
  resize:none;
}

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

@media(max-width:991px){

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

}

@media(max-width:768px){

  .contact-form-box{
    padding:30px;
  }

}
/* =========================================
   THANK YOU PAGE
========================================= */

.thank-you-page{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:140px 20px 100px;

  background:
  linear-gradient(
  rgba(2,6,23,0.88),
  rgba(2,6,23,0.92)),
  url('../images/call.png');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  position:relative;
  overflow:hidden;
}


/* GLOW EFFECTS */

.thank-you-page::before{
  content:'';
  position:absolute;
  width:350px;
  height:350px;
  background:#2563eb;
  filter:blur(140px);
  opacity:0.35;
  top:-100px;
  left:-100px;
  border-radius:50%;
}

.thank-you-page::after{
  content:'';
  position:absolute;
  width:350px;
  height:350px;
  background:#38bdf8;
  filter:blur(140px);
  opacity:0.25;
  bottom:-120px;
  right:-120px;
  border-radius:50%;
}


/* MAIN CONTAINER */

.thank-you-container{
  position:relative;
  z-index:2;

  width:100%;
  max-width:1100px;

  text-align:center;

  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,0.08);

  border-radius:40px;

  padding:70px 50px;

  box-shadow:
  0 25px 60px rgba(0,0,0,0.45);
}


/* LOGO */

.thank-logo img{
  width:180px;
  margin:auto;
  margin-bottom:35px;
}


/* SUCCESS ICON */

.success-icon{
  margin-bottom:30px;
}

.success-icon i{
  font-size:6rem;
  color:#38bdf8;

  text-shadow:
  0 0 30px rgba(56,189,248,0.5);

  animation:pulse 2s infinite;
}


/* TAG */

.thank-tag{
  display:inline-block;

  padding:12px 24px;

  border-radius:60px;

  background:rgba(56,189,248,0.1);

  border:1px solid rgba(56,189,248,0.25);

  color:#38bdf8;

  font-size:14px;
  font-weight:600;
  letter-spacing:1px;

  margin-bottom:25px;
}


/* TITLE */

.thank-you-container h1{
  font-size:4rem;
  line-height:1.1;
  margin-bottom:25px;
  font-weight:800;
}


/* DESCRIPTION */

.thank-you-container p{
  max-width:750px;
  margin:auto;
  color:#cbd5e1;
  font-size:1.08rem;
  line-height:1.8;
}


/* INFO GRID */

.thank-info-grid{
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(250px,1fr));

  gap:30px;

  margin-top:60px;
  margin-bottom:60px;
}


/* INFO CARD */

.thank-info-card{
  background:rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(10px);

  border-radius:30px;

  padding:40px 30px;

  transition:0.4s;
}

.thank-info-card:hover{
  transform:translateY(-10px);

  border-color:#38bdf8;

  box-shadow:
  0 20px 40px rgba(0,0,0,0.35);
}


/* CARD ICON */

.thank-info-card i{
  font-size:3rem;
  color:#38bdf8;
  margin-bottom:22px;
}


/* CARD TITLE */

.thank-info-card h3{
  margin-bottom:15px;
  font-size:1.4rem;
}


/* CARD TEXT */

.thank-info-card p{
  color:#94a3b8;
  font-size:1rem;
}


/* BUTTONS */

.thank-buttons{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;

  margin-bottom:35px;
}


/* WHATSAPP BUTTON */

.thank-whatsapp{
  display:inline-flex;
  align-items:center;
  gap:12px;

  background:linear-gradient(
  135deg,
  #16a34a,
  #22c55e);

  color:#fff;

  padding:18px 35px;

  border-radius:60px;

  font-weight:600;

  transition:0.4s;

  box-shadow:
  0 15px 35px rgba(34,197,94,0.3);
}

.thank-whatsapp:hover{
  transform:translateY(-5px);
}


/* OPTIONAL SMALL NOTE */

.thank-note{
  margin-top:25px;
  color:#94a3b8;
  font-size:15px;
}


/* ANIMATIONS */

@keyframes pulse{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.08);
  }

  100%{
    transform:scale(1);
  }

}


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

@media(max-width:991px){

  .thank-you-container h1{
    font-size:3rem;
  }

}


@media(max-width:768px){

  .thank-you-page{
    padding-top:160px;
  }

  .thank-you-container{
    padding:60px 30px;
  }

  .thank-you-container h1{
    font-size:2.4rem;
  }

  .thank-buttons{
    flex-direction:column;
  }

  .thank-buttons a,
  .thank-whatsapp{
    width:100%;
    justify-content:center;
  }

}


@media(max-width:480px){

  .thank-you-container h1{
    font-size:2rem;
  }

  .success-icon i{
    font-size:5rem;
  }

}
/* =========================
   FOOTER SOCIALS
========================= */

.footer-social h4{
  margin-bottom:20px;
}

.social-icons{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

.social-icons a{
  width:50px;
  height:50px;

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

  border-radius:50%;

  background:rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.08);

  color:#fff;

  font-size:1.2rem;

  transition:0.4s;
}

.social-icons a:hover{
  transform:
  translateY(-6px)
  scale(1.08);

  background:linear-gradient(
  135deg,
  #2563eb,
  #38bdf8);

  border-color:#38bdf8;

  box-shadow:
  0 15px 35px rgba(37,99,235,0.45);
}
/* =========================================
   CONTACT PAGE MOBILE FIX
========================================= */

@media(max-width:768px){

  .contact-hero{
    padding-top:160px;
    padding-bottom:90px;
    text-align:center;
  }

  .contact-hero h1{
    font-size:2.5rem;
    line-height:1.2;
  }

  .contact-hero p{
    font-size:1rem;
    width:100%;
  }

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

  .contact-info-box,
  .contact-form-box{
    padding:30px 22px;
    border-radius:25px;
  }

  .contact-form-box form{
    width:100%;
  }

  .input-group input,
  .input-group textarea{
    font-size:15px;
    padding:16px;
  }

  .contact-form-box .btn-primary{
    width:100%;
    justify-content:center;
  }

  .contact-info-item{
    align-items:flex-start;
    gap:15px;
  }

  .contact-info-item i{
    width:55px;
    height:55px;
    font-size:1.1rem;
  }

  .footer-container{
    grid-template-columns:1fr;
    text-align:center;
    gap:40px;
  }

  .footer-logo img{
    margin:auto;
    margin-bottom:20px;
  }

  .footer-socials{
    justify-content:center;
  }

}


/* =========================================
   EXTRA SMALL DEVICES
========================================= */

@media(max-width:480px){

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

  .contact-form-box,
  .contact-info-box{
    padding:25px 18px;
  }

  .input-group input,
  .input-group textarea{
    padding:14px;
    border-radius:14px;
  }

  .btn-primary,
  .btn-secondary{
    width:100%;
  }

}
/* STICKY HEADER EFFECT */

.header.sticky{
  background:rgba(6,11,22,0.96);
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
/* =========================================
   HERO ACTIONS
========================================= */

.hero-actions{
  display:flex;
  flex-direction:column;
  gap:28px;
  margin-bottom:55px;
}

/* MAIN BUTTONS */

.hero-buttons{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

/* MINI LINKS */

.hero-mini-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
}

.hero-mini-links a{
  display:inline-flex;
  align-items:center;
  gap:10px;

  color:#cbd5e1;

  font-size:15px;
  font-weight:500;

  transition:0.3s;
}

.hero-mini-links a:hover{
  color:#38bdf8;
  transform:translateY(-2px);
}

/* WHATSAPP */

.hero-whatsapp{
  background:rgba(34,197,94,0.12);

  border:1px solid rgba(34,197,94,0.25);

  padding:12px 22px;

  border-radius:50px;

  color:#22c55e !important;

  font-weight:600;
}

.hero-whatsapp:hover{
  background:#22c55e;
  color:#fff !important;

  box-shadow:
  0 15px 35px rgba(34,197,94,0.35);
}

/* MOBILE */

@media(max-width:768px){

  .hero-buttons{
    flex-direction:column;
  }

  .hero-mini-links{
    justify-content:center;
    text-align:center;
  }

}
.portfolio-page-card:hover{
  transform:translateY(-12px);

  border-color:#38bdf8;

  box-shadow:
  0 25px 60px rgba(0,0,0,0.45),
  0 0 30px rgba(56,189,248,0.18);
}
.project-badge{
  display:inline-block;
  padding:8px 14px;
  background:rgba(56,189,248,0.1);
  border:1px solid rgba(56,189,248,0.2);
  color:#38bdf8;
  border-radius:30px;
  font-size:13px;
  margin-top:15px;
}