:root {
    --themeColor: #29AC38;
    --secondaryColor: #09304D;
    --textcolor: #010000;
    --blackColor: #000;
    --whiteColor: #fff;
}

/* CUSTOM CSS HERE */
* {
    font-family: "Outfit", sans-serif;
    margin: 0;
    padding: 0;
    line-height: normal !important;
}

body {
    margin: 0;
    padding: 0;
    height: 100dvh;
    font-weight: 400;
    box-sizing: border-box;
    line-height: normal;
    background-color: var(--whiteColor) !important;
}

/* Custom Scrollbar */
.page-scroll-area {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.page-scroll-area::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.page-scroll-area::-webkit-scrollbar-track {
    background: #b1b1b1c0;
    border-radius: 10px;
}

.page-scroll-area::-webkit-scrollbar-thumb {
    background: var(--themeColor);
    border-radius: 10px;
}

.container {
    max-width: 1200px !important;
}

body::-webkit-scrollbar {
    display: none;
}

a {
    text-decoration: none !important;
}

/* FONT SIZE */
.font-42 {
    font-size: clamp(1.8rem, 1.7019rem + 0.9231vw, 2.625rem);
}

.font-36 {
    font-size: clamp(1.7rem, 1.5rem + 1vw, 2.25rem);
}

.font-32 {
    font-size: clamp(1.375rem, 1.2308rem + 0.7692vw, 2rem);
}

.font-24 {
    font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);
}

.font-20 {
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}

.font-18 {
    font-size: clamp(1rem, 0.9779rem + 0.1176vw, 1.125rem);
}

.font-16 {
    font-size: clamp(0.875rem, 0.8462rem + 0.1538vw, 1rem) !important;
}

.font-14 {
    font-size: clamp(0.8125rem, 0.8015rem + 0.0588vw, 0.875rem);
}

.font-12 {
    font-size: clamp(0.625rem, 0.6rem + 0.125vw, 0.75rem);
}

.font-10 {
    font-size: 10px;
}

/* FONT WEIGHT */
.light {
    font-weight: 300;
}

.regular {
    font-weight: 400;
}

.medium {
    font-weight: 500;
}

.semibold {
    font-weight: 600;
}

.bold {
    font-weight: 700;
}

.extraBold {
    font-weight: 800;
}

/* TEXT COLORS */
.textColor {
    color: var(--textcolor);
}

.textLight {
    color: #6c757d;
}

.themeColor {
    color: var(--themeColor);
}
.white-50 {
    color: #ffffffc9;
}
.py-38 {
    padding-top: 38px;
    padding-bottom: 38px;
}

/* Navbar */
.navbar-container {
    position: sticky;
    top: 8px;
    z-index: 998;
}

.navbar-content {
    box-shadow: 0 0px 4px rgba(0, 51, 153, 0.4), 0 4px 16px rgba(41, 172, 56, 0.15);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    border-bottom: 2px solid var(--themeColor);
}

/* Navbar Top Section - Logo & Primary Menu */
.navbar-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--themeColor);
    border-radius: 8px 8px 0px 0px;
    position: relative;
    z-index: 1001;
}

.nav-logo img {
    height: clamp(40px, 3.5vw + 20px, 45px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px;
}

.nav-logo img:hover {
    transform: scale(1.05);
}

/* Navbar Bottom Section - Secondary Links */
.navbar-bottom {
    background: rgba(41, 172, 56, 0.08);
}

.nav-bottom-link {
    color: var(--themeColor);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
}

.nav-bottom-link:hover {
    color: var(--secondaryColor);
    transform: translateY(-2px);
}

.nav-bottom-link.active {
    color: #09304d;
    background: rgb(9 48 77 / 8%);
    font-weight: 700;
}

.nav-menu {
    display: clamp(0, 100vw - 768px, 1) * flex;
    display: flex;
    flex-direction: row;
    position: static;
    width: auto;
    padding: 0;
    gap: clamp(1rem, 2vw, 2rem);
    animation: none;
    background-color: transparent;
    border-radius: 0;
    align-items: center;
}

.nav-logo {
    display: block !important;
    flex-shrink: 0;
}

.nav-logo img {
    display: block !important;
}

/* Hide navbar bottom on smaller screens */
.navbar-bottom {
    display: clamp(0, 100vw - 768px, 1) * block;
}

/* Animation keyframes - responsive */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(clamp(20px, 4vw, 30px));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-link-item {
    color: var(--whiteColor);
    text-decoration: none;
    font-size: clamp(13px, 1.5vw, 14px);
    font-weight: 500;
    padding: clamp(0.4rem, 1vw, 0.5rem) 0;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    white-space: nowrap;
}

.nav-link-item:hover {
    color: var(--secondaryColor);
    background: rgba(41, 172, 56, 0.1);
    transform: translateY(-2px);
    border-radius: 6px;
}

.nav-link-item:hover::before {
    width: 100%;
}

.nav-link-item.active {
    color: #09304d;
    background: rgb(9 48 77 / 8%);
    font-weight: 700;
}

.nav-link-item.active::before {
    width: 100%;
}

/* Responsive nav link adjustments */
.nav-link-item {
    color: clamp(var(--whiteColor), 100vw - 768px, var(--textcolor));
}

.nav-link-item:hover {
    background: clamp(rgba(41, 172, 56, 0.1), 100vw - 768px, rgba(0, 51, 153, 0.1));
    color: var(--secondaryColor);
}

/* ============================================
   COMMON SECTION HEADER STYLES
   ============================================ */
.section-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--themeColor) 0%, var(--themeColor) 100%);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(41, 172, 56, 0.3);
}

.section-title {
    font-size: clamp(1.75rem, 1.6618rem + 0.4706vw, 2.25rem);
    display: inline-block;
    letter-spacing: -0.5px;
}

.section-title .highlight {
    font-weight: 800;
}

.section-title .highlight::before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: -4px;
    right: -4px;
    height: 8px;
    background: linear-gradient(90deg, rgba(41, 172, 56, 0.2) 0%, rgba(41, 172, 56, 0.3) 50%, rgba(41, 172, 56, 0.2) 100%);
    border-radius: 4px;
}


/* ========== NAVBAR BUTTONS - SIMPLE & PREMIUM STYLE ========== */
.cta {
    padding: clamp(0.5rem, 0.4779rem + 0.1176vw, 0.625rem) clamp(1rem, 0.8456rem + 0.8235vw, 1.875rem);
    border-radius: clamp(6px, 1vw, 8px);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

/* Mobile responsive buttons */
.navbar-container .button {
    justify-content: clamp(flex-start, 100vw - 768px, center);
    border: clamp(1px, 0.2vw, 2px) solid var(--secondaryColor);
    color: var(--secondaryColor);
    width: clamp(auto, 100vw - 768px, 100%);
}

/* ========== LOGIN BUTTON - SIMPLE OUTLINE ========== */
.btn-login {
    background: transparent;
    border: 2px solid var(--whiteColor);
    color: var(--whiteColor);
    box-shadow: none;
}

.btn-login::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--whiteColor);
    transition: width 0.3s ease;
    z-index: -1;
}

