/*
Theme Name: Lighthouse Onepage
... (theme header content)
*/

:root{
  /* Warm palette */
  --sun-700:#e18700;
  --sun-600:#f09c00;
  --sun-500:#ffb100;
  --sun-400:#ffd166;
  --sun-300:#ffe29a;
  --sky-800:#0a2c4a;
  --brand-900:#4a3b24;
  --surface:#ffffff;
  --surface-soft:#f7f8fb;
  --border:#e6e8ef;
  --radius:16px;
  --radius-lg:22px;
  --shadow:0 10px 25px rgba(16,24,40,.12);
  --shadow-soft:0 8px 18px rgba(16,24,40,.08);
  --container:1200px;
}
/* ... (Existing global styles and headers) ... */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--brand-900);line-height:1.6;background:#fff}
a{color:var(--sun-700);text-decoration:none}
img{max-width:100%;display:block; height: auto;}
.container{width:min(100%, calc(var(--container) + 48px));margin-inline:auto;padding-inline:24px}

/* Header */
body > header{position:fixed;inset-inline:0;top:0;z-index:50;transition:.25s;background:transparent;border-bottom:1px solid transparent}
body.has-scrolled > header{background:rgba(10,44,74,.75);backdrop-filter:saturate(140%) blur(10px);border-bottom-color:rgba(255,255,255,.08);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{font-weight:800;letter-spacing:.2px;font-size:20px;color:#fff}
@media (max-width: 1024px){ 
  .brand {
    width: 100%; 
    text-align:center;
  }
}


.nav a{color:#fff;opacity:.9;margin-left:20px;font-weight:600;font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-weight:700;letter-spacing:.2px;border-radius:999px;padding: 5px 15px; border:0;cursor:pointer;transition:transform .06s, box-shadow .2s, background .2s, color .2s;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(90deg, var(--sun-600), var(--sun-500));color:#1f1300;box-shadow:0 8px 20px rgba(255,177,0,.35)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.18)}

/* Hero */
.hero{position:relative;min-height:92vh;display:grid;place-items:center;color:#fff;text-align:center;overflow:hidden;background:
  linear-gradient(180deg, rgba(14,31,53,.6), rgba(10,24,41,.75)),
  var(--hero-bg, #0a2c4a);
}
.hero .content{padding:140px 0 80px}
.eyebrow{display:inline-block;font-weight:700;font-size:14px;letter-spacing:.2em;text-transform:uppercase;opacity:.9;margin-bottom:12px}
.hero h1{margin:0 0 8px;line-height:1.05;font-size:clamp(42px, 5.6vw, 72px);font-weight:800}
.hero .sub{font-size:clamp(16px, 2.1vw, 20px);opacity:.95;max-width:820px;margin:8px auto 26px}
.hero .accent{color:var(--sun-400);text-shadow:0 2px 18px rgba(255,209,102,.35)}
.hero .actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:28px;height:42px;border:2px solid rgba(255,255,255,.7);border-radius:20px}
.scroll-hint::after{content:"";width:4px;height:8px;border-radius:3px;background:#fff;position:absolute;left:50%;transform:translateX(-50%);top:8px;animation:wheel 1.6s infinite ease-in-out}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}

/* Sections */
section{padding:84px 0}
.section-title{text-align:center;margin-bottom:28px}
.section-title h2{font-size:clamp(30px, 4vw, 48px);margin:0 0 8px;color:var(--sky-800);letter-spacing:.2px}
.section-title p{margin:0 auto;max-width:820px;color:#4b5b6b;font-size:clamp(16px, 2vw, 18px)}

/* Intro About */
.about{background:linear-gradient(180deg, #fff, var(--surface-soft))}
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:start}
.about .card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:26px}
/* Target the actual list inside the dot-list container */
.dot-list ul{margin:0;padding:0;list-style:none}

/* Base style for all list item dots (li:before) */
.dot-list ul li{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 8px;
    border-radius:12px;
}
.dot-list ul li:before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    flex:0 0 10px;
    /* Default dot style (will be overridden below) */
    background:var(--sun-600);
    box-shadow:0 0 0 4px rgba(255,177,0,.18);
}

/* 🟢 ODD: Sun Color (1st, 3rd, 5th, etc.) */
.dot-list ul li:nth-child(odd):before{
    background:var(--sun-600);
    box-shadow:0 0 0 4px rgba(255,177,0,.18);
}

/* 🔵 EVEN: Sky Color (2nd, 4th, 6th, etc.) */
.dot-list ul li:nth-child(even):before{
    background:var(--sky-800); /* Use a darker blue for contrast */
    box-shadow:0 0 0 4px rgba(10,44,74,.15);
}

/* If you need to keep the .alt class functionality for a specific item */
.dot-list ul li.alt:before{
    background:#1d67d6; /* Using the existing blue fallback */
    box-shadow:0 0 0 4px rgba(29,103,214,.15);
}

.dot{width:10px;height:10px;border-radius:50%;background:var(--sun-600);box-shadow:0 0 0 4px rgba(255,177,0,.18);flex:0 0 10px}
.about p{color:#344b5f}

/* Services */
.services .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:26px}
.service{background:#fff;border:1px solid var(--border);padding:26px;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);transition:transform .15s, box-shadow .2s,border-color .2s}
.service:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.service h3{margin:8px 0 6px;color:var(--sky-800)}
.service p{margin:0;color:#4b5b6b}
.badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--sun-300);color:#3b2905;padding:6px 10px;border-radius:999px}

/* CTA */
.cta{margin-top:28px;background:linear-gradient(90deg, var(--sun-400), var(--sun-600));border-radius:var(--radius-lg);box-shadow:var(--shadow);color:#2b1a00;padding:36px 26px}
.cta .inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cta strong{font-size:clamp(18px, 2.5vw, 22px)}

/* Support (power of three) */
.support .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.support .card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:26px}
.support h3{margin:6px 0 8px;color:var(--sky-800)}
.support p{margin:0;color:#4b5b6b}

/* Trust strip slider */
.trust{padding-top:40px;padding-bottom:40px;background:linear-gradient(180deg, #fffbe9, #fff)}
.trust .tag{display:inline-block;background:var(--sun-300);color:#3b2905;border-radius:999px;padding:6px 12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.brand-strip{overflow:hidden;position:relative}
.track{display:flex;gap:18px;will-change:transform}
.slide{flex:0 0 20%;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);background:#fff;border-radius:14px;height:80px;box-shadow:var(--shadow-soft);padding:8px}
.slide img{max-height:46px;width:auto;opacity:.9}

/* Contact */
.contact .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px}
.panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:24px}
.note{margin-top:22px;border-radius:16px;padding:18px 18px;background:linear-gradient(160deg, #eef6ff, #fff4d6);border:1px solid #dfe8f2;color:#283f57}

/* About Me */
.aboutme{background:linear-gradient(180deg, #fff, #fffaf1)}
.aboutme .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.aboutme .photo{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-soft);border:1px solid var(--border)}

/* 7. Packages (Updated for Mobile Optimization) */
.packages { background: linear-gradient(180deg,#fff,#fffaf1); padding-top:64px; padding-bottom:84px; }
.price-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Default: 3 columns */
  grid-auto-flow: row;
  gap: 22px;
  margin-bottom: 28px;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
/* Ensure 5 cards flow correctly in the 3-column layout (3 cards, then 2 cards span 1.5) */
.price-cards > .card:nth-child(4),
.price-cards > .card:nth-child(5) {
  grid-column: span 1.5; 
}
/* Ensure the first three cards take equal space */
.price-cards > .card:nth-child(1),
.price-cards > .card:nth-child(2),
.price-cards > .card:nth-child(3) {
  grid-column: span 1;
}

.price-cards .card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.pkg-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  width: 100%;
  justify-content: center;
}
.pkg-actions .btn {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.or-divider {
  font-weight: 700;
  color: #b0b0b0;
  margin: 0 8px;
  font-size: 13px;
}
.btn-whatsapp {
  background: #25d366;
  color: #fff;
}
.btn-whatsapp:hover {
  background: #1ebe5d;
  color: #fff;
  filter: brightness(1.05);
}
.btn-whatsapp .wa-ico {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
}
.btn-primary .form-ico {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
}

.price-cards .card header h3 { margin:0 0 4px; color:var(--sky-800); font-size:18px; }
.price-cards .card .strap { margin:2px 0 0; color:#5b6a7a; font-size:13px; }
.price-cards .card .price { font-weight:800; font-size:24px; margin:8px 0 6px; }
.price-cards .card .price .sub { display:block; font-weight:600; font-size:12px; color:#6a7480; }
.price-cards .card .bullets { list-style:none; margin:8px 0 16px; padding:0; color:#3d4e60; }
.price-cards .card .bullets li { padding:6px 0; border-bottom:1px dashed var(--border); }
.price-cards .card .bullets li:last-child { border-bottom:0; }
.price-cards .card .bullets ul { list-style:none; margin:0; padding:0; }
.price-cards .card .bullets ul li { padding:6px 0; border-bottom:1px dashed var(--border); }
.price-cards .card .bullets ul li:last-child { border-bottom:0; }

/* Table */
.table-wrap { overflow:auto; border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:var(--shadow-soft); }
.compare { width:100%; border-collapse:collapse; min-width:720px; }
.compare th, .compare td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--border); }
.compare thead th { background:#fff6df; color:#2d2a20; font-weight:800; }
.compare tbody tr:nth-child(even) { background:#fffdf6; }

/* Footer */
footer{padding:36px 0;color:#546579;border-top:1px solid var(--border)}
footer .brand{color:var(--sky-800)}
footer .foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s, transform .5s}
.reveal.in{opacity:1;transform:translateY(0)}

/* Responsive */
@media (max-width: 1200px){ 
  /* Tablet/Small Desktop: 2 Columns for Services, 3 Columns for Packages */
  .services .grid{grid-template-columns:repeat(2,1fr)}
  .price-cards { 
    grid-template-columns:repeat(3,1fr); 
    /* The 3+2 logic can be handled by default grid flow here, but we enforce the equal columns */
  }
  .price-cards > .card:nth-child(n) { /* Reset specific 3+2 desktop rules */
    grid-column: span 1 !important;
  }
}

@media (max-width: 1024px){ 
  /* Tablet/General Fallback */
  header .nav nav {
    display: none;
  }
  .about-grid{grid-template-columns:1fr}
  .services .grid{grid-template-columns:repeat(2,1fr)}
  .support .grid{grid-template-columns:1fr} /* Support becomes single column */
  .contact .grid{grid-template-columns:1fr}
  .aboutme .grid{grid-template-columns:1fr}
}

/* --- MOBILE OPTIMIZATION for price-cards --- */
@media (max-width: 800px) {
  .price-cards {
    grid-template-columns: repeat(2, 1fr); /* Tablet Landscape / Medium: 2 Columns */
    gap: 20px;
  }
  .price-cards > .card:nth-child(n) { /* Ensure all cards are 2-column wide */
    grid-column: span 1 !important; 
  }
}

@media (max-width: 680px){ 
  /* Mobile Portrait: 1 Column for everything */
  .price-cards { 
    grid-template-columns: repeat(1, 1fr); 
    gap: 16px; 
    padding-left: 0;
    padding-right: 0;
  }
  .price-cards > .card {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    grid-column: span 1 !important;
  }
  .services .grid{grid-template-columns:repeat(1,1fr)}
}
@media (max-width: 560px){
  .hero .actions{flex-direction:column}
  .slide{flex-basis:50%}
}


.row {
  display:flex;
}

.k {
  min-width: 60px;
}


/* Contact panel row layout */
.panel .row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}
.panel .k {
  min-width: 50px;
  font-weight: 600;
  color: #344b5f;
  margin-right: 12px;
  flex-shrink: 0;
}
.panel .v {
  flex: 1 1 0;
  color: #283f57;
  word-break: break-word;
}

/* Contact Form Modern Styles */
.contact-form {
  max-width: 480px;
  padding: 0;
}
.contact-form .field-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}
.contact-form .field-row.row-2 {
  flex-direction: row;
  gap: 16px;
}
.contact-form label {
  color: var(--sky-800);
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 15px;
}
.contact-form .form-input, .contact-form .form-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e6e8ef;
  border-radius: 8px;
  font-size: 16px;
  background: #fafbfc;
  color: #222;
  transition: border-color .2s;
  margin-bottom: 0;
}
.contact-form .form-input:focus, .contact-form .form-textarea:focus {
  border-color: var(--sun-400);
  outline: none;
}
.contact-form .form-textarea {
  min-height: 100px;
  resize: vertical;
}
.contact-form .submit-row {
  display: flex;
  justify-content: flex-end;
}
.contact-form .btn-primary {
  background: linear-gradient(90deg, var(--sun-600), var(--sun-500));
  color: #1f1300;
  border-radius: 999px;
  font-weight: 700;
  padding: .9rem 1.5rem;
  border: none;
  box-shadow: 0 8px 20px rgba(255,177,0,.18);
  font-size: 16px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.contact-form .btn-primary:hover {
  filter: brightness(1.05);
}
.contact-form-title {
  color: #333;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 18px;
  text-align: left;
}