#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;
}

/*** Spinner End ***/

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    z-index: 99;
    background: linear-gradient(to right, #2ecc71, #3498db);
}

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

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

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

.btn-md-square {
    width: 44px;
    height: 44px;
}

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

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

.btn.btn-primary {
    box-shadow: inset 0 0 0 0 var(--bs-primary);
}

.btn.btn-primary:hover {
    box-shadow: inset 300px 0 0 0 var(--bs-light) !important;
    color: var(--bs-primary) !important;
}

.btn.btn-light {
    box-shadow: inset 0 0 0 0 var(--bs-primary);
}

.btn.btn-light:hover {
    box-shadow: inset 300px 0 0 0 var(--bs-primary);
    color: var(--bs-light) !important;
}

.btn-hover {
    transition: 0.5s;
}

.btn-hover:hover {
    color: var(--bs-secondary) !important;
}

/*** Section Title Start ***/
.section-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.section-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-primary) !important;
}

.section-title::after {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-left: -50px;
    border: 1px solid var(--bs-primary) !important;
}


/*** Topbar Start ***/
.fixed-top .container {
    transition: 0.5s;
}

.topbar {
    padding: 2px 10px 2px 20px;
    background: var(--bs-primary) !important;
}

.topbar a,
.topbar a i {
    transition: 0.5s;
}

.topbar a:hover,
.topbar a i:hover {
    color: var(--bs-secondary) !important;
}


@media (max-width: 768px) {
    .topbar {
        display: none;
    }
}

/*** Topbar End ***/


/*** Navbar ***/
.navbar-light {
    font-family: "Inria Sans", system-ui;
    position: relative;
    padding: 35px 15px;
    color: var(--bs-white) !important;
    font-size: 16px;
    font-weight: 400;
    outline: none;
    transition: .5s;
    background-color: #530649;
}

.navbar-nav .nav-link {
    font-family: "Inria Sans", system-ui;
    position: relative;
    padding: 35px 15px;
    color: var(--bs-white) !important;
    font-size: 17px;
    font-weight: 400;
    outline: none;
    transition: .5s;

}

.sticky-top.navbar-light .navbar-nav .nav-link {
    padding: 20px 15px;
    color: var(--bs-dark) !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--bs-white) !important;
}

.navbar-light .navbar-brand h1 {
    color: var(--bs-white);
}

.sticky-top.navbar-light .navbar-brand h1 {
    color: var(--bs-primary);
}

.navbar-light .navbar-brand img {
    max-height: 60px;
    transition: .5s;
}

.sticky-top.navbar-light .navbar-brand img {
    max-height: 45px;
}

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

@media (min-width: 1200px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        border: 0;
        border-radius: 10px;
        transition: .5s;
        opacity: 0;
    }
}

.dropdown .dropdown-menu a:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}

.navbar .nav-item:hover .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    background: linear-gradient(to right, #2ecc71, #3498db);
    /* Choose your preferred gradient */

    transition: .5s;
    opacity: 1;
}

@media (max-width: 991.98px) {
    .sticky-top.navbar-light {
        position: relative;
        background-image: linear-gradient(to right, #a3b4f7, #c6a3f7, #a3d7f7);

    }

    .navbar-light .navbar-brand h1 {
        color: var(--bs-primary);
    }

    .navbar.navbar-expand-lg .navbar-toggler {
        padding: 10px 20px;
        border: 1px solid wheat;
        color: wheat;
    }

    .navbar-light .navbar-collapse {
        margin-top: 15px;
        border-top: 1px solid #DDDDDD;
    }

    .navbar-light .navbar-nav .nav-link,
    .sticky-top.navbar-light .navbar-nav .nav-link {
        padding: 10px 0;
        color: white !important;
    }

    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link.active {
        color: var(--bs-primary) !important;
    }

    .navbar-light .navbar-brand img {
        max-height: 45px;
    }
}

@media (min-width: 992px) {
    .navbar-light {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        z-index: 999;
    }

    .sticky-top.navbar-light {
        position: fixed;
        background: var(--bs-light);
    }

    .navbar-light .navbar-nav .nav-link::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 0;
        bottom: -1px;
        left: 0;
        background: var(--bs-primary);
        transition: .5s;
        z-index: -1;
    }

    .navbar-light .navbar-nav .nav-link:hover::before,
    .navbar-light .navbar-nav .nav-link.active::before {
        height: calc(100% + 1px);
        left: 1px;
    }

    .navbar-light .navbar-nav .nav-link.nav-contact::before {
        display: none;
    }
}

/*** Carousel Hero Header Start ***/
.carousel-header .carousel-control-prev,
.carousel-header .carousel-control-next {
    background: transparent;
}

.carousel-header .carousel-control-prev .carousel-control-prev-icon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding: 25px 30px;
    border-top-left-radius: 0;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 50px;
    background-size: 60% 60%;
}

.carousel-header .carousel-control-next .carousel-control-next-icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding: 25px 30px;
    border-top-left-radius: 50px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 0;
    background-size: 60% 60%;

}

.carousel-header .carousel .carousel-indicators li,
.carousel-header .carousel .carousel-indicators li,
.carousel-header .carousel .carousel-indicators li {
    opacity: 0;
}

.carousel-header .carousel-inner .carousel-item {
    position: relative;
    min-height: 100vh
}

.carousel-header .carousel-inner .carousel-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-header .carousel-inner .carousel-item .carousel-caption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0.5));
    background-size: cover;
}

@media (max-width: 768px) {

    .carousel-header .carousel-inner .carousel-item img,
    .carousel-header .carousel-inner .carousel-item .carousel-caption {
        height: 700px;
        margin-top: -100px;
    }

    .carousel-header {
        height: 700px !important;
    }

    .carousel-header .carousel-control-prev .carousel-control-prev-icon,
    .carousel-header .carousel-control-next .carousel-control-next-icon {
        opacity: 0;
    }

    .search-bar {
        margin-top: -100px;
        transition: 0.5s;
    }
}

/*** Carousel Hero Header End ***/


/*** Single Page Hero Header Start ***/
.bg-breadcrumb {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../img/breadcrumb-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrumb .breadcrumb-item a {
    color: var(--bs-secondary) !important;
}

/*** Single Page Hero Header End ***/


/*** About Start ***/
.about .container .section-about-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.about .container .section-about-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-primary) !important;
}

/*** About End ***/


/*** Services Start ***/
.service .service-content-inner {
    transition: 0.5s;
}

.service .service-content-inner:hover {
    position: relative;
    background: var(--bs-primary) !important;
}

.service .service-content-inner .service-content h5,
.service .service-content-inner .service-content p,
.service .service-content-inner .service-icon i {
    transition: 0.5s;
}

.service .service-content-inner:hover .service-content h5,
.service .service-content-inner:hover .service-content p,
.service .service-content-inner:hover .service-icon i {
    color: var(--bs-white) !important;
}

/*** Service End ***/


/*** Destination Start ***/
.destination .tab-class .tab-content .tab-pane .destination-img {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    z-index: 1;
}

.destination .tab-class .tab-content .tab-pane .destination-img .destination-overlay {
    position: absolute;
    bottom: -100%;
    left: 0;
    z-index: 3;
    transition: 0.5s;
}

.destination .tab-class .tab-content .tab-pane .destination-img .search-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    display: flex;
    justify-content: end;
    padding: 20px 20px 0 0;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: 0.5s;

}

.destination .tab-class .tab-content .tab-pane .destination-img .search-icon a i {
    opacity: 0;
    transition: 0.5s;
}

.destination .tab-class .nav-item {
    padding: 0 0 20px 0;
}

.destination .tab-class .nav-item a.active {
    background: var(--bs-primary) !important;
}

.destination .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
}

.destination .tab-class .tab-content .destination-img:hover .search-icon {
    background: rgba(19, 53, 123, 0.4);
}

.destination .tab-class .tab-content .destination-img:hover .destination-overlay {
    bottom: 0;
}

.destination .tab-class .tab-content .destination-img:hover .search-icon a i {
    opacity: 1;
}

.destination .tab-class .tab-content .destination-img img {
    transition: 0.5s;
}

.destination .tab-class .tab-content .destination-img:hover img {
    transform: scale(1.2);
}

/*** Destination End ***/


/*** Packages Start ***/
.packages .packages-item .packages-img {
    position: relative;
    overflow: hidden;
    transition: 0.5s;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    z-index: 1;
}

.packages-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.packages .packages-item .packages-img .packages-info {
    background: rgba(0, 0, 0, .3);
}

.packages .packages-item .packages-img .packages-info small,
.packages .packages-item .packages-img .packages-info small i {
    color: var(--bs-white);
    transition: 0.5s;

    background-color: linear-gradient(to right, 
    rgba(163, 180, 247, 1), 
    rgba(198, 163, 247, 1), 
    rgba(163, 215, 247, 1));
}

.packages .packages-item .packages-img::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0px solid;
    border-radius: 10px !important;
    visibility: hidden;
    transition: 0.7s;
    z-index: 3;
}

.packages .packages-item .packages-img:hover.packages-img::after {
    width: 100%;
    height: 100%;
    border: 300px solid;
    border-color: rgba(19, 53, 123, 0.6) rgba(19, 53, 123, 0.6) rgba(19, 53, 123, 0.6) rgba(19, 53, 123, 0.6);
    visibility: visible;
}

.packages .packages-item .packages-img small,
.packages .packages-item .packages-img small i {
    transition: 0.5s;
}

.packages .packages-item .packages-img:hover small,
.packages .packages-item .packages-img:hover small i {
    color: var(--bs-white) !important;

}

.packages .packages-item .packages-img img {
    transition: 0.5s;
}

.packages .packages-item .packages-img:hover img {
    transform: scale(1.3);
}

