:root {
    /* colors sampled from your image */
    --primary:        #184C71;  /* nav, icons */
    --hero-start:     #D0F1F9;  /* page background */
    --hero-mid:       #AECFE1;  /* hero gradient mid */
    --hero-end:       #CDEEF1;  /* hero gradient end */
    --badge-secure:   #184C71;  /* secure badge */
    --badge-gdpr:     #FFF8CC;  /* GDPR badge */
    --badge-control:  #FFD564;  /* User‑control badge */
  }
  body {
    background-color: var(--hero-start);
    animation: fadeIn 0.8s ease-out;
}
.high-contrast body {
    background-color: black !important;
    color: yellow !important;
}
/*  High Contrast Mode */
.high-contrast {
    background-color: black !important;
    color: yellow !important;
}

a { text-decoration: none; }
.high-contrast a {
    color: yellow !important;
}
/* Top Navigation */
.navbar-custom {
    background-color: #0d3e62;
    color: #FFFFFF;
  }
.navbar-custom a,
.navbar-custom i,
.navbar-custom span {
    color: white !important;
}
.navbar-custom .btn-outline-secondary {
    color: white;
    border-color: rgba(255, 255, 255, 0.5);
}

.navbar-custom .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: white;
}

/* High Contrast - Top Contact Navbar */
.high-contrast .navbar-custom {
    background-color: black !important;
    border-color: yellow !important;
}

.high-contrast .navbar-custom a,
.high-contrast .navbar-custom span,
.high-contrast .navbar-custom i {
    color: yellow !important;
}

/* Fix icon buttons in accessibility tools */
.high-contrast .btn i {
    color: black !important;
}

/* Optional: if using SVG or inline icons without <i> */
.high-contrast .btn svg {
    fill: black !important;
    stroke: black !important;
}

      /* Nav Section */
    .navbar-logo { 
        height: 40px;
        filter: brightness(0) invert(1);        
    }

    .navbar-brand { font-weight: bold; }
  
    .home-navigation {
        background-color: var(--primary);
        color: #fff !important;
    }
    
    .home-navigation .nav-link {
        color: #ccc !important;
        font-weight: normal; 
    }
    
    .home-navigation .nav-link.active {
        font-weight: bold; 
        color: #fff !important;
    }
    /* Fix navbar links */
    .high-contrast .home-navigation .navbar-nav .nav-link {
        color: yellow !important;
    }
    .high-contrast .home-navigation .nav-link {
        color: yellow !important;
    }
    .high-contrast .navbar,
    .high-contrast .footer {
        background-color: black !important;
    }
    .high-contrast .card {
        background-color: black !important;
        border: 2px solid yellow !important;
    }
    .high-contrast .card h5,
    .high-contrast .card p {
        color: yellow !important;
    }
   
    .high-contrast .home-navigation .nav-link {
        color: yellow !important;
    }
    .high-contrast .home-navigation .nav-link.active {
        font-weight: bold;
        color: yellow !important;
    }
    .high-contrast .home-navigation .navbar-brand span {
        color: yellow !important;
    }
    .high-contrast .home-navigation .nav-link.active {
        background-color: yellow !important;
        color: black !important;
        border-left: 4px solid black !important;
    }
    
    .high-contrast .home-navigation .nav-link.active i {
        color: black !important;
    }
    
    .high-contrast .home-navigation .nav-link i {
        color: yellow !important;
    }
    
    
    .hero {
        background: linear-gradient(
          to bottom,
          var(--hero-start) 0%,
          var(--hero-mid)   50%,
          var(--hero-end)   100%
        );
        animation: fadeInUp 0.8s ease-out;
      }
      .high-contrast .hero {
        background: black !important;
        color: yellow !important;
    }
    
    /* Hero Section */
    .hero-section {
        color: white;
        align-items: center;
        /* padding: 7rem 0; */
    }

    .hero-section h1 {
        color: #1c2f45;
        font-size: 3.5rem;
        font-weight: bold;
        margin-bottom: 1rem;
    }

    .hero-section p {
        color: #3c5a6e;
        font-size: 1.50rem;
        font-weight: 300px;
        opacity: 0.9;
    }

    .hero-section .btn {
        padding: 1rem 2rem;
        /* Larger buttons */
        font-size: 1.1rem;
        border-radius: 0.3rem;
        margin-top: 1.5rem;
    }

    .hero-section .btn-primary {
        background-color: #f8f9fa;
        color: #2c3e50 ;
        border-color: #f8f9fa;
    }

    .hero-section .btn-primary:hover {
        background-color: #f0f0f0;
        border-color: #f0f0f0;
    }

    .hero-section .btn-outline-light {
        background-color: #184C71;
        border-color: #184C71;
        color: #CDEEF1;
    }

    .hero-section .btn-outline-light:hover {
        background-color: #184C71;
        color: #CDEEF1;
    }

    .hero-section .secure-btn{
        background-color: #184C71;
        border-color: #184C71;
        color: #CDEEF1;
    }

    .hero-section .gdpr-btn{
        background-color: var(--badge-gdpr);
        border-color: var(--badge-gdpr);
        color: #1c2a45;
    }

    .hero-section .user-control-btn{
        background-color: var(--badge-control);
        border-color: var(--badge-control);
    }

    /* Trust Badges */
    .hero-section .badge {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
        border-radius: 0.25rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    }

    /* Ensure full hero section switches in high contrast mode */
