/******************************************
IMPORT
******************************************/

/*@font-face {
    font-family: "Flaticon";
    src: url("fonts/Flaticon.eot");
    src: url("fonts/Flaticon.eot?#iefix") format("embedded-opentype"), url("fonts/Flaticon.woff") format("woff"), url("fonts/Flaticon.ttf") format("truetype"), url("fonts/Flaticon.svg#Flaticon") format("svg");
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: "Flaticon";
        src: url("fonts/Flaticon.svg#Flaticon") format("svg");
    }
}

[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
    font-family: Flaticon;
    font-style: normal;
}

.flaticon-email:before {
    content: "\f100";
}

.flaticon-map-with-position-marker:before {
    content: "\f101";
}

.flaticon-share:before {
    content: "\f102";
}

.flaticon-html5:before {
    content: "\f103";
}

.flaticon-black-graduation-cap-tool-of-university-student-for-head:before {
    content: "\f104";
}

.flaticon-computer-tool-for-education:before {
    content: "\f105";
}

.flaticon-download-business-statistics-symbol-of-a-graphic:before {
    content: "\f106";
}

.flaticon-arrows:before {
    content: "\f107";
}

.flaticon-monitor-tablet-and-smartohone:before {
    content: "\f108";
}

.flaticon-css-3:before {
    content: "\f109";
}

.flaticon-online-course:before {
    content: "\f10a";
}

.flaticon-coffee-cup:before {
    content: "\f10b";
}

.flaticon-add:before {
    content: "\f10c";
}

.flaticon-html-coding:before {
    content: "\f10d";
}*/


/******************************************
SKELETON
******************************************/

/*body {
    background-color: #f6f6f6;
    line-height: 1.6;
    font-size: 12.5px;
    color: #a2a2a2;
}

body,
p,
li,
a {
    font-family: 'Roboto', sans-serif;
}

.course-details h4 a,
.readmore,
.testimonial strong,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #000;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.5;
}

.cop-logo img,
a {
    color: #000;
    text-decoration: none !important;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.check li:before {
    content: "\f00c";
    font-family: "FontAwesome";
    font-size: 16px;
    left: 0;
    padding-right: 10px;
    position: relative;
    top: 2px;
}

.check li {
    list-style: none;
    margin-bottom: 8px;
}

    .check li:last-child {
        margin-bottom: 0;
    }

.check {
    margin-left: 0;
    padding-left: 0
}

    .check li a {
    }

.authorbox,
blockquote {
    border: 0;
    margin: 30px 0;
    position: relative;
    padding: 4rem 3rem;
    font-family: 'Droid Serif', sans-serif;
    font-style: italic;
    border: 1px solid #eaeaea;
    background-color: #f6f6f6;
}

    blockquote:after {
        content: "\f10e";
        padding: 5px;
        font-family: FontAwesome;
        position: absolute;
        bottom: 0px;
        color: #f6f6f6;
        font-size: 24px;
        right: 10px;
    }

    blockquote:before {
        content: "\f10d";
        padding: 5px;
        font-family: FontAwesome;
        position: absolute;
        top: 0;
        color: #f6f6f6;
        font-size: 24px;
        left: 10px;
    }*/


/******************************************
HEADER
******************************************/

/*header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    margin: 7px 0;
}

nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #FFF;
}

    .logo > a > p {
        padding-top: 20px;
    }

    .logo > a > img {
        width: 80px;
        height: 80px;
    }

.main-navigation {
    padding: 0 12rem;
    width: 100%;
    min-height: 80px;
    background: rgba(0, 0, 0, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    z-index: 1000;
    transition: all 0.5s;
}

    .main-navigation.active {
        background: rgb(253, 253, 253);
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    }

        .main-navigation.active .main-nav-links > li > a {
            color: black;
        }

            .main-navigation.active .main-nav-links > li > a::after {
                content: '';
                position: absolute;
                width: 0%;
                height: 2px;
                bottom: -5px;*/ /* Adjusts the line's position below the text */
/*left: 0;
                background-color: black;*/ /* Line color */
/*transition: width 0.3s ease-in-out;*/ /* Smooth transition for line width */
/*}



            .main-navigation.active .main-nav-links > li > a:hover::after {
                width: 100%;*/ /* Expand the line to full width on hover */
/*}

        .main-navigation.active .logo > a {
            color: rgb(0, 0, 0);
        }

.main-nav-links[data-visible="true"] {
    transform: translateX(0);
}

.main-nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
}

    .main-nav-links > li > a {
        text-decoration: none;
        text-transform: capitalize;
        color: #FFF;
        position: relative;*/ /* Allows the use of pseudo-elements */
/*transition: color 0.3s ease-in-out;*/ /* Smooth transition for text color */
/*}

        .main-nav-links > li > a::after {
            content: '';
            position: absolute;
            width: 0%;
            height: 2px;
            bottom: -5px;*/ /* Adjusts the line's position below the text */
/*left: 0;
            background-color: #FFF;*/ /* Line color */
/*transition: width 0.3s ease-in-out;*/ /* Smooth transition for line width */
/*}

        .main-nav-links > li > a:hover {
            color: #ff9900;*/ /* Change text color on hover */
/*}

            .main-nav-links > li > a:hover::after {
                width: 100%;*/ /* Expand the line to full width on hover */
/*}

.nav-toggle {
    position: absolute;
    background-color: transparent;
    background-image: url(./images/icon-hamburger.svg);
    background-repeat: no-repeat;
    color: #FFF;
    border: none;
    outline: none;
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
    display: none;
    right: 50px;
    z-index: 9999;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}*/

/* *******Mobile Nav******** */
/*@media (max-width: 414px) {
    .logo > a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }

        .logo > a > p {
            padding-top: 20px;
        }

        .logo > a > img {
            width: 50px;
            height: 50px;
        }

    .nav-toggle {
        display: block;
    }

        .nav-toggle[aria-expanded="true"] {
            background-image: url(./images/icon-close.svg);
        }

    .main-navigation {
        padding: 0 4rem;
        top: 0;
    }

    .main-nav-links {
        flex-direction: column;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 8rem 3rem !important;
        backdrop-filter: blur(1rem);
        transform: translateX(100%);
        transition: transform 350ms ease-in;
    }

    .main-navigation.active {
        background: rgba(0, 0, 0, 1);
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    }

        .main-navigation.active .logo > a {
            color: rgb(255, 255, 255);
        }

        .main-navigation.active .main-nav-links > li > a {
            color: rgb(255, 255, 255);
        }
}

.modal {
    top: 40%;
    margin: -20px auto;
}

.modal-backdrop.in {
    opacity: 1;
    background: url(images/pattern.png) repeat center center rgba(0, 0, 0, 1);
}

.modal-header {
    border-bottom: 0;
    padding: 15px;
    background: none;
}

.modal-content {
    background-clip: padding-box;
    background-color: transparent;
    border: 0;
    border-radius: 6px;
    box-shadow: none !important;
    outline: 0 none;
    position: relative;
}

.modal .close {
    font-size: 13px;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 14px;
    top: 27px;
    width: 40px;
    z-index: 111;
    transform: rotate(315deg);
}

.close,
.close:focus,
.close:hover {
    color: #ffffff;
    opacity: 1;
    text-shadow: none;
}

.modal .form-control {
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    font-family: 'Droid Serif', sans-serif;
    box-shadow: none;
    color: #555;
    display: block;
    font-size: 16px;
    line-height: 1.42857;
    font-style: italic;
    padding: 6px 12px;
    width: 100%;
    border-bottom: 4px solid #222;
    height: 70px;
    padding-left: 0;
}

.iconitem a {
    padding-left: 8px !important;
}*/


/******************************************
MEGA MENU
******************************************/

/*.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
    position: static;
}

    .yamm .dropdown.yamm-fw {
        position: static;
    }

.yamm .container {
    position: relative;
}

.yamm .dropdown.yamm-fw .dropdown-menu {
}

.yamm .dropdown {
    position: relative;
}

    .hassubmenu .dropdown-menu,
    .yamm .dropdown.yamm-fw.yamm-half .dropdown-menu {
        left: auto;
        right: auto;
    }

.yamm h4 {
    font-size: 16px;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 20px;
}

.yamm .dropdown-menu ul {
    padding: 0 !important;
    list-style: none;
}

.yamm .dropdown-menu li {
    padding: 0px;
    margin: 10px 0;
}

    .yamm .dropdown-menu li a {
        padding: 0 !important;
        color: #848484;
    }

    .yamm .dropdown-menu li:hover a {
        padding-left: 10px !important;
        background-color: transparent;
    }

.yamm-fw .dropdown-menu li:hover a {
    padding-left: 0 !important;
}

.yamm .dropdown .dropdown-menu {
    border-radius: 0;
    margin-top: 30px;
    min-width: 200px;
}

.yamm .dropdown .dropdown-menu {
    border-radius: 0;
    border-top: 3px solid #ddd;
    background-color: #fff !important;
    margin-top: 24px;
    padding: 20px 30px;
}

.header.affix .yamm .dropdown .dropdown-menu {
    margin-top: 15px !important;
}

.yamm .dropdown .dropdown-menu .show-left {
    margin-top: 0
}

.yamm ul {
    padding: 0;
}

.menu-widget {
    padding: 0 10px;
}

    .menu-widget img {
        border-radius: 6px 6px 0 0;
    }

    .menu-widget small {
        display: block;
        font-size: 16px;
        font-weight: bold;
    }

    .menu-widget h5,
    .menu-widget h5 a {
        font-size: 16px !important;
        font-weight: 700;
        margin: 0 !important;
        padding: 10px 0 5px !important;
        color: #000 !important;
    }

.yamm .dropdown-menu li:hover .menu-button,
.yamm .dropdown-menu li .menu-button {
    border-radius: 0 !important;
    font-size: 13px !important;
    border: 1px solid #fff;
    font-weight: bold;
    color: #ffffff !important;
    display: block;
    background-color: #111;
    padding: 5px 20px !important;
    max-width: 140px;
    margin: 10px auto 0;
    text-transform: capitalize;
}*/


/******************************************
PAGES
******************************************/

/*.page-title h3 {
    margin-bottom: 10px !important;
}

.breadcrumb {
    background-color: transparent;
    border-radius: 0;
    color: #aaa;
    font-size: 13px;
    list-style: outside none none;
    margin-bottom: 0;
    padding: 0;
}

    .breadcrumb > li a,
    .breadcrumb > li + li::before,
    .breadcrumb > .active {
        color: #aaa;
    }

.section.cb .breadcrumb > li a,
.section.cb .breadcrumb > li + li::before,
.section.cb .breadcrumb > .active {
    color: #fff;
}

.section.cb {
    padding: 40px 0 !important;
}

    .section.cb .breadcrumb {
        margin-top: 10px;
    }

    .section.cb h3 {
        font-size: 24px;
        padding: 0 !important;
        margin: 0 !important;
    }

.breadcrumb > li + li::before {
    content: "\f107";
    vertical-align: middle;
    padding-left: 5px;
    font-family: "Flaticon";
    font-size: 11px;
    padding: 0 6px 0 3px;
}

.tags-widget a {
    color: #ffffff !important;
    padding: 4px 10px;
    border-radius: 2px;
    font-size: 14px;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-radius: 0;
}

.pagination {
    margin: 0;
}

.pager {
    margin: 0;
}

.pagination > li > a,
.pagination > li > span {
    background-color: #fff;
    border: 1px solid #eeeeee !important;
    color: #999;
    float: left;
    line-height: 1.42857;
    margin-left: 0;
    margin-right: 5px;
    padding: 8px 15px;
    position: relative;
    text-decoration: none;
}

.pager li > a,
.pager li > span {
    background-color: #2c2f33;
    border: 1px solid #2c2f33;
    color: #fff;
    float: none;
    line-height: 1.42857;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 11px;
    margin-right: 10px;
    margin-left: 0;
    border-radius: 0;
    padding: 8px 15px;
    display: inline-block;
    position: relative;
    text-decoration: none;
}

.pager i {
    font-size: 13px;
    vertical-align: baseline;
}*/


/******************************************
EVENTS
******************************************/

/*.event-title.tagline-message h3 {
    font-size: 64px;
}

.event-title p {
    font-size: 18px;
    padding: 10px 0 20px;
}

.event-boxes .box {
    padding: 10px;
}

.event-desc {
    padding: 20px 20px 10px;
}

.box .event-desc h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    padding: 0;
}

.box .event-desc small {
    background-color: #111;
    color: #ffffff;
    padding: 0 10px;
}

.teammembers img {
    width: 100%;
}

.teammembers:hover {
    cursor: pointer;
}

teammembers .magnifier {
    overflow: hidden;
}

.teammembers .magnifier p {
    padding-bottom: 10px;
}

.teammembers:hover .magnifier,
.entry:hover .magnifier {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
}

.teammembers {
    overflow: hidden;
    position: relative;
}

.visible-buttons1 {
    visibility: hidden;
    margin: 0 auto;
    opacity: 0;
    position: absolute;
    text-align: center;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -ms-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    bottom: -50%;
    left: 0;
    right: 0;
    padding: 50px 20px 40px;
    position: absolute;
    text-align: center;
}

    .visible-buttons1 h4 {
        padding: 0;
        margin: 0;
        font-size: 18px;
    }

.teammembers .magnifier {
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    top: 0 !important;
}

.entry:hover .visible-buttons1 {
    opacity: 1;
    bottom: 0;
    visibility: visible;
}

.teambuttons p {
    color: #ffffff;
    padding: 0 30px 10px;
}

.teammembers .social-links i {
    color: #ffffff;
}

.teammembers .social-links a {
    color: #ffffff;
    display: inline-block;
    position: relative;
    width: 30px;
    font-size: 20px;
}

.teamdesc {
    border: 1px solid #eee;
    padding: 30px 30px;
}

    .teamdesc h4 {
        padding: 0;
        margin: 0 0 5px;
        font-weight: 700;
        font-size: 18px;
    }

    .teamdesc p {
        display: block;
        font-style: italic;
        padding-bottom: 0;
        margin: 0;
    }*/


/******************************************
CONTACT
******************************************/

/*.contactv2 {
    margin: 60px 0;
}

.small-box i {
    font-size: 54px;
    color: #232323;
    display: block;
}

.small-box h4 {
    font-weight: 600;
    font-size: 20px;
    margin: 20px 0;
    padding: 0;
    line-height: 1;
}

.small-box small {
    font-size: 18px;
    margin: 5px 0;
    display: block;
}

.small-box a {
    margin-top: 15px;
    display: block;
    text-decoration: underline !important;
    font-weight: 600;
    font-size: 16px;
}*/

/* .big-contact-form .form-control {
    margin-bottom: 10px;
    border-radius: 0;
    border-color: #eaeaea;
    height: 45px;
    box-shadow: none;
    color: #b9b9b9;
} */
/*.big-contact-form .form-control {
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #ced4da;
    height: 50px;
    padding: 15px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    .big-contact-form .form-control:focus {
        border-color: #ff6f61;*/ /* Accent color */
/*box-shadow: 0 0 8px rgba(255, 111, 97, 0.5);
        outline: none;
    }

.big-contact-form textarea {
    height: 120px !important;
}

.big-contact-form .form-control::-moz-placeholder {
    color: #b9b9b9;
    opacity: 1;
}

.big-contact-form .form-control:-ms-input-placeholder {
    color: #b9b9b9;
}

.big-contact-form .form-control::-webkit-input-placeholder {
    color: #b9b9b9;
}

#map {
    height: 350px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.mapv2 {
    padding: 10px;
    background-color: #f0f1f2;
    border: 1px solid #eee;
}

#map img {
    max-width: inherit;
}

.loader {
    margin-left: 10px;
}

.map {
    position: relative;
}

    .map .row {
        position: relative;
    }

.infobox img {
    width: 100% !important;
}

.map .searchmodule {
    padding: 18px 10px;
}

.infobox {
    display: block;
    margin: 0;
    padding: 0 0 10px;
    position: relative;
    width: 260px;
    z-index: 100;
}

    .infobox .title {
        font-size: 13px;
        line-height: 1;
        margin-bottom: 0;
        margin-top: 15px;
        padding-bottom: 5px;
        text-transform: capitalize;
    }*/


/******************************************
SECTIONS
******************************************/

/*.event-section {
    height: 100vh;
    height: 100%;
    padding: 30rem 0;
}

.parallax {
    background-attachment: fixed;
    background-position: 50% 0;
    background-repeat: no-repeat;
    height: 100%;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

    .parallax.parallax-off {
        background-attachment: scroll;
        display: block;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        position: relative;
        background-position: top center;
        vertical-align: sub;
        width: 100%;
        z-index: 2;
    }

.no-scroll-xy {
    overflow: hidden !important;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}*/

/* .boxed {
    box-shadow: 0 40px 60px 0 rgba(0, 0, 0, 0.25);
    padding: 8rem 4rem;
    background-color: #ffffff;
    margin-top: -60px;
    border-radius: 10px;
    
} */

/*.boxed {
    box-shadow: 0 40px 60px 0 rgba(0, 0, 0, 0.25);
    padding: 4rem 3rem;*/ /* Adjust padding for better content balance */
/*background-color: #ffffff;
    border-radius: 12px;
}

    .boxed.boxedp4 {
        padding-top: 4rem;
    }

.section {*/
/* background-color: #ffffff; */
/*padding: 3rem 0;
    position: relative;
    display: block;
}*/

/* .section-title {
    margin-bottom: 45px;
    margin-top: 45px;
} */
/*.section-title {
    margin-bottom: 30px;
    margin-top: 30px;
}

    .text-widget h3,
    .section-title h3 {
        margin: 0 0 25px;
        padding: 0;
        line-height: 1;
        font-size: 30px;
        font-weight: 700;
    }

    .section-title p {
        max-width: 800px;
        margin: 0 auto;
        padding: 0;
        font-size: 16px;
        font-family: 'Droid Serif', sans-serif;
        font-style: italic;
    }

.section.gb {
    background-color: #f6f6f6;
}

.section.db {
    background-color: #000000;
}

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: url(images/pattern.png) repeat center center rgba(0, 0, 0, 0.7);
}

.video-section {
    position: relative;
    display: block;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Ensure no overflow */
}

#home video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure video covers entire container */
    z-index: -1; /* Place the video behind other content */
}

/* Mobile, tablet, and desktop views will all use the video */
@media (max-width: 768px) {
    #home video {
        display: block; /* Ensure the video is visible */
    }
}

/* For larger screens (desktop), ensure the video still works properly */
@media (min-width: 769px) {
    #home video {
        display: block; /* Keep the video visible */
    }
}

.slider-bottom {
    position: absolute;
    bottom: 40px;
    left: 0;
    font-size: 10px;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 3px;
    z-index: 11;
    right: 0;
    margin: auto;
    text-align: center;
}

    .slider-bottom i {
        display: block;
        font-size: 14px;
        padding: 10px;
    }

.home-text-wrapper {
    padding-top: 80px;
    display: table;
    width: 100%;
    height: 100%;
    max-width: 900px;
    position: relative;
    text-align: center;
    z-index: 11;
}

.home-content {
    position: relative;
}

.home-message {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

    .home-message p {
        font-size: 54px;
        color: #ffffff;
        padding: 0;
        margin: 0;
        font-weight: 700;
    }

    .home-message small {
        font-size: 16px;
        color: #ffffff;
        font-style: italic;
        display: block;
        padding: 20px 0 35px;
        margin: 0;
	font-weight: 700;
	font-weight: bold;
    }

.nopadtop {
    padding-top: 0 !important;
}

.box {
    background-color: #ffffff;
    padding: 4rem;
    position: relative;
    z-index: 11;
}

    .box p {
        padding: 0;
        margin-bottom: 15px;
    }

    .box i {
        margin-bottom: 30px;
        display: inline-block;
        line-height: 1;
        font-size: 46px
    }

    .box h4 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
        padding: 0;
    }

.m30 {
    margin-top: -60px;
}

.readmore {
    font-weight: 700;
    font-size: 15px;
}

    .readmore:after {
        content: "\f107";
        vertical-align: middle;
        padding-left: 5px;
        font-family: "Flaticon";
        font-size: 11px;
    }

.image-box {
    position: relative;
}

    .image-box .overlay {
        background-image: none;
        border-radius: 6px;
        background-color: rgba(0, 0, 0, 0.2);
    }

    .image-box img {
        width: 100%;
    }

    .image-box h4 a,
    .image-box h4 {
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        top: 50%;
        z-index: 1;
        font-size: 20px;
        margin: -7px auto;
        color: #ffffff;
    }

hr.invis {
    border: 0;
    margin: 30px 0;
}*/


/******************************************
COURSE MODULES
******************************************/

/*.course-box {
    border-radius: 6px 6px 0 0;
    background-color: #ffffff;
    border: 1px solid #eaeaea;
}

    .course-box img {
        border-radius: 6px 6px 0 0;
        width: 100%;
    }

.course-details {
    padding: 3rem 2rem;
    height: 250px;
}

    .course-details h4 {
        font-size: 18px;
        padding: 0 0 1.5rem;
        font-weight: 700;
        margin: 0;
    }

.course-box small {
    display: block;
    font-size: 80%;
    margin-bottom: 10px;
}

.course-details p {
    padding-bottom: 0;
    margin-bottom: 0;
}

.course-footer ul {
    padding-bottom: 0;
    margin-bottom: 0;
    font-size: 14px;
}

.course-footer a {
    color: #aaa;
}

.course-footer i {
    padding-right: 3px;
}

.course-footer {
    border-top: 1px solid #eaeaea;
    padding: 15px;
}

    .course-footer .pull-right a {
        font-weight: bold;
        font-size: 16px;
        line-height: 1;
        font-family: Arial
    }

.entry {
    position: relative;
}

.magnifier {
    position: absolute;
    bottom: 0;
    left: 0;
    visibility: hidden;
    right: 0;
    opacity: 0;
    top: 0;
    background-color: rgba(1, 186, 207, 0.8);
    -webkit-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
    -moz-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
    -o-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
    transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
}

.entry:hover .magnifier {
    opacity: 1;
    z-index: 1000;
    left: 5%;
    top: 5%;
    right: 5%;
    bottom: 5%;
    position: absolute;
    visibility: visible;
    transition-delay: 0.2s;
}

.magnifier a {
    position: absolute;
    top: 50%;
    text-align: center;
    left: 0;
    right: 0;
    margin: -20px auto;
    font-size: 30px;
    color: #fff !important;
}*/


/************************************
WIDGETS
************************************/

/*.sidebar .widget {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eaeaea;
}

.sidebar .widget-title {
    font-weight: 600;
    color: #000000;
}

.sidebar .tags-widget li {
    margin-bottom: 10px;
}

.sidebar .widget .form-control {
    margin-bottom: 10px;
    border-radius: 0;
    border-color: #eaeaea;
    height: 45px;
    box-shadow: none;
    color: #b9b9b9;
}

.sidebar .newsletter-widget .form-control {
    min-width: 260px;
    margin-bottom: 0;
    height: 48px;
}

.sidebar .alignleft {
    float: left;
    margin-right: 20px;
}

.sidebar .mt-0 {
    font-size: 16px;
    padding: 0;
    margin-bottom: 5px;
    margin-top: 0;
}

.sidebar .media {
    display: block;
    margin-bottom: 30px;
}

    .sidebar .media:last-child {
        margin-bottom: 0;
    }*/


/************************************
BLOG
************************************/

/*.site-publisher img {
    float: left;
    margin: 0 20px 0 0;
    max-width: 60px;
}

.authorbox img {
    margin: 10px 30px 0 0;
    min-width: 130px;
}

.site-small-desc h4,
.site-publisher h4 {
    font-weight: 700;
    margin: 5px 0 15px;
    padding: 0;
}

.authorbox {
    background-color: #ffffff;
}

    .authorbox p {
        margin-top: 10px;
        color: #b9b9b9;
    }

    .authorbox small {
        text-transform: capitalize;
        font-style: normal;
        padding-right: 5px;
    }

.about-message small {
    text-transform: uppercase;
    letter-spacing: 2px;
}

.small-about-message .small-title {
    font-size: 24px;
    line-height: 24px;
    padding-bottom: 0;
    margin-bottom: 20px;
}

.user_name {
    font-size: 18px;
    font-weight: bold;
    padding: 0 0 5px;
}

.media-right,
.media > .pull-right {
    color: #999 !important;
    font-size: 11px;
    letter-spacing: 2px;
    padding-left: 10px;
    text-transform: uppercase;
}

.boxed-comment {
    border: 1px solid #eee;
    padding: 3rem;
    margin-top: 6rem;
    display: block;
}

.comments-list .media {
    padding: 15px;
    margin-bottom: 15px;
}

.media-body .btn-primary {
    padding: 5px 10px !important;
    font-size: 11px !important;
}

.last-child {
    margin-bottom: 0 !important;
}

.comments-list img {
    max-width: 80px;
    margin-right: 30px;
}

.authorbox-social li a {
    color: #999;
}

.authorbox-social ul {
    padding: 10px 0;
    margin-bottom: 0;
}

.authorbox {
    margin-bottom: 30px;
}

    .authorbox img {
        min-width: 130px;
        margin: 10px 30px 0 0 !important;
    }

.blog-list {
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.blog-meta .list-inline li span {
    font-style: italic;
    color: #999;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    padding-right: 5px;
}

.blog-meta h3 {
    padding: 0;
    margin: 10px 0;
    font-size: 30px;
    font-weight: 700;
}

.blog-meta small,
.blog-meta .list-inline li,
.blog-meta .list-inline li a {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: #000;
}

.blog-meta .list-inline li {
    color: #b9b9b9;
    letter-spacing: 0;
}

.blog-media img {
    width: 100%;
}

.blog-media {
    display: block;
    margin: 25px 0;
}

.blog-desc-big .lead {
    color: #000000;
    font-weight: 600;
}

.blog-desc-big .btn {
    margin-top: 15px;
}

.image-wrap img {
    width: 100%;
}

.image-wrap:after {
    content: "";
    width: 60px;
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #111;
    right: 0;
}

.blog-box {
    background-color: #ffffff;
    border-radius: 6px 6px 0 0;
    border: 1px solid #eaeaea;
}

    .blog-box .magnifier {
        border-radius: 6px 6px 0 0;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    .blog-box img {
        width: 100%;
        border-radius: 6px 6px 0 0;
    }

.post-meta {
    padding: 15px 30px 10px;
    margin-top: -5px;
    border-top: 1px solid #eaeaea;
    line-height: 1;
}

    .post-meta a {
        font-size: 13px;
        color: #aaa;
    }

    .post-meta .list-inline > li {
        padding-left: 0;
        padding-right: 0;
        margin-right: 10px;
    }

    .post-meta li:last-child:after {
        content: ""
    }

.blog-desc {
    padding: 3rem 2rem;
    display: block;
    position: relative;
}

    .blog-desc h4 a,
    .blog-desc h4 {
        font-size: 18px;
        font-weight: 700;
        padding: 0 0 15px;
        margin: 0;
        color: #000000;
    }

    .blog-desc p {
        padding: 0;
        margin: 0;
    }

.stat-count h3,
.stat-count h4 {
    color: #ffffff;
}

.stat-count h4 {
    font-size: 44px;
    line-height: 1;
    padding: 0;
    margin: 0;
}

.stat-count h3 {
    padding: 30px 0 25px;
    margin: 0;
    line-height: 1;
    font-size: 20px;
}

    .stat-count h3 i {
        padding-right: 10px;
        border-right: 1px solid #fff;
        margin-right: 10px;
    }

.stat-count p {
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-family: 'Droid Serif', sans-serif;
    font-style: italic;
}

.blog-grid .col-md-6,
.blog-grid .col-md-4 {
    margin-bottom: 30px
}*/


/******************************************
TESTIMONIAL
******************************************/

/*.testimonial {
    border: 1px solid #eaeaea;
}

    .testimonial p {
        font-style: italic;
        margin-bottom: 0;
    }

        .testimonial p.testiname {
            font-style: normal;
            font-size: 18px;
            display: block;
            padding-bottom: 0;
            margin-left: 20px;
            margin-bottom: 20px;
            margin-top: 0px;
        }

            .testimonial p.testiname strong {
                font-weight: 600;
                letter-spacing: -0.6px;
            }

    .testimonial img {
        margin-right: 10px;
        max-width: 40px;
    }

    .testimonial:after {
        content: "\f10e";
        padding: 5px;
        font-family: FontAwesome;
        position: absolute;
        bottom: 0px;
        color: #f6f6f6;
        font-size: 21px;
        right: 10px;
    }

    .testimonial:before {
        content: "\f10d";
        padding: 5px;
        font-family: FontAwesome;
        position: absolute;
        top: 0;
        color: #f6f6f6;
        font-size: 21px;
        left: 10px;
    }

    .testimonial .rating {
        margin-top: 20px;
    }

.rating {
    display: block;
}

    .rating i {
        color: #f4af0b !important;
        margin-bottom: 0;
        padding-bottom: 0;
        line-height: 1;
        display: inline-block;
        font-size: 15px;
    }

.p120 {
    padding-bottom: 120px !important;
}

.section.lb {
    border-top: 1px solid #eee;
}

.tagline-message h3 {
    padding: 0;
    font-size: 34px;
    margin: 0;
    color: #ffffff;
    font-weight: bold;
}

.section.lb .tagline-message h3,
.section.gb .tagline-message h3 {
    color: #000;
}

.callout h3 {
    font-size: 90px;
    line-height: 90px;
    margin-top: 0;
    color: #ffffff;
    font-weight: 900;
}

.callout h4 {
    color: #ffffff;
}

.callout h3 sup {
    font-size: 34px;
    top: -0.2em;
    vertical-align: super;
}

.callout .lead {
    color: #ffffff;
    font-size: 29px;
    font-weight: bold;
    line-height: 36px;
    padding: 30px 8px 0;
}

.p40l {
    padding-left: 4rem;
}*/

/* .custom-module h2 {
    font-size: 28px;
    font-weight: bold;
    margin: 20px 0 30px;
    padding: 0;
} */
/*.custom-module h2 {
    font-size: 32px;*/ /* Increased font size */
/*font-weight: 700;
    margin: 10px 0 20px;
    padding: 0;
    color: #2c3e50;*/ /* Darker shade for better readability */
/*}

.custom-module mark {
    line-height: 1;
    color: #ffffff;
    padding: 0 10px;
}*/

/* .custom-module p {
    
    padding: 0 0 15px 0;
    margin: 0;
} */
/*.custom-module p {
    padding: 0 0 20px 0;
    margin: 0;
    line-height: 1.6;
    color: #555;*/ /* Softer text color */
/*}*/

/******************************************
SHOP
******************************************/

/*.shop-top {
    margin-bottom: 30px;
    padding: 20px 0;
    display: block;
}

    .shop-top p,
    .shop-box.course-details h4 {
        padding: 0;
        margin-bottom: 0;
    }

.shop-wrapper {
    border: 0;
}

    .shop-wrapper .course-details {
        padding: 2rem;
    }

    .shop-wrapper.course-box small {
        margin-bottom: 0;
        margin-top: 5px;
    }

.shop-grid .col-md-3 {
    margin-bottom: 30px;
}

.btn-group.open .dropdown-toggle,
.bootstrap-select > .dropdown-toggle {
    background: #ffffff none repeat scroll 0 0 !important;
    box-shadow: none !important;
    color: #b9b9b9 !important;
    padding: 0;
    border: 0 !important;
    outline: none;
    width: 100%;
    z-index: 1;
}

.shop-desc small {
    font-size: 20px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.shop-meta {
    display: block;
    position: relative;
    margin: 30px 0;
    padding: 30px 0;
    border-top: 3px solid #f6f6f6;
    border-bottom: 3px solid #f6f6f6;
}

    .shop-meta ul {
        margin-bottom: 0;
        padding-bottom: 0;
        margin-top: 20px;
    }

.shop-media .image-wrap::after {
    display: none;
}

.shop-extra {
    margin-top: 40px;
    padding: 60px 60px 40px;
    border: 3px solid #f6f6f6;
}

    .shop-extra .nav-tabs > li > a {
        background-color: #ffffff !important;
        border: 0 !important;
        border-bottom: 3px solid transparent !important;
        border-radius: 0;
        font-weight: 700;
        outline: none !important;
        font-size: 17px;
        line-height: 1.42857;
        padding: 10px 30px;
        box-shadow: none !important;
        margin-right: 15px;
    }

    .shop-extra .nav-tabs {
        border-bottom: 3px solid #f6f6f6 !important;
    }

        .shop-extra .nav-tabs > li:hover a,
        .shop-extra .nav-tabs > li.active a {
            border-bottom-color: #111 !important;
        }

    .shop-extra .tab-content {
        padding: 40px 0 30px;
    }

    .shop-extra strong {
        color: #000000;
    }

    .shop-extra .tab-content h3 {
        font-size: 20px;
        padding: 0 0 30px;
        margin: 0;
    }

    .shop-extra .form-control {
        margin-bottom: 20px;
    }

.related-products {
    display: block;
    margin-top: 80px;
}

    .related-products .text-widget h3 {
        font-size: 20px;
        padding-bottom: 10px;
    }*/


/******************************************
FOOTER
******************************************/

/* Footer General Styling */
/*.section.footer {
    padding: 80px 0;
    background-color: whitesmoke;
    color: #ccc;
    font-family: 'Roboto', sans-serif;
}

.footer-logo-img {
    width: auto;
    height: auto;
    margin-bottom: 15px;
}

.footer p,
.footer ul li,
.footer ul li a {
    font-size: 15px;
    color: black*/ /* Adjusted to ensure visibility */
/*}

.widget-title {
    color: black;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

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

    .list-inline li {
        margin-bottom: 10px;
    }

        .list-inline li a {
            color: #333333;*/ /* Make links more visible */
/*text-decoration: none;
            font-size: 15px;
            transition: color 0.3s ease-in-out;
        }

            .list-inline li a:hover {
                color: #1abc9c;
            }*/

/* Contact Us and Legal Sections */
/*.footer ul {
    list-style: none;
    padding: 0;
}

    .footer ul li {
        margin-bottom: 10px;
    }

        .footer ul li a {
            color: #333333;
            text-decoration: none;
            transition: color 0.3s ease-in-out;
        }

            .footer ul li a:hover {
                color: #1abc9c;
            }

.footer .social a {
    margin-right: 15px;
    color: #333333;
    font-size: 18px;
    transition: color 0.3s ease-in-out;
}

    .footer .social a:hover {
        color: #1abc9c;
    }

.location-btn {
    background-color: #1abc9c;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    transition: background-color 0.3s ease-in-out;
    display: inline-block;
    margin-top: 10px;
}

    .location-btn:hover {
        background-color: #16a085;
        color: #fff;
    }

.footer-copy {
    margin-top: 40px;
    text-align: center;
    border-top: 1px solid #333;
    padding-top: 20px;
}

    .footer-copy p {
        font-size: 14px;
        color: black;*/ /* Adjusted color for visibility */
/*margin: 0;
    }*/

/* Add subtle hover animations */
/*.footer-logo img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.social i:hover {
    color: #1abc9c;
}

.btn-primary.location-btn:hover {
    background-color: #16a085;
}*/



/******************************************
BUTTONS
******************************************/

/*.btn {
    border-radius: 0;
    font-size: 14px;
    border: 1px solid #fff;
    font-weight: bold;
    color: #ffffff !important;
    padding: 13px 40px;
    text-transform: capitalize;
}

.btn-transparent {
    color: #ffffff;
    border: 1px solid #fff;
}*/


/************************************
MICS
************************************/

/*.loader {
    display: block;
    margin: 20px auto 0;
    vertical-align: middle;
}

#preloader {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    z-index: 11000;
    position: fixed;
    display: block
}

.preloader {
    position: absolute;
    margin: 0 auto;
    left: 1%;
    right: 1%;
    top: 47%;
    width: 65px;
    height: 65px;
    background: center center no-repeat none;
    background-size: 65px 65px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}*/


/******************************************
COLOR BLUE
******************************************/

