html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    --bs-font-sans-serif: 'IRANSans' !important;
    background-color: var(--my-light-color);
}


* {
    --my-primary-color: #EADFD4;
    --my-primary-color-II: #c09f82;
    --my-primary-light-color: #fff3e5;
    --my-darkgold: #a78a71;
    --my-secondary-color: #343434;
    --my-deep-color: #070707;
    --my-light-color: #f3f3f3;
    --brown: #948576;
    --white: #fff;
    --deep-brown: #85786c;
    --grey: #f9fafd;
    --light-grey: #e2e2e2;
    --deep-grey: #7a7a7a;
    --blue: #224acc;
    --primary-blue: #0D6EFD;
    --deep-blue: #011a6b;
    --green: #0EA960;
    --light-green: #17EC97;
    --deep-green: #065716;
    --breadcrumb-deep: #3D3F44;
    --breadcrumb-light: #b8bcc3;
    --breadcrumb-active: #7a7a7a;
    --red: #d70000;
    --path: url('../images/slider/3.jpg');
    --tile-path: url('../images/color/orange.png');
    --bs-tertiary-bg: rgba(196, 187, 178, 0.20) !important;
    --bs-dropdown-link-active-bg: rgba(196, 187, 178, 0.6) !important;
    --bs-accordion-active-bg: #e1e1e1;
}

.ltr {
    direction: ltr !important;
}

.rtl {
    direction: rtl !important;
}

.fs-7 {
    font-size: 0.9rem !important;
}

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

.opacity-10 {
    opacity: 0.1;
}

.mw-50 {
    max-width: 50% !important;
}

.mw-75 {
    max-width: 75% !important;
}

.mt-n50 {
    margin-top: -50px;
}

.mt-n10p {
    margin-top: -10%;
}

.mt-n13p {
    margin-top: -13%;
}

.mt-n15p {
    margin-top: -15%;
}

.mt-n40p {
    margin-top: -40%;
}

.ms-n5 {
    margin-right: -5%;
}

.cl-gold {
    color: var(--my-primary-color-II);
}

.cl-darkgold {
    color: var(--my-darkgold);
}

.cl-brown {
    color: var(--brown);
}

.cl-deepbrown {
    color: var(--deep-brown);
}


#btn-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    padding: 0px !important;
    margin: 0 !important;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    opacity: 0.5;
    --my-deep-color: #64615f;
    background-color: var(--my-deep-color);
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
    z-index: 200;
}

    #btn-top:hover {
        opacity: 1;
    }

    #btn-top i {
        color: white !important;
    }


.pink {
    background-color: var(--my-primary-color);
}

.pink-color {
    color: var(--my-deep-color);
}


.hand {
    cursor: pointer !important;
}

.text-justify {
    text-align: justify;
}


.mynav > .input-group .form-control {
    border-left: none !important;
    margin-left: -15px !important;
    border-color: var(--my-secondary-color) !important;
}


    .mynav > .input-group .form-control:focus {
        /*color: #212529;*/
        color: var(--my-deep-color);
        background-color: #fff;
        border-color: var(--my-secondary-color);
        outline: 0;
        box-shadow: 0 0 0 0.08rem #f5beb6;
    }

.mynav .nav-link {
    /*color: #2c2e2f;*/
    color: var(--my-secondary-color);
}

.mynav .navbar-brand {
    color: white;
}

.mynav .nav-item:not(:nth-of-type(1)) {
    margin-right: 15px !important;
}


.tel {
    display: inline-block;
    background: var(--my-secondary-color);
    border-radius: 40px;
    padding: 2px;
    text-align: center;
}

    .tel:hover > .tel-span {
        width: 110px;
        padding: 0 5px;
    }

    .tel:hover > .tel-link {
        /*background: var(--my-secondary-color);
        color: var(--my-primary-color);*/
        background: var(--my-primary-color);
        color: var(--my-secondary-color);
    }

    .tel a {
        text-decoration: none !important;
    }

.tel-link {
    color: var(--my-primary-color);
    float: right;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--scondary-pink);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}

.tel-span {
    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    color: var(--grey);
    transition: 0.4s;
    width: 0px;
    text-align: center;
}

    .tel-span:hover {
        color: var(--light-grey);
        cursor: text !important;
    }


.mail {
    display: inline-block;
    right: 30px;
    background: var(--my-secondary-color);
    border-radius: 40px;
    padding: 2px;
    text-align: center;
}

    .mail:hover > .mail-span {
        width: 120px;
        padding: 0 5px;
    }

    .mail:hover > .mail-link {
        background: var(--my-primary-color);
        color: var(--my-secondary-color);
    }

    .mail a {
        text-decoration: none !important;
    }

