/* Key color utilities */
.bg-saffron { background-color: #FF9933; }
.text-saffron { color: #FF9933; }
.bg-green { background-color: #138808; }
.text-green { color: #138808; }
.bg-primary { background-color: #ED1C24; }
.text-primary { color: #ED1C24; }
.bg-secondary { background-color: #000000; }
.text-secondary { color: #000000; }
.bg-light { background-color: #F3F4F6; }
.text-light { color: #4B5563; }
.bg-silver { background-color: #F0F0F0; }

/* Global */
body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }

/* Sticky nav */
.sticky-nav { transition: all .3s ease; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.sticky-nav.scrolled { background: rgba(255,255,255,.95); backdrop-filter: blur(10px); }

/* ==========================================================================
   Final Unified Header Styles
   ========================================================================== */

/* This ensures the spacer div has the correct initial height */
#header-spacer {
    transition: height 0.3s ease-in-out;
}

/* Scrolled state for the entire header container */
#main-header.scrolled #topbar {
    /* Make the topbar shorter on scroll */
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.8rem;
}

#main-header.scrolled #main-nav {
    /* Add the blurred white background to the nav part on scroll */
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-top-color: transparent;
}

#desktop-nav ul li {
  color: black;
} 

/* Text color changes on scroll */
#main-header.scrolled #desktop-nav {
    color: #2D3748; /* Dark text */
}

#main-header.scrolled #desktop-nav a.text-saffron {
    color: #FF9933 !important; /* Keep active link saffron */
}

#main-header.scrolled #mobile-menu-button i {
    color: #2D3748; /* Dark hamburger icon */
}


/* Hero slider - FIXED VERSION */
.hero-slider { 
    height: 100vh; 
    position: relative; 
    overflow: hidden; 
}

.hero-slide { 
    height: 100%; 
    background-size: cover; 
    background-position: center; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    opacity: 0; 
    transition: opacity 1s ease-in-out; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    color: white;
    pointer-events: none;
}

.hero-slide.active { 
    opacity: 1; 
    z-index: 1; 
    pointer-events: auto;
}

/* 1. New, darker gradient overlay for the hero slider */
.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* This new gradient is darker and more subtle, providing better text contrast */
    background: linear-gradient(135deg, rgba(29, 29, 29, 0.85) 0%, rgba(200, 50, 28, 0.7) 100%);
    z-index: 1;
}

.hero-content { 
    position: relative; 
    z-index: 2; 
    animation: fadeInUp 1.5s ease-out; 
}

/* 2. Style adjustments for the main heading */
.hero-content h1 {
    color: #FFFFFF; /* Ensures the main heading is always white */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow for depth */
}

/* 3. New Secondary Button Style */
.btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    transition: all .3s;
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
}

.btn-secondary:hover {
    background-color: white;
    color: #ED1C24; /* Your primary red color */
    transform: translateY(-2px);
}

@keyframes fadeInUp { 
    from { opacity: 0; transform: translateY(50px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.hero-arrow { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    background: rgba(255,255,255,.2); 
    color: white; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    z-index: 3; 
    transition: all .3s ease; 
    user-select: none;
}

.hero-arrow:hover { 
    background: rgba(255,255,255,.3); 
    transform: translateY(-50%) scale(1.1); 
}

.hero-prev { left: 2rem; } 
.hero-next { right: 2rem; }

/* Slide indicators styling */
.slide-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slide-dot.active {
    background-color: #FF9933 !important;
    transform: scale(1.2);
    opacity: 1 !important;
}

.slide-dot:hover {
    background-color: rgba(255, 153, 51, 0.8);
}
/* Enhanced animations */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up { animation: fade-in-up 0.8s ease-out; }

/* Counter animations */
.stat-item { transition: transform 0.3s ease; }
.stat-item:hover { transform: translateY(-5px); }

/* Enhanced hero slide overlay */
.hero-slide::before { 
  background: linear-gradient(135deg, rgba(255,153,51,.8) 0%, rgba(237,28,36,.6) 100%); 
}

/* Slide indicators */
.slide-dot.active { opacity: 1 !important; background-color: #FF9933; }

/* Feature card enhancements */
.feature-card:hover { transform: translateY(-10px) scale(1.02); }

/* Remove all green gradients and replace with saffron variants */
.program-card::after, 
.testimonial-card:after, 
.section-title::after,
.cta-section { 
  background: linear-gradient(to right, #FF9933, #ED1C24); 
}

.footer-wave { 
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z' fill='%23FF9933'%3E%3C/path%3E%3C/svg%3E") no-repeat;
}


/* Features */
.feature-card { transition: all .3s ease; border-top:4px solid #f93; overflow:hidden; position:relative; }
.feature-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,.1); }
/*
.feature-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:0; background: linear-gradient(to bottom, rgba(255,153,51,.1), rgba(19,136,8,.1)); transition: all .3s ease; z-index:0; }
*/
.feature-card::before        { background: linear-gradient(to bottom, rgba(255,153,51,.1), rgba(255,153,51,.05)); }
.feature-card:hover::before { height:100%; }
.feature-icon { font-size:2.5rem; color:#FF9933; margin-bottom:1rem; }

/* Programs */
.program-card { transition: all .3s ease; border-radius:12px; overflow:hidden; position:relative; }
.program-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,.1); }
/*
.program-card::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:5px; background: linear-gradient(to right, #FF9933, #138808); } 
*/
.program-card::after         { background: linear-gradient(to right, #FF9933, #FF6310); }
.program-badge { position:absolute; top:1rem; right:1rem; background:#ED1C24; color:white; padding:.25rem .75rem; border-radius:20px; font-size:.75rem; font-weight:600; }


/* Client slider */
.infinite-slider { overflow:hidden; position:relative; padding:2rem 0; }
.slider-track { display:flex; animation: scroll 30s linear infinite; width: calc(200px * 14); }
.slider-item { height:80px; width:180px; margin:0 1.5rem; display:flex; align-items:center; justify-content:center; filter:grayscale(100%); opacity:.7; transition: all .3s ease; }
.slider-item:hover { filter:grayscale(0); opacity:1; transform: scale(1.05); }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-180px * 7)); } }

/* CTA */
.cta-section { background: linear-gradient(to bottom right, #FF9933, #138808); padding:4rem 2rem; text-align:center; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: radial-gradient(circle, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 70%); animation: rotate 20s linear infinite; }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.cta-content { position:relative; z-index:1; color:white; }

/* Testimonials */
.testimonial-container { position:relative; max-width:1200px; margin:0 auto; padding:40px 20px; }
.testimonial-slider { position:relative; overflow:hidden; padding:30px 0; }
.testimonial-track { display:flex; transition: transform .5s cubic-bezier(.645,.045,.355,1); }
.testimonial-card { flex:0 0 calc(33.333% - 30px); margin:0 15px; background:white; border-radius:12px; padding:30px; box-shadow:0 10px 30px rgba(0,0,0,.08); transition: all .4s ease; position:relative; overflow:hidden; }
/*
.testimonial-card:after { content:''; position:absolute; bottom:0; left:0; width:100%; height:5px; background: linear-gradient(to right, #FF9933, #138808); }
*/
.testimonial-card:after      { background: linear-gradient(to right, #FF9933, #FF6310); }
.testimonial-card:hover { transform: translateY(-10px); box-shadow:0 15px 35px rgba(0,0,0,.12); }
.testimonial-content { position:relative; }
.testimonial-quote { position:absolute; top:-20px; right:10px; font-size:80px; color: rgba(255,153,51,.15); font-family: Georgia, serif; }
.testimonial-text { margin-bottom:20px; line-height:1.6; color:#4B5563; }
.testimonial-author { display:flex; align-items:center; }
.author-avatar { width:60px; height:60px; border-radius:50%; overflow:hidden; margin-right:15px; border:3px solid #FF9933; }
.author-avatar img { width:100%; height:100%; object-fit:cover; }
.author-details h4 { margin:0; font-weight:600; color:#1F2937; }
.author-details p { margin:5px 0 0; color:#6B7280; font-size:14px; }
.testimonial-rating { color:#FF9933; margin-top:5px; }
.testimonial-nav { display:flex; justify-content:center; margin-top:40px; gap:15px; }
.testimonial-dot { width:12px; height:12px; border-radius:50%; background:#D1D5DB; cursor:pointer; transition: all .3s ease; }
.testimonial-dot.active { background:#FF9933; transform: scale(1.3); }
.testimonial-arrow { position:absolute; top:50%; transform: translateY(-50%); width:50px; height:50px; border-radius:50%; background:white; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 5px 15px rgba(0,0,0,.1); z-index:10; transition: all .3s ease; }
.testimonial-arrow:hover { background:#FF9933; color:white; }
.testimonial-prev { left:-25px; }
.testimonial-next { right:-25px; }

/* Footer */
.footer-wave { position:absolute; top:0px; left:0; width:100%; height:40px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z' fill='%23f93'%3E%3C/path%3E%3C/svg%3E"); background-size:cover; transform: rotate(180deg); }
.footer-column h3 { position:relative; padding-bottom:12px; margin-bottom:20px; }
.footer-column h3:after { content:''; position:absolute; bottom:0; left:0; width:40px; height:3px; background:#FF9933; }
.footer-column li { transition: all .3s ease; padding:4px 0; }
.footer-column li:hover { transform: translateX(5px); }
.footer-column a { display:flex; align-items:center; gap:8px; transition: all .3s ease; }
.social-icons a { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background: rgba(255,255,255,.1); margin-right:10px; transition: all .3s ease; }
.social-icons a:hover { background:#FF9933; transform: translateY(-3px); }
.newsletter-form { display:flex; gap:10px; margin-top:15px; }
.newsletter-form input { flex:1; padding:10px 15px; border:none; border-radius:4px; background: rgba(255,255,255,.15); color:white; }
.newsletter-form input::placeholder { color: rgba(255,255,255,.7); }
.newsletter-form button { background:#FF9933; color:white; border:none; padding:10px 15px; border-radius:4px; cursor:pointer; transition: all .3s ease; }
.newsletter-form button:hover { background:#ED1C24; }

/* Buttons */
.btn-primary { background-color:#ED1C24; color:white; padding:.75rem 1.5rem; border-radius:.375rem; transition: all .3s; display:inline-block; text-decoration:none; font-weight:600; position:relative; overflow:hidden; }
.btn-primary:hover { background-color:#FF9933; transform: translateY(-2px); box-shadow:0 10px 20px rgba(237,28,36,.2); }
.btn-primary:active { transform: translateY(0); }

/* Section title */
.section-title { position:relative; display:block; margin-bottom:3rem; }
.section-title::after { content:''; position:absolute; bottom:-15px; left:50%; transform: translateX(-50%); width:80px; height:4px; background: linear-gradient(to right, #FF9933, #138808); border-radius:2px; }

/* Go top */
.go-top { position:fixed; bottom:2rem; right:2rem; background-color:#ED1C24; color:white; width:3rem; height:3rem; display:flex; align-items:center; justify-content:center; border-radius:50%; opacity:0; transition: all .3s; cursor:pointer; z-index:100; box-shadow:0 5px 15px rgba(0,0,0,.15); }
.go-top.visible { opacity:1; }
.go-top:hover { background-color:#FF9933; transform: translateY(-5px); }

/* Responsive */
@media (max-width:1024px){ .testimonial-card{ flex:0 0 calc(50% - 30px);} }
@media (max-width:768px){
  .testimonial-card{ flex:0 0 calc(100% - 30px); }
  .footer-column{ margin-bottom:30px; }
  .newsletter-form{ flex-direction:column; }
  .hero-arrow{ width:40px;height:40px; }
  .hero-prev{ left:1rem; } .hero-next{ right:1rem; }
}


/* ==========================================================================
   Enhanced Client Card Styles
   ========================================================================== */

.client-card {
    position: relative;
    background-color: white;
    border-radius: 0.75rem; /* 12px */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding: 2rem; /* 32px */
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.client-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.client-logo {
    max-height: 4rem; /* 64px */
    width: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.client-card:hover .client-logo {
    filter: grayscale(0%);
    opacity: 1;
}

.client-name {
    position: absolute;
    bottom: 1rem; /* 16px */
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: #4B5563; /* text-light */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.client-card:hover .client-name {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Enhanced Opportunities Page Styles
   ========================================================================== */

/* Filter Buttons */
.filter-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-weight: 600;
    color: #4B5563; /* text-light */
    background-color: white;
    border: 1px solid #D1D5DB; /* border-gray-300 */
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background-color: #f0f0f0;
    color: #000000; /* text-secondary */
}

.filter-btn.active {
    background-color: #ED1C24; /* bg-primary */
    color: white;
    border-color: #ED1C24;
}

/* Opportunity Cards */
.opportunity-card {
    background-color: white;
    border-radius: 0.75rem; /* 12px */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.opportunity-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.opportunity-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #FF9933; /* bg-saffron */
    color: white;
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 9999px;
    letter-spacing: 0.05em;
}

.opportunity-link {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #ED1C24; /* text-primary */
    transition: color 0.3s ease;
}

.opportunity-link:hover {
    color: #FF9933; /* text-saffron */
}

.opportunity-link i {
    transition: transform 0.3s ease;
}

.opportunity-link:hover i {
    transform: translateX(4px);
}

/* ==========================================================================
   Enhanced Training Page Styles
   ========================================================================== */

.training-card {
    background-color: white;
    border-radius: 1rem; /* 16px */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e5e7eb; /* border-gray-200 */
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #ED1C24; /* bg-primary */
    color: white;
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 9999px;
    letter-spacing: 0.05em;
}

/* Accordion Styles */
.accordion-item {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #f9fafb; /* bg-gray-50 */
    font-weight: 600;
    text-align: left;
    color: #374151; /* text-gray-700 */
    cursor: pointer;
}

.accordion-header:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0 1rem;
    background-color: white;
    color: #4B5563; /* text-light */
    font-size: 0.9rem;
}

.accordion-item.active .accordion-header {
    background-color: #f3f4f6;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-item.active .accordion-content {
    padding: 1rem;
    max-height: 200px; /* Adjust as needed */
}

/* ==========================================================================
   Enhanced Resources Page Styles
   ========================================================================== */

.resource-column {
    background-color: white;
    border-radius: 0.75rem; /* 12px */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.resource-header {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
    padding: 1.25rem 1.5rem;
    background-color: #1A1A1A; /* Dark Background */
    color: white;
}

.resource-header i {
    font-size: 1.25rem; /* 20px */
    color: #FF9933; /* Saffron */
}

.resource-header h2 {
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
}

.resource-list {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
}

.resource-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #f9fafb; /* bg-gray-50 */
    border-radius: 0.5rem;
    font-weight: 600;
    color: #374151; /* text-gray-700 */
    transition: all 0.3s ease;
}

.resource-item:hover {
    background-color: #ED1C24; /* Primary Red */
    color: white;
    transform: translateX(4px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.resource-item:hover i {
    color: white;
}

/* Glossary Styles */
.glossary-item {
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: background-color 0.3s ease;
}

.glossary-item[open] {
    background-color: #f9fafb;
}

.glossary-item summary {
    font-weight: 600;
    cursor: pointer;
    color: #1A1A1A;
}

.glossary-item p {
    margin-top: 0.75rem;
    color: #4B5563;
    line-height: 1.6;
}


/* ==========================================================================
   New Homepage Section Styles
   ========================================================================== */

/* "Who We Train" Section */
.audience-card {
    background-color: white;
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.audience-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.audience-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875rem;
}

.audience-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1A1A1A; /* Dark text */
    margin-bottom: 0.75rem;
}

.audience-card p {
    color: #4B5563; /* text-light */
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.audience-card a {
    font-weight: 600;
    color: #ED1C24; /* Primary Red */
    transition: color 0.3s ease;
}

.audience-card a:hover {
    color: #FF9933; /* Saffron */
}

/* Training Path Section */
.path-card {
    background-color: white;
    border-radius: 0.75rem;
    padding: 2rem;
    border-top: 4px solid #FF9933; /* Saffron border */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.path-level {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #FF9933;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 9999px;
    margin-bottom: 1rem;
}

.path-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.path-card p {
    color: #4B5563;
    margin-bottom: 1rem;
}

.path-modules {
    space-y: 0.5rem;
    color: #4B5563;
}

.path-modules li {
    display: flex;
    align-items: center;
}

.path-modules i {
    color: #ED1C24; /* Primary Red */
    margin-right: 0.5rem;
}

/* ==========================================================================
   Enhanced Submenu (Dropdown) Styles
   ========================================================================== */

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Initial position for slide-in effect */
    width: 16rem; /* 256px */
    background-color: white;
    color: #1A1A1A; /* Dark text */
    border-radius: 0.5rem; /* 8px */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 1000;
    margin-top: 1rem; /* Space between nav link and dropdown */
}

/* Show dropdown on hover */
.group:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Dropdown Arrow */
.dropdown-arrow {
    position: absolute;
    bottom: 100%; /* Position it at the top of the dropdown box */
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
}

/* Dropdown Items */
.dropdown-item {
    display: block;
    padding: 0.75rem 1.25rem; /* 12px 20px */
    font-weight: 500;
    color: #374151; /* text-gray-700 */
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dropdown-item:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #ED1C24; /* Primary Red */
    transform: translateX(4px);
}

/* ==========================================================================
   Mobile Submenu Styles
   ========================================================================== */

.submenu-toggle {
    padding: 0.5rem;
    color: #FF9933; /* Saffron */
    background: none;
    border: none;
    cursor: pointer;
}

.submenu-toggle i {
    transition: transform 0.3s ease;
}

/* Rotate the icon when the submenu is open */
.has-submenu.open .submenu-toggle i {
    transform: rotate(180deg);
}

.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    padding-left: 1.5rem; /* Indent submenu items */
    margin-top: 0.5rem;
}

.mobile-submenu-item {
    display: block;
    padding: 0.5rem 0;
    color: #4B5563; /* text-light */
    font-size: 0.9em; /* Slightly smaller than parent */
    font-weight: 500;
    transition: color 0.3s ease;
}

.mobile-submenu-item:hover {
    color: #ED1C24; /* Primary Red */
}

/* ==========================================================================
   Enhanced Features Section Styles
   ========================================================================== */

.feature-card-link {
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 1rem; /* 16px */
    padding: 2rem; /* 32px */
    text-align: left;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb; /* border-gray-200 */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.feature-card-link:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: #FF9933; /* Saffron border on hover */
}

.feature-icon {
    width: 4rem; /* 64px */
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #FFFBEB; /* Light Saffron bg-amber-50 */
    color: #FF9933; /* Saffron */
    font-size: 1.875rem; /* 30px */
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.feature-card-link:hover .feature-icon {
    background-color: #FF9933;
    color: white;
    transform: scale(1.1);
}

.feature-title {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: #1A1A1A; /* Dark text */
    margin-bottom: 0.75rem;
}

.feature-description {
    color: #4B5563; /* text-light */
    line-height: 1.6;
    flex-grow: 1; /* Pushes the CTA to the bottom */
    margin-bottom: 1.5rem;
}

.feature-cta {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #ED1C24; /* Primary Red */
}

.feature-cta i {
    transition: transform 0.3s ease;
}

.feature-card-link:hover .feature-cta i {
    transform: translateX(5px);
}

/* Secondary Features */
.secondary-feature {
    background-color: #F9FAFB; /* bg-gray-50 */
    padding: 1.5rem;
    border-radius: 0.75rem;
}

.secondary-feature i {
    font-size: 1.875rem;
    color: #FF9933; /* Saffron */
    margin-bottom: 0.75rem;
}

.secondary-feature h4 {
    font-weight: 700;
    color: #1A1A1A;
    font-size: 1.125rem; /* 18px */
}

.secondary-feature p {
    color: #4B5563;
    font-size: 0.875rem; /* 14px */
}
/* Basic styles */
#cc-banner.cc-hidden, #cc-modal.cc-hidden, #cc-revisit.cc-hidden { display: none; }

#cc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: rgba(15, 23, 42, 0.96); color: #e2e8f0;
  backdrop-filter: saturate(180%) blur(6px);
  padding: 0.75rem;
  box-shadow: 0 -6px 16px rgba(0,0,0,.25);
}
#cc-banner .cc-container {
  max-width: 1100px; margin: 0 auto; padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
#cc-banner .cc-content { display: grid; gap: 0.75rem; }
#cc-banner h2 { margin: 0; font-size: 1.125rem; color: #fff; }
#cc-banner p { margin: 0; color: #cbd5e1; line-height: 1.6; }
#cc-banner .cc-link { color: #f59e0b; text-decoration: underline; }
#cc-banner .cc-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

.cc-btn { border: 0; border-radius: 10px; padding: 0.6rem 0.9rem; font-weight: 600; cursor: pointer; }
.cc-accept { background: #16a34a; color: #fff; }
.cc-reject { background: #334155; color: #e2e8f0; }
.cc-manage { background: #f59e0b; color: #0f172a; }
.cc-btn:focus { outline: 3px solid #f59e0b; outline-offset: 2px; }

/* Modal */
#cc-modal {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  background: rgba(2, 6, 23, 0.65); backdrop-filter: blur(3px);
}
#cc-modal .ccm-container {
  width: min(720px, 94vw); background: #0b1020; color: #e2e8f0; border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  padding: 1rem 1rem 1.25rem; box-shadow: 0 12px 36px rgba(0,0,0,.35);
}
#cc-modal .ccm-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
#cc-modal h2 { margin: 0.25rem 0 0.25rem; color: #fff; font-size: 1.25rem; }
#cc-modal .ccm-intro { color: #cbd5e1; }
.ccm-close { background: transparent; color: #94a3b8; border: 0; font-size: 1.5rem; cursor: pointer; }
.ccm-close:focus { outline: 3px solid #f59e0b; outline-offset: 2px; }

.ccm-group { margin-top: 0.75rem; display: grid; gap: 0.75rem; }
.ccm-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem; border-radius: 12px; background: rgba(148,163,184,.08); }
.ccm-info h3 { margin: 0 0 0.25rem; color: #fff; font-size: 1rem; }
.ccm-info p { margin: 0; color: #cbd5e1; font-size: 0.95rem; }
.cc-switch { position: relative; display: inline-block; width: 48px; height: 26px; }
.cc-switch input { opacity: 0; width: 0; height: 0; }
.cc-slider { position: absolute; cursor: pointer; inset: 0; background: #475569; transition: .2s; border-radius: 999px; }
.cc-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; top: 3px; background: white; transition: .2s; border-radius: 50%; }
.cc-switch input:checked + .cc-slider { background: #16a34a; }
.cc-switch input:checked + .cc-slider:before { transform: translateX(22px); }
.cc-switch.disabled .cc-slider { background: #64748b; cursor: not-allowed; }
.ccm-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* Revisit button */
.cc-revisit {
  position: fixed; right: 16px; bottom: 16px; z-index: 9998; 
  background: #334155; color: #e2e8f0; border: 0; border-radius: 12px; padding: 0.6rem 0.9rem; font-weight: 600; cursor: pointer;
}
.cc-revisit:focus { outline: 3px solid #f59e0b; outline-offset: 2px; }

/* Responsive */
@media (max-width: 640px) {
  #cc-banner .cc-container { grid-template-columns: 1fr; }
  #cc-banner .cc-actions { justify-content: flex-start; }
}