/*.yamm .dropdown .dropdown-menu {
    border-top-color: #01bacf;
}

.iconitem a.shopicon i {
    color: #01bacf !important;
}

.shop-desc small,
.shop-meta a,
.authorbox small,
blockquote:before,
blockquote:after,
.blog-meta small a,
.small-box i,
.copyrights ul li:hover a,
.footer .readmore,
.breadcrumb > li a,
.yamm h4,
.yamm-content li:hover a,
.yamm .hassubmenu li:hover a,
.check li:before,
.stat-count h3,
.blog-desc h4:hover a,
.post-meta li:after,
.course-box small,
.course-details h4:hover a,
.course-footer i,
a:hover,
a:focus,
.box i,
.topbar .text-left i {
    color: #01bacf;
}

.shop-extra .nav-tabs > li:hover a,
.shop-extra .nav-tabs > li.active a,
.modal .form-control,
.form-control:focus,
.btn-transparent {
    border-color: #01bacf !important;
}

.cb,
.box .event-desc small,
.pagination a,
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover,
.tags-widget a,
.owl-theme-01 .owl-nav [class*="owl-"]:hover,
.yamm .dropdown-menu li:hover .menu-button,
.yamm .dropdown-menu li .menu-button,
mark,
.bgcolor1,
.image-wrap:before,
.image-wrap:after,
.btn-primary {
    border-color: #01bacf;*/
/* background-color: #01bacf; */
/*background-color: #0f4bd5;
    box-shadow: inset 0 0 0 0 #00a8bd;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    transition: all ease 0.5s;
}

    .pagination a:hover,
    .tags-widget a:hover,
    .btn-primary:hover {
        color: #ffffff !important;
        box-shadow: inset 0 100px 0 0 #00a8bd;
        border-color: #00a8bd;
    }*/


/******************************************
COLOR GREEN
******************************************/

/*.menu-widget small,
.course-footer .pull-right a {
    color: #82b440;
}

.btn-default {
    border-color: #82b440;
    background-color: #82b440;
    box-shadow: inset 0 0 0 0 #74a632;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    transition: all ease 0.5s;
}

    .btn-default:hover {
        box-shadow: inset 0 100px 0 0 #74a632;
        border-color: #74a632;
    }*/



/*************************************************************************************
CUSTOM SETTINGS
*************************************************************************************/
/*.custom-pad {
    padding: 0 100px;
}

.up-delay {
    transition-delay: var(--dlay-t) !important;
}

section.sec-bg {
    background-image: url(./images/eventbg.jpeg);
}

.container.cont-bg {
    background-color: #ffffff;
    padding: 2rem;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);*/ /* Softer shadow */
/*transition: transform 0.3s ease-in-out;*/ /* Add hover effect */
/*}

.ovh {
    overflow: hidden;
}

.p-none {
    padding: 0 !important;
}

.pt-0 {
    padding-top: 0;
}

.pb-0 {
    padding-bottom: 0;
}

.pb-2 {
    padding-bottom: 2rem;
}

.pb-4 {
    padding-bottom: 4rem;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-4 {
    margin-top: 8rem;
}

.mb-4 {
    margin-bottom: 8rem;
}

.abt-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(../images/m1m.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.aa-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(../images/FD12.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ar-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/Reunion2-1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sp-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/CSR.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.wg-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/123A2479-HDR.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.as-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/AA.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.nl-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/atal-ranking.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.vl-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/Volunteer.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ev-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/Events6.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.team-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/ACR-Team-Photo-1600x640-1.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sm {
    margin-top: 80px;
}

.dean-img {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.form-marker {
    padding: 6px;
    margin: 10px 0 20px 0;
    background: #007bff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0056b3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);*/ /* Subtle shadow for depth */
/*transition: background 0.3s ease, box-shadow 0.3s ease;*/ /* Smooth transition for hover effect */
/*border-radius: 12px;
}

    .form-marker:hover {
        background: #0056b3;*/ /* Darker blue on hover */
/*box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);*/ /* Enhanced shadow on hover */
/*}

    .form-marker > span {
        font-size: 1.5rem;*/ /* Large text for emphasis */
/*color: #e0f7fa;*/ /* Light cyan color for text to match with blue background */
/*font-weight: bold;*/ /* Bold text for better visibility */
/*text-transform: uppercase;*/ /* Uppercase text for impact */
/*letter-spacing: 1px;*/ /* Spacing between letters for a modern look */
/*text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);*/ /* Subtle text shadow for added depth */
/*}

.ptt {
    padding-top: 8rem;
}

.entry-year {
    font-size: 8rem;
    padding: 9rem 0;
    color: #FFF;
}

.team-desc {
    text-align: left !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gal-button {
    padding: 1.2rem 1.6rem;
    background-color: #00a8bd;
    color: #FFF;
}

    .gal-button:hover {
        color: #000;
    }

.entry {
    background-color: #01bacf;
}

.tab-content > details > summary:focus {
    outline: none;
    border: none;
}

.head-hilight {
    position: relative;
    display: inline-block;
}

    .head-hilight::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: calc(100%);
        height: 3px;
        background-color: #0f4bd5;
    }

.benefit-module {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

    .benefit-module h5 {
        font-size: 2rem;
        padding-bottom: 5px;
    }

.text-info h5 {
    font-size: 2rem;
    padding-bottom: 5px;
}

.d-flex {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 20px;
    margin-top: 4rem;
}

    .d-flex img {
        height: 68px;
        width: 61px;
    }

.grad-bg {
    background-image: linear-gradient(45deg, #0b3589 0, #0d72ca 40%, #0fecfa 100%) !important;
}*/
/******************************************
TABS
******************************************/
/*.tabs {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    background: #f9f9f9;
}

.tabs-sidebar {
    width: 250px;
    background: #ffffff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}

.tabs-button {
    padding: 16px 20px;
    background: #f9f9f9;
    border: none;
    outline: none;
    width: 100%;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, transform 0.3s;
    border-left: 4px solid transparent;
}

    .tabs-button:hover {
        background: #e0e0e0;
        color: #0056b3;
        transform: scale(1.02);
    }

.tabs-button-active {
    background: #007bff;*/ /* Vibrant blue for active tab */
/*color: #ffffff;
    font-weight: bold;
    border-left: 4px solid #0056b3;*/ /* Darker blue for active tab */
/*}

.tabs-content {
    padding: 20px;
    flex: 1;
    background: #ffffff;
    border-left: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    display: none;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
    transition: opacity 0.3s ease;
}

.tabs-content-active {
    display: block;
    opacity: 1;
}

.tabs-content h3 {
    margin-top: 0;
    color: #007bff;*/ /* Dark blue for headings */
/*border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.tabs-content p {
    font-size: 1rem;
    line-height: 0.8 !important;
    color: #333;
}

    .tabs-content p > strong {
        color: #007bff;*/ /* Vibrant blue for strong text */
/*}

.btn-primary {
    background-color: #007bff;
    border: none;
    color: #ffffff;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

    .btn-primary:hover {
        background-color: #0056b3;
        transform: scale(1.02);
    }*/

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

    .tabs-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }

    .tabs-button {
        border-bottom: 1px solid #e0e0e0;
    }
}*/

/* .tabs{
    border: 1px solid #cccccc;
    display: flex;
}
.tabs-sidebar{
    width: 200px;
    flex-shrink: 0;
    background: #cccccc;
}
.tabs-button{
    display: block;
    padding: 10px;
    background: #eeeeee;
    border: none;
    outline: none;
    width: 100%;
    cursor: pointer;
}
.tabs-button:active{
    background: #dddddd;
}
.tabs-button:not(:last-of-type){
    border-bottom: 1px solid #cccccc;
}
.tabs-button-active{
    font-weight: bold;
    border-right: 4px solid #009879;
    background: #dddddd;
}
.tabs-content{
    padding: 20px;
    font-size: 1rem;
    display: none;
}
.tabs-content p{
    font-size: 1.6rem !important;
}
.tabs-content p > strong{
    color: #01bacf;
}
.tabs-content-active{
    display: block;
}
.tabs-content > :first-child{
    margin-top: 0;
}
@media (max-width: 414px) {
    .tabs-sidebar{
        display: none;
    }
    .tabs{
        display: flex;
        flex-direction: column;
        border: none;
    }
    .tabs-content{
        display: block;
    }
} */
/******************************************
ACCORDION
******************************************/
/* .accordion{
    margin-bottom: 20px;
    cursor: pointer;
}
.accordion.active .accordion-heading i{
    transform: rotate(180deg);
    transition: transform 0.5s 140ms;
}
.accordion.active .accordion-content{
    display: block;
}
.accordion-heading{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: rgb(81, 169, 237);
    border-radius: 5px;
    padding: 1rem 1rem;
}
.accordion-heading h3{
    font-size: 2.3rem;
    margin: 0 !important;
    padding: 0 !important;
    color: #fbfbfb;
}
.accordion-heading i{
    font-size: 2.5rem;
    color: rgb(228, 221, 71);
}
.accordion-content{
    padding: 1rem 1rem;
    background-color: #2b3a65;
    display: none;
    animation: drop 0.5s linear backwards;
    line-height: 1.6;
    transform-origin: top;
    color: #fff;
}
@keyframes drop {
    0%{
        transform: scaleY(0);
    }
} */

/*.accordion {
    margin-bottom: 20px;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #1E3A8A, #3B82F6);*/ /* Royal blue with cyan gradient */
/*box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
    border: none;
    position: relative;
    transition: all 0.4s ease;
}



.accordion-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px 30px;
    color: #FFFFFF;*/ /* Crisp white for text */
/*position: relative;
    z-index: 1;
    border: none;
    transition: background 0.4s ease;
    backdrop-filter: blur(5px);
}

    .accordion-heading:hover {
        background: linear-gradient(135deg, #1E3A8A, #7C3AED);*/ /* Blue to violet hover */
/*box-shadow: 0px 5px 20px rgba(124, 58, 237, 0.4);
    }

    .accordion-heading h3 {
        font-size: 1.6rem;
        margin: 0;
        font-weight: 500;
        letter-spacing: 1px;
        color: #FFFFFF;*/ /* White for heading */
/*}

    .accordion-heading i {
        font-size: 1.8rem;
        color: #3B82F6;*/ /* Cyan for icons */
/*transition: transform 0.6s ease, color 0.4s;
    }

.accordion.active .accordion-heading i {
    transform: rotate(180deg);
}

.accordion-content {
    padding: 20px 30px;
    background: #F3F4F6;*/ /* Light slate gray for content */
/*color: #1E3A8A;*/ /* Deep royal blue for text */
/*display: none;
    border-top: 1px solid rgba(59, 130, 246, 0.2);*/ /* Cyan border */
/*border-radius: 0 0 12px 12px;
    line-height: 1.6;
    font-size: 1rem;
    animation: slideDown 0.6s ease forwards;
    position: relative;
}

.accordion.active .accordion-content {
    display: block;
}

.accordion-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 90%;
    height: 3px;
    background: linear-gradient(to right, #7C3AED, #3B82F6);*/ /* Violet to cyan gradient */
/*transform: translateX(-50%);
    border-radius: 20px;
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}*/

/* Hover effects */
/*.accordion:hover .accordion-heading i {
    color: #FFFFFF;
}

.accordion-heading h3 {
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}

.accordion-heading:hover h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #7C3AED 0%, #3B82F6 100%);
    transition: width 0.5s ease;
    width: 100%;
}

.accordion-content p {
    margin: 0;
    padding-top: 15px;
    opacity: 0;
    transform: translateY(10px);
    animation: contentAppear 0.5s forwards 0.5s;
}

@keyframes contentAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}*/



/******************************************
RESPONSIVE
******************************************/

/*@media (max-width: 992px) {
    .p120 {
        padding-bottom: 8rem !important;
    }

    .boxed {
        margin-top: 4rem;
    }

    .blog-box,
    .testimonial,
    .stat-count {
        margin: 30px 0;
    }

    .m30 {
        margin-top: 30px;
    }

    .absolute-widget {
        background-image: none;
    }

    .sidebar {
        margin-top: 30px;
    }

    .container {
        min-width: 100% !important;
    }

    .footer .widget {
        margin: 30px 0;
    }
}

@media (max-width: 768px) {
    .shop-extra .nav-tabs > li > a,
    .shop-extra .nav-tabs > li {
        float: none;
        display: block;
        width: 100%;
        text-align: center;
    }

    .shop-extra {
        padding: 30px 10px;
    }

    .home-message p {
        font-size: 28px;
    }

    .topbar .text-left {
        text-align: center;
    }

    .authorbox img {
        float: none;
        margin: 0 0 30px !important;
        min-width: 100px;
    }

    .media-left,
    .media > .pull-left {
        display: block;
        float: none;
        margin: 0 0 30px;
        padding-right: 10px;
    }
}

@media (max-width: 468px) {
    .blog-meta h3 {
        font-size: 20px;
    }
}

@media (min-width: 992px) {
    .yamm-fw {
        position: relative;
    }

        .hassubmenu:hover > ul,
        .yamm-fw:hover > ul {
            visibility: visible;
            opacity: 1;
            top: 100%;
        }

    .hassubmenu ul,
    .navbar-nav .yamm-fw ul {
        -webkit-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
        -moz-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
        -o-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
        transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
    }

    .yamm-fw .dropdown-menu {
        min-width: 240px;
        padding: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .hassubmenu > ul,
    .yamm-fw > ul {
        position: absolute;
        top: 160%;
        visibility: hidden;
        display: block;
        opacity: 0;
    }

        .yamm-fw > ul li {
            position: relative;
        }

            .yamm-fw > ul li:hover > ul {
                visibility: visible;
                opacity: 1;
                left: 100%;
            }
}

@media (max-width: 1200px) {
    .nav > li > a {
        padding: 1em 0.7em;
    }
}*/

/*Fun begins*/
/*.tab_container {
    width: 90%;
    margin: 0 auto;
    padding-top: 0;
    position: relative;
}

input, section {
    clear: both;
    padding-top: 10px;
    display: none;
}

.tab_container label {
    font-weight: 700;
    font-size: 18px;
    display: block;
    float: left;
    width: calc(100% / var(--qt));
    padding: 1.5em;
    color: #757575;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    background: #f0f0f0;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
    display: block;
    padding: 20px;
    background: #fff;
    color: #999;
    border-bottom: 2px solid #f0f0f0;
}

.tab_container .tab-content p,
.tab_container .tab-content h3 {
    -webkit-animation: fadeInScale 0.7s ease-in-out;
    -moz-animation: fadeInScale 0.7s ease-in-out;
    animation: fadeInScale 0.7s ease-in-out;
}

.tab_container .tab-content h3 {
    text-align: center;
}

.tab_container [id^="tab"]:checked + label {
    background: #fff;
    box-shadow: inset 0 3px #0CE;
}

    .tab_container [id^="tab"]:checked + label .fa {
        color: #0CE;
    }

label .fa {
    font-size: 1.3em;
    margin: 0 0.4em 0 0;
}*/

/*Media query*/
/*@media only screen and (max-width: 900px) {
    .tab_container label {
        padding: 0.3em;
    }

        .tab_container label span {
            display: block;
        }

    .tab_container {
        width: 98%;
    }
}*/

/*Content Animation*/
/*@keyframes fadeInScale {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.no_wrap {
    text-align: center;
    color: #0ce;
}

.link {
    text-align: center;
}*/
/* event cards */
/*.event-card {
    margin-bottom: 20px;
}

    .event-card h6 {
        font-size: 1.7rem;
        color: #01bacf;
    }

    .event-card .event-img {
        width: 100%;
        overflow: hidden;
    }

        .event-card .event-img img {
            transform: scale(1);
            transition: transform 0.5s ease-in-out;
        }

    .event-card:hover img {
        transform: scale(1.1);
    }*/
/* newsletter slide */
/*.carousel {
    position: relative;*/
/* width: 100%; */
/*height: 600px;
    margin: 10px;
    background-color: #2e2e2e;
}

    .carousel .carousel-item {
        z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        clip-path: circle(0% at 0 50%);
    }

        .carousel .carousel-item.active {
            clip-path: circle(150% at 0 50%);
            transition: clip-path 2s;
        }

        .carousel .carousel-item img {
            z-index: 1;
            border-radius: 5px;
            width: 100%;
            height: 100%;
        }

        .carousel .carousel-item .carousel-info {
            position: absolute;
            top: 0;
            padding: 15px 30px;
            width: 40%;
            color: #FFF;
            background: rgba(255 255 255 / 50%);
        }

            .carousel .carousel-item .carousel-info h2 {
                color: #FFF;
                font-size: 45px;
                text-transform: uppercase;
                letter-spacing: 2px;
                font-weight: 800;
                margin: 0;
            }

            .carousel .carousel-item .carousel-info a {
                color: #FFF;
                font-size: 12px !important;
                letter-spacing: 2px;
                font-weight: 800;
                text-transform: capitalize;
            }

            .carousel .carousel-item .carousel-info p {
                color: #FFF;
                background: rgba(0 0 0 / 50%);
                letter-spacing: 2px;
                font-size: 16px;
                width: 100%;
                padding: 10px;
                border-radius: 4px;
            }

    .carousel .carousel-nav {
        z-index: 2;
        position: absolute;
        display: flex;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

        .carousel .carousel-nav .btnn {
            background-color: rgba(255, 255, 255, 0.5);
            width: 15px;
            height: 15px;
            margin: 10px;
            border-radius: 50%;
            cursor: pointer;
        }

            .carousel .carousel-nav .btnn.active {
                background-color: #f3792e;
                box-shadow: 0 0 2px rgba(0 0 0 / 50%);
            }

@media (max-width: 820px) {
    .carousel {
        width: 600px;
        height: 375px;
    }

        .carousel .carousel-item .carousel-info {
            padding: 10px 25px;
        }

            .carousel .carousel-item .carousel-info h2 {
                font-size: 35px;
            }

            .carousel .carousel-item .carousel-info p {
                width: 70%;
                font-size: 15px;
            }

        .carousel .carousel-nav {
            bottom: 25px;
        }

            .carousel .carousel-nav .btnn {
                width: 10px;
                height: 10px;
                margin: 8px;
            }
}

@media (max-width: 620px) {
    .carousel {
        width: 400px;
        height: 250px;
    }

        .carousel .carousel-item .carousel-info {
            padding: 10px 20px;
        }

            .carousel .carousel-item .carousel-info h2 {
                font-size: 30px;
            }

            .carousel .carousel-item .carousel-info p {
                width: 80%;
                font-size: 13px;
            }

        .carousel .carousel-nav {
            bottom: 15px;
        }

            .carousel .carousel-nav .btnn {
                width: 8px;
                height: 8px;
                margin: 6px;
            }
}

@media (max-width: 420px) {
    .carousel {
        width: 310px;
        height: 210px;
    }

        .carousel .carousel-item .carousel-info {
            padding: 5px 10px;
            width: 80%;
        }

            .carousel .carousel-item .carousel-info h2 {
                font-size: 19px;
            }

            .carousel .carousel-item .carousel-info a {
                font-size: 10px !important;
                line-height: 1rem;
            }

            .carousel .carousel-item .carousel-info p {
                width: 100%;
                font-size: 11px;
            }

        .carousel .carousel-nav {
            bottom: 10px;
        }
}

.event-card-info {
    position: relative;
}

.ev-img {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

    .ev-img.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .ev-img > img {
        width: 100%;
        height: auto;
    }

.overlay-info {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
    bottom: -36px;
    padding: 0rem 3rem;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, bottom 0.5s ease-in-out;
}

    .overlay-info h3 {
        color: #FFF;
        margin: 0;
    }

    .overlay-info > p {
        color: #FFF;
        margin: 0;
    }

.ev-info {
    padding: 1rem;
    background-color: #ecf8ff;
}

    .ev-info h2 {
        margin: 0;
        font-size: 2.3rem;
        color: #0CE;
    }

.event-card-info:hover .overlay-info {
    opacity: 1;
    bottom: 0;
}

.give-back {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    height: auto;
    padding: 12rem 6rem;
}

    .give-back h2 {
        font-size: 4rem;
        color: #FFF;
        margin: 0;
        padding-bottom: 2rem;
    }

.gv-bk {
    padding: 1rem;
    background-color: #FFF;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: color 0.5s ease-in-out;
}

    .gv-bk::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: #a2a2a2;
        transform: translateX(-100%);
        transform-origin: left;
        z-index: -1;
        transition: transform 0.5s ease-in-out;
    }

    .gv-bk:hover {
        color: #FFF !important;
    }

        .gv-bk:hover::before {
            transform: translateX(0);
        }

.small-info-container {
    width: 100%;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    overflow: hidden;
}

.small-info {
    position: relative;
    width: calc(100% / 4 - 30px);
}

    .small-info::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: #00a7bd86;
        transition: background-color 0.5s ease-in-out;
    }

.sm-img img {
    width: 100%;
    height: auto;
}

.small-info:hover::before {
    background-color: transparent;*/ /* Change background to transparent on hover */
/*transform: scale(1);
    transition: transform 0.5s ease-in-out;*/ /* Optional: Zoom the background slightly */
/*}

.small-info:hover {
    transform: scale(1.1);*/ /* Zoom effect on the .small-info element itself */
/*}

.sm-title {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 1rem;
}

    .sm-title h3 {
        color: #FFF;
        font-size: 1.6rem;
        margin: 0;
    }




@media (max-width:414px) {
    .give-back {
        padding: 4rem 0;
    }

    .small-info {
        width: 100%;
    }
}

.team-card-holder {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30;
}

.team-indv {
    width: calc(100% / 4 - 30px);
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    margin-top: 30px;
    height: 287px;
}

    .team-indv:hover .for-hov {
        bottom: -150px;
    }

    .team-indv img {
        border-radius: 15px;
        width: 100%;
        object-fit: fill;
    }

.for-hov {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.3);
    bottom: -171px;
    transition: bottom 0.5s ease-in-out;
}

    .for-hov h3 {*/
/* color: #0fecfa;
        margin: 0;*/
/*font-size: 1.7rem;
        margin-top: -10px;
        color: white;
    }

    .for-hov p {
        color: #FFF;
        margin: 0;
        padding: 0;
        font-size: 1.3rem;
    }

    .for-hov a {
        color: #FFF;
        font-size: 1.3rem;
        transition: color 0.5s ease-in-out;
    }

        .for-hov a:hover {
            color: #0fecfa;
        }

@media (max-width:414px) {
    .dean-img img {
        width: 100%;
    }

    .team-indv {
        width: 100%;
    }
}

.course-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .course-box:hover {
        transform: scale(1.05);
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    }

.image-wrap:hover img {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.course-details {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.course-box:hover .course-details {
    
}

.course-footer {
    background: linear-gradient(90deg, #eaeaea, #f8f8f8);
    transition: background 0.3s ease;
}

    .course-footer:hover {
        background: linear-gradient(90deg, #f8f8f8, #eaeaea);
    }


.sticky-line-container {
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 999;
}

.sticky-line {
    width: 6px;*/ /* Slightly wider for better visibility */
/*height: 250px;*/ /* Increased height for a more prominent design */
/*background-color: #e0e0e0;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/ /* Add a subtle shadow */
/*display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 0;*/ /* Add padding for better spacing */
/*}

    .sticky-line .line-segment {
        width: 100%;
        height: 25px;*/ /* Adjust based on your design */
/*background-color: #b0b0b0;
        margin-bottom: 8px;*/ /* Increased margin for better separation */
/*border-radius: 2px;
        transition: background-color 0.3s ease, transform 0.3s ease;*/ /* Smooth transitions */
/*}

        .sticky-line .line-segment.active {
            background-color: #007bff;*/ /* Use a vibrant blue color for active sections */
/*transform: scale(1.2);*/ /* Slightly enlarge the active segment */
/*box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);*/ /* Add a glowing effect */
/*}

        .sticky-line .line-segment:hover {
            background-color: #007bff;*/ /* Highlight on hover */
/*cursor: pointer;*/ /* Indicate that the segments are interactive */
/*}

.carousel {
    position: relative;
}*/



/* Arrow styles */
/*.carousel-arrow {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s ease;
}

    .carousel-arrow:hover {
        background: rgba(0, 0, 0, 0.8);
    }

.left-arrow {
    left: 10px;
}

.right-arrow {
    right: 10px;
}

.video-thumbnail-container {
    position: relative;
    display: inline-block;
}

.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: rgba(255, 255, 255, 0.8);
    pointer-events: none;*/ /* Allows clicks to pass through to the anchor tag */
/*}

.video-thumbnail-container:hover .play-button-overlay {
    color: rgba(255, 255, 255, 1);*/ /* Brighter on hover */
/*}

.fa-play-circle {
    color: #FF0000;*/ /* YouTube red */
/*}


#section3 {
    padding: 3rem 0;
    position: relative;
    display: block;
    border: 5px solid transparent;*/ /* Initial border to prevent layout shift */
/*background-clip: padding-box;
}

    #section3::before {
        content: '';
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        background: linear-gradient(90deg, #ff6b6b, #f8e71c, #7ed321, #50e3c2, #007aff, #ff2d55, #ff6b6b);
        background-size: 400% 400%;
        z-index: -1;*/ /* Position behind the content */
/*border-radius: 10px;*/ /* Optional rounded corners */
/*animation: borderAnimation 10s infinite linear;
    }

#section5 {
    padding: 3rem 0;
    position: relative;
    display: block;
    border: 5px solid transparent;*/ /* Initial border to prevent layout shift */
/*background-clip: padding-box;
}

    #section5::before {
        content: '';
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        background: linear-gradient(90deg, #ff6b6b, #f8e71c, #7ed321, #50e3c2, #007aff, #ff2d55, #ff6b6b);
        background-size: 400% 400%;
        z-index: -1;*/ /* Position behind the content */
/*border-radius: 10px;*/ /* Optional rounded corners */
/*animation: borderAnimation 10s infinite linear;
    }

@keyframes borderAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

#section2 {
    background-color: #E0F7FA;*/ /* Light Cyan */
/*}

#section4 {
    background-color: #E0F7FA;*/ /* Light Cyan */
/*}

#section6 {
    background-color: #E0F7FA;*/ /* Light Cyan */
/*}*/


/* Swiper Styles */
/*.swiper-container {
    width: 100%;
    padding: 40px 0;
}

.swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease;
}

.swiper-slide-active {
    transform: scale(1.05);
}

.swiper-slide-shadow-left, .swiper-slide-shadow-right {
    background: rgba(0, 0, 0, 0.15);
}

.alum-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
    border-radius: 10px;
}

.alum-img-wrapper {
    position: relative;
}

.alum-img {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-bottom: 20px;
    border-radius: 10px;
}

.alum-magnifier {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 10px;
}

    .alum-magnifier i {
        color: white;
        font-size: 24px;
    }

.alum-details {
    max-width: 400px;
}

    .alum-details h4 {
        font-size: 1.5em;
        margin-bottom: 10px;
    }

    .alum-details a {
        display: block;
        font-size: 1.2em;
        color: #007bff;
        margin-bottom: 10px;
        text-decoration: none;
    }

    .alum-details p {
        font-size: 1em;
        color: #555;
    }

.alum-readmore {
    font-weight: bold;
    color: #007bff;
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

    .alum-readmore::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #007bff;
        transform: scaleX(0);
        transform-origin: bottom right;
        transition: transform 0.3s ease-out;
    }

    .alum-readmore:hover {
        color: #0056b3;*/ /* Darker blue on hover */
/*transform: translateY(-2px);*/ /* Small upwards movement */
/*}

        .alum-readmore:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }

        .alum-readmore:hover::before {
            content: '→';*/ /* Add an arrow before text on hover */
/*position: absolute;
            left: -20px;
            opacity: 0;
            transition: opacity 0.3s ease, left 0.3s ease;
        }

        .alum-readmore:hover::before {
            opacity: 1;
            left: -10px;
        }*/


/* Swiper Arrows and Pagination */
/*.swiper-button-next, .swiper-button-prev {
    color: #007bff;
    font-size: 24px;
}

.swiper-pagination-bullet {
    background: #007bff;
    opacity: 0.7;
}

.swiper-pagination-bullet-active {
    background: #0056b3;
    opacity: 1;
}*/
/* Section Styling */
/*#section8 {
    padding: 60px 0;
    background-color: #f8f9fa;
    position: relative;
}*/

/* .section-title h2 {
    font-size: 2.5rem;
    color: #007bff;
    margin-bottom: 40px;
    font-weight: bold;
} */
/*.section-title h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
    font-weight: 700;
}*/

/* Video Container */
/*.video-thumbnail-container {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

    .video-thumbnail-container img {
        display: block;
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 15px;
    }*/

/* Hover Effect on Video Thumbnails */
/*.video-thumbnail-container:hover {
        transform: scale(1.05);
        box-shadow: 0 25px 40px rgba(0, 0, 0, 0.25);
    }*/

/* Play Button Overlay */
/*.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 70px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.video-thumbnail-container:hover .play-button-overlay {
    opacity: 1;
}*/

/* Animation - Slide In Effects */
/*.custom-module.wow {
    visibility: visible;
    animation-name: none;
}

    .custom-module.wow.slideInLeft {
        animation: slideInLeft 0.8s ease forwards;
    }

    .custom-module.wow.slideInUp {
        animation: slideInUp 0.8s ease forwards;
    }

    .custom-module.wow.slideInRight {
        animation: slideInRight 0.8s ease forwards;
    }*/

/* Button Styling */
/*.btn-wrapper {
    text-align: center;
    margin-top: 40px;
}

.btn-primary {
    background-color: #007bff;
    border: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    color: #fff;
    border-radius: 50px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    .btn-primary:hover {
        background-color: #0056b3;
        transform: translateY(-5px);
    }*/

/* Media Queries */
/*@media (max-width: 768px) {
    .video-thumbnail-container img {
        height: 250px;
    }
}*/
/* Unified Section Styling */
/*#media-testimonials {
    padding: 80px 0;
    background-color: #f8f9fa;
    text-align: center;
}*/

/* Quote Styling */
/*.quote-box {
    margin: 0 auto;
    padding: 30px;
    max-width: 800px;
    background: linear-gradient(135deg, #007bff, #00d4ff);
    border-radius: 15px;
    color: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    font-style: italic;
}

.quote-text {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0;
}*/

/* Video Box Styling */
/*.video-box {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

    .video-box:hover {
        transform: scale(1.03);
        box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
    }

    .video-box iframe {
        border-radius: 20px;
    }*/

/* Responsive */
/*@media (max-width: 768px) {
    #media-testimonials {
        padding: 60px 20px;
    }

    .quote-text {
        font-size: 1.5rem;
    }

    .video-box iframe {
        height: 300px;
    }
}

.reunion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding: 30px;
    background: linear-gradient(135deg, #f0f0f0 25%, #fafafa 100%);
}

.reunion-link {
    font-weight: 700;
    font-size: 20px;*/ /* Reduced font size for better fitting */
/*color: #003366;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
    white-space: nowrap;*/ /* Prevent line break */
/*}

    .reunion-link i {
        font-size: 16px;
        transition: transform 0.3s ease;
    }

.reunion-card:hover .reunion-link i {
    transform: translateX(5px);*/ /* Adjusted for subtle movement */
/*}

.reunion-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;*/ /* Reduced padding */
/*transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    padding-left: 50px;*/ /* Increased padding on the left */
/*max-width: 100%;*/ /* Ensure the card takes the full available width */
/*}

    .reunion-card::before {
        content: '';
        width: 12px;*/ /* Adjusted size for better visibility */
/*height: 12px;*/ /* Adjusted size for better visibility */
/*background-color: #003366;
        position: absolute;
        top: 25px;
        left: 20px;*/ /* Adjusted position to align with text */
/*border-radius: 50%;
        z-index: 1;
    }

    .reunion-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }*/
/* Frequently Asked Questions */

/* Frequent Asked Qustions */

/* General Styles */

/*CSR Initiative*/
/* Page Header Section */

/*.page-header {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    margin: 0;*/ /* Remove default margin */
/*padding: 0;*/ /* Remove default padding */
/*}

.header-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit:cover;
    
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);*/ /* Semi-transparent background */
/*padding: 20px;
    border-radius: 8px;
    width: 80%;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.csr-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: white;
}

.csr-subtitle {
    font-size: 20px;
    line-height: 1.5;
}*/

/* Stats Row */
/*.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0;
    background-color: #002c7f;
    color: #fff;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
    margin: 5px;
    width: 120px;
    flex: 1;
    position: relative;*/ /* To position the border */
/*}

    .stat-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 10%;
        height: 80%;*/ /* Adjusts the line height */
/*width: 1px;
        background-color: #ffffff;*/ /* White line color */
/*}

    .stat-item .icon-container {
        background-color: #ffffff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 10px;
    }

    .stat-item .fa-business {
        font-size: 12px;
        color: #002c7f;
    }

.stat-number {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 0px;
}

.stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}*/
/* Creating Impact Through CSR Partnerships */
/*.csr-section {
    padding: 30px 15px;
    background-color: white
}

.csr-header {
    margin-bottom: 50px;
}

.csr-titles {
    font-size: 3.6rem;
    font-weight: bold;
    color: #333;
}

.csr-subtitles {
    font-size: 18px;
    color: #555;
}*/

/* CSR Benefits Cards */
/*.csr-benefits .csr-card {
    flex: 1 1 calc(33.333% - 20px);*/ /* 3 cards per row, adjusting for gap */
/*padding: 30px;
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 100px;*/ /* Minimum height for all cards */
/*display: flex;
    flex-direction: column;*/ /* Ensures contents are stacked vertically */
/*justify-content: space-between;*/ /* Spread out the content vertically */
/*}

    .csr-benefits .csr-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);*/ /* Add a shadow on hover */
/*}

.csr-card-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.csr-card-text {
    font-size: 16px;
    color: #666;
}*/

/* CSR Info Section */
/*.csr-info {
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
}

.csr-info-text {
    font-size: 18px;
    color: #444;
    margin-bottom: 20px;
}

.csr-info-heading {
    font-size: 22px;
    color: #333;
}

.csr-list li {
    font-size: 20px;
    color: #555;
    margin-bottom: 10px;
}*/

/* CSR Category Cards */
/*.csr-categories .csr-category-card {
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    background-color: #fff;
    padding: 15px;
    transition: transform 0.3s ease;
}

    .csr-categories .csr-category-card:hover {
        transform: translateY(-10px);
    }

.csr-image-wrapper {
    margin-bottom: 0;
}

.csr-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.csr-category-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

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

    .csr-read-more:hover {
        background-color: #0056b3;
    }*/

/* Download Button */
/*.csr-download .btn-outline-primary {
    padding: 15px 30px;
    font-size: 18px;
    border-radius: 50px;
    border: 2px solid #007bff;
    color: black !important;*/ /* Force the text color to be black */
/*transition: background-color 0.3s ease, color 0.3s ease;
}

    .csr-download .btn-outline-primary:hover {
        background-color: #007bff;
        color: #fff !important;*/ /* Ensure text turns white on hover */
/*}*/


/* Swiper container styling */
/* Swiper container styling */
/*#cs .stories-swiper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-height: 470px;
}

#cs .swiper-button-prev::after,
#cs .swiper-button-next::after {
    display: none;
}*/
/* Ensure swiper-wrapper is a flex container */
/*#cs .swiper-wrapper {
    display: flex;
}*/

/* Slide styling */
/*#cs .swiper-slide {
    flex: 1 0 calc(33.3333% - 20px);*/ /* Adjust for spaceBetween */
/*box-sizing: border-box;
    padding: 0 10px;*/ /* Adjust padding as needed */
/*border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    max-height: 450px;
}

    #cs .swiper-slide:hover {
        transform: scale(1.02);
    }*/

/* Image styling */
/*#cs .case-img {
    width: 100%;
    height: 250px;*/ /* Set a fixed height for all images */
/*overflow: hidden;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #cs .case-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;*/ /* Ensures images cover the entire container without distortion */
/*border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }

#cs .swiper-slide:hover .case-img img {
    transform: scale(1.05);
}*/

/* Text styling */
/*#cs .stories-content {
    padding: 1rem;
    background-color: #f9f9f9;*/ /* Default background color */
/*border-radius: 8px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

    #cs .stories-content:hover {
        background-color: #d0e7ff;*/ /* Light blue background on hover */
