*{
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif, Poppins;
}


/* ----------------------------------------HIGHTLIGHTED MENU--------------------------------------------- */
.home, .menu-bar ul li:hover{
    color: #19dafa !important;
    border-radius: 3px;
    background: #19dafa;
}
.contact-important{
    color: #fff !important;
    border-radius: 3px;
    background: #19dafa;
    box-sizing: border-box;
}
.blog-important{
    color: #fff !important;
    border-radius: 3px;
    background: #19dafa;
    box-sizing: border-box;
}
.about-important{
    color: #fff !important;
    border-radius: 3px;
    background: #19dafa;
    box-sizing: border-box;
}


/* -------------------------------------HEADERS WITH NAVIGATIONS------------------------------------------ */
.header{
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url(images/background.jpeg);
    background-position: center;
    background-size: cover;
    position: relative;
}
.contact-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.contact-header h1{
    margin-top: 170px;
}
.blog-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/collegedesk.webp);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.blog-header h1{
    margin-top: 170px;
}
.about-important{
    color: #fff !important;
    border-radius: 3px;
    background: #19dafa;
    box-sizing: border-box;
}
.about-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpeg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.about-header h1{
    margin-top: 170px;
}





/* ---------------------------------CONTACT ROW - ORGANISATION INFORMATION------------------------------- */
.contact-row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}





/* -------------------------------------------NAVIGATION MENU------------------------------------------ */
nav{
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}
nav img{
    width: 150px;

}
.nav-links{
    flex: 1;
    text-align: right;
}
.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}
.nav-links ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 20px;
}
.nav-links ul li::after{
    content: '';
    width: 0;
    height: 2px;
    background: #4287f5;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.nav-links ul li:hover::after{
    width: 100%;
}
nav .fa-solid{
    display: none;
}
/*--------------------------------------Media query------------------------------------------ */
@media(max-width: 700px){
    .text-box h1{
        font-size: 17px;
    }
    .text-box p{
        font-size: 10px;
    }
    .nav-links ul li{
        display: block;
    }
    .nav-links ul li a{
        font-size: 15px;
    }
    .nav-links{
        position: absolute;
        background: #4287f5;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
    }
    nav .fa-solid{
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
    .nav-links ul li .fa-regular{
        display: none;
    }
    .nav-links ul{
        padding: 30px;
    }
}



/* -----------------------------------TEXT ON BANNER----------------------------------- */

.text-box{
    width: 90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.text-box h1{
    font-size: 62px;
}
.text-box p{
    margin: 10px 0 40px;
    font-size: 14px;
    color: #fff;
}

/* ------------------------------------LEARN MORE BTN WITH HOVER EFFECT------------------------------- */
.learn-more{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}
.learn-more:hover{
    border: 1px solid #4287f5;
    background: #4287f5;
    transition: 0.5s;
}
nav .fa-solid{
    display: none;
}

/* Media query */
@media(max-width: 700px){
    .text-box h1{
        font-size: 17px;
    }
    .text-box p{
        font-size: 10px;
    }
    .nav-links ul li{
        display: block;
    }
    .nav-links ul li a{
        font-size: 15px;
    }
    .nav-links{
        position: absolute;
        background: #4287f5;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
    }
    nav .fa-solid{
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
    .nav-links ul li .fa-regular{
        display: none;
    }
    .nav-links ul{
        padding: 30px;
    }
    .header{
        min-height: 100vh;
        width: 100%;
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url(images/background.jpeg);
        background-position: center;
        background-size: cover;
        position: relative;
    }
}











/* --------------------------------------HOME PAGE OTHER CSS---------------------------------- */


/* ----------------------UPCOMING EVENTS----------------------- */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    justify-content: center;
    align-items: center;
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%; /* Set width to 80% */
    margin: 0 auto; /* Center the panel */
    padding: 20px;
    background-color: #007bff; /* Primary color */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Shadow */
}

.search-box {
    display: flex;
    align-items: center;
}

.search-box input {
    padding: 10px;
    border-radius: 5px;
    border: none;
    margin-right: 10px;
    transition: all 0.3s ease; /* Smooth transition */
}

.search-box input:focus {
    outline: none;
    border-color: #0056b3; /* Darker border color on focus */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Light shadow on focus */
}

.search-btn,
.sort-btn,
.admin-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #fff;
    color: #007bff;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Shadow */
}

.search-btn:hover,
.sort-btn:hover,
.admin-btn:hover {
    background-color: #0056b3;
    color: #fff;
}

.sort-dropdown select {
    padding: 10px;
    border-radius: 5px;
    border: none;
    margin-right: 10px;
    transition: all 0.3s ease; /* Smooth transition */
}

.sort-dropdown select:focus {
    outline: none;
    border-color: #0056b3; /* Darker border color on focus */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Light shadow on focus */
}

.sort-dropdown button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #fff;
    color: #007bff;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Shadow */
}