.btn-login:hover {
    color: var(--secondaryColor);
    border-color: var(--whiteColor);
    transform: translateY(clamp(-1px, -0.5vw, -2px));
}

.btn-login:hover::before {
    width: 100%;
}

.btn-login .text_button,
.btn-login .arrow-icon {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.btn-login:hover .arrow-icon {
    transform: translateX(clamp(2px, 0.5vw, 3px));
}

/* ========== JOIN NOW BUTTON - PREMIUM SOLID ========== */
.btn-join {
    background: var(--themeColor);
    color: var(--whiteColor);
    box-shadow: 0 4px 15px rgba(41, 172, 56, 0.3);
}

.btn-join::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--secondaryColor);
    transition: left 0.3s ease;
    z-index: -1;
}

.btn-join:hover {
    transform: translateY(clamp(-1px, -0.5vw, -2px));
    box-shadow: 0 6px 20px rgba(41, 172, 56, 0.5);
}

.btn-join:hover::before {
    left: 0;
}

.btn-join .text_button,
.btn-join .arrow-icon {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.btn-join:hover .text_button {
    color: var(--whiteColor);
}

.btn-join:hover .arrow-icon {
    transform: translateX(clamp(3px, 0.8vw, 4px));
    color: var(--whiteColor);
}

.text_button {
    transition: all 0.3s ease;
}

.arrow-icon {
    transition: all 0.3s ease;
    margin-left: 0.2rem;
    stroke-width: 2;
}


.expertise-card.animate-in {
    animation: fadeInUp 0.6s ease-out forwards;
    animation-delay: var(--card-delay, 0s);
}

.client-item.animate-in {
    animation: fadeInUp 0.6s ease-out forwards;
    animation-delay: var(--card-delay, 0s);
}

.accordion-item.animate-in {
    animation: fadeInUp 0.6s ease-out forwards;
    animation-delay: var(--card-delay, 0s);
}

/* ============================================
   OUR CLIENTS SECTION - Sliding Animation
   ============================================ */

.clients-section {
    background: var(--whiteColor);
}

.clients-subtitle {
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.clients-slider {
    width: 100%;
}

.clients-track {
    width: fit-content;
    display: flex;
    gap: 1rem;
}

.client-item {
    flex-shrink: 0;
    width: 180px;
    height: 120px;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.client-item:hover {
    border-color: var(--secondaryColor);
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 6px 18px rgba(1, 43, 179, 0.15);
}

.client-item:hover::before {
    opacity: 1;
}

.client-item img {
    max-width: 75%;
    max-height: 75%;
    object-fit: contain;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
    filter: grayscale(20%);
}

.client-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* ============================================
   FAQ SECTION - Spiritual Travel Agency Redesign
   ============================================ */
.faq-section .accordion-button:not(.collapsed) {
    box-shadow: none;
    background-color: transparent;
}

.faq-section .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.faq-item {
    background: rgba(255, 255, 255, 0.98);
    border: 2px solid #e9ecef;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.faq-item .faq-button {
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.faq-badge {
    background: var(--themeColor);
    color: var(--whiteColor);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.faq-arrow {
    display: none;
}

.faq-item .faq-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.08) 0%, rgba(41, 172, 56, 0.04) 100%);
}

.faq-item:has(.faq-button:not(.collapsed)) {
    border-color: var(--themeColor);
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.02) 0%, rgba(41, 172, 56, 0.01) 100%);
    transform: translateY(-4px);
}

.faq-item .faq-button:not(.collapsed) .faq-badge {
    box-shadow: 0 4px 12px rgba(41, 172, 56, 0.3);
    transform: scale(1.05);
}

.faq-body {
    padding: clamp(1rem, 0.9118rem + 0.4706vw, 1.5rem);
    border-top: 2px solid var(--themeColor);
    background: rgba(41, 172, 56, 0.03);
    animation: expandFaqBody 0.3s ease-out;
}

@keyframes expandFaqBody {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================
   FOOTER - Education Skills Council (IMPROVED)
   ============================================ */

.footer {
    background-color: var(--themeColor);
}

.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--themeColor) 0%, rgba(41, 172, 56, 0.6) 50%, var(--themeColor) 100%);
    z-index: 1;
}

/* Footer Top Section */
.footer-top {
    border-bottom: 1px solid rgba(0, 51, 153, 0.15);
    position: relative;
    z-index: 2;
}

/* Footer Brand */
.footer-brand {
    animation: slideInLeft 0.6s ease-out;
}

.footer-logo-wrapper {
    border-radius: 4px;
    border: 1px solid rgba(41, 172, 56, 0.2);
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-logo-wrapper:hover {
    background: rgba(41, 172, 56, 0.12);
    border-color: var(--themeColor);
    transform: translateY(-4px);
}

.footer-logo {
    width: 170px;
    border-radius: 4px;
    height: auto;
    transition: all 0.3s ease;
}

.footer-logo:hover {
    transform: scale(1.08);
    filter: brightness(1.2);
}

/* Footer Social */
.social-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(0, 51, 153, 0.15) 0%, rgba(0, 51, 153, 0.08) 100%);
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.social-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--secondaryColor) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    z-index: 0;
}

.social-icon:hover {
    border-color: var(--themeColor);
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 12px 24px rgba(0, 51, 153, 0.3), inset 0 0 10px rgba(41, 172, 56, 0.2);
}

.social-icon:hover::before {
    width: 250px;
    height: 250px;
}