/*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }



#cs .case-title {
    font-size: 1.8rem;*/ /* Increased font size for the title */
/*font-weight: 600;
    margin: 0.5rem 0;
    color: #333;
}

#cs .case-description {
    font-size: 1.1rem;*/ /* Increased font size for the description */
/*color: #666;
    font-size: 1.7rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 12rem;*/ /* Adjust based on line height */
/*}*/

/* Button styling */
/*#cs .button.link {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.5rem;*/ /* Adjusted padding for a larger button */
/*background-color: #0056b3;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-weight: 600;
    border: 1px solid #004494;
    font-size: 1rem;*/ /* Ensure text size is appropriate */
/*}

    #cs .button.link:hover {
        background-color: #004494;
        transform: translateY(-2px);
    }

    #cs .button.link .material-icons {
        margin-left: 0.5rem;*/ /* Space between text and icon */
/*font-size: 1.2rem;*/ /* Adjust icon size */
/*transition: color 0.3s ease;
    }

    #cs .button.link:hover .material-icons {
        color: #e0e0e0;*/ /* Change icon color on hover */
/*}

#cs .button-icon {
    margin-left: 0.5rem;
}*/

/* Swiper navigation styling */
/*#cs .swiper-navigation {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

#cs .swiper-button-prev,
#cs .swiper-button-next {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    padding: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

    #cs .swiper-button-prev:hover,
    #cs .swiper-button-next:hover {
        background: rgba(0, 0, 0, 0.9);
    }

    #cs .swiper-button-prev .material-icons,
    #cs .swiper-button-next .material-icons {
        font-size: 28px;
    }

#cs .swiper-pagination {
    bottom: 10px;
    text-align: center;
}

#cs .swiper-pagination-bullet {
    background: #0056b3;
    opacity: 0.8;
}

#cs .swiper-pagination-bullet-active {
    background: #003d7a;
    opacity: 1;
}

.csr-conclave-section {
    background-color: #ffffff;*/ /* White background */
/*}*/


/* Corporate Section Styling */
/*.page-banner-section {
    padding-top: 8rem;
    position: relative;
    z-index: 1;
    background-color: #f5f7fa;*/ /* Subtle background color */
/*}

.banner-content {
    position: relative;
    z-index: 2;
    border-radius: 10px;
    padding: 3rem 2rem;
    background-color: rgba(0, 0, 0, 0.6);*/ /* Semi-transparent background */
/*display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.banner-half-bg {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    padding: 4rem 2rem;
    border-radius: 10px;
    overflow: hidden;
}

.banner-top-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.banner-left .heading-large {
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: capitalize;
    line-height: 1.2;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);*/ /* Add shadow for better readability */
/*}

.banner-right {
    max-width: 500px;
    background-color: rgba(0, 0, 0, 0.5);*/ /* Darker background for the text */
/*padding: 1.5rem;
    border-radius: 5px;
}

    .banner-right .banner-description p {
        font-size: 2rem;
        color: #ffffff;
        line-height: 1.5;
    }

.corporate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #0056b3;
    color: #ffffff;
    padding: 12px 24px;
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    white-space: nowrap;*/ /* Prevent text from wrapping */
/*border: none;
    position: relative;
    overflow: hidden;
}

    .corporate-btn::before {
        content: '';
        position: absolute;
        left: -100%;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg, #004494, #0066ff);
        transition: left 0.4s ease;*/ /* Smooth transition for the gradient */
/*z-index: 0;*/ /* Ensure the gradient is behind the text */
/*}

    .corporate-btn:hover::before {
        left: 0;*/ /* Move the gradient into view on hover */
/*}

    .corporate-btn:hover {
        background-color: transparent;*/ /* Remove background color on hover */
/*color: #ffffff;*/ /* Ensure the text stays white */
/*transform: scale(1.05);*/ /* Slightly increase the size of the button */
/*box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);*/ /* Add subtle shadow on hover */
/*}

    .corporate-btn span {
        z-index: 1;*/ /* Keep the button text on top of the gradient */
/*}


    .corporate-btn .button-icon {
        margin-left: 8px;*/ /* Space between text and icon */
/*}

    .corporate-btn .material-icons {
        font-size: 2.8rem;*/ /* Adjust the icon size */
/*vertical-align: middle;
    }


.banner-bottom-flex {
    margin-top: 2rem;
}

.banner-img img {
    border-radius: 8px;
    width: 100%;
    height: auto;
}*/

/* Responsive Design */
/*@media (max-width: 768px) {
    .banner-top-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .banner-left .heading-large {
        font-size: 2.5rem;
    }

    .corporate-btn {
        font-size: 1rem;
        padding: 10px 20px;
    }

    .banner-right {
        padding: 1rem;
    }
}*/

/*.corporate-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
}

.corporate-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}*/

/* Header Section */
/*.corporate-header {
    margin-bottom: 40px;
}

.corporate-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1b1b1b;
}

.corporate-description {
    font-size: 1.1rem;
    color: #6d6d6d;
}*/

/* Card Section */
/*.corporate-cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.corporate-card-col {
    flex: 1 1 22%;
    margin-bottom: 30px;
}

.corporate-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .corporate-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

.corporate-card-image img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 5px solid #004085;
}

.donation-card-content {
    background-color: #f8f9fa;*/ /* Default light background */
/*padding: 20px;
    border-radius: 8px;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}

    .donation-card-content:hover {
        background: linear-gradient(135deg, #e3f2fd, #90caf9);*/ /* Gradient background on hover */
/*box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);*/ /* Subtle shadow effect on hover */
/*}

.corporate-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1b1b1b;
    margin-bottom: 10px;
}

.corporate-card-description {
    font-size: 1rem;
    color: #6d6d6d;
    margin-bottom: 20px;
}

.corporate-read-more {
    font-size: 1rem;
    color: #004085;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    transition: color 0.3s ease;
}

    .corporate-read-more:hover {
        color: #006bb6;
    }

.corporate-icon {
    margin-left: 5px;
}*/

/* Donate Now Button */
/*.corporate-donate-now {
    font-size: 1.2rem;
    background-color: #004085;
    color: #fff;
    padding: 12px 25px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

    .corporate-donate-now:hover {
        background-color: #006bb6;
    }

    .corporate-donate-now .corporate-icon {
        margin-left: 10px;
    }*/

/* Fade-in Animation */
/*.fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}*/

/* Responsive Adjustments */
/*@media (max-width: 992px) {
    .corporate-card-col {
        flex: 1 1 45%;
    }
}

@media (max-width: 768px) {
    .corporate-card-col {
        flex: 1 1 100%;
    }

    .corporate-read-more {
        font-size: 0.9rem;
    }

    .corporate-donate-now {
        font-size: 1rem;
    }
}*/

/* Donation Section */
/*#causes .cause-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);*/ /* 4 items per row */
/*gap: 20px;*/ /* Add space between the cards */
/*}

#causes .donation-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

#causes .donation-card-image {
    height: 200px;
    overflow: hidden;
}

    #causes .donation-card-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

#causes .donation-card-content {
    padding: 15px;
}

#causes .donation-card-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 8px;
}

#causes .donation-card-description {
    font-size: 1.7rem;
    color: #222;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 10rem;*/ /* Adjust based on line height */
/*}


#causes .donation-read-more {
    font-size: 1.8rem;
    color: navy;*/ /* Default text color */
/*text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    position: relative;
    padding: 5px 10px;
    background: none;
    border-radius: 4px;
    overflow: hidden;*/ /* Ensure gradient stays within the button */
/*z-index: 1;
    transition: color 0.4s ease;*/ /* Smooth transition for text color */
/*}

    #causes .donation-read-more::before {
        content: '';
        position: absolute;
        left: -100%;
        top: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(120deg, #0066cc, #00ccff);*/ /* Gradient effect */
/*transition: left 0.4s ease;*/ /* Move the gradient on hover */
/*z-index: -1;*/ /* Ensure the gradient is behind the text */
/*}

    #causes .donation-read-more:hover::before {
        left: 0;*/ /* Move the gradient into view */
/*}

    #causes .donation-read-more:hover {
        color: #fff;*/ /* Change the text color to white for better contrast */
/*}

    #causes .donation-read-more span.material-symbols-sharp {
        margin-left: 8px;
        font-size: 1.3rem;
        transition: transform 0.4s ease;*/ /* Smooth transform for the icon */
/*z-index: 1;*/ /* Keep the icon on top of the gradient */
/*}

    #causes .donation-read-more:hover span.material-symbols-sharp {
        transform: translateX(8px);*/ /* Slide the icon to the right on hover */
/*}

    #causes .donation-read-more span.text {
        z-index: 1;*/ /* Ensure the text is on top of the gradient */
/*transition: transform 0.4s ease;*/ /* Smooth transition for text movement */
/*}

    #causes .donation-read-more:hover span.text {
        transform: translateX(8px);*/ /* Move the text slightly to the right on hover */
/*}*/


/* Responsive Design */
/*@media (max-width: 992px) {
    #causes .cause-cards {
        grid-template-columns: repeat(2, 1fr);*/ /* 2 items per row for medium screens */
/*}
}

@media (max-width: 576px) {
    #causes .cause-cards {
        grid-template-columns: 1fr;*/ /* 1 item per row for small screens */
/*}
}

@media (max-width: 768px) {
    .donor-card {
        width: 85%;*/ /* Adjust width on smaller screens */
/*}

    .swiper-button-next,
    .swiper-button-prev {
        width: 35px;
        height: 35px;
    }

    .swiper-container {
        padding: 0 10px;
    }
}

#content2 {
    display: block !important;
    visibility: visible !important;
}

.modal-content {
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.form-marker {
    font-weight: bold;
    text-transform: uppercase;
    color: #007bff;
}

input.form-control, select.form-control, textarea.form-control {
    border-radius: 8px;
    border: 1px solid #ced4da;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    border-radius: 5px;
    padding: 10px 20px;
}*/
/******************************************
IMPORT
******************************************/

@font-face {
    font-family: "Flaticon";
    src: url("fonts/Flaticon.eot");
    src: url("fonts/Flaticon.eot?#iefix") format("embedded-opentype"), url("fonts/Flaticon.woff") format("woff"), url("fonts/Flaticon.ttf") format("truetype"), url("fonts/Flaticon.svg#Flaticon") format("svg");
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: "Flaticon";
        src: url("fonts/Flaticon.svg#Flaticon") format("svg");
    }
}

[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
    font-family: Flaticon;
    font-style: normal;
}

.flaticon-email:before {
    content: "\f100";
}

.flaticon-map-with-position-marker:before {
    content: "\f101";
}

.flaticon-share:before {
    content: "\f102";
}

.flaticon-html5:before {
    content: "\f103";
}

.flaticon-black-graduation-cap-tool-of-university-student-for-head:before {
    content: "\f104";
}

.flaticon-computer-tool-for-education:before {
    content: "\f105";
}

.flaticon-download-business-statistics-symbol-of-a-graphic:before {
    content: "\f106";
}

.flaticon-arrows:before {
    content: "\f107";
}

.flaticon-monitor-tablet-and-smartohone:before {
    content: "\f108";
}

.flaticon-css-3:before {
    content: "\f109";
}

.flaticon-online-course:before {
    content: "\f10a";
}

.flaticon-coffee-cup:before {
    content: "\f10b";
}

.flaticon-add:before {
    content: "\f10c";
}

.flaticon-html-coding:before {
    content: "\f10d";
}


/******************************************
SKELETON
******************************************/
.close-icon {
    display: inline-block;
    transform: rotate(45deg); /* Rotate the plus (+) to look like a cross (×) */
    transition: transform 0.3s ease; /* Smooth transition effect */
}
body {
    background-color: #f6f6f6;
    line-height: 1.6;
    font-size: 12.5px;
    color: #a2a2a2;
    padding-right: 0;
}

body,
p,
li,
a {
    font-family: 'Roboto', sans-serif;
}

.course-details h4 a,
.readmore,
.testimonial strong,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #000;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.5;
}

.cop-logo img,
a {
    color: #000;
    text-decoration: none !important;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.check li:before {
    content: "\f00c";
    font-family: "FontAwesome";
    font-size: 16px;
    left: 0;
    padding-right: 10px;
    position: relative;
    top: 2px;
}

.check li {
    list-style: none;
    margin-bottom: 8px;
}

    .check li:last-child {
        margin-bottom: 0;
    }

.check {
    margin-left: 0;
    padding-left: 0
}

    .check li a {
    }

.authorbox,
blockquote {
    border: 0;
    margin: 30px 0;
    position: relative;
    padding: 4rem 3rem;
    font-family: 'Droid Serif', sans-serif;
    font-style: italic;
    border: 1px solid #eaeaea;
    background-color: #f6f6f6;
}

    blockquote:after {
        content: "\f10e";
        padding: 5px;
        font-family: FontAwesome;
        position: absolute;
        bottom: 0px;
        color: #f6f6f6;
        font-size: 24px;
        right: 10px;
    }

    blockquote:before {
        content: "\f10d";
        padding: 5px;
        font-family: FontAwesome;
        position: absolute;
        top: 0;
        color: #f6f6f6;
        font-size: 24px;
        left: 10px;
    }


/******************************************
HEADER
******************************************/

header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    margin: 7px 0;
    margin-left: -40px;
}

nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #FFF;
}

    .logo > a > p {
        padding-top: 20px;
        font-size: 15px;
    }

    .logo > a > img {
        width: 80px;
        height: 80px;
    }

.main-navigation {
    padding: 0 12rem;
    width: 100%;
    min-height: 80px;
    background: rgba(0, 0, 0, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    z-index: 1000;
    transition: all 0.5s;
}

    .main-navigation.active {
        background: rgb(253, 253, 253);
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    }

        .main-navigation.active .main-nav-links > li > a {
            color: black;
        }

            .main-navigation.active .main-nav-links > li > a::after {
                content: '';
                position: absolute;
                width: 0%;
                height: 2px;
                bottom: -5px; /* Adjusts the line's position below the text */
                left: 0;
                background-color: black; /* Line color */
                transition: width 0.3s ease-in-out; /* Smooth transition for line width */
            }



            .main-navigation.active .main-nav-links > li > a:hover::after {
                width: 100%; /* Expand the line to full width on hover */
            }

        .main-navigation.active .logo > a {
            color: rgb(0, 0, 0);
        }

.main-nav-links[data-visible="true"] {
    transform: translateX(0);
}

.main-nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
}

    .main-nav-links > li > a {
        text-decoration: none;
        text-transform: capitalize;
        color: #FFF;
        position: relative; /* Allows the use of pseudo-elements */
        transition: color 0.3s ease-in-out; /* Smooth transition for text color */
        font-size: 15px;
    }

        .main-nav-links > li > a::after {
            content: '';
            position: absolute;
            width: 0%;
            height: 2px;
            bottom: -5px; /* Adjusts the line's position below the text */
            left: 0;
            background-color: #FFF; /* Line color */
            transition: width 0.3s ease-in-out; /* Smooth transition for line width */
        }

        .main-nav-links > li > a:hover {
            color: #ff9900; /* Change text color on hover */
        }

            .main-nav-links > li > a:hover::after {
                width: 100%; /* Expand the line to full width on hover */
            }

.nav-toggle {
    position: absolute;
    background-color: transparent;
    background-image: url(./images/icon-hamburger.svg);
    background-repeat: no-repeat;
    color: #FFF;
    border: none;
    outline: none;
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
    display: none;
    right: 50px;
    z-index: 9999;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* *******Mobile Nav******** */
@media (max-width: 1024px) {
    .logo > a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }

        .logo > a > p {
            padding-top: 20px;
        }

        .logo > a > img {
            width: 50px;
            height: 50px;
        }

    .nav-toggle {
        display: block;
        width: 30px; /* Adjust the width as needed */
        height: 30px; /* Adjust the height as needed */
        cursor: pointer; /* Change cursor to pointer */
        background-color: transparent; /* Make background transparent */
    }

        .nav-toggle::before,
        .nav-toggle::after {
            content: '';
            position: absolute;
            width: 100%; /* Full width */
            height: 4px; /* Height of each line */
            background-color: grey; /* Color of the lines */
            transition: all 0.3s ease; /* Smooth transition for hover or active state */
        }

        .nav-toggle::before {
            top: 0; /* Position the top line */
        }

        .nav-toggle::after {
            bottom: 0; /* Position the bottom line */
        }

        /* Middle line */
        .nav-toggle div {
            background-color: aquamarine; /* Color of the middle line */
            height: 4px; /* Height of the middle line */
            width: 100%; /* Full width */
            position: absolute; /* Position relative to parent */
            top: 50%; /* Center the middle line */
            transform: translateY(-50%); /* Adjust for perfect centering */
        }

        /* Optional: Active or Hover state */
        .nav-toggle:hover::before,
        .nav-toggle:hover::after,
        .nav-toggle:hover div {
            background-color: darkcyan; /* Change color on hover */
        }

        .nav-toggle[aria-expanded="true"] {
            background-image: url(./images/icon-close.svg);
        }

    .main-navigation {
        padding: 0 4rem;
        top: 0;
    }

    .main-nav-links {
        flex-direction: column;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 8rem 3rem !important;
        backdrop-filter: blur(1rem);
        transform: translateX(100%);
        transition: transform 350ms ease-in;
    }

    .main-navigation.active {
        background: rgba(0, 0, 0, 1);
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    }

        .main-navigation.active .logo > a {
            color: rgb(255, 255, 255);
        }

        .main-navigation.active .main-nav-links > li > a {
            color: rgb(255, 255, 255);
        }
}

.modal {
    top: 40%;
    margin: -20px auto;
}

.modal-backdrop.in {
    opacity: 1;
    background: url(images/pattern.png) repeat center center rgba(0, 0, 0, 1);
}

.modal-header {
    border-bottom: 0;
    padding: 15px;
    background: none;
}

.modal-content {
    background-clip: padding-box;
    background-color: transparent;
    border: 0;
    border-radius: 6px;
    box-shadow: none !important;
    outline: 0 none;
    position: relative;
}

.modal .close {
    font-size: 13px;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 14px;
    top: 27px;
    width: 40px;
    z-index: 111;
    transform: rotate(315deg);
}

.close,
.close:focus,
.close:hover {
    color: #ffffff;
    opacity: 1;
    text-shadow: none;
}

.modal .form-control {
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    font-family: 'Droid Serif', sans-serif;
    box-shadow: none;
    color: #555;
    display: block;
    font-size: 16px;
    line-height: 1.42857;
    font-style: italic;
    padding: 6px 12px;
    width: 100%;
    border-bottom: 4px solid #222;
    height: 70px;
    padding-left: 0;
}

.iconitem a {
    padding-left: 8px !important;
}


/******************************************
MEGA MENU
******************************************/

.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
    position: static;
}

    .yamm .dropdown.yamm-fw {
        position: static;
    }

.yamm .container {
    position: relative;
}

.yamm .dropdown.yamm-fw .dropdown-menu {
}

.yamm .dropdown {
    position: relative;
}

    .hassubmenu .dropdown-menu,
    .yamm .dropdown.yamm-fw.yamm-half .dropdown-menu {
        left: auto;
        right: auto;
    }

.yamm h4 {
    font-size: 16px;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 20px;
}

.yamm .dropdown-menu ul {
    padding: 0 !important;
    list-style: none;
}

.yamm .dropdown-menu li {
    padding: 0px;
    margin: 10px 0;
}

    .yamm .dropdown-menu li:hover a::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%;
        background-color: #0056b3; /* Simple blue underline on hover */
        transition: width 0.3s ease;
    }

    .yamm .dropdown-menu li a {
        padding: 0 !important;
        color: #333333; /* Dark gray for a formal corporate look */
        font-size: 14px; /* Standard size for professional typography */
        font-weight: 500; /* Medium weight for clean, corporate appearance */
        text-transform: none; /* No uppercase to keep it simple and formal */
        background-color: transparent; /* Clean background to avoid clutter */
        border-left: 3px solid transparent; /* Subtle structural border */
        transition: all 0.3s ease; /* Smooth, simple transition */
    }

    .yamm .dropdown-menu li:hover a {
        padding-left: 10px !important;
        background-color: #d1e7dd; /* A slightly darker neutral color for a more polished corporate feel */

        color: #0056b3; /* Corporate blue on hover for branding */
        border-left: 3px solid #0056b3; /* Blue accent for a clean, modern corporate touch */
        text-decoration: none; /* No underline */
    }

.yamm-fw .dropdown-menu li:hover a {
    padding-left: 0 !important;
}

.yamm .dropdown .dropdown-menu {
    border-radius: 0;
    margin-top: 30px;
    min-width: 200px;
}

.yamm .dropdown .dropdown-menu {
    border-radius: 0;
    border-top: 3px solid #ddd;
    background-color: #fff !important;
    margin-top: 24px;
    padding: 20px 30px;
}

.header.affix .yamm .dropdown .dropdown-menu {
    margin-top: 15px !important;
}

.yamm .dropdown .dropdown-menu .show-left {
    margin-top: 0
}

.yamm ul {
    padding: 0;
}

.menu-widget {
    padding: 0 10px;
}

    .menu-widget img {
        border-radius: 6px 6px 0 0;
    }

    .menu-widget small {
        display: block;
        font-size: 16px;
        font-weight: bold;
    }

    .menu-widget h5,
    .menu-widget h5 a {
        font-size: 16px !important;
        font-weight: 700;
        margin: 0 !important;
        padding: 10px 0 5px !important;
        color: #000 !important;
    }

.yamm .dropdown-menu li:hover .menu-button,
.yamm .dropdown-menu li .menu-button {
    border-radius: 0 !important;
    font-size: 13px !important;
    border: 1px solid #fff;
    font-weight: bold;
    color: #ffffff !important;
    display: block;
    background-color: #111;
    padding: 5px 20px !important;
    max-width: 140px;
    margin: 10px auto 0;
    text-transform: capitalize;
}


/******************************************
PAGES
******************************************/

.page-title h3 {
    margin-bottom: 10px !important;
}

.breadcrumb {
    background-color: transparent;
    border-radius: 0;
    color: #aaa;
    font-size: 13px;
    list-style: outside none none;
    margin-bottom: 0;
    padding: 0;
}

    .breadcrumb > li a,
    .breadcrumb > li + li::before,
    .breadcrumb > .active {
        color: #aaa;
    }

.section.cb .breadcrumb > li a,
.section.cb .breadcrumb > li + li::before,
.section.cb .breadcrumb > .active {
    color: #fff;
}

.section.cb {
    padding: 40px 0 !important;
}

    .section.cb .breadcrumb {
        margin-top: 10px;
    }

    .section.cb h3 {
        font-size: 24px;
        padding: 0 !important;
        margin: 0 !important;
    }

.breadcrumb > li + li::before {
    content: "\f107";
    vertical-align: middle;
    padding-left: 5px;
    font-family: "Flaticon";
    font-size: 11px;
    padding: 0 6px 0 3px;
}

.tags-widget a {
    color: #ffffff !important;
    padding: 4px 10px;
    border-radius: 2px;
    font-size: 14px;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-radius: 0;
}

.pagination {
    margin: 0;
}

.pager {
    margin: 0;
}

.pagination > li > a,
.pagination > li > span {
    background-color: #fff;
    border: 1px solid #eeeeee !important;
    color: #999;
    float: left;
    line-height: 1.42857;
    margin-left: 0;
    margin-right: 5px;
    padding: 8px 15px;
    position: relative;
    text-decoration: none;
}

.pager li > a,
.pager li > span {
    background-color: #2c2f33;
    border: 1px solid #2c2f33;
    color: #fff;
    float: none;
    line-height: 1.42857;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 11px;
    margin-right: 10px;
    margin-left: 0;
    border-radius: 0;
    padding: 8px 15px;
    display: inline-block;
    position: relative;
    text-decoration: none;
}

.pager i {
    font-size: 13px;
    vertical-align: baseline;
}


/******************************************
EVENTS
******************************************/

.event-title.tagline-message h3 {
    font-size: 64px;
}

.event-title p {
    font-size: 18px;
    padding: 10px 0 20px;
}

.event-boxes .box {
    padding: 10px;
}

.event-desc {
    padding: 20px 20px 10px;
}

.box .event-desc h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    padding: 0;
}

.box .event-desc small {
    background-color: #111;
    color: #ffffff;
    padding: 0 10px;
}

.teammembers img {
    width: 100%;
}

.teammembers:hover {
    cursor: pointer;
}

teammembers .magnifier {
    overflow: hidden;
}

.teammembers .magnifier p {
    padding-bottom: 10px;
}

.teammembers:hover .magnifier,
.entry:hover .magnifier {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
}

.teammembers {
    overflow: hidden;
    position: relative;
}

.visible-buttons1 {
    visibility: hidden;
    margin: 0 auto;
    opacity: 0;
    position: absolute;
    text-align: center;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -ms-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    bottom: -50%;
    left: 0;
    right: 0;
    padding: 50px 20px 40px;
    position: absolute;
    text-align: center;
}

    .visible-buttons1 h4 {
        padding: 0;
        margin: 0;
        font-size: 18px;
    }

.teammembers .magnifier {
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    top: 0 !important;
}

.entry:hover .visible-buttons1 {
    opacity: 1;
    bottom: 0;
    visibility: visible;
}

.teambuttons p {
    color: #ffffff;
    padding: 0 30px 10px;
}

.teammembers .social-links i {
    color: #ffffff;
}

.teammembers .social-links a {
    color: #ffffff;
    display: inline-block;
    position: relative;
    width: 30px;
    font-size: 20px;
}

.teamdesc {
    border: 1px solid #eee;
    padding: 30px 30px;
}

    .teamdesc h4 {
        padding: 0;
        margin: 0 0 5px;
        font-weight: 700;
        font-size: 18px;
    }

    .teamdesc p {
        display: block;
        font-style: italic;
        padding-bottom: 0;
        margin: 0;
    }


/******************************************
CONTACT
******************************************/

.contactv2 {
    margin: 60px 0;
}

.small-box i {
    font-size: 54px;
    color: #232323;
    display: block;
}

.small-box h4 {
    font-weight: 600;
    font-size: 20px;
    margin: 20px 0;
    padding: 0;
    line-height: 1;
}

.small-box small {
    font-size: 18px;
    margin: 5px 0;
    display: block;
}

.small-box a {
    margin-top: 15px;
    display: block;
    text-decoration: underline !important;
    font-weight: 600;
    font-size: 16px;
}

/* .big-contact-form .form-control {
    margin-bottom: 10px;
    border-radius: 0;
    border-color: #eaeaea;
    height: 45px;
    box-shadow: none;
    color: #b9b9b9;
} */
.big-contact-form .form-control {
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #ced4da;
    height: 50px;
    padding: 15px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    .big-contact-form .form-control:focus {
        border-color: #ff6f61; /* Accent color */
        box-shadow: 0 0 8px rgba(255, 111, 97, 0.5);
        outline: none;
    }

.big-contact-form textarea {
    height: 120px !important;
}

.big-contact-form .form-control::-moz-placeholder {
    color: #b9b9b9;
    opacity: 1;
}

.big-contact-form .form-control:-ms-input-placeholder {
    color: #b9b9b9;
}

.big-contact-form .form-control::-webkit-input-placeholder {
    color: #b9b9b9;
}

#map {
    height: 350px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.mapv2 {
    padding: 10px;
    background-color: #f0f1f2;
    border: 1px solid #eee;
}

#map img {
    max-width: inherit;
}

.loader {
    margin-left: 10px;
}

.map {
    position: relative;
}

    .map .row {
        position: relative;
    }

.infobox img {
    width: 100% !important;
}

.map .searchmodule {
    padding: 18px 10px;
}

.infobox {
    display: block;
    margin: 0;
    padding: 0 0 10px;
    position: relative;
    width: 260px;
    z-index: 100;
}

    .infobox .title {
        font-size: 13px;
        line-height: 1;
        margin-bottom: 0;
        margin-top: 15px;
        padding-bottom: 5px;
        text-transform: capitalize;
    }


/******************************************
SECTIONS
******************************************/

.event-section {
    height: 100vh;
    height: 100%;
    padding: 30rem 0;
}