.packages .packages-item .packages-img .packages-price {
    position: absolute;
    width: 100px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    background: var(--bs-primary);
    color: var(--bs-white);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 5;
}

.packages .packages-carousel {
    position: relative;
}

.packages .packages-carousel .owl-nav .owl-prev {
    position: absolute;
    top: -50px;
    left: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.packages .packages-carousel .owl-nav .owl-next {
    position: absolute;
    top: -50px;
    right: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.packages .packages-carousel .owl-nav .owl-prev i,
.packages .packages-carousel .owl-nav .owl-next i {
    color: var(--bs-primary);
    font-size: 17px;
    transition: 0.5s;
}

.packages .packages-carousel .owl-nav .owl-prev:hover,
.packages .packages-carousel .owl-nav .owl-next:hover {
    background: var(--bs-primary);
}

.packages .packages-carousel .owl-nav .owl-prev:hover i,
.packages .packages-carousel .owl-nav .owl-next:hover i {
    color: var(--bs-white);
}

/*** Packages End ***/


/*** Explore Tour Start ***/
.ExploreTour .tab-class .nav-item {
    padding: 0 0 20px 0;
}

.ExploreTour .tab-class .nav-item a.active {
    background: var(--bs-primary) !important;
}

.ExploreTour .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
}


/* National Tour Start */
.ExploreTour #NationalTab-1 .national-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.ExploreTour #NationalTab-1 .national-item img {
    transition: 0.5s;
}

.ExploreTour #NationalTab-1 .national-item:hover img {
    transform: scale(1.2);
}

.ExploreTour #NationalTab-1 .national-item .national-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, .2);
    display: flex;
    align-items: end;
    justify-content: center;
    transition: 0.5s;
}

.ExploreTour #NationalTab-1 .national-item:hover .national-content {
    background: rgba(19, 53, 123, .6);
}

.ExploreTour #NationalTab-1 .national-item .national-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
}

.ExploreTour #NationalTab-1 .national-item:hover .national-plus-icon {
    opacity: 1;
}

.ExploreTour #NationalTab-1 .national-item .tour-offer {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 20px;
    border-top-right-radius: 40px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 80px;
    background: var(--bs-primary);
    color: var(--bs-white);
}

/* International Tour Start */
.ExploreTour #InternationalTab-2 .international-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.ExploreTour #InternationalTab-2 .international-item img {
    transition: 0.5s;
}

.ExploreTour #InternationalTab-2 .international-item:hover img {
    transform: scale(1.2);
}

.ExploreTour #InternationalTab-2 .international-item .tour-offer {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 20px;
    border-top-right-radius: 30px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 80px;
    background: var(--bs-primary);
    color: var(--bs-white);
}

.ExploreTour #InternationalTab-2 .international-item .international-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, .3);
    display: flex;
    align-items: end;
    justify-content: center;
    transition: 0.5s;
}

.ExploreTour #InternationalTab-2 .international-item:hover .international-content {
    background: rgba(19, 53, 123, .6);
}

.ExploreTour #InternationalTab-2 .international-item .international-content .international-info a {
    font-size: 14px;
}

.ExploreTour #InternationalTab-2 .international-item .international-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
}

.ExploreTour #InternationalTab-2 .international-item:hover .international-plus-icon {
    opacity: 1;
}

/* carousel Start */
.ExploreTour #InternationalTab-2 .InternationalTour-carousel .international-item {
    position: relative;
    overflow: hidden;
}

.ExploreTour #InternationalTab-2 .InternationalTour-carousel .owl-dots {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ExploreTour #InternationalTab-2 .InternationalTour-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--bs-light);
    border: 1px solid var(--bs-primary);
    border-radius: 10px;
    transition: 0.5s;
}

.ExploreTour #InternationalTab-2 .InternationalTour-carousel .owl-dot.active {
    width: 40px;
    background: var(--bs-primary);
}



/*** Gallery Start ***/
.gallery .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.gallery .gallery-item img {
    min-height: 300px;
    object-fit: cover;
}

.gallery .gallery-item .gallery-content {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    transition: 0.5s;
}

.gallery .gallery-item .gallery-content .gallery-info {
    position: relative;
    margin-bottom: -100%;
    opacity: 0;
    transition: 0.5s;
}

.gallery .gallery-item .gallery-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
}

.gallery .gallery-item:hover .gallery-content .gallery-info,
.gallery .gallery-item:hover .gallery-plus-icon {
    opacity: 1;
    margin: 0;
}

.gallery .gallery-item img {
    transition: 0.5s;
}

.gallery .gallery-item:hover img {
    transform: scale(1.2);
}

.gallery .gallery-item:hover .gallery-content {
    background: linear-gradient(to right, 
                rgba(163, 180, 247, 1), 
                rgba(198, 163, 247, 1), 
                rgba(163, 215, 247, 1));
}

.gallery .tab-class .nav-item {
    padding: 0 0 20px 0;
}

.gallery .tab-class .nav-item a.active {
    background: var(--bs-primary) !important;
}

.gallery .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
}

/*** Gallery End ***/

/*** Tour Booking Start ***/
.booking {
    background: linear-gradient(rgba(19, 53, 123, .8), rgba(19, 53, 123, .8)), url(../img/tour-booking-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

}


.booking .container .section-booking-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-white);
}

.booking .container .section-booking-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-white) !important;
}

.booking .container form .btn.btn-primary {
    box-shadow: inset 0 0 0 0 var(--bs-primary);
}

.booking .container form .btn.btn-primary:hover {
    box-shadow: inset 800px 0 0 0 var(--bs-light) !important;
    color: var(--bs-primary) !important;
}



/*** Tour Booking end ***/

/*** Travel Guide Start ***/
.guide .guide-item .guide-img {
    position: relative;
}

.guide .guide-item .guide-img .guide-icon {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: -50px;
    display: flex;
    justify-content: center;
    border: 1px solid var(--bs-primary);
    background: var(--bs-light);
    z-index: 9;
}

.guide .guide-item .guide-img .guide-img-efects {
    position: relative;
    overflow: hidden;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.guide .guide-item .guide-img .guide-img-efects::after {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}

.guide .guide-item:hover .guide-img-efects::after {
    height: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background: rgba(19, 53, 123, .5);
}

.guide .guide-item .guide-img-efects img {
    transition: 0.5s;
}

.guide .guide-item:hover .guide-img-efects img {
    transform: scale(1.1);
}

.guide .guide-item .guide-title {
    position: relative;
    background: var(--bs-light);
    transition: 0.5s;
}

.guide .guide-item .guide-title::after {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    transition: 0.5s;
}

.guide .guide-item:hover .guide-title::after {
    height: 100%;
    background: var(--bs-primary) !important;
    color: var(--bs-white);
}

.guide .guide-item .guide-title .guide-title-inner,
.guide .guide-item:hover .guide-title .guide-title-inner h4 {
    transition: 0.5s;
}

.guide .guide-item:hover .guide-title .guide-title-inner {
    position: relative;
    color: var(--bs-white) !important;
    z-index: 2;
}

.guide .guide-item:hover .guide-title .guide-title-inner h4 {
    color: var(--bs-white);
}

/*** Travel Guide End ***/

/*** Blog Start ***/
.blog .blog-item .blog-img {
    position: relative;
    width: 100%; /* Make sure the image container takes full width */
    height: 250px; /* Set a fixed height for image containers */
}

.blog .blog-item .blog-img .blog-info {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    background: rgba(255, 255, 255, .2);
    color: var(--bs-white);
}

.blog .blog-item .blog-img .blog-img-inner {
    position: relative;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    overflow: hidden;
    height: 100%; /* Ensure the inner container fills the parent */
}

.blog .blog-item .blog-img .blog-img-inner .blog-icon {
    position: absolute;
    width: 100%;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.blog .blog-item .blog-img .blog-img-inner .blog-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.5s;
}

.blog .blog-item .blog-img:hover .blog-img-inner .blog-icon a {
    opacity: 1;
}

.blog .blog-item .blog-img:hover .blog-img-inner .blog-icon {
    height: 100%;
    background: rgba(19, 53, 123, .6);
    opacity: 1;
}

.blog .blog-item .blog-img .blog-img-inner {
    overflow: hidden;
}

.blog .blog-item .blog-img .blog-img-inner img {
    transition: 0.5s;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers the container while keeping aspect ratio */
}

.blog .blog-item .blog-img:hover .blog-img-inner img {
    transform: scale(1.2);
}

/* Ensure all blog items (event columns) are the same size */
.blog .blog-item {
    height: 100%; /* Ensure each column has consistent height */
    display: flex;
    flex-direction: column;
}

.blog .blog-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;}

.play-button {
    position: absolute; /* Position the play button */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for centering */
    background-color: rgba(0, 0, 0, 0.7); /* Optional: background for visibility */
    border-radius: 50%; /* Make it round */
    padding: 10px; /* Space around icon */
    z-index: 10; /* Ensure it sits on top of other elements */
}

.play-button a i {
    color: white; 
    
    font-size: 20px;
}

/*** Blog End ***/


/*** Testimonial Start ***/
.testimonial .testimonial-carousel {
    position: relative;
}

.testimonial .testimonial-carousel .testimonial-item .testimonial-img {
    position: relative;
    width: 100px;
    height: 100px;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid var(--bs-primary);
    border-style: dotted;
    border-radius: 50%;
}

.testimonial .testimonial-carousel .owl-dots {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial .testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--bs-light);
    border: 1px solid var(--bs-primary);
    border-radius: 10px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-dot.active {
    width: 40px;
    background: var(--bs-primary);
}

