:root {
  --brand-orange: #f97316;
  --brand-amber: #f59e0b;
  --brand-green: #16a34a;
  --brand-emerald: #10b981;
}

html { scroll-behavior: smooth; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: #1f2937;
  background: #fff;
}
section { scroll-margin-top: 88px; }

.navbar {
  transition: background-color .25s ease, box-shadow .25s ease, padding .25s ease;
}
.navbar-logo, .footer-logo { height: 4rem; width: auto; }
.nav-scroll { background: #fff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.nav-scroll .nav-link { color: #374151; }
.nav-scroll .nav-link:hover { color: var(--brand-orange); }
.nav-transparent .nav-link:hover { color: #fdba74; }
.nav-transparent .nav-toggle-icon { color: #fff; }
.nav-scroll .nav-toggle-icon { color: #212529; }

.hero { min-height: 100vh; }
.hero-overlay { background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.4), rgba(0,0,0,.5)); }
.hero-title { font-size: clamp(3rem, 7vw, 4.5rem); }
.text-white-90 { color: rgba(255,255,255,.9); }

.btn-brand, .btn-brand-green, .btn-outline-light-strong {
  border-radius: 50rem;
  padding: .85rem 1.75rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all .25s ease;
}
.btn-brand {
  background: linear-gradient(90deg,var(--brand-orange),var(--brand-amber));
  color: #fff; border: 0; box-shadow: 0 10px 25px rgba(249,115,22,.35);
}
.btn-brand:hover { color:#fff; filter:brightness(1.06); transform:translateY(-2px); }
.btn-brand-green {
  background: linear-gradient(90deg,var(--brand-green),var(--brand-emerald));
  color:#fff; border:0; box-shadow:0 10px 25px rgba(22,163,74,.35);
}
.btn-brand-green:hover { color:#fff; filter:brightness(1.06); transform:translateY(-2px); }
.btn-outline-light-strong {
  background: rgba(255,255,255,.1); backdrop-filter: blur(4px);
  color:#fff; border:2px solid #fff;
}
.btn-outline-light-strong:hover { background:rgba(255,255,255,.25); color:#fff; }

.section-divider {
  width:6rem; height:4px; border-radius:2px; margin:.75rem auto 1.5rem;
  background:linear-gradient(90deg,var(--brand-orange),var(--brand-amber));
}
.section-intro { max-width: 48rem; }
.section-cream { background:linear-gradient(135deg,#fafaf9,#fff7ed); }
.section-warm { background:linear-gradient(135deg,#fff7ed,#fffbeb); }

.cover { width:100%; height:100%; object-fit:cover; }
.img-frame {  overflow:hidden; border-radius:1rem; box-shadow:0 20px 45px rgba(17,24,39,.15); }
.video-frame { position:absolute; inset:0; width:100%; height:100%; border:0; }
.card-image { height:12rem; overflow:hidden; }
.marketplace-image { min-height:20rem; }

.feature-card.feature-orange { background:linear-gradient(135deg,#fff7ed,#fffbeb); }
.feature-card.feature-green { background:linear-gradient(135deg,#f0fdf4,#ecfdf5); }
.feature-card.feature-amber { background:linear-gradient(135deg,#fffbeb,#fefce8); }

.icon-bubble {
  width:4rem; height:4rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; margin-bottom:1.25rem;
}
.icon-bubble-sm { width:3rem; height:3rem; }
.icon-bubble-lg { width:5rem; height:5rem; }
.icon-bubble-orange { background:linear-gradient(135deg,var(--brand-orange),var(--brand-amber)); }
.icon-bubble-green { background:linear-gradient(135deg,var(--brand-green),var(--brand-emerald)); }
.icon-bubble-amber { background:linear-gradient(135deg,var(--brand-amber),#eab308); }

.border-top-brand { border-top:4px solid var(--brand-orange)!important; }
.border-top-green { border-top:4px solid var(--brand-green)!important; }
.border-top-amber { border-top:4px solid var(--brand-amber)!important; }

.visitor-item {
  display:flex; align-items:flex-start; padding:1rem; border-radius:.5rem;
}
.visitor-orange { background:#fff7ed; border-left:4px solid #f97316; }
.visitor-orange > i { color:#f97316; }
.visitor-green { background:#f0fdf4; border-left:4px solid #16a34a; }
.visitor-green > i { color:#16a34a; }
.visitor-amber { background:#fffbeb; border-left:4px solid #f59e0b; }
.visitor-amber > i { color:#f59e0b; }

.media-panel { background:linear-gradient(90deg,#f97316,#f59e0b); }
.media-card { transition:all .25s ease; }
.media-card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(17,24,39,.18)!important; }

.contact-panel { background:linear-gradient(135deg,#fff7ed,#fffbeb); }
.contact-icon {
  width:3rem; height:3rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; margin-right:1rem; flex-shrink:0;
}
textarea { resize:none; }

.footer-dark { background:linear-gradient(135deg,#111827,#1f2937); color:#fff; }
.social-circle {
  width:2.6rem; height:2.6rem; border-radius:50%; background:#374151; color:#fff;
  display:inline-flex; align-items:center; justify-content:center; transition:all .25s ease;
}
.social-circle:hover { background:linear-gradient(135deg,var(--brand-orange),var(--brand-amber)); color:#fff; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}
.fade-up { animation:fadeUp .8s ease both; }

.views-exposed-form input[type="radio"] {
  display: none;
}
.views-exposed-form input, .views-exposed-form input[type="radio"] + label, .views-exposed-form input[type="checkbox"] + label::before, .views-exposed-form select option, .views-exposed-form select {
  width: 100%;
  padding: 0.6em;
    padding-left: 0.6em;
  padding-left: 0.6em;
  padding-left: 1em;
  line-height: 1.4;
  background-color: #f9f9f9;
  border: 1px solid #e5e5e5;
    border-top-color: rgb(229, 229, 229);
    border-right-color: rgb(229, 229, 229);
    border-bottom-color: rgb(229, 229, 229);
    border-left-color: rgb(229, 229, 229);
  border-top-color: rgb(229,229,229);
  border-right-color: rgb(229,229,229);
  border-bottom-color: rgb(229,229,229);
  border-left-color: rgb(229,229,229);
  border-radius: 3px;
  -webkit-transition: 0.35s ease-in-out;
  -moz-transition: 0.35s ease-in-out;
  -o-transition: 0.35s ease-in-out;
  transition: 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  color: #000;
}
.form-radios .form-item {
  float: left;
}
.views-exposed-form .form-type-textfield{
	width: 300px;
}
.views-exposed-form .form-item {
  margin-right: 10px;
  margin-bottom: 10px;
}

 
 
 
 
 
 
     /* Force exact vertical proportions (350x450) */
    .podcast-img-wrapper {
        position: relative;
        width: 100%;
        aspect-ratio: 350 / 450; 
        background-color: #f8f9fa; /* fallback for slow loading */
        display: block;
    }

    /* Ensure image fills the wrapper without stretching */
    .podcast-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover; 
        object-position: top center; /* Prioritizes keeping text/faces at the top visible */
        transition: transform 0.5s ease;
    }

    /* Card Base Styling & Lift Effect */
    .podcast-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        padding: 5px; /* Adds a tiny frame around the image if desired, set to 0 for edge-to-edge */
    }
    
    .podcast-card:hover {
        transform: translateY(-8px);
    }
    
    /* Optional slight zoom on image hover */
    .podcast-card:hover .podcast-img-wrapper img {
        transform: scale(1.03);
    }

    /* Dark Overlay for "View Detail" */
    .podcast-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.55);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 2;
    }

    .podcast-img-wrapper:hover .podcast-overlay {
        opacity: 1;
    }

    /* Button Slide-Up Animation inside Overlay */
    .overlay-btn {
        transform: translateY(20px);
        transition: transform 0.3s ease, background-color 0.2s ease;
        color: #333;
    }

    .podcast-img-wrapper:hover .overlay-btn {
        transform: translateY(0);
    }
    
    .overlay-btn:hover {
        background-color: #b0bb22;
        color: white;
        border-color: #b0bb22;
    }
    
    
    
    
    
    

.views-exposed-form .form-radios label {
	background: linear-gradient(90deg,var(--brand-orange),var(--brand-amber));
	color: #fff !important;
	border: 0 !important;
}
.views-exposed-form .form-radios label:hover {
	  box-shadow: 0 10px 25px rgba(249,115,22,.35);
}
.earthwalk-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 350px;
}

.hover-lift {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
	transform: translateY(-5px);
	box-shadow: 0 1rem 3rem rgba(0,0,0,.15) !important;
}

.hover-brand-text {
	transition: color 0.2s ease;
}
.card:hover .hover-brand-text {
	color: #d38b16 !important; /* Adjust to match your primary brand color */
}

.object-fit-cover {
	object-fit: cover;
}

/*** CSS - Team ***/
/* Card Styling & Cyan Drop Shadow */
.team-card {
    border-radius: 12px !important;
    /* Soft cyan/teal shadow matching the reference image */
    box-shadow: 0 4px 20px rgba(64, 180, 179, 0.4) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(64, 180, 179, 0.6) !important;
}

/* Image Proportions */
.team-img-wrapper {
    /* Ensures all photos are exactly the same height/proportions */
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.team-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; /* Keeps faces visible */
}

/* Typography */
.team-designation {
    color: #40b4b3; /* Cyan/teal color for the role */
}

/* Views wrapper reset */
.team-designation p,
.team-designation div {
    margin-bottom: 0;
}
/*** End CSS - Team ***/


@media (max-width: 991.98px) {
  .navbar.nav-transparent .navbar-collapse {
    background: rgba(17,24,39,.96);
    margin-top: .75rem;
    padding: 1rem;
    border-radius: 1rem;
  }
  .navbar.nav-scroll .navbar-collapse {
    background:#fff;
    margin-top:.75rem;
    padding:1rem;
    border-radius:1rem;
    box-shadow:0 .5rem 1rem rgba(0,0,0,.08);
  }
}