.parallax {
    background-attachment: fixed;
    background-position: 50% 0;
    background-repeat: no-repeat;
    height: 100%;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

    .parallax.parallax-off {
        background-attachment: scroll;
        display: block;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        position: relative;
        background-position: top center;
        vertical-align: sub;
        width: 100%;
        z-index: 2;
    }

.no-scroll-xy {
    overflow: hidden !important;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

/* .boxed {
    box-shadow: 0 40px 60px 0 rgba(0, 0, 0, 0.25);
    padding: 8rem 4rem;
    background-color: #ffffff;
    margin-top: -60px;
    border-radius: 10px;
    
} */

.boxed {
    box-shadow: 0 40px 60px 0 rgba(0, 0, 0, 0.25);
    padding: 4rem 3rem; /* Adjust padding for better content balance */
    background-color: #ffffff;
    border-radius: 12px;
}

    .boxed.boxedp4 {
        padding-top: 4rem;
    }

.section {
    /* background-color: #ffffff; */
    padding: 3rem 0;
    position: relative;
    display: block;
}

/* .section-title {
    margin-bottom: 45px;
    margin-top: 45px;
} */
.section-title {
    margin-bottom: 30px;
    margin-top: 30px;
}

    .text-widget h3,
    .section-title h3 {
        margin: 0 0 25px;
        padding: 0;
        line-height: 1;
        font-size: 30px;
        font-weight: 700;
    }

    .section-title p {
        max-width: 800px;
        margin: 0 auto;
        padding: 0;
        font-size: 16px;
        font-family: 'Droid Serif', sans-serif;
        font-style: italic;
    }

.section.gb {
    background-color: #f6f6f6;
}

.section.db {
    background-color: #000000;
}

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: url(images/pattern.png) repeat center center rgba(0, 0, 0, 0.7);
}

.video-section {
    position: relative;
    display: block;
}

.slider-bottom {
    position: absolute;
    bottom: 0px;
    left: 0;
    font-size: 10px;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 3px;
    z-index: 11;
    right: 0;
    margin: auto;
    text-align: center;
}

    .slider-bottom i {
        display: block;
        font-size: 14px;
        padding: 10px;
    }

.home-text-wrapper {
    padding-top: 80px;
    display: table;
    width: 100%;
    height: 100%;
    max-width: 900px;
    position: relative;
    text-align: center;
    z-index: 11;
}

.home-content {
    position: relative;
}

.home-message {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

    .home-message p {
        font-size: 54px;
        color: #ffffff;
        padding: 0;
        margin: 0;
        font-weight: 700;
    }

    .home-message small {
        font-size: 16px;
        font-family: 'Droid Serif', sans-serif;
        font-style: italic;
        display: block;
        padding: 20px 0 35px;
        margin: 0;
    }

.nopadtop {
    padding-top: 0 !important;
    background: linear-gradient(135deg, #e6f0ff, #0f4bd5);
}

.box {
    background-color: #ffffff;
    padding: 4rem;
    position: relative;
    z-index: 11;
}

    .box p {
        padding: 0;
        margin-bottom: 15px;
    }

    .box i {
        margin-bottom: 30px;
        display: inline-block;
        line-height: 1;
        font-size: 46px
    }

    .box h4 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
        padding: 0;
    }

.m30 {
    margin-top: -60px;
}

.readmore {
    font-weight: 700;
    font-size: 15px;
}

    .readmore:after {
        content: "\f107";
        vertical-align: middle;
        padding-left: 5px;
        font-family: "Flaticon";
        font-size: 11px;
    }

.image-box {
    position: relative;
}

    .image-box .overlay {
        background-image: none;
        border-radius: 6px;
        background-color: rgba(0, 0, 0, 0.2);
    }

    .image-box img {
        width: 100%;
    }

    .image-box h4 a,
    .image-box h4 {
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        top: 50%;
        z-index: 1;
        font-size: 20px;
        margin: -7px auto;
        color: #ffffff;
    }

hr.invis {
    border: 0;
    margin: 30px 0;
}


/******************************************
COURSE MODULES
******************************************/

.course-box {
    border-radius: 6px 6px 0 0;
    background-color: #ffffff;
    border: 1px solid #eaeaea;
}

    .course-box img {
        border-radius: 6px 6px 0 0;
        width: 100%;
    }

.course-details {
    padding: 3rem 2rem;
    height: 200px !important;
    
}
.caro-item {
    
}
    .course-details h4 {
        font-size: 18px;
        padding: 0 0 1.5rem;
        font-weight: 700;
        margin: 0;
    }

.course-box small {
    display: block;
    font-size: 80%;
    margin-bottom: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
    display: -webkit-box; /* Use WebKit-based browsers */
    -webkit-line-clamp: 2; /* Limit the text to 2 lines */
    -webkit-box-orient: vertical; /* Specify that the box is vertical */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis at the end of the text */
    line-height: 1.5; /* Set line height (adjust as needed) */
    max-height: calc(1.5em * 2); /* Set max height based on line height for 2 lines */
}


.course-details p {
    padding-bottom: 0;
    margin-bottom: 0;
    display: -webkit-box; /* Use WebKit-based browsers */
    -webkit-line-clamp: 3; /* Limit the text to 3 lines */
    -webkit-box-orient: vertical; /* Specify that the box is vertical */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis at the end of the text */
    line-height: 1.5; /* Set line height (adjust as needed) */
    max-height: calc(1.5em * 3); /* Set max height based on line height */
}

.course-footer ul {
    padding-bottom: 0;
    margin-bottom: 0;
    font-size: 14px;
}

.course-footer a {
    color: #aaa;
}

.course-footer i {
    padding-right: 3px;
}

.course-footer {
    border-top: 1px solid #eaeaea;
    padding: 15px;
}

    .course-footer .pull-right a {
        font-weight: bold;
        font-size: 16px;
        line-height: 1;
        font-family: Arial
    }

.entry {
    position: relative;
}

.magnifier {
    position: absolute;
    bottom: 0;
    left: 0;
    visibility: hidden;
    right: 0;
    opacity: 0;
    top: 0;
    background-color: rgba(1, 186, 207, 0.8);
    -webkit-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
    -moz-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
    -o-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
    transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
}

.entry:hover .magnifier {
    opacity: 1;
    z-index: 1000;
    left: 5%;
    top: 5%;
    right: 5%;
    bottom: 5%;
    position: absolute;
    visibility: visible;
    transition-delay: 0.2s;
}

.magnifier a {
    position: absolute;
    top: 50%;
    text-align: center;
    left: 0;
    right: 0;
    margin: -20px auto;
    font-size: 30px;
    color: #fff !important;
}


/************************************
WIDGETS
************************************/

.sidebar .widget {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eaeaea;
}

.sidebar .widget-title {
    font-weight: 600;
    color: #000000;
}

.sidebar .tags-widget li {
    margin-bottom: 10px;
}

.sidebar .widget .form-control {
    margin-bottom: 10px;
    border-radius: 0;
    border-color: #eaeaea;
    height: 45px;
    box-shadow: none;
    color: #b9b9b9;
}

.sidebar .newsletter-widget .form-control {
    min-width: 260px;
    margin-bottom: 0;
    height: 48px;
}

.sidebar .alignleft {
    float: left;
    margin-right: 20px;
}

.sidebar .mt-0 {
    font-size: 16px;
    padding: 0;
    margin-bottom: 5px;
    margin-top: 0;
}

.sidebar .media {
    display: block;
    margin-bottom: 30px;
}

    .sidebar .media:last-child {
        margin-bottom: 0;
    }


/************************************
BLOG
************************************/

.site-publisher img {
    float: left;
    margin: 0 20px 0 0;
    max-width: 60px;
}

.authorbox img {
    margin: 10px 30px 0 0;
    min-width: 130px;
}

.site-small-desc h4,
.site-publisher h4 {
    font-weight: 700;
    margin: 5px 0 15px;
    padding: 0;
}

.authorbox {
    background-color: #ffffff;
}

    .authorbox p {
        margin-top: 10px;
        color: #b9b9b9;
    }

    .authorbox small {
        text-transform: capitalize;
        font-style: normal;
        padding-right: 5px;
    }

.about-message small {
    text-transform: uppercase;
    letter-spacing: 2px;
}

.small-about-message .small-title {
    font-size: 24px;
    line-height: 24px;
    padding-bottom: 0;
    margin-bottom: 20px;
}

.user_name {
    font-size: 18px;
    font-weight: bold;
    padding: 0 0 5px;
}

.media-right,
.media > .pull-right {
    color: #999 !important;
    font-size: 11px;
    letter-spacing: 2px;
    padding-left: 10px;
    text-transform: uppercase;
}

.boxed-comment {
    border: 1px solid #eee;
    padding: 3rem;
    margin-top: 6rem;
    display: block;
}

.comments-list .media {
    padding: 15px;
    margin-bottom: 15px;
}

.media-body .btn-primary {
    padding: 5px 10px !important;
    font-size: 11px !important;
}

.last-child {
    margin-bottom: 0 !important;
}

.comments-list img {
    max-width: 80px;
    margin-right: 30px;
}

.authorbox-social li a {
    color: #999;
}

.authorbox-social ul {
    padding: 10px 0;
    margin-bottom: 0;
}

.authorbox {
    margin-bottom: 30px;
}

    .authorbox img {
        min-width: 130px;
        margin: 10px 30px 0 0 !important;
    }

.blog-list {
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.blog-meta .list-inline li span {
    font-style: italic;
    color: #999;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    padding-right: 5px;
}

.blog-meta h3 {
    padding: 0;
    margin: 10px 0;
    font-size: 30px;
    font-weight: 700;
}

.blog-meta small,
.blog-meta .list-inline li,
.blog-meta .list-inline li a {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: #000;
}

.blog-meta .list-inline li {
    color: #b9b9b9;
    letter-spacing: 0;
}

.blog-media img {
    width: 100%;
}

.blog-media {
    display: block;
    margin: 25px 0;
}

.blog-desc-big .lead {
    color: #000000;
    font-weight: 600;
}

.blog-desc-big .btn {
    margin-top: 15px;
}

.image-wrap img {
    width: 100%;
    height: 300px;
}

.image-wrap:after {
    content: "";
    width: 60px;
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #111;
    right: 0;
}

.blog-box {
    background-color: #ffffff;
    border-radius: 6px 6px 0 0;
    border: 1px solid #eaeaea;
}

    .blog-box .magnifier {
        border-radius: 6px 6px 0 0;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    .blog-box img {
        width: 100%;
        border-radius: 6px 6px 0 0;
    }

.post-meta {
    padding: 15px 30px 10px;
    margin-top: -5px;
    border-top: 1px solid #eaeaea;
    line-height: 1;
}

    .post-meta a {
        font-size: 13px;
        color: #aaa;
    }

    .post-meta .list-inline > li {
        padding-left: 0;
        padding-right: 0;
        margin-right: 10px;
    }

    .post-meta li:last-child:after {
        content: ""
    }

.blog-desc {
    padding: 3rem 2rem;
    display: block;
    position: relative;
}

    .blog-desc h4 a,
    .blog-desc h4 {
        font-size: 18px;
        font-weight: 700;
        padding: 0 0 15px;
        margin: 0;
        color: #000000;
    }

    .blog-desc p {
        padding: 0;
        margin: 0;
    }

.stat-count h3,
.stat-count h4 {
    color: #ffffff;
}

.stat-count h4 {
    font-size: 44px;
    line-height: 1;
    padding: 0;
    margin: 0;
}

.stat-count h3 {
    padding: 30px 0 25px;
    margin: 0;
    line-height: 1;
    font-size: 20px;
}

    .stat-count h3 i {
        padding-right: 10px;
        border-right: 1px solid #fff;
        margin-right: 10px;
    }

.stat-count p {
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-family: 'Droid Serif', sans-serif;
    font-style: italic;
}

.blog-grid .col-md-6,
.blog-grid .col-md-4 {
    margin-bottom: 30px
}


/******************************************
TESTIMONIAL
******************************************/

.testimonial {
    border: 1px solid #eaeaea;
}

    .testimonial p {
        font-style: italic;
        margin-bottom: 0;
    }

        .testimonial p.testiname {
            font-style: normal;
            font-size: 18px;
            display: block;
            padding-bottom: 0;
            margin-left: 20px;
            margin-bottom: 20px;
            margin-top: 0px;
        }

            .testimonial p.testiname strong {
                font-weight: 600;
                letter-spacing: -0.6px;
            }

    .testimonial img {
        margin-right: 10px;
        max-width: 40px;
    }

    .testimonial:after {
        content: "\f10e";
        padding: 5px;
        font-family: FontAwesome;
        position: absolute;
        bottom: 0px;
        color: #f6f6f6;
        font-size: 21px;
        right: 10px;
    }

    .testimonial:before {
        content: "\f10d";
        padding: 5px;
        font-family: FontAwesome;
        position: absolute;
        top: 0;
        color: #f6f6f6;
        font-size: 21px;
        left: 10px;
    }

    .testimonial .rating {
        margin-top: 20px;
    }

.rating {
    display: block;
}

    .rating i {
        color: #f4af0b !important;
        margin-bottom: 0;
        padding-bottom: 0;
        line-height: 1;
        display: inline-block;
        font-size: 15px;
    }

/*.p120 {
    padding-bottom: 120px !important;
}*/

.section.lb {
    border-top: 1px solid #eee;
}

/*.tagline-message h3 {
    padding: 0;
    font-size: 34px;
    margin: 0;
    color: #ffffff;
    font-weight: bold;
}*/

.section.lb .tagline-message h3,
.section.gb .tagline-message h3 {
    color: #000;
}

.callout h3 {
    font-size: 90px;
    line-height: 90px;
    margin-top: 0;
    color: #ffffff;
    font-weight: 900;
}

.callout h4 {
    color: #ffffff;
}

.callout h3 sup {
    font-size: 34px;
    top: -0.2em;
    vertical-align: super;
}

.callout .lead {
    color: #ffffff;
    font-size: 29px;
    font-weight: bold;
    line-height: 36px;
    padding: 30px 8px 0;
}

.p40l {
    padding-left: 4rem;
}

/* .custom-module h2 {
    font-size: 28px;
    font-weight: bold;
    margin: 20px 0 30px;
    padding: 0;
} */
.custom-module h2 {
    font-size: 3.6rem; /* Increased font size */
    font-weight: 700;
    margin: 10px 0 20px;
    padding: 0;
    color: #2c3e50; /* Darker shade for better readability */
}

@media (max-width: 768px) {
    #overview .container {
        padding: 20px; /* Reduce padding to 20px for small screens */
    }
}

@media (max-width: 768px) {

    .p40l {
        padding-left: 1rem; /* Reduce padding for smaller screens */
    }

    .custom-module h2 {
        font-size: 24px; /* Smaller font size for better fit */
        margin: 10px 0 15px; /* Adjust margin for smaller view */
    }
}

.custom-module mark {
    line-height: 1;
    color: #ffffff;
    padding: 0 10px;
}

/* .custom-module p {
    
    padding: 0 0 15px 0;
    margin: 0;
} */
.custom-module p {
    padding: 0 0 20px 0;
    margin: 0;
    line-height: 1.6;
    color: #555; /* Softer text color */
	font-size: 14px;
}

/******************************************
SHOP
******************************************/

.shop-top {
    margin-bottom: 30px;
    padding: 20px 0;
    display: block;
}

    .shop-top p,
    .shop-box.course-details h4 {
        padding: 0;
        margin-bottom: 0;
    }

.shop-wrapper {
    border: 0;
}

    .shop-wrapper .course-details {
        padding: 2rem;
    }

    .shop-wrapper.course-box small {
        margin-bottom: 0;
        margin-top: 5px;
    }

.shop-grid .col-md-3 {
    margin-bottom: 30px;
}

.btn-group.open .dropdown-toggle,
.bootstrap-select > .dropdown-toggle {
    background: #ffffff none repeat scroll 0 0 !important;
    box-shadow: none !important;
    color: #b9b9b9 !important;
    padding: 0;
    border: 0 !important;
    outline: none;
    width: 100%;
    z-index: 1;
}

.shop-desc small {
    font-size: 20px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.shop-meta {
    display: block;
    position: relative;
    margin: 30px 0;
    padding: 30px 0;
    border-top: 3px solid #f6f6f6;
    border-bottom: 3px solid #f6f6f6;
}

    .shop-meta ul {
        margin-bottom: 0;
        padding-bottom: 0;
        margin-top: 20px;
    }

.shop-media .image-wrap::after {
    display: none;
}

.shop-extra {
    margin-top: 40px;
    padding: 60px 60px 40px;
    border: 3px solid #f6f6f6;
}

    .shop-extra .nav-tabs > li > a {
        background-color: #ffffff !important;
        border: 0 !important;
        border-bottom: 3px solid transparent !important;
        border-radius: 0;
        font-weight: 700;
        outline: none !important;
        font-size: 17px;
        line-height: 1.42857;
        padding: 10px 30px;
        box-shadow: none !important;
        margin-right: 15px;
    }

    .shop-extra .nav-tabs {
        border-bottom: 3px solid #f6f6f6 !important;
    }

        .shop-extra .nav-tabs > li:hover a,
        .shop-extra .nav-tabs > li.active a {
            border-bottom-color: #111 !important;
        }

    .shop-extra .tab-content {
        padding: 40px 0 30px;
    }

    .shop-extra strong {
        color: #000000;
    }

    .shop-extra .tab-content h3 {
        font-size: 20px;
        padding: 0 0 30px;
        margin: 0;
    }

    .shop-extra .form-control {
        margin-bottom: 20px;
    }

.related-products {
    display: block;
    margin-top: 80px;
}

    .related-products .text-widget h3 {
        font-size: 20px;
        padding-bottom: 10px;
    }


/******************************************
FOOTER
******************************************/

/* Footer General Styling */
.section.footer {
    padding: 80px 0;
    background-color: whitesmoke;
    color: #ccc;
    font-family: 'Roboto', sans-serif;
}

.footer-logo-img {
    width: auto;
    height: auto;
    margin-bottom: 15px;
}

.footer p,
.footer ul li,
.footer ul li a {
    font-size: 15px;
    color: black /* Adjusted to ensure visibility */
}

.widget-title {
    color: black;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

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

    .list-inline li {
        margin-bottom: 10px;
    }

        .list-inline li a {
            color: #333333; /* Make links more visible */
            text-decoration: none;
            font-size: 15px;
            transition: color 0.3s ease-in-out;
        }

            .list-inline li a:hover {
                color: #1abc9c;
            }

/* Contact Us and Legal Sections */
.footer ul {
    list-style: none;
    padding: 0;
}

    .footer ul li {
        margin-bottom: 10px;
    }

        .footer ul li a {
            color: #333333;
            text-decoration: none;
            transition: color 0.3s ease-in-out;
        }

            .footer ul li a:hover {
                color: #1abc9c;
            }

.footer .social a {
    margin-right: 15px;
    color: #333333;
    font-size: 18px;
    transition: color 0.3s ease-in-out;
}

    .footer .social a:hover {
        color: #1abc9c;
    }

.location-btn {
    background-color: #1abc9c;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    transition: background-color 0.3s ease-in-out;
    display: inline-block;
    margin-top: 10px;
}

    .location-btn:hover {
        background-color: #16a085;
        color: #fff;
    }

.footer-copy {
    margin-top: 40px;
    text-align: center;
    border-top: 1px solid #333;
    padding-top: 20px;
}

    .footer-copy p {
        font-size: 14px;
        color: black; /* Adjusted color for visibility */
        margin: 0;
    }

/* Add subtle hover animations */
.footer-logo img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.social i:hover {
    color: #1abc9c;
}

.btn-primary.location-btn:hover {
    background-color: #16a085;
}



/******************************************
BUTTONS
******************************************/

.btn {
    border-radius: 0;
    font-size: 14px;
    border: 1px solid #fff;
    font-weight: bold;
    color: #ffffff !important;
    padding: 13px 40px;
    text-transform: capitalize;
}

.btn-transparent {
    color: #ffffff;
    border: 1px solid #fff;
}


/************************************
MICS
************************************/

.loader {
    display: block;
    margin: 20px auto 0;
    vertical-align: middle;
}

#preloader {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    z-index: 11000;
    position: fixed;
    display: block
}

.preloader {
    position: absolute;
    margin: 0 auto;
    left: 1%;
    right: 1%;
    top: 47%;
    width: 65px;
    height: 65px;
    background: center center no-repeat none;
    background-size: 65px 65px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}


/******************************************
COLOR BLUE
******************************************/

.yamm .dropdown .dropdown-menu {
    border-top-color: #01bacf;
}

.iconitem a.shopicon i {
    color: #01bacf !important;
}

.shop-desc small,
.shop-meta a,
.authorbox small,
blockquote:before,
blockquote:after,
.blog-meta small a,
.small-box i,
.copyrights ul li:hover a,
.footer .readmore,
.breadcrumb > li a,
.yamm h4,
.yamm-content li:hover a,
.yamm .hassubmenu li:hover a,
.check li:before,
.stat-count h3,
.blog-desc h4:hover a,
.post-meta li:after,
.course-box small,
.course-details h4:hover a,
.course-footer i,
a:hover,
a:focus,
.box i,
.topbar .text-left i {
    color: #01bacf;
}

.shop-extra .nav-tabs > li:hover a,
.shop-extra .nav-tabs > li.active a,
.modal .form-control,
.form-control:focus,
.btn-transparent {
    border-color: #01bacf !important;
}

.cb,
.box .event-desc small,
.pagination a,
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover,
.tags-widget a,
.owl-theme-01 .owl-nav [class*="owl-"]:hover,
.yamm .dropdown-menu li:hover .menu-button,
.yamm .dropdown-menu li .menu-button,
mark,
.bgcolor1,
.image-wrap:before,
.image-wrap:after,
.btn-primary {
    border-color: #01bacf;
    /* background-color: #01bacf; */
    background-color: #0f4bd5;
    box-shadow: inset 0 0 0 0 #00a8bd;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    transition: all ease 0.5s;
}

    .pagination a:hover,
    .tags-widget a:hover,
    .btn-primary:hover {
        color: #ffffff !important;
        box-shadow: inset 0 100px 0 0 #00a8bd;
        border-color: #00a8bd;
    }


/******************************************
COLOR GREEN
******************************************/

.menu-widget small,
.course-footer .pull-right a {
    color: #82b440;
}

.btn-default {
    border-color: #82b440;
    background-color: #82b440;
    border: none;
    color: #ffffff;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2rem;
    border-radius: 5px;
    box-shadow: inset 0 0 0 0 #74a632;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    transition: all ease 0.5s;
}

    .btn-default:hover {
        box-shadow: inset 0 100px 0 0 #74a632;
        border-color: #74a632;
    }



/*************************************************************************************
CUSTOM SETTINGS
*************************************************************************************/
.custom-pad {
    padding: 0 100px;
}

.up-delay {
    transition-delay: var(--dlay-t) !important;
}

section.sec-bg {
    background-image: url(./images/eventbg.jpeg);
}

.container.cont-bg {
    
    background-color: #ffffff;
    padding: 2rem;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* Softer shadow */
    transition: transform 0.3s ease-in-out; /* Add hover effect */

}

.container.nz {
    background-color: #ffffff;
    padding: 2rem;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* Softer shadow */
    transition: transform 0.3s ease-in-out; /* Add hover effect */
}

.ovh {
    overflow: hidden;
}

.p-none {
    padding: 0 !important;
}

.pt-0 {
    padding-top: 0;
}

.pb-0 {
    padding-bottom: 0;
}

.pb-2 {
    padding-bottom: 2rem;
}

.pb-4 {
    padding-bottom: 4rem;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-4 {
    margin-top: 8rem;
}

.mb-4 {
    margin-bottom: 8rem;
}

.abt-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/m1m.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.aa-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/FD12.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ar-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/Reunion2-1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sp-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/CSR.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.wg-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/123A2479-HDR.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.as-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/AA.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.nl-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/atal-ranking.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.vl-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/Volunteer.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ev-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/Events6.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.team-bg {
    background-image: linear-gradient(0deg, rgba(0 0 0 / 60%),rgba(0 0 0 / 60%)), url(./images/ACR-Team-Photo-1600x640-1.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sm {
    margin-top: 80px;
}

.dean-img {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.form-marker {
    padding: 6px;
    margin: 10px 0 20px 0;
    background: #007bff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0056b3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    transition: background 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
    border-radius: 12px;
}

    .form-marker:hover {
        background: #0056b3; /* Darker blue on hover */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
    }

    .form-marker > span {
        font-size: 1.5rem; /* Large text for emphasis */
        color: #e0f7fa; /* Light cyan color for text to match with blue background */
        font-weight: bold; /* Bold text for better visibility */
        text-transform: uppercase; /* Uppercase text for impact */
        letter-spacing: 1px; /* Spacing between letters for a modern look */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Subtle text shadow for added depth */
    }

.ptt {
    padding-top: 8rem;
}

.entry-year {
    font-size: 8rem;
    padding: 9rem 0;
    color: #FFF;
}

.team-desc {
    text-align: left !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gal-button {
    padding: 1.2rem 1.6rem;
    background-color: #00a8bd;
    color: #FFF;
}

    .gal-button:hover {
        color: #000;
    }

.entry {
    background-color: #01bacf;
}

.tab-content > details > summary:focus {
    outline: none;
    border: none;
}



.benefit-module {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

    .benefit-module h5 {
        font-size: 2rem;
        padding-bottom: 5px;
    }

.text-info h5 {
    font-size: 2rem;
    padding-bottom: 5px;
}

.d-flex {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 20px;
    margin-top: 4rem;
}

    .d-flex img {
        height: 68px;
        width: 61px;
    }

.grad-bg {
    background-image: linear-gradient(45deg, #0b3589 0, #0d72ca 40%, #0fecfa 100%) !important;
}
/******************************************
TABS
******************************************/
.tabs {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    background: #f9f9f9;
}

.tabs-sidebar {
    width: 250px;
    background: #ffffff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}

.tabs-button {
    padding: 16px 20px;
    background: #f9f9f9;
    border: none;
    outline: none;
    width: 100%;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, transform 0.3s;
    border-left: 4px solid transparent;
}

    .tabs-button:hover {
        background: #e0e0e0;
        color: #0056b3;
        transform: scale(1.02);
    }

.tabs-button-active {
    background: #007bff; /* Vibrant blue for active tab */
    color: #ffffff;
    font-weight: bold;
    border-left: 4px solid #0056b3; /* Darker blue for active tab */
}

.tabs-content {
    padding: 20px;
    flex: 1;
    background: #ffffff;
    border-left: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    display: none;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
    transition: opacity 0.3s ease;
}

.tabs-content-active {
    display: block;
    opacity: 1;
}

.tabs-content h2 {
    margin-top: 0;
    color: #007bff; /* Dark blue for headings */
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.tabs-content p {
    font-size: 1.7rem;
    line-height: 1.8;
    color: #333;
}

    .tabs-content p > strong {
        color: #007bff; /* Vibrant blue for strong text */
    }

.btn-primary {
    background-color: #007bff;
    border: none;
    color: #ffffff;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

    .btn-primary:hover {
        background-color: #0056b3;
        transform: scale(1.02);
    }

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

    .tabs-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }

    .tabs-button {
        border-bottom: 1px solid #e0e0e0;
    }
}

/* .tabs{
    border: 1px solid #cccccc;
    display: flex;
}
.tabs-sidebar{
    width: 200px;
    flex-shrink: 0;
    background: #cccccc;
}
.tabs-button{
    display: block;
    padding: 10px;
    background: #eeeeee;
    border: none;
    outline: none;
    width: 100%;
    cursor: pointer;
}
.tabs-button:active{
    background: #dddddd;
}
.tabs-button:not(:last-of-type){
    border-bottom: 1px solid #cccccc;
}
.tabs-button-active{
    font-weight: bold;
    border-right: 4px solid #009879;
    background: #dddddd;
}
.tabs-content{
    padding: 20px;
    font-size: 1rem;
    display: none;
}
.tabs-content p{
    font-size: 1.6rem !important;
}
.tabs-content p > strong{
    color: #01bacf;
}
.tabs-content-active{
    display: block;
}
.tabs-content > :first-child{
    margin-top: 0;
}
@media (max-width: 414px) {
    .tabs-sidebar{
        display: none;
    }
    .tabs{
        display: flex;
        flex-direction: column;
        border: none;
    }
    .tabs-content{
        display: block;
    }
} */
/******************************************
ACCORDION
******************************************/
/* .accordion{
    margin-bottom: 20px;
    cursor: pointer;
}
.accordion.active .accordion-heading i{
    transform: rotate(180deg);
    transition: transform 0.5s 140ms;
}
.accordion.active .accordion-content{
    display: block;
}
.accordion-heading{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: rgb(81, 169, 237);
    border-radius: 5px;
    padding: 1rem 1rem;
}
.accordion-heading h3{
    font-size: 2.3rem;
    margin: 0 !important;
    padding: 0 !important;
    color: #fbfbfb;
}
.accordion-heading i{
    font-size: 2.5rem;
    color: rgb(228, 221, 71);
}
.accordion-content{
    padding: 1rem 1rem;
    background-color: #2b3a65;
    display: none;
    animation: drop 0.5s linear backwards;
    line-height: 1.6;
    transform-origin: top;
    color: #fff;
}
@keyframes drop {
    0%{
        transform: scaleY(0);
    }
} */

.accordion {
    margin-bottom: 20px;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #1E3A8A, #3B82F6); /* Royal blue with cyan gradient */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
    border: none;
    position: relative;
    transition: all 0.4s ease;
}



.accordion-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px 30px;
    color: #FFFFFF; /* Crisp white for text */
    position: relative;
    z-index: 1;
    border: none;
    transition: background 0.4s ease;
    backdrop-filter: blur(5px);
}

    .accordion-heading:hover {
        background: linear-gradient(135deg, #1E3A8A, #7C3AED); /* Blue to violet hover */
        box-shadow: 0px 5px 20px rgba(124, 58, 237, 0.4);
    }

    .accordion-heading h3 {
        font-size: 1.6rem;
        margin: 0;
        font-weight: 500;
        letter-spacing: 1px;
        color: #FFFFFF; /* White for heading */
    }

    .accordion-heading i {
        font-size: 1.8rem;
        color: #3B82F6; /* Cyan for icons */
        transition: transform 0.6s ease, color 0.4s;
    }

.accordion.active .accordion-heading i {
    transform: rotate(180deg);
}

.accordion-content {
    padding: 20px 30px;
    background: #F3F4F6; /* Light slate gray for content */
    color: #1E3A8A; /* Deep royal blue for text */
    display: none;
    border-top: 1px solid rgba(59, 130, 246, 0.2); /* Cyan border */
    border-radius: 0 0 12px 12px;
    line-height: 1.6;
    font-size: 1rem;
    animation: slideDown 0.6s ease forwards;
    position: relative;
}

.accordion.active .accordion-content {
    display: block;
}

.accordion-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 90%;
    height: 3px;
    background: linear-gradient(to right, #7C3AED, #3B82F6); /* Violet to cyan gradient */
    transform: translateX(-50%);
    border-radius: 20px;
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover effects */
.accordion:hover .accordion-heading i {
    color: #FFFFFF;
}

.accordion-heading h3 {
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}

.accordion-heading:hover h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #7C3AED 0%, #3B82F6 100%);
    transition: width 0.5s ease;
    width: 100%;
}

.accordion-content p {
    margin: 0;
    padding-top: 15px;
    opacity: 0;
    transform: translateY(10px);
    animation: contentAppear 0.5s forwards 0.5s;
}

@keyframes contentAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/******************************************
RESPONSIVE
******************************************/

@media (max-width: 992px) {
    .p120 {
        padding-bottom: 8rem !important;
    }

    .boxed {
        margin-top: 4rem;
    }

    .blog-box,
    .testimonial,
    .stat-count {
        margin: 30px 0;
    }

    .m30 {
        margin-top: 30px;
    }

    .absolute-widget {
        background-image: none;
    }

    .sidebar {
        margin-top: 30px;
    }

    .container {
        min-width: 100% !important;
    }

    .footer .widget {
        margin: 30px 0;
    }
}

@media (max-width: 768px) {
    .shop-extra .nav-tabs > li > a,
    .shop-extra .nav-tabs > li {
        float: none;
        display: block;
        width: 100%;
        text-align: center;
    }

    .shop-extra {
        padding: 30px 10px;
    }

    .home-message p {
        font-size: 28px;
    }

    .topbar .text-left {
        text-align: center;
    }

    .authorbox img {
        float: none;
        margin: 0 0 30px !important;
        min-width: 100px;
    }

    .media-left,
    .media > .pull-left {
        display: block;
        float: none;
        margin: 0 0 30px;
        padding-right: 10px;
    }
}

@media (max-width: 468px) {
    .blog-meta h3 {
        font-size: 20px;
    }
}

@media (min-width: 992px) {
    .yamm-fw {
        position: relative;
    }

        .hassubmenu:hover > ul,
        .yamm-fw:hover > ul {
            visibility: visible;
            opacity: 1;
            top: 100%;
        }

    .hassubmenu ul,
    .navbar-nav .yamm-fw ul {
        -webkit-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
        -moz-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
        -o-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
        transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
    }

    .yamm-fw .dropdown-menu {
        min-width: 240px;
        padding: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .hassubmenu > ul,
    .yamm-fw > ul {
        position: absolute;
        top: 160%;
        visibility: hidden;
        display: block;
        opacity: 0;
    }

        .yamm-fw > ul li {
            position: relative;
        }

            .yamm-fw > ul li:hover > ul {
                visibility: visible;
                opacity: 1;
                left: 100%;
            }
}

@media (max-width: 1200px) {
    .nav > li > a {
        padding: 1em 0.7em;
    }
}

/*Fun begins*/
.tab_container {
    width: 90%;
    margin: 0 auto;
    padding-top: 0;
    position: relative;
}

input, section {
    clear: both;
    padding-top: 10px;
    display: none;
}

.tab_container label {
    font-weight: 700;
    font-size: 18px;
    display: block;
    float: left;
    width: calc(100% / var(--qt));
    padding: 1.5em;
    color: #757575;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    background: #f0f0f0;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
    display: block;
    padding: 20px;
    background: #fff;
    color: #999;
    border-bottom: 2px solid #f0f0f0;
}

.tab_container .tab-content p,
.tab_container .tab-content h3 {
    -webkit-animation: fadeInScale 0.7s ease-in-out;
    -moz-animation: fadeInScale 0.7s ease-in-out;
    animation: fadeInScale 0.7s ease-in-out;
}

.tab_container .tab-content h3 {
    text-align: center;
}

.tab_container [id^="tab"]:checked + label {
    background: #fff;
    box-shadow: inset 0 3px #0CE;
}

    .tab_container [id^="tab"]:checked + label .fa {
        color: #0CE;
    }

label .fa {
    font-size: 1.3em;
    margin: 0 0.4em 0 0;
}

/*Media query*/
@media only screen and (max-width: 900px) {
    .tab_container {
        width: 98%;
        display: flex;
        flex-direction: column;
    }

        .tab_container label {
            width: 100%; /* Make labels take full width */
            padding: 1em; /* Reduce padding */
            font-size: 16px; /* Smaller font size */
            box-sizing: border-box; /* Ensure padding doesn't affect width */
        }

        .tab_container .tab-content {
            padding: 10px; /* Reduce content padding */
        }
}


/*Content Animation*/
@keyframes fadeInScale {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.no_wrap {
    text-align: center;
    color: #0ce;
}

.link {
    text-align: center;
}
/* event cards */
.event-card {
    margin-bottom: 20px;
}

    .event-card h6 {
        font-size: 1.7rem;
        color: #01bacf;
    }

    .event-card .event-img {
        width: 100%;
        overflow: hidden;
    }

        .event-card .event-img img {
            transform: scale(1);
            transition: transform 0.5s ease-in-out;
        }

    .event-card:hover img {
        transform: scale(1.1);
    }
/* newsletter slide */
.carousel {
    position: relative;
    /* width: 100%; */
    height: 600px;
    margin: 10px;
    background-color: #2e2e2e;
}

    .carousel .carousel-item {
        z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        clip-path: circle(0% at 0 50%);
    }

        .carousel .carousel-item.active {
            clip-path: circle(150% at 0 50%);
            transition: clip-path 2s;
        }

        .carousel .carousel-item img {
            z-index: 1;
            border-radius: 5px;
            width: 100%;
            height: 100%;
        }

        .carousel .carousel-item .carousel-info {
            position: absolute;
            top: 0;
            padding: 15px 30px;
            width: 40%;
            color: #FFF;
            background: rgba(255 255 255 / 50%);
        }

            .carousel .carousel-item .carousel-info h2 {
                color: #FFF;
                font-size: 45px;
                text-transform: uppercase;
                letter-spacing: 2px;
                font-weight: 800;
                margin: 0;
            }

            .carousel .carousel-item .carousel-info a {
                color: #FFF;
                font-size: 12px !important;
                letter-spacing: 2px;
                font-weight: 800;
                text-transform: capitalize;
            }

            .carousel .carousel-item .carousel-info p {
                color: #FFF;
                background: rgba(0 0 0 / 50%);
                letter-spacing: 2px;
                font-size: 16px;
                width: 100%;
                padding: 10px;
                border-radius: 4px;
            }

    .carousel .carousel-nav {
        z-index: 2;
        position: absolute;
        display: flex;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

        .carousel .carousel-nav .btnn {
            background-color: rgba(255, 255, 255, 0.5);
            width: 15px;
            height: 15px;
            margin: 10px;
            border-radius: 50%;
            cursor: pointer;
        }

            .carousel .carousel-nav .btnn.active {
                background-color: #f3792e;
                box-shadow: 0 0 2px rgba(0 0 0 / 50%);
            }

@media (max-width: 820px) {
    .carousel {
        width: 600px;
        height: 375px;
    }

        .carousel .carousel-item .carousel-info {
            padding: 10px 25px;
        }

            .carousel .carousel-item .carousel-info h2 {
                font-size: 35px;
            }

            .carousel .carousel-item .carousel-info p {
                width: 70%;
                font-size: 15px;
            }

        .carousel .carousel-nav {
            bottom: 25px;
        }

            .carousel .carousel-nav .btnn {
                width: 10px;
                height: 10px;
                margin: 8px;
            }
}

@media (max-width: 620px) {
    .carousel {
        width: 400px;
        height: 250px;
    }

        .carousel .carousel-item .carousel-info {
            padding: 10px 20px;
        }

            .carousel .carousel-item .carousel-info h2 {
                font-size: 30px;
            }

            .carousel .carousel-item .carousel-info p {
                width: 80%;
                font-size: 13px;
            }

        .carousel .carousel-nav {
            bottom: 15px;
        }

            .carousel .carousel-nav .btnn {
                width: 8px;
                height: 8px;
                margin: 6px;
            }
}

@media (max-width: 420px) {
    .carousel {
        width: 310px;
        height: 210px;
    }

        .carousel .carousel-item .carousel-info {
            padding: 5px 10px;
            width: 80%;
        }

            .carousel .carousel-item .carousel-info h2 {
                font-size: 19px;
            }

            .carousel .carousel-item .carousel-info a {
                font-size: 10px !important;
                line-height: 1rem;
            }

            .carousel .carousel-item .carousel-info p {
                width: 100%;
                font-size: 11px;
            }

        .carousel .carousel-nav {
            bottom: 10px;
        }
}

.event-card-info {
    position: relative;
}

.ev-img {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

    .ev-img.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .ev-img > img {
        width: 100%;
        height: auto;
    }

.overlay-info {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
    bottom: -36px;
    padding: 0rem 3rem;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, bottom 0.5s ease-in-out;
}

    .overlay-info h3 {
        color: #FFF;
        margin: 0;
    }

    .overlay-info > p {
        color: #FFF;
        margin: 0;
    }

.ev-info {
    padding: 1rem;
    background-color: #ecf8ff;
}

    .ev-info h2 {
        margin: 0;
        font-size: 2.3rem;
        color: #0CE;
    }

.event-card-info:hover .overlay-info {
    opacity: 1;
    bottom: 0;
}

.give-back {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    height: auto;
    padding: 12rem 6rem;
}

    .give-back h2 {
        font-size: 4rem;
        color: #FFF;
        margin: 0;
        padding-bottom: 2rem;
    }

.gv-bk {
    padding: 1rem;
    background-color: #FFF;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: color 0.5s ease-in-out;
}

    .gv-bk::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: #a2a2a2;
        transform: translateX(-100%);
        transform-origin: left;
        z-index: -1;
        transition: transform 0.5s ease-in-out;
    }

    .gv-bk:hover {
        color: #FFF !important;
    }

        .gv-bk:hover::before {
            transform: translateX(0);
        }

.small-info-container {
    width: 100%;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    overflow: hidden;
}

.small-info {
    position: relative;
    width: calc(100% / 4 - 30px);
}

    .small-info::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: #00a7bd86;
        transition: background-color 0.5s ease-in-out;
    }

.sm-img img {
    width: 100%;
    height: auto;
}

.small-info:hover::before {
    background-color: transparent; /* Change background to transparent on hover */
    transform: scale(1);
    transition: transform 0.5s ease-in-out; /* Optional: Zoom the background slightly */
}

.small-info:hover {
    transform: scale(1.1); /* Zoom effect on the .small-info element itself */
}

.sm-title {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 1rem;
}

    .sm-title h3 {
        color: #FFF;
        font-size: 1.6rem;
        margin: 0;
    }




@media (max-width:414px) {
    .give-back {
        padding: 4rem 0;
    }

    .small-info {
        width: 100%;
    }
}

.team-card-holder {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30;
}

.team-indv {
    width: calc(100% / 4 - 30px);
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    margin-top: 30px;
}

    .team-indv:hover .for-hov {
        bottom: -150px;
    }

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

.for-hov {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.3);
    bottom: -171px;
    transition: bottom 0.5s ease-in-out;
}

    .for-hov h3 {
        color: #0fecfa;
        margin: 0;
        font-size: 1.7rem;
    }

    .for-hov p {
        color: #FFF;
        margin: 0;
        padding: 0;
        font-size: 1.3rem;
    }

    .for-hov a {
        color: #FFF;
        font-size: 1.3rem;
        transition: color 0.5s ease-in-out;
    }

        .for-hov a:hover {
            color: #0fecfa;
        }

@media (max-width:414px) {
    .dean-img img {
        width: 100%;
    }

    .team-indv {
        width: 100%;
    }
}

.course-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .course-box:hover {
        transform: scale(1.05);
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    }

.image-wrap:hover img {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.course-details {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.course-box:hover .course-details {
    transform: translateY(-10px);
    opacity: 0.95;
}

.course-footer {
    background: linear-gradient(90deg, #eaeaea, #f8f8f8);
    transition: background 0.3s ease;
}

    .course-footer:hover {
        background: linear-gradient(90deg, #f8f8f8, #eaeaea);
    }


.sticky-line-container {
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 999;
}

.sticky-line {
    width: 6px; /* Slightly wider for better visibility */
    height: 250px; /* Increased height for a more prominent design */
    background-color: #e0e0e0;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 0; /* Add padding for better spacing */
}

    .sticky-line .line-segment {
        width: 100%;
        height: 25px; /* Adjust based on your design */
        background-color: #b0b0b0;
        margin-bottom: 8px; /* Increased margin for better separation */
        border-radius: 2px;
        transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
    }

        .sticky-line .line-segment.active {
            background-color: #007bff; /* Use a vibrant blue color for active sections */
            transform: scale(1.2); /* Slightly enlarge the active segment */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Add a glowing effect */
        }

        .sticky-line .line-segment:hover {
            background-color: #007bff; /* Highlight on hover */
            cursor: pointer; /* Indicate that the segments are interactive */
        }

.carousel {
    position: relative;
}



/* Arrow styles */
.carousel-arrow {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s ease;
}

    .carousel-arrow:hover {
        background: rgba(0, 0, 0, 0.8);
    }

.left-arrow {
    left: 10px;
}

.right-arrow {
    right: 10px;
}

.video-thumbnail-container {
    position: relative;
}

.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    transition: transform 0.3s ease-in-out;
}

    .play-button-overlay:hover {
        transform: translate(-50%, -50%) scale(1.2);
    }

.custom-module {
    /*box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 15px;*/
    overflow: hidden;
}



.btn-wrapper {
    margin-top: 20px; /* Margin between videos and button */
}

    .btn-wrapper .btn {
        margin-top: 10px; /* Adds space above the button */
        padding: 12px 24px; /* Increases padding for a larger button */
        font-size: 1.2em; /* Makes the text larger */
        border-radius: 6px; /* Adds a slight rounding to the corners */
    }

@media (max-width: 576px) {
    .btn-wrapper .btn {
        margin-top: 10px; /* Optional: adjust margin for small screens */
    }
}

@media (max-width: 576px) {
    .play-button-overlay {
        font-size: 2.5rem;
    }
}

.fa-play-circle {
    color: #FF0000; /* YouTube red */
}


/*#section3 {
    padding: 0 0;
    position: relative;
    display: block;
    border: 5px solid transparent;
    border-radius: 15px;*/ /* Smooth corners for a refined look */
/*background-clip: padding-box;
    overflow: hidden;*/ /* Ensures content stays within the borders */
/*}

    #section3::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, #004080, #0056b3, #0073e6, #0099cc, #00b3b3, #339966, #66cc66);
        background-size: 400% 400%;
        z-index: -1;*/ /* Keeps it behind the content */
/*border-radius: 15px;*/ /* Same as #section3 for a seamless effect */
/*animation: borderAnimation 12s infinite linear;
    }

@keyframes borderAnimation {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

    #section3 .tagline-message {
        background-color: #ffffff;*/ /* Clean white background for the content */
/*padding: 2rem;*/ /* Spacious padding for a balanced layout */
/*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);*/ /* Subtle shadow for depth */
/*border-radius: 10px;*/ /* Rounded corners to match the overall design */
/*text-align: center;*/ /* Centered text for a clean structure */

/*}*/

#section4 .tagline-message h2 {
    font-size: 3.6rem; /* Larger, modern font size for the headline */
    color: #333; /* Dark gray for a corporate, formal look */
    font-weight: 700; /* Bolder weight for emphasis */

    margin-bottom: 1rem;
}

#section4 .breadcrumb {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center; /* Center the breadcrumb */
    font-size: 14px; /* Standard font size for a professional look */
}

    #section4 .breadcrumb li {
        color: #666; /* Muted gray for inactive breadcrumb items */
        font-weight: 500;
    }

        #section4 .breadcrumb li a {
            color: #007aff; /* Corporate blue for links */
            text-decoration: none;
        }

        #section4 .breadcrumb li.active {
            color: #333; /* Darker color for the active item */
        }

        #section4.breadcrumb li::after {
            content: "›";
            margin: 0 10px;
            color: #007aff; /* Light blue separator */
        }

        #section4 .breadcrumb li:last-child::after {
            content: ""; /* Remove the arrow after the last item */
        }

#section5 {
    padding: 3rem 0;
    position: relative;
    display: block;
    border: 5px solid transparent; /* Initial border to prevent layout shift */
    background-clip: padding-box;
}

    #section5::before {
        content: '';
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        background: linear-gradient(90deg, #ff6b6b, #f8e71c, #7ed321, #50e3c2, #007aff, #ff2d55, #ff6b6b);
        background-size: 400% 400%;
        z-index: -1; /* Position behind the content */
        border-radius: 10px; /* Optional rounded corners */
        animation: borderAnimation 10s infinite linear;
    }

@keyframes borderAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/*#section2 {
    background-color: #E0F7FA;*/ /* Light Cyan */
/*}*/
#section1 {
    background: linear-gradient(135deg, #e6f0ff, #0f4bd5); /* Light to medium blue gradient */
}

#section2 {
}

#section4 {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

#section5 {
    background: linear-gradient(135deg, #e6f0ff, #0f4bd5);
}

#section8 {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}
#section9 {
    background: linear-gradient(135deg, #e6f0ff, #0f4bd5);
}
#media-testimonials {
    background: linear-gradient(135deg, #e6f0ff, #0f4bd5);
}
#social-media-section {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}
/* Swiper Styles */
.swiper-container {
    width: 100%;
    padding: 40px 0;
}


/* Section Styling */
#section8 {
    padding: 60px 0;
    background-color: #f8f9fa;
    position: relative;
}

/* .section-title h2 {
    font-size: 2.5rem;
    color: #007bff;
    margin-bottom: 40px;
    font-weight: bold;
} */
.section-title h2 {
    font-size: 3.6rem;
    color: #333;
    margin-bottom: 30px;
    font-weight: 700;
}

/* Video Container */
.video-thumbnail-container {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

    .video-thumbnail-container img {
        display: block;
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 15px;
    }

    /* Hover Effect on Video Thumbnails */
    .video-thumbnail-container:hover {
        transform: scale(1.05);
        box-shadow: 0 25px 40px rgba(0, 0, 0, 0.25);
    }

/* Play Button Overlay */
.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 70px;
    transition: opacity 0.4s ease;
}



/* Animation - Slide In Effects */
.custom-module.wow {
    visibility: visible;
    animation-name: none;
}

    .custom-module.wow.slideInLeft {
        animation: slideInLeft 0.8s ease forwards;
    }

    .custom-module.wow.slideInUp {
        animation: slideInUp 0.8s ease forwards;
    }

    .custom-module.wow.slideInRight {
        animation: slideInRight 0.8s ease forwards;
    }

/* Button Styling */
.btn-wrapper {
    text-align: center;
    margin-top: 40px;
}

.btn-primary {
    background-color: #007bff;
    border: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    color: #fff;
    border-radius: 50px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    .btn-primary:hover {
        background-color: #0056b3;
        transform: translateY(-5px);
    }

/* Media Queries */
@media (max-width: 768px) {
    .video-thumbnail-container img {
        height: 250px;
    }
}
/* Unified Section Styling */
#media-testimonials {
    padding: 60px 0;
    background-color: #f8f9fa;
}

/* Quote Box */
.quote-box {
    position: relative;
    padding-top: 28.25%; /* 16:9 aspect ratio */
    
}

.quote-text {
    position: absolute;
    font-size: 28px; /* Adjust for your preference */
    font-weight: bold;
}

/* Video Box Styling */
.video-box {
    position: relative;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    height: 400px; /* Increase the height */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.video-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ensure iframe fills the container */
    border-radius: 20px;
}

.video-box:hover {
    transform: scale(1.03);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .quote-text {
        font-size: 1.5rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap; /* Prevent text from breaking into a new line */
        overflow: hidden; /* Hide any overflow */
        text-overflow: ellipsis; /* Add ellipsis if the text is too long */
    }

    .quote-box {
        padding-top: 50%; /* Reduce the aspect ratio for better height visibility */
    }

    .video-box {
        margin-top: 20px;
        height: 300px; /* Adjust height for smaller screens */
    }
}


.reunion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding: 30px;
    background: linear-gradient(135deg, #f0f0f0 25%, #fafafa 100%);
}

.reunion-link {
    font-weight: 700;
    font-size: 20px; /* Reduced font size for better fitting */
    color: #003366;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
    white-space: nowrap; /* Prevent line break */
}

    .reunion-link i {
        font-size: 16px;
        transition: transform 0.3s ease;
    }

.reunion-card:hover .reunion-link i {
    transform: translateX(5px); /* Adjusted for subtle movement */
}

.reunion-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px; /* Reduced padding */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    padding-left: 50px; /* Increased padding on the left */
    max-width: 100%; /* Ensure the card takes the full available width */
}

    .reunion-card::before {
        content: '';
        width: 12px; /* Adjusted size for better visibility */
        height: 12px; /* Adjusted size for better visibility */
        background-color: #003366;
        position: absolute;
        top: 25px;
        left: 20px; /* Adjusted position to align with text */
        border-radius: 50%;
        z-index: 1;
    }

    .reunion-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
/* Media Query for small screens */
@media (max-width: 768px) {
    /* Grid Layout Adjustments */
    .reunion-grid {
        grid-template-columns: 1fr; /* Single column for small screens */
        padding: 15px; /* Reduce padding to fit better */
        gap: 15px; /* Less gap between grid items */
    }

    /* Card Styling Adjustments */
    .reunion-card {
        padding: 15px; /* Reduce padding inside the card */
        padding-left: 30px; /* Less padding on the left */
        border-radius: 8px; /* Smaller border radius */
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05); /* Smaller shadow effect */
    }

        /* Adjust the card decoration */
        .reunion-card::before {
            width: 8px; /* Smaller size for the circle */
            height: 8px; /* Adjust height accordingly */
            top: 20px; /* Adjust position */
            left: 15px; /* Adjust position */
        }

    /* Reunion link adjustments */
    .reunion-link {
        font-size: 16px; /* Reduce font size for better readability on small screens */
        gap: 6px; /* Smaller gap between text and icon */
    }

        .reunion-link i {
            font-size: 14px; /* Smaller icon size */
        }

    /* Hover transition for small screens */
    .reunion-card:hover {
        transform: translateY(-4px); /* Subtle lift effect */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Slightly smaller shadow */
    }
}

/* Frequently Asked Questions */

/* Frequent Asked Qustions */

/* General Styles */

/*CSR Initiative*/
/* Page Header Section */

.page-header {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

.header-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.csr-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: white;
}

.csr-subtitle {
    font-size: 20px;
    line-height: 1.5;
}

/* Stats Row */
.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0;
    background-color: #002c7f;
    color: #fff;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
    margin: 5px;
    width: 120px;
    flex: 1;
    position: relative; /* To position the border */
}

    .stat-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 10%;
        height: 80%; /* Adjusts the line height */
        width: 1px;
        background-color: #ffffff; /* White line color */
    }

    .stat-item .icon-container {
        background-color: #ffffff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 10px;
    }

    .stat-item .fa-business {
        font-size: 12px;
        color: #002c7f;
    }

.stat-number {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 0px;
}

.stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}


@media (max-width: 576px) {

    .stats-row {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        background-color: white; /* White background for the parent container */
        padding: 0px; /* Optional: padding for the parent container */
    }
    
    .stat-item {
        width: 100%; /* Full width for each item */
        display: flex;
        align-items: center; /* Vertically center elements */
        justify-content: flex-start; /* Align items to the left */
        gap: 10px; /* Reduce gap between icon and text */
        background-color: #002c7f; /* Matches the background of the stats-row */
        padding: 10px; /* Reduce padding for tighter spacing */
        border-radius: 8px; /* Optional: Rounded edges */
        box-sizing: border-box; /* Ensure padding and borders are included in the width */
        margin-bottom: 10px; /* Add spacing between items */
    }



    

    .stat-number {
        font-size: 13px; /* Adjust for readability */
        text-align: left;
    }

    .stat-label {
        font-size: 13px; /* Adjust size for smaller screens */
        text-align: left;
    }
}

/* For screens between 576px and 768px (more compact view) */
@media (min-width: 576px) and (max-width: 768px) {
    /*.page-header {
        display: flex;
        flex-direction: column;*/ /* Stack elements vertically */
    /*align-items: center;*/ /* Center align items */
    /*position: relative;*/ /* Ensure positioning context */
    /*max-height: 400px;
    }

    .header-image {
        width: 100%;*/ /* Make the image responsive */
    /*height: 200px;
        margin-bottom: 0;
        padding-bottom: 0;
        object-fit: cover;*/ /* Cover the area without distortion */
    /*}

    .overlay-text {
        margin-top: -80px;
        
        text-align: center;*/ /* Center text alignment */
    /*width: 100%;*/ /* Make the text section take the full width */
    /*position: relative;*/ /* Ensure text positioning is relative to .page-header */
    /*background-color: #002c7f;
    }*/
    .stats-row {
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap onto the next line */
        justify-content: flex-start; /* Start items from the left */
        align-items: stretch; /* Stretch items to be equal height */
        background-color: white; /* White background for the parent container */
        padding: 0; /* Optional: padding for the parent container */
    }

    .stat-item {
        flex: 0 0 calc(50% - 10px); /* 50% width minus margin */
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
        background-color: #002c7f; /* Matches the background of the stats-row */
        padding: 15px; /* Add padding to create space inside the stat-item */
        border-radius: 8px; /* Optional: Rounded edges */
        box-sizing: border-box; /* Ensures padding and borders are included in the total width */
    }

        /* Center the last stat-item (5th) */
        .stat-item:nth-child(5) {
            margin-left: 25%;
            margin-right: 25%;
            display: flex;
            justify-content: center; /* Center the last item */
            align-items: center;
        }



    .icon-container {
        flex: 0 0 10%; /* Icon container takes 20% of the width */
        padding: 20px;
        display: flex;
        justify-content: center; /* Center the icon within the container */
        align-items: center;
    }

    .item-labdesc {
        flex: 0 0 90%; /* Remaining 80% for the text content */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .stat-number {
        font-size: 13px; /* Adjust for readability */
        text-align: left;
    }

    .stat-label {
        font-size: 13px; /* Adjust size for smaller screens */
        text-align: left;
    }
}




/* Creating Impact Through CSR Partnerships */
.csr-section {
    padding: 30px 15px;
    background-color: white
}

.csr-header {
    margin-bottom: 50px;
}

.csr-titles {
    font-size: 3.6rem;
    font-weight: bold;
    color: black;
}

.csr-subtitles {
    font-size: 18px;
    color: #555;
}

/* CSR Benefits Cards */
.csr-benefits .csr-card {
    flex: 1 1 calc(33.333% - 20px); /* 3 cards per row, adjusting for gap */
    padding: 30px;
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 100px; /* Minimum height for all cards */
    display: flex;
    flex-direction: column; /* Ensures contents are stacked vertically */
    justify-content: space-between; /* Spread out the content vertically */
}

    .csr-benefits .csr-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Add a shadow on hover */
    }

.csr-card-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.csr-card-text {
    font-size: 16px;
    color: #666;
}

/* CSR Info Section */
.csr-info {
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
}

.csr-info-text {
    font-size: 18px;
    color: #444;
    margin-bottom: 20px;
}

.csr-info-heading {
    font-size: 22px;
    color: #333;
}

.csr-list li {
    font-size: 20px;
    color: #555;
    margin-bottom: 10px;
}

/* CSR Category Cards */
.csr-categories .csr-category-card {
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    background-color: #fff;
    padding: 15px;
    transition: transform 0.3s ease;
}

    .csr-categories .csr-category-card:hover {
        transform: translateY(-10px);
    }

.csr-image-wrapper {
    margin-bottom: 0;
}

.csr-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.csr-category-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

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

    .csr-read-more:hover {
        background-color: #0056b3;
    }

/* Download Button */
.csr-download .btn-outline-primary {
    padding: 15px 30px;
    font-size: 18px;
    border-radius: 50px;
    border: 2px solid #007bff;
    color: black !important; /* Force the text color to be black */
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .csr-download .btn-outline-primary:hover {
        background-color: #007bff;
        color: #fff !important; /* Ensure text turns white on hover */
    }
/* Default styling (for larger screens) remains unchanged */

/* Adjustments for small screens */
@media (max-width: 768px) {

    /* CSR Section padding for small view */
    .csr-section {
        padding: 15px; /* Reduce padding on small screens */
    }

    /* CSR Header margin */
    .csr-header {
        margin-bottom: 30px; /* Decrease bottom margin on small screens */
    }

    /* CSR Titles */
    .csr-titles {
        font-size: 28px; /* Reduce font size for smaller screens */
    }

    /* CSR Subtitles */
    .csr-subtitles {
        font-size: 16px; /* Slightly smaller subtitle for small screens */
    }

    /* CSR Benefits Cards: make them stack vertically on small screens */
    .csr-benefits .csr-card {
        flex: 1 1 100%; /* Make each card take full width */
        margin-bottom: 20px; /* Add space between stacked cards */
    }

    /* Adjust CSR Info Section padding */
    .csr-info {
        padding: 15px; /* Reduce padding for small view */
    }

    /* CSR Info Text */
    .csr-info-text {
        font-size: 16px; /* Slightly smaller text for readability */
    }

    /* CSR Info Heading */
    .csr-info-heading {
        font-size: 20px;
    }

    /* CSR Category Cards */
    .csr-categories .csr-category-card {
        display: flex; /* Use flex to layout the image and text */
        flex-direction: row; /* Row layout for image and text */
        padding: 10px; /* Reduce padding for small view */
        align-items: center; /* Align items vertically centered */
        margin-bottom: -70px;
    }

    .csr-image-wrapper {
        flex: 0 0 120px; /* Set a fixed width for images */
        margin-right: 10px; /* Space between image and text */
        width: 100%; /* Image takes full width of the wrapper */
        height: 120px; /* Maintain aspect ratio */
        object-fit: cover; /* Cover the entire area, preserving aspect ratio */
    }

    .csr-img {
        width: 100%; /* Image takes full width of the wrapper */
        height: 100%; /* Maintain aspect ratio */
        object-fit: cover; /* Cover the entire area, preserving aspect ratio */
        border-radius: 0.25rem; /* Keep the rounded corners if needed */
    }
    /* CSR List Items */
    .csr-list li {
        font-size: 18px; /* Reduce list font size */
    }

    /* CSR Category Titles */
    .csr-category-title {
        font-size: 18px; /* Smaller titles for categories */
    }

    /* CSR Read More Button */
    .csr-read-more {
        font-size: 14px; /* Slightly smaller button text */
        padding: 8px 16px; /* Adjust padding */
    }

    /* Download Button */
    .csr-download .btn-outline-primary {
        padding: 10px 20px; /* Smaller padding for download button */
        font-size: 16px; /* Adjust font size */
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* CSR Categories */
    .csr-categories {
        display: flex;
        flex-wrap: wrap; /* Allow wrapping of cards */
        margin: -10px; /* Adjust margin to control spacing */
    }

        .csr-categories .col-md-3 {
            flex: 0 0 50%; /* Two cards per row */
            max-width: 50%; /* Ensure no more than two cards per row */
            padding: 10px; /* Add padding to create space between cards */
        }

        /* CSR Card Margin */
        .csr-categories .csr-category-card {
            display: flex; /* Use flex to layout the image and text */
            flex-direction: column; /* Column layout for image and text */
            align-items: center; /* Center align items */
            background-color: #f8f9fa; /* Light background for cards */
            border-radius: 0.25rem; /* Rounded corners */
            padding: 20px; /* Padding inside cards */
            transition: box-shadow 0.3s; /* Add transition for hover effect */
        }

            .csr-categories .csr-category-card:hover {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Shadow effect on hover */
            }

    .csr-image-wrapper {
        width: 100%; /* Image takes full width of the wrapper */
        height: 120px; /* Fixed height for images */
        overflow: hidden; /* Hide overflow */
        border-radius: 0.25rem; /* Rounded corners */
        margin-bottom: 10px; /* Space between image and title */
    }

    .csr-img {
        width: 100%; /* Image takes full width */
        height: 100%; /* Maintain aspect ratio */
        object-fit: cover; /* Cover the entire area, preserving aspect ratio */
    }

    .csr-category-title {
        font-size: 1.25rem; /* Adjust title size */
        margin: 10px 0; /* Spacing around title */
    }

    .csr-read-more {
        margin-top: auto; /* Push button to bottom */
        text-align: center; /* Center the button */
    }
}

#cs {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}
/* Swiper container styling */
/* Swiper container styling */
#cs .stories-swiper {
    position: relative;
    overflow: hidden;
    max-height: 500px;
}

#cs .swiper-button-prev::after,
#cs .swiper-button-next::after {
    display: none;
}
/* Ensure swiper-wrapper is a flex container */
#cs .swiper-wrapper {
    display: flex;
    height: 480px;
}