.sort-dropdown button:hover {
    background-color: #0056b3;
    color: #fff;
}

.admin-panel button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #ff4500;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Shadow */
}

.admin-panel button:hover {
    background-color: #d32f00;
}

/* Add hover effect for the whole controls panel */
.controls:hover {
    background-color: #0056b3;
    transition: background-color 0.3s ease;
}

/* Existing styles */
.events {
    padding: 50px 0;
}

.event {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    cursor: pointer;
}

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

.upcoming {
    text-align: center;
    font-size: 36px;
    margin-bottom: 30px;
}

.event h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.event p {
    font-size: 16px;
    margin-bottom: 15px;
}

.event-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-countdown {
    font-size: 18px;
    color: #007bff;
}

.rsvp-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: #fff;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.rsvp-button:hover {
    background-color: #0056b3;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 1000;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}



/* -------------About Us-------------- */
.about{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}
.about h1{
    font-size: 36px;
    font-weight: 600;
}
.about p{
    color: #000000;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
}
.home-row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}
.about-col{
    flex-basis: 31%;
    background-color: #fff3f3;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}
.about-col h3{
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
}
.about-col p{
    text-align: left;
}
.about-col ul li{
    text-decoration: none;
}
.about-col:hover{
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
}

/* -------------------Media query--------------- */
@media(max-width:700px){
    .home-row{
        flex-direction: column;
    }
}



/* -------------Projects and Office----------- */
.projects{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
}
.projects-col{
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.projects-col img{
    width: 100%;
    display: block;
}
.layer{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}
.layer:hover{
    background: #308becb3;
}
.layer h3{
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
}
.layer:hover h3{
    bottom: 49%;
    opacity: 1;
}


/* ---------------------------PROJECTS - TEXT @ ABOUT US PAGE------------------------- */
/* -------------About Us-------------- */
.project-text{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}
.project-text h1{
    font-size: 36px;
    font-weight: 600;
}
.project-text p{
    color: #777;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
}
.projects-row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}
.projects-coll{
    flex-basis: 31%;
    background-color: #fff3f3;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}
.projects-coll h3{
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
}
.projects-coll:hover{
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
}

/* -------------------Media query--------------- */
@media(max-width:700px){
    .project-text{
        flex-direction: column;
    }
}



/* --------------GALLERY SECTION----------- */
.gallery{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}
.gallery-col{
    flex-basis: 31%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: left;
    overflow: hidden;
    position: relative;
}
.gallery-col img{
    width: 100%;
    border-radius: 10px;
}
.gallery-col p{
    padding: 0;
}
.gallery-col h3{
    margin-top: 16px;
    margin-bottom: 15px;
    text-align: left;
}
.slideshow-container {
    position: relative;
    max-width: 100%;
}

.mySlides {
    display: none;
    width: 100%;
    height: auto;
}
.mySlide{
    display: none;
    width: 100%;
    height: auto;
 }


/* ---------------Testimonials--------------- */
.testimonials{
    width: 80%;
    margin: auto;
    padding-top: 100px;
    text-align: center;
}
.testimonials-col{
    flex-basis: 44%;
    border-radius: 10px;
    margin-top: 5%;
    text-align: left;
    background: #308becb3;
    padding: 25px;
    cursor: pointer;
    display: flex;
}
.testimonials-col img{
    height: 40px;
    margin-left: 5px;
    margin-right: 30px;
    border-radius: 50%;
}
.testimonials-col p{
    padding: 0;
}
.testimonials-col h3{
    margin-top: 15px;
    text-align: left;
}
/* .testimonials-col{
    color: #086410;
} */
.star .fa-star, .star .fa-star-half{
    color: #086410;
}

/* ---------------------Media query------------------------- */
@media only screen and (max-width: 768px) {
    .testimonials{
        width: 95%;
    }
    .testimonials-col{
        flex-basis: 100%;
    }
    .testimonials-col img{
        height: 30px;
    }
    .testimonials-col h3{   
        font-size: 1em;
    }
}

/* ----------------------Alumni || CTA--------------------- */
.alumni{
    margin: 100px auto;
    width: 80%;
    background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(images/banner2.jpg);
    background-position: center;background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 100px 0;
}
.alumni h1{
    color: #fff;
    margin-bottom: 50px;
    padding: 0;
}
.alumni p{
    color: #fff;
    padding: 0;
}

/* --------------------Media query---------------------- */
@media only screen and (max-width:  768px){
    .alumni{
        width: 90%;
        margin-top: 50px;
    }
    .alumni h1{
        font-size: 1.5em;
    }
    .alumni p{
        font-size: 0.8em;
    }
}





/* -------------------------Footer------------------------------ */
/* Footer Styles */
.footer {
    background: linear-gradient(to right, #333, #555);
    color: #fff;
    padding: 30px 0;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}
.footer-column {
    flex: 1;
    padding: 0 15px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.footer-column:hover {
    transform: translateY(-10px);
    background-color: #444;
}
.footer-title {
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 20px;
    color: #007bff;
    transition: color 0.3s ease;
}
.footer-column:hover .footer-title {
    color: #0056b3;
}
.footer-logo img {
    max-width: 120px;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}
.footer-logo:hover img {
    transform: scale(1.1);
}
.footer-social-icons {
    margin-top: 25px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.footer-social-icons:hover {
    opacity: 1;
}
.footer-social-icons a {
    margin: 0 12px;
    color: #fff;
    font-size: 26px;
    transition: color 0.3s ease;
}
.footer-social-icons a:hover {
    color: #007bff;
}
.footer-links {
    margin-top: 25px;
    list-style-type: none;
    padding-left: 0;
    transition: opacity 0.3s ease;
}
.footer-links li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.footer-links a {
    color: #fff;
    text-decoration: none;
    margin-left: 12px;
    font-size: 16px;
    transition: color 0.3s ease;
}
.footer-links a:hover {
    text-decoration: underline;
    color: #007bff;
}
.footer-links .fab:hover {
    color: #007bff;
}
.footer-copyright {
    margin-top: 30px;
    border-top: 1px solid #555;
    padding-top: 15px;
    font-size: 14px;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}
.footer-copyright:hover {
    opacity: 0.7;
}
/* Additional Styles */
.footer-divider {
    margin: 25px 0;
    border-bottom: 1px solid #555;
}
.footer-inline-links a {
    margin: 0 12px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease;
}
.footer-inline-links a:hover {
    text-decoration: underline;
    color: #007bff;
}
.back-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff;
    color: #fff;
    padding: 12px 18px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.back-to-top:hover {
    background-color: #0056b3;
}
.footer-subscribe {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-subscribe input {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    margin-right: 12px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    max-width: calc(100% - 100px); /* Adjusted width */
}
.footer-subscribe input:focus {
    outline: none;
    border-color: #007bff;
}
.footer-subscribe button {
    padding: 12px 18px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    max-width: 100px; /* Adjusted width */
}
.footer-subscribe button:hover {
    background-color: #0056b3;
}
/* Developer Info Styles */
.developer-link {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    border: 1px solid #007bff;
    border-radius: 5px;
    color: #007bff;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.developer-link:hover {
    background-color: #007bff;
    color: #fff;
}
.footer-column p {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 16px;
}
/* Animations */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
     100% {
        opacity: 1;
    }
}
.animated {
    animation: slideInFromLeft 1s ease-in-out, fadeIn 1s ease-in-out;
}
/* Media Queries */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
    }
    .footer-column {
        width: 100%;
        margin-bottom: 20px;
    }
}
@media (max-width: 480px) {
    .footer-logo img {
        max-width: 100px;
    }
}





















/* ------------------------------------CONTACT US PAGE CSS---------------------------------------- */
/* -----------------CONTACT US ---------------- */
.location{
    width: 80%;
    margin: auto;
    padding: 80px 0;
}
.location iframe{
    width: 100%;
}
.contact-us{
    width: 80%;
    margin: auto;
}
.contact-col{
    flex-basis: 48%;
    margin-bottom: 30px;
}
.contact-col div{
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
.contact-col div .fa{
    font-size: 28px;
    color: #4287f5;
    margin: 10px;
    margin-right: 30px;

}
.contact-col div p{
    padding: 0;
}
.contact-col div h5{
    font-size: 20px;
    margin-bottom: 5px;
    color: #555;
    font-weight: 400;
}

.contact-col input, .contact-col textarea{
    width: 100%;
    padding: 15px;
    margin-bottom: 17px;
    outline: none;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.submit-btn{
    display: inline-block;
    text-decoration: none;
    color: #201f1f;
    border: 1px solid #5462b3;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}
.submit-btn:hover{
    border: 1px solid #4287f5;
    background: #4287f5;
    transition: 0.5s;
}




/* ---------------------------------------------BLOG PAGE CSS-------------------------------------- */

/* -------------------FAQ---------------------- */
.accordion{
    margin: 1px auto;
    width: 600px;
}
.accordion li{
    list-style: none;
    width: 100%;
    margin: 20px;
    padding: 10px;
    border-radius: 8px;
    background: #041f4b;
    box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
                -6px -6px 10px -1px rgba(87, 87, 87, 0.7) ;
}
.accordion li label{
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    color: rgb(228, 228, 228);
}
label::before{
    content: "+";
    margin-right: 10px;
    font-size: 24px;
    font-weight: 600;

}
input[type="radio"]{
    display: none;
}
.accordion .content{
    color: #0ca0f0;
    padding: 0 10px;
    line-height: 26px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s, padding 0.5s;
}
.accordion input[type="radio"]:checked + label + .content{
    max-height: 400px;
    padding: 10px 10px 20px;
}
.accordion input[type="radio"]:checked + label::before{
    content: "-";
}


/* ------------------------HORIZONTAL POST AREA----------------------------- */
.horizontal-posts {
    text-align: center;
    margin-top: 40px;
    padding: 0 20px;
    width: 80%;
    margin: 0 auto;
}

.post-carousel {
  display: flex;
  justify-content: space-between;
  overflow-x: hidden;
  margin: 20px 0;
  position: relative;
}

.post {
  flex: 0 0 30%;
  position: relative;
}

.post img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.post:hover img {
  transform: scale(1.1);
  opacity:  0.9;
}

.post-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.post:hover .post-overlay {
  opacity: 1;
}

.post-overlay h3 {
  color: #fff;
  margin-bottom: 10px;
}

.post-overlay p {
  color: #fff;
  margin-bottom: 20px;
}

.post-overlay a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  background-color: #007bff;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease, cursor 0.3s ease;
}

.post-overlay a:hover {
  background-color: #0056b3;
  cursor: pointer;
}

.prev, .next {
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 24px;
  padding: 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #333;
  transition: color 0.3s ease;
}

.prev:hover, .next:hover {
  color: #007bff;
}
  


  /* -------------BLOG CSS-------------- */
.blog-content{
    width: 80%;
    margin: auto;
    padding: 60px 0;
}
.row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}
.blog-left{
    flex-basis: 65%;
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0.0.0.0.5)), url(images/annivesary.jpg);
}
/* .blog-left img{
    width: 100%;
} */
.blog-left h2{
    color: #222;
    font-weight: 600;
    margin: 30px 0;
}
.blog-left p{
    color: #999;
    padding: 0;
}
.blog-right{
    flex-basis: 32%;
}
.blog-right h3{
    background: #223d68;
    color: #4287f5;
    padding: 10px 5px;
    font-size: 20px;
    /* margin-bottom: 20px; */
    margin-left: 30px;
    text-align: center;
    border-radius: 10px;
}
.blog-right div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #555;
    padding: 8px;
    box-sizing: border-box;
}
.comment-box{
    border: 1px solid #ccc;
    margin: 50px 0;
    padding: 10px 20px;
}
.comment-box h3{
    text-align: left;
}
.comment-form input, .comment-form textarea{
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: #f0f0f0;
}
.comment-form button{
    margin: 10px 0;
}


/* ----------------------TWO SIDE SECTION--------------------- */


.two-col-container {
    display: flex;
}
.posts {
    width: 70%;
    padding: 20px;
    position: relative;
  }
.post {
    position: relative;
    margin-bottom: 20px;
  }
  .post img {
    width: 100%;
    height: auto;
    display: block;
  }
  .post-content {
    padding: 10px;
    border: 1px solid #ccc;
    border-top: none;
  }
.sidebar {
    width: 30%;
    padding: 20px;
    background-color: #f4f4f4;
}

.sidebar-content {
  margin-bottom: 20px;
}
.sidebar-content ul li a{
  text-decoration: none;
  color: #0056b3;
  font-size: 16px;
}

h3 {
  margin-top: 0;
}
.author-profile img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.author-info p {
  margin: 5px 0;
  color: #000000;
}

.search input[type="text"] {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
}

.latest-posts ul,
.categories ul,
.social-links ul {
  list-style: none;
  padding: 0;
}

.latest-posts li,
.categories li,
.social-links li {
  margin-bottom: 5px;
}

.social-links i {
  margin-right: 5px;
}

.tags .tag-list a {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 5px 10px;
  margin-right: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  text-decoration: none;
}

.tags .tag-list a:hover {
  background-color: #0056b3;
}

.contact input[type="text"],
.contact input[type="email"],
.contact textarea {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
}

.contact textarea {
  height: 100px;
  resize: vertical;
}

.contact button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.contact button:hover {
  background-color: #0056b3;
}

.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 50%;
  z-index: 1;
  transition: background-color 0.3s ease;
}
.owl-carousel .owl-nav button.owl-prev {
  left: 10px;
}
.owl-carousel .owl-nav button.owl-next {
  right: 10px;
}
.owl-carousel .owl-nav button i {
  font-size: 20px;
}
.like-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
  color: #007bff;
  transition: color 0.3s ease;
}
.like-icon:hover {
  color: #0056b3;
}



