body {
    font-family: Inter;
}

.meet-member-container .heading {
    color: #273365;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 81.5px;
}


.meet-member-container .heading-section .p-text,
.meet-member-container .heading-section p
{
    color: rgba(0, 0, 0, 0.80);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: -0.27px;
}

.meet-member-container .heading-section .qualification-tag {
    color: #273365;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 145.023%;
}

.meet-member-container .career-highlights {
    margin-top:0.5rem;
    color: rgba(0, 0, 0, 0.80);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: -0.27px;
}

.button-specialized {
    display: inline-flex;
    padding: 6px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;

    border-radius: 12px;
    background: rgba(39, 51, 101, 0.18);
    color: #273365;

    font-size: 0.875rem;

    font-weight: 500;
    margin-left: 0 !important;

    pointer-events: none;
}

.meet-member-container .career-highlights ul > li {
    padding: 0.5rem 0rem;
}

.meet-member-container .read-more-section .title{
    color:#2F3A58;
    cursor: pointer;
}

.feedback-card-img{
    width: 4rem;
    height: auto;
}

.mentor-feedback-section{
    background:#F2F1F8;
    height:auto;
    padding:20px;
}

.mentor-feedback-container .heading {
    color: #000;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 46.407px;
}

.mentor-feedback-container .mentor-feedback-card {
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    gap: 10px;
    padding:1rem;
    border-color: white;
}

.mentor-feedback-container .mentor-feedback-card .reviewer-name{
    color: #000;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 20.303px;
}

.mentor-feedback-container .mentor-feedback-card .working-duration{
    color:#828282;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 17.403px;
}

.mentor-feedback-container .mentor-feedback-card .description{
    color: #4F4F4F;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 17.403px;
}

.mentor-feedback-rating-section{
    height: auto;

}

.mentor-feedback-rating-section{
    margin-top:3rem !important;
    margin-bottom:3rem !important;
}

.mentor-feedback-rating-container .heading {
    color: #000;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 46.407px;
}

.mentor-feedback-rating-container .mentor-feedback-rating-card {
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    /*gap: 10px;*/
    padding:1rem;
    border-color: white;
}

