:root{
--navy:#2f4858;
--tan:#d8c3a5;
--light:#f8f8f6;
--accent:#6b8cae;
--text:#333;
}
*{box-sizing:border-box}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:var(--light);color:var(--text);line-height:1.7}
header{background:white;position:sticky;top:0;box-shadow:0 2px 10px rgba(0,0,0,.08);padding:15px 5%}
nav a{text-decoration:none;color:var(--navy);margin:0 10px;font-weight:600}
.hero{background:linear-gradient(135deg,#2f4858,#6b8cae);color:white;padding:90px 20px;text-align:center}
.hero h1{font-size:3rem;margin:0}
.container{max-width:1200px;margin:auto;padding:40px 20px}
.card{background:white;border-radius:14px;padding:25px;margin:20px 0;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.btn{display:inline-block;background:#2f4858;color:white;padding:12px 22px;border-radius:8px;text-decoration:none;font-weight:700}
footer{background:#2f4858;color:white;text-align:center;padding:30px;margin-top:50px}
.package{border:1px solid #ddd;padding:20px;border-radius:12px;background:white}
.package h3{margin-top:0}
table{width:100%;border-collapse:collapse}
td,th{border:1px solid #ddd;padding:10px}


.card,.package{
    transition:all .3s ease;
    cursor:pointer;
}
.card:hover,.package:hover{
    transform:translateY(-8px);
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}
.btn{
    transition:all .3s ease;
}
.btn:hover{
    transform:scale(1.05);
}
.hero h1{
    animation:fadeIn 1.2s ease;
}
@keyframes fadeIn{
    from{opacity:0;transform:translateY(20px);}
    to{opacity:1;transform:translateY(0);}
}

header{
position:sticky;
top:0;
z-index:1000;
background:white;
}
footer{
text-align:center;
padding:40px 20px;
}


/* MOBILE-ONLY ZOOM EFFECT */
@media (max-width:768px){

    body{
        font-size:18px;
    }

    .container{
        padding:30px 20px;
    }

    .hero{
        min-height:75vh;
        padding:40px 20px;
    }

    .hero h1{
        font-size:4rem !important;
        line-height:1;
        margin-bottom:20px;
    }

    .hero p{
        font-size:1.4rem !important;
        max-width:95%;
    }

    .card{
        padding:30px 25px;
        margin:25px 0;
    }

    h1{font-size:2.5rem;}
    h2{font-size:2rem;}
    h3{font-size:1.5rem;}

    p, li{
        font-size:1.1rem;
        line-height:1.8;
    }

    .btn{
        font-size:1.1rem;
        padding:16px 24px;
    }
}


/* FORCE MOBILE MENU */
.hamburger-menu{display:none;}

@media screen and (max-width:768px){
  .hamburger-menu{
    display:block !important;
    font-size:32px;
    padding:12px;
    text-align:right;
    cursor:pointer;
  }

  nav a{display:none !important;}

  nav.open a{
    display:block !important;
    width:100%;
    text-align:center;
    padding:12px 0;
  }

  .grid{
    display:block !important;
  }

  .grid > *{
    width:100% !important;
    margin-bottom:16px !important;
  }
}

@media only screen and (max-width:768px){
  header nav{
    display:block !important;
  }

  .hamburger-menu{
    display:block !important;
    font-size:34px !important;
    text-align:right !important;
    padding:10px !important;
  }

  nav a{
    display:none !important;
  }

  nav.open a{
    display:block !important;
    padding:14px 0 !important;
    text-align:center !important;
    font-size:18px !important;
  }

  .hero{
    padding:80px 20px !important;
  }

  .hero h1{
    font-size:56px !important;
    line-height:1.05 !important;
  }

  .hero p{
    font-size:22px !important;
  }

  .grid,
  [class*="grid"]{
    display:block !important;
  }

  .card{
    width:100% !important;
    max-width:none !important;
    margin-bottom:20px !important;
  }
}


/* MOBILE ONLY FIXES - DESKTOP UNCHANGED */
@media screen and (max-width:768px){

  .hamburger-menu{
    display:block !important;
    font-size:36px !important;
    cursor:pointer;
    text-align:right;
    padding:10px;
  }

  nav a{
    display:none !important;
  }

  nav.open a{
    display:block !important;
    width:100%;
    text-align:center;
    padding:12px 0;
  }

  .grid{
    display:flex !important;
    flex-direction:column !important;
  }

  .grid > *{
    width:100% !important;
  }

  .hero h1{
    font-size:3.5rem !important;
  }

  .hero p{
    font-size:1.25rem !important;
  }
}


/* MOBILE POLISH */
@media (max-width:768px){

  header{
    padding:8px 16px !important;
  }

  .hamburger-menu{
    font-size:30px !important;
    transition:transform .25s ease;
  }

  .hamburger-menu:hover{
    transform:scale(1.1);
  }

  nav{
    transition:all .3s ease;
  }

  nav a{
    transition:all .25s ease;
  }

  nav.open a{
    animation:slideDown .25s ease forwards;
  }

  .hero{
    padding:40px 20px 50px 20px !important;
  }

  .hero h1{
    font-size:3.2rem !important;
    margin-bottom:10px !important;
  }

  .hero p{
    line-height:1.7 !important;
  }

  .btn{
    transition:all .25s ease;
  }

  .btn:hover,
  .btn:active{
    transform:scale(1.05);
  }

  .card{
    transition:transform .25s ease, box-shadow .25s ease;
  }

  .card:hover,
  .card:active{
    transform:translateY(-4px);
  }
}

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


/* SIMPLE MOBILE HEADER */
@media (max-width:768px){
  header{
    background:#eef1f4 !important;
    padding:8px 16px !important;
    min-height:auto !important;
  }

  .mobile-title{
    display:block !important;
    position:absolute;
    left:16px;
    top:14px;
    font-weight:700;
    color:#2f4858;
    font-size:14px;
  }

  .hamburger-menu{
    position:relative;
    z-index:10;
  }
}

.mobile-title{display:none;}


/* MOBILE REDESIGN */
@media (max-width:768px){

header{
  background:rgba(255,255,255,.95)!important;
  backdrop-filter:blur(8px);
  padding:10px 16px!important;
  border-bottom:1px solid #e5e7eb;
}

.mobile-title{
  font-size:13px!important;
  letter-spacing:.08em;
  color:#2f4858!important;
}

.hero{
  min-height:85vh!important;
  padding:30px 24px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}

.hero h1{
  font-size:3.2rem!important;
  line-height:1.05!important;
  margin-bottom:18px!important;
}

.hero p{
  max-width:280px!important;
  margin:0 auto 24px auto!important;
  line-height:1.8!important;
}

.btn{
  border-radius:12px!important;
  padding:14px 28px!important;
}

.card{
  border-radius:18px!important;
}

.container{
  margin-top:-30px!important;
}
}

/* TRANSPARENT MOBILE HEADER */
@media (max-width:768px){

header{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  position:absolute !important;
  width:100%;
  top:0;
  left:0;
  z-index:1000;
}

.mobile-title{
  color:white !important;
  font-weight:700;
}

.hamburger-menu{
  color:white !important;
}

.hero{
  padding-top:90px !important;
}
}

@media (max-width:768px){

header{
  background:rgba(20,35,50,.18) !important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.15);
  box-shadow:0 4px 20px rgba(0,0,0,.15);
}

nav.open{
  background:rgba(20,35,50,.65) !important;
  backdrop-filter:blur(12px);
  border-radius:12px;
  padding-bottom:12px;
  margin-top:4px;
}

nav.open a{
  color:#ffffff !important;
  font-weight:600;
}

nav.open a:hover{
  color:#ffffff !important;
}

.hamburger-menu{
  color:#ffffff !important;
}

.mobile-title{
  color:#ffffff !important;
}
}


/* FULL SCREEN MOBILE HERO */
@media (max-width:768px){
  .hero{
    min-height:115vh !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
  }
}


/* Homepage transparent header */
.home-page header{
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
}

/* Interior pages */
body:not(.home-page) header{
    background:#ffffff !important;
    box-shadow:0 2px 10px rgba(0,0,0,.08) !important;
}

/* Mobile colors */
@media (max-width:768px){
    .home-page .mobile-title,
    .home-page .hamburger-menu{
        color:#ffffff !important;
    }

    body:not(.home-page) .mobile-title,
    body:not(.home-page) .hamburger-menu{
        color:#2f4858 !important;
    }
}


/* FINAL NAVIGATION FIX */

/* Homepage glass navbar */
.home-page header{
    background:rgba(47,72,88,.22) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
    border-bottom:1px solid rgba(255,255,255,.15) !important;
    box-shadow:none !important;
}

/* Interior pages content offset so header doesn't cover content */
body:not(.home-page) .container{
    padding-top:90px !important;
}

@media (max-width:768px){

    body:not(.home-page) .container{
        padding-top:85px !important;
    }

    .home-page header{
        background:rgba(47,72,88,.22) !important;
        backdrop-filter:blur(10px) !important;
        -webkit-backdrop-filter:blur(10px) !important;
    }
}


/* Smart scrolling navbar */
header{
  transition: transform .3s ease;
}

header.nav-hidden{
  transform: translateY(-100%);
}


header{
    transition:transform .3s ease !important;
}

.nav-hidden{
    transform:translateY(-100%) !important;
}


header{
position:fixed !important;
top:0 !important;
left:0 !important;
width:100% !important;
z-index:9999 !important;
transition:transform .25s ease !important;
will-change:transform;
}


/* Restore desktop navbar appearance */
@media (min-width: 769px){
    header{
        position:sticky !important;
        top:0 !important;
        left:auto !important;
        width:auto !important;
        transform:none !important;
        background:white !important;
        box-shadow:0 2px 10px rgba(0,0,0,.08) !important;
    }
}

/* Keep smart nav only on mobile */
@media (max-width:768px){
    header{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        width:100% !important;
    }
}


/* Vibrant but professional refresh */
:root{--primary:#0F4C81;--secondary:#12B5CB;--accent:#FF8A3D;--light:#F5FAFC;}
.hero,.hero-section,.btn,button,.cta-button{background:linear-gradient(135deg,var(--primary),var(--secondary));}
.btn,button,.cta-button{border:none;color:#fff;}
.btn:hover,button:hover,.cta-button:hover{background:var(--accent);}
.card,.service-card,.info-card{border-top:5px solid var(--secondary);}
h1,h2,h3{color:var(--primary);}
body{background-color:var(--light);}
a{color:var(--primary);}
.price,.highlight,.badge{color:var(--accent);}


footer h3 { color: #ffffff !important; }


body{
  background:
    radial-gradient(circle at top left, rgba(39,174,226,0.18), transparent 45%),
    radial-gradient(circle at top right, rgba(0,98,204,0.14), transparent 40%),
    linear-gradient(180deg, #eef7fc 0%, #e6f1f8 45%, #ddebf5 100%) !important;
  background-attachment: fixed;
}


@media (max-width: 768px) {
  header {
    background: rgba(20, 45, 65, 0.45) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: none !important;
  }

  nav {
    background: transparent !important;
  }

  .mobile-title {
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: 1px;
  }

  .hamburger-menu {
    color: #ffffff !important;
  }
}


/* Final mobile navbar fixes */
@media (max-width: 768px) {

  header {
    background: rgba(20, 45, 65, 0.35) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    box-shadow: none !important;
  }

  nav {
    background: transparent !important;
  }

  .mobile-title,
  .hamburger-menu {
    color: #ffffff !important;
  }

  /* Push page content down a little more on mobile */
  .container,
  .hero,
  .card:first-child {
    margin-top: 24px !important;
  }
}


/* Make home title white */
.hero h1, .hero-title, .hero .title { color: #ffffff !important; }


footer a,
footer a:visited {
  color: #ffffff !important;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}


/* Desktop homepage navbar fix */
@media (min-width: 769px) {
  .home-page header{
    background:#ffffff !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:0 2px 10px rgba(0,0,0,.08) !important;
    border-bottom:none !important;
  }
}


/* Mobile homepage background position fix */
@media (max-width: 768px) {
  body.home-page,
  .home-page,
  .hero,
  .hero-section {
    background-position: center top 35px !important;
  }
}

/* Stepping Forward pie chart */
.chart-wrap{display:flex;align-items:center;gap:36px;flex-wrap:wrap;justify-content:center;padding:10px 0}
.chart-canvas-box{width:280px;max-width:100%;flex-shrink:0}
.chart-canvas-box img{width:100%;height:auto;display:block}
.chart-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:0.97rem;color:var(--text,#333)}
.chart-legend li{display:flex;align-items:center;gap:10px}
.chart-legend .dot{width:14px;height:14px;border-radius:50%;display:inline-block;flex-shrink:0}
@media (max-width:600px){
  .chart-wrap{flex-direction:column;gap:20px}
  .chart-canvas-box{width:220px}
}