/* ---------------------------------------------FORM ACTION @ BLOG------------------------------------------ */

.form-submit{
    display: inline-block;
    text-decoration: none;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
    border: 1px solid #4287f5;
    color: #4287f5;
}

.form-submit:hover{
    border: 1px solid #4287f5;
    background: #4287f5;
    transition: 0.5s;
    color: #fff;
}










/* ---------------------------------------------------ABOUT PAGE CSS--------------------------------------------------------- */
 /* --------------ABOUT SECTION-------------- */
 .background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: url(images/collegedesk.webp);              change here */
    background-size: cover;
    z-index: -1;
  }
  
  .about-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin: 0 auto;
    margin-top: 50px; /* Adjust as needed for spacing */
  }
  
  .about-left,
  .about-right {
    width: 45%;
  }
  
  .about-left img,
  .about-right img {
    width: 100%;
    border-radius: 10px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
  }
  
  .about-left img:hover,
  .about-right img:hover {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
  }
  
  .about-left .text-container,
  .about-right .text-container {
    background-color: #f0f0f0; /* Background color for text container */
    padding: 20px;
    border-radius: 10px;
    transition: box-shadow 0.3s ease;
  }
  
  .about-left:hover .text-container,
  .about-right:hover .text-container {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  }
  
  .about-left h1,
  .about-right h1 {
    font-weight: bold;
  }
  
  .about-left button,
  .about-right button {
    background-color: transparent;
    border: 2px solid #007bff;
    color: #007bff;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .about-left button:hover,
  .about-right button:hover {
    background-color: #007bff;
    color: #fff;
  }
  
  /* Cursor effect */
  button:hover,
  .about-left img:hover,
  .about-right img:hover,
  .about-left .text-container:hover,
  .about-right .text-container:hover {
    cursor: pointer;
  }
  

  
/* ------------------------------ABOUT PAGE CSS--------------------------- */

.about-row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}