.social-icon img {
    width: 20px;
    height: 20px;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

/* Footer Links Section */
.footer-links {
    animation: slideInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.footer-links:nth-child(1) {
    animation-delay: 0.1s;
}

.footer-links:nth-child(2) {
    animation-delay: 0.2s;
}


.footer-links ul li {
    margin-bottom: 16px;
}

.footer-links ul li a {
    color: #ffffffc9;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links ul li a:hover {
    color: var(--secondaryColor);
    transform: translateX(4px);
}

/* Footer Contact */
.footer-contact {
    animation: slideInUp 0.6s ease-out 0.3s both;
}

.contact-icon {
    width: 44px;
    height: 44px;
    background: rgba(0, 51, 153, 0.1);
    border-radius: 8px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    color: var(--whiteColor);
}


.contact-item a:hover {
    color: var(--secondaryColor);
}

/* Footer Bottom */
.footer-bottom {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(0, 51, 153, 0.15);
}

.footer-copyright {
    transition: all 0.3s ease;
}

.footer-bottom-links a {
    color: rgba(0, 51, 153, 0.75);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-bottom-links a:hover {
    color: var(--secondaryColor);
}

.footer-bottom-link a {
    transition: all 0.3s ease;
}

.footer-bottom-link a:hover {
    color: var(--secondaryColor);
}

.separator {
    color: #ffffffc9;
}

/* Animations */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Footer */
.footer-top {
    padding: clamp(1.5rem, 4vw, 2rem) 0 clamp(1.5rem, 4vw, 2rem);
}

.footer-bottom-bar>div {
    justify-content: clamp(flex-start, 100vw - 576px, center) !important;
    text-align: clamp(left, 100vw - 576px, center);
}

.footer-bottom {
    flex-direction: clamp(row, 100vw - 768px, column);
    gap: clamp(0, 100vw - 768px, 1rem);
}

.footer-logo {
    width: clamp(100px, 15vw, 170px);
}

@media (min-width: 992px) {
    .nav-toggle {
        display: none;
    }

    .navbar-bottom {
        display: block;
        position: static !important;
        width: auto !important;
        background: rgba(41, 172, 56, 0.08) !important;
        border: none !important;
        z-index: auto !important;
        padding: auto !important;
    }

    .navbar-bottom {
        .nav-link-item {
            color: var(--themeColor);
        }
    }

    .navbar-bottom-left,
    .navbar-bottom-right {
        display: flex;
    }

    .nav-menu {
        position: static;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        background: none;
        box-shadow: none;
        padding: 0;
        width: auto;
        gap: 20px;
        margin-top: 0;
        border: none;
    }

    .nav-link-item {
        padding: 4px 8px;
        white-space: nowrap;
        color: var(--whiteColor);
        font-weight: 600;
    }

    .nav-dropdown {
        width: auto;
        position: relative;
    }

    .dropdown-toggle {
        width: auto;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: none;
        border: none;
    }

    /* Show dropdown on hover */
    .nav-dropdown:hover .dropdown-menu {
        display: block;
        left: -65px;
    }

    /* Create invisible hover bridge between button and dropdown */
    .nav-dropdown::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 8px;
        pointer-events: auto;
    }

    .dropdown-menu {
        position: absolute;
        min-width: 200px !important;
        padding: 12px 0 !important;
        background: var(--whiteColor);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 0 20px rgba(41, 172, 56, 0.08);
        border-radius: 12px !important;
        border: none !important;
        top: calc(100% + 0.25rem);
        left: 0;
        display: none;
        backdrop-filter: blur(10px);
        animation: dropdownSlide 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        z-index: 1050 !important;
    }

    .dropdown-menu-lg {
        min-width: clamp(16rem, 17rem + 5vw, 18rem);
        max-height: 450px;
        overflow-y: auto;
        padding: 0.8rem 0;
    }

    .dropdown-menu-lg::-webkit-scrollbar {
        width: 6px;
    }

    .dropdown-menu-lg::-webkit-scrollbar-track {
        background: rgba(41, 172, 56, 0.05);
        border-radius: 10px;
    }

    .dropdown-menu-lg::-webkit-scrollbar-thumb {
        background: rgba(41, 172, 56, 0.3);
        border-radius: 10px;
        transition: background 0.3s ease;
    }

    .dropdown-menu-lg::-webkit-scrollbar-thumb:hover {
        background: rgba(41, 172, 56, 0.5);
    }

    @keyframes dropdownSlide {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

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

    .dropdown-item {
        margin-bottom: 0;
        padding: 0.65rem 1rem !important;
        color: var(--textcolor);
        text-decoration: none;
        display: block;
        border-radius: 0;
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        font-size: 14px;
        font-weight: 500 !important;
        position: relative;
        border-left: 3px solid transparent;
    }

    .dropdown-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--themeColor);
        transform: scaleY(0);
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .dropdown-item:hover {
        background: rgba(41, 172, 56, 0.08) !important;
        color: var(--themeColor) !important;
        padding-left: 1.5rem !important;
    }

    .dropdown-item:hover::before {
        transform: scaleY(1);
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@media (max-width: 991px) {
    .nav-menu {
        align-items: flex-start;
    }
}


/* ============================================
   WHY CHOOSE US SECTION
   ============================================ */

.why-choose-section {
    background: var(--whiteColor);
}

.feature-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-color: #e9ecef !important;
}

.feature-card::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -53px;
    width: 160px;
    height: 100px;
    background: linear-gradient(135deg, rgb(41 172 56 / 7%) 0%, rgb(9 50 87 / 2%) 100%);
    border-radius: 0px;
    transform: rotate(38deg);
    z-index: 0;
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: var(--themeColor) !important;
    box-shadow: 0 12px 24px rgba(0, 51, 153, 0.1);
}

.feature-icon {
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

.feature-card h3,
.feature-card p {
    position: relative;
    z-index: 1;
}





/* ============================================
   MEMBERSHIP TYPES SECTION
   ============================================ */

.membership-section {
    background: var(--whiteColor);
}

.membership-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-color: #e9ecef !important;
}

.membership-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--themeColor);
    transition: height 0.4s ease;
}

.membership-card:hover::before {
    height: 100%;
}

.membership-card:hover {
    transform: translateY(-10px);
    border-color: var(--themeColor) !important;
    box-shadow: 0 16px 32px rgba(41, 172, 56, 0.15);
}

.membership-badge {
    background: var(--themeColor);
    color: var(--whiteColor);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(41, 172, 56, 0.3);
}

.membership-icon {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    height: clamp(3.125rem, 3.0147rem + 0.5882vw, 3.75rem);
    width: clamp(3.125rem, 3.0147rem + 0.5882vw, 3.75rem);
}

.membership-card:hover .membership-icon {
    transform: scale(1.1) translateY(-5px);
}

.membership-benefits li {
    opacity: 0.9;
    transition: all 0.3s ease;
}

.membership-card:hover .membership-benefits li {
    opacity: 1;
    transform: translateX(5px);
}

.membership-card .btn-outline-primary {
    border-color: var(--secondaryColor);
    color: var(--secondaryColor);
    transition: all 0.3s ease;
}

.membership-card .btn-outline-primary:hover {
    background: var(--secondaryColor);
    color: var(--whiteColor);
    border-color: var(--secondaryColor);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 51, 153, 0.3);
}

/* ============================================
   HOW TO APPLY SECTION - Simple & Clean
   ============================================ */

.how-to-apply-section {
    background: var(--whiteColor);
}

.step-card {
    transition: all 0.3s ease;
    border-color: #e9ecef !important;
    height: 100%;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.step-number {
    background: var(--themeColor) !important;
    box-shadow: none;
    transition: all 0.3s ease;
}

.step-card:hover .step-number {
    transform: scale(1.1);
}

/* 5 columns layout */
.col-lg-2-4 {
    flex: 0 0 calc(20% - 0rem);
}

@media (max-width: 1199px) {
    .col-lg-2-4 {
        flex: 0 0 calc(33.333% - 0.6rem);
    }
}

@media (max-width: 768px) {
    .col-lg-2-4 {
        flex: 0 0 calc(50% - 0.6rem);
    }
}

@media (max-width: 576px) {
    .col-lg-2-4 {
        flex: 0 0 50%;
    }
}


/* ============================================
   ABOUT US SECTION
   ============================================ */

.about-section {
    background: #f8f9fa;
    position: relative;
}

.about-tagline {
    background: #29ac3814;
    color: #29ac38;
}


.about-content .btn-outline-secondary {
    border-color: var(--secondaryColor);
    color: var(--secondaryColor);
}

.about-content .btn-outline-secondary:hover {
    background: var(--secondaryColor);
    color: var(--whiteColor);
    transform: translateY(-2px);
}

.about-bg-decoration {
    position: absolute;
    width: clamp(300px, 50vw, 500px);
    height: clamp(300px, 50vw, 500px);
    background: radial-gradient(circle, rgba(0, 51, 153, 0.05) 0%, transparent 70%);
    top: clamp(-50px, -10vw, -100px);
    left: clamp(-50px, -10vw, -100px);
    pointer-events: none;
    z-index: 0;
}


/* ============================================
   SECTOR COUNCILS SECTION
   ============================================ */

.sector-councils-section {
    background: #f8f9fa;
}

.sector-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    background-image: linear-gradient(var(--whiteColor), var(--whiteColor)), linear-gradient(140deg, #29AC38 0%, #f4433614 90%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    cursor: pointer;
    border: 1px solid transparent;
}

.sector-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 51, 153, 0.05) 100%);
    transition: height 0.4s ease;
}