#cs .swiper-slide {
    flex: 0 0 calc(100% / 3); /* Each slide takes up exactly one-third of the width */
    box-sizing: border-box;
    padding: 5px; /* No padding between slides */
    border-radius: 0;
}

    

/* Image styling */
#cs .case-img {
    width: 100%;
    height: 250px; /* Set a fixed height for all images */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #cs .case-img img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures images cover the entire container without distortion */


        transition: transform 0.3s ease;
    }

#cs .swiper-slide:hover .case-img img {
    transform: scale(1.05);
}

/* Text styling */
    #cs .stories-content {
        padding: 1rem;
        background-color: #ffffff;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    #cs .stories-content:hover {
        background: linear-gradient(135deg, #e3f2fd, #90caf9); /* Gradient background on hover */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Subtle shadow effect on hover */
    }



    #cs .case-title {
        font-size: 1.8rem; /* Increased font size for the title */
        font-weight: 600;
        margin: 0.5rem 0;
        color: #333;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 8rem; /* Adjust based on line height */
    }

#cs .case-description {
    font-size: 1.1rem; /* Increased font size for the description */
    color: #666;
    font-size: 1.7rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 12rem; /* Adjust based on line height */
}

/* Button styling */
#cs .button.link {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.5rem; /* Adjusted padding for a larger button */
    background-color: #0056b3;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-weight: 600;
    border: 1px solid #004494;
    font-size: 16px; /* Ensure text size is appropriate */
    /*font-size: 16px;
    color: #fff;
    background-color: #007bff;
    border-radius: 5px;
    padding: 10px 20px;
    transition: background-color 0.3s ease;*/
}

    #cs .button.link:hover {
        background-color: #004494;
        transform: translateY(-2px);
    }



        #cs .button.link:hover .material-icons {
            color: #e0e0e0; /* Change icon color on hover */
        }

#cs .button-icon {
    margin-left: 0.5rem;
}

/* Swiper navigation styling */
#cs .swiper-navigation {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

#cs .swiper-button-prev,
#cs .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #fff;
    padding: 25px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    #cs .swiper-button-prev:hover,
    #cs .swiper-button-next:hover {
        background-color: #0056b3;
        color: #fff;
        border-radius: 5px; /* Ensure it stays square */
    }

    #cs .swiper-button-prev .material-icons,
    #cs .swiper-button-next .material-icons {
        font-size: 28px;
    }

#cs .swiper-pagination {
    bottom: 10px;
    text-align: center;
}

#cs .swiper-pagination-bullet {
    background: #0056b3;
    opacity: 0.8;
}

#cs .swiper-pagination-bullet-active {
    background: #003d7a;
    opacity: 1;
}
/* For screens below 576px */
@media (max-width: 576px) {
    #cs .swiper-slide {
        flex: 1 0 100%; /* 1 slide per view, taking full width */
        box-sizing: border-box;
    }
}

/* For screens between 577px and 768px */
@media (min-width: 577px) and (max-width: 768px) {
    #cs .swiper-slide {
        flex: 1 0 50%; /* 2 slides per view */
        box-sizing: border-box;
    }
}
/* For screens between 769px and 1024px */
/* For screens between 769px and 1024px */

/* For screens between 769px and 1024px */
@media (min-width: 769px) and (max-width: 1023px) {
    #cs .swiper-slide {
        flex: 1 0 calc(50%); /* 2 slides per view */
        box-sizing: border-box;
    }
}



/* For screens above 768px */



.csr-conclave-section {
    background-color: #ffffff; /* White background */
}


/* Corporate Section Styling */
.page-banner-section {
    padding-top: 8rem;
    position: relative;
    z-index: 1;
    background-color: #f5f7fa; /* Subtle background color */
}

.banner-content {
    position: relative;
    z-index: 2;
    border-radius: 10px;
    padding: 3rem 2rem;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.banner-half-bg {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    padding: 4rem 2rem;
    border-radius: 10px;
    overflow: hidden;
}

.banner-top-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.banner-left .heading-large {
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: capitalize;
    line-height: 1.2;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Add shadow for better readability */
}

.banner-right {
    max-width: 500px;
    background-color: rgba(0, 0, 0, 0.5); /* Darker background for the text */
    padding: 1.5rem;
    border-radius: 5px;
}

    .banner-right .banner-description p {
        font-size: 2rem;
        color: #ffffff;
        line-height: 1.5;
    }

.corporate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #0056b3;
    color: #ffffff;
    padding: 12px 24px;
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    white-space: nowrap; /* Prevent text from wrapping */
    border: none;
    position: relative;
    overflow: hidden;
}

    .corporate-btn::before {
        content: '';
        position: absolute;
        left: -100%;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg, #004494, #0066ff);
        transition: left 0.4s ease; /* Smooth transition for the gradient */
        z-index: 0; /* Ensure the gradient is behind the text */
    }

    .corporate-btn:hover::before {
        left: 0; /* Move the gradient into view on hover */
    }

    .corporate-btn:hover {
        background-color: transparent; /* Remove background color on hover */
        color: #ffffff; /* Ensure the text stays white */
        transform: scale(1.05); /* Slightly increase the size of the button */
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Add subtle shadow on hover */
    }

    .corporate-btn span {
        z-index: 1; /* Keep the button text on top of the gradient */
    }


    .corporate-btn .button-icon {
        margin-left: 8px; /* Space between text and icon */
    }

    .corporate-btn .material-icons {
        font-size: 2.8rem; /* Adjust the icon size */
        vertical-align: middle;
    }


.banner-bottom-flex {
    margin-top: 2rem;
}

.banner-img img {
    border-radius: 8px;
    width: 100%;
    height: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    .banner-top-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .banner-left .heading-large {
        font-size: 2.5rem;
    }

    .corporate-btn {
        font-size: 1rem;
        padding: 10px 20px;
    }

    .banner-right {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .banner-content {
        display: flex; /* Ensure it's a flex container */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
        text-align: center; /* Center text */
    }

    .banner-content {
        display: flex; /* Ensure it's a flex container */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
        text-align: center; /* Center text */
    }

    .banner-left {
        display: flex; /* Make .banner-left a flex container */
        justify-content: center; /* Center items horizontally */
        width: 100%; /* Ensure it takes the full width */
    }

    .heading-large {
        margin: 0; /* Remove default margins */
    }

    .banner-right .banner-description p,
    .corporate-btn {
        margin: 1rem auto; /* Center the elements and add spacing */
    }

    .banner-left .heading-large,
    .banner-right .banner-description p,
    .corporate-btn {
        margin: 1rem auto; /* Center the elements and add spacing */
    }
}
.corporate-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
}

.corporate-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header Section */
.corporate-header {
    margin-bottom: 40px;
}

.corporate-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1b1b1b;
}

.corporate-description {
    font-size: 1.1rem;
    color: #6d6d6d;
}

/* Card Section */
.corporate-cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.corporate-card-col {
    flex: 1 1 22%;
    margin-bottom: 30px;
}

.corporate-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .corporate-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

.corporate-card-image img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 5px solid #004085;
}

.donation-card-content {
    background-color: #f8f9fa; /* Default light background */
    padding: 20px;
    border-radius: 8px;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}

    .donation-card-content:hover {
        background: linear-gradient(135deg, #e3f2fd, #90caf9); /* Gradient background on hover */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Subtle shadow effect on hover */
    }

.corporate-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1b1b1b;
    margin-bottom: 10px;
}

.corporate-card-description {
    font-size: 1rem;
    color: #6d6d6d;
    margin-bottom: 20px;
}

.corporate-read-more {
    font-size: 1rem;
    color: #004085;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    transition: color 0.3s ease;
}

    .corporate-read-more:hover {
        color: #006bb6;
    }

.corporate-icon {
    margin-left: 5px;
}

/* Donate Now Button */
.corporate-donate-now {
    font-size: 1.2rem;
    background-color: #004085;
    color: #fff;
    padding: 12px 25px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

    .corporate-donate-now:hover {
        background-color: #006bb6;
    }

    .corporate-donate-now .corporate-icon {
        margin-left: 10px;
    }

/* Fade-in Animation */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .corporate-card-col {
        flex: 1 1 45%;
    }
}

@media (max-width: 768px) {
    .corporate-card-col {
        flex: 1 1 100%;
    }

    .corporate-read-more {
        font-size: 0.9rem;
    }

    .corporate-donate-now {
        font-size: 1rem;
    }
}

/* Donation Section */
#causes .cause-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 items per row */
    gap: 20px; /* Add space between the cards */
}

#causes .donation-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

#causes .donation-card-image {
    height: 200px;
    overflow: hidden;
}

    #causes .donation-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

#causes .donation-card-content {
    padding: 15px;
}

#causes .donation-card-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 8px;
}

#causes .donation-card-description {
    font-size: 1.7rem;
    color: #222;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 10rem; /* Adjust based on line height */
}


#causes .donation-read-more {
    font-size: 1.8rem;
    color: navy; /* Default text color */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    position: relative;
    padding: 5px 10px;
    background: none;
    border-radius: 4px;
    overflow: hidden; /* Ensure gradient stays within the button */
    z-index: 1;
    transition: color 0.4s ease; /* Smooth transition for text color */
}

    #causes .donation-read-more::before {
        content: '';
        position: absolute;
        left: -100%;
        top: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(120deg, #0066cc, #00ccff); /* Gradient effect */
        transition: left 0.4s ease; /* Move the gradient on hover */
        z-index: -1; /* Ensure the gradient is behind the text */
    }

    #causes .donation-read-more:hover::before {
        left: 0; /* Move the gradient into view */
    }

    #causes .donation-read-more:hover {
        color: #fff; /* Change the text color to white for better contrast */
    }

    #causes .donation-read-more span.material-symbols-sharp {
        margin-left: 8px;
        font-size: 1.3rem;
        transition: transform 0.4s ease; /* Smooth transform for the icon */
        z-index: 1; /* Keep the icon on top of the gradient */
    }

    #causes .donation-read-more:hover span.material-symbols-sharp {
        transform: translateX(8px); /* Slide the icon to the right on hover */
    }

    #causes .donation-read-more span.text {
        z-index: 1; /* Ensure the text is on top of the gradient */
        transition: transform 0.4s ease; /* Smooth transition for text movement */
    }

    #causes .donation-read-more:hover span.text {
        transform: translateX(8px); /* Move the text slightly to the right on hover */
    }


/* Responsive Design */
@media (max-width: 992px) {
    #causes .cause-cards {
        grid-template-columns: repeat(2, 1fr); /* 2 items per row for medium screens */
    }
}

@media (max-width: 576px) {
    #causes .cause-cards {
        grid-template-columns: 1fr; /* 1 item per row for small screens */
    }
}

@media (max-width: 768px) {
    .donor-card {
        width: 85%; /* Adjust width on smaller screens */
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 35px;
        height: 35px;
    }

    .swiper-container {
        padding: 0 10px;
    }
}

#content2 {
    display: block !important;
    visibility: visible !important;
}

.modal-content {
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.form-marker {
    font-weight: bold;
    text-transform: uppercase;
    color: #007bff;
}

input.form-control, select.form-control, textarea.form-control {
    border-radius: 8px;
    border: 1px solid #ced4da;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    border-radius: 5px;
    padding: 10px 20px;
}

.stay-connected-section {
    background: linear-gradient(135deg, #e6f0ff, #0f4bd5);
}


    .stay-connected-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 70%, rgba(34, 34, 34, 0.8) 100% );
        z-index: 1;
    }

.sc-legacy-info-overlay {
    position: relative;
    z-index: 2; /* Ensures the content stays above the gradient */
}

.stay-connected-section {
    padding-top: 60px;
}
/* Align the header elements in one line */
.sc-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.sc-title {
    font-size: 2.8rem; /* Larger size for emphasis */
    font-weight: 700; /* Bold for prominence */
    margin-bottom: 10px; /* Spacing between title and subtitle */
    letter-spacing: 1px; /* Slight letter spacing for better readability */
    text-transform: uppercase; /* Uppercase for a strong, authoritative feel */
    animation: fadeInUp 0.6s ease-in-out; /* Subtle animation for dynamic entry */
}

.sc-subtitle {
    font-size: 1.6rem; /* Slightly smaller than the title */
    font-weight: 700; /* Normal weight to balance the bold title */
    opacity: 1; /* Fully opaque for strong visibility */
    margin-bottom: 0; /* No extra space after the subtitle */
    color: #000; /* Black color for visibility */
    animation: fadeIn 1s ease-in-out 0.2s; /* Fade in after the title */
}

.sc-info-title {
    color: #ffffff; /* Pure white text for better contrast */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Adds a subtle shadow to make text stand out */
    font-size: 3.6rem;
    line-height: 1.3;
    font-weight: 700;
    position: relative;
    z-index: 2; /* Ensure it's layered above background */
}

/* For Image and Text */
.sc-image-text-flex {
    display: flex;
    flex-direction: column; /* Ensure column layout */
    align-items: center;
}

.sc-img {
    position: relative;
    width: 1150px;
    max-width: 1150px; /* Adjust image width */
}

.sc-legacy-info-overlay {
    position: absolute;
    bottom: 80px;
    left: 20px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 8px;
}

/* Adjust Text content section below the image */
/* Enhance text section with modern styling */
.sc-page-text {
    width: 1150px;
    max-width: 1150px;
    background-color: #f4f4f4; /* Light warm gray */
    padding: 30px;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: #1a1a1a; /* Darker gray for better text visibility */
    text-align: justify;
    transition: background-color 0.3s ease; /* Smooth color change on hover */
}


    .sc-page-text:hover {
        background-color: #eaeaea; /* Lighter hover effect */
    }


    .sc-page-text p {
        margin-bottom: 20px; /* Space between paragraphs */
    }

        .sc-page-text p:last-child {
            margin-bottom: 0; /* Remove margin from the last paragraph */
        }


/* Ensure button looks good */
.sc-button {
    display: inline-flex;
    align-items: center;
    color: white;
    background-color: #0056b3;
    padding: 10px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

    .sc-button:hover {
        background-color: #003f7f;
    }

.material-symbols-sharp {
    font-size: 10px;
    margin-left: 8px;
}
/* Media Query for small screens */
@media (max-width: 768px) {
    .stay-connected-section {
        padding-top: 80px; /* Reduce padding on small screens */
        padding-bottom: 30px; /* Add padding to bottom */
    }

    /* Flex container for header elements */
    .sc-header-flex {
        flex-direction: column; /* Stack title and subtitle vertically */
        align-items: center; /* Center elements horizontally */
    }

    /* Title styling for smaller screens */
    .sc-title {
        font-size: 2rem; /* Slightly smaller font size */
        text-align: center; /* Center align title */
    }

    /* Subtitle styling */
    .sc-subtitle {
        font-size: 1.2rem; /* Smaller subtitle font size */
        text-align: center; /* Center align subtitle */
    }

    /* Image and text container adjustments */
    .sc-image-text-flex {
        width: 100%; /* Make sure the container is responsive */
        max-width: 100%; /* Ensure full width */
        padding: 0 15px; /* Add padding for smaller screens */
    }

    /* Image width */
    .sc-img {
        width: 100%; /* Set image width to full on small screens */
        max-width: 100%; /* Ensure image doesn't overflow */
    }

    /* Info overlay on image */
    .sc-legacy-info-overlay {
        bottom: 20px; /* Reduce bottom space for smaller view */
        left: 10px; /* Reduce left space */
        padding: 15px; /* Smaller padding */
        font-size: 1rem; /* Smaller text size */
    }

    /* Text content section */
    .sc-page-text {
        width: 100%; /* Full width text section on mobile */
        max-width: 100%; /* Ensure it doesn't overflow */
        padding: 20px; /* Reduce padding for smaller screens */
        font-size: 0.9rem; /* Slightly smaller font size */
    }

        /* Paragraph margins for smaller view */
        .sc-page-text p {
            margin-bottom: 15px; /* Less margin between paragraphs */
        }

    /* Button adjustments */
    .sc-button {
        padding: 8px; /* Reduce padding on small screens */
        font-size: 0.9rem; /* Smaller font size for buttons */
    }

    /* Icon inside button */
    .material-symbols-sharp {
        font-size: 8px; /* Smaller icon size */
        margin-left: 5px; /* Reduce margin between text and icon */
    }
}

#staying-in-touch-section {
    background: #fff; /* White background for the section */
    padding: 30px 0;
}

    #staying-in-touch-section .tagline-message {
        margin-bottom: 40px;
    }

    #staying-in-touch-section .page-title h2 {
        font-size: 3.6rem;
        font-weight: 700;
        color: black; /* Dark text for better readability */
    }

    #staying-in-touch-section .breadcrumb {
        background-color: transparent;
        font-size: 14px;
        color: #666;
    }

        #staying-in-touch-section .breadcrumb a {
            color: #0f4bd5;
            text-decoration: none;
        }

    #staying-in-touch-section .boxed {
        background-color: #fff;
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    #staying-in-touch-section .custom-module {
        padding-left: 40px;
    }

    #staying-in-touch-section .head-hilight {
        font-size: 32px;
        font-weight: 700;
        color: black;
        margin-bottom: 20px;
        position: relative;
    }

        /*#staying-in-touch-section .head-hilight::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 4px;
            background-color: #0f4bd5;
            left: 0;
            bottom: -5px;
        }*/
