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

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

    /* =========================
       TOP BAR
    ==========================*/
    .top-bar{
      background: linear-gradient(90deg,#0f172a,#1e293b);
      padding: 10px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .top-contact{
      color:#fff;
      text-decoration:none;
      font-size:18px;
      font-weight:700;
      transition:0.3s;
      letter-spacing:0.5px;
    }

    .top-contact i{
      color:#38bdf8;
      margin-right:8px;
    }

    .top-contact:hover{
      color:#38bdf8;
    }

    /* =========================
       NAVBAR
    ==========================*/
    .custom-navbar{
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.08);
      padding: 14px 0;
      position: sticky;
      top:0;
      z-index:999;
    }

    .navbar-brand{
      font-size:32px;
      font-weight:800;
      color:#0f172a !important;
      letter-spacing:1px;
    }

    .navbar-brand span{
      color:#0ea5e9;
    }

    .navbar-nav .nav-link{
      color:#0f172a;
      font-weight:600;
      margin-left:18px;
      position:relative;
      transition:0.3s;
      font-size:16px;
    }

    .navbar-nav .nav-link::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-5px;
      width:0%;
      height:3px;
      background:#0ea5e9;
      border-radius:10px;
      transition:0.3s;
    }

    .navbar-nav .nav-link:hover{
      color:#0ea5e9;
    }

    .navbar-nav .nav-link:hover::after{
      width:100%;
    }

    /* Mobile Toggle */
    .navbar-toggler{
      border:none;
      box-shadow:none !important;
    }

    .navbar-toggler i{
      color:#0f172a;
      font-size:28px;
    }

    /* =========================
       HERO PREVIEW SECTION
    ==========================*/
    .hero-section{
      min-height:85vh;
      background:
      linear-gradient(rgba(15,23,42,0.75),rgba(15,23,42,0.75)),
      url('/img/heroimgAMZ\ \(1\).jpg') center/cover no-repeat;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:#fff;
      padding:80px 20px;
    }

    .hero-content h1{
      font-size:65px;
      font-weight:800;
      margin-bottom:20px;
    }

    .hero-content h1 span{
      color:#38bdf8;
    }

    .hero-content p{
      max-width:700px;
      margin:auto;
      font-size:18px;
      line-height:1.8;
      opacity:0.9;
    }

    .hero-btn{
      display:inline-block;
      margin-top:30px;
      padding:14px 35px;
      background:#0ea5e9;
      color:#fff;
      border-radius:50px;
      text-decoration:none;
      font-weight:600;
      transition:0.3s;
      box-shadow:0 10px 25px rgba(14,165,233,0.35);
    }

    .hero-btn:hover{
      background:#fff;
      color:#0f172a;
      transform:translateY(-3px);
    }
    .section-title{
  font-size:42px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:15px;
}

.section-subtitle{
  max-width:700px;
  margin:auto;
  color:#64748b;
  font-size:17px;
  line-height:1.8;
}

/* =========================
   SERVICES SECTION
========================== */
.services-section{
  background:#f8fafc;
}

