/********** Template CSS **********/
:root {
    --primary: #348E38;
    --secondary: #525368;
    --light: #E8F5E9;
    --dark: #0F4229;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}

h1,
.h1,
h2,
.h2,
.fw-bold {
    font-weight: 700 !important;
}

h3,
.h3,
h4,
.h4,
.fw-medium {
    font-weight: 600 !important;
}

h5,
.h5,
h6,
.h6,
.fw-semi-bold {
    font-weight: 500 !important;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    transition: .5s;
    font-weight: 500;
}

.btn-primary,
.btn-outline-primary:hover {
    color: var(--light);
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


/*** Navbar ***/
/*** Navbar ***/
.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}
.navbar .navbar-brand,
.navbar a.btn {
    height: 80px;
}

.navbar .navbar-nav .nav-link {
    margin-right: 35px;
    padding: 25px 0;
    color: var(--dark);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none; /* Remove default underline */
    outline: none;
    position: relative; /* Position for the underline */
}

/* Normal state */
.navbar .navbar-nav .nav-link {
    transition: color 0.4s ease; /* Smooth color transition */
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: #6e94e5;    
}

/* Unique underline effect */
.navbar .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 22px !important; /* Initial position */
    width: 100%;
    height: 5px; /* Thickness of the underline */
    background: linear-gradient(90deg, #2052a2, #ce1933); /* Gradient underline */
    border-radius: 10px; /* Rounded corners for uniqueness */
    transform: scaleX(0); /* Initially hidden */
    transition: transform 0.4s ease, bottom 0.4s ease !important; /* Animation effect */
}

/* Show the underline on hover/active */
.navbar .navbar-nav .nav-link:hover::after,
.navbar .navbar-nav .nav-link.active::after {
    transform: scaleX(1); /* Show the underline */
    bottom: -10px; /* Move it down for a bounce effect */
}

/* Restore original position on transition end */
.navbar .navbar-nav .nav-link:not(:hover)::after {
    transition: transform 0.4s ease, bottom 0.4s ease !important; /* Ensure transition for return */
    bottom: -5px; /* Back to original position */
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 1000;
    vertical-align: middle;
    margin-left: 8px;
}

/* Media Query for Mobile */
@media (max-width: 991.98px) {
    .navbar .navbar-nav {
        display: flex; /* Enable flexbox */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items */
        width: 100%; /* Full width */
        border-top: 1px solid #EEEEEE; /* Top border for mobile */
    }

    .navbar .navbar-nav .nav-link {
        margin-right: 0; /* Remove right margin */
        padding: 15px 0; /* Adjust padding for mobile */
        text-align: center; /* Center align text */
    }
    .navbar .navbar-nav .nav-link::after {
        bottom: 9px !important;
    }
    .navbar-toggler {
        margin-right: 15px; /* Adjust margin */
    }
}

/* Dropdown Menu Styles for Mobile */
@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}



/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgb(15 66 41 / 21%);
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 15%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 3rem;
    background-color: #262c38;
    border: 10px solid #262c38;
}

@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.page-header {
    background: url(../img/AboutPageTop.webp) center center no-repeat;
    background-size: cover;
}
.page-header-faculties {
    background: url(../img/Facilities.webp) center center no-repeat;
    background-size: cover;
}
.page-header-faculties1 {
    background: url(../img/faculties.jpg) center center no-repeat;
    background-size: cover;
}

.page-header-event {
    background: url(../img/Events.jpg) center center no-repeat;
    background-size: cover;
    height: 228px;
}
.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--light);
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    font-size: 18px;
    color: var(--light);
}


/*** Top Feature ***/
@media (min-width: 991.98px) {
    .top-feature {
        position: relative;
        margin-top: -80px;
        z-index: 1;
    }
    .col-md-6 {
        flex: 100%; /* Make columns full width on mobile */
        max-width: 100%; /* Ensure columns do not exceed full width */
    }
}




/*** Service ***/
.service-item {
    position: relative;
    text-align: center;
}

.service-item .service-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
}

.service-item .service-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    object-fit: cover;
    transform: scale(1.2);
    transition: .3s;
    z-index: -1;
}

.service-item:hover .service-img img {
    transform: scale(1);
}

.service-item .service-text {
    background: #FFFFFF;
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
    transition: .3s;
}

.service-item:hover .service-text {
    background: rgba(15, 66, 41, .6);
}

.service-item .service-text h4,
.service-item .service-text p {
    transition: .3;
}

.service-item:hover .service-text h4 {
    color: #FFFFFF;
}

.service-item:hover .service-text p {
    color: var(--light);
}

.service-item .service-text .btn-square {
    width: 100px;
    height: 100px;
    background: transparent;
    transition: .5s;
}

.service-item:hover .service-text .btn-square {
    background: var(--light);
}

.service-item .service-text .btn {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    color: var(--dark);
    background: var(--light);
    white-space: nowrap;
    overflow: hidden;
    transition: .3s;
}

.service-item:hover .service-text .btn {
    width: 112px;
}


/*** Project Portfolio ***/
#portfolio-flters {
    display: inline-block;
    background: linear-gradient(135deg, #b3c2d9, #db8d99); /* Gradient background */
    padding: 13px 53px;
}

#portfolio-flters li {
    display: inline-block;
    font-weight: 700;
   color: #E8F5E9;
    cursor: pointer;
    transition: .5s;
    border-bottom: 2px solid transparent;
}