/* Media Query for Small Screens */
@media (max-width: 768px) {
    #staying-in-touch-section {
        padding: 20px 10px; /* Reduce padding for smaller screens */
    }

        #staying-in-touch-section .page-title h3 {
            font-size: 28px; /* Reduce font size for better fit */
            text-align: center; /* Center the title */
        }

        #staying-in-touch-section .tagline-message {
            margin-bottom: 20px; /* Reduce bottom margin */
            text-align: center; /* Center the tagline */
        }

        #staying-in-touch-section .breadcrumb {
            font-size: 12px; /* Smaller breadcrumb font size */
        }

        #staying-in-touch-section .boxed {
            padding: 10px; /* Reduce padding in the boxed area */
            border-radius: 8px; /* Smaller border radius */
        }

        #staying-in-touch-section .head-hilight {
            font-size: 24px; /* Reduce font size for headings */
            margin-bottom: 15px; /* Reduce bottom margin */
        }
}

/* Base Layout */
/* Background and Container Styles */
#legacy-project {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

    #legacy-project .legacy-projects-section {
        background: linear-gradient(to right, #1e3a7b, #2b78b8);
        padding: 50px 0;
    }

    #legacy-project .legacy-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    /* Section Header Styles */
    #legacy-project .section-header {
        margin-bottom: 30px;
    }

    #legacy-project .section-title {
        font-size: 3.6rem;
        font-weight: 700;
        color: black;
    }

    #legacy-project .section-description {
        font-size: 14px;
        font-weight: 700;
        color: black;
    }

    /* Project Link and Image Styles */
    #legacy-project .project-link {
        position: relative;
        display: block;
    }

    #legacy-project .project-image img {
        width: 100%;
        height: auto;
        display: block;
    }

    #legacy-project .project-caption {
        position: absolute;
        bottom: 20px;
        left: 20px;
        font-size: 30px;
        font-weight: bold;
        color: white;
    }

    /* Swiper for Slider */
    #legacy-project .project-slider-container {
        display: flex;
        justify-content: space-between;
        padding-top: 40px;
    }

    /* Flex Row */
    #legacy-project .f-row {
        display: flex; /* Aligns the children side by side */
        flex-wrap: wrap; /* Ensure that items wrap if screen size is smaller */
        margin: 0 -10px; /* Adjust margin between items */
        object-fit: cover;
        width: 100%;
        /* Define a fixed height or use responsive settings */
    }

    #legacy-project .w50 {
        width: 50%;
        padding: 0 10px; /* Padding for spacing */
        box-sizing: border-box; /* Ensure padding is counted in width */
    }

    /* Project Details and Image Slider */
    #legacy-project .project-details {
        max-width: 900px; /* Wider for a corporate look */
        padding: 2rem;
        background: #ffffff; /* White background */
        border-radius: 10px; /* Rounded corners */
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    }

    #legacy-project .project-featured-title {
        font-size: 2.6rem;
        font-weight: 700; /* Bold title */
        color: black; /* Dark blue-gray color */
        margin-bottom: 0.5rem;
    }

    #legacy-project .project-description {
        font-size: 2rem;
        color: darkslategrey; /* Soft gray for description */
        margin-bottom: 1.5rem;
        font-weight: 700;
    }

    #legacy-project .swiper-solutions {
        display: flex;
        flex-direction: column;
        gap: 1.5rem; /* Space between projects */
    }

    #legacy-project .sol-text {
        background: #ecf0f1; /* Light gray background */
        border-radius: 8px; /* Rounded corners */
        padding: 1.5rem; /* Padding */
        transition: all 0.3s ease; /* Smooth transition */
        position: relative; /* For the icon positioning */
        cursor: pointer; /* Pointer cursor on hover */
    }

    #legacy-project .sol-wrap {
        display: flex;
        align-items: center; /* Center items vertically */
    }

        #legacy-project .sol-wrap h4 {
            font-size: 2.4rem;
        }

    #legacy-project .sol-title {
        flex-grow: 1; /* Take available space */
        font-weight: 500; /* Normal font weight */
        font-size: 1.25rem; /* Slightly larger font */
        color: #34495e; /* Darker text color */
    }

    #legacy-project .sol-icon {
        margin-left: 1rem; /* Space between title and icon */
        color: #2980b9; /* Blue icon color */
        font-size: 24px; /* Icon size */
    }

    #legacy-project .sol-details {
        display: block; /* Change to block to allow height transition */
        
        max-height: none; /* Remove height restriction */
        opacity: 1; /* Fully visible */
        transition: none; /* Remove transitions if not needed */
        
        color: darkslategrey;
        font-size: 2rem;
    }


    #legacy-project .sol-text.active .sol-details {
        display: block; /* Show details for active project */
    }



    #legacy-project .sol-wrap.active .sol-details {
        display: block;
    }

    #legacy-project .sol-wrap.active + .sol-details {
        display: block; /* Show when the associated sol-wrap is active */
    }

    /* Read More Button */


    /* Swiper Image Slider */
    #legacy-project .swiper-slide {
        position: relative;
        max-height: 350px; /* Limit the height of each slide */
    }

        #legacy-project .swiper-slide img {
            width: 100%;
            height: 350px; /* Set a fixed height for all images */
            object-fit: cover; /* Ensures the images maintain aspect ratio and cover the area */
            display: block;
        }

    /* Swiper Image Slider */
    #legacy-project .swiper-slide {
        position: relative;
    }



    #legacy-project .sol-details.active {
        max-height: 200px; /* Set a maximum height that fits your content */
        opacity: 1; /* Fully visible when active */
    }

@media (max-width: 768px) {
    /* Swiper Image Slider */
    #legacy-project .swiper-slide {
        max-height: none; /* Remove max height to allow images to scale */
    }

        #legacy-project .swiper-slide img {
            width: 100%; /* Make images take full width */
            height: auto; /* Allow height to scale naturally */
            object-fit: cover; /* Maintain aspect ratio */
        }

    /* Flex Row Adjustments */
    #legacy-project .f-row {
        flex-direction: column; /* Stack items vertically on small screens */
        align-items: center; /* Center align items */
    }

    #legacy-project .w50 {
        width: 100%; /* Make items full width on small screens */
        padding: 0; /* Remove padding for better fitting */
    }

    /* Section Header */
    #legacy-project .section-header {
        margin-bottom: 15px; /* Reduce spacing */
    }

    #legacy-project .section-title {
        font-size: 24px; /* Smaller title size */
    }

    #legacy-project .section-description {
        font-size: 12px; /* Smaller description size */
    }

    /* Project Details */
    #legacy-project .project-details {
        padding: 1rem; /* Reduce padding */
    }

    #legacy-project .project-featured-title {
        font-size: 1.8rem; /* Smaller title size */
    }

    #legacy-project .project-description {
        font-size: 1.5rem; /* Smaller description size */
    }

    /* Sol-wrap */
    #legacy-project .sol-wrap h4 {
        font-size: 1.8rem; /* Smaller heading size */
    }

    #legacy-project .sol-text.active .sol-details {
        font-size: 1.5rem; /* Adjust font size for active details */
    }

    /* Read More Button */
    #legacy-project .sol-wrap.active + .sol-details {
        font-size: 1rem; /* Adjust button size */
    }
}

/* General styling for the section */
#batch-legacy {
    background: linear-gradient(135deg, #e6f0ff, #0f4bd5);
}

    #batch-legacy .legacy-projects-section {
        padding: 60px 0;
        background-color: #f4f4f9; /* Light corporate background */
    }

    /* Centering and spacing for the header */
    #batch-legacy .section-header {
        text-align: center;
        margin-bottom: 40px;
    }

        /* Header text styling */
        #batch-legacy .section-header .heading_48_bold {
            font-size: 3.6rem;
            font-weight: 700;
            color: black; /* Deep corporate blue */
            margin-bottom: 15px;
        }

        #batch-legacy .section-header .text_24_regular {
            font-size: 1.2rem;
            line-height: 1.6;
            color: black; /* Dark gray for readability */
            margin-bottom: 30px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

    /* Filter container styling */
    #batch-legacy .filter-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

    #batch-legacy .input-wrapper {
        position: relative;
        display: inline-block;
    }

    #batch-legacy .input-icon {
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        font-size: 24px;
        color: #777;
    }

    #batch-legacy .custom-input {
        padding: 10px 40px 10px 45px; /* Spacing for icon */
        font-size: 1rem;
        border: 2px solid #003d7a; /* Corporate blue border */
        border-radius: 8px;
        color: #333;
        background-color: #fff;
        transition: border-color 0.3s ease;
    }

        #batch-legacy .custom-input:focus {
            outline: none;
            border-color: #0056b3; /* Focus color */
        }



    #batch-legacy .swiper-wrapper {
        display: flex;
        max-height: 305px;
    }

    #batch-legacy .swiper-slide {
        flex: 1 0 auto; /* Three slides visible */
        padding: 0 10px;
        box-sizing: border-box;
        border-radius: 10px;
        transition: transform 0.3s ease;
    }

    #batch-legacy .legacy-slide:hover {
        transform: scale(1.05);
    }

    #batch-legacy .legacy-image {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
    }

        #batch-legacy .legacy-image img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 8px;
            transition: transform 0.3s ease;
        }

    #batch-legacy .legacy-slide:hover img {
        transform: scale(1.1);
    }

    #batch-legacy .project-content {
        position: absolute;
        bottom: 20px;
        left: 20px;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    #batch-legacy .proj-heading {
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 10px;
        color: #fff;
    }

    #batch-legacy .proj-link {
        display: flex;
        align-items: center;
        background-color: #0056b3;
        color: #fff;
        padding: 10px 20px;
        border-radius: 5px;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }

        #batch-legacy .proj-link:hover {
            background-color: #0056b3;
        }

        #batch-legacy .proj-link .material-icons {
            margin-left: 10px;
        }

    #batch-legacy .swiper-button-next,
    #batch-legacy .swiper-button-prev {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background: #fff;
        padding: 25px;
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        #batch-legacy .swiper-button-prev::after,
        #batch-legacy .swiper-button-next::after {
            display: none;
        }

        #batch-legacy .swiper-button-next:hover,
        #batch-legacy .swiper-button-prev:hover {
            background-color: #0056b3;
            color: #fff;
            border-radius: 5px; /* Ensure it stays square */
        }

@media (max-width: 768px) {
    #batch-legacy .swiper-slide {
        flex: 1 0 calc(50% - 15px); /* Adjusting to show two slides correctly */
        padding: 0 5px; /* Reduce padding */
        height: auto; /* Allow the height to adjust automatically */
    }
}

@media (max-width: 480px) {
    /* Ensure Swiper slide takes full width and adjusts height */
    #batch-legacy .swiper-slide {
        flex: 1 0 100%; /* Full width for mobile */
        padding: 0 5px; /* Reduce padding */
        height: auto; /* Allow the height to adjust automatically */
    }

    /* Make image responsive */
    #batch-legacy .legacy-image img {
        width: 100%; /* Ensure image takes full width */
        height: auto; /* Make height auto to keep the aspect ratio */
        object-fit: cover; /* Ensure image fills the container without distortion */
    }

    /* Adjust the height of the swiper-wrapper to fit better */
    #batch-legacy .swiper-wrapper {
        max-height: 250px; /* Remove fixed height to allow it to adjust */
    }

    /* Responsive content within slides */
    #batch-legacy .project-content {
        bottom: 10px; /* Adjust the bottom spacing */
        left: 10px; /* Align content better on smaller screens */
        width: auto; /* Allow content to scale automatically */
    }

    /* Smaller font size for project headings */
    #batch-legacy .proj-heading {
        font-size: 1.4rem; /* Smaller font size */
    }

    /* Adjust font size and padding for the links */
    #batch-legacy .proj-link {
        padding: 8px 16px; /* Reduce padding for small screens */
    }

    /* Make sure buttons are smaller on small screens */
    #batch-legacy .swiper-button-next,
    #batch-legacy .swiper-button-prev {
        padding: 15px; /* Smaller padding for buttons */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Lighter shadow */
    }

    /* Adjust section header text */
    #batch-legacy .section-header .heading_48_bold {
        font-size: 28px; /* Reduce size */
    }

    /* Adjust content font size for smaller screens */
    #batch-legacy .section-header .text_24_regular {
        font-size: 1rem; /* Smaller size for readability */
    }
}

#awards {
    background: linear-gradient(135deg, #e6f0ff, #0f4bd5);
    padding-top: 140px !important;
}

    #awards .f-row {
        display: flex;
        flex-wrap: nowrap; /* Ensure the items do not wrap */
        align-items: stretch; /* Stretch items to fill the container's height */
        
    }

    /* Swiper container */
    #awards .swiper-container-1 {
        height: 410px; /* Adjust as needed */
        overflow: hidden;
        width: 600px; /* Fixed width for the swiper container */
        border-radius: 10px; /* Rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    }




    #awards .swiper-container-2 {
        height: 410px; /* Adjust as needed */
        overflow: hidden;
        width: 600px; /* Fixed width for the swiper container */
        border-radius: 10px; /* Rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    }

    /* Swiper slide style */
    #awards .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column; /* Stack image and text vertically */
        height: 100px;
        background: #f5f5f5; /* Light background for better visibility */
        border-radius: 10px; /* Rounded corners for slides */
        padding: 10px; /* Padding around the content */
        box-sizing: border-box; /* Include padding and border in the element’s total width and height */
        margin: 0; /* Ensure no extra margin */
    }

    /* Leader box styling */
    #awards .leader-box {
        text-align: center;
        padding: 10px;
    }

    /* Leader image styling */
    #awards .leader-img img {
        width: 250px; /* Full width of the container */
        height: 250px; /* Fixed height for all images */
        object-fit: cover; /* Ensure image covers the container without distortion */
        border-radius: 5px; /* Slightly rounded corners for images */
        margin-bottom: 10px; /* Space between image and text */
    }

    #awards .leaders {
        font-weight: bold; /* Makes the text bold */
        color: #333; /* Darker color for better readability */
        font-size: 1.2em; /* Optional: Increase font size for better emphasis */
        text-transform: uppercase; /* Optional: Capitalize text for emphasis */
        margin: 0; /* Optional: Adjust margin if needed */
        padding: 0; /* Optional: Adjust padding if needed */
    }

    /* Ensuring the swiper slides are stacked vertically */
    #awards .swiper-wrapper {
        display: flex;
        flex-direction: column;
    }




    #awards .info-container {
        padding: 20px; /* Increase padding for a more spacious look */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center content vertically */
        width: calc(100% - 320px); /* Adjust width to fit remaining space */
        background-color: #ffffff; /* Clean background color */
        border: 2px solid #007bff; /* Border to highlight the section */
        border-radius: 12px; /* More rounded corners */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
        height: 410px;
    }

        /* Header and paragraph styling in the info container */
        #awards .info-container .section-header {
            margin-bottom: 20px;
            font-weight: bold; /* Bold header for prominence */
        }

        #awards .info-container h2 {
            font-size: 3.2rem; /* Larger font size for better visibility */
            margin-bottom: 15px;
            color: #333; /* Dark text color for contrast */
            font-weight: 700; /* Bold text for emphasis */
        }

        #awards .info-container p {
            font-size: 2rem;
            line-height: 1.8;
            margin-bottom: 25px;
            color: #555;
            font-weight: 400;
            max-height: 200px; /* Limit the height */
            overflow-y: auto; /* Allow vertical scrolling */
            scrollbar-width: none; /* Hide scrollbar in Firefox */
            -ms-overflow-style: none; /* Hide scrollbar in Internet Explorer and Edge */
        }

            #awards .info-container p::-webkit-scrollbar {
                display: none; /* Hide scrollbar in Chrome, Safari, and other WebKit browsers */
            }



        #awards .info-container .btn {
            display: inline-flex;
            align-items: center;
            margin-top: 10px; /* Adds space above the button */
            padding: 12px 24px; /* Increases padding for a larger button */
            font-size: 1.2em; /* Makes the text larger */
            border-radius: 6px; /* Adds a slight rounding to the corners */
        }

    #awards .swiper-slide {
        cursor: pointer; /* Make the cursor interactive */
    }

        #awards .swiper-slide:hover {
            cursor: url('custom-cursor.png'), auto; /* Change cursor on hover */
        }

    #awards .info-container .button:hover {
        background-color: #0056b3; /* Darker shade on hover */
        transform: scale(1.05); /* Slightly scale up on hover */
    }

    #awards .swiper-slide::before {
        background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
        z-index: -2;
    }

    #awards .info-container .button-icon {
        margin-left: 8px; /* Space between text and icon */
    }


/* Media query for small screens */
.swiper-contain {
    display: flex;
    max-width: 650px;
    flex-direction: row;
     /* Increase padding for a more spacious look */
    
    
}

/* Media query for small screens */
@media (max-width: 768px) {
    #awards .f-row {
        flex-direction: column; /* Stack elements vertically */
        
    }

    .swiper-contain {
        display: flex;
        flex-direction: row;
        
    }
    /* Ensure info-container is at the top */
    #awards .info-container {
        width: 100%; /* Full width for the info container */
        height: auto; /* Adjust height for content */
        padding: 15px; /* Adjust padding for smaller screens */
        order: -1; /* Move the info container above the swiper containers */
    }

        #awards .info-container h2 {
            font-size: 2.4rem; /* Smaller font size for headers */
        }

        #awards .info-container p {
            font-size: 1.5rem; /* Smaller font size for body text */
        }

        #awards .info-container .button {
            font-size: 1rem; /* Smaller button font size */
            padding: 10px 20px; /* Adjust button padding */
        }
   
    #awards .swiper-container-1 {
        
        height: 250px;
    }
    #awards .swiper-slide .col-md-6 {
        display: inline-block;
        width: 45%; /* Ensure side-by-side */
        
        vertical-align: top; /* Align the columns to the top */
    }

    /* Adjust image and text sizing */
    #awards .leader-img img {
        width: 100%; /* Smaller images */
        height: 180px; /* Fixed height for images */
    }

    #awards .leaders {
        font-size: 1em; /* Smaller font size for leader names */
    }
    /* Adjust the layout of the Swiper containers */

}
@media (max-width: 480px) {
    #awards .swiper-slide .col-md-6 {
        display: inline-block;
        width: 48%; /* Ensure side-by-side */
        margin: 5px auto;
        vertical-align: top; /* Align the columns to the top */
    }
}





@media (min-width: 768px) and (max-width: 1024px) {
    #awards .f-row {
        flex-direction: column; /* Stack elements vertically */
    }

    .swiper-contain {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically (if needed) */
        display: flex;
        flex-direction: row;
    }
    /* Ensure info-container is at the top */
    #awards .info-container {
        width: 100%; /* Full width for the info container */
        height: auto; /* Adjust height for content */
        padding: 15px; /* Adjust padding for smaller screens */
        order: -1; /* Move the info container above the swiper containers */
    }

        #awards .info-container h2 {
            font-size: 2.4rem; /* Smaller font size for headers */
        }

        #awards .info-container p {
            font-size: 1.5rem; /* Smaller font size for body text */
        }

        #awards .info-container .button {
            font-size: 1rem; /* Smaller button font size */
            padding: 10px 20px; /* Adjust button padding */
        }

    #awards .swiper-container-1 {
        height: 250px;
        width: 400px;
        
    }

    #awards .swiper-slide .col-md-6 {
        display: inline-block;
        width: 50%; /* Ensure side-by-side */
        
        vertical-align: top; /* Align the columns to the top */
    }

    /* Adjust image and text sizing */
    #awards .leader-img img {
        width: 100%; /* Smaller images */
        height: 180px; /* Fixed height for images */
    }

    #awards .leaders {
        font-size: 1em; /* Smaller font size for leader names */
    }
}




/* Section Background */
#chapters .stories-swiper {
    position: relative;
    overflow: hidden;
    max-height: 500px;
}

#chapters .swiper-wrapper {
    display: flex;
    height: 480px;
}

/* Slide styling */
#chapters .swiper-slide {
    flex: 1 0 auto;
    box-sizing: border-box;
    border-radius: 0;
    transition: transform 0.3s ease; /* Smooth transition for hover effects */
    padding: 5px;
}

   
/* Image styling */
#chapters .story-image {
    width: 100%;
    height: 250px;
    overflow: hidden; /* Ensure images are contained */
    display: flex;
    justify-content: center;
    align-items: center;
}

    #chapters .story-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
        
    }

#chapters .swiper-slide:hover .story-image img {
    transform: scale(1.05); /* Zoom effect on hover */
}

/* Text styling */
#chapters .story-content {
    padding: 1rem;
    background-color: #ffffff;
}

    #chapters .story-content:hover {
        background: linear-gradient(135deg, #e3f2fd, #90caf9); /* Gradient background on hover */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Subtle shadow effect */
    }


#chapters .story-title {
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Restrict to 2 lines */
    -webkit-box-orient: vertical;
    max-height: 2.8em;
}

#chapters .story-description {
    font-size: 1em;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em;
    max-height: 4.2em; /* Restrict to 3 lines of text */
}

/* Donation Card */
#chapters .donation-card-description {
    font-size: 1.7rem;
    color: #222;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 10rem; /* Adjust based on line height */
}

/* Donation Button */
#chapters .donation-read-more {
    font-size: 1.8rem;
    color: navy; /* Default text color */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    position: relative;
    padding: 5px 10px;
    background: none;
    border-radius: 4px;
    z-index: 1;
    transition: color 0.4s ease; /* Smooth transition for text color */
}

    #chapters .donation-read-more::before {
        content: '';
        position: absolute;
        left: -100%;
        top: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(120deg, #0066cc, #00ccff); /* Gradient effect */
        transition: left 0.4s ease;
        z-index: -1;
    }

    #chapters .donation-read-more:hover::before {
        left: 0; /* Show gradient on hover */
    }

    #chapters .donation-read-more:hover {
        color: #fff; /* Change text color to white on hover */
    }

    #chapters .donation-read-more span.material-symbols-sharp {
        margin-left: 8px;
        font-size: 1.3rem;
        transition: transform 0.4s ease; /* Smooth icon transform */
        z-index: 1;
    }

    #chapters .donation-read-more:hover span.material-symbols-sharp {
        transform: translateX(8px); /* Slide icon to the right on hover */
    }

    #chapters .donation-read-more span.text {
        z-index: 1;
        transition: transform 0.4s ease; /* Smooth text movement */
    }

    #chapters .donation-read-more:hover span.text {
        transform: translateX(8px); /* Move text to the right on hover */
    }

/* Button styling */
#chapters .button.link {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.2rem;
    background-color: #0056b3;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-weight: 600;
    font-size: 1rem;
    border: none;
}

    #chapters .button.link:hover {
        background-color: #003d7a;
        transform: translateY(-2px); /* Subtle hover movement */
    }

    #chapters .button.link .material-icons {
        margin-left: 0.5rem;
        font-size: 1.2rem;
    }
/* Updated Swiper pagination styling */



/* Swiper Navigation Arrows */
#chapters .swiper-button-prev,
#chapters .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #fff;
    padding: 25px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    #chapters .swiper-button-prev span,
    #chapters .swiper-button-next span {
        font-size: 24px;
        color: #333;
    }

#chapters .swiper-button-prev {
    left: 0;
}

#chapters .swiper-button-next {
    right: 0;
}

    /* Hide default arrows */
    #chapters .swiper-button-prev::after,
    #chapters .swiper-button-next::after {
        display: none;
    }

    #chapters .swiper-button-prev:hover,
    #chapters .swiper-button-next:hover {
        background-color: #0056b3;
        color: #fff;
        border-radius: 5px;
    }

        #chapters .swiper-button-prev:hover span,
        #chapters .swiper-button-next:hover span {
            color: #fff;
        }

/* Swiper pagination styling */
#chapters .swiper-pagination {
    
    text-align: center;
    top: 95%;
}

#chapters .swiper-pagination-bullet {
    background: #0056b3;
    opacity: 0.8;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

#chapters .swiper-pagination-bullet-active {
    background: #003d7a;
    opacity: 1;
}

/* Slide hover title effect */
#chapters .swiper-slide:hover .story-title {
    color: #0056b3;
    text-shadow: 1px 1px 5px rgba(0, 85, 179, 0.4); /* Subtle shadow for depth */
    transform: scale(1.05); /* Slight increase in size */
}

/* Responsive Design */
@media (max-width: 768px) {
    #chapters .swiper-slide {
        flex-direction: column;
    }
}










/* General Styles */
/* General Styles */
#comm {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    padding: 40px 0;
    display: flex; /* Make #comm a flex container */
}

    #comm .communities-wrapper {
        display: flex;
        width: 100%; /* Ensure full width */
    }

    #comm .info-section {
        width: 30%; /* Fixed width for info section */
        padding: 20px;
        background: white; /* Ensure background color */
        height: auto; /* Adjust height based on content */
        position: sticky;
        top: var(--header-height);
    }

    #comm .images-section {
        width: 70%; /* Remaining width for images */
        padding: 20px;
        display: grid; /* Use grid for layout */
        grid-template-columns: repeat(2, 1fr); /* Two cards per row */
        gap: 20px; /* Space between cards */
        overflow-y: auto; /* Enable vertical scrolling for images */
        max-height: calc(100vh - 140px); /* Max height minus the top section */
    }

/* Optional: To enable scrolling without a visible scrollbar */


.images-section::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

#comm .community-card {
    opacity: 1; /* Ensure visibility */
}

#comm .community-link {
    text-decoration: none;
    color: inherit;
}

#comm .community-image img {
    width: 100%;
    height: 300px !important; /* Ensures image maintains aspect ratio */
    display: block; /* Ensures there's no gap below images */
}

#comm .community-details {
    padding: 15px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#comm .community-title {
    font-size: 2.5rem !important;
    font-weight: bold;
}

#comm .community-text {
    font-size: 1.6rem !important;
    color: #555;
    overflow-y: auto;
}

#comm .community-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition */
}

    #comm .community-button:hover {
        background-color: #0056b3; /* Darker shade on hover */
        transform: translateY(-2px); /* Slight lift effect */
    }

/* Optional: To enable scrolling without a visible scrollbar */


.images-section::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}


#comm .images-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two cards per row */
    gap: 20px; /* Space between cards */
}

#comm .community-card {
    opacity: 1; /* Ensure visibility */
}

#comm .community-link {
    text-decoration: none;
    color: inherit;
}

#comm .section-title {
    font-size: 3.2rem;
    font-weight: bold;
}

#comm .section-description {
    font-size: 2rem;
    line-height: 1.8;
    margin-bottom: 25px;
    color: #555;
    font-weight: 400;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin; /* For Firefox: makes the scrollbar thinner */
    scrollbar-color: transparent transparent; /* Hides scrollbar by default */
}

    /* For Webkit browsers (Chrome, Safari) */
    #comm .section-description::-webkit-scrollbar {
        width: 8px; /* Width of the scrollbar */
    }

    #comm .section-description::-webkit-scrollbar-track {
        background: transparent; /* Background of the scrollbar track */
    }

    #comm .section-description::-webkit-scrollbar-thumb {
        background: #888; /* Color of the scrollbar thumb */
        border-radius: 4px; /* Rounded edges for the scrollbar thumb */
    }

    /* Show the scrollbar when scrolling */
    #comm .section-description:hover::-webkit-scrollbar-thumb {
        background: #555; /* Darker color when hovered */
    }

/*#comm .community-text {
    
    max-height: 60px;*/ /* Limit height */
/*overflow-y: auto;*/ /* Allow scrolling if text is too long */
/*}*/


#comm .community-image img {
    width: 100%;
    height: auto; /* Ensures image maintains aspect ratio */
    display: block; /* Ensures there's no gap below images */
}

#comm .community-details {
    padding: 15px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#comm .community-title {
    font-size: 1.5rem;
    font-weight: bold;
}

#comm .community-text {
    font-size: 1rem;
    color: #555;
}

#comm .community-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#comm .community-image {
    opacity: 0;
    transform: translateX(-80%); /* Start off slightly below */
    transition: opacity 0.8s ease, transform 0.8s ease; /* Transition for visibility effect */
}

    #comm .community-image.visible {
        opacity: 1; /* Fully visible */
        transform: translateX(0); /* Move to original position */
    }

.community-details {
    opacity: 0;
    transform: translateX(-50%); /* Start slightly off to the left */
    transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s; /* Delay for the details */
}

    .community-details.visible {
        opacity: 1; /* Fully visible */
        transform: translateX(0); /* Move to original position */
    }
/* Advanced and Polished Design Enhancements */
/* General Section Title Styling */
#comm .section-title {
    font-size: 3.2rem;
    font-weight: bold;
    color: #000; /* Ensure text color is visible */
    margin-bottom: 20px; /* Add space below the title */
    text-align: left; /* Align the title to the left */
}

@media (max-width: 768px) {
    #comm .communities-wrapper {
        flex-direction: column; /* Stack sections vertically */
        padding: 20px; /* Reduce padding for smaller screens */
    }

    #comm .info-section {
        width: 100%; /* Full width for info section */
        margin-bottom: 20px; /* Space below the info section */
        background: white; /* Optional background */
        padding: 15px; /* Reduce padding */
    }

    #comm .images-section {
        width: 100%; /* Full width for images section */
        display: flex; /* Use flex for layout */
        flex-direction: column; /* Stack cards vertically */
        gap: 15px; /* Space between community cards */
    }

    #comm .community-card {
        width: 100%; /* Each card takes full width */
        padding: 10px; /* Padding for cards */
        background: #f1f1f1; /* Background for cards */
        border-radius: 5px; /* Rounded corners */
    }

    #comm .community-title {
        font-size: 1.5rem; /* Adjust title size */
    }

    #comm .community-text {
        font-size: 1rem; /* Adjust text size */
    }

    #comm .community-button {
        padding: 5px 10px; /* Adjust button size */
        font-size: 0.9rem; /* Smaller button font size */
    }

    #comm .community-image img {
        width: 100%; /* Responsive image */
        height: auto; /* Maintain aspect ratio */
    }
}

/* Further adjustments for very small screens (mobile phones) */
@media (max-width: 480px) {
    #comm .community-title {
        font-size: 1.3rem; /* Smaller title for mobile */
    }

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

    #comm .community-button {
        padding: 4px 8px; /* Further reduce button padding */
        font-size: 0.8rem; /* Smaller button font size */
    }
}

/* Overall Body Settings */
#volunteering-section {
    background: linear-gradient(135deg, #e6f0ff, #0f4bd5); /* Blue gradient */
    padding: 40px 0;
}

    #volunteering-section .tagline-message {
        margin-bottom: 40px;
    }

    #volunteering-section .page-title h3 {
        font-size: 3.6rem;
        font-weight: 700;
        color: black; /* Dark text for better readability */
        margin-bottom: 1rem;
    }




    #volunteering-section .breadcrumb {
        background-color: transparent;
        font-size: 14px;
        color: #666;
    }

        #volunteering-section .breadcrumb a {
            color: #0f4bd5;
            text-decoration: none;
        }

    #volunteering-section .custom-module {
        padding: 10px;
    }

    #volunteering-section .head-hilight {
        font-size: 3.2rem;
        font-weight: 700;
        color: black;
        margin-bottom: 20px;
        position: relative;
    }



    #volunteering-section p {
        font-size: 2rem;
        line-height: 1.6;
        color: #333; /* Darker text color for contrast */
        margin-bottom: 20px;
    }

    #volunteering-section .image-box {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

        #volunteering-section .image-box img {
            border-radius: 12px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            max-width: 100%;
            height: auto;
        }

    #volunteering-section .wow {
        opacity: 0;
        animation: fadeIn 1.2s forwards;
    }

@media (max-width: 767px) {
    #volunteering-section .row {
        flex-direction: column; /* Stack the elements vertically */
    }

    #volunteering-section .col-md-7,
    #volunteering-section .col-md-5 {
        width: 100%; /* Ensure full width */
        padding: 10px; /* Adjust padding if necessary */
    }

    #volunteering-section .head-hilight {
        font-size: 2.4rem; /* Smaller heading size */
    }

    #volunteering-section p {
        font-size: 1.6rem; /* Smaller paragraph size */
        margin-bottom: 15px; /* Adjust bottom margin */
    }

    #volunteering-section .image-box {
        height: auto; /* Limit height of the image for smaller screens */
        object-fit: cover; /* Cover the box while maintaining aspect ratio */
    }
}


.accordion {
    margin-bottom: 20px;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #1E3A8A, #3B82F6); /* Royal blue with cyan gradient */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
    border: none;
    position: relative;
    transition: all 0.4s ease;
}
/* Header Styling */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.container:hover {
    transform: none !important; /* Disable scaling effect */
}

.faq-title {
    font-size: 3.6rem; /* Large font size */
    font-weight: 700;
    color: #000000; /* Black text color */
    margin: 0;
}

/* Accordion Styling */

.accordion-section-separator {
    height: 1px;
    background-color: black; /* Light gray color for the line */
}