.mail-link {
    color: var(--my-primary-color);
    float: right;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--my-secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}

.mail-span {
    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    color: var(--grey);
    transition: 0.4s;
    width: 0px;
    text-align: center;
}

    .mail-span:hover {
        color: var(--light-grey);
        cursor: text !important;
    }

.login {
    display: inline-block;
    background: var(--my-secondary-color);
    border-radius: 40px;
    padding: 2px;
    text-align: center;
}

    .login:hover > .login-span {
        width: 105px;
        padding-right: 5px;
    }

    .login:hover > .login-link {
        background: var(--my-primary-color);
        color: var(--my-secondary-color);
    }

    .login a {
        text-decoration: none !important;
    }


.login-link {
    color: var(--my-primary-color);
    float: right;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--my-secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}

.login-span {
    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    color: var(--grey);
    transition: 0.4s;
    width: 0px;
    text-align: center;
    font-size: 16px;
}

    .login-span:hover {
        color: var(--light-grey);
        cursor: text !important;
    }


.user {
    display: inline-block;
    background: var(--deep-grey);
    border-radius: 40px;
    padding: 3px 10px;
    margin-right: 5px !important;
    text-align: center;
    color: white !important;
}

    .user .user_name {
        color: white !important;
        margin-right: 5px !important;
        font-size: 12px !important;
    }

    .user a {
        color: white !important;
        text-decoration: none !important;
        cursor: pointer !important;
    }


