.navbar {
    background-color: rgba(255, 255, 255, 0);
    /* Initially transparent */
    transition: background-color 0.3s ease;
    /* Smooth transition */
    backdrop-filter: none;
    /* No blur */
    z-index: 1000;
    /* Stays above other elements */
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 1) !important;
    /* Opaque background when scrolled */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    /* Adds shadow when scrolled */
}

@media (max-width: 991.98px) {
    .navbar {
        background-color: white !important;
        /* Fixed background on small screens */
        box-shadow: none;
    }
}

.navbar .nav-links {
    color: #ffffff !important;
    /* White text for links */
    transition: color 0.2s ease;
    /* Smooth color transition */
    font-size: 18px;
    font-weight: 400;
}

.navbar .navbar-brand img {
    width: 45%;
    /* Sets width for the brand image */
}

.navbar.scrolled .navbar-brand img {
    content: url('../images/exf_logo.webp');
    /* Switches logo when scrolled */
}

.navbar .scrolled .nav-links,
.navbar .scrolled .navbar-brand,
.navbar .scrolled .btn,
.navbar.scrolled .dropdown-toggle{
    color: black !important;
    /* Changes link text color to black when scrolled */
}

@media (max-width: 991.98px) {

    .navbar .nav-links,
    .navbar .navbar-brand,
    .navbar .btn,
    .navbar.scrolled .dropdown-toggle {
        color: black !important;
        /* Black text on small screens */
    }
}

.nav-item.dropdown .dropdown-toggle::after {
    display: none !important;
    /* Hides the default dropdown arrow */
}

.navbar .dropdown-menu {
    background-color: white;
    /* Default background color for dropdown */
}

.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg ... white toggler icon ... %3E");
}

.navbar.scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg ... black toggler icon ... %3E");
}

@media (max-width: 991.98px) {
    .navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg ... black toggler icon ... %3E");
        /* Black icon on small screens */
    }
}

.navbar .btn {
    background-color: #E42527;
    /* Red background for the button */
    color: white;
    /* White text color */
}

.navbar.scrolled .btn,
.navbar.scrolled .dropdown-toggle {
    color: rgb(255, 255, 255) !important;
    /* Changes button text color to black when scrolled */
}
@media (max-width: 991.98px) {
    .navbar .dropdown-toggle {
        color: black !important;
        /* Changes button text color to black when scrolled */
    }
}
@media (max-width: 991.98px) {
    .navbar .btn {
        color: black !important;
        /* Black button text on small screens */
    }
}

@media (max-width: 991.98px) {
    .navbar {
        background-color: white !important;
        /* Fixed white background for small screens */
        box-shadow: none;
    }

    .navbar .nav-links,
    .navbar .navbar-brand,
    .navbar .btn {
        color: black !important;
        /* Black text and button for small screens */
    }

    .navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg ... black toggler icon ... %3E");
        /* Black icon on small screens */
    }
}
/* The container holding the cards inside the dropdown */
.dropdown-card-container {
    display: flex;
    grid-template-columns: repeat(6, 1fr); /* 6 cards per row */
    gap: 20px; /* Add spacing between the cards */
    padding: 10px;
}