.testimonial .testimonial-carousel .owl-nav .owl-prev {
    position: absolute;
    top: -55px;
    left: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-nav .owl-next {
    position: absolute;
    top: -55px;
    right: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-nav .owl-prev i,
.testimonial .testimonial-carousel .owl-nav .owl-next i {
    color: var(--bs-primary);
    font-size: 17px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial .testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--bs-primary);
}

.testimonial .testimonial-carousel .owl-nav .owl-prev:hover i,
.testimonial .testimonial-carousel .owl-nav .owl-next:hover i {
    color: var(--bs-white);
}

.testimonial .testimonial-carousel .owl-item.center .testimonial-item .testimonial-comment {
    background: var(--bs-primary) !important;
    color: var(--bs-white);
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-item.center .testimonial-item .testimonial-img {
    border: 3px solid var(--bs-white);
    border-style: dotted;
    transition: 0.5s;
}

/*** Testimonial End ***/

/*** Contact Start ***/
.contact .container form .btn.btn-primary {
    box-shadow: inset 0 0 0 0 var(--bs-primary);
}

.contact .container form .btn.btn-primary:hover {
    box-shadow: inset 1000px 0 0 0 var(--bs-light) !important;
    color: var(--bs-primary) !important;
}

/*** Contact End ***/

/*** Subscribe Start ***/
.subscribe {
    background: linear-gradient(rgba(19, 53, 123, .6), rgba(19, 53, 123, .6)), url(../img/subscribe-img.jpg);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.subscribe .subscribe-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-white);
}

.subscribe .subscribe-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-white) !important;
}

.subscribe .subscribe-title::after {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-left: -50px;
    border: 1px solid var(--bs-white) !important;
}

/*** Subscribe End ***/

/*** Footer Start ***/
.footer {
    /* background-image: linear-gradient(to right, #a3b4f7, #c6a3f7, #a3d7f7); */

    background-image: linear-gradient(to bottom right, cornsilk, #fff8dc);

}

.footer .footer-item a {
    line-height: 30px;
    color:#117b15;
    transition: 0.5s;
}

.footer .footer-item a:hover {
    letter-spacing: 2px;
    color: #145f11;
}

/*** Footer End ***/

/*** copyright Start ***/
.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bs-dark) !important;
}


.foot{
    color: #e30f32 !important;
}

/*** copyright end ***/

/* 


.topBannerSection {
    width: 100%;
        background-image: linear-gradient(to right, #a3b4f7, #c6a3f7, #a3d7f7);

    padding: 20px 0;
    font-family: "Inria Sans", system-ui;
}

.topBannerInside {
    padding: 10px 20px;
}


.headerSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.logotitle {
    width: 15vw; 
    height: auto;
    margin-left: 0; 
    font-family: "Inria Sans", system-ui;
}

.titleSection {
    text-align: center;
    line-height: 1.4;
    margin: 0 auto;
}


.collegeName, .collegePlace {
    color: #f5deb3; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); 
    font-family: "Inria Sans", system-ui;
    font-weight: 700;
}


@media (min-width: 1200px) {
    .collegeName {
        font-size: 27px;
    }

    .collegePlace {
        font-size: 24px;
    }
    
    .logotitle {
        width: 12vw;
        margin-left: 80px;
    }
}


@media (min-width: 768px) and (max-width: 1199px) {
    .collegeName {
        font-size: 23px;
    }

    .collegePlace {
        font-size: 20px;
    }
    
    .logotitle {
        width: 18vw; 
    }
}


@media (max-width: 767px) {
    .headerSection {
        flex-direction: column; 
        text-align: center;
    }
    
    .collegeName {
        font-size: 15.1px;
    }

    .collegePlace {
        font-size: 15px;
    }
    .logotitle {
        width: 28vw;
       
        margin-bottom: 20px;
        margin-left: 4px !important;
    }  
  
}

@media (max-width: 400px) {
    .collegeName {
        font-size: 12.9px;
    
    }

    .collegePlace {
        font-size: 13px;
    }
    
    .logotitle {
        width: 40vw;
       
    }
} */


/* General Styles */
.topBannerSection {
    width: 100%;
    /* background-image: linear-gradient(to right, #a3b4f7, #c6a3f7, #a3d7f7); */
    background-image: linear-gradient(to bottom right, cornsilk, #fff8dc);

    padding: 20px 0;
    font-family: "Inria Sans", system-ui, sans-serif;
}

.topBannerInside {
    padding: 10px 20px;
}

/* Flexbox for responsive alignment */
.headerSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.logotitle {
    width: 15vw;
    /* Responsive to viewport */
    height: auto;
    font-family: "Inria Sans", system-ui, sans-serif;
}

.titleSection {
    text-align: center;
    line-height: 1.4;
    margin: 0 auto;
}

/* Typography */
.collegeName,
.collegePlace {
    color: rgb(225 13 138);
    /* Wheat color */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    /* Text shadow for readability */
    font-family: "Inria Sans", system-ui, sans-serif;
    font-weight: 700;
}

.collegeNameTamil {
    color: rgb(225 13 138);
    /* Wheat color */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    /* Text shadow for readability */
    font-family: "Inria Sans", system-ui, sans-serif;
    font-weight: 700;
}
.schoolCodelayout {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.school-code, .aishe-code {
    font-size: 20px;
    color: #28a745;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
}

.school-code:hover, .aishe-code:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .school-code, .aishe-code {
        font-size: 16px; /* Smaller font size for mobile */
    }
}
@media (max-width: 565px) {
    .school-code, .aishe-code {
        font-size: 16px; /* Smaller font size for mobile */
    }
}
@media (max-width: 480px) {
    .school-code, .aishe-code {
        font-size: 14px; /* Smaller font size for mobile */
    }
}
@media (max-width: 365px) {
    .school-code, .aishe-code {
        font-size: 12px; /* Smaller font size for mobile */
    }
}



/* Extra Large Screens (Desktops and larger) */
@media (min-width: 1200px) {
    .collegeName {
        font-size: 27px;
    }

    .collegeNameTamil {
        font-size: 25px;
    }

    .collegePlace {
        font-size: 27px;
    }

    .logotitle {
        width: 12vw;
        margin-left: 115px;
    }
}

/* Large Screens (Laptops) */
@media (min-width: 992px) and (max-width: 1199px) {
    .collegeName {
        font-size: 23px;
    }

    .collegeNameTamil {
        font-size: 20px;
    }

    .collegePlace {
        font-size: 22px;
    }

    .logotitle {
        width: 14vw;
        margin-left: 60px;
    }
}

/* Medium Screens (Tablets) */
@media (min-width: 768px) and (max-width: 991px) {
    .collegeName {
        font-size: 17px;
    }

    .collegeNameTamil {
        font-size: 15px;
    }

    .collegePlace {
        font-size: 17px;
    }

    .logotitle {
        width: 18vw;
        /* Logo size adjusts */
    }
}

/* Small Screens (Phones) */
@media (min-width: 576px) and (max-width: 767px) {
    .headerSection {
        flex-direction: column;
        /* Stack elements vertically */
        text-align: center;
    }

    .collegeName {
        font-size: 19px;
    }

    .collegeNameTamil {
        font-size: 17px;
    }

    .collegePlace {
        font-size: 17px;
    }

    .logotitle {
        width: 25vw;
        /* Logo for mobile phones */
        margin-bottom: 20px;
    }
}

/* 450px to 575px (Large Mobile Devices) */
/* @media (min-width: 450px) and (max-width: 575px) {
    .headerSection {
        flex-direction: column;
        text-align: center;
    }
    
    .collegeName {
        font-size: 15.6px;
    }
    .collegeNameTamil {
        font-size: 15.7px;
    }

    .collegePlace {
        font-size: 18px;
    }
    
    .logotitle {
        width: 28vw; 
        margin-bottom: 20px;
    }
} */




/* @media (max-width: 460px) {
    .collegeName {
        font-size: 15px !important;
    }
    .collegeNameTamil {
        font-size: 14px !important;
    }
} */
/* 575px Screens */
@media (max-width: 575px) {
    .collegeName {
        font-size: 19px;
    }

    .collegeNameTamil {
        font-size: 17px;
    }

    .collegePlace {
        font-size: 18px;
    }

    .logotitle {
        width: 30vw;
        margin-left: 186px;
        margin-bottom: 20px;
    }
}

/* @media (max-width: 340px) {
    .collegeName {
        font-size: 11px !important;
    }
    .collegeNameTamil {
        font-size: 10px !important;
    }
} */


/* 540px Screens */
@media (max-width: 540px) {
    .collegeName {
        font-size: 18px;
    }

    .collegeNameTamil {
        font-size: 16px;
    }

    .collegePlace {
        font-size: 18px;
    }

    .logotitle {
        width: 30vw;
        margin-left: 160px;
        margin-bottom: 20px;
    }
}





/* 1024px Screens */
/* @media (max-width: 1024px) {
 
    .collegeNameTamil{
        font-size: 21.3px;
    }
} */



/* 450px Screens */
@media (max-width: 450px) {
    .collegeName {
        font-size: 14px;
    }

    .collegeNameTamil {
        font-size: 13px;
    }

    .collegePlace {
        font-size: 14px;
    }

    .logotitle {
        width: 30vw;
        margin-left: 132px;
        margin-bottom: 20px;
    }
}

/* 412px Screens (Small Phones) 13.4px*/

@media (max-width: 412px) {
    .collegeName {
        font-size: 13px;
    }

    .collegeNameTamil {
        font-size: 12px;
    }

    .collegePlace {
        font-size: 12px;
    }

    .logotitle {
        width: 35vw;
        margin-left: 115px;
    }
}

/* 390px Screens (Small Phones) 13.4px*/

@media (max-width: 390px) {
    .collegeName {
        font-size: 12px;
    }

    .collegeNameTamil {
        font-size: 11px;
    }

    .collegePlace {
        font-size: 12px;
    }

    .logotitle {
        width: 35vw;
        margin-left: 100px;
    }
}

/* 375px Screens (Small Phones) 13.4px*/
@media (max-width: 370px) {
    .collegeName {
        font-size: 12px;
    }

    .collegeNameTamil {
        font-size: 11.6px;
    }

    .collegePlace {
        font-size: 12px;
    }

    .logotitle {
        width: 35vw;
        margin-left: 100px;
    }
}

/* 412px Screens (Small Phones) 13.4px*/

@media (max-width: 360px) {
    .collegeName {
        font-size: 12px;
    }

    .collegeNameTamil {
        font-size: 11px;
    }

    .collegePlace {
        font-size: 12px;
    }

    .logotitle {
        width: 35vw;
        margin-left: 100px;
    }
}

/* Extra Small Screens (below 350px) */
@media (max-width: 350px) {
    .collegeName {
        font-size: 12px;
    }

    .collegeNameTamil {
        font-size: 27px;
    }

    .collegePlace {
        font-size: 11px;
    }

    .logotitle {
        width: 38vw;
    }
}

/* Extra Small Screens (below 344px) */
@media (max-width: 345px) {
    .collegeName {
        font-size: 11px;
    }

    .collegeNameTamil {
        font-size: 10px;
    }

    .collegePlace {
        font-size: 11px;
    }

    .logotitle {
        width: 38vw;
        margin-left: 88px;
    }
}





@media (max-width: 300px) {
    .collegeName {
        font-size: 10px;
    }

    .collegeNameTamil {
        font-size: 9px;
    }
}

/* Breadcrumbs Section */

/* Style for the breadcrumbs section */
.breadcrumbsSection {
    margin-top: 100px;
    padding-top: 50px;
}

/* Style for the heading */
.breadcrumbsHeading {
    color: #0d62a4;
    font-size: 2.5rem;
    font-weight: bold;
}

.custom-breadcrumb .breadcrumb-item a {
    color: #080202;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.custom-breadcrumb .breadcrumb-item a:hover {
    color: #ffcc00;
}

.custom-breadcrumb .breadcrumb-item.active,
.custom-breadcrumb .breadcrumb-item.active a {
    color: #608bf1;
    font-weight: bold;
}

/* Hover effect for both active and normal items */
.custom-breadcrumb .breadcrumb-item:hover {
    color: #ffcc00;
    /* Hover effect for all items */
}

/* Marquee Style */

/* Style for the marquee */
.marquee-style {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    letter-spacing: 2px;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.marquee-style a:hover {
    color: #ffcc00 !important;
    /* Change text color on hover */
}

/* Optional: Custom speed or other marquee behaviors */
.marquee-style {
    scrollamount: 8;
    /* Adjust speed */
}


/* Counter Section */
#counterSection {
    /* background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(173, 216, 230, 0.3)) !important;

    backdrop-filter: blur(10px) !important;

    border-radius: 15px !important; */
background-color: white !important;
    padding: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;

    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important; */

}

/* General counter box styles */
.counter-box {
    min-height: 200px !important;
    border-radius: 12px !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease !important;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px !important;
}

/* Different hover background colors for each counter with glass color */
.experience {
    background: rgba(173, 216, 230, 0.6) !important;
    /* Light blue glass */
}

.students {
    background: rgba(245, 245, 220, 0.6) !important;
    /* Light beige glass */
}

.teachers {
    background: rgba(255, 182, 193, 0.6) !important;
    /* Light pink glass */
}

.passed-out {
    background: rgba(221, 160, 221, 0.6) !important;
    /* Light purple glass */
}

.awards {
    background: rgba(255, 223, 186, 0.6) !important;
    /* Light peach glass */
}

/* Hover effects for different background colors */
.experience:hover {
    background: rgba(173, 216, 230, 0.8) !important;
    /* Darker blue on hover */
}

.students:hover {
    background: rgba(245, 245, 220, 0.8) !important;
    /* Darker beige on hover */
}

.teachers:hover {
    background: rgba(255, 182, 193, 0.8) !important;
    /* Darker pink on hover */
}

.passed-out:hover {
    background: rgba(221, 160, 221, 0.8) !important;
    /* Darker purple on hover */
}

.awards:hover {
    background: rgba(255, 223, 186, 0.8) !important;
    /* Darker peach on hover */
}

/* Icon hover color transitions */
.counter-box i {
    transition: color 0.3s ease !important;
}

.experience:hover i {
    color: rgb(7 138 181 / 60%) !important;
}

.students:hover i {
    color: #8b4513 !important;
}

.teachers:hover i {
    color: #ff69b4 !important;
}

.passed-out:hover i {
    color: #9370db !important;
}

.awards:hover i {
    color: #ff8c00 !important;
}

/* Hover effect for box shadow */
.counter-box:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3) !important;
    /* Enhanced shadow on hover */
}