.sector-card:hover::before {
    height: 100%;
}

.sector-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--themeColor);
    box-shadow: 0 12px 24px rgba(0, 51, 153, 0.15);
}

.sector-icon-wrapper {
    width: clamp(3.75rem, 3.5294rem + 1.1765vw, 4.5rem);
    height: clamp(3.75rem, 3.5294rem + 1.1765vw, 4.5rem);
    background: linear-gradient(135deg, rgba(0, 51, 153, 0.08) 0%, rgba(41, 172, 56, 0.08) 100%);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

.sector-icon-wrapper svg {
    height: clamp(2.1875rem, 2.0441rem + 0.7647vw, 2.3rem);
    width: clamp(2.1875rem, 2.0441rem + 0.7647vw, 2.3rem);
}

.sector-card:hover .sector-icon-wrapper {
    transform: scale(1.1);
    background: linear-gradient(135deg, rgba(0, 51, 153, 0.15) 0%, rgba(41, 172, 56, 0.15) 100%);
    box-shadow: 0 8px 16px rgba(0, 51, 153, 0.2);
}

.sector-card h3 {
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.sector-card:hover h3 {
    color: var(--secondaryColor);
}

/* ============================================
   CSR & IMPACT SECTION
   ============================================ */

.csr-section {
    background: var(--whiteColor);
}

.csr-stat-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-color: #e9ecef !important;
}

.csr-stat-card:hover {
    transform: translateY(-8px);
    border-color: var(--themeColor) !important;
    box-shadow: 0 12px 24px rgba(41, 172, 56, 0.15);
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.03) 0%, rgba(0, 51, 153, 0.03) 100%);
}

.csr-stat-card .stat-icon {
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.csr-stat-card:hover .stat-icon {
    transform: scale(1.15) rotate(-5deg);
}

.csr-stat-card h3,
.csr-stat-card p {
    position: relative;
    z-index: 1;
}

.csr-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-color: #e9ecef !important;
    position: relative;
}

.csr-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--secondaryColor);
    transition: height 0.4s ease;
}

.csr-card:hover::before {
    height: 100%;
}

.csr-card:hover {
    transform: translateY(-10px);
    border-color: var(--secondaryColor) !important;
    box-shadow: 0 16px 32px rgba(0, 51, 153, 0.12);
}

.csr-card-icon {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.csr-card:hover .csr-card-icon {
    transform: scale(1.1) translateY(-5px);
}

.csr-list li {
    transition: all 0.3s ease;
}

.csr-card:hover .csr-list li {
    transform: translateX(5px);
}

/* ============================================
   LATEST NEWS SECTION
   ============================================ */

.news-section {
    background: #f8f9fa;
}

.news-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-color: #e9ecef !important;
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    transform: translateY(-12px);
    border-color: var(--themeColor) !important;
    box-shadow: 0 16px 32px rgba(0, 51, 153, 0.12);
}

.news-image {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.news-image img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card:hover .news-image img {
    transform: scale(1.08);
}

.news-date {
    background: var(--themeColor);
    box-shadow: 0 4px 12px rgba(41, 172, 56, 0.3);
    z-index: 2;
}

.news-category {
    background: rgba(0, 51, 153, 0.1);
    color: var(--secondaryColor);
}

.news-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-content a {
    color: var(--secondaryColor);
    transition: all 0.3s ease;
    margin-top: auto;
}

.news-content a:hover {
    color: var(--themeColor);
    transform: translateX(5px);
}

.news-content a svg {
    transition: transform 0.3s ease;
}

.news-content a:hover svg {
    transform: translateX(5px);
}

/* ============================================
   CTA BANNER - Dark Background with Animations & Decorations
   ============================================ */
.cta-banner-card {
    background: linear-gradient(135deg, var(--secondaryColor) 0%, #167f22 100%);
    animation: slideInUp 0.6s ease-out;
    z-index: 2;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(41, 172, 56, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 0 30px rgba(41, 172, 56, 0.08);
}

.cta-banner-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(41, 172, 56, 0.05) 10px, rgba(41, 172, 56, 0.05) 20px),
        repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(41, 172, 56, 0.04) 10px, rgba(41, 172, 56, 0.04) 20px),
        radial-gradient(circle at 30% 70%, rgba(41, 172, 56, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(41, 172, 56, 0.06) 0%, transparent 40%);
    pointer-events: none;
    animation: bgShift 8s ease-in-out infinite;
    z-index: 0;
}

.cta-banner-card h2,
.cta-banner-card p,
.cta-banner-card .cta-badge {
    color: var(--whiteColor);
    animation: fadeInUp 0.6s ease-out;
    position: relative;
    z-index: 3;
}

.cta-banner-card h2 {
    animation-delay: 0.1s;
    animation-fill-mode: both;
}

.cta-banner-card p {
    animation-delay: 0.2s;
    animation-fill-mode: both;
    opacity: 0.9;
}

.cta-badge {
    background: rgba(41, 172, 56, 0.2);
    color: var(--whiteColor);
    border: 2px solid rgba(41, 172, 56, 0.6);
    animation-delay: 0s;
    animation-fill-mode: both;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(41, 172, 56, 0.25), inset 0 0 8px rgba(41, 172, 56, 0.15);
}

.cta-badge:hover {
    background: rgba(41, 172, 56, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(41, 172, 56, 0.35), inset 0 0 12px rgba(41, 172, 56, 0.2);
    border-color: rgba(41, 172, 56, 0.8);
}

.cta-banner-card .d-flex {
    animation: fadeInUp 0.6s ease-out 0.3s both;
    position: relative;
    z-index: 3;
}

.cta-banner .cta {
    animation: scaleIn 0.5s ease-out both;
}

.cta-banner .cta:nth-child(1) {
    animation-delay: 0.4s;
}

.cta-banner .cta:nth-child(2) {
    animation-delay: 0.5s;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-30px);
    }
}

@keyframes bgShift {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .cta-banner .cta {
        width: 100%;
        justify-content: center;
    }

}


/* ============================================
   PARTNER LOGOS GRID - STATIC LAYOUT
   ============================================ */

