/* Offset vertical link so that the top nav does not cover the target block */
.target-div {
    scroll-margin-top: 150px;
}

/* ---------------------------------------------------------------------- */
/* --- DEFAULT STATE (Full Width, Tall, Attached to Top) --- */
/* ---------------------------------------------------------------------- */

.navtop {
    /* Make the wrapper fixed and full width */
    position: fixed; /* Keep it fixed */
    top: 0; /* Start at the top */
    left: 0;
    /* width: 190px; */
    z-index: 1030; /* Ensure it's above other content (AdminLTE's default) */


    transition: all 0.5s ease-in-out; /* Smooth transition for all properties */
    background-color: rgba(255, 255, 255, 0.95)f; /* Initial background for the shrunk bar */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Lighter shadow for the initial bar */

    display: flex; /* Ensure flex behavior */
    justify-content: flex-start; /* Align content to the left initially */

    padding: 55px 0px 24px 6px; /* Smaller padding for initial state */
    border-bottom: 2rem; /* Remove default AdminLTE border */
    border-bottom-left-radius:  2rem; /* Large rounded corners */
    border-bottom-right-radius: 2rem; /* Large rounded corners */       

    /* Ensure it's above everything else */
    z-index: 1030; 
}


/* Default logo (shrunk state) */
.navtop-brand-default {
    display: block;
    opacity: 1;
    
    font-family: 'Revans Medium', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #79973b;
    margin-right: 1rem;
    transition: opacity 0.3s ease-in-out;
    
    /* Ensure it's under the nav links */
    z-index: 1029; 
}

/* Floating state specific styles for the header */
.navtop-brand-floating {    
    display: none;
    opacity: 0;
}

/* Floating nav links container (Hidden by default in initial state) */
.navtop-floating-links-container {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    margin-left: 0;
}




/* Custom Mobile Menu */
@media (max-width: 767.98px) {
    /* Style the collapsible container itself */
    .mobile-menu-custom {
        position: fixed; /* Make it float/fixed */
        top: 0; 
        left: 0;
        right: 0;
        z-index: 1029; /* Keep it above the content but below the main header */
        background-color: #f8f9fa; /* Match your desired background color */
        border-bottom: 1px solid #dee2e6;
        padding: 0.5rem 1rem;
    }

    /* Style the links inside for a better mobile look */
    .mobile-menu-custom .nav-item {
        margin-bottom: 0.25rem;
        padding: 0.5rem 1rem;
    }


    .mobile-blue-menu-block {
        background-color: #1C489F !important;
        font-size-adjust: +1rem;
        text-transform: uppercase;
        display: flex; /* Use flexbox for vertical centering */
        flex-direction: column;
        justify-content: center;
        align-items: center; /* Center menu items */
    }    

        
    .mobile-social-icon {
    /* Treat the anchor tag like a box to hold the background image */
    display: inline-block;
    width: 45px; /* Adjust size as needed */
    height: 45px; /* Adjust size as needed */
    margin: 0 10px; /* Spacing between icons */

    /* Background image settings */
    background-size: cover; /* Ensures the PNG fills the box */
    background-repeat: no-repeat;
    
    /* Smooth transition for a nicer effect */
    transition: background-image 0.3s ease;
    }

    /*
    * 2. Specific Image Paths (Replace 'path/to/...' with your actual image URLs)
    */

    /* Facebook */
    .mfb {
    background-image: url('../images/homepage/socialmedia/FacebookW.png');
    }

    .mfb:hover {
    background-image: url('../images/homepage/socialmedia/Facebook-hover.png');
    }

    /* YouTube */
    .myt {
    background-image: url('../images/homepage/socialmedia/YouTubeW.png');
    }

    .myt:hover {
    background-image: url('../images/homepage/socialmedia/YouTube-hover.png');
    }

    /* Instagram */
    .mig {
    background-image: url('../images/homepage/socialmedia/InstagramW.png');
    }

    .mig:hover {
    background-image: url('../images/homepage/socialmedia/Instagram-hover.png');
    }
        
}


/* Custom CSS to position the close button */
.custom-modal-close {
    position: relative; 
    
    /* Position it in the top right corner */
    top: 15px;      
    right: 15px;    

    width: 32px; 
    height: 32px;
    
    /* Ensure it is visible above the content */
    z-index: 1050; 
    
    /* Remove default Bootstrap/AdminLTE styles that might interfere */
    padding: 0;
    margin: 0;
    opacity: 1; 
    background-color: transparent; 
    border: none; 
    cursor: pointer;
    
    /* Set the default image as a background image on the button */
    background-image: url('../images/closew.png');
    background-size: cover; 
    background-repeat: no-repeat;
}