/* Responsive styles */
@media (min-width: 768px) {
    .counter-box {
        flex: 1 1 45% !important;
        /* Two boxes per row on tablet view */
    }
}

@media (min-width: 992px) {
    .counter-box {
        flex: 1 1 19% !important;
        /* Five boxes per row on desktop/laptop view */
    }
}

/* School time */

.school-time {
    color: #e71593;
    /* Set your desired color for the text */
    font-weight: bold;
    /* Optional: to make it stand out */
    transition: color 0.3s ease;
    /* Smooth transition for hover effect */
}

.school-time i {
    color: #e71593;
    transition: color 0.3s ease;
}

.school-time:hover {
    color: #e573c3;
    /* Color change on hover */
}

.school-time:hover i {
    color: #ffcc00;
    /* Icon color change on hover */
}

/* CopyRight Section */
.copyRightsSection {
    background-color: #2c3e50 !important;
    padding: 20px 0 !important;
    border-top: 2px solid #f39c12 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.copyright-item {
    /* white-space: nowrap !important; */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #ffffff !important;
    text-align: center !important;
}

.copyRightsSection a {
    color: #f39c12 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important, transform 0.3s ease !important, letter-spacing 0.3s ease !important;
}

.copyRightsSection a:hover {
    color: #e67e22 !important;
    text-decoration: underline !important;
    transform: scale(1.05) !important;
    letter-spacing: 1px !important;
}

.company-name {
    text-transform: uppercase !important;
    font-weight: bold !important;
}

.copyRightsSection i {
    color: #f39c12 !important;
    font-size: 1.2em !important;
}

@media (max-width: 768px) {
    .copyRightsSection {
        text-align: center !important;
    }
}

/* Contact Page Section Style */

/* .contact-info-section {
    background-color: #fff !important;
} */

.contactPage {
    background-color: #fff !important;
}

.contactPageAddress,
.contactPageMobile,
.contactPageEmail {
    margin-bottom: 1.5rem !important;
}

.contactPageIcon {
    font-size: 3rem;
    /* Set size of the icon */
    background: linear-gradient(to right, #12ddd9, #14a49a);
    /* Gradient background */
    -webkit-background-clip: text;
    /* For Safari */
    -webkit-text-fill-color: transparent;
    /* Fill color */
    transition: transform 0.3s ease !important;
}

.contactPageIcon:hover {
    background: linear-gradient(to right, #e67e22, #d35400);
    /* Hover gradient */
    -webkit-background-clip: text;
    /* For Safari */
    -webkit-text-fill-color: transparent;
    /* Fill color on hover */
    transform: rotate(15deg) !important;
}

.contactPageHeader {
    color: #ff0073 !important;
}

.contactPageText {
    margin-bottom: 0 !important;
}

.contactPageText {
    margin-bottom: 0 !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    text-align: center;
}

.vision-mission-container {
    background-color: #f9f9f9;
    padding: 50px 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.vision-title,
.mission-title {
    font-size: 2.5rem;
    color: #333;
    font-weight: bold;
}

.vision-text,
.mission-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #0f0e0e;
    text-align: justify;
}


/* 

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 0fr);
    gap: 3px;
    margin-bottom: 20px;
}

.day {
    border: 1px solid #ccc;
    padding: 10px;
    background-color: white;
    text-align: center;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    width: 100%;
    height: 100%;
}

.day:hover {
    background-color: #e0f7fa;
}

.day.sunday {
    color: white;
    background-color: red;
}

.day.today {
    border: 2px solid #42a5f5;
    background-color: #f3faff;
}

#calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin: 20px;
}

#calendar div {
    padding: 20px;
    text-align: center;
    font-size: 18px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

#calendar div:nth-child(1) { background-color: #f8d7da; }
#calendar div:nth-child(2) { background-color: #d1ecf1; }
#calendar div:nth-child(3) { background-color: #d4edda; }
#calendar div:nth-child(4) { background-color: #fff3cd; }
#calendar div:nth-child(5) { background-color: #d1ecf1; }
#calendar div:nth-child(6) { background-color: #f8d7da; }
#calendar div:nth-child(7) { background-color: #d4edda; }

#calendar div:hover {
    background-color: #e0e0e0;
    cursor: pointer;
}

@media (max-width: 600px) {
    .day {
        font-size: 12px;
        padding: 5px;
    }
    
    #calendar {
        grid-template-columns: repeat(7, 1fr);
    }
} */
.calendarTitle {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
}




/* .date-container {
    display: flex; 
    align-items: center; 
    margin-left: 20px; 
} */

#calendar {
    display: grid;
    grid-template-columns: repeat(7, 0fr);
    gap: 5px;
    padding: 20px;

}

.day {
    /* border: 1px solid #ccc; */
    padding: 10px;
    background-color: white;
    text-align: center;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    width: 100%;
    height: 100%;
}

.day:hover {
    background-color: #e0f7fa;
}

.day.sunday {
    color: white;
    background-color: red;
}

.day.today {
    border: 2px solid #42a5f5;
    background-color: #f3faff;
}

#calendar div:nth-child(1) {
    background-color: #f8d7da;
    width: 40px;
    height: 40px;
    padding: 5px;
}