.flexbox {
    background: none;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.search > div {
    display: inline-block;
    position: relative;
}

    .search > div:after {
        content: "";
        background: var(--my-light-color);
        width: 2px;
        height: 15px;
        position: absolute;
        top: 19px;
        right: -1px;
        transform: rotate(135deg);
    }

    .search > div > input {
        color: var(--light-grey);
        font-size: 11px;
        background: transparent;
        width: 25px;
        height: 25px;
        padding: 10px;
        border: solid 2px var(--my-light-color);
        outline: none;
        border-radius: 35px;
        transition: width 0.5s;
    }

        .search > div > input::placeholder {
            color: var(--my-light-color);
            opacity: 0;
            transition: opacity 150ms ease-out;
        }

        .search > div > input:focus::placeholder {
            opacity: 1;
        }

        .search > div > input:focus,
        .search > div > input:hover,
        .search > div > input:not(:placeholder-shown) {
            width: 150px;
        }

.slider {
    position: relative;
    padding: 0;
    margin: 0;
    background-image: var(--path);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    align-items: center;
    align-content: center;
    justify-content: center;
}

    .slider h3 {
        font-family: Dima, 'Dima';
        padding: 40px 20px 20px 20px;
        backdrop-filter: blur(7.5px);
        text-align: center !important;
        white-space: nowrap;
    }

.slider-1 {
    --path: url('../images/slider/laminate.png');
}
.slider-2 {
    --path: url('../images/slider/flossing.jpg');
}

.slider-3 {
    --path: url('../images/slider/implant.jpg');
}

.slider-4 {
    --path: url('../../images/macros/children.jpg');
}

.top-image img {
    max-height: 525px;
    object-fit: cover;
}

.top-image h5 {
    font-family: Dima, 'Dima';
    padding: 40px 20px 20px 20px;
    backdrop-filter: blur(7.5px);
    text-align: center !important;
    white-space: nowrap;
}

.tile {
    position: relative;
    background-image: var(--tile-path);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 170px !important;
}

.implant {
    --tile-path: url('../images/tiles/implant.jpg');
}

.orthodontics {
    position:relative;
    --tile-path: url('../images/tiles/orthodontics.jpg');
}

.smile {
    --tile-path: url('../images/tiles/smile.jpg');
}

.btn-glass {
    --color: white;
    --bg-color: transparent;
    padding: 2px 15px;
    border: 1px solid white;
    text-decoration: none !important;
    cursor: pointer !important;
    border-radius: 0.375rem;
    color: white !important;
    text-align: center;
    transition: all 300ms;
}

    .btn-glass:hover {
        color: var(--color) !important;
        border-color: var(--bg-color);
        background-color: var(--bg-color);
    }

.blu {
    --color: #fff;
    --bg-color: #265a8d;
}

.pnk {
    --color: #000;
    --bg-color: #f79fd8;
}

.grn {
    --color: #000;
    --bg-color: #B3E0D6;
}

.bg-menu {
    background-color: var(--my-primary-color);
}
    .bg-menu a {
        color: var(--my-secondary-color) !important;
    }

    .bg-menu .btn-dark {
        color: var(--white) !important;
    }

.btn-bottom {
    position: absolute;
    left: calc(50% - 40px);
    bottom: 5px;
}

.telephone {
    text-decoration: none !important;
    opacity: 0.7;
    transition: opacity 0.5s;
}

.telephone:hover {
    opacity: 1;
}

.pull-left {
    text-align: left;
}

.info {
    margin-top: 5%;
    color: #eab4ab !important;
    cursor: pointer;
    transition: color 1s;
}

.info:hover {
    color: var(--deep-grey) !important;
}

.applications button {
    color: #0ea960;
    padding-left: 15px;
    padding-right: 15px !important;
}

.applications button:hover {
    color: white;
    background-color: #0ea960;
}

.copyrights {
    text-align: right;
    color: var(--deep-grey);
    font-weight: 100;
    font-size: 0.95rem;
}

.social {
    direction: ltr !important;
    display: flex;
    flex-direction: row;
}

    .social a {
        --color: var(--deep-grey);
        text-decoration: none !important;
        color: var(--color);
        font-size: 1.63rem !important;
        margin-left: 1.5rem;
        text-align: left !important;
        transition: color 0.5s;
    }

        .social a:hover:nth-of-type(1) {
            --color: #38529A;
        }
        .social a:hover:nth-of-type(2) {
            --color: #e28640;
        }
        .social a:hover:nth-of-type(3) {
            --color: #006bbb;
        }
        .social a:hover:nth-of-type(4) {
            --color: #0ea960;
        }

.motto-placeholder {
    width: 100%;
    background-image: url('../images/backgrounds/patterns/pattern.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.motto-placeholder-inverse {
    width: 100%;
    background-image: url('../images/backgrounds/patterns/pattern-inverse.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.motto-placeholder-inverse-II {
    width: 100%;
    background-image: url('../images/cta-bg.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
    .motto-placeholder-inverse-II::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: url(../images/backgrounds/bg-overlay.png);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

.map img {
    transition: box-shadow 0.5s;
}

.map:hover img {
    box-shadow: 5px 5px 10px rgba(0,0,0,.5) !important;
}

.carousel-item .disabled {
    filter: grayscale(100%);
    opacity:0.3;
}


.carousel-item .logo {
    max-width: 100px !important;
    transition: transform 0.3s;
    cursor: pointer;
    margin: 2% !important;
}

    .carousel-item .logo:hover {
        transform: scale(1.05);
    }

.hr {
    background-image: linear-gradient(90deg, transparent, grey, transparent);
    border: 0;
    height: 1px;
}

.team {
    gap: 5%;
}

    .team > div {
        flex: 0 0 auto;
        width: 23.8888888889%;
    }

.btn-close-red {
    color: white !important;
    font-size: 1.6rem;
    font-weight: lighter;
    line-height: 1.8rem;
    padding: 2px !important;
    border: 1px solid darkred;
    background-color: red;
    background-image: none !important;
    border-radius: 50%;
    margin-top: -35px !important;
    margin-left: -43px !important;
    opacity: 1 !important;
}

.login_modal .modal-body label {
    border: none !important;
    background: none !important;
    width: 25% !important;
    line-height: 3;
    align-items: flex-end !important;
    text-align: left !important;
    margin-left: 2%;
}

.dima {
    font-family: Dima, 'Dima';
}

.f-large {
    font-size: xx-large;
}

.login_modal .modal-body input {
    border-radius: 2rem !important;
    max-width: 73% !important;
    text-align: left !important;
    border-left-width: 1px !important;
}

.login_modal .modal-info-text {
    font-family: Dima, 'Dima';
    padding: 20px 40px;
    text-align: center !important;
    white-space: nowrap;
    font-size: xx-large;
}

.bg-image {
    display: grid;
    align-items: center;
    align-content: center;
    justify-content: center;
    background-image: var(--path);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

.img1 {
    --path: url('../images/blurred/back1.jpg');
}

.img2 {
    --path: url('../images/backgrounds/cream.png');
}

.btn-purple {
    background-color: #a30098;
    color: white;
}

    .btn-purple:hover {
        background-color: #85007b;
        color: white;
    }

    .btn-purple:active {
        background-color: #5c0456 !important;
        color: white !important;
    }

.btn-cream {
    background-color: #f3d5b9;
}

    .btn-cream:hover {
        background-color: #e2b891;
    }

    .btn-cream:active {
        background-color: #f3bd8a !important;
    }

.btn-phone {
    --green: #00CF7C;
    background: linear-gradient(to right, var(--green), var(--light-green));
    text-decoration: none !important;
    color: white;
    height: 2rem;
    padding: 7px 0px 7px 25px;
    transition: box-shadow 0.5s;
    max-width: 100%;
}

    .btn-phone i {
        width: 2.45rem;
        height: 2.45rem;
        border-radius: 2.45rem;
        --green: #00CF7C;
        background-color: var(--green);
        line-height: 2.45rem;
        text-align: center;
        padding: 0 !important;
        margin: 0 0 0 10px !important;
        font-size: 12px;
    }

    .btn-phone:hover {
        box-shadow: 0px 2px 2px rgba(3, 78, 43, 0.50) !important;
    }

.icons {
    --light-grey: #ECECEC;
    border: 1px solid var(--grey);
    background-color: var(--light-grey);
    border-radius: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    padding: 0 !important;
    color: var(--deep-grey);
    font-size: 1rem;
    text-align: center;
    margin: 0 5px;
    transition: background-color 0.5s, color 0.5s;
}

    .icons:hover {
        background-color: var(--deep-grey);
        color: var(--grey);
    }

.important-detail {
    box-shadow: 0 0 5px rgba(0, 46, 77, 0.2);
    width: 170px;
    padding: 20px 0 14.5px;
    height: auto;
    border-radius: 20px;
    margin: 0;
}

.dentist-rating-number {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 8px solid #E8F0F7;
    width: 85px;
    height: 85px;
    padding: 19px 0;
    color: #00CF7C;
    border-radius: 100%;
    margin-right: calc(50% - 42.5px);
    margin-bottom: 4px;
}

.important-detail .sub-title {
    font-size: 12px;
    color: #B0BCC6;
    display: block !important;
}

.important-detail svg {
    margin-bottom: 3px;
    position: relative;
    margin-top: -109.6px;
    margin-right: calc(50% - 84.5px);
}

.progress-ring__circle {
    transition: 0.35s stroke-dashoffset;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.btn-accordion {
    --light-green: #E8F0F7;
    background-color: var(--light-green);
    padding: 5px 15px;
}

    .btn-accordion i {
        color: var(--green);
        font-size: 1.4rem;
        margin-top: 5px;
        padding: 0;
    }

.ortho-header {
    top: 5px;
    left: 0;
}

.ortho-headerII {
    top: 35px;
    left: 10px;
}

.samples-title {
    background: linear-gradient(to right, transparent, #2F3F4B, transparent);
    height: 1px;
    text-align: center;
    width: 100%;
}

    .samples-title h1 {
        display: block;
        background: #fff;
        padding: 0 15px;
        text-align: center;
        font-size: 16px;
        position: relative;
        color: #31424E;
        margin: auto;
        top: -10px;
        width: fit-content;
        white-space: nowrap;
    }

    .samples a {
        text-decoration: none !important;
        cursor: pointer !important;
    }

        .samples a > img {
            border: 1px solid #e1e1e1;
            border-radius: 8px;
            margin: 4px;
            cursor: pointer !important;
            max-width: 128px !important;
            transition: transform 300ms;
        }

            .samples a > img:hover {
               transform: scale(1.1);
            }

.gallery-btn-close {
    position: absolute;
    top: 0;
    left: 5px;
    background-color: transparent;
    border: 0px !important;
    color: white;
    font-size: 1.5rem;
}

.swal-modal, .swal-modal button {
    direction: rtl !important;
    font-family: 'IRANSans' !important;
}

.my-accordion {
    box-shadow: 0 1px 4px rgba(43, 43, 43, 0.2);
    border-radius: 20px;
    overflow: hidden;
    padding: 0 25px;
    border: 1px solid #efefef;
}

    .my-accordion .accordion-item {
        border: 0 !important;
    }

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

    .my-accordion .accordion-button:focus {
        box-shadow: none !important;
    }

    .my-accordion .accordion-item:not(:first-child) .accordion-header {
        border-top: 1px solid #efefef;
    }

    .time_table {
        direction: rtl !important;
        background-color: #E8F0F7 !important;
        margin: 1rem;
        width: calc(100% - 1.5rem);
        border-radius: 1rem !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .time_table .head {
        border-bottom: 2px dashed #cddae1;
        padding: 1rem 2rem;
    }

        .time_table .head .title {
            color: #333;
            margin-bottom: 5px;
            text-align: center !important;
        }

    .time_table .content {
    }

.partition-title {
    background: linear-gradient(to right, transparent, #2F3F4B, transparent);
    height: 1px;
    margin: 30px 0;
    text-align: center;
}

    .partition-title span {
        display: block;
        background: #fff;
        width: fit-content;
        padding: 0 15px;
        text-align: center;
        font-size: 16px;
        position: relative;
        color: #31424E;
        margin: auto;
        top: -12px;
    }


.member-services ul {
    margin: 0 !important;
    padding: 15px;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

    .member-services ul li:not(.more):not(.selected) {
        list-style: none !important;
        width: 100%;
        height: 45px;
        display: flex;
        align-items: center;
        text-wrap: nowrap;
        font-size: 1vw;
        justify-content: flex-start;
        box-shadow: 0 2px 3px rgba(0, 46, 77, 0.2);
        border-radius: 23px;
        border: 1px solid #e7e7e7;
        padding: 0 13px;
        margin-bottom: 10px;
        transition: all 180ms;
        cursor: pointer !important;
    }

    .member-services ul li:hover:not(.more):not(.selected) {
        background-color: var(--deep-grey);
        color: white;
    }

        .member-services ul li i {
            color: var(--deep-grey);
            font-size: 1.4rem;
            margin-left: 15px;
        }

        .member-services ul li:hover:not(.selected) i {
            color: white;
        }

.member-services .selected {
    list-style: none !important;
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    text-wrap: nowrap;
    font-size: 1vw;
    justify-content: flex-start;
    box-shadow: 0 2px 3px rgba(0, 46, 77, 0.2);
    border-radius: 23px;
    border: 1px solid #e7e7e7;
    padding: 0 13px;
    margin-bottom: 10px;
    transition: all 180ms;
    cursor: not-allowed !important;

    background-color: var(--breadcrumb-light);
    color: var(--deep-green);
}

    .member-services .selected i {
        color: var(--deep-green);
    }

.member-services tr td {
    height: 25px;
    display: flex;
    align-items: center;
    text-wrap: nowrap;
    font-size: 1vw;
    justify-content: flex-start;
    cursor: pointer !important;
    border-radius: 5px;
    margin-right: 1rem;
    padding: 1rem;
    transition: all 300ms;
}

    .member-services tr td:hover {
        background-color: var(--light-grey);
    }

    .member-services tr td label {
        height: 25px;
        margin-right: 1rem;
        line-height: 25px;
        cursor: pointer !important;
        font-size: 1rem;
        color: var(--deep-grey);
    }

    .member-services tr td:hover label {
        color: var(--my-deep-color);
    }

    .member-services tr td input[type="radio"] {
        transform: scale(1.6);
    }

.pp_fade a {
    font-size: 0 !important;
}

.gallery {
    display: flex;
}

    .gallery div {
        display: inline-block;
        margin-right: 1%;
        margin-top: 2%;
    }

    .gallery a img {
        border-radius: 5px;
        box-shadow: 0px 3px 3px rgba(0,0,0,.3);
        transition: all 300ms;
        max-width: 100%;
        min-height: 100%;
        object-fit: cover;
    }

        .gallery a img:hover {
            transform: scale(1.1) translate3d(-3px, -5px, -5px);
            box-shadow: 0px 3px 5px rgba(0,0,0,.2);
        }

.pp_content_container {
    text-align: right !important;
}

.currentTextHolder {
    font-family: 'IRANSans' !important;
    font-style: normal !important;
}

.member-card {
    direction: rtl;
    display: flex;
    border: 1px solid #f1f1f1;
    border-radius: 0.375rem;
    padding: 0;
    margin: 1.3333% 4.16666667%;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

    .member-card .profile {
        border-top-right-radius: 0.375rem;
        width: 100%;
    }

        .member-card .profile .avatar {
            display: flex;
            text-align: center;
            justify-content: center;
            align-content: center;
            margin-right: auto;
            margin-left: auto;
            margin-top: 1rem;
        }

            .member-card .profile .avatar img {
                border: 2px solid #efefef;
                border-radius: 50%;
                max-width: 180px;
            }

        .member-card .profile .head {
            text-align: center;
            margin: 0 0 6px;
            padding: 1rem;
        }

            .member-card .profile .head h4 {
                font-weight: 300;
                font-size: 20px;
                text-shadow: 3px 3px 20px rgba(0,0,0,.1);
            }

            .member-card .profile .head small {
                display: block;
                font-size: 13px;
                font-weight: lighter;
                margin-top: 12px;
            }

        .member-card .profile .bottom {
            background-color: #f1f1f1;
            min-width: 100%;
            text-align: center;
            padding-top: 0.5rem;
            padding-bottom: 0.75rem;
        }

            .member-card .profile .bottom a {
                color: #777;
                cursor: pointer;
                text-decoration: none !important;
            }

    .member-card .demo .carousel {
        padding: 15px;
    }

    .member-card .demo .carousel img {
        object-fit: cover;
        border-radius: 12px;
    }

.h-middle {
    margin-top: auto !important;
    margin-bottom: auto !important;
}


.appointmentPicker {
    direction: rtl !important;
    background-color: #E8F0F7;
    margin: 1rem;
    margin-top: 0;
    width: calc(100% - 1.5rem);
    border-radius: 1rem !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

    .appointmentPicker .head {
        border-bottom: 2px dashed #cddae1;
        padding: 2rem;
    }

    .appointmentPicker .title {
        color: #333;
        margin-bottom: 5px;
        text-align: center;
    }

    .appointmentPicker .subtitle {
        color: #a1a1a1;
        text-align: center;
    }

        .appointmentPicker .content .carousel-control-prev,
        .appointmentPicker .content .carousel-control-next {
            background-color: white !important;
            aspect-ratio: 1/1;
            width: 6% !important;
            border-radius: 50% !important;
            border: 0px solid #09f;
            margin-right: -3%;
            margin-left: -3%;
            margin-top: 13%;
        }

            .appointmentPicker .content .carousel-control-prev .carousel-control-prev-icon,
            .appointmentPicker .content .carousel-control-next .carousel-control-next-icon {
                color: #09f !important;
                font-size: 1.3rem !important;
                line-height: 2rem !important;
            }

        .appointmentPicker .content .carousel-item {
            padding: 1% 5% 0 5%;
        }

            .appointmentPicker .content .carousel-item button {
                background-color: transparent !important;
                border: 0;
            }

                .appointmentPicker .content .carousel-item button .active {
                    border-bottom-color: #006efe !important;
                }

                .appointmentPicker .content .carousel-item button h6 {
                    color: #333;
                }

            .appointmentPicker .content .carousel-item .col-3 {
                padding-bottom: 10px !important;
                border-bottom: 3px solid #cde3f3;
                cursor: pointer;
            }

            .appointmentPicker .content .carousel-item .focused {
                border-bottom-color: #006efe;
            }

            .appointmentPicker .content .carousel-item .holiday.focused {
                border-bottom-color: red;
            }

            .appointmentPicker .content .carousel-item .time-pills {
                padding: 12px 6px;
                text-align: justify !important;
            }
                .appointmentPicker .content .carousel-item .time-pills ul {
                    padding: 0;
                    list-style: none !important;
                    display: grid;
                    grid-gap: 3px 6px;
                    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
                }

                    .appointmentPicker .content .carousel-item .time-pills ul li {
                        cursor: pointer;
                        font-size: 1vw;
                        text-wrap: nowrap;
                        min-height: 30px;
                        line-height: 30px;
                        overflow: hidden;
                    }

            .appointmentPicker .content .carousel-item .pill-item {
                padding: 6px 12px !important;
                border: 1px solid rgba(0, 110, 254, 0.3) !important;
                border-radius: 6px !important;
                transition: background 500ms, color 500ms;
                color: #006efe;
            }

                .appointmentPicker .content .carousel-item .pill-item i {
                    font-weight: lighter !important;
                    color: rgba(0, 110, 254, 0.2);
                }

            .appointmentPicker .content .carousel-item .pill-item:hover {
                background-color: rgba(0, 110, 254, 0.2) !important;
                color: #0048a7 !important;
            }


            .appointmentPicker .content .carousel-item .disabled {
                cursor: not-allowed !important;
                background-color: #cddae1 !important;
                border-color: #c5d0d5 !important;
                color: #8f9ba1 !important;
            }

                .appointmentPicker .content .carousel-item .disabled:hover {
                    background-color: #c8d3d9 !important;
                    border-color: #bec8cc !important;
                    color: #858f94 !important;
                }

                .appointmentPicker .content .carousel-item .disabled i {
                    font-weight: lighter !important;
                    color: rgba(33, 38, 46, 0.20);
                }

                .appointmentPicker .footer {
                    margin-top: 24px;
                    box-shadow: 0 -3px 10px rgba(0,42,75,.1);
                    padding: 20px 33px;
                }

        .appointmentPicker .footer .btn-reserve {
            background-color: #0B9DFF;
            border-radius: 2rem;
            color: white !important;
            padding: 5px 25px;
            cursor: pointer !important;
        }

        .appointmentPicker .footer .btn-cancel {
            background-color: #0B9DFF;
            border-radius: 2rem;
            color: white !important;
            padding: 5px 25px;
            cursor: pointer !important;
            margin-right: 5px;
        }

.confirm-button {
    background-color: #006efe;
    border-radius: 20px;
}

.cancel-button {
    background-color: #cc214b;
    border-radius: 20px;
}

    .cancel-button:focus {
        background-color: #cc214b;
    }

.holiday button h6,
.holiday_pane .time-pills h4 {
    color: red !important;
}

.holiday button span,
.holiday_pane .time-pills span {
    color: rgba(255, 0, 0, 0.80) !important;
}

.is-holiday {
    text-align: center;
    float: left;
    margin-top: 1rem;
    margin-bottom: -1rem;
    background-color: white;
    border-radius: 6px;
    border: 0px;
    box-shadow: -1px 1px 30px rgba(0,42,75,.1);
    cursor: default !important;
}


.bg-light-grey {
    background-color: var(--my-light-color);
    border-radius: 6px;
}

.more {
    list-style: none !important;
    text-align: center;
    font-size: 2rem;
    color:  var(--deep-grey);
}

.services-tit {
    background: linear-gradient(to right, transparent, #2F3F4B, transparent);
    height: 1px;
    margin: 30px 0;
    text-align: center;
}

    .services-tit span {
        display: block;
        width: fit-content;
        padding: 0 15px;
        text-align: center;
        font-size: 16px;
        position: relative;
        color: #31424E;
        margin: auto;
        top: -12px;
    }

.btn-send {
    background-color: #0B9DFF;
    border-radius: 2rem;
    color: white !important;
    padding: 5px 25px;
    cursor: pointer !important;
}

    .btn-send:hover {
        background-color: #006efe;
    }

    .btn-send:active {
        background-color: #2c75d5 !important;
    }

.select table tbody {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

    .select table tbody tr {
        width: 100% !important;
    }

        .select table tbody tr td {
            width: 60% !important;
            text-align: right !important;
        }

            .select table tbody tr td input[type="radio"] {
                margin-left: 8px !important;
            }

.rating {
    padding-right: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

    .rating .star {
        transition: 0.6s;
        display: flex;
        margin-right: 0.3rem;
        font-size: 25px;
        color: var(--bs-accordion-active-bg) !important;
    }
        .rating .star:first-child {
            margin-right: 0;
        }

    .rating .active {
        color: gold !important;
    }

.btn-blue {
    background-color: #0B9DFF;
    border-radius: 2rem;
    color: white !important;
    padding: 5px 25px;
    cursor: pointer !important;
}

    .btn-blue:hover {
        background-color: #2284c6;
    }

    .btn-blue:active {
        background-color: #60a9db !important;
    }

.pp_social {
    display: none !important;
}

.bg-trans80 {
    background-color: rgba(0, 0, 0, 0.87);
}

#slider img {
    width: 100% !important;
    height: 100% !important;
}

.nav-link {
    color: white !important;
}

.modal-backdrop .fade .show {
    display: none !important;
}

.txt-shadow {
    text-shadow: 2px 2px 5px #31424E;
}

#offcanvas_login .offcanvas-body {
    overflow: hidden;
}

    .offcanvas-body label,
    .rs label {
        z-index: 1;
        display: inline-block;
        margin-bottom: 0;
        position: absolute;
        right: 15px;
        top: 10px;
        color: #c09f82;
        font-size: 20px;
        border-left: 1px solid var(--my-primary-color-II);
        padding-left: 10px;
        line-height: 25px;
    }

    .rs textarea,
    .rs input[type=text],
    .rs input[type=tel],
    .rs input[type=email],
    .rs input[type=password],
    .offcanvas-body input[type=text],
    .offcanvas-body input[type=tel],
    .offcanvas-body input[type=email],
    .offcanvas-body input[type=password] {
        border: none !important;
        padding-right: 60px;
        background-color: transparent !important;
    }

    .rs input, 
    .offcanvas-body input {
        text-align: right !important;
    }

    .rs .fa-user,
    .offcanvas-body .fa-user {
        color: var(--my-primary-color-II);
    }

.rs .input-group {
    background-color: var(--white);
    border-radius: 0.25rem;
    padding: 2px 7px;
}

.btn-reserve {
    display: flex;
    align-items: center;
}

.reserve,
.btn-reserve {
    background-color: #6d7a83 !important;
    border-radius: 20px;
    border: none !important;
    color: var(--white);
    padding: 8px 24px;
}

    .reserve:hover,
    .btn-reserve:hover {
        background-color: #353d42 !important;
        color: var(--my-primary-color);
    }

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

    .mems a {
        background-color: var(--my-secondary-color);
        color: var(--white);
        border-radius: 1.5rem;
        padding: 8px 16px;
        text-decoration: none !important;
        font-weight: lighter;
        cursor: pointer;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }

    .mems a:hover {
        background-color: var(--breadcrumb-deep);
    }

        .mems:hover i {
            color: var(--deep-brown);
        }

    .mems i {
        color: var(--my-primary-color-II);
        margin-right: -10px;
        margin-left: .25rem;
        font-size: 1.7rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }

.why {
    position: relative;
    z-index: 1;
    background-color: #6d7a83;
    background-image: url(../images/backgrounds/kids.jpg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: auto;
}

    .why::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: url(../images/backgrounds/bg-overlay.png);
    }

.read-more-btn, 
.gallery-read-more-btn {
    display: flex;
    color: #c09f82;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    background: #fff;
    border-radius: 50%;
    width: 62px;
    height: 62px;
    position: absolute;
    justify-content: center;
    align-items: center;
    border: 5px solid #F3F3F3;
    left: 50%;
    transform: translateX(-50%);
    text-decoration: none !important;
    margin-top: -5%;
    transition: all 300ms ease-in-out;
}
    .read-more-btn:hover {
        background-color: #c09f82;
        color: white;
    }

.gallery-read-more-btn {
    background: #F3F3F3;
    border-color: #fff;
}

    .gallery-read-more-btn:before {
        background: none;
        border: 1px solid #eaeaea;
        content: "";
        display: block;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px;
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .gallery-read-more-btn:hover {
        background-color: #c09f82;
        color: #F3F3F3;
    }

.card-light {
    background-color: #f3f3f3;
    border: 1px solid #eaeaea !important;
}


.h-90 {
    height: 90% !important;
}

.h-0 {
    height: 0px !important;
    max-height: 0px !important;
}

.bg-golden {
    background-color: var(--my-primary-light-color) !important;
}

.users-tab .active {
    background-color: var(--my-primary-color) !important;
    color: var(--my-darkgold) !important;
}

.users-tab .nav-link:not(.active) {
    color: var(--deep-brown) !important;
}

.bg-card-img {
    height: 150px;
    background-image: url('../images/backgrounds/upper.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.card-profile {
    position: absolute;
    top: -50px;
    transform: translateY(155px);
    right: 40%;
    height: 90px;
    width: 90px;
    border: 3px solid #fff;
    border-radius: 50%;
}

.pull-right {
    float: right !important;
}

.pattern {
    background-image: url("../images/backgrounds/patterns/trans-pattern-1.png");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
}

.contact-bg {
    background-image: url("../images/backgrounds/patterns/algorithm.png");
    background-position: bottom left;
    background-position-y: 80%;
    background-position-x: 25%;
    background-repeat: no-repeat;
    background-size: auto;
}

.fixed-dark-bg {
    background-image: url("../images/slider/m1.jpg");
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
    height: 350px;
}

.bg-grey {
    background-color: #52585c;
}

.dento-phobia {
    position: relative;
    z-index: 1;
    background-image: url(../images/backgrounds/hflip-dentophobia.jpg);
    background-position-y: center;
    background-position-x: left;
    background-size: 70%;
    background-repeat: no-repeat;
}

    .dento-phobia::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: url(../images/backgrounds/hflip-bg-overlay.png);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

.service-pch .hovereffect:hover,
.service-pch .hovereffect .overlay {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.bg-dark-trans {
    background-color: rgba(13, 11, 11, 0.70);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.text-grey {
    color: #6d7a83 !important;
}

.rounded-start-3 {
    border-top-right-radius: var(--bs-border-radius-lg) !important;
    border-bottom-right-radius: var(--bs-border-radius-lg) !important;
}


/******* admin panel styles *********/
.bg-img {
    background-image: url(../images/slider/m1.jpg);
    background-size: cover contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.admin-login {
    font-family: 'IRANSans' !important;
}

    .admin-login input::placeholder {
        direction: rtl;
        text-align: right !important;
    }