@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100..900;1,100..900&display=swap');

/* --- COLOR VARIABLES (From PDF) --- */
:root {
    --color-primary: #E94A3F;         /* Coral Red - Primary */
    --color-secondary: #F5A623;       /* Golden Amber - Secondary */
    --color-base: #F7F5F2;            /* Light Beige / Mist Gray - Background */
    --color-accent: #008080;          /* Teal Green - Accent */
    --color-text-dark: #1C1C1C;       /* Charcoal / readability */
    --color-footer-bg: #EAE8E3;       /* Slightly darker beige for footer */

    --font-heading: 'Lato', sans-serif;
    --font-body: 'Poppins', sans-serif;
}

/* --- GLOBAL BASE --- */
body {
    background-color: var(--color-base);
    font-family: var(--font-body);
    color: var(--color-text-dark);
    line-height: 1.6;
}
a{text-decoration:none;
    color:#1c1c1c;
}
/* ==========================
   HERO / BANNER
   ========================== */

.hero-banner {
    position: relative;
    height: 600px;
    background: linear-gradient(135deg, var(--color-base), #fff3d5);
    overflow: hidden;
}

#video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    filter: brightness(65%) grayscale(40%);
}

.hero-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 2;
}

.hero-content-overlay h1 {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 800;
}

.hero-content-overlay p {
    color: var(--color-text-dark);
    font-size: 1.1rem;
}

/* ==========================
   BUTTONS
   ========================== */

.custom-btn-red {
    background-color: var(--color-primary);
    border: none;
    color: #fff;
    border-radius: 50px;
    padding: 12px 30px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.custom-btn-red:hover {
    background-color: var(--color-secondary);
    color: #fff;
    transform: translateY(-2px);
}

.custom-btn-outline-orange {
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary);
    border-radius: 50px;
    padding: 12px 30px;
    font-weight: 600;
    transition: all 0.3s ease;
    background: transparent;
}

.custom-btn-outline-orange:hover {
    background-color: var(--color-secondary);
    color: #fff;
}


/* 1. White Navbar Background */
.custom-navbar-orange {
    background-color: #F7F5F2!important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* 2. Navbar Toggler (Black background on mobile) */
.navbar-toggler.custom-toggler {
    background-color: white;
    color: black;
    border: none;
}
.navbar-toggler:focus {
    box-shadow: none;
}

/* 3. Navbar Link Colors */
.custom-nav-link {
    /*color: var(--color-accent-red) !important; */
    /* Red by default */
    font-weight: 500;
    position: relative;
    padding: 10px 15px !important;
    margin: 0 5px;
    transition: all 0.3s ease;
    border-radius: 5px;
    color:#000;
    
}

/* 4. Hover/Active (Orange bg + White text) */
.nav-link:focus-visible {
    outline: 0;
    box-shadow:none!important;
}
/*.custom-nav-link.active,*/
/*.dropdown-toggle.show {*/
/*    background-color: var(--color-accent-orange) !important;*/
/*    color: white !important;*/
/*}*/

/* 4. Hover/Active (Orange bg + White text) */
.custom-nav-link:hover
 {
    background-color: transparent !important;
    color: #1C3557 !important;
}



/* --- Impact Counters Section (Clean White Theme) --- */
.impact-counters {
  background: #f9f9f9; /* Keep the white background */
  overflow: hidden;
  position: relative;
}

.impact-bg-overlay {
  display: none; /* Hide overlay */
}

.impact-counters .container {
  position: relative;
  z-index: 2;
}

.impact-card {
  background: rgba(255, 255, 255, 0.8); /* Slightly opaque white background for depth */
  border-radius: 15px;
  backdrop-filter: blur(6px);
  transition: all 0.4s ease;
  transform: translateY(0);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  border: 1px solid var(--color-secondary);
}

.impact-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
   background:linear-gradient(135deg, #ef7f1a 0%, #e51a4b 100%);
}

.impact-card i {
  transition: transform 0.3s ease;
  color: var(--color-accent);
}

.impact-card:hover img {
  /*transform: rotate(10deg) scale(1.1);*/
 
 background:#fff;
}

.impact-card img{
    width:80px!important;
    height:80px!important;
    padding:5px;
    border-radius:10px;
    
}

.counter-value {
  color: var(--color-secondary); /* Dark text for better contrast */
  text-shadow: none; /* Remove text shadow to keep it clean on white */
}

.section-title {
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-primary); /* Dark color for better readability */

}
.impact-card .lead {
    color: #333; /* Or any contrasting color */
    font-weight: 400;
}