#calendar div:nth-child(2) {
    background-color: #d1ecf1;
    width: 40px;
    height: 40px;
    padding: 5px;
}

#calendar div:nth-child(3) {
    background-color: #d4edda;
    width: 40px;
    height: 40px;
    padding: 5px;
}

#calendar div:nth-child(4) {
    background-color: #fff3cd;
    width: 40px;
    height: 40px;
    padding: 5px;
}

#calendar div:nth-child(5) {
    background-color: #d1ecf1;
    width: 40px;
    height: 40px;
    padding: 5px;
}

#calendar div:nth-child(6) {
    background-color: #f8d7da;
    width: 40px;
    height: 40px;
    padding: 5px;
}

#calendar div:nth-child(7) {
    background-color: #d4edda;
    width: 40px;
    height: 40px;
    padding: 5px;
}

#calendar div:hover {
    background-color: #e0e0e0;
    cursor: pointer;
}

@media (max-width: 1200px) {
    .day {
        font-size: 14px;
        padding: 10px;
        width: 75px;
        height: 75px;
    }
}

@media (max-width: 900px) {
    #calendar {
        grid-template-columns: repeat(7, 0fr);
        margin-left: 90px;
    }

    .day {
        font-size: 12px;
        padding: 8px;
        width: 65px;
        height: 65px;
    }
}

@media (max-width: 600px) {
    #calendar {
        grid-template-columns: repeat(7, 0fr);
    }

    .day {
        font-size: 12px;
        padding: 8px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 400px) {
    #calendar {
        grid-template-columns: repeat(7, 0fr);
    }

    .day {
        font-size: 10px;
        padding: 2px;
        width: 40px;
        height: 40px;
    }
}



.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;
}

.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    max-width: 600px;
    position: relative;
}

.close {
    position: absolute;
    top: 7px;
    right: 30px;
    cursor: pointer;
    font-size: 60px;
    font-weight: 900;
    color: #1da1ee;
}

.colorful-list {
    list-style: none;
    padding: 0;
}

.list-item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 16px;
}

.list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
}

.list-item:nth-child(1)::before {
    background-color: #FF5733;
}

.list-item:nth-child(2)::before {
    background-color: #33FF57;
}

.list-item:nth-child(3)::before {
    background-color: #3357FF;
}

.list-item:nth-child(4)::before {
    background-color: #F1C40F;
}

.list-item:nth-child(5)::before {
    background-color: #9B59B6;
}


.read-more-link {
    display: inline-block;
    margin-top: 10px;
    color: blue;
    text-decoration: underline;
}

@media (max-width: 540px) {
    .calendar {
        margin-left: 75px;
    }
}

@media (min-width: 345px) and (max-width: 539px) {
    .calendar {
        margin-left: -25px;
    }
}

@media (min-width: 541px) and (max-width: 600px) {
    .calendar {
        margin-left: 0;
    }
}

@media (min-width: 600px) and (max-width: 991px) {
    .calendar {
        margin-left: 270px;
    }
}

@media (min-width: 244px) and (max-width:344px) {
    .calendar {
        margin-left: 0 !important;
    }
}

@media (min-width: 375px) {
    .calendar {
        margin-left: 0 !important;
    }
}

@media (min-width: 412px) {
    .calendar {
        margin-left: 10px !important;
    }
}

@media (min-width: 430px) {
    .calendar {
        margin-left: 16px;
    }
}

@media (min-width: 768px) {
    #calendar div:nth-child(1) {
        width: 65px;
        height: 65px;
        padding: 20px;
    }

    #calendar div:nth-child(2) {
        width: 65px;
        height: 65px;
        padding: 20px;
    }

    #calendar div:nth-child(3) {
        width: 65px;
        height: 65px;
        padding: 20px;
    }

    #calendar div:nth-child(4) {
        width: 65px;
        height: 65px;
        padding: 20px;
    }

    #calendar div:nth-child(5) {
        width: 65px;
        height: 65px;
        padding: 20px;
    }

    #calendar div:nth-child(6) {
        width: 65px;
        height: 65px;
        padding: 20px;
    }

    #calendar div:nth-child(7) {
        width: 65px;
        height: 65px;
        padding: 20px;
    }
}

/* 
@media (min-width: 768px) {
    .calendar {
        margin-left: 190px !important;  width: 65px;
    height: 65px;
    padding: 20px;
    }
}

@media (min-width: 912px) {
    .calendar {
        margin-left: 250px !important; 
    }
} */

@media (min-width: 991px) {
    .calendar {
        margin-left: 200px !important;
    }
}

@media (min-width: 1024px) {
    .calendar {
        margin-left: 190px !important;
    }
}

@media (min-width: 1100px) and (max-width:1200px) {
    .calendar {
        margin-left: 250px !important;
    }
}

@media (min-width: 1201px) and (max-width:1299px) {
    .calendar {
        margin-left: 408px !important;
    }
}






.calendarTitle {
    text-align: center;
    font-weight: bold;
    /* Make the title bold */
    font-size: 2.5em;
    /* Increase font size */
    color: #ff0073;
    /* Color for the title */
    background-color: #e1f5fe;
    /* Light blue background for the title */
    padding: 15px;
    /* Add padding around the title */
    border-radius: 10px;
    /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* Add a subtle shadow */
    margin-bottom: 20px;
    /* Space below the title */
}

#current-date-time,
#current-month-year {
    text-align: center;
    font-weight: bold;
    /* Make the text bold */
    font-size: 1.5em;
    /* Increase font size */
    color: #d32f2f;
    /* Color for the date and month/year */
    background-color: #fff3e0;
    /* Light orange background */
    padding: 10px;
    /* Add padding */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Add a subtle shadow */
    margin: 10px auto;
    /* Center and space between elements */
    max-width: 300px;
    /* Limit width */
}












/* 
@media (min-width: 344px) {
    .calendar {
        margin-left: -17px ;
    }
}
@media (min-width: 360px) {
    .calendar {
        margin-left: -17px ;
    }
}

@media (min-width: 375px) {
    .calendar {
        margin-left: 0 ;
    }
}

@media (min-width: 412px) {
    .calendar {
        margin-left: 10px;
    }
}
@media (min-width: 430px) {
    .calendar {
        margin-left: 16px ;
    }
}
@media (min-width: 768px) {
    .calendar {
        margin-left: 190px !important;
    }
}
@media (min-width: 912px) {
    .calendar {
        margin-left: 250px !important;
    }
}
@media (min-width: 991px) {
    .calendar {
        margin-left: 300px !important;
    }
}
@media (min-width: 1024px) {
    .calendar {
        margin-left: 300px !important;
    }
}

@media (max-width: 540px) {
    .calendar {
        margin-left: 75px ; 
    }
}

@media (min-width: 344px) and (max-width: 539px) {
    .calendar {
        margin-left: -25px ; 
    }
}

@media (min-width: 541px) {
    .calendar {
        margin-left: 0; 
    }
}

@media (min-width: 600px) and (max-width: 991px) {
    .calendar {
        margin-left: 270px; 
    }
}

@media (min-width: 991px) {
    .calendar {
        margin-left: 300px;
    }
}


 */





/* .calendarLayout {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 20px;
}

.calendarTable {
    flex: 0 0 40%;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.calendar-month {
    text-align: center;
    font-size: 1.2rem;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    background-color: #f1f1f1;
    padding: 10px 0;
    font-size: 16px;
}

.day-header {
    flex: 1;
    text-align: center;
    font-weight: bold;
    color: #238365;
    padding: 5px;
    border-radius: 5px;
    margin: 2px;
}

.calendar-body {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ccc;
    padding: 10px;
}

.calendarSchedule {
    flex: 0 0 14.28%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: background-color 0.3s;
}

.calendarSchedule:hover {
    background-color: #e0f7fa;
}


.scheduleTitle {
    margin-bottom: 20px;
}

#exam-timetable {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: none;
}



#exam-timetable table {
    width: 100%;
    border-collapse: collapse;
}

#exam-timetable th {
    background-color: #4CAF50;
    color: white;
    padding: 12px;
    text-align: left;
}

#exam-timetable td {
    border: 1px solid #ddd;
    padding: 10px;
}

#exam-timetable tr:nth-child(even) {
    background-color: #f2f2f2;
}

#exam-timetable tr:hover {
    background-color: #ddd;
}

*/

/* @media screen and (max-width: 768px) {
    #exam-timetable table {
        display: block;
        overflow-x: auto;
    }

    #exam-timetable th,
    #exam-timetable td {
        white-space: nowrap;
    }
}

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

    .calendarTable {
        width: 100%;
    }
}

#current-date-time {
    font-size: 18px;
    margin-bottom: 20px;
}

.calendarLayout {
    display: flex;
    justify-content: space-between;
} */

/* .calendarTable {
    width: 60%;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} */


/* .schedule-box {
    width: 100%;

    background-color: white;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.scheduleTitle {
    font-weight: bold;
    margin-bottom: 10px;
} */



.video-thumbnail {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
    /* Change cursor on hover */
    border-radius: 8px;
    /* Rounded corners */
    transition: background-color 0.3s;
    /* Smooth transitions */
    background-color: transparent;
    /* Initial background color */
}

.video-thumbnail:hover {
    background-color: rgba(0, 0, 139, 0.8) !important;
    /* Dark blue background on hover */
}

.video-thumbnail img {
    width: 100%;
    height: auto;
    transition: transform 0.3s !important;
    /* Smooth zoom effect */
}