.about-us{
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}

.about-col img{
    width: 100%;
}
.about-col h1{
    padding-top: 0;
}
.about-column p{
    padding: 15px 0 25px;
}


/* ----------MEDALS SECTION------------- */
.medal-container {
    background-color: #333;
    padding: 50px;
}

.section1, .section2 {
  width: 60%;
  margin: 0 auto;
  color: #fff;
}

.section1 header {
  text-align: center;
}

.box-container {
  display: flex;
  justify-content: space-between;
}

.box {
  width: 30%;
  background-color: #222;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
  margin: 0 10px;
}

.box img {
  width: 100%;
}

.text {
  margin: 20px 0;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

.button:hover {
  transform: scale(1.1);
}

.image-container {
  display: flex;
  justify-content: flex-start;
  margin-top: 30px;
}

.image-container img {
  width: 80px;
  margin-right: 20px;
  border-radius: 5px;
}

.text-container {
  margin-top: 30px;
}
.about-coll {
    flex-basis: 48%; /* Adjusted width for better spacing */
    background-color: #183966;
    border-radius: 10px;
    margin-bottom: 5%;
    box-sizing: border-box;
    transition: 0.5s;
    position: relative;
    overflow: hidden; /* Hide overflow to contain the image */
}

.about-content {
    padding: 20px; /* Added padding to the content */
}

.about-image img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 10px;
    object-fit: cover;
}