/* Adjust card width as necessary */
.dropdown-card {
    background-color: #f6f8fa;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.dropdown-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

/* Image inside each card */
.dropdown-card-img {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
}

/* Card title link */
.dropdown-card-title {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    padding: 15px;
    text-decoration: none;
}

.dropdown-card-title:hover {
    color: #e42527; /* Red color on hover */
}

/* Styling for individual cards */
.dropdown-card {
    background-color: #f6f8fa;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.dropdown-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

/* Image inside each card */
.dropdown-card-img {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
}

/* Card title link */
.dropdown-card-title {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    padding: 15px;
    text-decoration: none;
}

.dropdown-card-title:hover {
    color: #e42527; /* Red color on hover */
}
.dropdown-card-img{
    width:25%;
}
.navbar.scrolled .nav-links {
    color:black !important;
}
.full-width-dropdown {
    position: absolute;
    left: 0;; /* Start from the left edge of the screen */
    right: 0; /* Span the entire screen width */
    top: 100%; /* Position it below the navbar */
    width: 100vw; /* Full viewport width */
    background-color: white;
    padding: 20px;
    z-index: 999;
    display: none; /* Initially hidden */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Ensure the dropdown becomes visible when the show class is added */
.full-width-dropdown.show {
    display: block;
    position:absolute;
    left: 0;; /* Start from the left edge of the screen */
    right: 0; /* Span the entire screen width */
    top: 100%; /* Position it below the navbar */
    width: 100vw;
}

/* Dropdown content arranged as cards */
.full-width-dropdown .dropdown-card-container {
    display: flex;
}

.full-width-dropdown .dropdown-card {
    background-color: #fff;
    border-radius: 10px;
    width: 22%; /* Adjust card width */
    padding: 15px;
    text-align: center;
}

.full-width-dropdown .dropdown-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.full-width-dropdown .dropdown-card-title {
    display: block;
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

.full-width-dropdown .dropdown-card-title:hover {
    color: #E42527; /* Change text color on hover */
}
.navbar .nav-item{
    position:static!important;
}
.success_sec_arrow {
    width: 28px !important;
    height: 30px !important;
    color:black !important;
}
.black-arrow {
    filter: brightness(0) invert(0); /* Converts the image to black */
}
.navbar-toggler-icon {
    filter: invert(1);  /* This will change the color to black */
}
/* This class will be added when the navbar is expanded */
.navbar-collapse.fullscreen-expanded {
    height: auto;
}
@media (max-width: 991.98px) {
    .navbar-collapse.fullscreen-expanded {
        height: 100vh;
        background-color:white ! important;
        overflow-y: auto; /* Ensure scrolling if content exceeds screen height */
        transition: height 0.3s ease;
    }
}

/* Default transparent background */
.navbar.transparent {
    background-color: transparent !important;
}

.navbar.white-bg {
    background-color: white !important;
}

.navbar-collapse.transparent-links .nav-links {
    background-color: transparent !important;
}
.navbar.white-bg .nav-links,
.navbar.white-bg .dropdown-toggle{
    color: black !important;
}
.demo_btn1{
    width:30px;
}
.policy_main_title {
    font-size: 20px;
    font-weight: 400;
}
@media (min-width: 765px) {
    .policy_main_title {
        font-size: 26px;
        font-weight: 400;
    }
}
@media (min-width: 966px) {
    .policy_main_title {
        font-size: 34px;
        font-weight: 400;
    }
}
.exafluence_sub_title {
    font-size: 18px;
    font-weight: 400;
}
@media (min-width: 765px) {
    .exafluence_sub_title {
        font-size: 22px;
        font-weight: 400;
    }
}
@media (min-width: 966px) {
    .exafluence_sub_title {
        font-size: 23px;
        font-weight: 400;
    }
}
.exafluence_desc1 {
    font-size: 14px;
    font-weight: 400;
}
@media (min-width: 765px) {
    .exafluence_desc1 {
        font-size: 15px;
        font-weight: 400;
    }
}
@media (min-width: 966px) {
    .exafluence_desc1 {
        font-size: 16px;
        font-weight: 400;
    }
}
.sub_text {
    font-size: 16px;
    font-weight: 500;
}
@media (min-width: 765px) {
    .sub_text {
        font-size: 17px;
        font-weight: 500;
    }
}
@media (min-width: 966px) {
    .sub_text {
        font-size: 18px;
        font-weight: 500;
    }
}
.sub_desc {
    font-size: 15px;
    font-weight: 400;
}
@media (min-width: 765px) {
    .sub_desc {
        font-size: 16px;
        font-weight: 400;
    }
}
@media (min-width: 966px) {
    .sub_desc {
        font-size: 17px;
        font-weight: 400;
    }
}