#portfolio-flters li:hover,
#portfolio-flters li.active {
    color: var(--dark);
    border-color: var(--dark);
}

.portfolio-inner {
    position: relative;
    overflow: hidden;
    height: 300px; /* Set a fixed height for all portfolio items */

}
.portfolio-inner img {
    width: 100%; /* Ensure the image covers the width */
    height: 100%; /* Ensure the image covers the height */
    object-fit: cover; /* Maintain aspect ratio while covering */
}
.portfolio-inner::before,
.portfolio-inner::after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(15, 66, 41, .6);
    transition: .5s;
}

.portfolio-inner::after {
    left: auto;
    right: 0;
}

.portfolio-inner:hover::before,
.portfolio-inner:hover::after {
    width: 50%;
}

.portfolio-inner .portfolio-text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: .5s;
    z-index: 3;
    opacity: 0;
}

.portfolio-inner:hover .portfolio-text {
    transition-delay: .3s;
    opacity: 1;
}

.portfolio-inner .portfolio-text .btn {
    background: #1c4ea0;
    color: #f7fdf7;
}

.portfolio-inner .portfolio-text .btn:hover {
    background:#c65555;
    color: #f9f9f9;
}


/*** Team ***/
.team-item {
    position: relative;
    overflow: hidden;
}

.team-item .team-text {
    position: absolute;
    width: calc(100% - 45px);
    left: -100%;
    bottom: 45px;
    padding: 1.5rem;
    background: #FFFFFF;
    border-radius: 0 4px 4px 0;
    opacity: 0;
    transition: .5s;
}

.team-item:hover .team-text {
    left: 0;
    opacity: 1;
}

.team-item .team-social .btn {
    background: var(--light);
    color: var(--primary);
}

.team-item .team-social .btn:hover {
    background: var(--primary);
    color: var(--light);
}

.team-item .team-img .team-social {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s;
    z-index: 3;
    opacity: 0;
}

.team-item:hover .team-img .team-social {
    transition-delay: .3s;
    opacity: 1;
}


/*** Testimonial ***/

.testimonial-carousel .owl-item img {
    width: 100px;
    height: 100px;
}

.testimonial-carousel .owl-nav {
    margin-top: 4px;
    display: flex;
    justify-content: center;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    margin-right: 15px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#e8292d;
    background: var(--light);
    border-radius: 4px;
    font-size: 22px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: #e8292d;
    color: var(--light);
}


/*** Footer ***/
.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: var(--light);
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--primary);
    letter-spacing: 1px;
    box-shadow: none;
}

.copyright {
    color: var(--light);
    background: #072A19;
}

.copyright a {
    color: #FFFFFF;
}

.copyright a:hover {
    color: var(--primary);
}
/* b2 image  */

.logo-text {
    display: block; /* Show text by default */
}

/* Media query for small screens and up */
@media (min-width: 576px) {
    .logo-image {
        display: block; /* Show image on small screens and up */
        width: auto; /* Adjust width as needed */
        max-height: 50px; /* Keep the image size manageable */
    }

    .logo-text {
        display: none; /* Hide text on small screens and up */
    }
}



.col-md-6 {
    flex: 1; /* Allow columns to grow equally */
    min-width: 0; /* Prevent overflow issues */
}


@keyframes scroll-up {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}

.event {
    margin-bottom: 10px; /* Space between events */
}

.divider {
    border: none;
    border-top: 1px solid #ddd; /* Style your divider */
    margin: 10px 0; /* Space around the divider */
}
/* see more client reviews */
.d-none {
    display: none;
}
.d-block {
    display: block;
}

/* Ensure container is relatively positioned for absolute elements inside */
.container-xxl {
    position: relative;
}

/* Style for the background image container */
.image-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/about1.jpg);
    background-size: cover; /* Cover the container */
    background-position: center; /* Center the image */ 
    z-index: -1; /* Place behind the content */
}

/* Style for content overlay */
.content-overlay {
    position: relative;
    padding: 2rem; /* Adjust padding as needed */
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    transition: transform 0.5s ease; /* Smooth transition */
}

/* Slide-in effect if desired */
.container-xxl:hover .content-overlay {
    transform: translateX(0); /* Slide in effect */
}

/* Initial off-screen position for content overlay */
.content-overlay {
    transform: translateX(-100%); /* Start off-screen if sliding effect is used */
}

/* Optional: Adjust button styles */
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}


.facts {
    position: relative;
    background: url('img/15IMG1016-1.jpg') no-repeat center center; 
    background-size: cover; /* Ensures the background image covers the whole section */
    overflow: hidden; /* Prevents any content overflow */
    height: 360px; /* Set your desired height here */
    margin-top: 1rem !important;
    background: rgba(15, 66, 41, .6);
    padding-top: 40px;
    /* margin-bottom: 3rem !important; */
}
.facts1 {
    position: relative;
    background-size: cover; /* Ensures the background image covers the whole section */
    overflow: hidden; /* Prevents any content overflow */
    height: 440px !important; /* Set your desired height here */
    padding: 100px;; /* Adjust padding as needed */
    /* Optional: For responsive padding, you can use media queries */
    margin-top: -4rem;
   

    /* margin-bottom: 3rem !important; */
}

