/* ===============================
   Sun Valley – Base Styles (style.css)
   Author: ChatGPT
   Notes:
   - Designed to work with clean_index.html as-is.
   - Fully responsive, CSS-only dropdowns.
   - Uses system fonts (no webfont required).
   =============================== */

:root{
  --brand: #2563eb;        /* primary blue */
  --brand-600:#1d4ed8;
  --accent:#f59e0b;        /* amber accent */
  --dark:#0f172a;          /* slate-900 */
  --muted:#475569;         /* slate-600 */
  --border:#e2e8f0;        /* slate-200 */
  --bg:#ffffff;
  --bg-soft:#f8fafc;
  --radius: 14px;
  --shadow: 0 8px 30px rgba(2,6,23,.08);
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--dark);
  background: var(--bg);
  line-height: 1.65;
}

/* Generic utilities */
.container,
.e-con-inner{ max-width: 1200px; margin-inline:auto; padding: 0 20px; }

img{ max-width:100%; height:auto; display:block; }

a{ color: var(--brand); text-decoration: none; }
a:hover{ color: var(--brand-600); }

h1,h2,h3,h4,h5{ margin:0 0 .6rem; line-height:1.25; }
h1{ font-size: clamp(2rem, 1rem + 4vw, 3.5rem); }
h2{ font-size: clamp(1.5rem, .5rem + 2.5vw, 2.25rem); }
h5{ font-size: 1.125rem; color: var(--muted); }

section{ padding: 60px 0; }

/* ===============================
   Topbar
   =============================== */
.topbar{
  background: var(--dark);
  color: #fff;
  font-size: .9rem;
}
.topbar .left, .topbar .right{
  display:flex; gap:18px; align-items:center;
}
.topbar .left{ padding:10px 20px; }
.topbar .right{ margin-left:auto; padding:10px 20px; }
.topbar a{ color:#cbd5e1; }
.topbar a:hover{ color:#fff; }
.topbar,
.topbar .left,
.topbar .right{
  max-width: 1200px;
  margin-inline:auto;
}
.topbar{ display:flex; }

/* ===============================
   Header & Nav
   =============================== */
header{
  position: sticky; top:0; z-index:50;
  background:#fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(2,6,23,.03);
}

.header-container{
  max-width:1200px; margin-inline:auto; padding: 14px 20px;
  display:flex; align-items:center; gap:24px;
}

.logo{ width: 56px; }
.logo img{ width:56px; height:auto; }

nav{ margin-left:auto; }
nav ul{ list-style:none; margin:0; padding:0; display:flex; gap: 8px; align-items:center; }
nav ul > li{
  position:relative;
}
nav a{
  padding: 10px 14px;
  border-radius: 10px;
  display:block;
  text-decoration: none;
  color: var(--dark);
  font-weight: 600;
}
nav > ul > li > a:hover{
  background: var(--bg-soft);
    text-decoration: none;
}

/* Dropdown */
nav ul li ul{
  position:absolute; left:0; top:calc(100% + 10px);
  min-width: 220px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  display:none; flex-direction:column; gap:4px;
}
nav ul li:hover > ul{ display:flex; }
nav ul li ul a{
  padding:10px 12px; border-radius:10px; color: var(--muted); font-weight:500;
}
nav ul li ul a:hover{ background: var(--bg-soft); color: var(--dark); }

/* ===============================
   Hero
   =============================== */
#hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  align-items:center;
  gap:32px;
  padding: 40px 20px 20px;
  max-width:1200px; margin: 0 auto;
}

#hero .twbb-headline{ margin-bottom: 8px; }
#hero .twbb-headline span{ display:inline-block; }
#hero .twbb-headline .twbb-headline-plain-text:first-child{
  background: linear-gradient(90deg, var(--brand), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:800;
}
#hero .twbb-headline-plain-text:last-child{ color: var(--dark); }

#hero [data-widget_type="text-editor.default"] > div{
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 18px;
}