.custom-modal-close.right0{
    right: 0px;    
}

.custom-modal-close.right64{
    right: -64px;    
}

/* Optional: To make the close button image appear larger and clearer */
.custom-modal-close img {
    display: none;
}

/* Change the background image on hover */
.custom-modal-close:hover {
    background-image: url('../images/closey.png');
}

.custom-modal-close.black{
    background-image: url('../images/closeb.png');
}

/* Change the background image on hover */
.custom-modal-close.black:hover {
    background-image: url('../images/closey.png');
}


/* Custom CSS to position the close button */
.custom-modal-return {
    position: relative; 
    
    /* Position it in the top right corner */
    top: 15px;      
    right: 15px;    

    width: 32px; 
    height: 32px;
    
    /* Ensure it is visible above the content */
    z-index: 1050; 
    
    /* Remove default Bootstrap/AdminLTE styles that might interfere */
    padding: 0;
    margin: 0;
    opacity: 1; 
    background-color: transparent; 
    border: none; 
    cursor: pointer;
    
    /* Set the default image as a background image on the button */
    background-image: url('../images/returnw.png');
    background-size: cover; 
    background-repeat: no-repeat;
}

.custom-modal-return.right0{
    right: 0px;    
}

.custom-modal-return.right64{
    right: -64px;    
}

/* Change the background image on hover */
.custom-modal-return:hover {
    background-image: url('../images/returny.png');
}

/* ----------------------------------------------------------------------- */
/* --- SCROLLED STATE: ACTIVATED WHEN 'navtop-scrolled' IS ADDED BY JS --- */
/* ----------------------------------------------------------------------- */

/* Style changes for the entire navbar container when scrolled */
.navtop.navtop-scrolled {
    top: 20px; /* Floating position from the top */
    /* width: 1120px; */
    background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent white */
    border-radius: 2rem; /* Large rounded corners */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Soft shadow */

    /* Center the floating menu by overriding fixed left/right with auto margins */
    left: 0;

    /* SHRUNK FLOATING PADDING */
    padding: 1rem 2rem; 
    justify-content: space-between; /* Space between logo and nav items */
}

/* LOGO SWAP: Hide Shrunk, Show Expanded */
.navtop-scrolled .navtop-brand-default {
    display: none; /* Hide the smaller logo */
    opacity: 0;
}

.navtop-scrolled .navtop-brand-floating {
    display: block; /* Show the larger logo */
    opacity: 1;
}

/* Show floating nav links container when scrolled */
.navtop.navtop-scrolled .navtop-floating-links-container { 
    display: flex;
    opacity: 1;
    align-items: center; /* Center links vertically */
}



/* Nav links styling */
.navtop-floating-links .nav-link {
    color: #79973b !important; /* Branding Green */
    font-family: 'Revans Medium';
    font-weight: 500;
    font-size: 1.1rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    white-space: nowrap;
}

.navtop-floating-links .nav-link:hover {
    color: white !important; /* Darker green on hover text */
    background-color: #ffb935; /* Accent Yellow background */
    border-radius: 10px;
}

/* AdminLTE content wrapper adjustment (using a mock class here) */
.content-wrapper {
    margin-top: 56px; /* Adjust based on initial header height */
    /* Using padding-top for body instead, since we don't have AdminLTE wrapper */
}

/* Ensure content starts below the default navbar height */
#main-content {
    padding-top: 100px; /* Adjust this based on your tall navbar height */
    padding-left: 12px;
    padding-right: 12px;
}

/* Target the Nav Link specifically in the mobile header */
.main-header.d-md-none {
    padding-left: 12px;
    padding-right: 12px;
}

/* Target the Nav Link specifically in the mobile header */
.main-header.d-md-none .nav-link {

    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

.main-header.d-md-none .navtop-brand-default {
    /* Set the required dimensions */
    width: 140px !important;
    height: 140px !important;

    /* Set the green background color */
    background-color: #7b983b !important; /* Bootstrap Success Green */

    /* Apply the custom bottom radius */
    border-radius: 0 0 24px 24px !important; /* Top-Left Top-Right Bottom-Right Bottom-Left */

    /* Use flexbox to center the logo image within the box */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Remove any default padding/margin that might interfere */
    padding: 0 !important;
}

/* Target the mobile hamburger icon */
.main-header.d-md-none .nav-item .nav-link i.fa-bars {
    /* Set the primary (top) icon color to blue */
    color: #1c489f !important; 
    background-color: white !important;
    padding: 8px !important;
}