.video-thumbnail:hover img {
    transform: scale(1.05) !important;
    /* Zoom effect on hover */
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    color: white;
    background-color: #ff0000;
    /* YouTube red */
    border-radius: 5px;
    /* Adjusted for square corners */
    width: 60px;
    /* Fixed width for square */
    height: 60px;
    /* Fixed height for square */
    display: flex;
    /* Use flexbox for centering */
    align-items: center;
    /* Center vertically */
    justify-content: center;
    /* Center horizontally */
    cursor: pointer;
    transition: background-color 0.3s;
}


.play-button:hover {
    background-color: #cc0000;
    /* Darker red on hover */
}

.eventTitileHeader {
    width: 250px;
    color: rgb(235, 224, 224);
    text-shadow: 1px 1px 2px black;
    text-align: center;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    /* opacity: 0;  */
    transition: opacity 0.3s;
}

.gallery-content {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    text-shadow: 1px 1px 2px black;
    /* Shadow for better visibility */
    display: flex;
    align-items: center;
    /* Center the text vertically */
    padding: 5px;
    /* Padding for spacing */
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent background */
    border-radius: 5px;
    /* Rounded corners */
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.3s;
    /* Smooth visibility transition */
}

.video-thumbnail:hover .gallery-content {
    opacity: 1;
    /* Show content on hover */
}

/* Modal*/

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

.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
}

.closeModal {
    position: absolute;
    top: 7px;
    right: 40px;
    color: #14d952;
    font-size: 50px;
    cursor: pointer;
    font-weight: 900;
}

@media (max-width: 768px) {
    .modal-content {
        max-width: 90%;
    }
}

.library-rules {
    list-style-type: none;
    /* Remove default bullet points */
    padding: 0;
    /* Remove padding */
}

.library-rules li {
    margin-bottom: 10px;
    /* Spacing between list items */
    padding-left: 40px;
    /* Space for icon */
    position: relative;
    /* For positioning the icon */
    text-indent: 0;
    /* Remove text indent */
}

.library-rules li i {
    position: absolute;
    /* Position icon absolutely */
    left: 0;
    /* Align icon to the left */
    top: 50%;
    /* Center icon vertically */
    transform: translateY(-50%);
    /* Adjust for vertical alignment */
}


.section-about-title {
    font-size: 1.5rem;
    color: linear-gradient(to right, 
    rgba(163, 180, 247, 1), 
    rgba(198, 163, 247, 1), 
    rgba(163, 215, 247, 1));
    /* Primary color */
    margin-bottom: 15px;
}

.list-unstyled li {
    margin-bottom: 10px;
    /* Spacing between list items */
    padding-left: 40px;
    /* Space for icon */
    position: relative;
    /* For positioning the icon */
    text-indent: 0;
    /* Remove text indent */
}

.list-unstyled li i {
    position: absolute;
    /* Position icon absolutely */
    left: 0;
    /* Align icon to the left */
    top: 50%;
    /* Center icon vertically */
    transform: translateY(-50%);
    /* Adjust for vertical alignment */
}

.busroute {
    margin-top: 20px;
    border-collapse: collapse;
}

.busroute th,
.busroute td {
    padding: 10px;
    border: 1px solid linear-gradient(to right, 
    rgba(163, 180, 247, 1), 
    rgba(198, 163, 247, 1), 
    rgba(163, 215, 247, 1));
    /* Border color */
    transition: color 0.3s;
    /* Smooth transition for text color */
    font-weight: bold;
    /* Make text bold */
}

/* Header styles */
.busroute th {
    background-color: #f8f9fa;
    /* Light background for headers */
    color: #000000;
    /* Header text color */
}

/* Colorful Text for Each Row */
.busroute tbody tr:nth-child(1) td {
    color: #FF6347;
    /* Tomato */
}

.busroute tbody tr:nth-child(2) td {
    color: #4682B4;
    /* SteelBlue */
}

.busroute tbody tr:nth-child(3) td {
    color: #32CD32;
    /* LimeGreen */
}

.busroute tbody tr:nth-child(4) td {
    color: #FFD700;
    /* Gold */
}

.busroute tbody tr:nth-child(5) td {
    color: #FF4500;
    /* OrangeRed */
}

/* Colorful Hover Effect */
.busroute tbody tr:hover {
    background-color: #FFD700;
    /* Gold */
}

.busroute tbody tr:hover td {
    color: #FFFFFF;
    /* Change text color to white on hover */
}

.busroute tbody tr:hover:nth-child(odd) {
    background-color: #FF4500;
    /* OrangeRed for odd rows */
}

.busroute tbody tr:hover:nth-child(even) {
    background-color: #32CD32;
    /* LimeGreen for even rows */
}



/* alumni icon */
.award-list {
    list-style-type: none;
    /* Remove default list bullets */
    padding: 0;
    /* Remove padding */
}

.award-list li {
    position: relative;
    /* Create a positioning context for the icon */
    padding-left: 35px;
    /* Add space for the icon */
    margin-bottom: 10px;
    /* Space between items */
    font-family: Arial, sans-serif;
    /* Set font for the list */
}

.award-list li i {
    position: absolute;
    /* Position the icon */
    left: 0;
    /* Align to the left */
    top: 0;
    /* Align to the top */
    color: gold;
    /* Set the color of the icon to gold */
    font-size: 20px;
    /* Size of the icon */
}


/* Message Page */

.messageStyle {
    text-align: justify;
}

.correspondent-signature,
.principal-signature,
.chairman-signature {
    font-size: 16px;
    color: linear-gradient(to right, 
    rgba(163, 180, 247, 1), 
    rgba(198, 163, 247, 1), 
    rgba(163, 215, 247, 1));
    margin-top: 20px;
    text-align: justify;
}

.signature-name {
    font-weight: bold;
    font-size: 1.4em;
}

.signature-title {
    font-weight: normal;
    font-style: italic;
    color: #555;
}

.signature-school {
    font-weight: normal;
    font-size: 16px;
    color: #333;
    margin-top: 5px;
}

@media (max-width: 576px) {
    .signature-name {
        font-size: 1em;
    }

    .signature-title {
        font-size: 16px;
    }

    .signature-school {
        font-size: 15px;
        margin-top: 4px;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .signature-name {
        font-size: 1.2em;
    }

    .signature-title {
        font-size: 1em;
    }

    .signature-school {
        font-size: 11px;
    }
}

.image-container:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.bio-content:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease;
}



/* Alumni */

@keyframes borderAnimation {
    0% {
        border-color: #ff4081;
    }

    25% {
        border-color: #ffab40;
    }

    50% {
        border-color: #4caf50;
    }

    75% {
        border-color: #2196f3;
    }

    100% {
        border-color: #ff4081;
    }
}

@keyframes buttonAnimation {
    0% {
        background-color: #4caf50;
    }

    25% {
        background-color: #ffeb3b;
    }

    50% {
        background-color: #ff5722;
    }

    75% {
        background-color: #2196f3;
    }

    100% {
        background-color: #4caf50;
    }
}

