* {margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
body {background-color:#f4f4f4;color:#333;overflow-x:hidden;scroll-behavior:smooth;}

/* HEADER */
header {
  background-color:rgba(10,15,30,0.75);
  backdrop-filter:blur(6px);
  color:white;
  padding:12px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:fixed;
  width:100%;
  top:0;left:0;z-index:100;
  box-shadow:0 2px 10px rgba(0,0,0,0.4);
}

.logo img {
  height:90px;width:auto;
  filter:drop-shadow(0 0 5px white);
}

nav a {
  color:white;
  text-decoration:none;
  margin-left:25px;
  font-weight:500;
  transition:0.3s;
}
nav a:hover {color:#f4b400;}

.menu-toggle {
  display:none;
  cursor:pointer;
  font-size:1.8rem;
  color:white;
}

/* HERO */
.hero {
  position:relative;height:100vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:white;overflow:hidden;
}
.hero video {
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.hero::after {
  content:'';position:absolute;top:0;left:0;width:100%;height:100%;
  background-color:rgba(10,31,68,0.6);z-index:1;
}
.hero-content {
  position:relative;z-index:2;max-width:800px;
  animation:fadeIn 1.5s ease-in-out;padding:0 20px;
}
.hero-content h2 {font-size:2.5rem;margin-bottom:20px;}
.hero-content p {font-size:1.1rem;margin-bottom:25px;}
.hero-content a {
  background-color:#f4b400;color:#0a1f44;padding:12px 30px;
  border-radius:30px;font-weight:600;text-decoration:none;transition:0.3s;
}
.hero-content a:hover {background-color:#fff;color:#0a1f44;}
@keyframes fadeIn {from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

/* SECTIONS */
section {padding:80px 40px;text-align:center;background:white;}
section:nth-child(even){background:#f9f9f9;}
section h3 {font-size:2rem;color:#0a1f44;margin-bottom:40px;}

/* SERVICES */
.services-container {
  max-width:1000px;margin:0 auto;text-align:left;
}
.service-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:25px;
}
.service-item {
  background:white;
  border-radius:10px;
  padding:20px;
  box-shadow:0 3px 10px rgba(0,0,0,0.1);
  transition:0.3s;
}

.service-item p {
  display: none;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: 10px;
}
.service-item.active p {
  display: block;
}

.service-item:hover {transform:translateY(-5px);box-shadow:0 6px 20px rgba(0,0,0,0.15);}
.service-item i {
  color:#f4b400;font-size:1.4rem;margin-right:10px;
}
.service-item h4 {color:#0a1f44;margin-bottom:10px;}
.add-ons {margin-top:50px;}

/* ABOUT */
#about p {
  max-width:800px;margin:0 auto;font-size:1.05rem;line-height:1.8;color:#444;
}

/* CONTACT FORM */
#contact form {
  max-width:600px;margin:30px auto;text-align:left;
}
#contact input,#contact textarea {
  width:100%;padding:10px;margin:8px 0;border:1px solid #ccc;border-radius:8px;
}
#contact button {
  background-color:#f4b400;color:#0a1f44;padding:12px 25px;border:none;
  border-radius:25px;font-weight:600;cursor:pointer;transition:0.3s;
}
#contact button:hover {background-color:#fff;border:1px solid #0a1f44;}


/* CONTACT FORM BUTTON CENTER */
.btn-center {
  text-align: center;
}

/* Remove social icons styling */
.social-links {
  display: none;
} 

/* FOOTER */
footer {
  background-color:#0a1f44;color:white;text-align:center;padding:40px 20px;
}
.social-links {
  display:flex;justify-content:center;gap:25px;margin-bottom:15px;
}
.social-links a {color:#f4b400;font-size:1.4rem;transition:0.3s;}
.social-links a:hover {color:white;}
.contact-info {font-size:0.9rem;color:#ddd;}

/* FLOATING BUTTONS */
.contact-btn {
  position:fixed;bottom:30px;right:30px;background-color:#f4b400;color:#0a1f44;
  padding:15px 25px;border-radius:30px;text-decoration:none;font-weight:600;
  box-shadow:0 4px 10px rgba(0,0,0,0.2);transition:all 0.3s;
}
.contact-btn:hover {background-color:#fff;transform:scale(1.05);}
.whatsapp-btn {
  position:fixed;bottom:25px;right:25px;background-color:#25D366;color:white;
  font-size:28px;border-radius:50%;padding:15px 17px;
  box-shadow:0 4px 10px rgba(0,0,0,0.3);z-index:200;transition:transform 0.3s;
}
.whatsapp-btn:hover {transform:scale(1.1);}

/* ===================
   Popup Message Style
   =================== */
.popup-message {
  animation: fadeInUp 0.4s ease-out;
}

/* POPUP MESSAGE FIX */
.popup-message {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(76, 175, 80, 0.95);
  color: #fff;
  padding: 14px 25px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-size: 16px;
  font-weight: 500;
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s ease;
}

.popup-message.show {
  opacity: 1;
  top: 50px;
}


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



/* RESPONSIVE MENU */
@media (max-width:768px){
  header {flex-wrap:wrap;justify-content:space-between;padding:12px 25px;}
  .menu-toggle {display:block;}
  nav.nav-links {
    display:none;
    flex-direction:column;
    background-color:rgba(10,15,30,0.9);
    position:absolute;top:100%;left:0;width:100%;
    padding:20px 0;text-align:center;
  }
  nav.nav-links.active {display:flex;}
  nav a {margin:10px 0;font-size:1.1rem;}
  .hero-content h2 {font-size:1.8rem;}
  section {padding:60px 20px;}
}