.service-card{
  background:#fff;
  border-radius:25px;
  padding:40px 30px;
  text-align:center;
  height:100%;
  transition:0.4s;
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.service-card::before{
  content:"";
  position:absolute;
  width:100%;
  height:0%;
  left:0;
  bottom:0;
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  transition:0.4s;
  z-index:0;
}

.service-card:hover::before{
  height:100%;
}

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

.service-card *{
  position:relative;
  z-index:1;
}

.service-icon{
  width:85px;
  height:85px;
  background:#e0f2fe;
  margin:auto;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:25px;
  transition:0.4s;
}

.service-icon i{
  font-size:36px;
  color:#0284c7;
}

.service-card h3{
  font-size:24px;
  font-weight:700;
  margin-bottom:15px;
  color:#0f172a;
  transition:0.4s;
}

.service-card p{
  color:#64748b;
  line-height:1.8;
  margin-bottom:25px;
  transition:0.4s;
}

.service-btn{
  display:inline-block;
  padding:12px 28px;
  background:#0f172a;
  color:#fff;
  text-decoration:none;
  border-radius:50px;
  font-weight:600;
  transition:0.4s;
}

.service-btn:hover{
  background:#fff;
  color:#0f172a;
}

.service-card:hover h3,
.service-card:hover p{
  color:#fff;
}

.service-card:hover .service-icon{
  background:#fff;
}

/* =========================
   ABOUT SECTION
========================== */
.about-section{
  background:#ffffff;
}

.about-image{
  position:relative;
}

.about-image img{
  border-radius:25px;
  width:100%;
  box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

.experience-box{
  position:absolute;
  bottom:30px;
  left:30px;
  background:#0f172a;
  color:#fff;
  padding:25px 35px;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

.experience-box h4{
  font-size:40px;
  font-weight:800;
  margin-bottom:5px;
}

.experience-box p{
  margin:0;
  font-size:15px;
}

.about-tag{
  display:inline-block;
  padding:10px 20px;
  background:#e0f2fe;
  color:#0284c7;
  border-radius:50px;
  font-weight:700;
  margin-bottom:20px;
  font-size:14px;
}

.about-content h2{
  font-size:46px;
  font-weight:800;
  color:#0f172a;
  line-height:1.3;
  margin-bottom:20px;
}

.about-content p{
  color:#64748b;
  line-height:1.9;
  margin-bottom:20px;
  font-size:16px;
}

.about-features{
  margin-top:30px;
}

.feature-item{
  display:flex;
  align-items:center;
  margin-bottom:18px;
}

.feature-item i{
  color:#0ea5e9;
  font-size:22px;
  margin-right:12px;
}

.feature-item span{
  font-weight:600;
  color:#0f172a;
}

.about-btn{
  display:inline-block;
  margin-top:25px;
  padding:14px 34px;
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  color:#fff;
  text-decoration:none;
  border-radius:50px;
  font-weight:600;
  transition:0.4s;
  box-shadow:0 10px 30px rgba(14,165,233,0.35);
}

.about-btn:hover{
  transform:translateY(-4px);
  color:#fff;
}
.contact-section{
  background:#f8fafc;
}

.contact-title{
  font-size:42px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:15px;
}

.contact-subtitle{
  max-width:700px;
  margin:auto;
  color:#64748b;
  line-height:1.8;
  font-size:17px;
}

.contact-info-box{
  background:#0f172a;
  padding:45px 35px;
  border-radius:25px;
  height:100%;
  box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

.contact-info-item{
  display:flex;
  align-items:flex-start;
  margin-bottom:35px;
}

.contact-info-item:last-child{
  margin-bottom:0;
}

.contact-icon{
  width:65px;
  height:65px;
  min-width:65px;
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:18px;
}

.contact-icon i{
  color:#fff;
  font-size:24px;
}

.contact-info-item h5{
  color:#fff;
  font-weight:700;
  margin-bottom:8px;
}

.contact-info-item a,
.contact-info-item p{
  color:#cbd5e1;
  text-decoration:none;
  margin:0;
  line-height:1.7;
}

/* Form */
.contact-form-box{
  background:#fff;
  padding:45px;
  border-radius:25px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

.custom-input{
  height:58px;
  border:none;
  background:#f1f5f9;
  border-radius:15px;
  padding:15px 20px;
  font-size:15px;
  box-shadow:none !important;
}

textarea.custom-input{
  height:auto;
  resize:none;
}

.custom-input:focus{
  background:#e2e8f0;
}

.contact-btn{
  border:none;
  padding:15px 35px;
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  color:#fff;
  border-radius:50px;
  font-weight:600;
  transition:0.4s;
  box-shadow:0 10px 30px rgba(14,165,233,0.35);
}

.contact-btn:hover{
  transform:translateY(-4px);
}

/* =========================
   FOOTER SECTION
========================== */
.footer-section{
  background:#020617;
  padding-top:80px;
  color:#fff;
}

.footer-logo{
  font-size:34px;
  font-weight:800;
  margin-bottom:20px;
}

.footer-logo span{
  color:#0ea5e9;
}

.footer-text{
  color:#94a3b8;
  line-height:1.9;
}

.footer-box h4{
  font-size:22px;
  font-weight:700;
  margin-bottom:25px;
}

.footer-links{
  list-style:none;
  padding:0;
}

.footer-links li{
  margin-bottom:15px;
}

.footer-links a{
  text-decoration:none;
  color:#94a3b8;
  transition:0.3s;
}

.footer-links a:hover{
  color:#0ea5e9;
  padding-left:5px;
}

.footer-contact{
  list-style:none;
  padding:0;
}

.footer-contact li{
  display:flex;
  align-items:center;
  margin-bottom:18px;
  color:#94a3b8;
}

.footer-contact i{
  color:#0ea5e9;
  margin-right:12px;
  font-size:18px;
}

.footer-contact a{
  color:#94a3b8;
  text-decoration:none;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);
  margin-top:60px;
  padding:25px 0;
  text-align:center;
}

.footer-bottom p{
  margin:0;
  color:#94a3b8;
}
    /* =========================
       RESPONSIVE
    ==========================*/
    @media (max-width:991px){

      .navbar-nav{
        text-align:center;
        padding-top:15px;
      }

      .navbar-nav .nav-link{
        margin:12px 0;
      }

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

    @media (max-width:768px){

      .top-contact{
        font-size:15px;
      }

      .navbar-brand{
        font-size:26px;
      }

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

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

    @media (max-width:576px){

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

      .hero-btn{
        padding:12px 28px;
        font-size:14px;
      }
    }
    @media (max-width:991px){

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

  .feature-item{
    justify-content:center;
  }

  .about-content h2{
    font-size:38px;
  }
}

@media (max-width:768px){

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

  .about-content h2{
    font-size:30px;
  }

  .experience-box{
    padding:18px 25px;
  }

  .experience-box h4{
    font-size:28px;
  }
}

@media (max-width:576px){

  .service-card{
    padding:35px 22px;
  }

  .about-content h2{
    font-size:26px;
  }

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

  .contact-info-box{
    margin-bottom:20px;
  }

  .footer-section{
    text-align:center;
  }

  .footer-contact li{
    justify-content:center;
  }
}

@media (max-width:768px){

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

  .contact-form-box{
    padding:35px 25px;
  }

  .contact-info-box{
    padding:35px 25px;
  }
}

@media (max-width:576px){

  .contact-title{
    font-size:28px;
  }

  .contact-subtitle{
    font-size:15px;
  }

  .footer-logo{
    font-size:28px;
  }

  .footer-box h4{
    font-size:20px;
  }

  .contact-btn{
    width:100%;
  }
}