:root {
    --mainColor: #29578D;
    --primary1: #539FD60D;
    --primary2: #2E558B;
    --secondary: #E7CAA5;
    --secondary2: #E7CAA5;
    --secondary3: #C69F6E;
    --accent: #EEF6FB;
    --accent2: #F7FBFD;
}

/*----- general style --*/
.mt-85 {
    margin-top: 100px !important;
}

.no-border {
    border: 0px;
}

.secondary-text {
    color: #ffca86 !important;
}

.no-bg {
    background-color: transparent !important;
}

.no-radius {
    border-radius: 0px !important;
}

.relative {
    position: relative !important;
}

.border-primary {
    border-color: #29578D4F !important;
}

.full-width {
    width: 100% !important;
}

.relative {
    position: relative;
}

.rounded {
    border-radius: 1.2rem !important;
}

.radius-20 {
    border-radius: 20px;
}

.grey-border {
    border: 1px solid #9CB0C9 !important;
}

.grey-border2 {
    border: 1px solid #DADBD7 !important;
}

body,
a,
p,
span {
    font-weight: 400;
}

.d-inline {
    display: inline !important;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    padding-right: var(--bs-gutter-x, 2.75rem);
    padding-left: var(--bs-gutter-x, 2.75rem);
}

.font-bold {
    font-weight: 700 !important;
}

body {
    background-color: white;
}

a,
a:hover {
    text-decoration: none;
}

.section-padding {
    padding: 10px 0;
}

/*--colors--*/
.background-secondary {
    background-color: var(--secondary) !important;
}

.background-accent {
    background-color: var(--accent) !important;
}

.background-accent2 {
    background-color: var(--accent2) !important;
}

.btn-primary {
    background-color: var(--mainColor) !important;
    border-color: transparent !important;
    overflow: hidden;
}

.btn-primary.hvr-shutter-out-horizontal:before {
    background: var(--secondary3);
}

.location-section {
    iframe {
        width: 100% !important;
        height: 500px !important;
        border-radius: 20px;
    }
}

.btn-secondary {
    background-color: var(--secondary) !important;
    border-color: transparent !important;

    &:hover,
    &:focus {
        color: white !important;
    }
}

.btn-secondary.hvr-shutter-out-horizontal:before {
    border-radius: 1.2rem !important;
    background: var(--mainColor);
}

.bg-primary {
    background-color: var(--mainColor) !important;
}

.primary-color {
    color: var(--mainColor) !important;
}

.primary-color2 {
    color: #29578D !important;
}

.btn-outline-dark:hover {
    background-color: #29578D !important;
    border-color: #29578D !important;
    color: white !important;
}

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

h4,
.size-4 {
    font-size: 21px !important;
}

h5,
.size-5 {
    font-size: 16px !important;
}

h6,
.size-6 {
    font-size: 14px !important;
}

h7,
.size-7 {
    font-size: 12px !important;
}

.main-title {
    display: inline-block;
    position: relative;

    h2,
    h1 {
        position: relative;
        z-index: 1;
    }

    &::after {
        position: absolute;
        content: '';
        top: 10px;
        right: 0;
        left: -10px;
        width: 110%;
        height: 20px;
        background-color: #E7CAA54D;
    }
}

/*--header------*/
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: .8rem;
    padding-left: .8rem;
    position: relative;

    &::before {
        position: absolute;
        bottom: 0;
        content: '';
        width: 0px;
        height: 5px;
        background-color: var(--secondary);
        right: 0;
        left: 0;
        border-radius: 10px;
        margin: auto;
        transition: all 0.4s ease-in-out
    }

    &:hover {
        &::before {
            width: 30px;
            transition: all 0.4s ease-in-out
        }
    }
}

.navbar.bg-light {
    background-color: white !important;
    border-bottom: 1px solid #DEE5ED;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    transition: all 0.3s ease;
    /* Smooth transition when adding/removing the class */
    z-index: 10;
}

