/* Body Styles */
body {
    font-family: 'Arial', sans-serif;
    color: #333;
    background-color: #f8f9fa; /* Light background for content */
   /* line-height: 1.6;  Improved line height for readability */
}

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal overflow */
}

*, *:before, *:after {
    box-sizing: inherit;
}




.navbar
{
    padding-top: 20px;
    padding-bottom: 20px; 
 }
.navbar.navbar-expand-lg.navbar-light.bg-light {
    background-color: #23468C !important; 
    
}

/* Ensuring Text and Navbar Brand Colors */
.navbar.navbar-expand-lg.navbar-light.bg-light .navbar-brand,
.navbar.navbar-expand-lg.navbar-light.bg-light .navbar-nav .nav-link {
    color: #fff ; /* White color for text */
    font-size: 1.3rem; /* Increase the font size for navbar links */
    text-transform: uppercase; /* Capitalize all link text */


}

/* Adjusting Hover and Active Link Styles */
.navbar.navbar-expand-lg.navbar-light.bg-light .navbar-nav .nav-link:hover,
.navbar.navbar-expand-lg.navbar-light.bg-light .navbar-nav .nav-item.active .nav-link {
    color: #d1ecf1;  /* Lighter color for hover and active state */
    
}


.navbar-collapse {
    background-color: #23468C; /* Your desired background color */
}
.navbar-collapse .navbar-nav .nav-link {
    color: #fff; /* Your desired text color */
}

/* Text Color in Collapsed Navbar */
.navbar-collapse .navbar-nav .nav-link {
    color: #fff; /* Custom text color */
}


.nav-subtitle {
    display: block; /* Makes the subtitle appear on a new line */
    font-size: 0.75rem; /* Smaller font size for the subtitle */
    color: #fff; /* Subtitle color, adjust as needed */
    margin-top: -5px; /* Negative margin to bring it closer to the main link */
}


h1, h2, h3 {
    font-weight: 600; /* Making headers slightly bolder */
    color: #1d1d1d; /* A color that matches the navbar for consistency */
    margin-top: 10px;
    margin-bottom: 10px;
}

p {
    margin-bottom: 1em; /* Ensuring proper paragraph spacing */
}

.box0 {
    background-color:transparent;  
    color: #000000;  
} 

.box1 {
    background-color: #eeebebe0;  
    color: #000000;  
}

.box2 {
    background-color: #e0e0e0;  
    color: #000000;  
}
.box3 {
    background-color: #000000;  
    color: #ffffff;  
}

.box4 {
    background-color: #193564;  
    color: #ffffff;  
}
.box5 {
    background-color: #d13b7b;
    color: #ffffff; 
      
}
.box6 {
    background-color: #ef4a44;
    color: #ffffff; 
      
}
.box7 {
    background-color: #5c5acf;
    color: #ffffff; 
      
}
.box8 {
    background-color: #ee7933;
    color: #ffffff; 
      
}
.box9 {
    background-color: #279fba;
    color: #ffffff; 
      
}
.box-row {
    display: flex; /* Enables Flexbox */
    justify-content: space-between; /* Spaces out the boxes evenly */
}
.box-third {
    flex: 1; /* Each box will flexibly take up equal space */
    max-width: 33.33%; /* Sets the maximum width to one-third of the container */
}

.box-full {
    flex: 1; /* Flex grow to take available space */
    max-width: 100%; /* Sets the maximum width to full width of the container */
}

.marg1 {
    margin: 1rem; /* 0.625 equivalent to 10px if the root font-size is 16px */
}

.pad1 {
    padding: 1rem; 
}

/* Footer Styling */
.footer {
    background-color: #23468C;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

.footer a {
    color: #d1ecf1;
}

.footer a:hover {
    color: #fff;
    text-decoration: underline;
}




@media (max-width: 768px) {
    .navbar {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navbar.navbar-expand-lg.navbar-light.bg-light .navbar-brand,
    .navbar.navbar-expand-lg.navbar-light.bg-light .navbar-nav .nav-link {
        font-size: 1rem; /* Smaller font size for navbar items */
    }
}


@media (max-width: 768px) {
    .box-row {
        flex-direction: column;
    }

    .box-third, .box-full {
        max-width: 100%; /* Full width for better readability */
    }
}


@media (max-width: 768px) {
    h1, h2, h3 {
        font-size: 1.5rem; /* Smaller font size for headers */
        margin-top: 5px;
        margin-bottom: 5px;
    }

    p {
        font-size: 0.9rem; /* Smaller font size for paragraphs */
    }
}



@media (max-width: 992px) {
    .navbar .navbar-header {
        display: flex;
        align-items: center;
        flex-grow: 1;
    }

    .navbar-toggler {
        order: 1; /* Keep toggler on the left */
        margin-right: 10px; /* Add some space between toggler and brand */
    }

    .navbar-brand {
        order: 2; /* Brand next to toggler */
    }

    .language-switcher {
        order: 3; /* Language switcher on the right */
    }

    .navbar-collapse {
        order: 4; /* Navbar links at the end */
        width: 100%; /* Full width for collapsed menu */
    }
}


/* Override gutter for container-fluid */
.container-fluid {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Ensure carousel stretches fully */
.container-fluid .carousel,
.container-fluid .carousel-inner,
.container-fluid .carousel-item,
.container-fluid .carousel-item img {
    max-width: 100vw;  /* Use 100vw to ensure it spans the full viewport width */
    width: 100%;
}

/* Hide left and right carousel controls */
#homepageCarousel .carousel-control-prev,
#homepageCarousel .carousel-control-next {
    display: none;
}
/* 
.map-container {
    position: relative;
    width: 100%;
    padding-top: 25%; Adjust the percentage to control the height
    overflow: hidden;
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 */

 .navbar-toggler {
    display: flex;
    align-items: center;
}

.navbar-toggler-text {
    color: #fff; /* Change as needed */
    margin-left: 5px;
    font-size: 0.9rem; /* Adjust size as needed */
}

/* Change navbar toggler icon color to white */
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}



/* Option 1: Styling the img tag */
.full-height-image img {
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* This ensures the image covers the area without distortion */
}

/* Option 2: Styling the div with a background image */
.background-image {
    width: 100vw;
    height: 100vh;
    background-image: url('/images/logo.png');
    background-size: cover; /* This ensures the image covers the area without distortion */
    background-position: center; /* Centers the background image */
}