:root{

    --primary:#0a5f78;
      --secondary:#0c2f4a;
      --accent:#11b6c9;
      --light:#f4f7f9;
      --white:#ffffff;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
html{scroll-behavior:smooth;width: 100%;
  overflow-x: hidden;}

body {
  width: 100%;
  overflow-x: hidden;
  background:var(--light);color:#1e293b
}

/* NAV */
header{
  position:fixed;
  width:100%;
  top:0;
  background:rgba(8,51,68,.9);
  backdrop-filter:blur(14px);
  z-index:1000;
}
/* ===== DETAILS UI ENHANCEMENT ===== */

.detail-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:26px;
  position:relative;
}

.detail-header::after{
  content:'';
  width:60px;
  height:4px;
  border-radius:10px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  margin-top:16px;
}

.detail-avatar{
  width:90px;
  height:90px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:2.2rem;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
  margin-bottom:14px;
}

.detail-header h4{
  font-size:1.3rem;
  color:var(--secondary);
  margin:0;
}

.detail-body{
  animation:detailFade .6s ease;
}

@keyframes detailFade{
  from{opacity:0;transform:translateY(15px)}
  to{opacity:1;transform:none}
}

.detail-body p{
  font-size:1rem;
  line-height:1.75;
  color:#334155;
  margin-bottom:28px;
  text-align:center;
  padding:0 10px;
}

/* MODAL WHATSAPP BUTTON */
.modal-whatsapp{
  margin-top:26px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:40px;
  background:#25D366;
  color:#fff;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 20px 40px rgba(37,211,102,.45);
  transition:.3s;
}
.modal-whatsapp i{
  font-size:1.4rem;
}
.modal-whatsapp:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 25px 50px rgba(37,211,102,.55);
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 8%;
}
.logo{color:#fff;font-weight:700}
.nav ul{display:flex;gap:30px;list-style:none}
.nav a{color:#fff;text-decoration:none;position:relative}
.nav a::after{
  content:'';
  position:absolute;
  left:0;bottom:-6px;
  width:0;height:2px;
  background:var(--accent);
  transition:.3s;
}
.nav a:hover::after{width:100%}
.menu-btn{display:none;color:#fff;font-size:1.6rem}

/* HERO */
.hero{
  height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  overflow:hidden;
}
#webgl,#particles-js,.grid-overlay{
  position:absolute;
  inset:0;
}
.grid-overlay{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero-content{
  position:relative;
  z-index:5;
  text-align:center;
  max-width:850px;
}
.hero h1{font-size:3.8rem;line-height:1.05}
.hero h1 span{color:var(--accent);font-weight:300}
.hero p{margin:20px 0;font-size:1.1rem}

.hero-actions .btn{
  padding:14px 30px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  margin:0 10px;
}
.btn.primary{background:var(--accent);color:#083344}
.btn.ghost{border:2px solid var(--accent);color:#fff}
/* GOOGLE MAP */
.map-box{
  margin:40px auto 60px;
  max-width:1000px;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.25);
}
.map-box iframe{
  width:100%;
  height:420px;
  border:0;
}

/* SECTIONS */
section{padding:110px 8%}
.alt-bg{background:#eef6f8}
.section-title{text-align:center;margin-bottom:60px}
.section-title h2{font-size:2.4rem;color:var(--secondary)}
.section-title span{opacity:.7}

/* DIAGONAL */
.diagonal::before{
  content:'';
  position:absolute;
  top:-80px;
  left:0;
  width:100%;
  height:80px;
  background:inherit;
  transform:skewY(-3deg);
}
/* SECURE MODAL */
.secure-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:5000;
}

.secure-box{
  background:linear-gradient(135deg,#ffffff,#f1f5f9);
  width:90%;
  max-width:480px;
  padding:40px;
  border-radius:30px;
  box-shadow:0 40px 80px rgba(0,0,0,.45);
  text-align:center;
  animation:securePop .6s ease;
}

@keyframes securePop{
  from{transform:scale(.85);opacity:0}
  to{transform:scale(1);opacity:1}
}

.secure-box .secure-close{
  position:absolute;
  top:20px;
  right:24px;
  font-size:1.8rem;
  cursor:pointer;
  color:#64748b;
}

.secure-sub{
  opacity:.75;
  margin-bottom:20px;
}

#securePassword{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:1px solid #cbd5e1;
  margin-bottom:18px;
  font-size:1rem;
}

.secure-btn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:16px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:.3s;
}
.secure-btn:hover{transform:scale(1.03)}

#secureError{
  color:#dc2626;
  margin-top:10px;
  font-size:.9rem;
}

/* DETAILS */
#detailsStep h4{
  color:var(--secondary);
  margin-bottom:12px;
}
#detailsStep p{
  line-height:1.7;
  opacity:.9;
}

