.bg-dark {
    background-color: rgb(252, 252, 252, 0.8) !important; /* Dark blue */
}

.maroon1{
    color: #801817;
}

.orange1{
    color: #f58914;
}

.btn-default{
    background-color: #f58914;
}


.navbar-nav .nav-item .nav-link {
    font-size: 22px; /* Increases text size */
    font-weight: bold; /* Makes text bold */
    color: #801817; /* Ensures text is visible on dark backgrounds */
}

.navbar-nav .nav-item:hover .nav-link {
    color: #801817; /* Changes color on hover (gold for better visibility) */
}


.hero-slider-image img {
    width: 100%; /* Makes sure all images take full width of their container */
    height: 600px; /* Set a fixed height (Adjust as needed) */
    object-fit: cover; /* Ensures images fill the area without distortion */
}

.hero-slide {
    height: 600px; /* Match image height */
    display: flex;
    align-items: center; /* Ensures text stays centered */
    margin-top: 125px;
}

.navList{
    display: none;

}


@media (max-width: 768px) {
    .hero-slider-image img {
        height: 400px; /* Smaller height for mobile */
    }

    .hero-slide {
        height: 400px;
        margin-top: 110px;
    }

}


@media only screen and (max-width: 991px) {
    .navbar {
        padding: 20px 0;
    }

    .responsive-menu,
    .navbar-toggle {
        display: block;
    }

    .main-menu {
        position: absolute;
        top: 100%; /* Ensures the menu appears right below the navbar */
        left: 0;
        width: 100%;
        background: #fff; /* Background color for better visibility */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow effect */
        display: none; /* Initially hidden */
        z-index: 999;
    }

    .main-menu.active {
        display: block; /* Show the menu when active */
    }

    .main-menu ul {
        padding: 10px;
        margin: 0;
        list-style: none;
    }

    .main-menu ul li {
        display: block;
        text-align: center;
        padding: 10px;

    }

    .main-menu ul li a {
        color: #333; /* Adjust text color */
        font-size: 18px;
        display: block;
    }
    .navList{
        display: block;

    }
}


.collapse .more {
    display: none;
}

.myText {
    text-align: justify;
}

.our-feature{
    display: none;
}

.our-testimonial{
    display: none;
}


/* Style for all mission-vision images */
.mission-vission-image img {
    width: 100%;   /* Makes the image take up the full width of its container */
    height: auto;  /* Keeps the image aspect ratio intact */
    max-height: 200px; /* Adjust this value based on your design needs */
    object-fit: cover; /* Ensures the image covers the area without distorting */
}

/* Ensuring all items are aligned and have equal height */
.mission-vission-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distributes space evenly */
    height: 100%; /* Ensures all blocks take up the same height */
}

/* Optional: Additional alignment fixes if items still appear misaligned */
.mission-vission-header, .mission-vission-content {
    min-height: 150px; /* Adjust based on your content */
}





/* Improved CSS for partner logos to maintain aspect ratio */
.our-partners-list .our-partner-item img {
    width: 100%; /* Full width of its container, maintain this if you want the images to be as wide as the container allows */
    height: auto; /* Auto height to maintain aspect ratio */
    object-fit: contain; /* Ensures the image fits without stretching */
    display: block; /* Ensures proper block display */
    margin: 0 auto; /* Centers the image horizontally in its container */
    max-height: 150px; /* Optional: you can set a max-height to ensure all images are uniformly sized */
}



.our-partners-list .our-partner-item {
    display: flex;
    align-items: center; /* Centers the images vertically */
    justify-content: center; /* Centers the images horizontally */
    height: 200px; /* Adjust the height to fit your design needs */
    padding: 10px;
    flex: 1 0 33%; /* Controls the width of the box, adjust according to your layout */
}



/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .our-partners-list .our-partner-item {
        flex: 1 0 50%; /* Allows two logos per row on smaller screens */
    }
    .our-partners-list .our-partner-item img {
        max-width: 120px; /* Smaller logos on smaller devices */
    }
}

/* CSS for maintaining logo aspect ratio and sizing correctly */
.company-logo img {
    width: 100%; /* Ensures the image scales to the container width */
    height: auto; /* Maintains the aspect ratio */
    object-fit: contain; /* Prevents the image from being cut off or distorted */
    display: block; /* Ensures the image is a block element, which helps with alignment */
    margin: 0 auto; /* Centers the image within its container */
    max-height: 120px; /* Sets a maximum height to keep all logos uniform */
}


/* Ensures each company logo container is aligned and spaced properly */
.page-client .col-lg-4, .page-client .col-md-4, .page-client .col-6 {
    display: flex; /* Utilizes flexbox for better alignment */
    align-items: center; /* Centers logos vertically within the column */
    justify-content: center; /* Centers logos horizontally within the column */
    padding: 20px; /* Provides some padding around each logo for spacing */
}


/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .page-client .col-lg-4, .page-client .col-md-4, .page-client .col-6 {
        flex: 0 0 50%; /* Adjusts the flex-basis to show two logos per row on smaller screens */
        max-width: 50%; /* Matches the max-width to flex-basis */
    }
    .company-logo img {
        max-height: 100px; /* Slightly smaller logos on mobile devices for better fit */
    }
}