.navbar.bg-light.nav-scroll {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Optional shadow */
    transition: all 0.3s ease;
    /* Smooth transition when adding/removing the class */
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show>.nav-link {
    &::before {
        width: 30px;
        transition: all 0.4s ease-in-out
    }

    font-weight: 700;
}

/*----------slider section------------*/
.slider-section.carousel,
.slider-section.carousel .carousel-inner {
    height: 85vh !important;
}

.slider-section.carousel .carousel-inner .carousel-item,
.slider-section.carousel .carousel-inner .carousel-item img {
    width: 100%;
    height: 100%;
}

.slider-section.carousel .carousel-caption {
    bottom: 40%;
    z-index: 1;
}

.slider-section.carousel {
    position: relative;

    &::after {
        position: absolute;
        background-image: url('../images/slider-overlay.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        content: '';
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    width: 3rem;
    height: 3rem;
}

.carousel-control-next,
.carousel-control-prev {
    opacity: .8;
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
    opacity: 1;
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

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

.height-160 {
    height: 160px !important;
}

.height-420 {
    height: 420px !important;
}

.height-510 {
    min-height: 510px;
}

.image-contain {
    object-fit: contain;
}

.image-cover {
    object-fit: cover;
}

.counter {
    animation-duration: 1s;
    animation-delay: 0s;
}

.carousel-caption h1,
.carousel-caption a {
    opacity: 0;
    animation: slideInUp 2s ease-in-out forwards;
}

/*---achivement section--*/
.achivment-section {
    .card.achievment-card {
        background-color: var(--primary1);
        padding: 15px 10px;
        min-height: 170px;
    }
}

/*----programs-------*/
.programs-section {
    position: relative;

    .card {
        padding-bottom: 30px;
        position: relative;

        &::after {
            position: absolute;
            content: '';
            bottom: 0;
            right: 0;
            border-radius: 10px;
            left: 0;
            width: 0px;
            height: 5px;
            background-color: var(--mainColor);
            transition: all 0.4s ease-in-out;
            margin: auto;
        }

        &:hover {
            &::after {
                width: 100%;
                transition: all 0.4s ease-in-out;
            }
        }

        .image-card {
            border: 1px solid #C8D1DE;
            border-radius: 20px;
            overflow: hidden;
            background-color: white;
            text-align: center;
            padding: 30px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .card-text {
            color: var(--primary2);
            font-size: 14px !important;
            min-height: 90px;
        }

        .card-title {
            min-height: 40px;
        }

        .card-body {
            padding: 0px !important;
        }
    }
}

.bg {
    position: absolute;
    top: 282px;
    width: 666px;
    height: 100%;
    left: -260px;
    z-index: -1;
    object-fit: cover;
}

/*-----partners -----------*/
.partners {
    .home-logo-wrapper {
        grid-column-gap: 2rem;
        grid-row-gap: 3rem;
        justify-content: flex-start;
        align-items: center;
        margin-top: 1rem;
        display: flex;
        position: relative;
        overflow: hidden;
        direction: ltr;
    }

    .clients-grid {
        grid-column-gap: 20px;
        grid-row-gap: 0px;
        opacity: 1;
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-auto-columns: 1fr;
        align-items: center;
        justify-items: center;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        display: grid;
    }

    .clients-grid.logo-animate {
        grid-column-gap: 2rem;
        opacity: 1;
        flex: none;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        width: 100rem;
        margin-top: 0;
        margin-bottom: 0;
        margin-right: 0;
        display: flex;
    }

    .clients-grid.logo-animate-alt {
        grid-column-gap: 2rem;
        flex: none;
        width: 100rem;
        margin-top: 0;
        margin-left: 0;
        margin-right: auto;
        display: flex;
    }

    .home-logo-left-gradient {
        background-image: linear-gradient(to right, #f9f9f9, rgba(255, 255, 255, 0));
        width: 10%;
        position: absolute;
        top: 0%;
        bottom: 0%;
        left: 0%;
        right: auto;
    }

    .home-logo-left-gradient.right {
        background-image: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0));
        top: 0%;
        bottom: 0%;
        left: auto;
        right: 0%;
    }

    /* Animation for the first right to left marquee */
    @keyframes slide {
        0% {
            transform: translateX(calc(0% + 50px));
        }

        100% {
            transform: translateX(-100%);
        }
    }

    .logo-animate {
        animation: slide 35s infinite linear;
        /* Adjust the seconds for a slower or faster animation */
    }

    /* Animation for the second left to right marquee */
    @keyframes slidealt {
        0% {
            transform: translateX(calc(0% + 50px));
        }

        100% {
            transform: translateX(-100%);
        }
    }

    .logo-animate-alt {
        animation: slidealt 35s infinite linear;
        /* Adjust the seconds for a slower or faster animation */
        animation-direction: reverse;
    }
}

.footer {
    padding-top: 50px;

    a {
        &:hover {
            color: #ffca86 !important;
        }
    }

    .Copyright {
        border-top: 1px solid var(--secondary2);
        margin-top: 20px;
    }
}

.social,
.social-mobile {
    list-style: none;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 20px;

    li {
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        overflow: hidden;
        text-align: center;
        line-height: 30px;
        margin: 0 2px;

        a {
            display: block;
            background-color: white;
            color: var(--mainColor);
            width: 100%;
            height: 100%;

            i {
                line-height: 30px;
            }
        }
    }
}

.social {

    li {
        a {
            display: block;
            background-color: white;
            color: var(--mainColor);
            width: 100%;
            height: 100%;

            i {
                line-height: 30px;
            }
        }
    }
}

.social-mobile {

    li {
        a {
            display: block;
            background-color: var(--mainColor);
            color: white;
            width: 100%;
            height: 100%;

            i {
                line-height: 30px;
            }
        }
    }
}

.dropdown-menu[data-bs-popper] {
    margin-top: 1.7rem;
}

.dropdown-menu {
    border-radius: 0px 0px 15px 15px;
    border: 0px;

    li {
        padding: 0 10px;

        .dropdown-divider {
            border-top: 1px solid var(--secondary2);
        }

        .dropdown-item {
            color: var(--mainColor) !important;
        }

        .dropdown-item:focus,
        .dropdown-item:hover {
            background-color: var(--secondary2);
        }
    }
}

/*---------about page-------------*/
.about-page {
    .about-title {
        &::after {
            top: 10px;
            left: -18px;
            width: 120%;
        }

        h1 {
            position: relative;
            z-index: 1;
        }
    }

    figure {
        .image {
            height: 85vh;
        }
    }

    .card-list {
        box-shadow: 0px 47px 50px -20px #29578D26;

        ul {
            list-style: none;
            margin-top: 15px;

            li {
                color: var(--mainColor);
                line-height: 40px;
                position: relative;

                &::after {
                    background-image: url('../images/icons/check.svg');
                    background-repeat: no-repeat;
                    background-size: contain;
                    position: absolute;
                    content: '';
                    top: 8px;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;

                }
            }
        }
    }
}

.news-page {
    .main-title {
        h1 {
            position: relative;
            z-index: 1;
        }

        &::after {
            top: 15px;
            left: -11px;
            width: 120%;
        }
    }

    .news-card {
        p {
            font-size: 16px !important;
            color: var(--mainColor) !important;
        }

        .card-img {
            width: 100%;
            height: 400px;
            overflow: hidden;
        }

        a {
            img {
                transition: .4s ease-in-out;
            }
        }

        &:hover {
            a {
                img {
                    transition: .4s ease-in-out;
                    transform: scale(1.1);
                }
            }
        }
    }
}

.single-news-page {
    p {
        color: var(--mainColor) !important;
    }

    .news-slider {
        height: 85vh;
        width: 100%;
        overflow: hidden;

        img {
            width: 100%;
            height: 85vh !important;
        }
    }

    .date {
        display: flex;
    }

    iframe {
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100% !important;
        height: 550px !important;
    }
}

nav.breadcrumb {
    border-bottom: 1px solid #DEE5ED;

    .breadcrumb-item {
        a {
            color: var(--mainColor) !important;
            font-weight: bold;
        }
    }
}

// pagination
nav {
    ul.page-numbers {
        list-style: none;
        display: flex;
        justify-content: center;

        li {
            width: 35px;
            height: 35px;
            text-align: center;
            margin: 0 5px;
        }
    }
}

nav ul.page-numbers a.page-numbers,
nav ul.page-numbers span.page-numbers {
    padding: .375rem .75rem;
    position: relative;
    display: block;
    color: #29578D;
    width: 100%;
    height: 100%;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.page-numbers.current,
nav ul.page-numbers a.page-numbers:hover,
nav ul.page-numbers span.page-numbers:hover {
    background-color: #e7caa5 !important;
}

// our programs
.hero-section {
    iframe {
        width: 100% !important;
        height: 93vh !important;
    }
}

.programs-page {
    .main-title {
        &::after {
            top: 15px;
        }
    }

    .program-card {
        li {
            padding-bottom: 15px;
        }

        img {
            width: 100%;
            height: 320px;
            padding: 40px;
        }

        p {
            color: var(--mainColor) !important;
        }

        .card-body {
            padding: 1rem 1rem 1rem 2rem !important;
        }
    }

    .p-110 {
        padding: 0 110px !important;
    }
}

.program-page {
    .card.program-card {
        border-radius: 20px;
        overflow: hidden;
        margin-bottom: 15px;
        border: 2px solid #29578D33 !important;
        padding: 5px 20px;

        li {
            padding-bottom: 15px;
        }

        .card-title {
            padding: 0rem 2rem;
        }

        .card-text {
            padding: 0rem 2rem;
            color: #29578D;
            max-height: 2em;
            transition: max-height 0.4s ease-in-out;
            overflow: hidden;
            position: relative;
        }

        .card-text.read-more {
            max-height: 100%;
            /* Adjust this value according to the content height */
        }

        .read-more-link {
            position: absolute;
            top: 0;
            font-size: 25px;
            cursor: pointer;
        }
    }

    position: relative;

    .main-title::after {
        top: 15px;
    }

    .image-logo {
        width: 100%;
        height: 180px;
    }

    .showMore {
        position: absolute;
        top: 10px;
        right: 10px;
    }
}

.border-bottom {
    border-bottom: 3px solid #E7CAA54D;
}

.gallery-section {
    .main-title {
        h3 {
            position: relative;
            z-index: 1;
        }

        &::after {
            width: 120%;
        }
    }
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #E7CAA5;
}

.owl-theme .owl-dots .owl-dot span {
    width: 100px;
    border-radius: 3px;
    margin: 5px 0px;
    background: #29578D1A;
}

.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 30px;
}

.donations-section .nav-tabs .nav-item.show .nav-link,
.donations-section .nav-tabs .nav-link.active {
    position: relative;
    border-color: transparent;
    font-weight: bold;
    color: var(--mainColor) !important;

    &::after {
        position: absolute;
        width: 30px;
        height: 5px;
        background-color: #E7CAA5;
        content: '';
        margin: auto;
        right: 0;
        left: 0;
        bottom: 0;
    }
}

.nav-tabs {
    .nav-link {
        color: var(--mainColor);
    }

    border-bottom: 0px;
}

.no-list-style {
    list-style: none !important;
}

.pl-15 {
    padding-left: 15px !important;
}

.pl-2 {
    padding-left: 20px !important;
}

.information-section {
    .nav-tabs {
        margin-bottom: 50px;

        .nav-item {
            margin: 0 5px;
        }

        .nav-link {
            border: 1px solid var(--mainColor);
            border-radius: 30px;
        }

        .nav-link.active {
            background-color: var(--mainColor);
            color: white !important;
        }
    }

    .card.informarion-card {
        position: relative;

        &::after {
            position: absolute;
            content: '';
            bottom: 0;
            left: 0;
            right: 0;
            width: 85%;
            margin: auto;
            height: 3px;
            background-color: #E7CAA54D;
        }
    }
}

.overflow-hidden {
    overflow: hidden;
}

.events-cards {
    .card {
        a {
            img {
                transition: .4s ease-in-out;
            }
        }

        &:hover {
            .card-img {
                a {
                    img {
                        transition: .4s ease-in-out;
                        transform: scale(1.1);
                    }
                }
            }
        }
    }
}

.contact-form {

    .form-input,
    .form-select {
        border: 1px solid #9CB0C9;
        border-radius: 30px;
        color: var(--mainColor);
    }

    textarea.form-control {
        border: 1px solid #9CB0C9;
        border-radius: 20px;
    }
}

.form-control::placeholder {
    color: #29578D8F !important;
}

.navbar-light .navbar-toggler {
    border-color: transparent !important;
}

.about-section {
    .main-title {
        &::after {
            left: 0px;
            width: 45%;
            z-index: -1;
            top: 4px;
        }
    }
}

// loader
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    /* Adjust color based on your preference */
    z-index: 9999;
}

#loadingVideo {
    width: 400px;
    height: 400px;
    -o-object-fit: contain;
    object-fit: none;
    display: flex;
    margin: auto;
}

.d-none {
    display: none !important;
}

.is-mobile {
    display: none !important;
}

li#wp-admin-bar-wp-logo {
    display: none;
}

.offcanvas-start {
    background-color: var(--accent) !important;

    .main-title {
        &::after {
            top: 13px;
            left: -8px;
            width: 127%;
            height: 8px;
            z-index: -1;
        }
    }
}

.offcanvas-body {
    padding: 0rem 1rem !important;
}

.offcanvas-header .btn-close {
    color: var(--mainColor) !important;
}

.icon-drop {
    position: absolute;
    right: 5px;
    top: 15px;
}

.navbar-light .navbar-toggler {
    color: transparent !important;
}

.navbar {
    .non-active.primary-color {
        display: none !important;
    }
}

.nav-item.dropdown .dropdown-menu {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

span.non-active.primary-color.font-bold {
    display: none !important;
}

.is-mobile {
    .copy-btn {
        position: absolute;
        left: -16px;
        top: -24px;

.video-container iframe{
    width: 100%!important;
    height: 100vh!important;
}}
}