.text-background {
    position: absolute;
    right: 0; /* Aligns the element to the right side */
    top: 0; /* Aligns the element to the top */
    bottom: 0; /* Stretches the element to the bottom of the container */
    width: 50%; /* Adjust width as needed */
    height: 100%; /* Stretches to the full height of the container */
    background: rgba(15, 66, 41, .6); /* Semi-transparent green background */
    padding: 2rem; /* Adjust padding as needed */
    color: #fff; /* Ensures text is visible */
    box-sizing: border-box; /* Ensures padding is included in width calculation */
    display: flex;
    align-items: center; /* Center-aligns text vertically */
    justify-content: center; /* Center-aligns text horizontally */
    min-height: 300px; /* Set a minimum height for better vertical centering */

}

.display-12{
    font-size: 2rem;
        color: yellowgreen;
}
.text-background span {
    display: block; /* Makes sure the text spans full width */
}
/* CSS to set background image for .scrolling-content */
.scrolling-content {
    height: 300px; /* Set the height according to your needs */
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    background: url('../img/event123.jpeg') no-repeat center center;
    background-size: cover; /* Ensures the background image covers the entire element */
    padding: 20px; /* Adjust padding as needed */
    color: #fff;
    border-radius: 30px;
    margin-right: -40px;
}

/* Dark overlay for better text contrast */
.scrolling-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:rgb(163 162 162 / 70%); /* Darker overlay for better readability */
    z-index: 1;
}

.scrolling-content .event {
    animation: scroll-up 15s linear infinite; /* Adjust duration for scroll speed */
    padding: 20px; /* Space between items */
    display: flex;
    flex-direction: column;
    position: relative; /* Ensure the text sits above the overlay */
    z-index: 2; /* Bring the event text above the overlay */
}

.event-title {
    color: #d84a5e; /* Blue color */
    font-size: 1.5em;
    margin: 0 0 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Add text shadow for better visibility */
}

.event-date {
    color: #1b4ea0;; /* Red color */
    font-size: 1em;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Add text shadow for better visibility */
}

/* Divider for better structure */
.divider {
    border: none;
    height: 2px;
    background-color: #eaeaea; /* Light divider */
    margin: 20px 0;
}

/* Animation for scrolling effect */
@keyframes scroll-up {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}


/* Ensure text sections are above the overlay */
.event {
    position: relative;
    z-index: 2;
    margin-bottom: 20px; /* Adjust spacing between events */
}

.divider {
    border-top: 1px solid #fff; /* Divider color to match text visibility */
}


/* Full-width Image and Text Section */
.feature-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.feature-content {
    background-color: #f8f9fa; /* Light background for better readability */
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.feature-content h1 {
    color: #1d4fa1; /* Main color */
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.feature-content p {
    color: #333;
    font-size: 1.1rem;
    line-height: 1.6;
}

.feature-content a.btn-primary {
    background-color: #ce1933; /* Highlight button color */
    border-color: #ce1933;
}

.feature-item {
    background-color: #ffffff; /* White background for feature items */
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s;
    margin-bottom: 20px;
}

.feature-item:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.feature-item .feature-image img {
    border-radius: 10px;
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.feature-item .feature-text {
    flex: 1;
}

.feature-item h4 {
    color: #1d4fa1; /* Main color */
    margin-bottom: 10px;
}

.feature-item p {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .col-md-6 {
        flex: 100%; /* Make columns full width on mobile */
        max-width: 100%; /* Ensure columns do not exceed full width */
    }
    .bg-dark1 {
        height: auto !important;
    }
    .container-about {
        display: block !important; /* Change to flex display on screens 768px and wider */
    }
    .justify-content-center {
        justify-content: center !important;
        width: 100%;
    }
    .about-img {
        margin-left: 56px !important;
    }
    .display-1 {
        text-align: center;
    }
    .container-cards {
      
        margin-left: 90px !important;
        text-align: center !important;
    }
    .feature-content {
        padding: 20px;
    }
    .feature-item {
        padding: 15px;
    }

    .feature-item .feature-image img {
        width: 80px;
        height: 80px;
    }
    .text-right {
        padding-left: 0% !important;
    }
    .text-start {
        text-align:start !important;
    padding-left: 8px !important;
    padding-right: 0px !important;
    }
}
/* Overall Container */
.container-xxl {
    padding: 60px 0;
}

/* Text Content */
.text-content {
    position: relative;
    padding: 20px;
    background: linear-gradient(to right, #3267bc, #ec5b70);
    color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    margin-top: 4px;
}

.text-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    z-index: -1;
}

/* Features Section */
.features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s;
}

.feature:hover {
    transform: translateY(-5px);
}

.feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, rgba(0,0,0,0.1), rgba(0,0,0,0.05));
    border-radius: 15px;
    z-index: -1;
}

.feature-image {
    flex: 0 0 120px;
    height: 120px;
    overflow: hidden;
}

.feature-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    object-fit: cover;
}

.feature-text {
    flex: 1;
    padding: 20px;
}

.feature-text h4 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: #1d4fa1; /* Matching the primary color */
}

.feature-text p {
    color: #555;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .features {
        flex-direction: column;
    }

    .feature {
        flex-direction: column;
        align-items: flex-start;
    }

    .feature-image {
        width: 100%;
        height: 200px;
    }
}

/* Button Styles */
.btn-primary {
    background-color: #ce1933;
    border-color: #ce1933;
}

.btn-primary:hover {
    background-color: #1d4fa1;
    border-color: #1d4fa1;
}

/* Container Styling */
.why-choose {
    display: flex;
    align-items: center; /* Vertically center the items */
    justify-content: space-between; /* Space between content and image */
}