.partner-logo-item {
    min-height: 100px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.partner-logo-item img {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
    filter: grayscale(40%) brightness(1);
    min-width: 120px;
    min-height: 70px;
    object-fit: contain;
}

.partner-logo-item:hover img {
    filter: grayscale(0%) brightness(1.1);
    transform: scale(1.1);
}

.partner-logo-item:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: var(--themeColor) !important;
    box-shadow: 0 12px 24px rgba(0, 51, 153, 0.12), 0 4px 8px rgba(41, 172, 56, 0.1);
}

.hover-lift {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-lift:hover {
    transform: translateY(-8px);
}

.transition {
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .partner-logo-item img {
        max-height: 50px;
    }
}

@media (max-width: 576px) {
    .partner-logo-item img {
        max-height: 40px;
    }
}


/* ============================================
   MEDIA QUERY - Hide Navbar Bottom Below 992px
   ============================================ */

@media (max-width: 991px) {

    .navbar-bottom {
        display: none !important;
    }

    .navbar-top {
        border-radius: 8px;
    }

    .nav-toggle {
        display: flex !important;
    }

    .nav-menu {
        display: none !important;
    }

    .nav-logo {
        flex: 1;
    }
}

/* About page css */
.about-hero-section {
    background: linear-gradient(0deg, rgba(41, 172, 56, 0.08) 0%, #ffffff 100%);
    min-height: clamp(17.5rem, 16.7279rem + 4.1176vw, 21.875rem);
}

/* ============================================
   VISION & MISSION SECTION
   ============================================ */
.vm-card {
    background: var(--whiteColor);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    height: 100%;
}

.vm-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--themeColor);
}

.vision-card:hover {
    border-color: var(--secondaryColor);
}

.mission-card:hover {
    border-color: var(--themeColor);
}

.vm-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    transition: all 0.4s ease;
}

.vm-card:hover .vm-icon {
    transform: scale(1.1);
}

.vision-card .vm-icon {
    background: linear-gradient(135deg, var(--secondaryColor) 0%, rgba(9, 48, 77, 0.8) 100%) !important;
}

.mission-card .vm-icon {
    background: linear-gradient(135deg, var(--themeColor) 0%, rgba(41, 172, 56, 0.8) 100%) !important;
}

.mission-list {
    list-style: none;
}

.mission-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.mission-bullet {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--themeColor);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 8px;
}

/* ============================================
   FOUNDER'S MESSAGE SECTION STYLES
   ============================================ */

.founder-image {
    width: 370px;
    height: 370px;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.founder-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.founder-image:hover img {
    transform: scale(1.05);
}

.founder-image:hover {
    box-shadow: 0 8px 20px rgba(41, 172, 56, 0.2);
}


/* ============================================
   GOVERNANCE SECTION STYLES - OPTIMIZED
   ============================================ */

.governance-content {
    animation: slideInLeft 0.6s ease-out;
}

.governance-point {
    display: flex;
    gap: clamp(0.75rem, 0.5rem + 1.25vw, 1.5rem);
    align-items: flex-start;
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
    margin-bottom: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}

.governance-point:nth-child(1) {
    animation-delay: 0.1s;
}

.governance-point:nth-child(2) {
    animation-delay: 0.2s;
}

.governance-point:nth-child(3) {
    animation-delay: 0.3s;
}

.governance-point:nth-child(4) {
    animation-delay: 0.4s;
}

.point-number {
    min-width: clamp(40px, 2.5rem + 1vw, 50px);
    width: clamp(40px, 2.5rem + 1vw, 50px);
    height: clamp(40px, 2.5rem + 1vw, 50px);
    background: linear-gradient(135deg, var(--themeColor) 0%, rgba(41, 172, 56, 0.7) 100%);
    color: var(--whiteColor);
    border-radius: clamp(6px, 0.5rem + 0.3vw, 8px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.governance-point:hover .point-number {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 8px 20px rgba(41, 172, 56, 0.4);
}

.point-content h4 {
    transition: color 0.3s ease;
    margin-bottom: clamp(0.5rem, 0.375rem + 0.3vw, 0.75rem);
}

.governance-point:hover .point-content h4 {
    color: var(--themeColor);
}

/* Governance Principles Visual */
.governance-principles-visual {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 15vw, 180px), 1fr));
    gap: clamp(0.875rem, 0.75rem + 1vw, 1.5rem);
    animation: slideInRight 0.6s ease-out;
}

.principle-box {
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.08) 0%, rgba(9, 48, 77, 0.04) 100%);
    border: 2px solid rgba(41, 172, 56, 0.2);
    border-radius: clamp(8px, 0.875rem + 0.3vw, 12px);
    padding: clamp(12px, 1.12rem + 0.4vw, 1rem);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}

.principle-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(41, 172, 56, 0.15), transparent);
    transition: left 0.6s ease;
}

.principle-box:hover::before {
    left: 100%;
}

.principle-box:hover {
    transform: translateY(clamp(-4px, -0.25rem - 0.5vw, -8px)) scale(1.05);
    border-color: var(--themeColor);
    box-shadow: 0 clamp(8px, 0.75rem + 1vw, 12px) clamp(20px, 1.5rem + 1vw, 30px) rgba(41, 172, 56, 0.2);
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.12) 0%, rgba(9, 48, 77, 0.08) 100%);
}

.principle-box-content {
    position: relative;
    z-index: 2;
}

.principle-box-icon {
    width: clamp(48px, 3rem + 0.75vw, 60px);
    height: clamp(48px, 3rem + 0.75vw, 60px);
    margin: 0 auto clamp(0.625rem, 0.5rem + 0.5vw, 1rem);
    background: var(--whiteColor);
    border-radius: clamp(8px, 0.75rem + 0.3vw, 10px);
    color: var(--themeColor);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(41, 172, 56, 0.1);
}

.principle-box:hover .principle-box-icon {
    transform: scale(1.06);
    background: linear-gradient(135deg, var(--themeColor) 0%, rgba(41, 172, 56, 0.7) 100%);
    color: var(--whiteColor);
    box-shadow: 0 8px 20px rgba(41, 172, 56, 0.3);
}

.principle-box-icon svg {
    height: 32px;
    width: 32px;
}

.principle-box h4 {
    transition: color 0.3s ease;
    margin-bottom: 0;
}

.principle-box:hover h4 {
    color: var(--themeColor);
}

.principle-box-1 {
    animation: fadeInUp 0.6s ease-out 0s;
}

.principle-box-2 {
    animation: fadeInUp 0.6s ease-out 0.1s;
}

.principle-box-3 {
    animation: fadeInUp 0.6s ease-out 0.2s;
}

.principle-box-4 {
    animation: fadeInUp 0.6s ease-out 0.3s;
}

.principle-box-5 {
    animation: fadeInUp 0.6s ease-out 0.4s;
}

.principle-box-6 {
    animation: fadeInUp 0.6s ease-out 0.5s;
}

.governance-banner {
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.1) 0%, rgba(9, 48, 77, 0.05) 100%);
    border: 2px solid var(--themeColor);
    border-radius: clamp(12px, 1.25rem + 0.5vw, 16px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: fadeInUp 0.8s ease-out 0.6s both;
}