.mentor-feedback-rating-card .title{
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.mentor-feedback-rating-card .sub-text{
    font-size: 0.875rem;
    color: #3E3E3E;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.mentor-feedback-rating-card .rating{
    color: #273365;
    font-family: Helvetica;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.mentor-feedback-rating-card .rating h2{
    font-weight: bold !important;
    font-size: 2.5rem;
}

.mentor-feedback-rating-card .no-of-reviews{
    color: #828282;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.mentor-feedback-rating-card .card-footer a{
    color: #005246;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}

.meet-mentor-filters-section {
    background: #FAFAFC;
    box-shadow: 0px -9px 27px 0px rgba(0, 0, 0, 0.10);
    padding:1rem 0rem 1rem 0rem;

}

.meet-mentor-filters-section .meet-mentor-filter-card .card-title {
    border-radius: 6px;
    display: inline-flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 500;
}

.meet-mentor-filters-section .meet-mentor-filter-card {
    border-radius: 0.75rem;
    background: #FFF;
    border-color: white;
    cursor : pointer;
}

.meet-mentor-filters-section .meet-mentor-filter-card .card-subtitle {
    color: #000;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 29.005px;
}

.meet-mentor-filters-section .meet-mentor-filter-card .card-text {
    color: #333;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 17.403px;
}

.meet-mentor-filters-section .meet-mentor-filters-container .filters-button {
    border-radius: 6px;
    border: 1px solid #273365;
    background: #FFF;
}

.btn-filter-option {
    border-radius: 12px !important;
    border: 1px solid #828282;
    background: #FFF;
    color:#828282;
    padding-left:30px;
    padding-right:30px;
}

.btn-resetfilter {
    border-radius: 12px !important;
    border-radius: 6px;
    border: 1px solid #273365;
    background: #FFF;
    color:#273365;
}

.btn-applyfilter {
    border-radius: 12px;
    background: #e08f24;
    color:#FFF;
}

.btn-applyfilter:hover {
    border-radius: 12px;
    background: #e08f24;
    color:#FFF;
}

.custom-modal-width .modal-dialog {
    max-width: 90%; /* Adjust this value to your desired width */
}

.helena-intro-thumbnail {
    margin-top:1rem;
    /*height:22rem;*/
    /*object-fit: contain*/
}

.philip-intro-thumbnail {
    margin-top:3rem;
    /*height:22rem;*/
    object-fit: contain;
}

.main-page{
    padding-top:90px;
}

.read-more-less {
    cursor: pointer;
}

.meet-mentor-filters-container {
    background: #FAFAFC;
    position:fixed;
    max-height: 100vh;
    overflow-y:auto;
}

.overlay{
    z-index: auto;
}

.read-more-section-temp{
    margin-top:-1em;
}

.consultation-btn-mobile {
    display: none;
}

@media only screen and (max-width: 768px) {

    #filtersModal button{
        font-size: 18px !important;
        line-height: 32px;
    }

    .mentor-feedback-rating-container .mentor-feedback-rating-card{
        box-shadow: 0px 1px 8.3px 0px rgba(0, 0, 0, 0.25);
        width:98% !important;
        border-color: transparent;
    }

    .read-more-section-temp{
        margin-top:0em;
    }

    .carousel-indicators {
        z-index: auto;
    }

    #filtersModal .btn-filter-option {
        font-size: 16px !important;
    }

    #filtersModal .modal-body {
        max-height: 58vh;
        overflow-y: auto;
    }

    .carousel-control-next-icon {
        opacity: 35%;
    }

    .carousel-control-prev-icon {
        opacity: 35%;
    }

    .main-page {
        padding-top: 110px !important;
    }

    .helena-intro-thumbnail {
        margin-top: 0;
        height: auto;
    }

    .philip-intro-thumbnail {
        margin-top: 0;
        height: auto;
    }

    .filters-sidebar {
        height: 100%;
        width: 57%;
        position: fixed;
        top: 0;
        /*left: 0;*/
        right: -300px; /* Start offscreen */
        padding-top: 150px;
        z-index: 1;
        /*transition: 1s ease; !* Transition for sliding effect *!*/
        display: block;
        overflow: auto;
        animation: slideIn 1s ease; /* Use CSS animation instead of transition */

    }

    .filters-sidebar.collapsing {
        right: -300px; /* Ensure smooth transition during collapse */
    }

    .filters-sidebar.show {
        right: 0; /* Show the sidebar when it's expanded */
    }

    p {
        font-size: 1rem !important;
    }

    .meet-member-container {
        width: 100% !important;
        margin: 0;
        padding-top: 0;
        background: #F2F1F8;

    }

    .mentor-introduction {
        display: flex;
        flex-direction: column-reverse;
    }

    .mentor-introduction .heading {
        color: #000;
        font-size: 1.15rem;
        font-style: normal;
        font-weight: 700;
        line-height: 50px;
        padding-top: 1rem;
    }

    .meet-member-container .career-highlights {
        margin-top: 0.5rem;
        font-size: 1rem;
    }

    .meet-member-container .career-highlights ul {
        padding-left: 0.8rem;
    }

    .meet-member-container .career-highlights ul > li {
        padding: 0.5rem 0rem;
    }

    .mentor-feedback-section {
        height: auto;
    }

    .mentor-feedback-container {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }


    .mentor-feedback-container .heading {
        font-size: 1.75rem;
        font-weight: 600 !important;
        line-height: 52px;
        text-align: center;
    }

    .mentor-feedback-rating-container .heading {
        font-size: 1.75rem;
        font-weight: 600 !important;
        line-height: 52px;
        text-align: center;
    }

    .meet-member-container .heading-section .p-text,
    .meet-member-container .heading-section p{
        line-height: 34px;
    }

    .custom-card-sm {
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .meet-member-container .heading a {
        color: #273365;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 500;
        line-height: 17.403px;
    }


    .meet-mentor-filters-section .meet-mentor-filter-card {
        border-radius: 0.75rem;
        background: #FFF;
        border-color: white;
        width: 13.5rem !important;
        text-align: center;
        cursor: pointer;
    }

    .meet-mentor-filters-section .meet-mentor-filter-card .card-title {
        border-radius: 6px;
        display: inline-flex;
        padding: 4px 6px;
        justify-content: center;
        align-items: center;
        font-size: 0.875rem !important;
        text-align: center;
    }

    .meet-mentor-filters-section .meet-mentor-filter-card .card-subtitle {
        color: #000;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 29.005px;
    }

    .meet-mentor-filters-section .meet-mentor-filter-card .card-text {
        color: #333;
        font-size: 0.875rem !important;
        font-style: normal;
        font-weight: 400;
    }

    .carousel-indicators li {
        background-color: #bbb; /* Default color for inactive indicators */
        border-radius: 50%; /* Makes the indicators circular */
        width: 10px !important; /* Adjust the size of the circle */
        height: 10px !important; /* Adjust the size of the circle */
        margin: 5px; /* Adjust the space between the indicators */
    }

    .carousel-indicators .active {
        background-color: #555; /* Color for the active indicator */
    }

    .mentor-feedback-rating-card .rating h2 {
        font-weight: bold !important;
    }

    .what-parents-learn-section {
        height: auto !important;
    }

    .mentor-feedback-container .mentor-feedback-card .reviewer-name {
        font-size: 16px !important;
    }

    .mentor-feedback-container .mentor-feedback-card .working-duration{
        font-size: 14px !important;
    }

    .mentor-feedback-container .mentor-feedback-card .description{
        font-size: 16px !important;
        line-height: 32px;
    }

    .mentor-feedback-rating-card .title{
        font-size: 20px !important;
    }

    .mentor-feedback-rating-card .sub-text{
        font-size: 16px !important;
        line-height: 28px;
    }

    #filtersModal .modal-header .modal-title{
        font-weight: bold;
        font-size: 24px !important;
    }

    #filtersModal .modal-body p{
        font-size: 16px !important;
    }

    #filtersModal .modal-body .heading{
        font-size: 20px !important;
        font-weight: bold;
    }

    .consultation-btn-mobile {
        display: block;
    }

    .subscribe-card{
        position: relative;
        z-index: 5;
    }

}

@media only screen and (min-width: 768px) and (max-width: 1400px) {


    #filtersModal .btn-filter-option{
        font-size:16px !important;
    }

    #filtersModal .modal-body{
        max-height: 50vh; overflow-y: auto;
    }

    .mentor-introduction {
        display: flex;
        flex-direction: column-reverse;
    }

    /*.mentor-feedback-rating-container .mentor-feedback-rating-card {*/
    /*    padding: 0 !important;*/
    /*}*/

    .meet-member-container .heading {
        font-size: 2.25em;
    }
}

@media only screen and (min-width: 999px) and (max-width: 1400px) {
   .description-visible{
       display:flex;
       flex-direction: column;
       width:95%;
   }
   .description-visible .heading {
        text-align: center !important;
   }
}

.fs-075{
    font-size: 0.75rem !important;
}

.light-gray{
    color:#828282;
}

.w-md-custom{
    width:87%;
}


@keyframes slideIn {
    from {
        right: -300px; /* Slide in from the right side */
    }
    to {
        right: 0; /* Stop at the right position */
    }
}

.selected{
    outline-color: #2F3A58;
    color:#2F3A58;
    border: 1px solid #2F3A58;
    border-radius:12px;

    background-image: url('../images/charm_tick.png');
    background-repeat: no-repeat;
    background-position: center left 10px;
    font-weight: 500;
}