.alumni-form {
    background-color: #e0f7fa;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    border: 4px solid transparent;
    background-image: linear-gradient(white, white),
        linear-gradient(45deg, #ff4081, #ffab40, #4caf50, #2196f3);
    background-clip: padding-box, border-box;
    position: relative;
    animation: borderAnimation 4s linear infinite;
    margin-bottom: 40px;
}

.alumni-form:before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 8px;
    background-image: linear-gradient(45deg, #ff4081, #ffab40, #4caf50, #2196f3);
    z-index: -1;
}

.alumni-label {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    font-size: 1.2em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.alumini-input {
    border: 2px solid #ffab40;
    border-radius: 4px;
    padding: 10px;
    transition: border-color 0.3s, background-color 0.3s;
    font-size: 1em;
    background-color: #fff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.alumini-input:hover {
    border-color: #ff6f61;
    background-color: #ffe0b2;
}

.alumini-input:focus {
    border-color: #d5006d;
    outline: none;
    background-color: #f8bbd0;
    box-shadow: 0 0 5px rgba(213, 0, 109, 0.5);
}

.alumniBtn {
    background-color: #4caf50;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    border: none;
    transition: transform 0.3s;
    font-size: 1.2em;
    animation: buttonAnimation 4s linear infinite;
}

.alumniBtn:hover {
    transform: scale(1.05);
}

h4 {
    color: #ff5722;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

@media (max-width: 576px) {
    .alumni-form {
        padding: 15px;
    }

    .alumini-input {
        padding: 8px;
    }
}

.alumniPtag {
    text-align: justify;
}

.newsHeadingTag {
    color: crimson;
}

.full-bg {
    background-image: url('/img/background.jpg');
    /* Add your full background image */
    background-size: cover;
    /* Cover the entire area */
    background-position: center;
    /* Center the background image */
    height: 100vh;
    /* Full viewport height */
}

.marquee-style {
    font-size: 1.5rem;
    /* Adjust font size as needed */
    white-space: nowrap;
    /* Prevent wrapping */
}

.colorful-text {
    display: inline-block;
    animation: rainbow 5s linear infinite;
    /* Animation for colorful effect */
}

@keyframes rainbow {
    0% {
        color: #FF0000;
    }

    14% {
        color: #FF7F00;
    }

    28% {
        color: #FFFF00;
    }

    42% {
        color: #00FF00;
    }

    57% {
        color: #00FFFF;
    }

    71% {
        color: #0000FF;
    }

    85% {
        color: #4B0082;
    }

    100% {
        color: #FF0000;
    }
}

.hover-text {
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Smooth transition */
    padding: 0.2rem 0.5rem;
    /* Add some padding */
    border-radius: 5px;
    /* Round the corners */
}

.hover-text:hover {
    background-color: rgba(255, 255, 255, 0.7);
    /* Light background on hover */
    color: #000;
    /* Dark text color on hover */
}

.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth transition */
}

.hover-effect:hover {
    transform: scale(1.05);
    /* Slightly enlarge the image */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* Add shadow on hover */
}




.flex-container {
    display: flex;
    /* Makes the container a flex container */
    justify-content: space-between;
    /* Space between items */
    align-items: flex-start;
    /* Aligns items to the top */
}

.image-section {
    flex: 1;
    margin-right: 20px;
    text-align: center;
    font-size: 24px;
    color: #333;
    padding: 20px;
}

.comingNews {
    flex: 1;
    padding: 20px;
    /* background-color: #fff; */
    /* border-radius: 5px; */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
}

.newsletter-header {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}

.comingNews ul {
    list-style: none;
    padding: 0;
}

.comingNews li {
    margin: 10px 0;
    transition: background-color 0.3s;
    border-bottom: 1px dotted #ddd;
    padding-bottom: 10px;
    color: #333;
    padding: 5px 0;
}

.comingNews li:nth-child(1) {
    color: #FF5733;
}

.comingNews li:nth-child(2) {
    color: #33FF57;
}

.comingNews li:nth-child(3) {
    color: #3357FF;
}

.comingNews li:nth-child(4) {
    color: #FF33A8;
}

.comingNews li:nth-child(5) {
    color: #FFDB33;
}

.comingNews li:nth-child(6) {
    color: #33FFF5;
}

.comingNews li:nth-child(7) {
    color: #AA33FF;
}

.comingNews li:nth-child(8) {
    color: #FFA533;
}

.comingNews .attachment {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    font-weight: bold;
}

.comingNews .attachment i {
    margin-right: 5px;
}

.comingNews img {
    margin-left: 5px;
    vertical-align: middle;
}


.comingEvents-carousel {
    display: flex;
    gap: 20px;
}

.comingEvents-item {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

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

.comingEvents-img {
    position: relative;
}

.comingEvents-info {
    background-color: rgba(255, 255, 255, 0.8);
}

.comingEvents-price {
    background-color: #ff0073;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

.comingEvents-content {
    padding: 20px;
}

.comingEvents-content h5 {
    font-size: 1.5rem;
}

.comingEvents-content small {
    display: block;
    color: #6c757d;
}











/*---------------------------------------------------- */
/*----------------------------------------------------*/
/* Home Banner Area css
============================================================================================ */
.home_banner_area {
    z-index: 1;
    /* min-height: 500px; */
    position: relative;
    /* background: url(../img/banner/home-banner.jpg) no-repeat center; */
    background-size: cover;
}

.home_banner_area .banner_inner {
    position: absolute;
    top: 40%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 10;
    width: 100%;
}

@media (max-width: 991px) {
    .home_banner_area .banner_inner {
        top: 50%;
    }
}

.home_banner_area .banner_inner .banner_content h2 {
    font-size: 48px;
    font-weight: 500;
}

.home_banner_area .banner_inner .banner_content p {
    font-size: 20px;
    color: #002347;
    font-weight: 500;
}

.blog_banner {
    min-height: 780px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-bottom: 0px;
}

.blog_banner .banner_inner {
    background: #04091e;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 780px;
    z-index: 1;
}

.blog_banner .banner_inner .overlay {
    background: url(../img/banner/banner-2.jpg) no-repeat center center;
    opacity: 0.5;
    height: 125%;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: -1;
}

.blog_banner .banner_inner .blog_b_text {
    max-width: 700px;
    margin: auto;
    color: #fff;
    margin-top: 40px;
}

.blog_banner .banner_inner .blog_b_text h2 {
    font-size: 60px;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    line-height: 66px;
    margin-bottom: 15px;
}

.blog_banner .banner_inner .blog_b_text p {
    font-size: 16px;
    margin-bottom: 35px;
}

.blog_banner .banner_inner .blog_b_text #ffffff_bg_btn {
    line-height: 42px;
    padding: 0px 45px;
}

.banner_area {
    position: relative;
    background: url(../img/banner/banner.jpg) no-repeat center center;
    z-index: 1;
    min-height: 392px;
    padding-top: 0 !important;
}

.banner_area .banner_inner {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 392px;
    z-index: 1;
}

.banner_area .banner_inner .overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 35, 71, 0.8);
}

.banner_area .banner_inner .banner_content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.banner_area .banner_inner .banner_content h2 {
    color: #fff;
    font-size: 45px;
    margin-bottom: 0px;
}

.banner_area .banner_inner .banner_content .page_link {
    display: inline-block;
    padding: 7px 20px;
}

.banner_area .banner_inner .banner_content .page_link a {
    font-size: 15px;
    color: #fff;
    font-family: "Roboto", sans-serif;
    margin-right: 20px;
    position: relative;
    text-transform: capitalize;
}

.banner_area .banner_inner .banner_content .page_link a:before {
    content: "/";
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
}

.banner_area .banner_inner .banner_content .page_link a:last-child {
    margin-right: 0px;
}

.banner_area .banner_inner .banner_content .page_link a:last-child:before {
    display: none;
}

/* End Home Banner Area css
  ============================================================================================ */





/* Event container */
.sdltech-event {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.sdltech-event:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
}

/* Image styling */
.sdltech-event-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.sdltech-event-content {
    background: linear-gradient(135deg, #fffdf5, #fce8e6);
    border-left: 6px solid #e53935;
    padding: 20px 18px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(229, 57, 53, 0.15);
    font-family: 'Segoe UI', sans-serif;
    transition: all 0.3s ease;
}

/* Heading */
.sdltech-event-title {
    font-size: 24px;
    font-weight: 700;
    color: #c62828;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sdltech-event-title a {
    color: #b71c1c;
    text-decoration: none;
}

.sdltech-event-title a:hover {
    text-decoration: underline;
    color: #d32f2f;
}

.sdltech-event-date {
    font-size: 18px;
    font-weight: bold;
    color: #ff5722;
    margin-left: 6px;
}

.sdltech-event-description {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 8px;
    position: relative;
    padding-left: 16px;
}

.sdltech-event-description::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: #e53935; /* Blood red theme */
    border-radius: 50%;
}


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

    .sdltech-event-title {
        font-size: 18px;
    }

    .sdltech-event-description {
        font-size: 14px;
    }
}


.upcomingEvents {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
    
}