.high-contrast .hero-section {
    background: black !important;
    color: yellow !important;
}

.high-contrast .hero-section h1,
.high-contrast .hero-section p {
    color: yellow !important;
}

.high-contrast .hero-section .btn-primary {
    background-color: yellow !important;
    color: black !important;
    border-color: yellow !important;
}

.high-contrast .hero-section .btn-outline-light {
    background-color: yellow !important;
    color: black !important;
    border-color: yellow !important;
}

    
    /* Added styling for the notification badges and user count */
    .user-count-badge,
    .notification-badge {
        background-color: #28a745;
        color: white;
        padding: 0.80rem 0.75rem;
        border-radius: 0.25rem;
        font-size: 0.875rem;
    }
    .high-contrast .user-count-badge,
.high-contrast .notification-badge {
    background-color: yellow !important;
    color: black !important;
    border: 1px solid black !important;
}


    /* New Policy Notification Style */
    .policy-notification {
        background-color: #e7f6fb; 
        padding: 0.75rem 1rem;
        border-radius: 8px;
        margin: 1.50rem 0;
        max-width: 700px;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        box-shadow: none;
        border: 1px solid #cde8f2;
        justify-self: center;
    }

    .policy-notification .icon {
        background-color: #157347; 
        border-radius: 50%;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .policy-notification-text {
        display: flex;
        flex-direction: column;
        line-height: 1.4;
    }

    .policy-notification-text h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: #0a3e58;
    }

    .policy-notification-text p {
        font-size: 0.95rem;
        color: #333;
        margin: 0;
    }

    .policy-notification-text a {
        color: #0056b3;
        text-decoration: none;
    }

    .policy-notification-text a:hover {
        text-decoration: underline;
    }

    /* Policy notification */
.high-contrast .policy-notification {
    background-color: black !important;
    border: 1px solid yellow !important;
    color: yellow !important;
}

.high-contrast .policy-notification .icon {
    background-color: yellow !important;
    color: black !important;
}

.high-contrast .policy-notification-text h3,
.high-contrast .policy-notification-text p {
    color: yellow !important;
}


    /* Highlight active speak and read mode buttons */
    .active-mode {
        background-color: red !important;
        color: white !important;
    }

    /* Features Section */
    .features-section {
        padding: 4rem 0;
    }

    .features-section h2 {
        color: #1c2f45;
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 3rem;
        text-align: center;
    }

    .features-section .card {
        border: none;
        border-radius: 0.5rem;
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
        /* Subtle shadow */
        transition: transform 0.2s ease-in-out;
        /* Smooth transition */
        height: 100%;
    }

    .features-section .card:hover {
        transform: translateY(-0.5rem);
    }

    .features-section .card-title {
        color: #1c2f45;
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 0.75rem;
    }

    .features-section i {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    .features-section p {
        color: #184C71;
        font-size: 1rem;
        font-weight: 200;
    }

    /* Ensure the section background is black in high contrast mode */
    .high-contrast .features-section {
        background-color: black !important;
        color: yellow !important;
    }

    .high-contrast .features-section h2 {
        color: yellow !important;
    }
    
    /* Fix card colors */
    .high-contrast .features-section .card {
        background-color: black !important;
        border: 2px solid yellow !important;
    }

    /* Ensure text and icons inside the cards are yellow */
    .high-contrast .features-section .card h5,
    .high-contrast .features-section .card p,
    .high-contrast .features-section .card i {
        color: yellow !important;
    }

    /* Footer */
    .footer {
        /* background-color: #343a40; */
        background-color: #184C71;;
        color: #fff;
        padding: 2rem 0;
        text-align: center;
    }

    .footer a {
        color: #fff;
        text-decoration: none;
    }

    .footer a:hover {
        text-decoration: underline;
    }



.high-contrast input,
.high-contrast textarea,
.high-contrast select {
    background-color: black !important;
    color: yellow !important;
    border: 1px solid yellow !important;
}

/* Fix dropdown menus */
.high-contrast .dropdown-menu {
    background-color: black !important;
    border: 1px solid yellow !important;
}

.high-contrast .dropdown-item {
    color: yellow !important;
}

.high-contrast .dropdown-item:hover {
    background-color: yellow !important;
    color: black !important;
}

/* Ensure buttons in high contrast are readable */
.high-contrast button, 
.high-contrast .btn {
    background-color: yellow !important;
    color: black !important;
    border: 1px solid yellow !important;
}


/* Trust badges */
.high-contrast .secure-btn,
.high-contrast .gdpr-btn,
.high-contrast .user-control-btn {
    background-color: yellow !important;
    color: black !important;
    border-color: yellow !important;
}



.high-contrast .btn {
    background-color: yellow !important;
    color: black !important;
    border: 1px solid black !important;
}

.high-contrast .badge {
    background-color: yellow !important;
    color: black !important;
}
.contrast-active i {
    color: black !important;
}


/* Fix icon colors inside buttons */
.high-contrast .btn i {
    color: black !important;
}

/* Fix placeholder text in high contrast mode */
.high-contrast ::placeholder {
    color: yellow !important;
    opacity: 1;
}


 /* simple keyframe animations */
 @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }