:root {
    --white: #ffffff;
    /*--primary:#00648C;*/
    --primary: linear-gradient(to left, #D69555, #E3B281);
    --primarylight: #00A2E8;
    --black: #000000;
    --grey: #D9D9D9;
    --dustygrey: #929292;
}
body {
    /*font-family: "IBM Plex Sans Arabic", sans-serif;*/    
    font-family: "Cairo", sans-serif;       
}


.faoolun_navbar {
    /*background-color: var(--white) !important;*/
    background-color: rgba(0,0,0,0.4) !important;
    box-shadow: 1px 4px 3px 0px rgba(0, 0, 0, 0.15) !important;
    font-family: "Beiruti" !important;
    font-size: 1.2rem;
}

.navbar-dark .navbar-toggler {
    /*background-color: var(--primary) !important;*/
    background-color: rgba(0,0,0,0.4) !important;
}

.faoolun_navbar .navbar-brand
{
    margin-right: 5rem;
    font-size: 1.5rem;
    font-weight: 600;
}
.faoolun_navbar .nav-link {
    /*color: var(--primary) !important;*/
    color: var(--white) !important;
}
.faoolun_navbar .nav-item{
    padding: 1rem 1rem;

}
.faoolun_navbar .nav-link.active {
    /*border-bottom: 2px solid var(--primarylight);*/
    border-bottom: 2px solid #D69555;
    display: inline-block;
    font-weight: 450;
}

.navbar-expand-lg .navbar-nav .nav-link:hover {
    border-bottom: 2px solid #D69555;
    font-weight: 500;
    font-family: "Beiruti" !important;
    /*    transform: scale(1.02);*/
}
@media (max-width: 768px) {
    .faoolun_navbar .nav-item {
        padding: 0.2rem 0.2rem;
    }

    .navbar-expand-lg .navbar-nav .nav-link:hover {
        border-bottom:none;
        font-weight: 500;
        font-family: "Beiruti" !important;
        /*    transform: scale(1.02);*/
    }
}
@media (min-width: 992px){
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 0;

    }
       
    .footernavbar .nav-link{
        padding: 0.5rem 1rem !important;
    }
    .adjust-navbar-image-size{
        padding-left:40px !important;
    }
}

.navbarbtn1 {
    background-color: var(--white);
    /*color: var(--white);*/
    /*border: 1px solid  var(--primary);*/
    /*color: var(--primary);*/
    border: transparent;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    font-family: "Beiruti" !important;
    /*background: transparent;*/
}
    .navbarbtn1:focus {
        outline: none !important;
        box-shadow: none !important;
       
    }

    .navbarbtn1:hover {
/*        border: 1px solid var(--primary);*/
        background-image: var(--primary);
        color: white;
    }

.navbarbtn2 {
    /* border: 1px solid white;*/
    border: transparent;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    color:black;
    background-color: var(--white);
    font-family: "Beiruti" !important;
}

    .navbarbtn2:hover {
        /*background-color: var(--primary);*/
        background-image: var(--primary);
        color: white;
    }

.navbarbtn2:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* navbar end */

/* banner image section start */
.banner-image {
    height: 22rem;
    background-position: center;
    background-repeat: no-repeat;
    background-repeat: repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-heading p {
    color: var(--white) !important;
    font-weight: 700;
    font-size: 2.8rem;
/*    text-shadow: 2px 2px 4px #00000069;*/
}

.banner-description p {
    color: var(--white) !important;
    max-width: 60%;
    font-size: 1.3rem;
    text-align: center;
    font-family: "Beiruti" !important;
    font-weight: 400;
/*    text-shadow: 2px 2px 4px #00000069;*/
}

.banner-button .btn {
    background: rgba(0, 0, 0, 0.33) !important;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    font-size: 1.1rem;
    border-radius: 6px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 4px;
    padding-top: 4px;
    /*box-shadow: 2px 2px 4px #00000069;*/
    font-family: "Beiruti" !important;
}

    .banner-button .btn:hover {
        border: 1px solid rgba(214, 149, 85, 1);
    }


.offer-button .btn-text {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%);
    /*border: 1px solid #D69555;*/
    border: none !important;
    font-weight: 400;
    font-size: 1rem;
    color: white !important;
    border-radius: 5px;
    padding-left: 1rem;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 1rem;
    /*box-shadow: 2px 2px 4px #00000069;*/
    font-family: "Beiruti" !important;
}

.offer-button .btn-text:hover {
    box-shadow: 2px 2px 4px #00000069;
    font-weight: 400;
}

