/* General Styles */
 body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    color: #000000;
    line-height: 1.6;
}

/* Header Styles */
header {
    background: rgba(219, 238, 247, 0.979);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 40px;
    border-radius: 5px;
}

header h1 {
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}
.logo-image {
  display: block;           /* removes inline-gap */
  max-height: 48px;         /* scales the image to fit */
  height: auto;
  width: auto;              /* keep aspect ratio */
  object-fit: contain;
}

/* Navigation Styles */
nav {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin: 0 5px;
}

.nav-links button {
    background: none;
    color: #3a79cf;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-family: 'Times New Roman', serif, Georgia, Times, serif;
    font-size: 1rem;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.nav-links button:hover {
    color: #06316d;
}

/* Hamburger Menu Styles */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.hamburger .line {
    width: 25px;
    height: 3px;
    background-color: #3a79cf;
    margin: 2px 1px 2px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Mobile Menu Styles */
.mobile-menu {
    position: fixed;
    top: 60px; /* Height of header */
    left: 0;
    width: 100%;
    background-color: rgba(212, 233, 243, 0.98);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-150%);
    transition: transform 0.3s ease-out;
    z-index: 999;
    border-radius: 0 0 5px 5px;
}

.mobile-menu.active {
    transform: translateY(0);
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu li {
    border-bottom: 1px solid rgba(16, 50, 141, 0.1);
}

.mobile-menu button {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background: none;
    border: none;
    color: #003366;
    text-align: left;
    font-family: sans-serif, Times, serif;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.mobile-menu button:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Responsive Styles */
@media (max-width: 992px) {
    header h1 {
        font-size: 1.1rem;
    }
    
    header h1 .highlight {
        font-size: 1.6rem;
    }
    
    .nav-links button {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    
    .hamburger {
        display: flex;
    }
    
    header h1 {
        max-width: 80%;
    }
}

@media (max-width: 480px) {
    header {
        padding: 10px 15px;
    }
    
    header h1 {
        font-size: 1rem;
    }
    
    header h1 .highlight {
        font-size: 1.4rem;
    }
}

/* General Footer Styles */
.footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='550' preserveAspectRatio='none' viewBox='0 0 1440 550'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1066%26quot%3b)' fill='none'%3e%3crect width='1440' height='550' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient1067%26quot%3b)'%3e%3c/rect%3e%3cpath d='M22 550L572 0L689 0L139 550z' fill='url(%26quot%3b%23SvgjsLinearGradient1068%26quot%3b)'%3e%3c/path%3e%3cpath d='M340.8 550L890.8 0L1355.8 0L805.8 550z' fill='url(%26quot%3b%23SvgjsLinearGradient1068%26quot%3b)'%3e%3c/path%3e%3cpath d='M651.6 550L1201.6 0L1545.1 0L995.1 550z' fill='url(%26quot%3b%23SvgjsLinearGradient1068%26quot%3b)'%3e%3c/path%3e%3cpath d='M1430 550L880 0L586 0L1136 550z' fill='url(%26quot%3b%23SvgjsLinearGradient1069%26quot%3b)'%3e%3c/path%3e%3cpath d='M1071.2 550L521.2 0L57.700000000000045 0L607.7 550z' fill='url(%26quot%3b%23SvgjsLinearGradient1069%26quot%3b)'%3e%3c/path%3e%3cpath d='M768.4 550L218.39999999999998 0L-206.10000000000002 0L343.9 550z' fill='url(%26quot%3b%23SvgjsLinearGradient1069%26quot%3b)'%3e%3c/path%3e%3cpath d='M1051.734894819939 550L1440 161.73489481993897L1440 550z' fill='url(%26quot%3b%23SvgjsLinearGradient1068%26quot%3b)'%3e%3c/path%3e%3cpath d='M0 550L388.265105180061 550L 0 161.73489481993897z' fill='url(%26quot%3b%23SvgjsLinearGradient1069%26quot%3b)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1066'%3e%3crect width='1440' height='550' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='15.45%25' y1='-40.45%25' x2='84.55%25' y2='140.45%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1067'%3e%3cstop stop-color='%230e2a47' offset='0'%3e%3c/stop%3e%3cstop stop-color='%2300459e' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='0%25' y1='100%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1068'%3e%3cstop stop-color='rgba(206%2c 209%2c 217%2c 0.2)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(206%2c 209%2c 217%2c 0.2)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='100%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1069'%3e%3cstop stop-color='rgba(206%2c 209%2c 217%2c 0.2)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(206%2c 209%2c 217%2c 0.2)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    color: white;
    overflow: hidden; /* Prevent any content from causing overflow */
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding in width calculation */
    background-size: cover; /* Add this to ensure full coverage */
    
}

/* Add this to ensure all child elements stay within bounds */
.footer > * {
    max-width: 100%;
    box-sizing: border-box;
}

.footer-column {
    flex: 1 ; /* Ensures the columns take up equal space */
    margin: 15px;
    margin-left: 40PX;
    padding: 5px;
    box-sizing: border-box;
  
}

.footer-column h3 {
    border-bottom: 2px solid #00ff7f;
    display: inline-block;
    padding-bottom: 1px;
    margin-bottom: 1px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}
.footer-column ul li {
    margin: 10px 0;
}

.footer-column a {
    text-decoration: none;
    color: white;
}

.footer-column a:hover {
    color: #ff6600;
    text-decoration: underline; /* Add underline on hover */
}

/* Social Icons */
.social-icons {
    display: flex;
    gap: 10px;
}
.social-icons a {
    text-decoration: none;
    font-size: 24px;
    color: white;
}

.social-icons a:hover {
    color: #ff6600;
}

/* Payment Icons Styling */
.footer-column img {
    max-width: 250px; /* Adjust width as needed */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensures proper alignment */
    margin-top: 10px; /* Adds spacing above */
}

/* messages (Message Box) */
.messages input,
.messages textarea {
    width: 80%;
    padding: 5px;
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.messages button {
    background-color: #ff6600;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    width: 40%;
    transition: background-color 0.3s ease;
}

.messages button:hover {
    background-color: #e65c00;
}

/* Map Styles */
.map iframe {
    width: 90%;
    height: 180px;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
}

/* Adjust column widths */
.footer-column.quick-link {
    flex: 1 1 10%; /* "About Us" will take more space */
}

.footer-column.contact-info {
    flex: 1 1 20%; /* "FOR ANY PR QUERIES" and "FIND US ON" will take up less space */
}

.footer-column.payment {
    flex: 1 1 20%; /* "payment */
}

.footer-column.message-location {
    flex: 1 1 30%; /* "Message Us" and "Our Location" take equal space */
}
/* Copyright Section */
.footer-copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 14px;
    color: #fff;
    padding: 20px 0;
    margin-top: -15px;
    position: relative;
    border-top: 2px solid #00ff7f; /* Bright green line above */
   
    flex-direction: column; /* Changed to column for vertical layout */
    gap: 10px; /* Space between copyright and links */
}

.footer-copyright p {
    margin: 0;  /* Remove default margin from <p> */
}

.admin-login-text {
    position: absolute; /* Position the Admin Login text */
    right: 85px; /* Adjust this value to move it closer or farther from the right edge */
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: color 0.3s ease;
}

/* New styles for the privacy and terms links */
.footer-links {
    display: flex;
    gap: 20px; /* Space between the links */
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: orangered; /* Same green as the border */
}

.admin-login-text:hover {
    color: orangered;  /* Change color when hovered */
    text-decoration: underline; /* Add underline on hover */
}

/* Admin Login Modal */
.admin-login-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/absolute position */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.4); /* Black background with opacity */
    justify-content: center;
    align-items: center;
}

