/* Theme colors inspired by the logo */
:root {
    --primary: #00C8F2; /* cyan from globe */
    --accent-green: #37D046;
    --accent-yellow: #FFD627;
    --accent-red: #F44336;
    --dark: #000000;
}

.bg-primary { background-color: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }

/* Utility ribbons for sections using logo colors */
.ribbon-yellow { border-left: 6px solid var(--accent-yellow); }
.ribbon-red { border-left: 6px solid var(--accent-red); }
.ribbon-green { border-left: 6px solid var(--accent-green); }

/* Hero section */
.hero {
    background: radial-gradient(ellipse at top left, rgba(0,200,242,0.15), transparent),
                radial-gradient(ellipse at bottom right, rgba(55,208,70,0.12), transparent);
}

.hero-video {
    position: relative;
    min-height: 60vh;
}
.hero-video video {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
}
.hero-video .overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}
.hero-video .content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 4rem 1rem;
}

.btn-cyan {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transition: none;
}
.btn-cyan:visited {
    color: #fff;
}
.btn-cyan:hover,
.btn-cyan:focus,
.btn-cyan:active,
.btn-cyan.active {
    background-color: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
    filter: none;
    box-shadow: 0 0 0 0.15rem rgba(0,200,242,0.25) !important;
    opacity: 1 !important;
    transform: none !important;
}
.btn-cyan:not(:disabled):not(.disabled):active,
.btn-cyan:not(:disabled):not(.disabled).active,
.show > .btn-cyan.dropdown-toggle {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.15rem rgba(0,200,242,0.25) !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Home stats tiles */
.stat-tile {
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .5rem;
}

/* Hover effects */
.hover-shadow {
    transition: all 0.3s ease;
}

.hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

.transition-300 {
    transition: all 0.3s ease;
}
.stat-tile {
    background: #fff;
}
.stat-value {
    font-weight: 800;
    letter-spacing: .5px;
}
.stat-value {
    font-weight: 800;
    letter-spacing: .5px;
}
/* Pricing section styles */
.pricing-section .price-card .price {
    font-weight: 700;
    font-size: 1.1rem;
}
.pricing-section .price-card .list-group-item {
    padding: 0.75rem 1rem;
}
.pricing-section .disclaimer ul {
    margin: 0;
}
.pricing-section .badge {
    font-size: 0.85rem;
}
/* Donation impact styles */
.donation-impact h2 {
    letter-spacing: .3px;
}
.donation-impact .impact-card {
    border: 1px solid rgba(0,0,0,.08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.donation-impact .impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}
.donation-impact .impact-icon {
    font-size: 1.75rem;
}

/* Responsive tweaks for mobile devices */
@media (max-width: 576px) {
    /* Reduce tall card images on small screens */
    .card .card-img-top {
        height: 180px !important;
    }
    /* Hero video padding reduction for small screens */
    .hero-video .content {
        padding: 2.5rem 1rem;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .card .card-img-top {
        height: 220px !important;
    }
}

/* Navbar tweaks */
.navbar .navbar-logo {
  height: 40px;
  width: 40px;
  object-fit: cover;
}

/* Force pure white nav links for visibility */
.navbar.navbar-dark .navbar-nav .nav-link {
  color: #ffffff !important;
}
.navbar.navbar-dark .navbar-nav .nav-link:hover,
.navbar.navbar-dark .navbar-nav .nav-link:focus {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.navbar.navbar-dark .navbar-nav .nav-link.active,
.navbar.navbar-dark .navbar-nav .show > .nav-link {
  color: #ffffff !important;
  font-weight: 600;
}

/* Mobile: ensure brand fits nicely */
@media (max-width: 576px) {
  .navbar .navbar-logo {
    height: 32px;
    width: 32px;
  }
}

/* Prevent unintended horizontal scroll from wide media */
body {
  overflow-x: hidden;
}