/* Styling for content */
.why-choose .content {
    flex: 1; /* Allow content to take up the available space */
    padding: 10px; /* Optional padding for spacing */
}

.why-choose .content h4 {
    color: #1D4FA1; /* Blue color for the heading */
    margin-bottom: 10px; /* Space below heading */
}

.why-choose .content p {
    color: #333; /* Dark grey text for readability */
    margin: 0; /* Remove margin for paragraphs */
}

/* Styling for the image */
.why-choose .image {
    flex-shrink: 0; /* Prevent the image from shrinking */
}

.why-choose .image img {
    max-width: 100%; /* Ensure image scales with container width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Optional: Rounded corners for the image */
}

/* Responsive Design Adjustments */
@media (max-width: 767px) {
    .why-choose {
        flex-direction: column; /* Stack content and image vertically on small screens */
        text-align: center;
    }

    .why-choose .image img {
        width: 100%; /* Ensure image takes full width on small screens */
        max-width: none; /* Remove max-width restriction */
    }
}

/* Styling for img-choose class */
.img-choose {
    max-width: 500px; /* Set a maximum width for the image */
    height: 350px; /* Maintain aspect ratio */
    border-radius: 8px; /* Optional: Add rounded corners to the image */
    display: block; /* Ensure the image is displayed as a block element */
    margin: 35px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Add shadow for a 3D effect */
}

/* Container for positioning image to the right */
.img-container {
    display: flex; /* Use flexbox for alignment */
    justify-content: flex-end; /* Align content (image) to the right */
}






/* Style for each stats item */
.stats-item {
    text-align: center; /* Center text within the column */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Padding inside each item */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    
    color: #ffffff; /* Change text color to white or any other color */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Darker shadow for better contrast */
}

/* Style for icons */
.stats-icon {
    width: 60px; /* Set icon width */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 10px; /* Space between icon and text */
}

/* Full-width section */
.stats-section {
    background: url('img/15IMG1016-1.jpg') no-repeat center center;
    background-size: cover;
    padding: 0; /* Optional: adjust if needed */
}

/* Ensure the row does not wrap */
.no-wrap {
    flex-wrap: nowrap; /* Prevent wrapping */
}

/* Ensure columns fit in one row */
.col {
    flex: 1 0 0; /* Allow columns to grow and fit the row */
    display: flex; /* Use flexbox to center content */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
}

/* Spacing between items */
.row > .col {
    padding: 0 15px; /* Adjust spacing between columns */
}

/* Styling for stats items */


/* Text styling for numbers and labels */
.stats-number {
    font-size: 2.5rem; /* Adjust font size for numbers */
 
}


.stats-label {
    font-size: 2rem; /* Adjust font size for labels */
   
 
}


/* Responsive Design Adjustments */


/* Style for



/* Reset some default browser styles */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

/* Container for the faculty profiles */
.faculty-container {
    max-width: 1200px;
    margin: 4px auto;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 45px;
}

/* Individual profile styling */
.faculty-profile {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-top: 5px solid #1d4fa1; /* Top border with deep blue */
}