/* Admin Login Modal Content */
.admin-login-content {
    background-color: #ffffffe7;
    padding: 30px;
    border-radius: 10px;
    width: 400px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    position: relative; /* Added for absolute positioning of close button */
}

.admin-login-content h2 {
    margin-bottom: 20px;
    color: #004d80;
}

.admin-login-content input {
    width: 70%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.admin-login-content .submit-btn {
    width: 30%;
    padding: 12px;
    background-color: rgb(52, 93, 204);
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.admin-login-content .submit-btn:hover {
    background-color: orangered;
}

/* Admin Login Note */
.login-note {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
    font-style: italic;
}

/* Login Error Message Styles */

.login-error-message {
    color: #d9534f;
    margin-bottom: 15px;
    text-align: center;
    font-size: 14px;
}

/* Close button */
.close-btn {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #d61010;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #2c2c2c;
}

@media (max-width: 480px) {
    

    .admin-login-content {
        width: 85%; /* Even smaller modal for smaller devices */
        padding: 15px;
    }

    .admin-login-content input, .admin-login-content .submit-btn {
        font-size: 14px;
    }
}


/* Responsive Styles */
@media (max-width: 768px) {

    /* Adjust footer text size and layout on tablets and smaller screens */
    .footer-copyright {
        flex-direction: column;
        text-align: center;
        
    }

    .admin-login-text {
        position: relative;
        right: auto;
        margin-top: 10px; /* Moves below copyright with space */
    }

    .admin-login-content {
        width: 90%; /* Make modal width smaller on smaller screens */
        padding: 20px;
    }

    .admin-login-content input, .admin-login-content .submit-btn {
        font-size: 14px; /* Adjust font size for inputs and button */
    }
}