*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins', sans-serif;
}

body{
  background:#0b1220;
  color:#fff;
  overflow-x:hidden;
}

.navbar{
  background:rgba(11, 18, 32, 0.8);
  backdrop-filter:blur(10px);
}

.navbar-brand-box {
  width: 45px;
  height: 45px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.navbar-brand-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.about-logo-box {
  background-color: #fff;
  border-radius: 20px;
  padding: 30px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  animation: float 4s ease-in-out infinite;
}

.about-logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hero{
  min-height:100vh;
  padding: 120px 0 60px;
  display:flex;
  align-items:center;
  position:relative;
  background:
  linear-gradient(rgba(5,10,25,0.85), rgba(5,10,25,0.9)),
  url('https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1600&auto=format&fit=crop') center/cover;
}

.hero h1{
  font-size:3.6rem;
  font-weight:700;
  line-height:1.2;
}

.hero h1 span{
  color:#00bfff;
}

.hero p{
  font-size:1.1rem;
  color:#d1d5db;
  margin-top:20px;
  line-height:1.8;
}

.btn-main{
  display:inline-block;
  text-decoration:none;
  background:#00bfff;
  color:#fff;
  padding:14px 35px;
  border:none;
  border-radius:50px;
  font-weight:600;
  margin-top:25px;
  transition:0.3s;
}

.btn-main:hover{
  color:#fff;
  text-decoration:none;
  background:#0099cc;
  transform:translateY(-3px);
}

.service-card{
  background:#121b2f;
  border-radius:20px;
  padding:35px 25px;
  transition:0.4s;
  height:100%;
  border:1px solid rgba(255,255,255,0.05);
}

.service-card:hover{
  transform:translateY(-10px);
  background:#18233d;
}

.service-card i{
  font-size:45px;
  color:#00bfff;
  margin-bottom:20px;
}

.section-title{
  text-align:center;
  margin-bottom:60px;
}

.section-title h2{
  font-size:2.5rem;
  font-weight:700;
}

.section-title p{
  color:#cbd5e1;
}

.about{
  background:#101827;
}

.footer{
  background:#050b16;
  padding:25px 0;
  text-align:center;
  color:#cbd5e1;
}

.stats{
  background:#0f172a;
  padding:60px 0;
}

.stat-box{
  text-align:center;
  padding:20px;
}

.stat-box h2{
  font-size:3rem;
  color:#00bfff;
  font-weight:700;
}

.stat-box p{
  color:#d1d5db;
}

@media(max-width:991px){
  .hero {
    min-height: auto;
    padding: 140px 0 80px;
  }
  .hero h1 {
    font-size: 2.7rem;
  }
}

@media(max-width:768px){
  .hero{
    text-align:center;
    padding: 120px 0 60px;
  }

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

  .floating-img {
    max-width: 80%;
    margin: 0 auto;
  }
}

.floating-img {
  animation: float 4s ease-in-out infinite;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

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