/* SERVICES */
.services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:32px;
}
.service-card{
  position:relative;
  padding:44px 30px;
  border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
  backdrop-filter:blur(18px);
  box-shadow:0 30px 60px rgba(0,0,0,.25);
  transition:.4s;
}
.service-card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:24px;
  background:linear-gradient(120deg,transparent,rgba(94,234,212,.45),transparent);
  opacity:0;
  transition:.4s;
}
.service-card:hover::after{opacity:1}
.service-card:hover{transform:translateY(-12px) scale(1.03)}
.service-icon{
  width:62px;height:62px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.6rem;
  margin-bottom:22px;
}

/* GALLERY */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.gallery img{
  width:100%;
  border-radius:20px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  transition:.4s;
}
.gallery img:hover{transform:scale(1.06)}

/* TEAM */
.team{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
  text-align:center;
}
.team-card{
  background:#fff;
  padding:36px;
  border-radius:22px;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}

/* CONTACT */
form{
  max-width:620px;
  margin:auto;
  display:grid;
  gap:16px;
}
input,textarea{
  padding:16px;
  border-radius:14px;
  border:1px solid #cbd5e1;
}
button{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  border:none;
  padding:16px;
  border-radius:14px;
  cursor:pointer;
}

/* FOOTER */
footer{
  background:var(--secondary);
  color:#fff;
  text-align:center;
  padding:24px;
}
/* HERO SLIDER */
.hero-slider{
  position:absolute;
  inset:0;
  z-index:0;
}
.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1.5s ease;
}
.slide::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(8,51,68,.85),rgba(11,114,133,.85));
}
.slide.active{opacity:1}



/* VIEW DETAILS BUTTON */
.view-btn{
  margin-top:14px;
  padding:10px 22px;
  border:none;
  border-radius:30px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  font-size:.85rem;
  cursor:pointer;
  transition:.3s;
}
.view-btn:hover{
  transform:scale(1.05);
}

/* MODAL */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:4000;
}
.modal-box{
  background:#fff;
  max-width:520px;
  width:90%;
  padding:40px;
  border-radius:26px;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
  animation:modalIn .5s ease;
}
@keyframes modalIn{
  from{transform:scale(.8);opacity:0}
  to{transform:scale(1);opacity:1}
}
.modal-box h3{
  color:var(--secondary);
  margin-bottom:12px;
}
.modal-box p{
  line-height:1.7;
}
.close{
  position:absolute;
  right:28px;
  top:20px;
  font-size:1.8rem;
  cursor:pointer;
  color:#64748b;
}


/* TEAM */
.team{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:35px;
}
.team-card{
  background:#fff;
  border-radius:24px;
  box-shadow:0 25px 50px rgba(0,0,0,.18);
  padding:35px;
  text-align:center;
  transition:.4s;
}
.team-card:hover{transform:translateY(-10px)}
.team-card img{
  width:110px;
  height:110px;
  object-fit:cover;
  border-radius:50%;
  margin-bottom:15px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}
.team-card h4{margin-bottom:6px}
.team-card p{opacity:.7;font-size:.95rem}

/* WHATSAPP */
.whatsapp{
  position:fixed;
  bottom:25px;
  right:25px;
  background:#25D366;
  color:#fff;
  padding:16px;
  border-radius:50%;
  box-shadow:0 20px 45px rgba(0,0,0,.35);
}
/* LOADER */
#loader{
  position:fixed;
  inset:0;
  background:linear-gradient(135deg,#0b7285,#083344);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  z-index:3000;
  transition:.6s;
}
.spinner{
  width:70px;height:70px;
  border:6px solid rgba(255,255,255,.25);
  border-top:6px solid #5eead4;
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin-bottom:20px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* PROFILE EXTENSION */
.profile-card{
  max-width:900px;
  margin:40px auto;
  background:#fff;
  padding:40px;
  border-radius:26px;
  box-shadow:0 30px 60px rgba(0,0,0,.18);
}
.profile-card h3{
  margin-bottom:14px;
  color:var(--secondary);
}
.profile-card i{
  color:var(--accent);
  margin-right:8px;
}
.profile-card ul{
  padding-left:20px;
}
.angled{background:linear-gradient(135deg,#e9f1f4 58%,#ffffff 58%)}

    /* SERVICES */
    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
    .service{
      background:#fff;
      border-radius:14px;
      padding:34px 26px 34px 70px;
      position:relative;
      box-shadow:0 18px 35px rgba(0,0,0,.1);
    }
    .service i{
      position:absolute;
      left:22px;top:32px;
      font-size:28px;
      color:var(--accent);
    }
/* MOBILE */
@media(max-width:768px){
  .nav ul{
    position:absolute;
    top:70px;
    right:0;
    background:var(--secondary);
    flex-direction:column;
    width:220px;
    display:none;
    padding:25px;
  }
  .ghost{display: none;}
  .nav ul.show{display:flex}
  .menu-btn{display:block}
  .hero h1{font-size:2.4rem}
}