.event {
    display: flex;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.event:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.event--img {
    flex: 0 0 120px;
    max-width: 120px;
    overflow: hidden;
}

.event--img img {
    width: 100%;
    height: auto;
    max-height: 240px;
    border-radius: 8px 0 0 8px;
}

.event--content {
    flex: 1;
    padding: 20px;
}
.event--content-ensemble{
    font-size: 10px;
}

.event--content-hall{
    font-size: 12px;
}
.event--content h2 {
    font-size: 1.5rem;
    color: #333;
}
.event--content h2 a {
    font-size: 20px;
    color: #dc9a9a !important;
}
.row {
    display: flex;
    flex-wrap: wrap;
}

.upcomingEvents,
.comingNews {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.container-fluid.about .row>div {
    flex: 1;
}

/* marquee {
    flex-grow: 1;
    padding: 15px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 8px;
} */
marquee {
    flex-grow: 1;
    padding: 15px;
    border: 1px solid #ddd;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    overflow: hidden; 
}

@media (max-width: 768px) {
    .row {
        display: block;
    }

    .upcomingEvents,
    .comingNews {
        height: auto;
    }
}

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

    .event--img {
        max-width: 100%;
        flex: none;
        border-radius: 8px 8px 0 0;
    }

    .event--img img {
        border-radius: 8px 8px 0 0;
    }

    .event--content {
        padding: 15px;
    }

    .event--content h2 {
        font-size: 14px;

    }
    .event--content h2 a {
        font-size: 16px;
        /* color: #dc9a9a !important; */
    }
}

@media (max-width: 576px) {
    .event--content {
        padding: 10px;
    }

    .event--content h2 {
        font-size: 13px;

    }
    .event--content h2 a {
        font-size: 16px;
        /* color: #dc9a9a !important; */
    }
    .event--img img {
        max-height: 100px;
    }
}

.comingNews {
    padding: 0 15px;
}

.newsletter-header {
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: bold;
    color: #ff0073;
    text-align: left;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #ff0073;
    padding-bottom: 10px;
    font-family: 'Arial', sans-serif;
}


.wsite-spacer {
    text-align: center;
    margin: 20px 0;
}

@media (max-width: 576px) {
    marquee {
        font-size: 0.9rem;
    }

    .event--content {
        font-size: 0.9rem;
    }
    .newsletter-header{
        margin-top: 15px;
    }
}




.marqueeTopNav {
    top: -50%;
    transform: translateY(-20%);
    z-index: 1;
}

@media (max-width: 1024px) {
    .marqueeTopNav {
        top: -40%;
        transform: translateY(-15%);
    }
    .newsletter-header{
        margin-top: 15px;
    }
}

@media (max-width: 768px) {
    .marqueeTopNav {
        top: -30%;
        transform: translateY(40%);
    }
    .newsletter-header{
        margin-top: 15px;
    }
}

@media (max-width: 480px) {
    .marqueeTopNav {
        top: -20%;
        transform: translateY(42%);
    }
    .newsletter-header{
        margin-top: 15px;
        font-size: 25px;
    }
}



/* whatsapp */


.whatsapp-float {
    position: fixed;
    bottom: 100px;
    right: 24px;
    background-color: #25D366;
    color: white;
    border-radius: 15%;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 30px;
    transition: background-color 0.3s;
    z-index: 1000;
    animation: bounce 2s infinite;
}

.whatsapp-float:hover {
    background-color: #128C7E;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}


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

.calendar {
    flex: 1;
    margin-right: 20px;
    /* margin-left: 30px; */
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px;
}

.futureContent {
    flex: 2;
    padding: 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px;
}

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

    .calendar {
        margin-right: 0;
        margin-left: 0;
    }
    .futureContent{
        margin-top: 25px;
    }
}




.scheduledFuture {
    background: #f8f9fa;
    color: #ff0073;
    font-size: 24px;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.scheduledFuture p {
    display: inline-block;
    padding-left: 100%; 
    animation: marquee 10s linear infinite; 
}

@keyframes marquee {
    0% {
        transform: translate(0); 
    }
    100% {
        transform: translate(-100%);
    }
}



/* Rules */

.rulesPageContent{
    text-align: left;
    margin-bottom: 30px;
    margin-top: 20px;
}






.goodluckschool-testimonials-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.goodluckschool-heading {
    text-align: center;
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}

.goodluckschool-testimonial-slider {
    position: relative;
    max-width: 100%;
    margin: auto;
}

.goodluckschool-testimonial {
    display: none; /* Hide all testimonials by default */
    text-align: center;
    padding: 20px;
}

.goodluckschool-testimonial-img {
    width: 400px; /* Increased width for larger images */
    height: 300px; /* Adjust height for better proportions */
    object-fit: cover; /* Maintain aspect ratio */
    border-radius: 8px; /* Slight rounding for better aesthetics */
    margin-bottom: 10px;
}

.goodluckschool-testimonial-text {
    font-size: 18px;
    color: #555;
    margin: 10px 0;
}

.goodluckschool-testimonial-author {
    font-size: 16px;
    color: #888;
}

.goodluckschool-navigation {
    text-align: center;
    margin-top: 20px;
}

.goodluckschool-prev, .goodluckschool-next {
    background-color: #ff0073;
    color: white;
    border: none;
    padding: 10px 15px;
    margin: 5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.goodluckschool-prev:hover, .goodluckschool-next:hover {
    background-color: #0056b3;
}


/* Main container styling */
/* .container-fluid {
    padding: 5rem 0;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('/img/sch.png') center/cover;
} */

/* Section Title */
.container h1.text-center {
    font-size: 2.5rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

/* Search Box Styling */
.search-box {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 2rem;
    font-size: 1rem;
}

/* Blog Details Styling */
#blogDetails {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

/* Blog Title */
#blogTitle {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1rem;
}

/* Blog Description */
#blogDescription {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Slider Controls */
.slider button {
    background: none;
    border: none;
    font-size: 2rem;
    color: #333;
    cursor: pointer;
    transition: color 0.3s ease;
}

.slider button:hover {
    color: #007bff;
}

.slider #imageSlider {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider img {
    max-width: 100%;
    border-radius: 8px;
}

/* Project List Container */
.projects-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* sclProjectBlogs Item Styling */
.sclProjectBlogs {
    padding: 1rem 1.5rem;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sclProjectBlogs:hover {
    background-color: #e9ecef;
    border-color: #007bff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Project Titles in sclProjectBlogs */
.sclProjectBlogs h1 {
    font-size: 1.4rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.sclProjectBlogs h1:hover {
    color: #007bff;
}

/* Project Descriptions in sclProjectBlogs */
.sclProjectBlogs p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Links in sclProjectBlogs */
.sclProjectBlogs a {
    font-size: 1rem;
    color: #007bff;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.sclProjectBlogs a:hover {
    color: #0056b3;
    text-decoration: none;
}

/* Responsive Design Adjustments */
@media (max-width: 768px) {
    #blogTitle {
        font-size: 1.6rem;
    }

    .container h1.text-center {
        font-size: 2rem;
    }

    .sclProjectBlogs h1 {
        font-size: 1.2rem;
    }
    
    .search-box {
        padding: 0.6rem;
        font-size: 0.9rem;
    }
}
/* Active Project Styling */
.sclProjectBlogs.active {
    background-color: #007bff; /* Active background color */
    color: #fff; /* Active text color */
    border-color: #0056b3;
    font-weight: bold;
    box-shadow: 0px 4px 8px rgba(0, 123, 255, 0.2);
    transform: translateY(-2px);
    cursor: default; /* No pointer on active item */
}

.sclProjectBlogs.active h1,
.sclProjectBlogs.active p,
.sclProjectBlogs.active a {
    color: #fff; /* Override child elements' colors to match active style */
}

/* Example for adding active effect on page load (optional) */
.sclProjectBlogs.active:hover {
    background-color: #007bff;
    box-shadow: none;
    transform: none;
}

/* new slider section */


.goodluck-slider-container {
    position: relative;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
    margin-top: 100px;
}
.goodluck-slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.goodluck-slider-image {
    width: 100%;
    flex-shrink: 0;
}
.goodluck-pagination {
    text-align: center;
    margin-top: 10px;
}
.goodluck-pagination-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 5px;
    background-color: #bbb;
    border-radius: 50%;
    cursor: pointer;
}
.goodluck-active-dot {
    background-color: #333;
}

.sdl-gallery-container {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    grid-template-columns: repeat(1, 1fr); /* Default: mobile */
    justify-content: center;
  }
  @media (min-width: 600px) {
    .sdl-gallery-container {
      grid-template-columns: repeat(2, minmax(250px, 1fr));
      justify-content: center;
    }
  }
  @media (min-width: 992px) {
    .sdl-gallery-container {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 1200px) {
    .sdl-gallery-container {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .sdl-poster-card {
    background: #1a1a1a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
  }
  .sdl-poster-card:hover {
    transform: scale(1.02);
  }
  .sdl-poster-card img {
    width: 100%;
    max-height: 100%;
    aspect-ratio: 3 / 4; /* Maintain proportion across screens */
    object-fit: cover;
    display: block;
  }
  .sdl-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #222;
  }
  .sdl-actions button {
    background: none;
    border: none;
    color: #ccc;
    font-size: 1.1rem;
    cursor: pointer;
    margin-right: 0.5rem;
  }
  .sdl-actions button:hover {
    color: #f00;
  }
  .sdl-download-btn {
    background: #750c0c;
    border: none;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
  }
  .sdl-floral-banner {
    height: 80px;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
  }
  
  .sdl-floral-item {
    width: 300px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .flower-left {
    background-image: url('/img/new/flower-2.png');
  }
  .flower-center {
    background-image: url('/img/new/flower-1.jpg');
  }
  .flower-right {
    background-image: url('/img/new/flower-2.png');
  }
  .sdl-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 0 10px;
    margin-bottom: 40px;
  }

  .sdl-invitation-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    overflow: hidden;
    text-align: center;
    max-width: 100%;
    transition: transform 0.3s;
  }

  .sdl-invitation-card:hover {
    transform: translateY(-5px);
  }

  .sdl-invitation-card img {
    width: 100%;
    height: auto;
    display: block;
  }

  .sdl-card-actions {
    padding: 10px;
  }

  .sdl-card-actions button,
  .sdl-card-actions a {
    background: none;
    border: none;
    color: #750c0c;
    font-size: 1.5rem;
    margin: 0 8px;
    cursor: pointer;
  }

  /* Responsive Layout */
  @media (min-width: 1200px) {
    .sdl-invitation-card {
      flex: 0 1 calc(25% - 20px);
    }
  }

  @media (min-width: 992px) and (max-width: 1199px) {
    .sdl-invitation-card {
      flex: 0 1 calc(33.333% - 20px);
    }
  }

  @media (min-width: 768px) and (max-width: 991px) {
    .sdl-invitation-card {
      flex: 0 1 calc(50% - 20px);
    }
  }

  @media (max-width: 767px) {
    .sdl-invitation-card {
      flex: 0 1 100%;
    }
  }


  
  .sdltech-carousel-outer {
    --nav-color: #000;
    --nav-active-color: #00d1b2;
    --arrow-size: 48px;
    --margin: 10px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
  }
  
  .sdltech-threeDHeading {
    font-family: "Bangers", cursive;
    font-size: clamp(24px, 6vw, 80px);
    margin-top: clamp(10px, 12vw, 100px);
    text-align: center;
    color: #ffffff;
    letter-spacing: 2px;
    -webkit-text-stroke: clamp(1px, 0.3vw, 2px) #000000;
    text-shadow:
      clamp(1px, 0.2vw, 3px) clamp(1px, 0.2vw, 3px) 0 #ff3c00,
      clamp(2px, 0.4vw, 5px) clamp(2px, 0.4vw, 5px) 0 #000000;
  }
  
  .owl-carousel .sdltech-item {
    position: relative;
    margin: var(--margin);
  }
  
  .sdltech-video {
    width: 100%;
    height: 250px;
    display: block;
    border: none;
  }
  
  .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: var(--arrow-size);
    color: var(--nav-color);
    padding: 0 10px;
    z-index: 100;
  }
  
  .owl-nav .owl-prev {
    left: -20px;
  }
  
  .owl-nav .owl-next {
    right: -20px;
  }
  
  .owl-nav .owl-prev:hover,
  .owl-nav .owl-next:hover {
    color: var(--nav-active-color);
  }
  
  .sdltech-arrow {
    font-size: var(--arrow-size);
    color: var(--nav-color);
    cursor: pointer;
  }
  @media (max-width: 768px) {
    .owl-nav {
      display: none !important;
    }
  }
  .sdlsheet-upcoming-events {
    background: #f9f9f9;
  }
  
  .sdlsheet-heading {
    font-size: 2rem;
    font-weight: bold;
    color: #750c0c;
  }
  
  .sdlsheet-subheading {
    font-size: 1rem;
    color: #555;
  }
  
  .sdlsheet-card {
    background-color: #fff;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  
  .sdlsheet-card:hover {
    transform: translateY(-5px);
  }
  
  .sdlsheet-card-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  @media (min-width: 992px) {
    .sdlsheet-upcoming-events {
      margin-top: 100px; /* or 120px etc. */
    }
  }