.governance-banner::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: clamp(280px, 28vw, 500px);
    height: clamp(280px, 28vw, 500px);
    background: radial-gradient(circle, rgba(41, 172, 56, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite;
}

.governance-banner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: clamp(2px, 0.15rem + 0.2vw, 4px);
    background: linear-gradient(90deg, transparent, var(--themeColor), transparent);
}

.banner-content {
    position: relative;
    z-index: 2;
}

.governance-banner:hover {
    transform: translateY(clamp(-2px, -0.15rem - 0.5vw, -4px));
    box-shadow: 0 clamp(12px, 1rem + 1vw, 16px) clamp(30px, 2.5rem + 1vw, 40px) rgba(41, 172, 56, 0.2);
}

.banner-accent {
    position: absolute;
    top: 20px;
    right: 20px;
    width: clamp(65px, 8vw, 100px);
    height: clamp(65px, 8vw, 100px);
    background: radial-gradient(circle, rgba(41, 172, 56, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: pulse 3s ease-in-out infinite;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(20px);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/*   CONTACT PAGE STYLES  */

.contact-card {
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.05) 0%, rgba(9, 48, 77, 0.02) 100%);
    border: 2px solid rgba(41, 172, 56, 0.15);
    border-radius: clamp(10px, 1rem + 0.5vw, 14px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-card:hover {
    border-color: var(--themeColor);
    box-shadow: 0 8px 20px rgba(41, 172, 56, 0.15);
    transform: translateY(-4px);
}


.contact-card svg {
    color: var(--themeColor);
    transition: all 0.3s ease;
}

.contact-card:hover svg {
    transform: scale(1.1) rotate(5deg);
}

.contact-card a {
    color: var(--themeColor);
    font-weight: 600;
    transition: all 0.3s ease;
}

.contact-card a:hover {
    opacity: 0.8;
    transform: translateX(2px);
}

.form-input {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: clamp(8px, 0.75rem + 0.3vw, 10px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 12px 16px;
}

.form-input:focus {
    background: var(--whiteColor);
    border-color: var(--themeColor);
    box-shadow: 0 0 0 clamp(2px, 0.15rem + 0.1vw, 3px) rgba(41, 172, 56, 0.1);
}

.social-link-contact {
    width: clamp(48px, 5vw, 60px);
    height: clamp(48px, 5vw, 60px);
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.1) 0%, rgba(9, 48, 77, 0.05) 100%);
    border: 2px solid rgba(41, 172, 56, 0.2);
    border-radius: 50%;
    color: var(--themeColor);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-link-contact:hover {
    transform: translateY(clamp(-4px, -0.25rem - 0.5vw, -6px)) scale(1.08);
    background: var(--themeColor);
    border-color: var(--themeColor);
    color: var(--whiteColor);
    box-shadow: 0 8px 20px rgba(41, 172, 56, 0.3);
}

.contact-form-wrapper {
    background-color: rgb(255 255 255 / 8%);
    padding: clamp(1rem, 0.9118rem + 0.4706vw, 1.5rem);
    box-shadow: 0px 0px 10px #e5e5e5;
}


/* ============================================
   INSTITUTIONAL MEMBERSHIP CONTENT SECTION
   ============================================ */

.institutional-content-section {
    background: var(--whiteColor);
}

.inst-description {
    max-width: 900px;
    margin: 0 auto;
}

.inst-apply-card {
    height: 100%;
    padding: 1.3rem 1rem;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    background-image: linear-gradient(var(--whiteColor), var(--whiteColor)), linear-gradient(180deg, #29AC38 0%, rgba(41, 172, 56, 0.15) 90%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;
}

.inst-apply-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(41, 172, 56, 0.08) 0%, transparent 70%);
    transform: scale(0);
    transition: transform 0.5s ease;
}

.inst-apply-card:hover::before {
    transform: scale(1);
}

.inst-apply-card:hover {
    border-color: var(--themeColor);
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(41, 172, 56, 0.15);
}

.apply-icon-wrapper {
    width: clamp(3.75rem, 3.5294rem + 1.1765vw, 5rem);
    height: clamp(3.75rem, 3.5294rem + 1.1765vw, 5rem);
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.1) 0%, rgba(9, 48, 77, 0.05) 100%);
    transition: all 0.4s ease;
    z-index: 1;
}

.inst-apply-card:hover .apply-icon-wrapper {
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.2) 0%, rgba(9, 48, 77, 0.1) 100%);
    transform: scale(1.1);
}

.inst-apply-card:hover .apply-icon-wrapper svg {
    transform: scale(1.1);
}

.inst-apply-card h5 {
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.inst-apply-card:hover h5 {
    color: var(--themeColor);
}

.inst-note-card {
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.05) 0%, rgba(9, 48, 77, 0.02) 100%);
    border-left: 4px solid var(--themeColor);
    transition: all 0.3s ease;
}


.note-icon-wrapper {
    width: 34px;
    height: 34px;
    background: var(--themeColor);
    flex-shrink: 0;
    color: var(--whiteColor);
}

.inst-benefits {
    background: #f8f9fa;
    padding: clamp(1rem, 0.8235rem + 0.9412vw, 2rem);
    border-radius: 12px;
    border-left: 4px solid var(--themeColor);
}

.inst-benefit-item {
    background: var(--whiteColor);
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.inst-benefit-item:hover {
    border-color: var(--themeColor);
    box-shadow: 0 4px 12px rgba(41, 172, 56, 0.1);
    transform: translateY(-2px);
}

.inst-cta {
    padding: clamp(1.25rem, 1.1176rem + 0.7059vw, 2rem);
    background: rgba(41, 172, 56, 0.05);
    border-radius: 12px;
    margin-top: 2rem;
}


/* ============================================
   VOLUNTEER PAGE STYLES
   ============================================ */

.vol-opp-item {
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.04) 0%, rgba(41, 172, 56, 0.01) 100%);
    border: 1px solid rgba(41, 172, 56, 0.15);
    border-radius: clamp(12px, 2vw, 16px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vol-opp-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: var(--themeColor);
    transition: height 0.4s ease;
}

.vol-opp-item:hover {
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.08) 0%, rgba(41, 172, 56, 0.04) 100%);
    border-color: var(--themeColor);
    box-shadow: 0 12px 32px rgba(41, 172, 56, 0.12);
    transform: translateX(clamp(4px, 1vw, 8px));
}

.vol-opp-item:hover::before {
    height: 100%;
}

.vol-opp-number {
    font-size: clamp(2rem, 3vw, 3rem);
    opacity: 0.2;
    line-height: 1;
    transition: all 0.3s ease;
    position: absolute;
    top: 8px;
    right: 12px;
}

.vol-opp-item:hover .vol-opp-number {
    opacity: 0.4;
    transform: scale(1.1);
}