/* Header styles */
.profile-header {
    text-align: center;
    border-bottom: 2px solid #cd1832; /* Bottom border with vibrant red */
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.profile-header h4 {
    font-size: 1em;
    margin: 0;
    color: #1d4fa1; /* Deep blue color */
    padding-top: 14px;
}

.profile-header p {
    font-size: 1.1em;
    color: #cd1832; /* Vibrant red color */
}

/* Details section */
.profile-details {
    padding: 10px;
}

.profile-details h2 {
    font-size: 1em;
    margin-bottom: 6px;
    color: #1d4fa1; /* Deep blue color */
}

.profile-details p {
    font-size: 1.1em;
    color: #666;
}

.py-2 {
    padding-top: 1rem !important;
}
.mb-2 {
    margin-bottom: 1rem !important;
}
/* Header for the Faculties section */
.commen-header {
    text-align: center;
    margin: -27px 0;
}

.commen-header h4 {
    font-size: 1.8em; /* Larger font size for emphasis */
    color: #fff; /* White text color */
    background: linear-gradient(135deg, #1d4fa1, #cd1832); /* Gradient background with deep blue and vibrant red */
    -webkit-background-clip: text; /* Clips the background to the text */
    -webkit-text-fill-color: transparent; /* Makes text color transparent so the gradient is visible */
   padding-top:50px;
    border-radius: 5px; /* Rounded corners for a smooth look */
    display: inline-block; /* Ensures the background and padding fit tightly around the text */
    box-shadow: none; /* Remove shadow for a cleaner look */
    margin-bottom: 30px; /* Space below the header */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Subtle text shadow for depth */
}
.transport{
    font-size: 1.8em; /* Larger font size for emphasis */
    color: #fff; /* White text color */
    background: linear-gradient(135deg, #1d4fa1, #cd1832); /* Gradient background with deep blue and vibrant red */
    -webkit-background-clip: text; /* Clips the background to the text */
    -webkit-text-fill-color: transparent; /* Makes text color transparent so the gradient is visible */
  
    border-radius: 5px; /* Rounded corners for a smooth look */
    display: inline-block; /* Ensures the background and padding fit tightly around the text */
    box-shadow: none; /* Remove shadow for a cleaner look */
   
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Subtle text shadow for depth */
}
.custom-form {
    background-color: #fff; /* White background for the form */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 20px; /* Inner padding */
    width: 68%;
    margin-top: 36px;

}

.form-floating {
    margin-bottom: 15px; /* Space between fields */
}

.form-control {
    border: 1px solid #ced4da; /* Light border */
    border-radius: 5px; /* Slightly rounded corners */
    transition: border-color 0.3s; /* Smooth border transition */
}

.form-control:focus {
    border-color: #007bff; /* Change border color on focus */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Subtle shadow on focus */
}

label {
    color: #6c757d; /* Light gray label color */
}

.btn-primary {
    background-color: #007bff; /* Primary button color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded button corners */
    transition: background-color 0.3s; /* Smooth background transition */
}

.btn-primary:hover {
    background-color: #0056b3; /* Darker color on hover */
}



/* Button styling */
.custom-form .btn-primary {
    background-color: #1d4fa1; /* Deep blue background */
    border: none; /* Remove default border */
    border-radius: 8px; /* Rounded corners for the button */
    padding: 15px 25px; /* Comfortable padding */
    font-size: 1.1em; /* Slightly larger font size */
    color: #ffffff; /* White text color */
    font-weight: bold; /* Bold text */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transitions */
    text-transform: uppercase; /* Uppercase text for emphasis */
    width: 26%;
}

.custom-form .btn-primary:hover {
    background-color: #cd1832; /* Vibrant red background on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow on hover for depth */
}

/* Button focus and active states */
.custom-form .btn-primary:focus,
.custom-form .btn-primary:active {
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 0 3px rgba(205, 24, 50, 0.2); /* Red shadow on focus/active */
}
.testimonial-section {
    padding: 15px 23px;
    width: 100%;
    height: auto; /* Allow height to adjust based on content */
    display: flex; /* Use flexbox for alignment */
    flex-direction: row; /* Align items horizontally */
    flex-wrap: wrap; /* Allow items to wrap if necessary */
    justify-content: center; /* Center align items */
}

.testimonial-card {
    background: #fff; /* White background for cards */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Enhanced shadow for depth */
    display: flex; /* Flexbox for layout */
    align-items: flex-start; /* Align items to the top */
    overflow: hidden; /* To clip the content */
    transition: transform 0.3s; /* Smooth hover effect */
    min-height: 300px; /* Set a minimum height for the card */
    margin-bottom: 20px; /* Space between cards */
}
.testimonial-image-container {
    padding: 20px; /* Spacing around the image */
}

.testimonial-image {
    width: 260px; /* Full width */
    height: 250px; /* Maintain aspect ratio */
    border-radius: 10px; /* Rounded corners for the image */
}
.testimonial-carousel .owl-item img {
    width: 260px; /* Full width */
    height: 250px; /* Maintain aspect ratio */
    border-radius: 10px; /* Rounded corners for the image */
}
.testimonial-content {
    flex: 1; /* Content takes the remaining space */
    padding: 44px; /* Padding inside the content area */
    overflow: hidden; /* Hide overflow */
    position: relative; /* Position relative for button */
    transition: max-height 0.3s ease; /* Smooth transition for expanding */
}


.testimonial-name {
    font-weight: bold; /* Bold name */
}

.profession {
    font-style: italic; /* Italic style for profession */
    color: #777; /* Lighter color for the profession */
}
.toggle-content {
    background: none; /* Remove background */
    border:none;
    color: #1d4fa1; /* Change color to match theme */
    text-decoration: underline; /* Underline to indicate it's a link */
    cursor: pointer; /* Pointer cursor */
    margin-left: auto; /* Push to the right */
    display: inline-block; /* Make it an inline-block for proper spacing */
    position: relative; /* Position relative for alignment */
}
@media (max-width: 576px) {
    .bg-dark {
        text-align: center; /* Center text on mobile */
    }

    .bg-dark .btn-link {
        margin: -4px -6px; /* Adjust spacing for social links */
    }

    .bg-dark .fas, .bg-dark .far {
        margin-right: 5px; /* Space between icons and text */
    }
}

.bg-dark {
    background: linear-gradient(135deg, #1a4da0, #e1465d); /* Gradient background */
}
.bg-dark1 {
    background: linear-gradient(135deg, #1a4da0, #e1465d); /* Gradient background */
    height: 350px;
}
.pyf-5{
    padding-top: 2rem !important;
    margin-top: -48px !important;
}
.footer-logo {
    margin-bottom: 25px;
    /* max-height: 51px; */
    width: 83%;
    margin-top: 60px;
    height: 80px;
}


    img {
        vertical-align: middle;
        border-style: none;
    }
    .logo-image {
        display: block;
        max-width: 100%;
        height: auto;
        max-height: 50px;
    }
   .text-right{
    padding-left: 93px;
    padding-top: 3px;

   }
   .mbf-2{
    padding: 40px;
   }
   .school-name {
    font-size: 1.2rem; /* Larger font size for emphasis */
    font-weight: bold; /* Make text bold */
   
}

.school-name:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}
.commen-header-why {
    text-align: center;
    margin: -50px 0;
}
.card {
    border: 1px solid #1d4fa1; /* Border color */
    border-radius: 10px; /* Rounded corners */
    transition: transform 0.3s; /* Animation effect */
   
    margin-top: 35px; /* Remove margin */
    padding: 0; /* Remove padding */
    width: 330px; /* Set a specific width for cards */
    height: 400px;

}
.container-cards{
    
        max-width: 1075px;
        margin-top: 32px;
        margin-left: 249px;
}

.card:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}


.card-title {
    font-size: 1.5rem; /* Title font size */
}

.card-body {
    padding: 20px; /* Padding inside card */
    flex-grow: 1; /* Allow the body to grow and fill the card */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space between title and content */
}

.text-primary {
    color: #1d4fa1; /* Primary text color */
}
.vission-1{
    left: -264px;
}
.card-mission {
    background-color: #df429b; /* Light blue for mission */
}

.card-core {
    background-color: #e5425f; /* Light pink for another mission */
}

.card-vision {
    background-color: #204c9e; /* Light green for vision */
}
.card-body {
    color: white; /* Set text color to white */
}

.card-title {
    color: white; /* Ensuring the title is also white */
}


.py-about{
    padding: 6rem;
}
img {
    vertical-align: middle;
    border-style: none;
}

.logo-image {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 50px;
}
.text-right{
padding-left: 93px;
padding-top: 3px;

}

.mbf-2{
    padding: 40px;
    }
    .school-name {
    font-size: 1.2rem; /* Larger font size for emphasis */
    font-weight: bold; /* Make text bold */
    
    }


    .school-name:hover {
        transform: scale(1.05); /* Slightly enlarge on hover */
        }
        .commen-header-why {
        text-align: center;
        margin: -50px 0;
        }
        .py-about{
        padding: 6rem;
        }

     
          .ps-4 {
            padding-left: 1.5rem; /* Additional padding */
        }

        .container-about {
            display: flex;
            align-items: center;
            justify-content: center;
          }
          
          .about-img {
            max-width: 78%;
            max-height: 100%;
            margin-left: 88px;
            border-radius: 7px;
          }
          
          .about-text {
            font-size: 20px;
            padding-left: 20px;
            padding-top: 0%;
            float: left;
          }
          .card-logo {
            max-width: 76px; /* Adjust logo size if necessary */
            margin: 0 auto;   /* Center logo */
            margin-top: -37px;
        }
        
        .card-body p {
            margin-bottom: 1.1rem; /* Adjust bottom margin of paragraphs */
        }

        /* General styles for the item containers */
.item-container-faculties {
    margin-bottom: 30px; /* Space between item rows */
    max-width: 1100px;
}


/* Styles for images */
.item-image {
    max-width: 100%;
    height: 340px;
    width: 302px;
    margin-left: 94px;
    display: block;
    border-radius: 10px;
    margin-top: 29px;
}
.item-image1 {
    max-width: 100%;
    height: 340px;
    width: 302px;
    margin-left: 299px;
    display: block;
    border-radius: 10px;
    margin-top: 29px;
    margin-bottom: 40px;
}

/* Styles for titles */
.item-title {
    font-size: 1.5rem; /* Font size for the title */
    margin-bottom: 1rem; /* Space below the title */
}

/* Styles for descriptions */
.item-description {
    font-size: 1rem; /* Font size for the description */
    line-height: 1.5; /* Line height for better readability */
    color: #555; /* Gray color for description text */
}
.blockquote {
    border-left: 4px solid #007bff; /* Blue left border */
    padding-left: 1rem; /* Space between border and text */
    margin: 1.5rem 0; /* Margin above and below the blockquote */
    font-style: italic; /* Italic style for the quote */
    color: #555; /* Text color */
}

.blockquote-footer {
    display: block; /* Display footer on its own line */
    margin-top: 0.5rem; /* Space above footer */
    font-size: 0.875rem; /* Smaller font size for footer */
    color: #888; /* Lighter color for footer text */
}

.faculty-de{
    width: 178%;

}
.faculty-de1 {
    width: 130%;
    margin-bottom: 30px;
    margin-right: 63px;
}   
.executive1{
    margin-left: 56px;
}

/* activity slider */

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.gallery {
    max-width: 899px;
    width: 100%;
    height: 31rem;
    position: relative;
    display: grid;
    align-items: start;
    margin-left: 222px;
    margin-bottom: 100px;
    margin-top: 30px;
    display: grid;
    place-items: center;
    overflow: hidden;
   
}
.slider {
  display: flex;
  position: relative;
}
.wrapper {
  position: relative;
  display: none;
  transition: transform 0.5s ease-out, left 0.5s ease-out;
}
.flipped {
  position: absolute;
  bottom: calc(-100% - 10px);
  transform: scaleY(-1);
}
.wrapper::after {
  content: "";
  position: absolute;
  bottom: calc(-100% - 10px);
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(19, 19, 19, 0.75),
    rgba(19, 19, 19, 1) 50%
  );
}
.wrapper:has(+ * + * + .selected) {
  display: flex;
  position: absolute;
  top: 50%;
  left: calc(50% - var(--image-size));
  transform: translate3d(-50%, -50%, 0) scale(0);
  z-index: 0;
}
.wrapper:has(+ * + .selected) {
  display: flex;
  position: absolute;
  top: 50%;
  left: calc(50% - var(--image-size) / 2);
  transform: translate3d(-50%, -50%, 0) scale(0.8);
  z-index: 1;
}
.wrapper:has(+ .selected) {
  display: flex;
  position: absolute;
  top: 50%;
  left: calc(50% - var(--image-size) / 4);
  transform: translate3d(-50%, -50%, 0) scale(0.9);
  z-index: 2;
}
.selected {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 3;
}
.selected + .wrapper {
  display: flex;
  position: absolute;
  top: 50%;
  left: calc(50% + var(--image-size) / 4);
  transform: translate3d(-50%, -50%, 0) scale(0.9);
  z-index: 2;
}
.selected + * + .wrapper {
  display: flex;
  position: absolute;
  top: 50%;
  left: calc(50% + var(--image-size) / 2);
  transform: translate3d(-50%, -50%, 0) scale(0.8);
  z-index: 1;
}
.selected + * + * + .wrapper {
  display: flex;
  position: absolute;
  top: 50%;
  left: calc(50% + var(--image-size));
  transform: translate3d(-50%, -50%, 0) scale(0);
  z-index: 0;
}
.arrows {
  position: absolute;
  bottom: 0;
  width: 73%;
  display: flex;
  justify-content: space-around;
  z-index: 4;
}
.arrows .left,
.arrows .right {
  position: relative;
  cursor: pointer;
}
.arrows .left.disabled,
.arrows .right.disabled {
  opacity: 1;
}
.arrows .left::before,
.arrows .right::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 3rem;
  height: 4px;
  transform: translateY(-50%);
}
.arrows .left:before {
  right: -100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1),
    rgba(231, 225, 225, 0)
  );
}
.arrows .right::before {
  left: -100%;
  background: linear-gradient(
    90deg,
    rgba(216, 172, 172, 0),
    rgba(255, 255, 255, 1)
  );
}
.arrows svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: #fff;
}
img {
  border-radius: 6px;
}