/* Buttons found in markup */
#hero a[href] span span,
.twbb_cta-button,
.elementor-button{
  background: var(--brand);
  color:#fff !important;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight:700;
  display:inline-block;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
#hero a[href]:hover span span,
.twbb_cta-button:hover,
.elementor-button:hover{
  background: var(--brand-600);
  transform: translateY(-1px);
}

/* Right hero image */
#hero [data-widget_type="image.default"] img{
  border-radius: 20px;
  box-shadow: var(--shadow);
}

/* ===============================
   About / Counters
   =============================== */
#about-us{
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}
#about-us p{ color: var(--muted); }
#about-us h2{ margin-bottom: 6px; }
#about-us [data-widget_type="counter.default"] > div > div{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  text-align:center;
  box-shadow: var(--shadow);
}
#about-us [data-widget_type="counter.default"] span[data-to-value]{
  font-size: 1.75rem; font-weight: 800; color: var(--brand);
}

/* ===============================
   Programs – CTA cards
   =============================== */
#our-programs .twbb_cta-wrapper{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden;
  box-shadow: var(--shadow);
}
.twbb_cta-image-background-wrapper{ position:relative; }
.twbb_cta-image-background-wrapper img{
  width:100%; height: 220px; object-fit:cover;
}
.twbb_cta-image-background-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.25));
}
.twbb_cta-content-wrapper{ padding: 16px; }
.twbb_cta-title{ margin:0 0 6px; font-size: 1.125rem; }
.twbb_cta-description{ color: var(--muted); margin-bottom: 10px; }
.twbb_cta-buttons{ padding: 0 16px 16px; }

/* ===============================
   Team Section
   =============================== */
#meet-the-team .e-grid, #meet-the-team .e-con-full.e-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
#meet-the-team [data-widget_type="image.default"] img{
  width:100%; border-radius:16px; background: #fff; border:1px solid var(--border); box-shadow: var(--shadow);
}
#meet-the-team p{ color: var(--muted); margin:.25rem 0; }
#meet-the-team .e-grid-align-left [role="list"]{
  display:flex; gap:8px; margin-top:6px;
}
#meet-the-team a[target="_blank"]{ color: var(--muted); font-weight:600; }
#meet-the-team a[target="_blank"]:hover{ color: var(--brand); }

/* ===============================
   Posts / Events
   =============================== */
#events-calendar .twbb-post__badge-container div{
  display:inline-block;
  background: var(--bg-soft);
  color: var(--brand);
  border: 1px solid var(--border);
  font-weight:700;
  padding: 4px 10px; border-radius: 999px; margin: 8px 0;
}
#events-calendar article{
  background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow: var(--shadow);
  transition: transform .12s ease;
}
#events-calendar article:hover{ transform: translateY(-2px); }
#events-calendar .twbb-image-container img{ width:100%; height: 160px; object-fit:cover; }
#events-calendar h5{ color: var(--dark); margin: 6px 0; }
#events-calendar p{ color: var(--muted); }
#events-calendar a[aria-label], #events-calendar a[href*="Read"]{
  display:inline-flex; align-items:center; gap:6px; font-weight:700;
}

/* ===============================
   Footer (generic)
   =============================== */
#footer{ background: var(--dark); color:#cbd5e1; }
#footer a{ color:#e2e8f0; }
#footer .elementor-divider .elementor-divider-separator{ border-top: 1px solid rgba(255,255,255,.12); }

/* ===============================
   Forms
   =============================== */
.elementor-form{
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow: var(--shadow);
}
.elementor-field input[type="email"],
.elementor-field input[type="text"]{
  width:100%;
  border:1px solid var(--border);
  border-radius: 12px;
  padding: 12px 12px;
  outline:none;
}
.elementor-field input:focus{ border-color: var(--brand); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }

/* ===============================
   Responsive
   =============================== */
@media (max-width: 992px){
  #hero{ grid-template-columns: 1fr; padding-top: 28px; }
  nav ul{ gap: 2px; }
}

@media (max-width: 720px){
  .topbar{ display:none; }
  .header-container{ gap:10px; }
  nav ul{ flex-wrap:wrap; gap: 0; }
  nav a{ padding: 10px 10px; }
  nav ul li ul{
    position: static; display:none; border:none; box-shadow:none; padding:0; margin:6px 0 0;
  }
  nav ul li:hover > ul{ display:block; }
  #meet-the-team .e-grid, #meet-the-team .e-con-full.e-grid{ grid-template-columns: 1fr; }
}


 .gradient-btn {
      background: linear-gradient(45deg, #ff7e5f, #feb47b); /* Gradient colors */
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: 0.3s;
    }

    .gradient-btn:hover {
      background: linear-gradient(45deg, #6a11cb, #2575fc); /* Hover gradient */
      transform: scale(1.05);
      color:white;
    }
    body {
  font-family: Arial, sans-serif;
}

.gradient-btn {
  background: linear-gradient(45deg, #ff7e5f, #feb47b);
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  transition: 0.3s;
  text-decoration: none;
}
.gradient-btn:hover {
  background: linear-gradient(45deg, #6a11cb, #2575fc);
  transform: scale(1.05);
}

#our-management .card {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
}
#our-management .card:hover {
  transform: translateY(-5px);
}
#our-management .card img {
  max-height: 280px;
  object-fit: contain;
  padding: 20px;
}
#our-management .social-icons a {
  color: #007bff;
  transition: color 0.3s;
}
#our-management .social-icons a:hover {
  color: #ff7e5f;
}

@media (max-width: 768px) {
  h2 {
    font-size: 1.6rem;
  }
  .card-text {
    font-size: 0.9rem;
  }
}

#upcoming-events .card {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
}
#upcoming-events .card:hover {
  transform: translateY(-5px);
}
#upcoming-events .card img {
  max-height: 200px;
  object-fit: cover;
}
/* 
#hero h1 {
  line-height: 1.3;
}

#hero p {
  font-size: 1.1rem;
  color: #555;
}

#hero img {
  max-height: 400px;
  object-fit: cover;
}

@media (max-width: 768px) {
  #hero h1 {
    font-size: 2rem;
  }
  #hero p {
    font-size: 1rem;
  }
} */

#about-us h2 {
  font-size: 2rem;
  color: #222;
}

#about-us p {
  color: #555;
  font-size: 1.05rem;
}

#about-us h4 {
  color: #007bff;
}

#about-us img {
  max-height: 400px;
  object-fit: cover;
}

@media (max-width: 768px) {
  #about-us h2 {
    font-size: 1.6rem;
  }
  #about-us p {
    font-size: 1rem;
  }
}


/* Why Choose Us Section */
#why-choose-us h2 {
  font-size: 2rem;
  color: #1a1a1a;
}

.feature-card {
  border: none;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15);
}

.icon-box {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto;
}

body {
  font-family: 'Open Sans', sans-serif;
  /* margin-top: 70px;  
 */
}

/* Hero Section */
.hero-section {
  background: url("img/feature.jpg") center/cover no-repeat;
  height: 25vh;
}

/* Stats */
.stat-box {
  padding: 15px;
  border-radius: 10px;
  color: #fff;
}
.stat-box h3 {
  font-size: 1.5rem;
  margin: 0;
}
.stat-box p {
  margin: 0;
  font-size: 0.9rem;
}

/* Why Choose Us Cards */
#why-choose-us .card {
  border-radius: 12px;
  font-weight: 500;
  transition: transform 0.2s ease;
}
#why-choose-us .card:hover {
  transform: translateY(-5px);
}

/* Footer */
footer p, footer a {
  /* font-size: 0.95rem; */
}