.accordion-section-title {
    display: block;
    font-size: 24px; /* Large font size */
    font-weight: 600;
    color: #000000 !important; /* Ensure text color remains black */
    padding: 20px;
    background-color: #f8f9fa; /* Very light gray background */
    text-decoration: none !important; /* Remove underline if any */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.accordion-section-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .accordion-section-title .toggle-icon {
        font-size: 30px;
        margin-left: 10px;
    }
    /* Ensure hover effect is black */
    .accordion-section-title:hover {
        background-color: #e9ecef !important; /* Slightly darker background on hover */
        color: #000000 !important; /* Ensure text color remains black */
        text-decoration: none !important; /* Remove underline if any */
    }

    /* Reset focus and active states */
    .accordion-section-title:focus,
    .accordion-section-title:active {
        outline: none; /* Remove default focus outline */
        background-color: #f8f9fa !important; /* Ensure background color remains light gray */
        color: #000000 !important; /* Ensure text color remains black */
    }

/* Content Styling */
.accordion-section-content {
    display: none;
    padding: 20px;
    background-color: #ffffff; /* White background for content */
}

.acc-details p {
    font-size: 18px; /* Readable font size */
    color: #000000; /* Black text color */
    line-height: 1.6; /* Spacing between lines for better readability */
    margin: 0;
}

/* Show content when active */
.accordion-section-content.show {
    display: block;
}

/* Media Query for Smaller Screens */
/*#testimonial {
        background: linear-gradient(135deg, #e6f0ff, #0f4bd5);
    }

        #testimonial .testimonial-swiper {
            position: relative;
            overflow: hidden;
            border-radius: 16px;*/ /* Larger border radius for a modern look */
/*box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);*/ /* More prominent shadow */
/*padding-bottom: 70px;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 10px;*/ /* More padding for a spacious layout */
/*background-color: #fff;
            margin-left: 85px;
            margin-right: 85px;
        }

        #testimonial .swiper-button-prev::after,
        #testimonial .swiper-button-next::after {
            display: none;
        }*/
/* Ensure swiper-wrapper is a flex container within the testimonial section */
/*#testimonial .swiper-wrapper {
            display: flex;
            max-height: 200px;
        }*/

/* Slide styling specific to the testimonial swiper */
/*#testimonial .swiper-slide {
            flex: 1 0 100%;*/ /* Show only one slide at a time */
/*box-sizing: border-box;
            padding: 30px;
            border-radius: 16px;
            background-color: #f7f7f7;*/ /* Light background for better contrast */
/*box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            max-height: 200px;
        }

            #testimonial .swiper-slide:hover {
                transform: scale(1.05);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            }*/

/* Testimonial wrap styling */
/*#testimonial .testimonial-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }*/

/* Image styling */
/*#testimonial .testimonial-logo {
            flex: 0 0 180px;*/ /* Increased width for logos */
/*margin-right: 30px;
        }

            #testimonial .testimonial-logo img {
                width: 100%;
                height: auto;
                border-radius: 12px;*/ /* Rounded corners for images */
/*}*/

/* Text styling */
/*#testimonial .testimonial-content {
            flex: 1;
        }

        #testimonial .testimonial-text {
            font-size: 3.25rem;*/ /* Larger font size for better readability */
/*line-height: 1.8;*/ /* Improved line height */
/*color: #333;
            margin: 0;
        }*/

/* Swiper navigation styling */
/* Modify the swiper navigation styling */
/*#testimonial .swiper-navigation {
            position: relative;*/ /* Keep buttons below the swiper wrapper */
/*width: 100%;
            display: flex;
            justify-content: center;*/ /* Center the buttons */
/*margin-top: 40px;*/ /* Space between swiper content and buttons */
/*z-index: 20;
            margin-bottom: -30px;
        }

        #testimonial .swiper-button-prev,
        #testimonial .swiper-button-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            background-color: #fff;
            padding: 25px;
            border-radius: 50%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

            #testimonial .swiper-button-prev:hover,
            #testimonial .swiper-button-next:hover {
                background-color: blue !important;
                color: #fff;
                border-radius: 5px;*/ /* Ensure it stays square */
/*}*/

/* Adjust bullet pagination styling */
/*#testimonial .swiper-pagination {
            position: relative;
            bottom: 0;
            margin-top: 10px;*/ /* Space between navigation and pagination bullets */
/*text-align: center;
        }

        #testimonial .swiper-pagination-bullet {
            background: #d1d1d1;*/ /* Neutral light gray for inactive bullets */
/*opacity: 0.7;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            transition: background-color 0.3s ease, opacity 0.3s ease;
        }

        #testimonial .swiper-pagination-bullet-active {
            background: #007bff;*/ /* A calm blue for active bullet */
/*opacity: 1;*/ /* Full opacity for active bullet */
/*}*/

/* Text styling for the testimonial content */
/*#testimonial .testimonial-text {
            font-size: 1.25rem;*/ /* Slightly larger font for better readability */
/*line-height: 1.8;
            color: #333333;*/ /* Darker gray for the text to improve readability */
/*margin: 0;
        }*/


/* Pagination styling */
/*#testimonial .swiper-pagination {
            bottom: 20px;
            text-align: center;
        }

        #testimonial .swiper-pagination-bullet {
            background: #007bff;
            opacity: 0.9;
            width: 14px;
            height: 14px;
            border-radius: 50%;
        }

        #testimonial .swiper-pagination-bullet-active {
            background: #0056b3;
            opacity: 1;
        }*/
/* Progress Bar Styling */
/*.swiper-progress-bar {
        position: relative;
        width: 100%;
        height: 4px;
        background-color: #e0e0e0;*/ /* Background color of the progress bar */
/*margin: 20px 0;*/ /* Space between swiper content and navigation */
/*}

        .swiper-progress-bar .progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background-color: #007bff;*/ /* Progress color */
/*width: 0;
            transition: width 0.3s ease;*/ /* Smooth transition */
/*}*/

/* Swiper container */
#testimonial .swiper-button-prev::after,
#testimonial .swiper-button-next::after {
    display: none;
}

#testimonial {
    height: 600px; /* Total height of testimonial section */
    position: relative; /* For absolutely positioned elements inside */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures even distribution of content */
    overflow: hidden;
    background: linear-gradient(135deg, #e6f0ff, #0f4bd5);
}

    #testimonial .swiper {
        width: 1150px;
        height: 100%; /* Full height of testimonial section */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #testimonial .swiper-slide {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        text-align: center;
        height: 400px; /* Slide content height */
    }
    #testimonial .container-fluid {
        background-color: whitesmoke;
        border-radius: 10px;
    }

/* Wrapper to organize content */
#testimonial .testimonial-wrap {
    display: flex;
    flex-direction: row; /* Default layout for larger screens */
    justify-content: space-between;
    align-items: center;
    width: 80%;
    max-width: 1200px;
    margin: auto;
}

    #testimonial .testimonial-logo {
        flex: 0 0 30%;
        display: flex;
        justify-content: center;
    }

        #testimonial .testimonial-logo img {
            max-width: 100%;
            height: auto;
        }

    #testimonial .testimonial-content {
        flex: 1;
        padding-left: 20px;
    }

    #testimonial .testimonial-text {
        font-size: 18px;
        line-height: 1.6;
        color: #333;
    }

    /* Navigation buttons */
    #testimonial .swiper-button-prev,
    #testimonial .swiper-button-next {
        width: 45px;
        height: 45px;
        border: 2px solid #0033cc;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #0033cc;
        background: none;
        position: absolute; /* Absolute positioning for better control */
        bottom: 70px; /* Place above the progress bar */
        z-index: 10;
    }

    #testimonial .swiper-button-prev {
        left: 30px;
    }

    #testimonial .swiper-button-next {
        right: 30px;
    }

        #testimonial .swiper-button-prev:hover,
        #testimonial .swiper-button-next:hover {
            background-color: #0033cc;
            color: white;
            transition: background-color 0.3s ease;
        }

    /* Progress bar */
    #testimonial .swiper-progress-bar {
        width: 80%;
        height: 4px;
        background-color: #f0f0f0;
        position: absolute; /* Absolute positioning to place it inside #testimonial */
        bottom: 20px; /* Place at the bottom of the #testimonial section */
        left: 50%;
        transform: translateX(-50%);
    }

        #testimonial .swiper-progress-bar .progress {
            width: 0;
            height: 100%;
            background-color: #0033cc;
            position: absolute;
            top: 0;
            left: 0;
        }

/* Media Query for devices with max width of 768px */
@media screen and (max-width: 768px) {
    #testimonial {
        height: 800px; /* Height for smaller screens */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Ensure even distribution */
        overflow: hidden; /* Prevent overflow */
        position: relative; /* For absolute positioning of inner elements */
    }

        #testimonial .swiper {
            width: 350px; /* Adjust swiper width */
            height: 600px; /* Full height */
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative; /* Ensure positioning is relative to #testimonial */
        }

        #testimonial .swiper-slide {
            height: auto; /* Allow height to adjust */
            justify-content: flex-start; /* Align content at the top */
            padding: 10px; /* Less padding for smaller screens */
            display: flex; /* Ensure content is flexible */
        }

        #testimonial .testimonial-wrap {
            flex-direction: column; /* Stack logo and content */
            justify-content: center;
            align-items: center;
            width: 100%; /* Fill screen width */
        }

        #testimonial .testimonial-logo {
            margin-bottom: 10px; /* Spacing */
            flex: 0 0 auto; /* Adjust size */
        }

        #testimonial .testimonial-content {
            padding-left: 0; /* Remove left padding */
            text-align: center; /* Center text */
        }

        #testimonial .testimonial-text {
            font-size: 16px; /* Adjust font size */
            line-height: 1.4; /* Line height */
        }

        #testimonial .swiper-button-prev,
        #testimonial .swiper-button-next {
            bottom: 30px; /* Adjust button position */
            width: 35px; /* Smaller buttons */
            height: 35px; /* Smaller buttons */
            position: absolute; /* Absolute positioning */
        }

        #testimonial .swiper-button-prev {
            left: 20px; /* Positioning */
        }

        #testimonial .swiper-button-next {
            right: 20px; /* Positioning */
        }

        #testimonial .swiper-progress-bar {
            width: 90%; /* Width of the progress bar */
            height: 6px; /* Increased height for visibility */
            background-color: #f0f0f0; /* Background color */
            position: absolute; /* Absolutely positioned */
            bottom: 20px; /* Space above the bottom */
            left: 50%; /* Center horizontally */
            transform: translateX(-50%); /* Center adjustment */
            border-radius: 4px; /* Rounded corners */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Shadow for better visibility */
            z-index: 10; /* Ensure it is above other elements */
        }

            #testimonial .swiper-progress-bar .progress {
                width: 0; /* Initial width */
                height: 100%; /* Full height of progress bar */
                background-color: #0033cc; /* Progress color */
                position: absolute; /* Positioned within the bar */
                top: 0;
                left: 0;
                transition: width 0.5s ease; /* Smooth transition */
            }
}


/* Media Query for devices with max width of 768px */

@media screen and (width: 768px) {
    #testimonial {
        height: 800px; /* Adjust height for mid-sized small screens */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Ensure even distribution */
        overflow: hidden; /* Prevent overflow */
        position: relative; /* For absolute positioning of inner elements */
    }

        #testimonial .swiper {
            width: 700px; /* Adjust swiper width to fill container */
            height: 650px; /* Adjust height for swiper */
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative; /* Ensure positioning is relative to #testimonial */
        }

        #testimonial .swiper-slide {
            height: auto; /* Allow height to adjust */
            justify-content: flex-start; /* Align content at the top */
            padding: 15px; /* Add some padding for aesthetics */
            display: flex; /* Ensure content is flexible */
        }

        #testimonial .testimonial-wrap {
            flex-direction: column; /* Stack logo and content */
            justify-content: center;
            align-items: center;
            width: 100%; /* Fill screen width */
        }

        #testimonial .testimonial-logo {
            margin-bottom: 15px; /* Increased spacing for larger screens */
            flex: 0 0 auto; /* Adjust size */
        }

        #testimonial .testimonial-content {
            padding-left: 0; /* Remove left padding */
            text-align: center; /* Center text */
        }

        #testimonial .testimonial-text {
            font-size: 18px; /* Slightly larger font size */
            line-height: 1.5; /* Adjust line height */
        }

        #testimonial .swiper-button-prev,
        #testimonial .swiper-button-next {
            bottom: 40px; /* Adjust button position */
            width: 40px; /* Smaller buttons */
            height: 40px; /* Smaller buttons */
            position: absolute; /* Absolute positioning */
        }

        #testimonial .swiper-button-prev {
            left: 30px; /* Positioning */
        }

        #testimonial .swiper-button-next {
            right: 30px; /* Positioning */
        }

        #testimonial .swiper-progress-bar {
            width: 90%; /* Width of the progress bar */
            height: 6px; /* Height for visibility */
            background-color: #f0f0f0; /* Background color */
            position: absolute; /* Absolutely positioned */
            bottom: 20px; /* Space above the bottom */
            left: 50%; /* Center horizontally */
            transform: translateX(-50%); /* Center adjustment */
            border-radius: 4px; /* Rounded corners */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Shadow for better visibility */
            z-index: 10; /* Ensure it is above other elements */
        }

            #testimonial .swiper-progress-bar .progress {
                width: 0; /* Initial width */
                height: 100%; /* Full height of progress bar */
                background-color: #0033cc; /* Progress color */
                position: absolute; /* Positioned within the bar */
                top: 0;
                left: 0;
                transition: width 0.5s ease; /* Smooth transition */
            }
}


@media screen and (width: 1024px) {
    #testimonial {
        height: 600px; /* Total height of testimonial section */
        position: relative; /* For absolutely positioned elements inside */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Ensures even distribution of content */
        overflow: hidden;
    }

        #testimonial .swiper {
            width: 1000px;
            height: 100%; /* Full height of testimonial section */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        #testimonial .swiper-slide {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            text-align: center;
            height: 400px; /* Slide content height */
        }

        /* Wrapper to organize content */
        #testimonial .testimonial-wrap {
            display: flex;
            flex-direction: row; /* Default layout for larger screens */
            justify-content: space-between;
            align-items: center;
            width: 80%;
            max-width: 1200px;
            margin: auto;
        }

        #testimonial .testimonial-logo {
            flex: 0 0 30%;
            display: flex;
            justify-content: center;
        }

            #testimonial .testimonial-logo img {
                max-width: 100%;
                height: auto;
            }

        #testimonial .testimonial-content {
            flex: 1;
            padding-left: 20px;
        }

        #testimonial .testimonial-text {
            font-size: 18px;
            line-height: 1.6;
            color: #333;
        }

        /* Navigation buttons */
        #testimonial .swiper-button-prev,
        #testimonial .swiper-button-next {
            width: 45px;
            height: 45px;
            border: 2px solid #0033cc;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #0033cc;
            background: none;
            position: absolute; /* Absolute positioning for better control */
            bottom: 70px; /* Place above the progress bar */
            z-index: 10;
        }

        #testimonial .swiper-button-prev {
            left: 30px;
        }

        #testimonial .swiper-button-next {
            right: 30px;
        }

            #testimonial .swiper-button-prev:hover,
            #testimonial .swiper-button-next:hover {
                background-color: #0033cc;
                color: white;
                transition: background-color 0.3s ease;
            }

        /* Progress bar */
        #testimonial .swiper-progress-bar {
            width: 80%;
            height: 4px;
            background-color: #f0f0f0;
            position: absolute; /* Absolute positioning to place it inside #testimonial */
            bottom: 20px; /* Place at the bottom of the #testimonial section */
            left: 50%;
            transform: translateX(-50%);
        }

            #testimonial .swiper-progress-bar .progress {
                width: 0;
                height: 100%;
                background-color: #0033cc;
                position: absolute;
                top: 0;
                left: 0;
            }
}


@media screen and (min-width: 769px) and (max-width: 1023px) {
    #testimonial {
        height: 600px; /* Total height of testimonial section */
        position: relative; /* For absolutely positioned elements inside */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Ensures even distribution of content */
        overflow: hidden;
    }

        #testimonial .swiper {
            width: 800px;
            height: 100%; /* Full height of testimonial section */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        #testimonial .swiper-slide {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            text-align: center;
            height: 400px; /* Slide content height */
        }

        /* Wrapper to organize content */
        #testimonial .testimonial-wrap {
            display: flex;
            flex-direction: row; /* Default layout for larger screens */
            justify-content: space-between;
            align-items: center;
            width: 80%;
            max-width: 1200px;
            margin: auto;
        }

        #testimonial .testimonial-logo {
            flex: 0 0 30%;
            display: flex;
            justify-content: center;
        }

            #testimonial .testimonial-logo img {
                max-width: 100%;
                height: auto;
            }

        #testimonial .testimonial-content {
            flex: 1;
            padding-left: 20px;
        }

        #testimonial .testimonial-text {
            font-size: 18px;
            line-height: 1.6;
            color: #333;
        }

        /* Navigation buttons */
        #testimonial .swiper-button-prev,
        #testimonial .swiper-button-next {
            width: 45px;
            height: 45px;
            border: 2px solid #0033cc;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #0033cc;
            background: none;
            position: absolute; /* Absolute positioning for better control */
            bottom: 70px; /* Place above the progress bar */
            z-index: 10;
        }

        #testimonial .swiper-button-prev {
            left: 30px;
        }

        #testimonial .swiper-button-next {
            right: 30px;
        }

            #testimonial .swiper-button-prev:hover,
            #testimonial .swiper-button-next:hover {
                background-color: #0033cc;
                color: white;
                transition: background-color 0.3s ease;
            }

        /* Progress bar */
        #testimonial .swiper-progress-bar {
            width: 80%;
            height: 4px;
            background-color: #f0f0f0;
            position: absolute; /* Absolute positioning to place it inside #testimonial */
            bottom: 20px; /* Place at the bottom of the #testimonial section */
            left: 50%;
            transform: translateX(-50%);
        }

            #testimonial .swiper-progress-bar .progress {
                width: 0;
                height: 100%;
                background-color: #0033cc;
                position: absolute;
                top: 0;
                left: 0;
            }
}

#key-partners {
    
}

    #key-partners .container {
        width: 90%;
        margin: 0 auto;
    }

    #key-partners .section-header {
        text-align: center;
        margin-bottom: 30px; /* Increase margin for better spacing */
    }

    #key-partners .section-title {
        font-size: 3.6rem; /* Increase font size for prominence */
        color: #333;
        font-weight: 700;
    }

    #key-partners .partners-carousel {
        position: relative;
        overflow: hidden;
    }

    #key-partners .swiper-container {
        width: 100%;
        height: 300px; /* Set a fixed height for consistency */
    }

    #key-partners .swiper-wrapper {
        display: flex;
    }

    #key-partners .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px; /* Increase space between images */
        flex: 0 0 auto;
    }

        #key-partners .swiper-slide img {
            width: 200px; /* Increase width of images */
            max-height: 200px; /* Increase height of images */
            object-fit: contain; /* Ensure images retain their aspect ratio */
            display: block;
        }

    #key-partners .text-center {
        text-align: center;
        padding-top: 20px; /* Increase padding for better spacing */
    }

    #key-partners .view-all-button {
        display: inline-flex;
        align-items: center;
        font-size: 14px; /* Increase font size for better visibility */
        color: #fff;
        background-color: #007bff;
        padding: 12px 24px; /* Increase padding for a more prominent button */
        border-radius: 5px;
        text-decoration: none;
        transition: background-color 0.3s;
    }

        #key-partners .view-all-button:hover {
            background-color: #0056b3;
        }

    #key-partners .button-icon {
        margin-left: 8px;
    }

    /* Swiper CSS */
    #key-partners .swiper-container {
        overflow: hidden;
    }

    #key-partners .swiper-slide {
        width: auto;
        flex: 0 0 auto;
    }

    #key-partners .swiper-button-next,
    #key-partners .swiper-button-prev {
        color: #fff;
    }

    #key-partners .swiper-pagination-bullet {
        background: #fff;
    }

    /* Hover effect to stop sliding */
    #key-partners .swiper-container:hover .swiper-wrapper {
        animation-play-state: paused;
    }



/* Global Styles */
/* Slider Section */


#donor-wall .swiper-container {
    width: 100%;
    padding-top: 20px;
    overflow: hidden;
    height: 500px;
	position: relative;
}

#donor-wall .swiper-wrapper {
    display: flex;
}

#donor-wall .swiper-slide {
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    align-items: center;
    /* Ensure no horizontal scrolling issue */
    width: auto;
    height: 360px;
}

#donor-wall .donor-card {
    text-align: center;
    width: 280px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    height: 350px;
}

    #donor-wall .donor-card:hover {
        transform: translateY(-10px) scale(1.03); /* Smooth scaling effect */
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
    }

        #donor-wall .donor-card:hover::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #00aaff; /* Modern accent color for hover effect */
            transition: all 0.3s ease;
        }

    /* Animated overlay on hover */
    #donor-wall .donor-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.1); /* Transparent overlay */
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
    }

    #donor-wall .donor-card:hover::after {
        opacity: 1;
    }

#donor-wall .donor-image img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 10px;
    z-index: 2;
}

#donor-wall .donor-name {
    margin-top: 15px;
    font-size: 1.3rem;
    font-weight: bold;
    color: #222;
    text-transform: capitalize;
    z-index: 2;
}

#donor-wall .donor-title {
    margin-top: 8px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #666;
    z-index: 2;
}

/* Modern Button Styling */
#donor-wall .view-button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    font-size: 1rem;
    color: #ffffff;
    background-color: #007bff;
    border-radius: 30px;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

    #donor-wall .view-button:hover {
        background-color: #0056b3;
    }

#donor-wall .swiper-navigation {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Swiper Navigation Arrows */
#donor-wall .swiper-button-prev,
#donor-wall .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #fff;
    padding: 25px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    #donor-wall .swiper-button-prev span,
    #donor-wall .swiper-button-next span {
        font-size: 24px;
        color: #333;
    }

#donor-wall .swiper-button-prev {
    left: 0;
}

#donor-wall .swiper-button-next {
    right: 0;
}

    /* Hide default arrows */
    #donor-wall .swiper-button-prev::after,
    #donor-wall .swiper-button-next::after {
        display: none;
    }

    #donor-wall .swiper-button-prev:hover,
    #donor-wall .swiper-button-next:hover {
        background-color: #0056b3;
        color: #fff;
        border-radius: 5px;
    }

        #donor-wall .swiper-button-prev:hover span,
        #donor-wall .swiper-button-next:hover span {
            color: #fff;
        }

/* Swiper pagination styling */
#donor-wall .swiper-pagination {
    bottom: 15px;
    text-align: center;
}

#donor-wall .swiper-pagination-bullet {
    background: #0056b3;
    opacity: 0.8;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

#donor-wall .swiper-pagination-bullet-active {
    background: #003d7a;
    opacity: 1;
}
#donor-wall .text-center {
    text-align: center;
    padding-top: 20px; /* Increase padding for better spacing */
}

#donor-wall .view-all-button {
    display: inline-flex;
    align-items: center;
    font-size: 1.2rem; /* Increase font size for better visibility */
    color: #fff;
    background-color: #007bff;
    padding: 12px 24px; /* Increase padding for a more prominent button */
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

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

#donor-wall .button-icon {
    margin-left: 8px;
}

.section-header {
    text-align: center;
    margin-bottom: 30px; /* Increase margin for better spacing */
}

.section-title {
    font-size: 2.5rem; /* Increase font size for prominence */
    color: #fff;
    font-weight: 700;
}

#go-iitb-campaign {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

    #go-iitb-campaign .campaign-swiper {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        padding-bottom: 60px;
        padding-left: 20px;
        padding-right: 20px;
        background-color: #fff;
    }

    #go-iitb-campaign .swiper-wrapper {
        display: flex;
        height: 500px;
    }

    #go-iitb-campaign .swiper-slide {
        flex: 0 0 auto; /* This will make sure all slides fit in the container properly */
        width: 100%;
        box-sizing: border-box;
        border-radius: 12px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

        #go-iitb-campaign .swiper-slide:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }

    #go-iitb-campaign .campaign-wrap {
        position: relative;
        display: flex;
        flex-direction: column; /* Ensure vertical stacking of elements */
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
    }

    #go-iitb-campaign .campaign-image {
        width: 100%; /* Take full width of the parent */
        height: 100%; /* Maintain the full height */
        border-radius: 12px;
    }

        #go-iitb-campaign .campaign-image img {
            width: 100%; /* Ensure the image covers the full width */
            height: 100%; /* Ensure the image covers the full height */
            /* Make sure the image fills the container without distortion */
            border-radius: 12px;
        }

    #go-iitb-campaign .campaign-info {
        position: relative;
        width: 100%;
    }

    #go-iitb-campaign .text-overlay {
        position: absolute;
        bottom: 15px;
        left: 15px;
        background: rgba(0, 0, 0, 0.5);
        padding: 20px;
        border-radius: 8px;
        max-width: 60%;
        transition: background 0.3s ease;
    }

        #go-iitb-campaign .text-overlay h3 {
            font-size: 2rem;
            color: #ffffff;
            margin: 0 0 10px;
        }

        #go-iitb-campaign .text-overlay p {
            font-size: 1rem;
            color: #ffffff;
            margin: 0;
        }

    #go-iitb-campaign .hover-buttons {
        position: absolute;
        bottom: 15px;
        right: 15px;
        display: flex;
        gap: 10px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

        #go-iitb-campaign .hover-buttons a {
            background: rgba(0, 0, 0, 0.5); /* Darker background for modern look */
            color: #ffffff;
            padding: 24px 38px; /* Increased padding for larger button size */
            border-radius: 10px; /* Slightly larger border-radius for a smoother look */
            text-transform: uppercase;
            font-size: 1.1rem; /* Increased font size for better readability */
            text-align: center;
            font-weight: 600; /* Bolder font for better readability */
            transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
            white-space: nowrap; /* Prevent text wrapping */
        }

            /* Adjusting font size on hover for emphasis */
            #go-iitb-campaign .hover-buttons a:hover {
                background: rgba(0, 0, 0, 0.8); /* Darker shade on hover */
                transform: translateY(-4px); /* Lift effect */
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhanced shadow */
                font-size: 1.15rem; /* Slightly larger font size on hover */
            }



    #go-iitb-campaign .campaign-wrap:hover .hover-buttons {
        opacity: 1;
    }

    #go-iitb-campaign .swiper-navigation {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 40px;
        z-index: 20;
    }

    #go-iitb-campaign .swiper-button-prev,
    #go-iitb-campaign .swiper-button-next {
        background: #ffffff;
        border-radius: 50%;
        padding: 0.75rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333333;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
        width: 50px;
        height: 50px;
        margin: 0 15px;
    }

        #go-iitb-campaign .swiper-button-prev:hover,
        #go-iitb-campaign .swiper-button-next:hover {
            background-color: #0056b3;
            color: #fff;
            border-radius: 5px; /* Ensure it stays square */
        }

    #go-iitb-campaign .swiper-pagination {
        position: relative;
        bottom: 20px;
        text-align: center;
        padding-bottom: -20px;
        margin-bottom: -20px;
    }

    #go-iitb-campaign .swiper-pagination-bullet {
        background: #007bff;
        opacity: 0.9;
        width: 14px;
        height: 14px;
        border-radius: 50%;
    }

    #go-iitb-campaign .swiper-pagination-bullet-active {
        background: #0056b3;
        opacity: 1;
    }

.swiper-progress-bar {
    position: relative;
    width: 100%;
    height: 4px;
    background-color: #e0e0e0;
    margin: 20px 0;
}

    .swiper-progress-bar .progress {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-color: #007bff;
        width: 0;
        transition: width 0.3s ease;
    }

#go-iitb-campaign .swiper-slide {
    transition: transform 0.3s ease, filter 0.3s ease;
}

#go-iitb-campaign .swiper-slide-prev,
#go-iitb-campaign .swiper-slide-next {
    filter: blur(8px); /* Adjust blur amount as needed */
}

#go-iitb-campaign .swiper-slide-active {
    filter: none;
    transform: scale(1); /* Reset scale for the active slide */
}

#go-iitb-campaign .swiper-button-prev::after,
#go-iitb-campaign .swiper-button-next::after {
    display: none;
}
/* For screens smaller than 1024px */
@media (max-width: 1024px) {
    #go-iitb-campaign .campaign-wrap {
        display: flex;
        flex-direction: column;
        padding: 5px;
        align-items: center; /* Center elements on small screens */
        padding-top: 0;
        height: 550px;
    }

    /* Ensure the campaign image stays full width */


    /* Move the text-overlay below the image */
    #go-iitb-campaign .text-overlay {
        position: static; /* Remove absolute positioning */
        background: none; /* Remove background color */
        padding: 0; /* Remove padding */
        margin: 0 auto; /* Center text content */
        text-align: center; /* Center text */
        max-width: 90%; /* Limit the width of text on small screens */
    }

        #go-iitb-campaign .text-overlay h3 {
            font-size: 1.8rem; /* Adjust text size for small screens */
            color: #333; /* Ensure text color is clear */
            margin-bottom: 10px;
            font-weight: bold;
        }

        #go-iitb-campaign .text-overlay p {
            font-size: 1rem;
            color: #666; /* Subtle text color for descriptions */
            margin-bottom: 15px; /* Space below the paragraph */
        }

    #go-iitb-campaign .swiper-slide {
        height: 550px; /* Adjust this to your preferred height */
        overflow: hidden; /* Prevent overflow */
    }

    #go-iitb-campaign .swiper-wrapper {
        height: 550px; /* Match the slide height */
    }

    #go-iitb-campaign .campaign-image img {
        width: 100%;
        height: 100%; /* Ensure it fills the slide height */
        object-fit: cover; /* Maintain aspect ratio and cover the slide area */
        border-radius: 12px;
    }

    /* Move hover-buttons below the text overlay */
    #go-iitb-campaign .hover-buttons {
        position: static; /* Remove absolute positioning */
        opacity: 1; /* Always visible */
        display: flex; /* Align buttons in a row */
        flex-direction: row;
        gap: 10px; /* Space between buttons */
        justify-content: center; /* Center buttons */
        margin-top: 20px; /* Space above buttons */
    }

        #go-iitb-campaign .hover-buttons a {
            padding: 12px 18px; /* Adjust padding for smaller buttons */
            font-size: 1rem; /* Adjust font size for small screens */
            color: #fff;
            background: #007bff; /* Bright button color */
            border-radius: 8px; /* Add rounded corners */
            transition: background 0.3s ease; /* Smooth transition for hover */
            text-decoration: none;
        }

            #go-iitb-campaign .hover-buttons a:hover {
                background: #0056b3; /* Darken button on hover */
            }

        /* Ensure buttons have equal width on small screens */
        #go-iitb-campaign .hover-buttons a {
            flex-grow: 1; /* Make buttons equally wide */
            text-align: center; /* Center button text */
        }
}

/* For extra small screens (576px and below) */
@media (max-width: 576px) {
    #go-iitb-campaign .text-overlay h3 {
        font-size: 1.5rem; /* Slightly smaller font for extra small screens */
    }

    #go-iitb-campaign .hover-buttons a {
        padding: 10px 15px; /* Smaller padding */
        font-size: 0.9rem; /* Adjust font size */
    }

    /* Keep buttons full width */
    #go-iitb-campaign .hover-buttons {
        flex-direction: column; /* Stack buttons vertically */
        width: 100%; /* Full width on extra small screens */
    }

        #go-iitb-campaign .hover-buttons a {
            margin-bottom: 10px; /* Add space between stacked buttons */
            flex-grow: unset; /* Remove equal width on very small screens */
        }
}

/* Corporate Styling */

/* Impact Stories Section Styling */

/* General container for Impact Stories */
#impact-stories .stories-swiper {
    position: relative;
    overflow: hidden;
    max-height: 500px;
}

#impact-stories .swiper-wrapper {
    display: flex;
    height: 480px;
}

/* Slide styling */
#impact-stories .swiper-slide {
    flex: 1 0 auto;
    box-sizing: border-box;
    border-radius: 0;
    transition: transform 0.3s ease; /* Smooth transition for hover effects */
    padding: 5px;
}

    

/* Image styling */
#impact-stories .story-image {
    width: 100%;
    height: 250px;
    overflow: hidden; /* Ensure images are contained */
    display: flex;
    justify-content: center;
    align-items: center;
}

    #impact-stories .story-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
        
    }

#impact-stories .swiper-slide:hover .story-image img {
    transform: scale(1.05); /* Zoom effect on hover */
}

/* Text styling */
#impact-stories .story-content {
    padding: 1rem;
    background-color: #ffffff;
}

    #impact-stories .story-content:hover {
        background: linear-gradient(135deg, #e3f2fd, #90caf9); /* Gradient background on hover */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Subtle shadow effect */
    }

#impact-stories .story-title {
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 2.8em; /* Restrict to 2 lines of text */
}

#impact-stories .story-description {
    font-size: 1em;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em;
    max-height: 4.2em; /* Restrict to 3 lines of text */
}

/* Donation Card */
#impact-stories .donation-card-description {
    font-size: 1.7rem;
    color: #222;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 10rem; /* Adjust based on line height */
}

/* Donation Button */
#impact-stories .donation-read-more {
    font-size: 1.8rem;
    color: navy; /* Default text color */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    position: relative;
    padding: 5px 10px;
    background: none;
    border-radius: 4px;
    z-index: 1;
    transition: color 0.4s ease; /* Smooth transition for text color */
}

    #impact-stories .donation-read-more::before {
        content: '';
        position: absolute;
        left: -100%;
        top: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(120deg, #0066cc, #00ccff); /* Gradient effect */
        transition: left 0.4s ease;
        z-index: -1;
    }

    #impact-stories .donation-read-more:hover::before {
        left: 0; /* Show gradient on hover */
    }

    #impact-stories .donation-read-more:hover {
        color: #fff; /* Change text color to white on hover */
    }

    #impact-stories .donation-read-more span.material-symbols-sharp {
        margin-left: 8px;
        font-size: 1.3rem;
        transition: transform 0.4s ease; /* Smooth icon transform */
        z-index: 1;
    }

    #impact-stories .donation-read-more:hover span.material-symbols-sharp {
        transform: translateX(8px); /* Slide icon to the right on hover */
    }

    #impact-stories .donation-read-more span.text {
        z-index: 1;
        transition: transform 0.4s ease; /* Smooth text movement */
    }

    #impact-stories .donation-read-more:hover span.text {
        transform: translateX(8px); /* Move text to the right on hover */
    }

/* Button styling */
#impact-stories .button.link {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.2rem;
    background-color: #0056b3;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-weight: 600;
    font-size: 1rem;
    border: none;
}

    #impact-stories .button.link:hover {
        background-color: #003d7a;
        transform: translateY(-2px); /* Subtle hover movement */
    }

    #impact-stories .button.link .material-icons {
        margin-left: 0.5rem;
        font-size: 1.2rem;
    }

/* Swiper Navigation styling */
#impact-stories .swiper-navigation {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Swiper Navigation Arrows */
#impact-stories .swiper-button-prev,
#impact-stories .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #fff;
    padding: 25px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    #impact-stories .swiper-button-prev span,
    #impact-stories .swiper-button-next span {
        font-size: 24px;
        color: #333;
    }

#impact-stories .swiper-button-prev {
    left: 0;
}

#impact-stories .swiper-button-next {
    right: 0;
}

    /* Hide default arrows */
    #impact-stories .swiper-button-prev::after,
    #impact-stories .swiper-button-next::after {
        display: none;
    }

    #impact-stories .swiper-button-prev:hover,
    #impact-stories .swiper-button-next:hover {
        background-color: #0056b3;
        color: #fff;
        border-radius: 5px;
    }

        #impact-stories .swiper-button-prev:hover span,
        #impact-stories .swiper-button-next:hover span {
            color: #fff;
        }

/* Swiper pagination styling */
#impact-stories .swiper-pagination {
    bottom: 15px;
    text-align: center;
}

#impact-stories .swiper-pagination-bullet {
    background: #0056b3;
    opacity: 0.8;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

#impact-stories .swiper-pagination-bullet-active {
    background: #003d7a;
    opacity: 1;
}

/* Slide hover title effect */
#impact-stories .swiper-slide:hover .story-title {
    color: #0056b3;
    text-shadow: 1px 1px 5px rgba(0, 85, 179, 0.4); /* Subtle shadow for depth */
    transform: scale(1.05); /* Slight increase in size */
}

/* Responsive Design */
@media (max-width: 768px) {
    #impact-stories .swiper-slide {
        flex-direction: column;
    }
}

.alumni-swiper {
    position: relative; /* Ensure inner elements (like pagination) are positioned relative to this container */
    padding-bottom: 50px; /* Add space for pagination at the bottom */
}

.swiper-pagination {
    position: absolute;
    bottom: 10px; /* Position pagination at the bottom of the .alumni-swiper container */
    left: 0;
    right: 0;
    text-align: center;
}

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.nz {
    position: relative; /* Ensure .nz can properly contain the .alumni-swiper */
    overflow: hidden; /* Ensure no overflow */
}

.dynamic-image {
    width: 400px; /* Set the desired width */
    height: 400px; /* Set the desired height */
    object-fit: cover; /* Ensures image is cropped while filling the container */
}

/* Magnifier Container */
.magnifier {
    position: relative;
    display: inline-block;
}

    /* Thumbnail Image */
    .magnifier img {
        width: 150px; /* Set your desired thumbnail size */
        height: auto;
        transition: transform 0.2s ease-in-out;
        cursor: pointer;
    }

    /* Magnifier Icon Positioning */
    .magnifier i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 24px;
        color: white;
        opacity: 0.7;
        pointer-events: none;
    }

    /* Zoom Effect on Hover */
    .magnifier a:hover img {
        transform: scale(1.1); /* Slight zoom on hover */
    }

.rounded-box {
    border-radius: 15px; /* Adjust the radius as needed */
    padding: 20px;
    background: linear-gradient(135deg, #007bff, #00d4ff);
    border: 1px solid #ddd; /* Optional: Add border */
}

.breadcrumb li a {
    border-radius: 10px; /* Rounded corners for breadcrumb links */
}

.breadcrumb li.active {
    border-radius: 10px; /* Rounded corners for active breadcrumb */
}

#section4 .swiper-container {
    width: 100%;
    height: 580px !important; /* Maintain consistent height for the Swiper container */
    padding: 20px 0;
}

#section4 .swiper-slide {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: white;
    
    
    height: 400px; /* Set a fixed height to ensure balance */
}


/* Image consistency */
#section4 .alum-img-wrapper {
    position: relative;
    width: 100%; /* Set to 100% to fill the slide */
    height: 250px; /* Set a fixed height for images */
    overflow: hidden; /* Prevent overflow */
}

#section4 .alum-img {
    width: 100%;
    height: 100%; /* Ensure image fills the wrapper */
    object-fit: cover; /* Maintain aspect ratio and cover the area */
    
    margin-bottom: 20px;
}