.about-content h1 {
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
}

.about-text {
    text-align: left;
    margin-top: 0; /* Reset margin for the first paragraph */
}

.about-content p {
    margin-top: 10px; /* Adjusted margin for paragraphs */
}


/* -------------------Media query--------------- */
@media(max-width:700px){
    .row{
        flex-direction: column;
    }
}






/* ---------------------------------------------- DONATE PAGE STYLES OR CSS------------------------------ */
/* .donate-section{
    display: flex;
    align-items: center;
    align-content: center ;
} */
.donate-container {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* width: 80%; */
    /* max-width: 1200px; */
    display: flex;
}
.donate-left-column {
    flex: 1;
    background-color: #007bff;
    color: #ffffff;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.donate-left-column h1 {
    font-size: 32px;
    margin-bottom: 20px;
}
.donate-left-column p {
    font-size: 20px;
    text-align: center;
}
.donate-right-column {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
}
.step {
    display: none;
}
.step.active {
    display: block;
}
.step-heading {
    font-size: 24px;
    margin-bottom: 20px;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    font-size: 18px;
    display: block;
    margin-bottom: 10px;
}
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 18px;
}
.donate-next-btn {
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: #ffffff;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.3s ease;
}
.donate-next-btn:hover {
    background-color: #0056b3;
}
.progress-bar {
    margin-top: 30px;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}