/* end */
.img-fluid-event {
    max-width: 106%;
    height: 61px;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 38px;
}

.card-event {
    background: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    margin: 20px;
    width: calc(22% - 64px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 332px;
}

.read-more {
    background: #ff6347;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.read-more:hover {
    background: #ff4500;
}

.popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.popup-content {
    background-color: #fefefe;
    margin: 12% auto;
    padding: 14px;
    border: 1px solid #888;
    width: 30%;
    height: 27%;
    text-align: center;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.event-title {
    color: #d84a5e;; /* Customize the color for the title */
}

.event-start-date {
    color: #4caf50; /* Customize the color for the start date */
}

.event-end-date {
    color: #2196f3; /* Customize the color for the end date */
}
.py-event{
    padding-top: 10rem !important;
}

.item-image-facilites {
    max-width: 100%;
    height: 321px;
    width: 434px;
    margin-left: 196px;
    display: block;
    border-radius: 10px;
    margin-top: 47px;
}

.item-container-facilities {
    margin-bottom: 30px; /* Space between item rows */
    max-width:100%;
}
.img-fluid-facilities {
   
    height: 61px;
}



.container-facilities2 {
    display: flex;
    align-items: center;
    justify-content: center
  }
  
  .item-image-facilites2 {
    max-width: 100%;
    max-height:100%;
    margin-left: 284px;

  }
  
  .custom-right-gap {
    font-size: 19px;
    padding-left: 111px;
    margin-right: 164px;
    margin-top: -8px;
    line-height: 29px;
 }

  .pschar-4 {
    padding-left: 2.5rem !important;
    margin-top: 87px;
}

.charmen-font {
    font-size: 1.8em; /* Larger font size for emphasis */
    color: #fff; /* White text color */
    background: linear-gradient(135deg, #1d4fa1, #cd1832); /* Gradient background with deep blue and vibrant red */
    -webkit-background-clip: text; /* Clips the background to the text */
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Subtle text shadow for depth */
}
.img-fluid-bus{
    height: 338px;
    margin-bottom: 38px;
    margin-left: -7px;
}

.float{
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 104px;
    right: 24px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}



.my-float{
	margin-top:16px;
}

@media screen and (max-width: 480px) { /* For devices like 320x480 */
    .event-title {
        font-size: 16px; /* Smaller title size */
    }

    .event-date {
        font-size: 12px; /* Smaller date size */
    }

    .charmen-font {
        font-size: 18px; /* Smaller font size for chairman’s desk */
    }

    .scrolling-content {
        max-height: 250px; /* Further limit height for very small screens */
    }
}

/* Additional media query for larger mobile devices */
@media screen and (max-width: 768px) { /* For tablets and larger phones */
   
    .owl-carousel {
        display: none;
        width: 100%;
        height: 1139px;
        z-index: 1;
    }
  
   /* Base styles for mobile devices */
.container-xxl {
    padding: 10px; /* Adjust container padding */
}

.row.g-5 {
    flex-direction: column; /* Stack columns vertically */
    padding-right: 20px;
}

.col-lg-6,
.col-md-12 {
    width: 100%; /* Make columns full width */
    padding: 0; /* Remove padding */
}

.scrolling-content {
    overflow-y: auto; /* Allow scrolling for long content */
    max-height: 300px; /* Limit height for better display */
}

.event-title {
    font-size: 18px; /* Adjust title size */
}

.event-date {
    font-size: 14px; /* Adjust date size */
}

.charmen-font {
    font-size: 20px; /* Adjust font size for chairman’s desk */
}

.divider {
    border-top: 1px solid #ccc;
    margin: 10px 0;
}
    .event-title {
        font-size: 18px; /* Medium title size */
    }

    .event-date {
        font-size: 14px; /* Medium date size */
    }

    .charmen-font {
        font-size: 20px; /* Maintain size for chairman’s desk */
    }

    .scrolling-content {
        max-height: 300px; /* Standard height for scrolling */
        margin-left: 8px;
    }

    .row.no-wrap {
        text-align: center; /* Center text and content */
    }
    .stats-section {
    
        margin-top: 275px;
    }

    .facts {
        display: flex;
        
        height: 347px;
    }

    .stats-item {
        flex: 1 1 50%; /* Two items per row */
        box-sizing: border-box; /* Ensure padding is included in width */
        padding: 10px; /* Adjust padding for each stat item */
    }

    .stats-number {
        font-size: 35px; /* Adjust font size for numbers */
    }

    .stats-label {
        font-size: 15px; /* Adjust font size for labels */
    }
    .commen-header h4 {
        margin-top: -33px;
                padding-bottom: 5px;
    }
    .g1-5{
        --bs-gutter-y: -1rem;
    }
    .mb-4{
        margin-bottom: 0.5rem !important;
        padding: 16px;
    }
    .bis-cover{
        margin-left: 80px;
        margin-bottom: 20px;
    }
    .img-choose {
        max-width: 300px; /* Adjust size for smaller screens */
        margin-bottom: 34px;
    }
    
    .img-container {
        justify-content: center; /* Center the image on very small screens */
    }
    .pschar-4 {
        padding-left: 1.5rem !important;
        margin-top: -32px;
    }
    .why-choose .content h4 {
        color: #1D4FA1;
    }

    .testimonial-card {
        display: flex; /* Use flexbox for alignment */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align items horizontally */
        text-align: center; /* Center text */
        padding: 10px; /* Adjust padding for mobile */
        margin-bottom: 20px; /* Add space between cards */
    }

    .testimonial-image {
        width: 80%; /* Scale down image for smaller screens */
        height: auto; /* Maintain aspect ratio */
    }

    .testimonial-text {
        font-size: 1rem; /* Adjust font size */
    }

    .testimonial-name {
        font-size: 1.2rem; /* Adjust name font size */
    }
    .testimonial-content {
        flex: 1;
        padding: 20px; /* Reduced padding for better fit */
        overflow: hidden;
        position: relative;
        width: 100%;
        height: auto; /* Set height to auto to accommodate text */
        transition: max-height 0.3s ease;
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center content */
        text-align: center; /* Center text */
    }
    
    .testimonial-image-container {
        margin-bottom: 15px; /* Space between image and text */
    }
    
    .testimonial-image {
        width: 100%; /* Full width for images */
        height: auto; /* Maintain aspect ratio */
        border-radius: 10px; /* Optional: rounded corners */
    }

    .facts1 {
        padding: 20px 10px; /* Adjust padding for smaller screens */
        height: auto;

    }

    .text-background {
        width: 100%; /* Full width on smaller screens */
        padding: 1rem; /* Adjust padding */
        text-align: center; /* Center text */
        min-height: auto; /* Remove minimum height to fit content */
    }

    .display-12 {
        font-size: 1.5rem; /* Adjust font size for headings */
    }

    .mb-4 {
        margin-bottom: 1rem; /* Adjust margin for paragraphs */
    }

    .btn {
        font-size: 0.9rem; /* Adjust button size */
        padding: 10px 15px; /* Adjust button padding */
    }
}
    
@media screen and (max-width: 480px) { /* For mobile phones */
    .testimonial-section {
        padding: 15px 23px;
        width: 100%;
        height: auto; /* Allow height to adjust based on content */
        display: flex; /* Use flexbox for alignment */
        flex-direction: row; /* Align items horizontally */
        flex-wrap: wrap; /* Allow items to wrap if necessary */
        justify-content: center; /* Center align items */
        margin-bottom: 20px;
    }

    .testimonial-card {
        margin: 5px; /* Smaller margin */
    }

    .testimonial-text {
        font-size: 0.9rem; /* Smaller text for mobile */
    }

    .testimonial-name {
        font-size: 1rem; /* Smaller name font size */
    }
}
.location-info {
    display: flex;            /* Use flexbox for alignment */
    align-items: center;     /* Center items vertically */
}

.location-info i {
    margin-right: 10px;      /* Adjust spacing between icon and text */
}
.custom-container {
    padding: 20px; /* Adjust padding as needed */
}

.custom-contact-section {
    padding: 20px;
    background-color: #f8f9fa; /* Light background for contrast */
    border-radius: 5px; /* Rounded corners */
}

.custom-query-form .custom-form-floating {
    margin-bottom: 15px; /* Spacing between form fields */
}
.map{
    flex: 0 0 auto;
}


@keyframes fade{
    from{
      opacity:0.4;
    }
    to{
      opacity:1;
    }
  }
  
  
  
  #slider{
    position: relative;
      max-width: 420px;
      height: 301px;
      overflow: hidden;
      margin-left: 204px;
      border-radius: 10px;
  }
  
  .slides{
    overflow:hidden;
    animation-name:fade;
    animation-duration:1s;
    display:none;
  }
  
  .item-image-facilitie{
   max-width: 100%;
      height: 321px;
      width: 434px;
      margin-left: 196px;
      display: block;
      border-radius: 10px;
      margin-top: 47px;}
  
  #dot{
    margin:0 auto;
    text-align:center;
  }
  .dot{
    display:inline-block;
    border-radius:50%;
    background:#d3d3d3;
    padding:8px;
    margin:10px 5px;
  }

  @media (max-width:567px){
    #slider{
      width:100%;
  
    }
  }