#section4 .swiper-slide-shadow-left, #section4 .swiper-slide-shadow-right {
    background: rgba(0, 0, 0, 0.15);
}

#section4 .alum-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
    
    height: 90%;

}

#section4 .alum-magnifier {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 10px;
}

    #section4 .alum-magnifier i {
        color: white;
        font-size: 24px;
    }

#section4 .alum-details {
    max-width: 250px; /* Set a max-width to ensure uniformity */
    flex-grow: 1; /* Allows content to grow vertically */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Center align contents */
    overflow: hidden; /* Ensure content doesn't overflow */

    
}

    #section4 .alum-details a {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Limits text to 2 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #000;
        text-decoration: none;
        text-align: left;
        font-weight: 700;
        font-size: 1.7rem;
        line-height: 1.5;
        word-break: break-word; /* Breaks long words */
        width: 100%; /* Ensure the link takes up full width */
        margin-bottom: 8px;
    }

    #section4 .alum-details p {
        font-size: 0.9em;
        color: #555;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Limits text to 3 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4em;
        max-height: 4.2em;
        word-break: break-word; /* Break long words in the description */
        text-align: left;
        margin-bottom: 8px;
    }


    #section4 .alum-details:hover {
        background: linear-gradient(135deg, #e3f2fd, #90caf9); /* Gradient background on hover */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Subtle shadow effect on hover */
    }

    #section4 .alum-details h4, #section4 .alum-details a, #section4 .alum-details p {
        font-size: 1em; /* Uniform font size for all text elements */
        color: #333;
        text-align: left;
    }

    #section4 .alum-details h4 {
        font-weight: 700;
        font-size: 20px;
        color: black;
        text-align: left; /* Center align the text */
        word-wrap: break-word; /* Break long words if needed */
        white-space: normal; /* Ensure it wraps to the next line */
        width: 100%; /* Ensure the h4 takes the full width */
        margin-bottom: 8px;
    }


    /*#section4 .alum-details a {
        display: -webkit-box;
        -webkit-line-clamp: 2;*/ /* Limits text to 3 lines */
    /*-webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #000;
        text-decoration: none;
        font-weight: 700;
        font-size: 1.7rem;
        line-height: 1.5;
    }*/

    #section4 .alum-details a:hover {
        color: #0056b3;
    }

/*#section4 .alum-details p {
        font-size: 0.9em;
        color: #555;
        display: -webkit-box;
        -webkit-line-clamp: 3;*/ /* Limits text to 3 lines */
/*-webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4em;*/ /* Adjust for readability */
/*max-height: 4.2em;*/ /* 3 lines of text */
/*}*/

#section4 .alum-readmore {
    font-weight: bold;
    color: #007bff;
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-bottom: 0;
    transition: color 0.3s ease;
    text-align: left;
}

    #section4 .alum-readmore::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #007bff;
        transform: scaleX(0);
        transform-origin: bottom right;
        transition: transform 0.3s ease-out;
    }

    #section4 .alum-readmore:hover {
        color: #0056b3; /* Darker blue on hover */
        transform: translateY(-2px); /* Small upwards movement */
    }

#section4 .swiper-button-prev::after,
#section4 .swiper-button-next::after {
    display: none;
}

#section4 .alum-readmore:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

#section4 .alum-readmore:hover::before {
    content: '→'; /* Add an arrow before text on hover */
    position: absolute;
    left: -20px;
    opacity: 0;
    transition: opacity 0.3s ease, left 0.3s ease;
}

#section4 .alum-readmore:hover::before {
    opacity: 1;
    left: -10px;
}

/* Swiper Arrows and Pagination */
#section4 .swiper-button-next,
#section4 .swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #fff;
    padding: 25px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    #section4 .swiper-button-next:hover,
    #section4 .swiper-button-prev:hover {
        background-color: #0056b3;
        color: #fff;
        border-radius: 5px; /* Ensure it stays square */
    }

#section4 .swiper-pagination-bullet {
    background: #007bff;
    opacity: 0.7;
}

#section4 .swiper-pagination-bullet-active {
    background: #0056b3;
    opacity: 1;
}


.section-button {
    margin: 20px auto; /* Adds 20px margin on top and bottom, centers horizontally */
}

    .section-button .btn {
        margin-top: 10px; /* Adds space above the button */
        padding: 12px 24px; /* Increases padding for a larger button */
        font-size: 1.2em; /* Makes the text larger */
        border-radius: 6px; /* Adds a slight rounding to the corners */
    }

.course-details:hover {
    background: linear-gradient(135deg, #e3f2fd, #90caf9); /* Gradient background on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Subtle shadow effect on hover */
}

.eventread {
    font-weight: bold;
    color: #007bff; /* Base blue color */
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

    .eventread::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px; /* Underline height */
        bottom: 0;
        left: 0;
        background-color: #007bff; /* Underline color */
        transform: scaleX(0); /* Start hidden */
        transform-origin: bottom right; /* Origin for animation */
        transition: transform 0.3s ease-out; /* Transition effect */
    }

    .eventread:hover {
        color: #0056b3; /* Darker blue on hover */
        transform: translateY(-2px); /* Slight upward movement */
    }

        .eventread:hover::after {
            transform: scaleX(1); /* Show underline */
            transform-origin: bottom left; /* Animate from the left */
        }

        .eventread:hover::before {
            content: '→'; /* Arrow before text on hover */
            position: absolute;
            left: -20px; /* Position before the text */
            opacity: 0; /* Start hidden */
            transition: opacity 0.3s ease, left 0.3s ease; /* Transition for arrow */
        }

        .eventread:hover::before {
            opacity: 1; /* Show arrow */
            left: -10px; /* Move into position */
        }

.newsread {
    font-weight: bold; /* Make the text bold */
    color: #007bff; /* Base blue color */
    text-decoration: none; /* Remove underline */
    position: relative; /* Position relative for pseudo-elements */
    display: inline-block; /* Inline block for layout */
    padding-bottom: 5px; /* Space for underline effect */
    transition: color 0.3s ease; /* Smooth color transition */
}

    .newsread::after {
        content: ''; /* Empty content for the underline */
        position: absolute; /* Absolute positioning for the underline */
        width: 100%; /* Full width of the link */
        height: 2px; /* Height of the underline */
        bottom: 0; /* Position at the bottom */
        left: 0; /* Align left */
        background-color: #007bff; /* Underline color */
        transform: scaleX(0); /* Start hidden */
        transform-origin: bottom right; /* Origin for animation */
        transition: transform 0.3s ease-out; /* Transition effect */
    }

    .newsread:hover {
        color: #0056b3; /* Darker blue on hover */
        transform: translateY(-2px); /* Slight upward movement */
    }

        .newsread:hover::after {
            transform: scaleX(1); /* Show underline on hover */
            transform-origin: bottom left; /* Animate from left */
        }

        .newsread:hover::before {
            position: absolute; /* Position absolute for the arrow */
            left: -20px; /* Position before the text */
            opacity: 0; /* Start hidden */
            transition: opacity 0.3s ease, left 0.3s ease; /* Transition for arrow */
        }

        .newsread:hover::before {
            opacity: 1; /* Show arrow on hover */
            left: -10px; /* Move into position */
        }

.read-more-btn {
    font-size: 1.8rem;
    color: navy; /* Default text color */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    position: relative;
    padding: 5px 10px;
    background: none;
    border-radius: 4px;
    overflow: hidden; /* Ensure gradient stays within the button */
    z-index: 1;
    transition: color 0.4s ease; /* Smooth transition for text color */
}

    .read-more-btn::before {
        content: '';
        position: absolute;
        left: -100%;
        top: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(120deg, #0066cc, #00ccff); /* Gradient effect */
        transition: left 0.4s ease; /* Move the gradient on hover */
        z-index: -1; /* Ensure the gradient is behind the text */
    }

    .read-more-btn:hover::before {
        left: 0; /* Move the gradient into view */
    }

    .read-more-btn:hover {
        color: #fff; /* Change the text color to white for better contrast */
    }

    .read-more-btn span.material-symbols-sharp {
        margin-left: 8px;
        font-size: 1.3rem;
        transition: transform 0.4s ease; /* Smooth transform for the icon */
        z-index: 1; /* Keep the icon on top of the gradient */
    }

    .read-more-btn:hover span.material-symbols-sharp {
        transform: translateX(8px); /* Slide the icon to the right on hover */
    }

    .read-more-btn span.text {
        z-index: 1; /* Ensure the text is on top of the gradient */
        transition: transform 0.4s ease; /* Smooth transition for text movement */
    }

    .read-more-btn:hover span.text {
        transform: translateX(8px); /* Move the text slightly to the right on hover */
    }

#social-media-section {
    background-color: #f8f9fa; /* Light grey for a clean corporate look */
    padding: 40px 0;
}

#connect-title {
    font-size: 3.6rem;
    font-weight: 700;
    color: #333; /* Dark grey */
    text-align: center;
}

#tabs-wrapper-connect {
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0; /* Light border under the tabs */
}

#tab-indicator-connect {
    height: 3px;
    background-color: #007bff; /* Accent color for active tab */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    transition: all 0.3s ease;
}

.tab.corporate-tab {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    padding: 10px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}



#facebook-title, #twitter-title {
    font-size: 30px;
    color: #333;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
}

.tab-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
}

.tab-ct {
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

    .tab-ct.active {
        display: block; /* Show active content */
        opacity: 1; /* Set full opacity for active content */
        transform: translateY(0); /* Reset transform for active content */
    }

    .tab-ct.fade {
        opacity: 0; /* Initial opacity */
        transform: translateY(20px); /* Subtle upward movement for transition */
    }

iframe {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for a modern touch */
}


/* Newsletter Section Styling */
.newsletter-section {
    padding-top: 20px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
}
$("#home").css({
        "background-image": "url('images/AA.jpg')", // Path to the fallback image
        "background-size": "cover",                    // Ensure the image covers the entire area
        "background-position": "center",               // Center the image
        "background-attachment": "fixed"               // Optional: Make the image stay fixed during scroll
    });
.newsletter-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.header-top-flex {
    display: flex;
    justify-content: flex-start; /* Align header content to the left */
    align-items: center;
    width: 100%;
}

.newsletter-title {
    font-size: 4rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #2b2b2b;
    text-align: left; /* Ensure title is aligned to the left */
}

/* Responsive Image Section */
.newsletter-image {
    max-width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 8px;
}

    .newsletter-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .newsletter-title {
        font-size: 1.5rem;
    }

    .header-top-flex {
        flex-direction: column;
        text-align: center;
    }
}
/* Advanced Modern Dean Section Design */
.dean-section {
  padding: 80px 0;
  background: linear-gradient(145deg, #eef2f5, #d7e0e7);
  color: #2b3e50;
}

.dean-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  padding: 30px;
  box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  background: white;
}

.dean-left, .dean-middle, .dean-right {
  flex: 1;
}

.dean-left {
  max-width: 45%;
}

.dean-title {
  font-size: 4rem;
  font-weight: 900;
  color: #003366;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dean-name {
  font-size: 2.8rem;
  font-weight: 700;
  color: #1d4e89;
  margin-bottom: 10px;
}

.dean-info {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #0070a0;
  margin-bottom: 30px;
}

.dean-image img {
  border-radius: 50%;
  width: 100%;
  max-width: 350px;
  
  transform: scale(1);
  transition: transform 0.3s ease;
}

.dean-image img:hover {
  transform: scale(1.05);
}

.dean-right {
  max-width: 45%;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.quote-icon {
  font-size: 6rem;
  color: #0070a0;
  
}

.dean-message p {
    font-size: 1.6rem;
    color: #333;
    line-height: 1.8;
    margin-bottom: 20px; /* Adds space between paragraphs */
    text-align: justify; /* Ensures the text is aligned neatly */
}

    .dean-message p:first-of-type {
        font-weight: bold; /* Highlights the opening greeting */
    }



@media (max-width: 1200px) {
  .dean-wrap {
    gap: 40px;
    padding: 20px;
  }

  .dean-title {
    font-size: 3.5rem;
  }

  .dean-name {
    font-size: 2.5rem;
  }

  .dean-message p {
    font-size: 1.4rem;
  }
}

@media (max-width: 768px) {
  .dean-wrap {
    flex-direction: column;
    text-align: center;
  }

  .dean-left, .dean-right, .dean-middle {
    max-width: 100%;
  }

  .dean-title {
    font-size: 3rem;
  }

  .dean-name {
    font-size: 2rem;
  }

  .dean-image img {
    max-width: 250px;
  }

  .quote-icon {
    font-size: 4rem;
  }

  
}
.legacy-section {
    background-color: #f0f4f8; /* Background color */
    padding: 40px 0;
}

.section-header {
    margin-bottom: 30px;
}

.section-title {
    font-size: 3.6rem;
    font-weight: 700;
    color: #333; /* Text color */
}

.legacy-card-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.legacy-card {
    background: #fff; /* Card background */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative; /* Enable absolute positioning of content */
    transition: transform 0.3s;
}

    .legacy-card:hover {
        transform: translateY(-5px); /* Lift effect on hover */
    }

.legacy-image {
    position: relative; /* Set position relative for content positioning */
}

    .legacy-image img {
        width: 100%;
        height: auto; /* Maintain aspect ratio */
    }

.legacy-content {
    position: absolute; /* Position the content absolutely */
    bottom: 20px; /* Positioning from the bottom */
    left: 10px; /* Positioning from the left */
    
    z-index: 2; /* Ensure the content is above the image */
    
    padding: 10px;
    border-radius: 5px; /* Rounded corners for the content box */
}
.legacy-title {
    font-weight: 700;
    color: white; /* Text color */
    font-size: 2.3rem !important; /* Font size */
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.9); /* More pronounced shadow for better contrast */

    margin: 0; /* Remove margin */
    line-height: 1.2; /* Adjust line height for better spacing */
}


.button-wrap {
    margin-top: 5px; /* Spacing above the button */
    
}
.legacy-read {
    margin-top: 5px;
    font-weight: 700;
    color: white; /* Text color */
    font-size: 2rem !important; /* Font size */
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.9); /* More pronounced shadow for better contrast */

    margin: 0; /* Remove margin */
    line-height: 1.2; /* Adjust line height for better spacing */
}


.legacy-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0; /* Remove margin for tighter layout */
}

@media (max-width: 768px) {
    .legacy-card-wrap {
        flex-direction: column; /* Stack cards on smaller screens */
    }
}
.alumni-giving-section {
    padding: 40px 0;
    background-color: white;
}

.alumni-header {
    font-size: 3.6rem;
    text-align: center;
    margin-bottom: 30px;
    font-weight: 700;
    color: #333; /* Darker color for more contrast */
}

.alumni-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-top: 40px;
}

.alumni-img-col {
    flex: 0 0 40%;
}

.alumni-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    padding-left: 15px;
    padding-right: 15px;
}

.alumni-text-col {
    flex: 0 0 55%; 
    
}

.alumni-text-content {
    
    border-radius: 8px;
    padding-left: 20px;
    padding-right: 20px;
    

   
}

.alumni-title {
    font-size: 2.8rem;
    margin-bottom: 20px;
    font-weight: 700;
    color: dimgrey;
}

.alumni-description {
    font-size: 2.2rem;
    line-height: 1.5;
    color: dimgrey; /* Darker shade of gray */
}

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

    .alumni-img-col,
    .alumni-text-col {
        flex: 100%;
        padding: 0;
    }

    .alumni-header {
        font-size: 2.8rem;
    }

    .alumni-title {
        font-size: 2rem;
    }

    .alumni-description {
        font-size: 1.6rem;
    }
}

.news-section {
    padding: 40px 0;
}
.news-link {
    text-decoration: none; /* Remove underline */
    
    transition: color 0.3s ease; /* Smooth transition for color change */
}

    .news-link:hover {
        color: #333; /* Adjust the color to a lighter shade, like a dark gray */
    }

.news-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.news-item {
    flex: 0 1 calc(30% - 20px); /* Adjust width to fit three items per row with a smaller gap */
    max-width: calc(30% - 20px); /* Adjust max-width for responsiveness */
    margin-bottom: 30px; /* Increase space between news items */
    box-sizing: border-box; /* Include padding and border in width calculation */
    padding: 10px; /* Padding around each news item */
}

.news-image {
    overflow: hidden;
    border-radius: 8px;
}

    .news-image img {
        width: 100%; /* Make the image responsive */
        height: auto; /* Ensure proportional scaling */
        display: block; /* Remove any inline space */
        border-radius: 8px; /* Rounded corners */
    }

.news-details {
    padding: 20px; /* Adjust padding inside the details */
    
    border-radius: 8px; /* Rounded corners */
}

.news-title {
    font-size: 2rem; /* Adjust title font size */
    font-weight: 700; /* Bold font weight */
    margin-top: 10px; /* Space above the title */
    margin-bottom: 15px; /* Space below the title */
    color: #333;
}



@media (max-width: 768px) {
    .news-item {
        flex: 0 1 calc(50% - 20px); /* Adjust for two items per row on smaller screens */
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 576px) {
    .news-item {
        flex: 0 1 100%; /* One item per row on smaller screens */
        max-width: 100%;
    }
}

.upcoming-events-section {
    background-color: #f0f4f8;
}

.upcoming-events-header {
    text-align: center;
    margin-bottom: 40px;
}

.upcoming-hdn_48_sb {
    font-size: 2.5rem;
    font-weight: 700;
}

.upcoming-events-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.upcoming-event-item {
    width: calc(50% - 20px);
    
}

.upcoming-img-sec img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.upcoming-hdn_36_sb {
    font-size: 2.8rem;
    font-weight: 700;
    
}
.highlight-text {
    color: dimgray; /* Change this to the color you prefer */
    
}

.upcoming-info-sec {
    margin-bottom: 15px;
    line-height: 2;
    font-size: 1.7rem;
    color: dimgray;
}

.upcoming-event-detail h5 {
    font-size: 1.5rem;
    
}

/* Responsive Design */
@media (max-width: 768px) {
    .upcoming-event-item {
        width: 100%;
    }

    .upcoming-hdn_48_sb {
        font-size: 2rem;
    }

    .upcoming-hdn_36_sb {
        font-size: 1.25rem;
    }
}
/* General Styling */
#faculty-spotlight-section {
    padding: 50px 0;
}

    #faculty-spotlight-section .f-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

#faculty-text-col {
    width: 35%;
    padding-right: 20px;
    
}

#faculty-slider-col {
    width: 65%;
    position: relative;
    
}

/* Swiper Styles */
#faculty-spotlight-section .swiper {
    width: 100%;
    height: 100%;
}

#faculty-spotlight-section .swiper-wrapper {
    display: flex;
}

#faculty-spotlight-section .swiper-slide {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.9s ease-in-out, filter 0.9s ease-in-out, opacity 0.9s ease-in-out;
    filter: grayscale(100%);
    opacity: 0.4; /* Lower opacity for background slides */
    transform: scale(0.85); /* Slightly smaller for a more dramatic focus on the active slide */
    perspective: 1000px; /* Adds a subtle 3D depth to the slides */
}

#faculty-spotlight-section .swiper-slide-active {
    filter: grayscale(0%); /* Full color for active slide */
    opacity: 1;
    transform: scale(1.15); /* A bit more enlargement for emphasis */
    perspective: 1000px; /* Keep perspective to maintain depth */
}


#faculty-spotlight-section .dps-img img {
    width: 100%;
    object-fit: cover;
}

/* Text Styles */
#faculty-text-col h1 {
    font-size: 3.6rem;
    font-weight: bold;
    margin-bottom: 10px;
    margin-left: 0; /* Align text at the same starting point */
    text-align: left; /* Left-align text */
}

#faculty-text-col h2 {
    font-size: 24px; /* Slightly smaller for better spacing */
    margin-bottom: 20px;
    font-weight: bold;
    margin-left: 0; /* Align text at the same starting point */
    text-align: left; /* Left-align text */
    line-height: 1.4; /* Improve readability */
}

#faculty-text-col p {
    font-size: 18px; /* Slightly smaller font for better readability */
    line-height: 1.6; /* Improve spacing */
    color: #333;
    margin-left: 0; /* Ensure consistent alignment */
    text-align: left; /* Left-align text */
}




#faculty-spotlight-section .swiper-pagination {
    display: flex; /* Center pagination bullets */
    justify-content: center; /* Center horizontally */
    margin-top: 10px; /* Space above the pagination */
}

#faculty-spotlight-section .swiper-pagination-bullet {
    background: #000; /* Bullet color */
    opacity: 0.5; /* Default opacity */
}

#faculty-spotlight-section .swiper-pagination-bullet-active {
    opacity: 1; /* Full opacity for active bullet */
}


/* Media Queries */
@media (max-width: 768px) {
    #faculty-spotlight-section .f-row {
        flex-direction: column;
    }

    #faculty-text-col, #faculty-slider-col {
        width: 100%;
    }

    #faculty-text-col {
        padding-right: 0;
        margin-bottom: 20px;
    }
}
#faculty-spotlight-section .swiper-button-prev::after,
#faculty-spotlight-section .swiper-button-next::after {
    display: none;
}
/* Swiper navigation styling */
#faculty-spotlight-section .swiper-navigation {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

#faculty-spotlight-section .swiper-button-prev,
#faculty-spotlight-section .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #fff;
    padding: 25px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    #faculty-spotlight-section .swiper-button-prev:hover,
    #faculty-spotlight-section .swiper-button-next:hover {
        background-color: #0056b3;
        color: #fff;
        border-radius: 5px; /* Ensure it stays square */
    }

    #faculty-spotlight-section .swiper-button-prev .material-icons,
    #faculty-spotlight-section .swiper-button-next .material-icons {
        font-size: 28px;
    }
/* Social Connect Section Styling */
.social-connect {
    text-align: center;
    padding: 20px;
    background-color: #f9f9f9;
}

    .social-connect h2 {
        font-size: 3.6rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
    }

    .social-connect p {
        font-size: 16px;
        color: #666;
        margin-bottom: 20px;
    }

    .social-connect .social-icons {
        display: flex;
        justify-content: center;
        gap: 120px; /* Desktop gap */
        flex-wrap: wrap; /* Allows icons to wrap on smaller screens */
    }

.social-icon {
    background-color: #ff5722;
    color: white;
    font-size: 24px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

    .social-icon:hover {
        background-color: #e64a19;
    }

.facebook {
    background-color: #3b5998;
}

.instagram {
    background-color: #e4405f;
}

.twitter {
    background-color: #1da1f2;
}

.linkedin {
    background-color: #0077b5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .social-connect h2 {
        font-size: 20px;
    }

    .social-connect p {
        font-size: 14px;
    }

    .social-connect .social-icons {
        gap: 40px; /* Reduce gap on tablets */
    }

    .social-icon {
        font-size: 20px;
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .social-connect h2 {
        font-size: 18px;
    }

    .social-connect p {
        font-size: 12px;
    }

    .social-connect .social-icons {
        gap: 20px; /* Further reduce gap on mobile */
    }

    .social-icon {
        font-size: 18px;
        width: 40px;
        height: 40px;
    }
}

/* Custom color for LinkedIn */

#section8 .swiper-container {
    width: 100%;
    padding: 20px 0;
    position: relative;
    height: 300px;
    
}

#section8 .swiper-slide {
    padding: 10px;
    transition: transform 0.3s ease;
    flex: 1 0 auto;
    box-sizing: border-box;
    border-radius: 0;
    transition: transform 0.3s ease; /* Smooth transition for hover effects */
}

#section8 .swiper-slide {
    height: 250px;
}

#section8 .swiper-button-prev,
#section8 .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #fff;
    
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #section8 .swiper-button-prev span,
    #section8 .swiper-button-next span {
        font-size: 24px;
        color: #333;
    }



    /* Hide default arrows */
    #section8 .swiper-button-prev::after,
    #section8 .swiper-button-next::after {
        display: none;
    }

    #section8 .swiper-button-prev:hover,
    #section8 .swiper-button-next:hover {
        background-color: #0056b3;
        color: #fff;
        border-radius: 5px;
    }

        #section8 .swiper-button-prev:hover span,
        #section8 .swiper-button-next:hover span {
            color: #fff;
        }
#section8 .swiper-pagination {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    z-index: 10;
}

/* Pagination bullet styles */
#section8 .swiper-pagination-bullet {
    background: #0056b3;
    opacity: 0.8;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

#section8 .swiper-pagination-bullet-active {
    background: #003d7a;
    opacity: 1;
}

/* Adjust button position */
#section8 .swiper-button-next {
    right: 0;
}

#section8 .swiper-button-prev {
    left: 0;
    
}
@media (max-width: 768px) {
    .form-field {
        flex: 1 1 100%; /* Full width on small screens */
        margin-right: 0; /* No margin */
    }

    .form-row {
        flex-direction: column; /* Stack fields vertically */
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
#waysofgiving {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

/* Label for upcoming events */
.upcoming-label {
    background: linear-gradient(45deg, #FF5733, #FF8C00, #FFD700); /* Gradient colors */
    background-size: 300% 300%; /* Larger background for gradient movement */
    color: white;
    font-weight: bold;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 16px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    animation: flashGradient 2s ease-in-out infinite; /* Flashing gradient animation */
}

/* Keyframe animation for gradient movement */
@keyframes flashGradient {
    0% {
        background-position: 0% 50%;
        opacity: 0.8;
    }

    50% {
        background-position: 100% 50%;
        opacity: 1;
    }

    100% {
        background-position: 0% 50%;
        opacity: 0.8;
    }
}

/* Slight bounce effect for the event box */
@keyframes bounceIn {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Apply bounceIn animation to the upcoming event box */
.upcoming-event {
    animation: bounceIn 0.8s ease-out forwards;
}

/* Optional: Styling for the event box to make it stand out */
.upcoming-event {
    border: 2px solid #FF5733; /* Border color for upcoming events */
    background-color: #fff8e1; /* Soft background color for highlight */
    box-shadow: 0 4px 20px rgba(255, 87, 51, 0.2); /* Enhanced shadow */
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* Ensure proper placement */
}

    /* Add hover effect for extra interactivity */
    .upcoming-event:hover {
        transform: scale(1.05); /* Slight zoom on hover */
        background-color: #fff4d4; /* Slightly darker highlight */
        box-shadow: 0 6px 25px rgba(255, 87, 51, 0.3); /* Enhanced shadow */
    }
.award-year {
    font-size: 14px;
    color: #555;
    background-color: #fff;
    
    position: relative; /* Position it over the course-details content */
    
    left: 0;
    right: 0;
    padding: 0; /* No padding initially */
    max-height: 0; /* Collapsed initially */
    overflow: hidden; /* Hide overflowing content */
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out, bottom 0.3s ease-in-out;
    z-index: 10; /* Make sure it stays above other content */
}

    /* Expanded .award-year section */
    .award-year.expanded {
        
        padding-top: 5px; /* Add padding when expanded */
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 25px;
        
    }


/* Styling for the toggle button */
.toggle-award-year {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #007bff;
    cursor: pointer;
    text-decoration: none;
    position: absolute;
    right: -80px; /* Align to the right end */
    top: 20px; /* Align to the top of the h4 element */
    z-index: 20; /* Keep it above other content */
}
.plus-icon {
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
    user-select: none;
    transform: translateY(-50%);
    background-color: #fff;
    padding: 6px;
    border-radius: 50%;
    color: #000080;
    border: 2px solid #000080;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 30px; /* Adjust width */
    height: 30px; /* Adjust height to match width */
}

    .plus-icon:hover {
        background-color: #f0f8ff;
        color: #0056b3;
        border-color: #0056b3;
    }

    .plus-icon:active {
        background-color: #e6f2ff;
        color: #004085;
        border-color: #004085;
    }

.toggle-award-year:hover {
    color: #0056b3;
}

/* Active State for Toggle */
.toggle-award-year.active .plus-icon {
    color: #dc3545; /* Change color for minus icon */
}
.list-inline {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .list-inline li {
        flex: 0 0 50%; /* Each list item takes 50% of the row */
        box-sizing: border-box; /* Ensures padding and borders are included in width */
        overflow: hidden; /* Prevents overflowing content */
        text-overflow: ellipsis; /* Adds ellipsis if text overflows */
        white-space: nowrap; /* Prevents text from wrapping to a new line */
    }

        .list-inline li a {
            display: inline-block;
            width: 100%; /* Makes the link fill the list item's width */
            text-decoration: none;
            color: #000; /* Default link color */
            
            transition: color 0.3s ease;
        }

.image-comparison {
    height: 450px;
    width: 100%;
    margin: 20px auto;
    border-radius: 20px;
    overflow: hidden;
}

    .image-comparison img {
        width: 100%;
        height: 450px;
        object-fit: cover;
        object-position: left;
    }

    .image-comparison .images-container {
        position: relative;
        display: flex;
    }

        .image-comparison .images-container .before-image {
    position: absolute;
    top: 0;
    width: 50%;
    object-fit: cover;
    
}
.image-comparison .images-container .after-image {
    object-fit: fill;
}

    .image-comparison .slider {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    .image-comparison .slider-line {
        position: absolute;
        height: 100%;
        width: 4px;
        background: #fff;
        left: 50%;
        transform: translateX(-50%);
    }

    .image-comparison .slider-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 60px;
        height: 60px;
        color: #fff;
        transform: translate(-50%, -50%) rotateZ(90deg);
    }
#nostalgia {
    background-color: white;
}

#nostalgia .nostalgia-swiper {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
}

#nostalgia .swiper-wrapper {
    display: flex;
    height: 500px;
}

#nostalgia .swiper-slide {
    flex: 0 0 auto; /* This will make sure all slides fit in the container properly */
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}





#nostalgia .swiper-navigation {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    z-index: 20;
}

#nostalgia .swiper-button-prev,
#nostalgia .swiper-button-next {
    background: #ffffff;
    border-radius: 50%;
    padding: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    width: 50px;
    height: 50px;
    margin: 0 15px;
}

    #nostalgia .swiper-button-prev:hover,
    #nostalgia .swiper-button-next:hover {
        background-color: #0056b3;
        color: #fff;
        border-radius: 5px; /* Ensure it stays square */
    }

#nostalgia .swiper-pagination {
    position: relative;
    bottom: 20px;
    text-align: center;
    padding-bottom: -20px;
    margin-bottom: -20px;
}

#nostalgia .swiper-pagination-bullet {
    background: #007bff;
    opacity: 0.9;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

#nostalgia .swiper-pagination-bullet-active {
    background: #0056b3;
    opacity: 1;
}



#nostalgia .swiper-slide {
    transition: transform 0.3s ease, filter 0.3s ease;
}

#nostalgia .swiper-slide-prev,
#nostalgia .swiper-slide-next {
    filter: blur(8px); /* Adjust blur amount as needed */
}

#nostalgia .swiper-slide-active {
    filter: none;
    transform: scale(1); /* Reset scale for the active slide */
}

#nostalgia .swiper-button-prev::after,
#nostalgia .swiper-button-next::after {
    display: none;
}
.acc-details li {
    font-size: 14px;
    color: #000000; /* Black text color */
}

/* Media Queries for Smaller Screens */

.captcha-container {
    display: flex;
    align-items: center;
}

/* Style for CAPTCHA image */
#captchaImage {
    width: 150px;
    height: 50px;
    border: 1px solid #ccc;
    object-fit: contain; /* Ensures the image scales without distortion */
}

/* Style for reload button */
.reload-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    height: 50px; /* Same height as CAPTCHA image */
    width: 50px; /* Width of the button */
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

    .reload-button i {
        font-size: 24px; /* Icon size */
        color: #555;
    }

    .reload-button:hover {
        background-color: #f0f0f0; /* Light gray on hover */
    }

    .reload-button:active {
        background-color: #e0e0e0; /* Darker gray on click */
    }

/* Style for the input field */
#captchaInput {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    .event-container {
        flex-direction: column !important; /* Stack elements vertically on small screens */
        align-items: flex-start !important; /* Align items to the left */
    }

    .event-img {
        width: 100% !important; /* Image takes full width */
        margin-right: 0 !important; /* Remove margin */
        margin-bottom: 15px !important; /* Add some space between image and details */
    }

    .details-container {
        width: 100% !important; /* Details container takes full width */
        margin-top: 15px !important; /* Space between image and details */
    }

    .event-content {
        width: 100% !important; /* Event content takes full width */
        margin-top: 15px !important; /* Space between details and content */
    }

    .dynamic-image {
        width: 100% !important; /* Make image responsive and take full width */
        height: auto !important; /* Maintain aspect ratio */
    }
}


#alumni-achiever .swiper-container {
    width: 100%;
    padding-top: 20px;
    overflow: hidden;
    height: 500px;
    position: relative;
}

#alumni-achiever .swiper-wrapper {
    display: flex;
}

#alumni-achiever .swiper-slide {
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    align-items: center;
    /* Ensure no horizontal scrolling issue */
    width: auto;
    height: 390px;
}

#alumni-achiever .achiever-card {
    text-align: center;
    width: 280px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    height: 380px;
}

    #alumni-achiever .achiever-card:hover {
        transform: translateY(-10px) scale(1.03); /* Smooth scaling effect */
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
    }

        #alumni-achiever .achiever-card:hover::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #00aaff; /* Modern accent color for hover effect */
            transition: all 0.3s ease;
        }

    /* Animated overlay on hover */
    #alumni-achiever .achiever-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.1); /* Transparent overlay */
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
    }

    #alumni-achiever .achiever-card:hover::after {
        opacity: 1;
    }

#alumni-achiever .achiever-image img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 10px;
    z-index: 2;
}

#alumni-achiever .achiever-name {
    margin-top: 15px;
    font-size: 1.3rem;
    font-weight: bold;
    color: #222;
    text-transform: capitalize;
    z-index: 2;
}

#alumni-achiever .achiever-description {
    margin-top: 5px;
    font-size: 1.3rem;
    font-weight: bold;
    color: #222;
    text-transform: capitalize;
    z-index: 2;
    white-space: nowrap; /* Prevents the text from wrapping */
    overflow: hidden; /* Hides the overflow text */
    text-overflow: ellipsis; /* Adds the "..." at the end if the text is too long */
}

#alumni-achiever .achiever-title {
    margin-top: 8px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #666;
    z-index: 2;
}

/* Modern Button Styling */
#alumni-achiever .view-button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    font-size: 1rem;
    color: #ffffff;
    background-color: #007bff;
    border-radius: 30px;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

    #alumni-achiever .view-button:hover {
        background-color: #0056b3;
    }

#alumni-achiever .swiper-navigation {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Swiper Navigation Arrows */
#alumni-achiever .swiper-button-prev,
#alumni-achiever .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #fff;
    padding: 25px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    #alumni-achiever .swiper-button-prev span,
    #alumni-achiever .swiper-button-next span {
        font-size: 24px;
        color: #333;
    }

#alumni-achiever .swiper-button-prev {
    left: 0;
}

#alumni-achiever .swiper-button-next {
    right: 0;
}

    /* Hide default arrows */
    #alumni-achiever .swiper-button-prev::after,
    #alumni-achiever .swiper-button-next::after {
        display: none;
    }

    #alumni-achiever .swiper-button-prev:hover,
    #alumni-achiever .swiper-button-next:hover {
        background-color: #0056b3;
        color: #fff;
        border-radius: 5px;
    }

        #alumni-achiever .swiper-button-prev:hover span,
        #alumni-achiever .swiper-button-next:hover span {
            color: #fff;
        }

/* Swiper pagination styling */
#alumni-achiever .swiper-pagination {
    bottom: 15px;
    text-align: center;
}

#alumni-achiever .swiper-pagination-bullet {
    background: #0056b3;
    opacity: 0.8;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

#alumni-achiever .swiper-pagination-bullet-active {
    background: #003d7a;
    opacity: 1;
}

#alumni-achiever .text-center {
    text-align: center;
    padding-top: 20px; /* Increase padding for better spacing */
}

#alumni-achiever .view-all-button {
    display: inline-flex;
    align-items: center;
    font-size: 1.2rem; /* Increase font size for better visibility */
    color: #fff;
    background-color: #007bff;
    padding: 12px 24px; /* Increase padding for a more prominent button */
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}



#alumni-achiever .button-icon {
    margin-left: 8px;
}