.vol-opp-icon-wrapper {
    width: clamp(44px, 8vw, 56px);
    height: clamp(44px, 8vw, 56px);
    background: linear-gradient(135deg, var(--themeColor) 0%, rgba(41, 172, 56, 0.8) 100%);
    border-radius: clamp(8px, 1.5vw, 12px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.vol-opp-icon-wrapper svg {
    width: clamp(24px, 4vw, 32px);
    height: clamp(24px, 4vw, 32px);
}

.vol-opp-item:hover .vol-opp-icon-wrapper {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 8px 16px rgba(41, 172, 56, 0.25);
}

.vol-opp-content h4 {
    transition: all 0.3s ease;
}

.vol-opp-item:hover .vol-opp-content h4 {
    color: var(--themeColor);
}

.vol-opp-content p {
    margin: 0;
    transition: all 0.3s ease;
}

/* Volunteer Benefit Cards */
.vol-benefit-card {
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: clamp(1rem, 2vw, 1.5rem);
}

.vol-benefit-card:hover {
    transform: translateY(clamp(-2px, -0.5vw, -4px));
    border-color: var(--themeColor);
    box-shadow: 0 clamp(6px, 1vw, 8px) clamp(12px, 2vw, 16px) rgba(41, 172, 56, 0.1);
}

.vol-benefit-icon {
    width: clamp(40px, 8vw, 48px);
    height: clamp(40px, 8vw, 48px);
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.1) 0%, rgba(41, 172, 56, 0.05) 100%);
    border-radius: clamp(6px, 1vw, 8px);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.vol-benefit-icon svg {
    width: clamp(20px, 4vw, 32px);
    height: clamp(20px, 4vw, 32px);
}

.vol-benefit-card:hover .vol-benefit-icon {
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.15) 0%, rgba(41, 172, 56, 0.08) 100%);
    transform: scale(1.1);
}

.vol-benefit-card h4 {
    transition: all 0.3s ease;
}

.vol-benefit-card:hover h4 {
    color: var(--themeColor);
}


/* Why Volunteer List Styles */

.why-volunteer-item {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding-bottom: clamp(1rem, 1.5vw, 1.5rem);
    border-bottom: 1px solid rgba(41, 172, 56, 0.1);
}

.why-volunteer-item:last-child {
    border-bottom: none;
}

.why-volunteer-item:hover {
    transform: translateX(8px);
}

.why-volunteer-icon {
    width: clamp(48px, 8vw, 56px);
    height: clamp(48px, 8vw, 56px);
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.1) 0%, rgba(41, 172, 56, 0.05) 100%);
    border-radius: clamp(8px, 1vw, 12px);
    transition: all 0.3s ease;
}

.why-volunteer-item:hover .why-volunteer-icon {
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.15) 0%, rgba(41, 172, 56, 0.1) 100%);
    transform: scale(1.1);
}

.why-volunteer-icon svg {
    height: 34px;
    width: 34px;
}

.why-volunteer-item h4 {
    transition: color 0.3s ease;
}

.why-volunteer-item:hover h4 {
    color: var(--themeColor);
}


/* ============================================
   MEDIA CENTER - NEWS CARD STYLES
   ============================================ */

.media-news-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: clamp(1.5rem, 2vw, 2rem);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.media-news-card:hover {
    transform: translateY(-8px);
    border-color: var(--themeColor);
    box-shadow: 0 12px 32px rgba(41, 172, 56, 0.15);
    background: var(--whiteColor);
}

.news-meta {
    margin-bottom: 1rem;
}

.news-date {
    background: var(--themeColor);
    color: var(--whiteColor);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.news-category {
    background: rgba(41, 172, 56, 0.1);
    color: var(--themeColor);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.media-news-card h3 {
    transition: all 0.3s ease;
    line-height: 1.4;
}

.media-news-card:hover h3 {
    color: var(--themeColor);
}

.media-news-card p {
    flex-grow: 1;
}

.read-more-link {
    color: var(--themeColor);
    font-weight: 600;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    transition: all 0.3s ease;
}

.read-more-link:hover {
    color: var(--secondaryColor);
    text-decoration: none;
}

.read-more-link:hover svg {
    transform: translateX(4px);
}

.read-more-link svg {
    transition: all 0.3s ease;
}

/* ============================================
   CSR PROJECTS SECTION - Minimal CSS
   ============================================ */

.focus-card {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: clamp(12px, 1rem, 16px);
    box-shadow: 0px 2px 6px #e8e8e8;
}

.focus-card:hover {
    transform: translateY(clamp(-6px, -0.5rem, -10px));
    box-shadow: 0px 2px 8px #29ac38ad;
}

.focus-icon {
    width: clamp(48px, 4rem, 64px);
    height: clamp(48px, 4rem, 64px);
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.1) 0%, rgba(41, 172, 56, 0.05) 100%);
    border-radius: clamp(8px, 0.75rem, 12px);
    transition: all 0.3s ease;
    color: var(--themeColor);
}

.focus-icon svg {
    height: 42px;
    width: 42px;
}

.focus-card:hover .focus-icon {
    background: linear-gradient(135deg, var(--themeColor) 0%, rgba(41, 172, 56, 0.8) 100%);
    color: var(--whiteColor);
    transform: scale(1.1);
}

.focus-card:hover h4 {
    color: var(--themeColor);
}

/* ============================================
   CSR PROJECTS SECTION - Minimal CSS
   ============================================ */

.header-box {
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.03) 0%, rgba(255, 255, 255, 0.8) 100%) !important;
    border: 2px solid rgba(41, 172, 56, 0.1);
    transition: all 0.3s ease;
}

.header-box:hover {
    border-color: rgba(41, 172, 56, 0.2) !important;
    box-shadow: 0 clamp(8px, 1rem, 16px) clamp(24px, 2rem, 32px) rgba(41, 172, 56, 0.1) !important;
}

.header-decoration {
    width: clamp(40px, 3rem, 60px);
    height: clamp(40px, 3rem, 60px);
    background: linear-gradient(135deg, var(--themeColor) 0%, rgba(41, 172, 56, 0.6) 100%);
    border-radius: 50%;
    opacity: 0.1;
}

.header-decoration:first-child {
    transform: translate(-50%, -50%);
}

.header-decoration:last-child {
    transform: translate(50%, 50%);
}

.featured-image {
    height: 300px;
    width: 100%;
}

.awards-list-container {
    box-shadow: 0px 0px 10px rgb(223 223 223);
}

/* ============================================
   COLLABORATION AREAS SECTION - Modern Card Design
   ============================================ */

.collaboration-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid transparent;
    background: linear-gradient(white, white) padding-box,
        linear-gradient(135deg, rgba(41, 172, 56, 0.1) 0%, rgba(9, 48, 77, 0.05) 100%) border-box;
}

.collaboration-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(41, 172, 56, 0.02) 100%);
    transition: height 0.4s ease;
    border-radius: 0 0 0.75rem 0.75rem;
}

.collaboration-card:hover::before {
    height: 100%;
}

.collaboration-icon {
    width: 4.5rem;
    height: 4.5rem;
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.08) 0%, rgba(41, 172, 56, 0.12) 100%);
    border: 2px solid rgba(41, 172, 56, 0.1);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 2;
}