.impact-card:hover .lead {
    color: #fff; /* Or any contrasting color */
    font-weight: 400;
}

/* Base colors inspired by the reference */
.newsletter-hero {
  min-height: 260px;
  background-color: #123a36; 
}

.newsletter-bg {
    pointer-events: none;
    /* background: #e6ac22; */
     background: linear-gradient(135deg, #1C3557 0%, #4AA3C3 100%); 
    filter: saturate(1.05);
    /*background: url(https://getdemo.in/anviksha/assets/front/img/podcast.jpg);*/
    background-size: cover;
    background-attachment: fixed;
    filter: blur(2px);
    
}
/* Pill input + button */
.newsletter-form .newsletter-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid #fff;
  border-radius: 999px;
  backdrop-filter: blur(2px);
  transition: box-shadow .2s ease, border-color .2s ease;
}

.newsletter-form .newsletter-pill:focus-within {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.newsletter-input {
  background: transparent !important;
  border: 0 !important;
  color: #fff;
  padding: 1rem 1.25rem;
  font-size: 1rem;
}

.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

/* Button styled like a white rounded pill */
.newsletter-btn {
  margin: .25rem;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font-weight: 600;
  padding: .75rem 1.25rem;
  border: 0;
  white-space: nowrap;
  transition: background-color .15s ease, transform .05s ease;
}

.newsletter-btn:hover {
  background: #f3f4f6;
}

.newsletter-btn:active {
  transform: translateY(1px);
}

/* Spacing and typography helpers */
.newsletter-hero .text-warning { color: #f3a33b !important; }
.newsletter-hero .display-6 { line-height: 1.15; }

/* Responsive tuning to mimic the long capsule on large screens */
@media (min-width: 992px) {
  .newsletter-form { max-width: 720px; margin-left: auto; }
}
@media (max-width: 575.98px) {
  .newsletter-input { padding: .9rem 1rem; font-size: .95rem; }
  .newsletter-btn { padding: .65rem 1rem; font-size: .9rem; }
}

.footer-section i{
    color: var(--color-accent)!important;
}

.footer-section {
    background-color: var(--color-footer-bg);
    color: var(--color-text-dark);
    /* font-family: var(--font-body); */
}

.footer-section h5 {
    /* font-family: var(--font-heading); */
    font-weight: 600;
    color: var(--color-text-dark)!important;
}

.footer-link {
    color: var(--color-text-dark)!important;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-link:hover {
    color: var(--color-accent-orange);
}

.text-accent {
    color: var(--color-accent-red);
}

.social-link {
  color: var(--color-text-dark)!important;
    font-size: 1.2rem;
    transition: color 0.3s, transform 0.3s;
}

.social-link:hover {
    color: var(--color-accent-orange);
    transform: translateY(-3px);
}

.footer-bottom {
    background-color: #1e1e1e;
}

.text-accent-orange {
    color: var(--color-accent-orange);
}

.footer-link {
  color: var(--color-text-dark)!important;
    text-decoration: none;
    transition: color 0.3s;
}

/*.footer-link:hover {*/
/*    color: var(--color-accent-red);*/
/*}*/

.footer-link i {
    transition: transform 0.3s ease, color 0.3s ease;
}

.footer-link:hover i {
    /*color: var(--color-accent-red);*/
    transform: translateX(4px);
}


/* --- Spotlight Section (White Creative Version) --- */
.card-spotlight {
    /* background: var(--color-accent-red); */
    background: linear-gradient(135deg, #ef7f1a 0%, #e51a4b 100%);
    color: #1C3557!important;
    /* background: #ede8d0; */
}
  

.spotlight-card {
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.4s ease;
  transform: translateY(0);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.spotlight-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 25px rgba(255, 140, 0, 0.25);
}

/* Image wrapper */
.spotlight-img-wrapper {
  position: relative;
  overflow: hidden;
}

.spotlight-img-wrapper img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: all 0.5s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.spotlight-card:hover .spotlight-img-wrapper img {
  transform: scale(1.08);
  filter: brightness(90%);
}

/* Overlay icon */
.spotlight-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 140, 0, 0.2);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.spotlight-card:hover .spotlight-overlay {
  opacity: 1;
}

.spotlight-body {
  padding: 1.5rem;
  text-align: center;
}

/* --- Button Styles with Icons (Light Mode) --- */
.spotlight-btn-red {
  background:var(--color-accent);
  color: #fff;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(217, 4, 41, 0.2);
}

.spotlight-btn-red:hover {
  background: #a3001f;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(217, 4, 41, 0.3);
}

.spotlight-btn-orange {
  background: var(--color-accent);
  color: #fff;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(255, 140, 0, 0.2);
}

.spotlight-btn-orange:hover {
  background: #ff9a1a;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(255, 140, 0, 0.3);
}

.spotlight-btn-green {
  background: var(--color-accent);
  color: white;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2);
}

.spotlight-btn-green:hover {
  background: #208d3a;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(40, 167, 69, 0.3);
}

/* Title & paragraph refinement */
.spotlight-body h5 {
  font-weight: 600;
  margin-bottom: 10px;
}

.spotlight-body p {
  color: #555;
}



.resource-item {
    padding: 5px;
    margin-top: 5px;
}

.video-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 2px; /* Space for gradient border */
  /* background-image: linear-gradient(135deg, #ff7f50, #ffb347); */
  transition: all 0.4s ease;
}

.video-card > div {
  background: linear-gradient(135deg, #ff7f50, #ffb347); /* coral → orange gradient */
  border-radius:0 0 16px 16px;
  overflow: hidden;
  color: #fff;
  transition: background 0.4s ease;
}

.video-card:hover > div {
  background: linear-gradient(135deg, #ff6347, #ffa94d); /* deeper coral → gold */
}

/* Ensure text inside remains white */
.video-card h6,
.video-card p {
  color: #fff !important;
}

.video-card .ratio{
  border-radius: 16px 16px 0 0;
}
.video-card iframe {
  transition: transform 0.4s ease;
}

.video-card:hover iframe {
  transform: scale(1.03);
}

.video-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(255, 127, 80, 0.25);
}

/* Optional inner glow when hovered */
.video-card:hover > div {
  box-shadow: inset 0 0 12px rgba(255, 111, 97, 0.2);
}


/* --- Beautiful Custom Audio Player Styling --- */
.custom-audio {
  width: 100%;
  border-radius: 30px;
   border:1px solid var(--color-primary);
  padding: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  outline: none;
}

/* Remove default border in some browsers */
.custom-audio::-webkit-media-controls-panel {
  border-radius: 30px;
  border:1px solid var(--color-primary);
  box-shadow: inset 0 0 2px rgba(0,0,0,0.05);
}

/* Customize buttons and progress bar */
.custom-audio::-webkit-media-controls-play-button,
.custom-audio::-webkit-media-controls-mute-button {
  border:1px solid var(--color-primary);
  border-radius: 50%;
  transition: background-color 0.3s;
}

.custom-audio::-webkit-media-controls-play-button:hover,
.custom-audio::-webkit-media-controls-mute-button:hover {
  border:1px solid var(--color-primary);
}

/* Progress bar color */
.custom-audio::-webkit-media-controls-timeline {
  background-color: #dee2e6;
  border-radius: 5px;
}

.custom-audio::-webkit-media-controls-current-time-display,
.custom-audio::-webkit-media-controls-time-remaining-display {
  color: #495057;
  font-weight: 500;
}

/* Volume slider styling */
.custom-audio::-webkit-media-controls-volume-slider {
  border-radius: 10px;
  background-color: #e9ecef;
}
.card img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover img {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


/* Smooth animation defaults */
.impact-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
}

/* Hover pop effect */
.impact-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

/* Icon pulse animation on hover */
.impact-card:hover .impact-icon {
    animation: pulseIcon 0.6s ease-in-out;
}

/* Icon animation */
@keyframes pulseIcon {
    0% { transform: scale(1); }
    50% { transform: scale(1.18) rotate(3deg); }
    100% { transform: scale(1); }
}

/* Icon base transition */
.impact-icon {
    transition: transform 0.3s ease;
}

#page-top{overflow-x:hidden;}


/* ===================== BASIC DROPDOWN ====================== */

.custom-dropdown-menu {
    border: 1px solid #e74c3c;
    border-radius: 8px;
    min-width: 130px;
    padding: 0;
}

.custom-dropdown-item {
    border-bottom: 1px solid #e74c3c;
    padding: 10px 15px;
    font-size: 15px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-dropdown-item:hover {
    background: #fff3f0;
    color: #e74c3c;
}

.custom-dropdown-menu li:last-child .custom-dropdown-item {
    border-bottom: none;
}
.dropdown-menu li a:hover{background:orange; color:#fff;
    border-radius:10px;
}
/* ===================== SUBMENU ====================== */

.dropdown-submenu {
    position: relative;
    width: 100%;
}

/*.submenu-header {
    border-bottom: 1px solid #e74c3c;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
*/
.submenu-header {
    border-bottom: 1px solid #e74c3c;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.submenu-header:last-of-type {
    border-bottom: none;
}
.submenu-arrow-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.sub-dropdown {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 240px;
    border: 1px solid #e74c3c;
    border-radius: 6px;
    background: white;
}

.sub-dropdown.show {
    display: block;
}

/* ===================== DESKTOP ====================== */
@media (min-width: 992px) {

    /* hover opens main dropdown */
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
       border-radius:10px;
    }

    /* hover opens submenu */
    .dropdown-submenu:hover > .sub-dropdown {
        display: block;
        
    }

    /* disable arrow click on desktop */
    .submenu-arrow-btn,
    .dropdown-arrow-btn {
        pointer-events: none;
        opacity: 0.5;
    }
}
.dropdown-arrow-btn{
    border:none;
}

/* ===================== MOBILE ====================== */
@media (max-width: 991px) {

    .dropdown-menu {
        width: 100%;
        position: static !important;
    }

    .dropdown-submenu .sub-dropdown {
        position: static;
        border: none;
        padding-left: 20px;
    }

    .sub-dropdown .custom-dropdown-item {
        padding-left: 20px;
    }

    .submenu-arrow-btn,
    .dropdown-arrow-btn {
        pointer-events: auto;
        opacity: 1;
    }
}
.navbar-toggler {
  position: relative;
  z-index: 10000;
}
.navbar-collapse.collapse{}

.dropdown-submenu .sub-dropdown {
    display: none;
}

.dropdown-submenu.active .sub-dropdown,
.dropdown-submenu .sub-dropdown.show {
    display: block;
}

/* Main dropdown */
.custom-dropdown-menu {
    display: none;
    position: absolute;
    background: white;
    z-index: 999;
    padding-left: 0;
}

.custom-dropdown.show > .custom-dropdown-menu {
    display: block;
}

/* Submenu */
.dropdown-submenu .sub-dropdown {
    display: none;
    padding-left: 10px;
}

.dropdown-submenu.active .sub-dropdown {
    display: block;
}

/* Mobile fix */
@media (max-width: 991px) {
    .custom-dropdown-menu {
        position: relative;
    }
}
.dropdown-arrow-btn,
.submenu-arrow-btn {
    transition: transform 0.3s ease;
    border: none;
    background: none;
    font-size: 20px;
}

.rotate {
    transform: rotate(180deg);
}

.custom-nav-link::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  left: 0;
  bottom: 4px;
  background-color:#F5A623;
  transition: all 0.3s ease-in-out;
}
.custom-nav-link:hover::after,
.custom-nav-link.active::after {
  width: 100%;
}
.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
     border: none; 
     
}
.custom-nav-link:hover {
  color: #F5A623 !important;
}

.text-orange{color:orange!important;}
/*.custom-dropdown-menu::last-child li .submenu-header{*/
/*    border-bottom:0px!important;*/
/*}*/