/* Basic reset and variables */
:root{
  /* Minimal & Elegant palette: white background, very light gray surfaces, deep teal primary and bright teal accent */
  --bg:#FFFFFF; /* white */
  --surface:#F4F6F8; /* very light gray surface */
  --brand:#0B7285; /* deep teal primary */
  --brand-rgb:11,114,133;
  --accent:#0ABAB5; /* bright teal accent */
  --accent-rgb:10,186,181;
  --text:#0B1720; /* almost-black text */
  --muted:#6B7280; /* neutral gray */
  --header-height:72px; /* used for scroll-padding/scroll-margin to avoid overlap */
  --max-width:1100px;
  --radius:10px;
  --container-padding:20px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
} 
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text)}
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--container-padding)}
.site-header{background:linear-gradient(90deg, rgba(var(--brand-rgb),0.06), rgba(var(--brand-rgb),0.02));position:sticky;top:0;z-index:50;border-bottom:1px solid #eee}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-weight:700;color:var(--brand);text-decoration:none;font-size:1.05rem}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;padding:8px;border-radius:8px}
.nav a:hover{color:var(--brand)}
#nav-toggle{display:none;background:none;border:0;font-size:1.3rem}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;text-decoration:none;border:1px solid rgba(11,20,30,0.06);background:#ffffff;color:var(--text);cursor:pointer;box-shadow:0 6px 18px rgba(11,20,30,0.04)}
.btn.small{padding:6px 10px}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--accent));color:#fff;border-color:transparent;box-shadow:0 10px 30px rgba(11,20,30,0.06)}
.btn.primary:hover{filter:brightness(1.02);transform:translateY(-3px)}
.lead{font-size:1.05rem;color:var(--muted)}

/* Hero */
.hero{padding:40px 0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center}
.hero-copy h1{font-size:2rem;margin:0 0 10px}
.hero-image img{width:100%;height:auto;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,0.08)}

/* Visual polish & animations */
html{scroll-behavior:smooth}
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
.logo{background:linear-gradient(90deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Prevent sticky header from covering anchored sections */
html{scroll-padding-top:var(--header-height)}
.section, h2{scroll-margin-top:calc(var(--header-height) + 12px)}

/* Floating hero image */
.hero-image img{animation:float 6s ease-in-out infinite;transform-origin:center}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}

/* Buttons */
.btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(var(--brand-rgb),0.08)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--accent))}

/* Reveal animation utility (used with JS observer) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.9,.2,1),transform .6s cubic-bezier(.2,.9,.2,1)}
.reveal.in-view{opacity:1;transform:none}

/* Stagger helper for children inside grids */
.packages .package{will-change:transform,opacity}
.packages .package.reveal{transition-delay:0s}
.packages .package.reveal.in-view{transition-delay:0s}

/* Subtle card hover accent */
.service:hover, .package:hover{box-shadow:0 18px 40px rgba(var(--brand-rgb),0.06)}

/* Share message (floating feedback) */
#shareMsg{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;background:linear-gradient(90deg,var(--brand),var(--accent));color:#fff;padding:10px 14px;border-radius:8px;display:none;z-index:9999;font-size:14px;box-shadow:0 10px 30px rgba(var(--brand-rgb),0.12);opacity:0;transition:opacity .22s ease}

/* Heading underline animation when reveal observed */
h2{position:relative;padding-bottom:12px}
h2::after{content:'';position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--accent);border-radius:4px;transition:width .42s cubic-bezier(.2,.9,.2,1)}
h2.reveal.in-view::after{width:56px}

