:root{
  --bg:#fbfdff;
   --card:rgb(240,240,240); 
   --muted:#6b7280; 
   --primary:#00b4d8;
  --accent:#0096c7; 
  --dark:#0a1f44;
   --radius:12px; 
   --shadow: 0 8px 24px rgba(2,6,23,0.08);
  --container:98%; 
  --gap:18px; 
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;width:100%;margin:0px;padding:0px;position: absolute;left: 0px;top: 0px;flex-flow: row wrap;}
body::-webkit-scrollbar{
 width: 5px;
}
body::-webkit-scrollbar-thumb{
 background-color: grey;
}



/*body{margin:0;background:var(--bg);color:var(--dark);-webkit-font-smoothing:antialiased;line-height:1.5}*/
.page{min-width:98%;max-width:var(--container);margin:0 auto;padding:18px;}

/* Header (injected) */
.header{
        width:100%;
	display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:linear-gradient(90deg,var(--dark),#12314a);color:#fff;border-radius:0px;
 min-height: 80px;
}


.brand{display:flex;align-items:center;gap:10px}
.brand img{width:46px;height:46px;border-radius:8px}
.nav{display:flex;gap:14px}
.nav a{color:rgba(255,255,255,0.9);text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600}
.nav a:hover,.nav a.active{background:rgba(255,255,255,0.06);color:var(--primary)}


.menuIcon{display:none;background:none;border:0;color:#fff;font-size:22px}

/* HERO */
.hero{position:relative;display:grid;grid-template-columns:1fr;gap:12px;margin: 18px 0px;}
.hero.small{padding:40px 0}
.slider{position:relative;height:56vw;max-height:520px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);}
.slides{height:100%;display:block;position:relative;left:50%;top:50%; transform:translate(-50%,-50%);}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.slides img.active{opacity:1}
.slider-controls{position:absolute;right:14px;bottom:14px;display:flex;gap:8px}
.slider-controls button{background:rgba(0,0,0,0.45);border:0;color:#fff;padding:8px 10px;border-radius:8px;cursor:pointer}

/* HERO caption */
.hero-caption{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(3,7,18,0.6);color:#fff;padding:18px;border-radius:12px;max-width:760px;text-align:center}
.hero-caption h1{margin:0 0 8px;font-size:1.6rem}
.hero-caption p{margin:0 0 12px;color:var(--muted);color:rgb(240, 240, 240)}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{background:var(--primary);color:white;padding:10px 16px;border-radius:9px;text-decoration:none;font-weight:700}
.btn.secondary{background:var(--primary);border:2px solid rgba(20, 19, 19, 0.12)}

/* Cards grid */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:22px 0}
.card{
  background:var(--card);
  padding:18px;
  border-radius:12px;
  box-shadow:var(--shadow);
  text-align:center;
font-family: Arial, Helvetica, sans-serif;}
.card h3{margin-bottom:6px}

/* Content & grids */
.content{
  background:transparent;
  padding:30px 0;
  width:98%;
  min-height:98%;
  display:flex;
  flex-flow:row wrap;
  justify-content:flex-start;
  align-items:flex-start;
  padding:11px;
  box-sizing:border-box;
  gap:11px;
}

.content h2{
width:98%;
color:var(--dark);margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}

.grid{
 width:100%;
 display:flex;
 flex-flow:row wrap;
 justify-content:flex-start;
 align-items:flex-start;
}
.service-card, .value-card{
  background:var(--card);
  padding:14px;
  border-radius:12px;
  box-shadow:var(--shadow)
}
.service-card img{max-width:220px;height:160px;object-fit:contain;border-radius:8px;margin-bottom:10px}
.price{font-weight:800;color:var(--primary);margin-top:8px}

.service-card{
  max-width:320px;
  height:360px;
  text-decoration: none;
  color:grey;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 16px;
  padding: 14px;
  border-radius: 12px;
  margin:11px;
}


.service-card-photo{
 max-width:320px;
 height:160px;
 border-style:solid;
 border-radius:5px;
 border-width:0px;
 padding:0px;
}
.service-card-description{
  overflow-wrap: break-word;
  color:grey;
}


/* Forms */
.form{display:flex;flex-direction:column;gap:10px;max-width:720px}
.form input,.form select,.form textarea{padding:10px;border-radius:8px;border:1px solid #d1d5db;font-size:1rem}
.form .form-row{display:flex;gap:12px;align-items:center}
.form .form-row #form-status,#agenda-status{color:var(--primary);font-weight:600}

/* Calendar */
.calendar-wrap{max-width:520px;margin:12px 0}
.calendar-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.calendar-header button{background:var(--primary);color:#052028;border:0;padding:6px 10px;border-radius:8px;cursor:pointer}
.month-year{font-weight:700}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:var(--card);padding:12px;border-radius:10px;box-shadow:var(--shadow)}
.calendar .header{font-weight:700;color:var(--muted);text-align:center;padding:6px}
.calendar .day{padding:8px;text-align:center;border-radius:8px;cursor:pointer}
.calendar .day.disabled{color:#c7c7c7;cursor:not-allowed}
.calendar .day.today{background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;font-weight:700}
.calendar .day.selected{background:#052028;color:var(--primary);font-weight:700}

/* Timeline compact */
.timeline-compact{display:flex;flex-direction:column;gap:12px;padding:8px}
.t-item{background:var(--card);padding:12px;border-radius:10px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center}
.t-item strong{color:var(--primary);width:80px}

/* Popup */
.popup{position:fixed;bottom:-200px;right:20px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border-radius:15px;padding:15px 18px;box-shadow:0 8px 20px rgba(0,0,0,0.25);transition:all 0.5s ease;opacity:0;transform:translateY(20px);width:300px;z-index:99999;font-family:inherit}
.popup.show{bottom:30px;opacity:1;transform:translateY(0)}
.popup-content h3{margin:0 0 6px}
.popup-btn{display:inline-block;margin-top:8px;background:#fff;color:var(--accent);font-weight:600;text-decoration:none;padding:6px 10px;border-radius:8px}
.popup-btn:hover{background:#e6f9ff}

/* Footer (injected) */
.footer{margin-top:22px;padding:18px;border-radius:0px;background:linear-gradient(90deg,#0a1f44,#12314a);color:#fff;text-align:center}

/* Utilities */
.center{text-align:center}
.sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
@media (max-width:600px){
  .header{flex-direction:column;gap:12px;background-color: red;}
  .nav{display:none}
  .menuIcon{display:inline-block}
  .page{padding:2px}
  .hero-caption h1{font-size:1.2rem}
  .calendar{font-size:0.9rem}
}

/* Focus states */
a.btn:focus, button:focus, input:focus, textarea:focus { outline:3px solid rgba(0,180,216,0.18); outline-offset:2px }

.page{
 padding:0px;
}

/* Responsive */
@media (max-width:900px){
  .hero{
    min-height:80vw;
  }
  .hero-caption{
    left:50%;
    width:100%;
    height:100%;
    padding:0px;
    opacity:0.9;
    box-sizing:border-box;
    overflow-y:hidden;
    padding-bottom:3px;
  }
  .slider{min-height:80vw;}

  #heroCaptionTitle{
   color:transparent;
   padding:3px;
  }
  #heroCaptionDescription{
    color:transparent;
    padding:3px;
  }

  .page{
   padding:2px;
  }

  .grid{
    justify-content:center;
  }
}