.progress-bar-inner {
    height: 100%;
    background-color: #007bff;
    width: 0%;
    text-align: center;
    line-height: 30px;
    color: #ffffff;
    transition: width 0.3s ease;
}





/* -----------------GALLERY PAGE STYLES--------------------- */
header {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h1 {
    margin: 0;
}

input[type="text"],
select,
button {
    margin-left: 10px;
    padding: 5px;
    border-radius: 5px;
}

button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

main {
    padding: 20px;
}

/* Gallery Styles */
.leaders-section,
.old-students-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.photo {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
    cursor: pointer;
}

.photo:hover img {
    transform: scale(1.1);
}

.photo .details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.photo:hover .details {
    opacity: 1;
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.lightbox-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    z-index: 1;
}

/* Admin Modal */
.admin-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.admin-modal h2,
.admin-modal h3 {
    color: #fff;
}

.admin-modal form,
.admin-modal .admin-login {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    width: 300px;
}

.admin-modal input[type="password"],
.admin-modal input[type="text"],
.admin-modal select,
.admin-modal button {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 5px;
}

.admin-modal button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    cursor: pointer;
}

.admin-modal button:hover {
    background-color: #0056b3;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination button {
    margin: 0 5px;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: #fff;
    cursor: pointer;
}

.pagination button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* BS4 carousel slider */
.bs-slider{
    max-height: calc(100vh - 71px);
    overflow: hidden;
  }