@charset "utf-8";
/* CSS Document */


        .megamenu {
            display: none; /* Keep it hidden initially */
    position: absolute; /* Make sure it's positioned properly */
    z-index: 1500; /* High enough to be above everything else */
    background-color: white; /* Optional: could help if it's transparent */
        }
    </style>
  
    <style>
    /* Close Button Style */
.close-btn {
    background-color: #012d43; /* Background color */
    color: #ae914b; /* Text color */
    border: none; /* Remove border */
    font-size: 24px; /* Adjust font size */
    cursor: pointer; /* Change cursor on hover */
    padding: 5px 10px; /* Padding for button */
    position: absolute; /* Position absolutely */
    top: 10px; /* Adjust this value as needed */
    right: 10px; /* Adjust to position it at the top right */
    border-radius: 5px; /* Rounded corners (if desired) */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .close-btn {
        display: none; /* Hide the close button on mobile */
    }
}



/* Default styles for mobile (will apply when screen is below 768px) */
.navigation {
    display: block;  /* Or none if you want to hide it entirely */
    /* Styles specific to your mobile navigation */
}

.close-btn {
    display: none; /* Initially hidden in mobile if you want */
    /* Add any additional mobile-specific styles */
}

/* Media Query for Desktop Styles */
@media (min-width: 768px) {
    .navigation {
        display: flex; /* Display as desired for desktop */
        /* Additional desktop navigation styles */
    }

    .close-btn {
        display: block; /* Show the close button in desktop view */
        background-color: #012d43; /* Desktop background color */
        color: #ae914b; /* Desktop text color */
        font-size: 24px; /* Larger font size for desktop */
        padding: 5px 10px; /* Padding for desktop */
        position: absolute; /* Positioning as needed */
        top: 10px; /* Adjust this for positioning */
        right: 10px; /* Adjust this for positioning */
        border-radius: 5px;
        border: none; /* Remove border */
        cursor: pointer; /* Change cursor */
    }
    
}

    .resizable-image {
        max-width: 80%;
        height: auto;
        display: block;
    }
				
				.image-container {
        padding-right: 400px; /* Adjust the amount of padding as per your preference */
    }
    
    @media only screen and (max-width: 600px) {
        .resizable-image {
            max-width: 50%;
        }
    }
    
    @media only screen and (max-width: 400px) {
        .resizable-image {
            max-width: 75%;
        }
    }