.payment-button .payment-text {
    background: rgba(247, 247, 247, 1);
    border: 1px solid rgba(0, 0, 0, 0.07);
    font-weight: 500;
    font-size: 1.2rem;
    border-radius: 14px;
    font-family: "Beiruti" !important;
    color: rgba(219, 162, 104, 1) !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

.payment-main-button .payment-main-text {
    background: #FFFFFF;
    border: 1px solid #00000012;
    font-weight: 300;
    font-size: 1rem;
    color: #649885 !important;
    padding-left: 1rem;
    font-family: "Beiruti" !important;
    padding-right: 1rem;
}

.payment-main-button .payment-main-text:focus {
    background: #FFFFFF;
    border: 1px solid #00000012;
    font-weight: 300;
    font-size: 1rem;
    color: #649885 !important;
    padding-left: 1rem;
    font-family: "Beiruti" !important;
    padding-right: 1rem;
}




@media (max-width: 786px) {
    .banner-description p {
        max-width: 70%;
    }
}

@media (max-width: 600px) {
        .banner-image {
            height: 26rem;
        }

        .banner-description p {
            max-width: 90%;
        }
    }
    /* banner image section end */


    /* offers section start */
    .offers-section {
        margin-top: 4rem;
    }

    /*.offer-heading-para {
        background: var(--primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }*/
    .offer-heading-para p {
         background: var(--primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: var(--primary);
        font-weight: 800;
        font-size: 2.3rem;
    }

.reviews-carousel-section {
    background-color: rgba(247, 247, 247, 1);
/*    padding-top: 1rem;*/
}
.change-bg-color-of-index-carousel {
    background-color: rgba(227, 177, 128, 0.09) !important;
    padding-top: 2rem;
    padding-bottom: 2rem;
}


.offer-headingDescription p {
    color: #00000085 !important;
    color: rgba(0, 0, 0, 0.52) !important;
    width: 41%;
    font-family: "Beiruti" !important;
    font-weight: 500;
    font-size: 1rem;
}

.carousel-headingDescription p {
    color: rgba(0, 0, 0, 0.52) !important;
/*    width: 52%;*/
    font-weight: 500;
    font-family: "Beiruti" !important;
    font-size: 1rem;
    margin-bottom:10px;
}

    .card-offers-section {
        margin-top: 3rem;
        margin-bottom: 4rem;
    }

    .card {
/*        box-shadow: 1px 4px 3px 0px rgba(0, 0, 0, 0.25) !important;*/
        border: none;
    }
.payment-card-adjustment {
    box-shadow: none;
    padding:1rem;
    border-radius:10px;
    cursor:pointer;
    border: 1px solid rgba(199, 199, 199, 1);
}
.payment-card-body-content {
    font-weight: 500;
    font-family: "Beiruti" !important;
    font-size: 1.2rem;
    color: rgba(0, 0, 0, 0.7)
}

.offer-img {
    padding-bottom: 60%;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.offer-name p {
    font-weight: 700;
    font-size: 1rem;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    color:rgba(0, 0, 0, 0.7)  !important;
}

.offer-description {
    color: rgba(0, 0, 0, 0.6);
    font-size: 1rem;
    font-weight: 500;
}

.offer-description-rating {
    color: rgba(0, 0, 0, 0.45) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    font-family: "Beiruti" !important;
}


.rating-color {
    counter-reset: var(--black);
}

.single-line-ellipsis {
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow: hidden;
    font-family: "Beiruti" !important;
    font-weight: 500;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    color: #00000085 !important;
}

.offer-detail {
    color: rgba(100, 152, 133, 1) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    font-family: "Beiruti" !important;
}

    .show-more-button {
        text-align: center;
    }

        .show-more-button a {
            background-color: var(--white);
            border: 1px solid rgba(95, 95, 95, 0.15);
            border-radius: 51px;
            color: var(--primary);
            padding-left: 2rem;
            padding-right: 2rem;
            padding-top: 0.3rem;
            padding-bottom: 0.3rem;
            box-shadow: 1px 4px 3px 0px rgba(0, 0, 0, 0.20) !important;
        }

        .show-more-button:focus {
            outline: none !important;
            box-shadow: none !important;
        }
    /* offers section end */


    /* result section start */
    .result-section {
/*        margin-top: 3.5rem;
        margin-bottom: 3.5rem;*/
        background-image:url('../img/Results Section.png');
        background-size:cover;
        display:flex;
        justify-content:center;
        flex-direction:row;
        min-height:34rem;
        background-position:center;
        background-repeat:no-repeat;
    }

    .result-heading p {
        color: var(--primary) !important;
        font-weight: 700;
        font-size: 2.4rem;
    }

@media (max-width: 768px) {
        .result-heading p {
            font-size: 1.8rem;
            padding-top: 1.1rem;
        }
    }

.result-description p {
    /*    color: #5f5f5f;*/
    font-weight: 500;
    font-size: 1rem;
    font-family: "Beiruti" !important;
    color: rgba(0, 0, 0, 0.52) !important;
}

.result-button .btn {
    /*background-color: var(--primary);*/
    background-image: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 5px;
    color: var(--white);
    padding-left: 1rem;
    font-family: "Beiruti" !important;
    padding-right: 1rem;
    font-size: 1.1rem;
}

    .result-image {
        width: 80%;
        margin-top: -26px;
        margin-bottom: -26px;
        position: relative;
        z-index: 1;
    }

        .result-image img {
            width: 100%;
            display: block;
        }

    .content-alignment {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }

    /* Media queries for responsive design */
    @media (max-width: 768px) {
        .content-alignment {
            align-items: center;
            text-align: center;
            margin-top: 20px;
        }

        .result-heading p,
        .result-description p {
            text-align: center;
        }

        .result-button {
            text-align: center;
            padding-bottom: 1.1rem;
        }

        .result-section {
            /* min-height:40rem;*/
            padding-top: 5rem;
            padding-bottom: 3rem;
        }


    }

    @media (min-width: 769px) {
        .result-section .container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        /* .content-alignment {
        align-items: center;
        text-align: center;
        margin-top: 20px;
    }*/
    }

    /* result section end */

    .adjustColor {
        background: #F7F7F7;
        margin-bottom: 3rem;
    }

    @media screen and (max-width: 992px) {
        .adjustColor {
            background: #F7F7F7;
            margin-bottom: 3rem;
        }
    }

    @media screen and (max-width: 575px) {
        .adjustColor {
            background: #F7F7F7;
            margin-bottom: 3rem;
        }
    }

    .contact-heading {
        background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        font-size: 2.5rem;
        font-weight:700;
    }

.contact-paragraph {
    font-size: 1rem;
    text-align: justify;
    font-family: "Beiruti" !important;
    font-weight: 500;
    color:#575757;
}

.support-link {
    font-family: "Poppins" !important;
    font-weight: 500;
    text-decoration:none;
    color:#649885;
    font-size:0.8rem;
}

    .support {
        padding: 1rem;
        margin-top: 1.5rem;
        box-shadow: 3px 6px 10px -3px rgba(30,30,30,0.13);
        background-color: rgb(255 255 255) !important;
        border: 1px solid var(--grey);
        border-radius: 1rem;
        margin-left: 4rem;
    }

        .support p {
            font-size: 0.98rem;
            text-align: justify;
            font-family: "Beiruti" !important;
            font-weight: 500;
        }

    @media screen and (max-width: 992px) {
        .support {
            margin-top: 1rem;
            background-color: #ffffff !important;
            margin-left: 0rem;
        }
    }

    .cardAdjustment {
        padding: 1rem;
        box-shadow: 3px 6px 10px -3px rgba(30,30,30,0.13);
        background-color: rgb(255 255 255) !important;
        border: 1px solid var(--grey);
        border-radius: 1rem;
/*        margin-left: -4rem;
        margin-right: 6rem;*/
    }

        .cardAdjustment label {
            font-family: "Beiruti" !important;
            font-weight: 500;
            color:#636363;
            margin-bottom:5px;
        }

        @media screen and (max-width: 992px) {
            .cardAdjustment {
            background-color: #ffffff !important;
            margin-bottom: 5rem;
            margin-left: 0rem;
            margin-right: 0rem;
        }
    }

    .input-bg-color {
        background-color: #EEEEEE !important;
    }

.btn-bg-color {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%);
    border: #D69555;
    font-family: "Beiruti" !important;
    font-weight: 500;
}

    /* carousel CSS Start */

.carousel-heading {
    background-image: var(--primary);
/*    margin-bottom: 30px;*/
    font-size: 2.2rem;
    font-weight: 700;
/*    background: rgba(219, 162, 104, 1);*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

    .carousel-box {
        background-color: var(--gold);
        padding: 20px;
        border-radius: 4px;
    }


    .owl-prev,
    .owl-next {
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        background-color: #000;
        color: #fff;
        border: none;
        padding: 10px;
        font-size: 24px;
        display:none;
    }
    .owl-next span {
        display: none !important; 
    }
    .owl-prev span {
        display: none !important;
    }

        .owl-stage-outer {
            padding-bottom: 1.1rem;
            /*padding-right:1.1rem;*/
        }

        .owl-prev img,
        .owl-next img {
            width: 50px;
        }

    .owl-prev {
        left: -5%;
    }

    .owl-next {
        right: -5%;
    }

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots button:hover span {
/*    background-color: var(--primary);*/
}

    .owl-theme .owl-dots .owl-dot span {
        background-color: #ccc;
        opacity: 1;
    }

    .owl-nav button:hover {
        background-color: transparent !important;
    }

.casesbtn .nav-link {
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.42);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 30px;
    /*    color: #00000080 !important;*/
    color: rgba(65, 65, 65, 1) !important;
    font-family: "Beiruti" !important;
    padding-left: 2rem;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    max-width: 150px;
    padding-right: 2rem;
    transition: all 0.3s ease-in-out;
    margin-left: 1rem;
    /*    font-family:"Beiruti";*/
}
.adjust-stars-color{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.stars {
    background-color: rgba(245, 245, 245, 1);
    font-weight: 700;
    font-size: 0.875rem;
    color: #414141 !important;
    padding: 0.5rem;
    border-radius: 5px !important;
    /*margin-left: 1rem;*/
    /*width: 65%;*/
}

    .tabs-styles {
        color: rgba(0, 100, 140, 1);
        font-weight: 500;
        font-size: 18px;
    }

.casesbtn .nav-link.active {
    background: linear-gradient(275.62deg, rgba(92, 149, 128, 0.35) 0.54%, rgba(157, 176, 169, 0.35) 98.03%);
    border: 1px solid #5C9580;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 30px;
    color: rgba(65, 65, 65, 1) !important;
    font-family: "Beiruti" !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    max-width: 150px;
}

    .underline {
        height: 2px;
        background-color: rgba(203, 203, 203, 1);
    }

    .nav-tabs {
        border: none;
    }

    @media (max-width: 576px) {

        .casesbtn {
            flex-wrap: nowrap !important;
            overflow-y: hidden;
        }

        /* .makescrollable {
            flex-wrap: nowrap !important;
        }*/

        .casesbtn .nav-link {
            font-size: 0.875rem;
            border-radius: 20px;
            padding-left: 1.4rem;
            padding-right: 1.4rem;
        }
        .casesbtn .nav-link.active {
            font-size: 0.875rem;
            border-radius: 20px;
            padding-left: 1.4rem !important;
            padding-right: 1.4rem !important;
        }
    }
/*  Carousel CSS End */
/* poetry section css start */
.poetry-section {
    height: 22rem;
    /*background-color: rgba(227, 243, 255, 1);*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('../img/faqsection.png');
    background-size: cover;
    background-position:bottom;
/*    padding-bottom:-50px;*/
    background-repeat: no-repeat;
    color: var(--white);
}

.poetry-heading p {

    font-weight: 700;
    font-size: 1.8rem;
    color: var(--white) !important;
}

.poetry-sub-heading p {
    /*    color: var(--primary) !important;*/
    font-weight: 400;
    font-size: 2rem;
    font-family: "Beiruti" !important;
    color: rgba(255, 255, 255, 0.8);
}
    /* poetry section css end */


    /* common question section css start */
    .question-section {
        min-height: 24rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
.question-heading p {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: 1.8rem;
    padding-bottom: 1.1rem;
}

    

.accordian-textColor {
    color: #5f5f5f;
}
    .accordian-width{
        width:50% !important;
    }

@media (max-width: 768px) {
    .poetry-heading p {
        margin-bottom:0px !important;
    }

    .poetry-sub-heading p {
        margin-bottom:0px !important;
    }
}
@media (max-width: 786px) {
    .accordian-width {
        width: 90% !important;
    }
}
.question-dropdown {
    margin-bottom: 1rem;
    color: rgba(95, 95, 95, 1);
    font-weight: 400;
    font-size: 1.2rem;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 10px !important;
    background-color: white;
}   

    .question-dropdown2:hover {
    background-image: linear-gradient(to left, #5C9580, #9DB0A9) !important;
    color: var(--white) !important;
}

.accordion-button:hover {
    background-image: linear-gradient(to left, #5C9580, #9DB0A9) !important;
    color: var(--white) !important;
}


.accordion-open {
    background-image: linear-gradient(to left, #5C9580, #9DB0A9) !important;
    color: var(--white) !important;
}
.accordion-open .accordion-button {
    color: var(--white) !important;
}

.accordion-openTwo {
    background-image: linear-gradient(to left, #5C9580, #9DB0A9) !important;
    color: var(--white) !important;
}

.accordion-openTwo .accordion-button {
    color: var(--white) !important; 
}


.accordion-button:hover::after {
    background-image: url('../img/arrow-down-sign-to-navigate 1 (2).png'); 
}

.accordion-open .accordion-button::after {
    background-image: url('../img/arrow-down-sign-to-navigate 1 (2).png');
}

/* Ensure the default state has the white image */
.accordion-openTwo .accordion-button:not(.collapsed)::after {
    background-image: url('../img/arrow-down-sign-to-navigate 1 (2).png');
}


.question-dropdown2 {
    color: rgba(95, 95, 95, 1);
    border-radius: 10px !important;
}
 
.accordian_design {
    color: rgba(95, 95, 95, 1);
    font-weight: 500;
    font-size: 1.2rem;
}
.accordion-button:hover .accordian_design {
    color: white;
}
/* Color when the accordion is active/expanded */
.accordion-button:not(.collapsed) .accordian_design {
    color: white;
}


    .accordion-button_d:focus {
        box-shadow: none;
        outline: none;
    }

    .question-dropdown:focus {
        outline: none !important;
        border: 1px solid rgba(200, 200, 200, 1);
        box-shadow: none !important;
    }
    /* common question section css end */


    /* review section css start*/
    .review-card {
        width: 100%;
        max-width: 600px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        color: #0000008c;
    }

        .review-card .user-info {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

            .review-card .user-info img {
                width: 40px;
                height: 40px;
                object-fit: fill;
                border-radius: 50%;
            }

            .review-card .user-info .name {
                font-weight: bold;
                margin-right: 12px;
                font-size:1.1rem;
                font-family: "Beiruti" !important;
                font-weight: 600;
                color: rgba(100, 152, 133, 1);
            }

            .review-card .user-info .stars {
                color: #ffcc00;
                margin-right: 5px;
                font-size: 0.7rem;
            }

.review-card {
    background-color: white;
}

    .review-time {
        color: #000;
        font-size: 0.8rem;
        margin-right:0.8rem;
    }

.review-card .review-text {
    margin-top: 10px;
    text-align: right;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 600;
    font-family: "Beiruti" !important;
    margin-bottom: 10px;
    font-size:0.9rem;
   
}

    .review-card .show-more {
        color: rgba(23, 23, 23, 1);
        cursor: pointer;
        font-weight: 450;
        font-size: 15px;
        text-decoration: underline;
    }

    .owl-nav {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }

        .owl-nav button {
            background: none;
            border: none;
        }

            .owl-nav button img {
                width: 30px;
            }

    @media (max-width: 768px) {
        .review-card {
            padding: 15px;
        }

        .review-card .user-info {
            flex-direction: column;
            align-items: flex-start;
        }
        .review-card .user-info img {
            margin-right: 0;
            margin-bottom: 10px;
        }
        .accordian_design{
            font-size:0.9rem;
        }
       
    }
    @media (max-width: 500px){
        .accordian_design {
            font-size: 0.7rem;
        }
    }
/* review section css end */
/* courses section css start */
.courses-banner {
    min-height: 10rem;
    background-image: url('../img/Rectangle 236.png');
    display: flex;
    background-position:bottom;
    background-size:cover;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .courses-header-section-headings p {
        color: rgba(255, 255, 255, 1) !important;
        font-weight: 400 !important;
        font-size: 1.7rem !important;
        padding: 1.1rem !important;
    }
    /* search bar css start */
    .search-container {
        position: relative;
        margin: 20px auto;
        width: 100%;
        direction: rtl;
    }

        .search-container input[type=text] {
            width: calc(100%);
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 1rem !important;
            padding-right: 1rem;
            border: 1px solid rgba(0, 0, 0, 0.15) !important;
            border-radius: 5px;
            font-size: 1.1rem;
            /*box-shadow: 1px 4px 3px 0px rgba(0, 0, 0, 0.15) !important;*/
        }

            .search-container input[type=text]:focus {
                border: 1px solid rgba(0, 0, 0, 0.15) !important;
                outline: none;
            }

        .search-container .search-icon {
            position: absolute;
            top: 50%;
            left: 1rem;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .search-container input[type=text]::placeholder {
            display: flex;
            justify-content: center;
            align-content: center;
        }

@media screen and (max-width: 600px) {
    .search-container {
            max-width: 100%;
            /* padding: 0px 10px;*/
        }

            .search-container input[type=text] {
                width: 100%;
            }

            .search-container .search-icon {
                left: 1rem;
                top:20px;
            }
       
    }
    /* sort buttons css start */
    .button-container {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }

.filter-btn {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%);
    color: #ffffff;
    border: 1px solid #D69555;
    font-family: "Beiruti" !important;
    font-weight: 500;
}

.sort-btn {
    background-color: #ffffff;
    color: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(77, 77, 77, 0.34);
    font-family: "Beiruti" !important;
    font-weight: 500;
}
.fa-filter:before {
    font-size: 0.8rem;
    padding-left: 8px;
}

    .sort-btn:hover {
        background-color: #ffffff;
        color: rgba(0, 0, 0, 0.7) !important;
        border: 1px solid rgba(77, 77, 77, 0.34) !important;
    }

    .filter-btn:hover {
        background-color: rgba(0, 100, 140, 1) !important;
        color: #ffffff !important;
        border:none !important;
    }

    .sort-btn:hover {
        background-color: #ffffff;
        color: rgba(0, 100, 140, 1);
        border: 1px solid rgba(0, 100, 140, 1);
    }
    /* sort buttons css end */
    .filter-card {
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
/*        box-shadow: 1px 4px 3px 0px rgba(0, 0, 0, 0.15) !important;*/
    }

        .filter-card:hover {
            background-image: linear-gradient(to left, #5C9580, #9DB0A9) !important;
            color: var(--white) !important;
        }
        .filter-card-title-heading {
            color: rgba(0, 0, 0, 0.7);
            font-weight:600;
            font-size:1.2rem;
        }

.filter-card:hover a, .filter-card:hover a p, .filter-card:hover .offer-name, .filter-card:hover .offer-description, .filter-card:hover .offer-detail,
.filter-card:hover .offer-rating a, .filter-card:hover .filter-card-title-heading,
.filter-card:hover .rating-colors, .filter-card:hover .filter-card-title {
    color: var(--white) !important; /* Ensure all text and links inside the card body are white */
}

    /*.filter-card:hover img {
        filter: brightness(0) invert(1);*/ /* Optionally change image color to white on hover */
    /*}*/

    .accordion-button:hover::after {
        color: white !important; 
    }

.card:hover {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

.bookmark-icon i {
    font-size: 24px;
    /*color: #ffc107;*/
    color: #a0a1a2;
    padding-left: 40px;
    padding-top: 130px;
}

    .filter-card-body {
        padding: 15px;
    }

    .rating-colors {
        color: rgba(146, 146, 146, 1);
    }

.filter-card-title {
    font-size: 1.25rem;
    font-weight: bold;
    font-weight: 700;
    font-family: "Cairo", sans-serif !important;
    color: rgba(0, 0, 0, 0.7);
    /*    color: rgba(0, 100, 140, 1);*/
}

.filter-card-text {
    font-size: 15px;
    color: rgba(95, 95, 95, 12);
    font-weight: 500;
    font-family: "Beiruti" !important;
}

    .filter-card-rating {
        font-size: 0.9rem;
        color: #666;
        display: flex;
        align-items: center;
    }

        .filter-card-rating i {
            color: #ffc107;
            margin-left: 5px;
        }

.filter-card-duration {
    font-size: 1.1rem;
    font-weight: 500;
    font-family: "Beiruti" !important;
    color: rgba(100, 152, 133, 1);
}

.filter-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    height: 13rem;
}

    .rating-btn {
        position: absolute;
        top: 10px;
        left: 10px;
        /* direction: rtl; */
    }

    .download-more-button {
        text-align: center;
        margin-bottom: 3rem;
    }

        .download-more-button a {
            background-color: var(--white);
            border: 1px solid rgba(95, 95, 95, 0.15);
            border-radius: 51px;
            color: #DBA268;
            padding-left: 2rem;
            padding-right: 2rem;
            font-weight: 400;
            font-size: 1rem;
            padding-top: 0.3rem;
            padding-bottom: 0.3rem;
            box-shadow: 1px 4px 3px 0px rgba(0, 0, 0, 0.20) !important;
            font-family: "Beiruti" !important;
        }

        .download-more-button:focus {
            outline: none !important;
            box-shadow: none !important;
        }
    /* medium to large devices Devices */
    @media (min-width: 775.98px) {
        .filter-card {
            width: 100%;
            margin: 10px auto;
        }
    }
    /* Small Devices */
    @media (max-width: 575.98px) {
        .filter-card .row.no-gutters {
            flex-direction: column;
        }

        .filter-card {
            width: 100%;
            margin: 10px auto;
        }

        .bookmark-icon i {
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }
    /* Responsive Design */
    /* training section css start */
    .training-section {
        min-height: 12rem;
        background-color: #FCF6F1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

.training-heading p {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.6rem;
}


        .section-image {
            /*justify-content: center !important;*/
        }

        .section-image img {
            height: 35px;
            justify-content: center !important;
        }

            .section-image p {
                color: #DBA268;
                font-weight: 500;
                font-family: "Beiruti" !important;
                font-size: 1.2rem;
            }
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .training-heading p {
            font-size: 1.5rem;
        }

        .section-image p {
            font-size: 1rem;
        }

        .section-image {
            justify-content: center !important;
        }
    }

    @media (max-width: 576px) {
        .section-image {
            float: right;
            padding-right: 45px;
            padding-left: 10px;
        }

            .section-image p {
                font-size: 0.9rem;
            }

        .training-section {
            height: 16rem;
            /*background-color: rgba(227, 243, 255, 1);*/
            background-color: #FCF6F1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }

    @media (max-width: 325px) {

        .training-section {
            height: 19rem;
            /*background-color: rgba(227, 243, 255, 1);*/
            background-color: #FCF6F1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
    /* training section css ende */
    /* goals section start */
.goals-section {
/*    margin-top: 2rem;*/
/*    margin-bottom: 4rem;*/
    background-color: rgba(247, 247, 247, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 0;
}

    .goals_image {
        padding-bottom: 50%;
        /*box-shadow: 0px -13px 5px -1px rgba(227, 243, 255, 1);*/
        overflow: hidden;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

.goals-heading p {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family:  "Cairo", sans-serif !important;
    color: transparent;
    font-weight: 700;
    font-size: 2rem;
}

.goals-description p {
/*    color: var(--black) !important;*/
    font-weight: 500;
    font-size: 1rem;
    font-family: "Beiruti" !important;
    color: rgba(95, 95, 95, 1) !important;
}

.goals-button .btn {
    background: linear-gradient(0deg, #DBA268, #DBA268),linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%);
    border: 1px solid var(--primary);
    border-radius: 5px;
    color: var(--white);
    font-size:1.1rem;
    font-family: "Beiruti" !important;
    padding: 0.5rem 1rem;
}

    .content-alignment {
        display: flex;
        flex-direction: column;
        text-align: justify;
        align-items: flex-start;
    }
    /* Small devices (landscape phones, less than 768px) */
    @media (max-width: 767.98px) {
        .goals-section {
            margin-top: 2rem;
            padding: 1rem;
        }

        .goals-heading p {
            font-size: 1.5rem;
        }

        .goals-description p {
            font-size: 1.1rem;
        }
    }
    /* Extra small devices (portrait phones, less than 576px) */
    @media (max-width: 575.98px) {
        .goals-section {
            margin-top: 1.5rem;
            padding: 1rem;
        }

        .goals-heading p {
            font-size: 1.3rem;
        }

        .goals-description p {
            font-size: 1rem;
        }
    }
    /* courses section css end */

    .profile-header {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        margin-top: 20px;
    }

    .profile-image img {
        /* width: 25rem;
        height: 25rem;
        margin-right: 20px;*/
    }

    .profile-info {
        flex: 1;
    }

.phoneNumber-input input {
    direction: rtl; /* This will make the input field start text from the right */
    text-align: left; /* This ensures text is aligned to the left */
}

        .profile-info h1 {
            background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            font-weight:700;
        }

.profile-info p {
    margin: 10px 0;
    text-align: justify;
    font-size: 1.1rem;
    color: #686868;
    font-family: "Beiruti" !important;
    font-weight: 500;
}
.about-line {
    width:80px;
    height:10px;
    background-image:var(--primary);
}

.social-media {
    margin-right: 15rem;
}

        .social-media a {
            margin: 0 5px;
        }

        .social-media img {
            width: 30px;
            height: 30px;
        }

    .how-we-teach {
        margin-top: 40px;
        text-align: center;
    }

        .how-we-teach h2 {
            background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            font-weight:700;
        }

    .learning-methods {
        /* display: flex;
        justify-content: space-around;
        margin-top: 20px;*/
    }

    .method {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        /*width: 30%;*/
        text-align: center;
    }

        .method img {
            width: 100%;
            height: 150px;
        }

        .method h4 {
            background: linear-gradient(275.62deg, #5C9580 0.54%, #9DB0A9 98.03%);
            color: #ffffff;
            /*position: absolute;*/
            bottom: 0;
            left: 0;
            right: 0;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            padding: 1.3rem;
            text-align: center;
            margin-bottom: -1px;
            font-size: 1.2rem;
            font-weight: 700;
        }

        .method p {
            color: #686868;
            font-size: 1rem;
            padding: 1.2rem;
            font-family: "Beiruti" !important;
            font-weight:500;
        }


/* courses detail section css start */

/* 1st section css start */
.courses-detail-section {
    /*background-color: rgba(247, 247, 247, 1);*/
    background-image: url('../img/BG Image.png');
    color: var(--white) !important;
    padding: 2rem 0;
    min-height: 60vh;
    background-size:cover;
    background-position:bottom;
}

.courses-detail-heading p {
    color: var(--primary) !important;
    font-weight: 700;
    font-size: 1.8rem;
}

.already_registered p {
    color: var(--primary) !important;
    font-weight: 700;
    font-size: 1.2rem;
}

.courses-detail-description p {
    color: var(--white) !important;
    font-weight: 500;
    font-family: "Beiruti" !important;
    font-size: 1rem;
}

.courses-detail-button .btn {
    background: linear-gradient(0deg, #DBA268, #DBA268), linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%);
    /*border: 1px solid #D69555;*/
    border-radius: 5px;
    color: var(--white);
    font-weight: 500;
    font-family: "Beiruti" !important;
    padding: 0.5rem 1rem;
}

.certificate-card {
    background: #0000004D;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    padding: 15px;
    width: 100%;
    text-align: right;
}

.certificate-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
}

.certificate-card-subtitle {
    color: rgba(255,255,255,0.6);
    font-size: 1rem;
    font-family: "Beiruti" !important;
    font-weight: 500;
}

hr {
    width: 100%;
/*    border: 1px solid rgba(0, 0, 0, 0.24);*/
}

.tasneef {
    font-size: 1.2rem;
    font-weight: 500;
    font-family: "Beiruti" !important;
    color: var(--white);
}

.certificate-card-content {
    width: 100%;
}

.adjust-space {
    margin-bottom: -1rem;
}

.bookmark {
    color: rgba(95, 95, 95, 0.7);
    font-size: 1.5em;
    margin-right: auto;
    display: inline-block;
}

.certificate-card-link {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size:1.1rem;
    font-family: "Beiruti" !important;
    text-decoration: none;
    margin-top: 15px;
    font-weight: 500;
}

.certificate-card-content p {
    font-weight: 500;
    font-size: 18px;
    font-family: "Beiruti" !important;
    /*    color: var(--white);*/
    margin: 14px 0;
    color: rgba(255,255,255,0.8);
}

    .certificate-card-content p strong {
        font-size: 1rem;
    }
/* 1st section css end */


/* 2nd section css start */
.about-course-tabs .nav-link {
    text-decoration: none;
    /*padding: 0.5rem 2rem;*/
    font-size: 1.2rem;
    font-weight: 500;
    font-family: "Beiruti" !important;
    background-color: var(--white);
    color: rgba(86, 86, 86, 1);
    border: 0px solid transparent;
}

    .about-course-tabs .nav-link.active {
        background-color: rgba(245, 247, 248, 1);
        color: rgba(100, 152, 133, 1);
        font-size: 1.2rem;
        font-weight: 500;
        font-family: "Beiruti" !important;
        border-radius: 5px;
        border: none;
    }

.underline {
    height: 1px;
    /*width: 850px;*/
    background-color: rgba(0, 0, 0, 0.21);
}

.nav-tabs {
    border: none;
}

.casesIntro {
    font-weight: 700;
    font-size: 1.8rem;
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.responsive-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

    .responsive-list li {
        display: flex;
        align-items: flex-start;
        padding: 10px 0;
    }

        .responsive-list li:last-child {
            border-bottom: none;
        }

    .responsive-list p {
        margin: 0;
        flex: 1;
        font-family: "Beiruti" !important;
        font-size: 1.1rem;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.7);
        text-align: right;
    }


@media (max-width: 576px) {
    .about-course-tabs {
        flex-wrap: nowrap !important;
        overflow-y: hidden;
    }

    .makescrollable {
        flex-wrap: nowrap !important;
    }
}
/* 2nd section css end */


/* 3rd section css start */
.professional-certificate-section {
    margin-top: 0.8rem;
    border-radius: 10px;
    border: 1px solid rgba(214, 214, 214, 1);
    background-color: transparent !important;
    margin-bottom: 0.5rem;
    padding: 15px;
    background-color: rgba(227, 243, 255, 1);
}

.professional-certificate-heading p {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: 1.8rem;
}

.professional-certificate-description p {
/*    color: var(--black) !important;*/
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
    font-family: "Beiruti" !important;
    font-size: 1.1rem;
    text-align: justify !important;
}

.professional-certificate-image {
    width: 55%;
    overflow-x: visible;
    background-position-x: right;
    position: relative;
    margin-top: -3rem;
    margin-left: 2rem;
    margin-bottom: -3rem;
    z-index: 1;
}

    .professional-certificate-image img {
        margin-top:15px;
        width: 100%;
        display: block;
    }

.professional-certificate-alignment {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .professional-certificate-alignment {
        align-items: center;
        text-align: center;
        margin-top: 20px;
    }
    @media (max-width: 576px) {
        .professional-certificate-alignment {
            align-items: center;
            text-align: center;
            margin-top: 35px;
        }
    }

    .professional-certificate-heading p,
    .professional-certificate-description p {
        text-align: center;
    }

    .professional-certificate-image {
        width: 80%;
        margin-top: 20px;
    }
}
/* 3rd section css end */

/* 4rd section css start */

.professional-certificate-7-section {
    margin-top: 0.8rem;
    border-radius: 10px;
    background-color: transparent !important;
    margin-bottom: 0.5rem;
}

.professional-certificate-7-heading p {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    font-size: 1.8rem !important;
    color: rgba(0, 100, 140, 1);
}

.professional-certificate-7-description p {
    font-weight: 500;
    font-family: "Beiruti" !important;
    color: rgba(0, 0, 0, 0.7) !important;
    font-size: 1.1rem;
    text-align: justify !important;
}

.more-certificate-btn {
    text-decoration: none;
    color: rgba(0, 94, 235, 1);
    font-weight: 400;
    font-size: 20px;
}

.underline2 {
    height: 0.1px;
    margin-top: 1rem;
    background-color: rgba(0, 0, 0, 0.21);
}

.courses-rating-section {
    margin-top: 1rem;
}

.courses-rating-heading {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: 2rem !important;
    color: rgba(0, 100, 140, 1);
}

/* 4rd section css end */


/* 5th section css start */

.review-header {
    font-size: 1.2rem;
    font-family: "Beiruti" !important;
    font-weight: 500 color: rgba(0, 0, 0, 0.7);
    margin-bottom: 20px;
}

.review-rating {
    display: flex;
    align-items: center;
    font-size: 24px;
}

    .review-rating span {
        margin-left: 5px;
        font-family: "Beiruti" !important;
        font-weight: 500;
    }

.review-stars {
    margin-top: 20px;
}

.star-bar {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.bar {
    height: 6px;
    width: 200px;
    background-color: rgba(217, 217, 217, 1);
    margin: 0 10px;
    border-radius: 5px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: #649885;
}

.review-count {
    font-size: 15px;
    font-family: "Beiruti" !important;
    color: rgba(95, 95, 95, 1);
}

.stars-class {
    color: rgba(0, 0, 0, 1);
    font-weight: 500;
    font-family: "Beiruti" !important;
    font-size: 16px;
}

.percentage-class {
    color: rgba(95, 95, 95, 1);
    font-family: "Poppins" !important;
    font-size:0.7rem;
    font-weight:500;
}


/* 5th section css end */



/* 6th section css start */
.last-section-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.review-header h1 {
    font-size: 24px;
    margin: 0;
}

.review-header span {
    font-size: 14px;
    color: #555;
}

.last-section {
    background-color: #fff;
    padding-left: 60px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    margin-bottom: 10px;
    border: 1px solid rgba(0, 0, 0, 0.17);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
}

.circlediv {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: var(--white);
    background: #DBA268;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.last-section-review-content {
    flex: 1;
}

    .last-section-review-content .last-section-review-date {
        font-size: 14px;
        color: rgba(0, 0, 0, 1);
        margin-bottom: 6px;
        font-family: "Beiruti" !important;
        font-weight: 500;
        margin-bottom:0px
    }

    .last-section-review-content .last-section-review-rating {
        display: flex;
        font-size:1rem;
        align-items: center;
        font-family: "Beiruti" !important;
        font-weight: 500;
        margin-bottom: 10px;
    }
.review-content-user-name {
    font-family: "Beiruti" !important;
    font-weight: 500;
    font-size:1.2rem;
    color: rgba(219, 162, 104, 1);
}

.last-section-review-content .last-section-review-rating p {
    margin-left: 5px;
    color: rgba(0, 0, 0, 0.7);
    font-weight: 500;
    font-family: "Beiruti" !important;
    text-align: justify;
    font-size: 16px;
}

    .last-section-review-content p {
        font-size: 14px;
        color: #333;
        margin: 0;
    }

    .last-section-review-content .reviewer {
        font-weight: bold;
    }

.adjust-box-space {
    padding-left: 15px;
    padding-right: 5px;
}

.view-more-reviews a {
    color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
    font-weight: 500;
    font-family: "Beiruti" !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.7);
    font-size: 20px;
}
/* courses detail section css end */
/* login modal css start */
.modal-header {
    border-bottom: none !important;
    display: block;
    padding-bottom: 0px;
}

    .modal-header:focus {
        border-bottom: none !important;
        border: none !important;
        display: block;
    }

.sign-in-heading {
    text-align: center;
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: 1.7rem;
}

.sign-in-btn {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%);
    color: var(--white);
    font-family: "Beiruti" !important;
    font-weight:500;
    font-size:1.2rem;
}

    .sign-in-btn:hover {
        background-color: rgba(0, 100, 140, 1);
        color: var(--white);
    }

.fields-shadow::placeholder {
/*    color: rgba(95, 95, 95, 1);*/
/*    color: rgba(0, 0, 0, 0.52) !important;*/
    color:#c7c7c7 !important;
    font-family: "Beiruti" !important;
    font-size: 1.2rem;
}

.fields-shadow:focus {
    box-shadow: none;
    border: 1px solid rgba(199, 199, 199, 1) !important;
}


.no-border-btn {
    border: none; 
    outline: none; 
    box-shadow: none;
}

    .no-border-btn:focus {
        outline: none;
    }


.create-account {
    color: rgba(100, 152, 133, 1);
    font-weight: 500;
    font-family: "Beiruti" !important;
    font-size: 1rem;
    text-decoration: none !important;
}

.subscription-heading {
    text-align: center;
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: 1.7rem;
}

.already-account {
    color: rgba(0, 0, 0, 0.52) !important;
    text-decoration: none;
    padding-right: 10px;
    font-family: "Beiruti" !important;
    font-weight: 500;
    font-size: 1.2rem;
}

.checks-button-color {
    color: rgba(220, 164, 107, 1);
    font-size: 1rem;
    font-family: "Beiruti" !important;
    font-weight: 500;
}


.login-modal-body-spacing {
    padding-top: 40px;
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 70px;
}


.end-0 {
    left: 5rem !important;
}

.top-0 {
    top: 9.5rem !important;
}

.top-1 {
    top: 12.8rem !important;
}
.modal-header .btn-close:focus{
    box-shadow:none;
}


@media (max-width: 768px) {

    .login-modal-body-spacing {
        padding-top: 40px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 70px;
    }
    .end-0 {
        left: 1.5rem !important;
    }
}


/*.form-check-input:checked {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
}*/


/* login modal css end */
/* footer start */
.footer {
    /*background-color: var(--primary);*/
    background-image: url('../img/footerbg.png');
    background-size: cover;
    padding: 3rem 0;
}
.make-responsive-column {
    display: flex;
    justify-content: flex-end;
    
}
.footerlogo {
    align-content: center;
}

.footerlogo p {
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 300;
    margin-bottom: 0px;
}

.footerlogo .pheading-1 {
    color: var(--white);
    font-size: 1.1rem;
    font-family: "Beiruti" !important;
    font-weight: 500;
}

.footerlogo .pheading-2 {
    color: var(--white);
    font-size: 1.2rem;
    font-family: "Beiruti" !important;
    font-weight: 500;
}



    .footernavbar .nav-link {
        color: var(--white) !important;
    }

.bg-transparent {
    position:relative;
}
    .bg-transparent img:hover {
        cursor: pointer;
        border: 1px solid rgba(214, 149, 85, 1);
        border-radius: 50%;
        box-shadow: 4px 4px 5px #00000080;
    }

    /*.footermenu a.active {
        border-bottom: white;
        display: inline-block;
        font-weight: 400;
    }*/

.footer-menu a {
    color: #000; /* Set the default link color */
    text-decoration: none !important; /* Remove underline */
}

    .footer-menu a:hover {
        color: var(--primary) !important;
        border-bottom: 2px solid white !important;


    }

    .footer-menu a.active {
        border-bottom: 2px solid white !important;
        display: inline-block;
        font-weight: 400;
    }


.footer-button-1 {
    background: rgba(0, 0, 0, 0.33) !important;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    font-size: 1rem;
    border-radius: 10px;
    text-decoration: none;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    box-shadow: 2px 2px 4px #00000069;
    font-family: "Beiruti";
}

    .footer-button-1:hover {
        background: rgba(0, 0, 0, 0.33) !important;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        font-size: 1rem;
        border-radius: 10px;
        text-decoration: none;
        border: 1px solid rgba(214, 149, 85, 1);
        box-shadow: 4px 4px 5px #00000080;
    }

.footer-button-2 {
    background: rgba(0, 0, 0, 0.33) !important;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    font-size: 1rem;
    border-radius: 10px;
    text-decoration: none;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    box-shadow: 2px 2px 4px #00000069;
    font-family:"Beiruti";
}

    .footer-button-2:hover {
        background: rgba(0, 0, 0, 0.33) !important;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        font-size: 1rem;
        border-radius: 10px;
        text-decoration: none;
        border: 1px solid rgba(214, 149, 85, 1);
        box-shadow: 4px 4px 5px #00000080;
        
    }



.social-media-buttons-links {
    justify-content: end;
}
.footer-first-heading {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.footer-first-heading p {
    font-weight: 500;
    color: var(--white) !important;
    font-size: 1.9rem;
   
    margin-bottom: 0px;
}


@media (max-width: 767.98px) {
    .social-media-buttons-links {
        margin-top:10px;
        justify-content: center;
        display: flex;
        align-items:center;
        
    }
    .footer {
        padding-top:2rem !important;
        padding-bottom:1rem !important;
    }
/*    .footer-button {
        justify-content: center;
        align-items:center;
        margin-bottom:1rem;
        display: flex;
       
    }*/
}


.make-second-column-responsive{
    justify-content:space-between;
}

@media (max-width: 768px) {


    .make-second-column-responsive {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
    .make-faoolun-logo-responsive {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
@media (max-width: 575.98px) {

    .make-third-column-responsive {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer-first-heading p {
        font-size: 1.6rem;
        font-weight: 500;
    }
}




/* footer end */
.profile-image {
    /*height: 45px;
    width: 45px;*/
    border-radius: 50%;
    object-fit: cover;
}

.user-image {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.setting-nav-dropdown {
    color: #FFFFFF;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none !important;
}

.dropdown-item {
    color: rgba(95, 95, 95, 0.84);
    font-size: 18px;
    font-weight: 300;
}

.dropdown-menu-end[data-bs-popper] {
    left: 0;
    right: -40px;
    top: 48px;
}

/*.tooltip {
    position: absolute;
    top: 10px !important;
    right: 0;
    width: 20rem;
    background-color: var(--white) !important;
    border-radius: 4px;
    z-index:1050;
}

.tooltip-header {
    color: rgba(0, 0, 0, 0.7);
    font-weight: 500 !important;
    font-size: 1.4rem;
    margin-bottom: 10px;
}


.tooltip-content {
    margin-bottom: 10px; 
}

.tooltip-extra-content {
    color: rgba(220, 164, 107, 0.8) !important;
    font-weight:500;
    font-size:1rem;
}

.tooltip-inner {
    max-width: none;
    background-color: transparent !important;
    padding: 10px;
    border: 1px solid var(--grey);
    border-radius: 3px;
    width: auto;
    height: auto;
}*/

.tooltip {
    position: absolute;
    top: 10px !important;
    right: 0;
    width: 20rem;
    background-color: white !important;
    border-radius: 4px;
    z-index: 1050; 
}

.tooltip-header {
    color: rgba(0, 0, 0, 0.7);
    font-weight: 500 !important;
    font-size: 1.4rem;
    margin-bottom: 10px;
    text-align: right; 
}

.tooltip-content {
    margin-bottom: 10px;
    text-align: center; 
}

.tooltip-extra-content {
    color: rgba(220, 164, 107, 0.8) !important;
    font-weight: 500;
    font-size: 1rem;
    text-align: center; 
}

.tooltip-inner {
    max-width: none;
    background-color: white !important;
    padding: 10px;
    border: 1px solid var(--grey);
    border-radius: 3px;
    width: auto;
    height: auto;
    opacity: 1 !important;
    backdrop-filter: none !important;
}
.tooltip .tooltip-arrow::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 10px; /* Adjust the size as needed */
    border-style: solid;
    border-color: transparent transparent #ffffff transparent !important;
    border-radius: 5px; /* Optional: adjust radius for rounded corners */
    left: 50%;
    transform: translateX(-50%);
}


.alert-image {
    width: 100px;
    height: 120px;
}


.alert-image {
    width: 100px;
    height: 120px;
}

@media (max-width: 600px) {
    .tooltip {
        width: 15rem;
    }

    .alert-image {
        width: 60px;
        height: 70px;
    }
}




.sidebar1 {
    height: 100%;
    width: 250px;
}
.give-firstside-bg-color {
    background-color: rgba(247, 247, 247, 1);
}
/*.give-border-color {
    border-right: 1px solid rgba(214, 214, 214, 1);
    border-left: 1px solid rgba(214, 214, 214, 1);
    box-shadow: 1px 4px 3px 0px rgba(0, 0, 0, 0.15) !important;
    box-shadow: -2px 0px 6px -1px rgba(0, 0, 0, 0.31);
}*/

.sidebar1 a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 18px;
    color: rgba(0, 0, 0, 1);
    font-family: "Beiruti" !important;
    font-weight: 500;
    display: block;
}

    .sidebar1 a:hover {
        color: #007bff;
    }

.d-none {
    display: none;
}

.accordion-button::after {
    /*margin-left: auto;*/
    margin-right: 0 !important;
    /*    margin-right: 22rem !important;*/
}
.remove-padding-accordian-button {
    --bs-btn-padding-x: 0px !important;
}

.accordian-custom::after {
    margin-left: 0px !important;
    margin-right: auto !important;
}

.scheduleTtile {
    color: rgba(0, 0, 0, 0.7);
    font-size: 24px;
    font-weight: 700;
}

.locationIcon {
    font-weight: 500;
    font-size: 14px;
    color: rgba(146, 146, 146, 1) !important;
}

.starting-date {
    font-weight: 500;
    font-size: 1rem;
    font-family: "Beiruti" !important;
    color: rgba(146, 146, 146, 1) !important;
}

.estimate-date {
    font-weight: 500;
    font-size: 1rem;
    font-family: "Beiruti" !important;
    color: rgba(146, 146, 146, 1) !important;
}

.coming-days {
    color: rgba(0, 0, 0, 1);
    font-size: 20px;
    font-family: "Beiruti" !important;
    font-weight: 500;
}

.poetic-vision a {
    color: rgba(100, 152, 133, 1);
    font-weight: 500;
    font-family: "Beiruti" !important;
    font-size: 16px;
    text-decoration: none;
}

.due-date {
    background-color: rgba(217, 217, 217, 0.53);
    font-size: 15px;
    color: rgba(95, 95, 95, 1);
    font-weight: 500;
    font-family: "Beiruti" !important;
    border-radius: 3px;
    padding-left: 5px;
    padding-right: 5px;
    display: block;
    padding-top: 4px;
    padding-bottom: 4px;
}

.general-class {
    color: rgba(48, 90, 75, 1);
    font-size: 15px;
    font-family: "Beiruti" !important;
    font-weight: 500;
}
.registration-deadline-date {
    color: rgba(146, 146, 146, 1);
    font-weight:700;
}

.grading-class {
    color: rgba(0, 100, 140, 1);
    font-size: 14px;
    font-weight: 500;
}

.weekly-goals {
    color: rgba(0, 0, 0, 1);
    font-size: 20px;
    font-weight: 700;
}

.goal-percentage {
    font-size: 16px;
    font-weight: 500;
    font-family: "Beiruti" !important;
    color: rgba(146, 146, 146, 1);
}

.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    box-shadow: none;
}

.accordian-custom:not(.collapsed) {
    background-color: transparent !important;
    box-shadow: none;
}

.accordion-item {
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

    .accordion-item:not(:first-of-type) {
        border-top: 0px !important;
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
    }

.give-custom-class {
    border-top: 1px solid #dee2e6 !important;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
}


.sidebar1 a {
    font-weight: 500;
    cursor: pointer;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.7);
}

    .sidebar1 a:hover {
        font-weight: 500;
        cursor: pointer;
        font-size: 20px;
        /* border-right: 11px solid rgba(0, 100, 140, 1); */
        /*background-color: rgba(0, 100, 140, 0.07);*/
        background-color: rgba(100, 152, 133, 0.07);
        color: rgba(0, 0, 0, 1) !important;
    }

.sidebar-tabs {
    font-size: 20px;
    color: rgba(0, 0, 0, 1);
    transition: background-color 0.3s, border-right 0.3s, color 0.3s;
    font-family: "Beiruti" !important;
    font-weight: 500;
}
    .accordian-tabe-links {
        font-size: 20px !important;
        font-family: "Cairo", sans-serif !important;
        font-weight: 300 !important;
        color: var(--black) !important;
    }

        .accordian-tabe-links:hover {
            color: black !important; /* Use any color for hover other than white, or keep it black */
        }

/* Specific class for when the lesson is clicked or needs a different color */
.set-custom-color-changes-in-lession {
    font-size: 20px !important;
    font-family: "Cairo", sans-serif !important;
    font-weight: 300 !important;
    color: var(--black) !important; /* Ensure the color stays black */
}

.accordian-tabs {
    font-size: 20px;
    padding-right: 8px;
    font-family: "Beiruti" !important;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
}

.sidebar-tabs.active {
    font-weight: 500;
    cursor: pointer;
    /*background-color: rgba(0, 100, 140, 0.07);*/
    background-color: rgba(100, 152, 133, 0.07);
    /*border-right: 11px solid rgba(0, 100, 140, 1);*/
    border-right: 11px solid rgba(100, 152, 133, 1);
    color: rgba(0, 0, 0, 1);
}

.accordion-button {
    text-decoration: none;
   /* width:auto !important;*/
}
.accordian-tabs-color {
    background: linear-gradient(60deg, rgba(214,149,85,1) 0%, rgba(227,178,129,1) 100%);
    -webkit-background-clip: text;
    font-weight:700;
    font-size:1.5rem;
    -webkit-text-fill-color: transparent; /* Makes the text transparent, showing the gradient */
}

.accordian-custom {
    text-decoration: none;
}

.reading-and-video-time {
    direction: rtl;
}

.reading-and-video-time-description {
    direction: rtl;
    font-size: 15px;
    
    color: rgba(0, 0, 0, 1);
    font-family: "Beiruti" !important;
    font-weight: 500 !important;
}

.reading-time,
.video-time {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    margin-left: 10px;
    color: rgba(146, 146, 146, 1);
}

.reading-and-video-time img {
    vertical-align: middle;
    margin-left: 5px;
    margin-right: 5px;
}

.video-container {
    border-radius: 8px;
    overflow: hidden;
}

    .video-container video {
        border-radius: 8px;
    }

.welcome-first-unit {
    color: rgba(146, 146, 146, 1);
    font-size: 16px;
    font-weight: 500;
}

.playclasses {
    align-items: center;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 3px;
}

    .playclasses img {
        width: 20px;
        height: 20px;
        margin-left: 15px;
    }

.playclasses-content {
    display: flex;
    flex-direction: column;
}

    .playclasses-content p {
        font-size: 16px;
        margin-bottom: 0;
        font-weight: 500;
        color: rgba(97, 97, 97, 1);
    }

.thick-dot {
    display: inline-block;
    height: 5px;
    width: 5px;
    margin-left: 5px;
    margin-right: 5px;
    background-color: rgba(146, 146, 146, 1);
    border-radius: 50%;
}

.playclasses-content .details {
    font-size: 14px;
    font-weight: 300;
    color: rgba(146, 146, 146, 1);
}

@media (max-width: 576px) {
    .playclasses img {
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }

    .playclasses-content .details {
        font-size: 0.8rem;
    }
}

.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    box-shadow: none;
}

.accordion-custom:not(.collapsed) {
    background-color: transparent !important;
    box-shadow: none;
}

.accordion-item {
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

    .accordion-item:not(:first-of-type) {
        border-top: 0px !important;
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
    }

.give-custom-class {
    border-top: 1px solid #DEE2E6 !important;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
}

/* chat box css start */

.chat-container {
    width: 100%;
    margin-bottom: 30px;
    height: 100vh;
    display: flex;
    border: 1px solid rgba(214, 214, 214, 1);
    flex-direction: column;
    background-color: rgba(247, 247, 247, 1);
    border-radius: 8px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}

.chat-box {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
}

.user-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: 10px;
}

.receiver-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
    margin-left: 0px;
}

.receiver {
    font-size: 16px;
    color: rgba(0, 0, 0, 1);
    font-weight: bold;
}

.receiver-content {
    font-size: 16px;
    margin-top: 8px;
    color: rgba(0, 0, 0, 1);
    direction: rtl;
}

.receiver-message {
    background-color: white !important;
    margin: 10px 0;
    max-width: 60%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

.message {
    background-color: white !important;
    margin: 10px 0;
    max-width: 60%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

.date {
    font-size: 14px;
    font-weight: 300;
    color: rgba(146, 146, 146, 1);
}

.receiver-date {
    font-size: 14px;
    font-weight: 300;
    color: rgba(146, 146, 146, 1);
}

.sender {
    font-size: 16px;
    color: rgba(0, 0, 0, 1);
    font-weight: bold;
}

.content {
    font-size: 16px;
    margin-top: 8px;
    color: rgba(0, 0, 0, 1);
    direction: rtl;
}

.input-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 5px;
    padding: 5px 10px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.message-input::placeholder {
    font-weight: 500;
    font-size: 18px;
    color: rgba(146, 146, 146, 1);
}

.input-container input {
    width: 100%;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 14px;
    direction: rtl;
}

.input-container a {
    text-decoration: none;
    color: var(--dustygrey);
}

.send-icon {
    order: 3;
}

.mic-icon {
    order: 1;
}

.attach-icon {
    order: 2;
}

@media (max-width: 600px) {
    .chat-container {
        height: 100vh;
        max-width: 100%;
    }

    .input-box {
        flex-direction: column;
    }

        .input-box input {
            margin-right: 0;
            margin-bottom: 10px;
        }
}
/* chat box css end */

/* edit profile css start  */
.profile-container {
    padding: 20px;
    margin-bottom: 30px;
    border: 1px solid rgba(199, 199, 199, 1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.edit-profile-heading p {
    font-weight: 700;
    font-size: 24px;
    margin-top: 25px;
}

.adjust-column-height {
    display: flex;
    justify-content: center;
    align-items: center;
}

.eidt-profile-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.edit-icon {
    position: absolute;
    bottom: -13px;
    right: 50px;
/*    background-color: var(--primary);*/
  background-color:#649885;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .edit-icon img {
        width: 15px;
        height: 15px;
    }

.label-classes {
    font-size: 1.1rem;
    font-weight: 500;
/*    color: rgba(0, 100, 140, 1);*/
    font-family: "Beiruti" !important;
}

/*.profile-inputs {
    box-shadow: 1px 4px 3px 0px rgba(0, 0, 0, 0.20) !important;
}*/

    .profile-inputs::placeholder {
        color: rgba(95, 95, 95, 0.86);
        font-weight: 300;
        font-size: 16px;
    }

    .profile-inputs:focus {
        outline: none !important;
        border: 1px solid rgba(200, 200, 200, 1);
        box-shadow: none !important;
    }

.phoneNumber {
    direction: rtl;
    border: none;
    width: 37.5vw;
}

    .phoneNumber:focus {
        outline: none !important;
        border: transparent;
        box-shadow: none !important;
    }

.phoneNumber-input {
    border: 1px solid var(--grey);
    border-radius: 0.2rem;
    direction: rtl;
    border-radius: 5px !important;
    background-color: transparent !important;
/*    box-shadow: 1px 4px 3px 0px rgba(0, 0, 0, 0.20) !important;*/
}

.edit-profile-dropdown {
    padding-left: 10rem !important;
    margin-bottom: 1rem;
    color: rgba(95, 95, 95, 1);
    font-weight: 400;
/*    box-shadow: 1px 4px 3px 0px rgba(0, 0, 0, 0.20) !important;*/
}

    .edit-profile-dropdown option {
        color: rgba(95, 95, 95, 0.86);
        font-weight: 300;
        font-size: 16px;
    }

    .edit-profile-dropdown:focus {
        outline: none !important;
        border: 1px solid rgba(200, 200, 200, 1);
        box-shadow: none !important;
    }

.submit-button {
    padding: 6px;
    /*background-color: rgba(0, 100, 140, 1);*/
    background: rgb(214,149,85);
    background: linear-gradient(60deg, rgba(214,149,85,1) 0%, rgba(227,178,129,1) 100%);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 1px 4px 3px 0px rgba(0, 0, 0, 0.20) !important;
    font-family: "Beiruti" !important;
    font-weight: 500;
}

    .submit-button:hover {
        background-color: rgba(0, 100, 140, 1) !important;
        color: white !important;
    }
.profile-edit-heading {
    background: linear-gradient(60deg, rgba(214,149,85,1) 0%, rgba(227,178,129,1) 100%);
    -webkit-background-clip: text;
    font-weight:700;
    font-size:1.5rem;
    -webkit-text-fill-color: transparent; /* Makes the text transparent, showing the gradient */
}

.gender-dropdown option {
    background-color: rgba(214, 149, 85, 1); /* Change background color for options (may not work in all browsers) */
    color: white; /* Change text color for options */
}
.gender-dropdown:focus{
    box-shadow:none;
}
.gender-dropdown:hover {
    background-color: rgba(214, 149, 85, 1) !important; /* Change background on hover */
}




.custom-dropdown {
    position: relative;
    width: 100%;
    cursor: pointer;
}

.selected {
    background-color: white;
    /*    padding: 10px;*/
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: "Beiruti" !important;
    font-weight:500;
}

.options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    z-index: 1;
}

.option {
    padding: 10px;
    transition: background-color 0.3s;
    font-family: "Beiruti" !important;
    font-weight: 500;
}

    .option:hover {
        background-color: rgba(214, 149, 85, 1); /* Change background on hover */
        color: white; /* Change text color on hover for better visibility */
    }








@media (max-width: 600px) {
    .phoneNumber {
            border-radius: 4px;
            direction: rtl;
            width: 293px !important;
            border: none;
            outline: transparent !important;
            width: auto;
        }
    }
    /* edit profile css end  */
    /* grades css start  */

    .grades-classes {
    align-items: center;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 3px;
}

    .grades-classes img {
        width: 20px;
        height: 20px;
        margin-left: 15px;
    }

.grades-classes-content {
    display: flex;
    flex-direction: column;
}

    .grades-classes-content .progressive-unit {
        font-size: 1.1rem;
        margin-bottom: 0;
        font-family: "Beiruti" !important;
        font-weight: 500;
        color: rgba(100, 152, 133, 1);
    }

    .grades-classes-content .details {
        font-size: 1.1rem;
        margin-bottom: 0;
        font-weight: 500;
        font-family: "Beiruti" !important;
        color: rgba(146, 146, 146, 1);
    }

.grades-content-customization {
    font-weight: 500;
    font-size: 1.1rem;
    font-family: "Beiruti" !important;
    color: rgba(146, 146, 146, 1);
}

.grades-content-time {
    font-weight: 500;
    font-size: 1.1rem;
    direction: ltr;
    font-family: "Beiruti" !important;
    display: contents !important;
    color: rgba(146, 146, 146, 1);
}

.grades-table-color {
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(214, 214, 214, 1);
    vertical-align: middle !important;
}

.table-header-color {
    font-weight: 500;
    font-size: 1.2rem;
    font-family: "Beiruti" !important;
    color: rgba(0, 0, 0, 0.7) !important;
}
/* grades css end */

/* sidebar course detail css start */
.off-courses {
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    font-family: "Beiruti" !important;
    color: rgba(0, 0, 0, 1) !important;
}

.off-courses-description {
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    text-align: justify;
    font-family: "Beiruti" !important;
    color: rgba(146, 146, 146, 1) !important;
}

.more-detail {
    font-size: 1.2rem;
    font-weight: 500 !important;
    font-family: "Beiruti" !important;
    color: rgba(99, 151, 132, 1);
}

.more-detail-table-heading {
    background: linear-gradient(60deg, rgba(214,149,85,1) 0%, rgba(227,178,129,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Makes the text transparent, showing the gradient */
    font-weight: 700;
    font-size: 16px;
}

.more-detail-table-description {
    display: flex;
    color: rgba(146, 146, 146, 1) !important;
    padding-right: 30px !important;
    font-weight: 500;
    font-family: "Beiruti" !important;
    font-size: 16px;
}

.curriculum {
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    font-family: "Beiruti" !important;
    color: rgba(0, 0, 0, 1) !important;
}

/*.week-1-table-heading {
    color: rgba(95, 95, 95, 1) !important;
    background-color: linear-gradient(to right, #5C9580, #9DB0A9) !important;
    font-weight: 500;
    font-size: 18px;
}*/
.week-1-table-heading {
    color: white !important;
    font-weight: 500;
    font-family: "Beiruti" !important;
    font-size: 1.2rem;
}


.lesson-heading {
    color: rgba(0, 0, 0, 1) !important;
    font-weight: 500;
    font-family: "Beiruti" !important;
    font-size: 1.2rem;
}

.adjust-column-spacing {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 130px !important;
    text-align: justify !important;
    padding-right: 25px !important;
}

.week-1-courses-description {
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    font-family: "Beiruti" !important;
    color: rgba(146, 146, 146, 1) !important;
}

.videos-quiz-and-reading {
    margin-bottom: 0px !important;
    font-family: "Beiruti" !important;
    color: rgba(146, 146, 146, 1);
    font-weight: 500;
    font-size: 1.1rem;
}

.week-1-content-categories {
    color: rgba(0, 0, 0, 1);
    padding-left: 5px !important;
    font-size: 1.1rem;
    font-family: "Beiruti" !important;
    font-weight: 500;
}

.works-section-content {
    margin-bottom: 20px;
    border-radius:5px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #dee2e6 !important;
    padding: 10px !important;
}

.pass-exam {
    color: rgba(146, 146, 146, 1);
    font-size: 1.1rem;
    font-weight: 500;
    font-family: "Beiruti" !important;
}

.earn-degree-sucess {
    color: rgba(146, 146, 146, 1);
    font-size: 1.1rem;
    font-weight: 500;
    font-family: "Beiruti" !important;
}

.bookmark-icon.bookmarked i {
    color: gold !important;
}

/* sidebar course detail css end */

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /*    background: rgb(214,149,85);
    background: linear-gradient(60deg, rgba(214,149,85,1) 0%, rgba(227,178,129,1) 100%);*/
    /*    background: rgb(214,149,85);
    background: linear-gradient(to left, rgba(214,149,85,1) 0%, rgba(227,178,129,1) 100%);*/
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    z-index: 1000;
    min-width: 160px;
    --bs-dropdown-padding-y:0px;
}

.dropdown-menu.show {
    display: block;
}
.dropdown-divider{
    margin:0px !important;
}

.dropdown-item {
    display: block;
    padding: 10px;
    font-weight: 500;
    font-family: "Beiruti" !important;
    text-decoration: none;
    color: rgba(3, 3, 3, 1);
}

    .dropdown-item:hover {
        background: rgb(214,149,85);
        background: linear-gradient(to left, rgba(214,149,85,1) 0%, rgba(227,178,129,1) 100%);
        color:white;
    }



.star-rating {
    direction: rtl;
    display: inline-block;
}

    .star-rating input[type="radio"] {
        display: none;
    }

    .star-rating label {
        font-size: 2rem;
        color: #ddd;
        cursor: pointer;
    }

    .star-rating input[type="radio"]:checked ~ label {
        color: gold;
    }

    .star-rating label:hover,
    .star-rating label:hover ~ label {
        color: gold;
    }

.card-img-top {
    max-width: 100px;
}

.form-check {
    display: flex;
    align-items: center;
    padding-right: 2rem !important;
    justify-content: space-between;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

    .form-check.selected {
        border-color: #007bff;
    }
.form-check-label {
    margin-left: 25rem;
}
.form-check-input {
    margin-left: 10px;
}



.card {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Initial shadow */
    transition: box-shadow 0.3s ease, color 0.3s ease;
}

.card-body:hover {
    background-image: linear-gradient(to left, #5C9580, #9DB0A9) !important;
    color: var(--white) !important;
}

    .card-body:hover a, .card-body:hover a p, .card-body:hover .offer-name, .card-body:hover .offer-description, .card-body:hover .offer-detail, .card-body:hover .offer-rating a {
        color: var(--white) !important; /* Ensure all text and links inside the card body are white */
    }

    /*.card-body:hover img {
        filter: brightness(0) invert(1);*/ /* Optionally change image color to white on hover */
    /*}*/
.card:hover {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}





.offer-heading ,.result-heading {
    background: var(--primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



.accordion-header {
    display: flex;
    align-items: center;
}
.table-bordered {
    border-collapse: collapse; 
    border-radius: 5px !important;
    overflow: hidden;
}

    .table-bordered th,
    .table-bordered td {
        border: 1px solid #dee2e6;
    }

/* Flexbox for the button to center content vertically */
/*.accordion-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}*/

.accordion-body {
    font-family: "Beiruti" !important;
    font-weight: 500 !important;
}

.content {
    color: rgba(100, 152, 133, 1) !important;
}

.remove-line-from-footer{
    border:none !important;
    justify-content:flex-start !important;
}

/* Style for the reviews section */
.reviews-carousel-section {
    position: relative;
}

/* Custom Navigation Button Styles */
.custom-carousel-nav {
    /*display: flex;
    justify-content: flex-start;*/ /* Align buttons to the left */
    /*gap: 10px;*/ /* Space between buttons */
    /*margin-top: 10px;*/ /* Space above the buttons */
    /*margin-bottom: 20px;*/ /* Space below the buttons */
}

.custom-prev,
.custom-next {
    /*background-color: #f88b48;*/ /* Button background color */
    border: none;
    color: white;
/*    padding: 10px 20px;*/
/*    font-size: 16px;*/
    border-radius: 5px;
    cursor: pointer;
    /*box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);*/ /* Shadow for emphasis */
}

    .custom-prev:hover,
    .custom-next:hover {
        /*background-color: #f77a33;*/ /* Darker shade on hover */
        transform: scale(1.02); /* Slight scale-up effect on hover */
    }


.circular-button {
    width: 40px; /* Adjust size as needed */
    height: 40px; /* Adjust size as needed */
    border: 1px solid rgba(0,0,0, 0.4); /* Border color */
    border-radius: 50%; /* Make it circular */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white; /* Background color */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

    .circular-button:hover {
        background-color: rgba(214, 149, 85, 1);
        border: 1px solid rgba(214, 149, 85, 1); /* Change background on hover */
        color: white; /* Change text color on hover */
    }

    .circular-button i {
        
        color: rgba(0,0,0, 0.4); /* Icon color */
    }

    .circular-button:hover i {
        color: white; /* Change icon color on hover */
/*        color: rgba(214, 149, 85, 1);*/
    }







/*review modal css start*/



.review-modal-body-spacing {
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
}

.review-modal-heading {

    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: 1.8rem;
}
.review-modal-description{
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
    font-family: "Beiruti" !important;
    font-size:1.2rem;
}
.rating-stars-images img{
    color: #FFCB41 !important;
}
.review-rating-textarea {
    border: 1px solid #EBEBEB;
/*    color: #EBEBEB;*/
    border-radius: 10px;
    padding: 0.7rem;
    margin-bottom:5px;
    font-family: "Beiruti" !important;
    font-weight: 400;
    font-size: 1.1rem;
}
.review-rating-textarea:focus {
    border: 1px solid #EBEBEB !important; /* Custom border on focus */
    outline: none; /* Remove the default outline */
}


.review-modal-btn {
    background: transparent;
    color: #D89A5C;
    font-family: "Beiruti" !important;
    font-weight: 500;
    float: inline-end;
    border: 1px solid #D69555;
    font-size: 1.2rem;
    padding:2px 30px;
}

    .review-modal-btn:hover {
        background: transparent;
        border: 1px solid #D69555;
        color: #D89A5C;
    }
/*review modal css end*/


/*quiz modal css start*/

.quiz-modal-heading {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: 1.7rem;
    font-family: "Cairo" !important;
}
.give-quiz-modal-horizontal-line{
    height:1px;
    background-color:#D6D6D6 !important;
}

.quiz-modal-btn {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    color: white;
    font-family: "Beiruti" !important;
    font-weight: 500;
    font-size: 1.2rem;
    padding: 2px 30px;
}

.form-check-input:checked {
    background-color: #D69555 !important;
    border-color: #D69555 !important;
}
.form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgba(214,149,85,.25) !important;
}

.quiz-modal-btn:hover {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    color: white;
}
.quiz-modal-btn:focus {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    color: white !important;
    border:none !important;
}
.remove-checks-vorders {
    border: none !important;
    display: block !important;
    margin-bottom: 0px;
}
.quiz-title-heading {
    color: rgba(0,0,0,0.7) !important;
    font-family: "Beiruti" !important;
    font-weight: 500;
    font-size: 1.2rem;
}
.quiz-title-labels {
    color: rgba(0,0,0,0.7) !important;
    font-family: "Beiruti" !important;
    font-weight: 500;
    font-size: 1rem;
}

/*quiz modal css end*/


/*congratulations modal css start*/
.cong-modal-image{
    display:flex;
    justify-content:center;
    align-items:center;
}
.cong-modal-image img {
    max-width:70%
}
.cong-title-heading {
    color: rgba(0,0,0,0.7) !important;
    font-family: "Beiruti" !important;
    font-weight: 500;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.cong-modal-btn {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    color: white;
    font-family: "Beiruti" !important;
    font-weight: 400;
    font-size: 1.2rem;
    width:100%;
    padding: 2px 0px;
}

.cong-modal-btn:hover {
    background: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%) !important;
    color: white;
}
.continues-modal-btn {
    background: transparent; 
    color: #D69555; 
    font-family: "Beiruti" !important;
    font-weight: 400;
    font-size: 1.2rem;
    width: 100%;
    padding: 2px 0px;
    border: 1px solid transparent; 
    background-image: linear-gradient(white, white), linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
/*    text-align: center;*/
}

.continues-modal-btn:hover {
    background-color: transparent;
    color: #D69555; 
    background-image: linear-gradient(white, white), linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-color: #D69555;
        
}
.make-text-center-class{
    display:flex;
    justify-content:end;
}
.remove-underline-border {
    text-decoration: none;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.7) !important;
    transition: background-color 0.3s, border-right 0.3s, color 0.3s;
    font-family: "Beiruti" !important;
    font-weight: 500;
    cursor:pointer;
}
.remove-underline-border:hover {
    text-decoration: none;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.7) !important;
    transition: background-color 0.3s, border-right 0.3s, color 0.3s;
    font-family: "Beiruti" !important;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.7) !important;
}


.text-details {
    font-family: "Beiruti" !important;
    font-weight: 500 !important;
    font-size:1.5rem;
}

.rescourses-text {
    font-family: "Beiruti" !important;
    font-weight: 400 !important;
    text-decoration:none;
    color:#929292
}

.star {
    font-size: 1.5rem !important;
    color: #ebebeb; /* Unselected star color */
    cursor: pointer;
    transition: color 0.3s;
}

    .Startselected {
        color: #ffcb41; /* Selected star color */
    }

    .star:hover {
        color: #ffcb41; /* Star color on hover */
    }


/*.change-lesson-color:hover{
    color:white;
}*/


.custom-angle-rotate {
    font-family: 'Beiruti';
    font-size: 1.2rem;
    color: rgba(0,0,0,0.7);
    font-weight: 500;
}
.accordion-button:not(.collapsed) .custom-angle-rotate {
    margin-left: auto !important;
    display: inline-block;
    text-align: left;
}

.accordion-button.collapsed .custom-angle-rotate {
    margin-right: auto !important;
    display: inline-block;
    text-align: left;
}

/* Optional: Customize accordion button appearance */
.change-color-of-accordian-header {
    justify-content: end !important;
    align-items: center;
    padding-right:15px;
    flex-direction:row;
}


/*    .change-color-of-accordian-header:not(.collapsed)::after {
        transform: matrix(1, 0, 0, 1, 0, 0);
    }

    .change-color-of-accordian-header.collapsed::after {
        transform: rotate(90deg); 
    }*/


    /* By default, set the icon to 90-degree rotation */


/*.accordion-button::after{
    content:none !important;
}*/



.card-body-side-bar:hover {
    background-image: none !important;
    color: rgba(0, 0, 0, 0.7) !important;
}


.sidebar1 a:hover {
    background-color: rgba(100, 152, 133, 0.07) !important;
    background-image: none !important;
    color: rgba(0, 0, 0, 1) !important;
}



.search-input::placeholder {

    color: rgba(0, 0, 0, 0.7) !important;
    font-family: "Beiruti" !important;
    font-weight:500;
}
.search-container .search-icon .fa-search {
    color: #5c9580 !important;
  
    transform:rotate(90deg);
}

/*.bookmark-icon i::before {
    color: #a0a1a2;
}*/

/* Hover on the card changes the bookmark icon color */
/*.filter-card:hover .bookmark-icon i::before {
    color: white !important;
}*/

.bookmark-icon i::before {
    color: transparent; 
    background-image: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%);
    background-clip: text; 
    -webkit-background-clip: text; 
}

.filter-card:hover .bookmark-icon i::before {
    color: transparent;
    background-image: linear-gradient(275.62deg, #D69555 0.54%, #E3B281 98.03%);
    background-clip: text; 
    -webkit-background-clip: text; 
}



/* Open state */
.add-custom-bg-for-default-accordion.add-bg-on-open-accordion { 
    background-image: linear-gradient(to left, #5C9580, #9DB0A9) !important;
    color:white !important;
}
.add-custom-bg-for-default-accordion.arrow-white {
    color: white !important;  
}

/* Closed state (arrow turns back to black) */
/*.add-custom-bg-for-default-accordion.collapsed {
    color: black;  
}
*/
.accordion-header:hover .change-color-of-accordian-header span {
    color: white !important; 
}

.custom-bg-open {
    background-image: linear-gradient(to left, #5C9580, #9DB0A9) !important;
   color:white !important;
}

.text-white {
    color: white !important;
}

.text-black {
    color: rgba(0, 0, 0, 0.7) !important;
}

.open-accordion-bg {
    background-image: linear-gradient(to left, #5C9580, #9DB0A9) !important;
    color: white !important;
}
.open-accordion-bg .arrow {
    color: white !important; /* Ensure the arrow changes to white */
}





/*cer cempletion title css start*/


.certificate-com-title {
    font-family: "Beiruti" !important;
    color: rgba(100, 152, 133, 1);
    font-weight:500;
    font-size:1.1rem;
}


/*terms command condition css start*/

.terms-and-condition-para-title-1 {
    margin-top:10px;
    font-family: "Beiruti" !important;
    color: rgba(0, 0, 0, 0.52) !important;
    font-size:19px;
}

.terms-and-condition-para-title {
    margin-top: 10px;
    font-family: "Beiruti" !important;
    color: rgba(0, 0, 0, 0.52) !important;
    font-size: 19px;
}



open-accordion-color-custom-open {
    color: rgba(146, 146, 146, 1) !important;
}














/* Hover state */
.change-color-of-accordian-header:hover::after {
    background-image: url('../img/arrow-down-sign-to-navigate 1 (2).png'); 
}

/* Open state (not collapsed) */
.change-color-of-accordian-header:not(.collapsed)::after {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
    margin-left: 20px;
    font-family: "Beiruti" !important;
/*    background-image: url('../img/arrow-down-sign-to-navigate 1 (2).png');*/
}

/* Default state (closed) */
.change-color-of-accordian-header.collapsed::after {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
    margin-left: 20px;
    font-family: "Beiruti" !important;
/*    background-image: url('../img/arrow-down-sign-to-navigate 1 (2).png');*/
    content: '';
}


/* Default state (collapsed) */
.custom-toggle-accordion::after {
    content: '';
    transform: rotate(90deg) !important;
    transition: transform 0.3s ease;
    display: inline-block;
    color: rgba(0, 0, 0, 0.7) !important;
    margin-left: 10px;
}

/* Expanded state */
.rotate-open::after {
    transform: rotate(-0deg) !important;
    transition: transform 0.3s ease;
    display: inline-block;
}








/*responsive css*/
@media (max-width: 576px) {

    .already-account {
        font-size: 1.1rem !important;
    }
}
@media (max-width: 360px) {

    .already-account {
        font-size: 1rem !important;
    }
    .create-account {
       
        font-size: 0.9rem;
    }
}
/*.teacher-image {
    width: 60px;
    height: 60px;
    margin-left:10px;
    object-fit: cover;
    border-radius: 50%;
}

*/
.teacher-profile {
    display: flex;
    align-items: center;
    gap: 15px; 
}

.teacher-image {
    width: 50px;
    height: 50px;
    object-fit: inherit;
    border-radius: 50%;
}

.teacher-info {
    font-family: "Beiruti" !important;
    font-size: 1.2rem;
    font-weight: 300;
}


@media (max-width: 576px) {
    .professional-certificate-section {
        min-height: 25rem;
    }
    .makescrollable .nav-link {
        padding: 10px 10px !important; 
        white-space: nowrap; 
    }
    .makescrollable {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch; 
        padding: 0 0px; 
    }

}


@media (max-width: 768px) {
    .make-contact-us-image-responsive {
        display:flex;
        justify-content:center;
        align-items:center;
        flex-direction:column;
    }
}


@media (max-width: 375px) {

    .makescrollable {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; 
        padding: 0 10px; 
    }

    .makescrollable .nav-link {
        padding: 10px 10px !important; 
        white-space: nowrap; 
    }
}
@media (max-width: 576px) {
    .last-section-review-content > .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .review-content-user-name {
        order: 1;
        margin-bottom: 10px;
    }

    .last-section-review-rating {
        order: 2;
        margin: 10px 0;
        width: 100%;
    }

    .make-order-3-small-device {
        order: 3;
        margin-top: 10px;
        width: 100%;
    }

    .make-order-3-small-device {
        justify-content: flex-start;
    }
}






/* General styles for the input container */
.position-relative {
    position: relative; /* Ensures the icon stays within the container */
}

.fields-shadow {
    /*width: 100%;*/ /* Ensures full-width input */
    padding-right: 10px; /* Creates space for the icon */
}

/* Eye button (icon container) */
.btn-eye {
    position: absolute;
    left: 10px; /* Aligns the icon to the right */
    top: 50%; /* Vertically centers the icon */
    transform: translateY(-50%); /* Correct vertical alignment */
    border: none; /* Removes border */
    background: transparent; /* Transparent background */
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Icon styling */
    .btn-eye i {
        font-size: 1.2rem; /* Adjust icon size */
        color: #6c757d; /* Muted color */
    }

/* Adjustments for mobile screens */
@media (max-width: 768px) {
    .fields-shadow {
        padding-right: 10px; /* Adjust padding for smaller screens */
    }

    .btn-eye {
        left: 10px; /* Slightly adjust position */
    }
}


/* Container for search input and icon */
.search-container {
    position: relative; /* Ensures the icon stays inside the input container */
    
}

/* Search input styling */
.search-input {
    width: 100%; /* Full width */
    padding-right: 10px; /* Space for the search icon */
    border: 1px solid #ccc; /* Optional border styling */
    border-radius: 5px; /* Rounded corners */
    height: 40px; /* Ensure consistent height */
    padding-left: 10px; /* Padding for text */
    font-size: 16px; /* Adjust text size */
}

/* Search icon button */
.btn-search {
    position: absolute;
    left: 10px; /* Position the icon inside the input */
    top: 50%; /* Vertically center the icon */
    transform: translateY(-50%); /* Adjust for exact centering */
    background: transparent; /* Remove background */
    border: none; /* Remove border */
    padding: 0; /* No padding */
    cursor: pointer;
    display: flex;
    align-items: center; /* Center the icon vertically */
    justify-content: center; /* Center the icon horizontally */
    color: #6c757d; /* Muted icon color */
}

    /* Search icon styling */
    .btn-search i {
        font-size: 18px; /* Adjust icon size */
    }

/* Adjustments for mobile */
@media (max-width: 768px) {
    .search-input {
        padding-right: 10px; /* Adjust padding for smaller screens */
    }

    .btn-search {
        left: 10px; /* Slightly adjust icon position */
    }
}

.search-container .search-icon .fa-search {
    color: #5c9580 !important;
    transform: rotate(90deg);
}

#professional-certificate-section {
    background-image: url('/Content/assets/img/Clip path group.png');
    background-repeat: no-repeat;
    background-size: cover;
}

/* For mobile view */
@media (max-width: 768px) {
    #professional-certificate-section {
        background-image: url('/Content/assets/img/cert-back-mob.png'); /* Replace with your mobile-specific image */
    }
    .professional-certificate-section {
        border:none;
    }
}

@media (max-width: 768px) {
    .accordion-button:hover {
        background-image: none !important;
        color: rgba(95, 95, 95, 1) !important;
    }

/*    .question-dropdown2:hover {
        background-color: linear-gradient(#fff.#fff) !important;
        background-image: none !important;
        color: rgba(95, 95, 95, 1) !important;
    }
    .question-dropdown2:active {
        background-image: linear-gradient(to left, #5C9580, #9DB0A9) !important;
        color: var(--white) !important;
    }*/

    .accordion-button:not(.collapsed) {
        color: white !important;
    }

/*    .accordion-button:hover .accordian_design {
        
        color: white !important;
    }*/
    .accordian_design {
        
        color: rgba(95, 95, 95, 1) !important ;
    
    }
    .accordion-button:not(.collapsed) .accordian_design {
        color: white !important;
    }

    .accordion-button:hover::after {
        /*        background-image: url(../img/arrow-down-sign-to-navigate 1 (2).png);*/
        background-image: var(--bs-accordion-btn-icon);
    }
    .question-dropdown .accordion-button:not(.collapsed)::after {
        background-image: url('../img/arrow-down-sign-to-navigate 1 (2).png') !important;
    }
    .question-dropdown .accordion-button:not(.collapsed)::after {
        background-image: url('../img/arrow-down-sign-to-navigate 1 (2).png') !important;
    }


/*    .question-dropdown2 :hover {
        background-image: linear-gradient(#fff,#fff);
    }
    .question-dropdown2 :not(.collapsed) {
        
        background-image: linear-gradient(#fff,#fff);
        
    }
   

    accordion-open, accordion-open accordion-header, accordion-open accordion-collapse {
        background-image: linear-gradient(to left, #5C9580, #9DB0A9) !important;
        color: var(--white) !important;
    }*/


  }
   

    
}