/* About section styles */
.about-hero{background:linear-gradient(180deg,rgba(var(--brand-rgb),0.03),transparent);padding:28px;border-radius:12px}
.about-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center}
.about-content h2{margin-top:0}
.about-content p.lead{font-size:1.03rem;color:var(--muted)}
.about-image img{width:100%;border-radius:12px;box-shadow:0 10px 28px rgba(11,20,30,0.04);border:6px solid rgba(11,20,30,0.03);background:#fff} 
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.stat{background:linear-gradient(180deg,#ffffff,var(--surface));padding:14px;border-radius:10px;box-shadow:0 10px 30px rgba(11,37,69,0.06);text-align:center}
.stat .num{font-weight:800;color:var(--brand);font-size:1.2rem}
.stat .label{color:var(--muted);font-size:0.85rem} 

@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .about-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .about-stats{grid-template-columns:1fr}
}


/* Make hero more attractive */
.hero{background:linear-gradient(180deg,rgba(var(--brand-rgb),0.03),transparent);border-radius:14px;padding:48px 0}
.hero-copy .lead{font-size:1.08rem;color:var(--muted);margin-bottom:10px}

/* Hero text entrance animations */
.hero-copy h1{opacity:0;transform:translateY(18px);animation:heroTextIn .7s forwards .12s;letter-spacing:0.2px}
.hero-copy .lead{opacity:0;transform:translateY(12px);animation:heroTextIn .7s forwards .28s}
.hero-copy .btn.primary{opacity:0;transform:translateY(8px);animation:heroTextIn .6s forwards .44s}
@keyframes heroTextIn{to{opacity:1;transform:none}}

/* Packages */
.packages{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.package{background:linear-gradient(180deg,#ffffff,var(--surface));padding:18px;border-radius:14px;border:1px solid rgba(11,20,30,0.04);box-shadow:0 10px 30px rgba(11,20,30,0.04);transition:transform .22s ease,box-shadow .22s ease}
.package:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(11,20,30,0.06)}
.package h3{margin:0 0 6px}
.package .price{color:var(--brand);font-weight:800;font-size:1.05rem}
.package .meta{color:var(--muted);font-size:0.95rem;margin-top:8px}
.package .actions{display:flex;gap:8px;margin-top:12px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,rgba(var(--accent-rgb),0.08),rgba(var(--accent-rgb),0.04));color:var(--brand);font-weight:700} 

@media (max-width:900px){
  .packages{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .packages{grid-template-columns:1fr}
}

.section{padding:48px 0}
.section.alt{background:var(--surface)}
.cards{display:flex;gap:18px;list-style:none;padding:0;margin:18px 0 0}
.cards li{background:linear-gradient(180deg,#ffffff,var(--surface));padding:18px;border-radius:12px;box-shadow:0 8px 24px rgba(11,20,30,0.04);flex:1}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service{background:linear-gradient(180deg,#ffffff,var(--surface));padding:18px;border-radius:12px;box-shadow:0 8px 24px rgba(11,20,30,0.04)}
.list{columns:2;gap:20px}

.contact-form{max-width:640px;display:grid;gap:12px}
.contact-form label{display:flex;flex-direction:column;font-size:0.95rem}
.contact-form input,.contact-form textarea{padding:10px;border-radius:8px;border:1px solid rgba(11,20,30,0.06);background:#ffffff;color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;box-shadow:0 6px 20px rgba(var(--brand-rgb),0.06);border-color:rgba(var(--brand-rgb),0.18)}
/* Make inputs and selects full width and consistent */
.contact-form input,.contact-form textarea,.contact-form select{width:100%;box-sizing:border-box}

/* Style select (dropdown) with custom arrow */
.contact-form select{
  padding:10px 40px 10px 12px; /* left padding and room on right for arrow */
  height:44px;
  line-height:20px;
  background:linear-gradient(180deg,#ffffff,var(--surface));
  border:1px solid rgba(11,20,30,0.06);
  border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230B7285' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
}  

/* Focus state */
.contact-form select:focus{outline:none;box-shadow:0 6px 20px rgba(var(--brand-rgb),0.08);border-color:rgba(var(--brand-rgb),0.22);position:relative;z-index:9999}

/* On smaller screens make selects slightly taller for easy tapping */
@media (max-width:420px){
  .contact-form select{height:48px;padding-left:14px;padding-right:44px}
}
.form-msg{margin-top:8px;color:var(--brand)}

.site-footer{border-top:1px solid rgba(11,20,30,0.04);padding:18px 0;margin-top:20px}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* Responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr}
  .cards{flex-direction:column}
}
@media (max-width:700px){
  #nav-toggle{display:inline-block}
  .nav{position:fixed;right:12px;top:58px;background:#ffffff;padding:10px;border-radius:10px;box-shadow:0 12px 40px rgba(11,37,69,0.08);flex-direction:column;display:none;color:var(--text)}
  .nav.show{display:flex}
}  

/* Small niceties */
a{color:inherit}
h2{margin-top:0}