.collaboration-icon::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--themeColor) 0%, rgba(41, 172, 56, 0.6) 100%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.collaboration-card:hover .collaboration-icon::before {
    opacity: 1;
}

.collaboration-card:hover .collaboration-icon {
    transform: scale(1.15);
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.15) 0%, rgba(41, 172, 56, 0.25) 100%);
    border-color: var(--themeColor);
    box-shadow: 0 8px 20px rgba(41, 172, 56, 0.3);
}

.collaboration-icon svg {
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.collaboration-card:hover .collaboration-icon svg {
    color: var(--whiteColor);
}

.collaboration-card h4 {
    transition: color 0.3s ease;
    position: relative;
    z-index: 2;
}

.collaboration-card:hover h4 {
    color: var(--themeColor);
}

.collaboration-card p {
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.collaboration-card:hover p {
    color: #495057;
}

.card-decoration {
    z-index: 0;
}

.decoration-circle {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(41, 172, 56, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 3s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.bg-decoration {
    animation: float 6s ease-in-out infinite;
}

.bg-decoration:nth-child(1) {
    animation-delay: 0s;
}

.bg-decoration:nth-child(2) {
    animation-delay: 3s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.1);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .collaboration-card {
        margin-bottom: 1.5rem;
    }

    .collaboration-icon {
        width: 3.5rem;
        height: 3.5rem;
    }

    .collaboration-card h4 {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .collaboration-areas-section .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .collaboration-card {
        padding: 1.5rem !important;
    }
}

/* Animation on scroll */
.collaboration-card.animate-in {
    animation: fadeInUp 0.6s ease-out forwards;
    animation-delay: var(--card-delay, 0s);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   WHO CAN PARTNER SECTION - Simple Clean Design
   ============================================ */

.partner-types-section {
    background: #f8f9fa;
}

.partner-item {
    transition: all 0.3s ease;
}

.partner-item:hover {
    transform: translateY(clamp(-2px, -0.5vw, -4px));
}

.partner-icon-circle {
    width: clamp(50px, 7vw, 70px);
    height: clamp(50px, 7vw, 70px);
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.08) 0%, rgba(41, 172, 56, 0.12) 100%);
    border: 2px solid rgba(41, 172, 56, 0.15);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 4px;
}

.partner-icon-circle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(41, 172, 56, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
    z-index: 0;
}

.partner-item:hover .partner-icon-circle {
    background: linear-gradient(135deg, rgba(41, 172, 56, 0.15) 0%, rgba(41, 172, 56, 0.25) 100%);
    border-color: var(--themeColor);
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(41, 172, 56, 0.2);
}

.partner-item:hover .partner-icon-circle::before {
    width: 120px;
    height: 120px;
}

.partner-icon-circle svg {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.partner-item:hover .partner-icon-circle svg {
    color: var(--themeColor);
    transform: scale(1.1);
}

.partner-item h4 {
    transition: color 0.3s ease;
}

.partner-item:hover h4 {
    color: var(--themeColor);
}

/* ============================================
   SITEMAP PAGE STYLES
   ============================================ */

.sitemap-section {
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sitemap-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.sitemap-list a {
    transition: all 0.3s ease;
    border-radius: 6px;
}

.sitemap-list a:hover {
    background-color: #f8f9fa !important;
    color: #09304D !important;
    transform: translateX(8px);
    padding-left: 12px !important;
}

.hover-bg-light:hover {
    background-color: #f8f9fa;
}

/* Sitemap responsive adjustments */
@media (max-width: 768px) {
    .sitemap-section {
        margin-bottom: 2rem;
    }
}

/* ============================================
   PREMIUM SECTOR COUNCILS STYLES
   ============================================ */

/* ========== COUNCILS CARDS ========== */
.card {
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
    border-color: var(--themeColor);
    box-shadow: 0 12px 24px rgba(41, 172, 56, 0.15);
}

.card-img-top {
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card:hover .card-img-top {
    transform: scale(1.05);
}

.card-title {
    color: var(--textcolor);
    transition: color 0.3s ease;
}

.card:hover .card-title {
    color: var(--themeColor);
}

/* Downloads Table Styles */

/*  RESPONSIVE TABLE STYLES */
.dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
}

table.dataTable {
    min-width: 900px;
    /* force scroll on small screens */
}

/* Downloads Table Styles */
.downloads-table-container {
    border-radius: clamp(8px, 1vw, 12px);
    overflow: hidden;
    background: white;
    padding: 16px;
    box-shadow: 0px 0px 10px #dfdfdf;
    ;
}

.dataTables_wrapper {
    padding: clamp(1rem, 2vw, 2rem);
}

#example thead th {
    background: var(--themeColor);
    color: white;
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    padding: clamp(12px, 1.5vw, 18px) clamp(8px, 1vw, 15px);
    border: none;
}

#example tbody tr:hover {
    background-color: rgba(41, 172, 56, 0.05);
}

#example tbody td {
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    padding: clamp(12px, 1.2vw, 15px) clamp(8px, 1vw, 12px);
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid rgba(41, 172, 56, 0.3);
    border-radius: 6px;
    padding: clamp(6px, 1vw, 10px);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px;
    margin: 0 2px;
}

/* Custom Badge Styles */
.version-badge {
    background-color: rgba(41, 172, 56, 0.1) !important;
    color: var(--themeColor) !important;
}

.dt-length,
.dt-search {
    margin-bottom:  clamp(0.875rem, 0.7647rem + 0.5882vw, 1.5rem);
    font-size: 14px;
}

.dt-info {
    margin-top: clamp(12px, -0.2647rem + 1.4118vw, 1.5rem);
    font-size: 14px;
}

.pagination {
    justify-content: end !important;
    margin-top: clamp(0.625rem, 0.4706rem + 0.8235vw, 1.5rem) !important;
}

th {
    font-size: clamp(0.6875rem, 0.6654rem + 0.1176vw, 0.8125rem);
}
.page-link{
font-size: 14px !important;
}
.download-btn {
    background-color: var(--themeColor);
    transition: all 0.3s ease;
}

.download-btn:hover {
    background-color: var(--secondaryColor);
}

.dropdown-toggle::after {
    display: none !important;
}

.form-control.form-control-sm,
.form-select.form-select-sm {
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 clamp(2px, 0.15rem + 0.1vw, 3px) rgba(41, 172, 56, 0.1) !important;
    border: 1px solid var(--themeColor) !important;
}

th {
    background-color: #29ac38 !important;
    color: #fff !important;
}

@media (max-width: 576px) {
    .dt-search {
        flex-wrap: wrap;
        display: flex;
        gap: 8px;
    }

    div.dt-container div.dt-length {
        text-align: start !important;
    }
}
/* Downloads Table - Minimal CSS */

.downloads-table thead th {
    background: var(--themeColor);
    color: var(--whiteColor);
    border: none;
    padding: 1rem;
    font-weight: 600;
}


.page-link {
    color: var(--themeColor) !important;
}

.page-item.active .page-link {
    background-color: var(--themeColor) !important;
    border-color: var(--themeColor) !important;
    color: var(--whiteColor) !important;
}
td a{
    white-space: nowrap;
}