@font-face {
    font-family: 'Cascadia Code';
    src: url(../fonts/Cascadia.ttf);
}

:root {
    --global--font-body: 'IranSans';
    --global--font-heading: 'IranSans';
    --global--color-primary: #ff7d3b;
    --global--color-secondary: #5c4e9d;
    --global--color-body: #60698d;
    --global--color-heading: #1f1845;
    --global--color-white: #ffffff;
    --global--color-light: #F5F5F5;
    --global--color-gray: #FAF8FB;
    --global--color-pink: #FEFBFF;
}

.alert {
    margin-top: 15px !important;
}

body,
html {
    overflow-x: hidden;
    direction: rtl;
    font-family: 'IranSans';
}

html {
    font-size: 13px;
}

body {
    background-color: var(--global--color-white);
    font-family: var(--global--font-body);
    font-size: 13px;
    font-weight: 400;
    color: var(--global--color-body);
    line-height: 1.5;
    margin: 0;
}

.wrapper {
    background-color: var(--global--color-white);
}

* {
    outline: none;
}

::-moz-selection {
    text-shadow: none;
}

::selection {
    background-color: var(--global--color-primary);
    color: var(--global--color-white);
    text-shadow: none;
}

a {
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
    color: var(--global--color-primary);
}

    a:hover {
        color: #ff7d3b;
        opacity: 0.1;
        text-decoration: none;
    }

    a:focus {
        color: #ff7d3b;
        opacity: 0.1;
        outline: none;
        text-decoration: none;
    }

    a:active {
        color: #ff7d3b;
        opacity: 0.1;
        outline: none;
        text-decoration: none;
    }

hr {
    margin: 0;
}

textarea {
    resize: none;
}

button.btn {
    margin-bottom: 0;
}

section {
    background-color: var(--global--color-white);
}

.modal-backdrop {
    z-index: 1020;
    background-color: rgba(34, 34, 34, 0.95);
}

.fullscreen {
    height: 100vh !important;
}

/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
    .fullscreen {
        height: auto !important;
    }
}

/*------------------------------------*\
    #TYPOGRAPHY
\*------------------------------------*/
/* Heading Text */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--global--color-heading);
    font-family: var(--global--font-heading);
    font-weight: 500;
    margin: 0 0 28px;
    line-height: 1;
}

.h1,
h1 {
    font-size: 52px;
}

.h2,
h2 {
    font-size: 42px;
}

.h3,
h3 {
    font-size: 38px;
}

.h4,
h4 {
    font-size: 32px;
}

.h5,
h5 {
    font-size: 24px;
}

.h6,
h6 {
    font-size: 18px;
}

p {
    color: var(--global--color-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
}

.lead {
    font-size: 16px;
    line-height: 1.8;
}

/* Aligning Text */
.text--left {
    text-align: left !important;
}

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

.text--center {
    text-align: center !important;
}

.text--just {
    text-align: justify !important;
}

.align--top {
    vertical-align: top;
}

.align--bottom {
    vertical-align: bottom;
}

.align--middle {
    vertical-align: middle;
}

.align--baseline {
    vertical-align: baseline;
}

/* Weight Text */
.bold {
    font-weight: bold;
}

.regular {
    font-weight: normal;
}

.italic {
    font-style: italic;
}

.break-word {
    word-wrap: break-word;
}

.no-wrap {
    white-space: nowrap;
}

/* Text Color */
.text-white {
    color: var(--global--color-white) !important;
}

.text-gray {
    color: var(--global--color-gray) !important;
}

.text-black {
    color: var(--global--color-heading);
}

.text-theme {
    color: var(--global--color-primary);
}

.text--capitalize {
    text-transform: capitalize !important;
}

.text--uppercase {
    text-transform: uppercase !important;
}

.font-heading {
    font-family: var(--global--font-heading);
}

.font-body {
    font-family: var(--global--font-body);
}

.font-18 {
    font-size: 24px;
}

.font-16 {
    font-size: 16px;
}

.font-20 {
    font-size: 20px;
}

.font-40 {
    font-size: 40px;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
    text-center-xs {
        text-align: center !important;
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    text-center-sm {
        text-align: center !important;
    }
}

.higlighted-style1 {
    background-color: var(--global--color-primary);
    color: #fff;
    padding: 5px 0;
}

.higlighted-style2 {
    background-color: var(--global--color-heading);
    color: #fff;
    padding: 5px 0;
}

.higlighted-style3 {
    background-color: var(--global--color-gray);
    color: var(--global--color-primary);
    padding: 5px 0;
}

/*------------------------------------*\
    #COLORS
\*------------------------------------*/
.color-heading {
    color: var(--global--color-heading) !important;
}

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

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

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

/*------------------------------------*\
    #Align
\*------------------------------------*/
address,
blockquote,
dd,
dl,
fieldset,
form,
ol,
p,
pre,
table,
ul {
    margin-bottom: 20px;
}

section {
    padding-top: 100px;
    padding-bottom: 100px;
    overflow: hidden;
}

.doctors {
    padding-top: 0px !important;
    margin-top: -150px;
}

@media screen and (max-width: 991px) {
    section {
        padding-top: 65px;
        padding-bottom: 65px;
    }
}

/* All margin */
.m-0 {
    margin: 0 !important;
}

.m-xs {
    margin: 10px;
}

.m-sm {
    margin: 20px;
}

.m-md {
    margin: 40px;
}

.m-lg {
    margin: 80px;
}

/* top margin */
.mt-0 {
    margin-top: 0;
}

.mt-xs {
    margin-top: 10px;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-50 {
    margin-top: 50px !important;
}

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

.mt-70 {
    margin-top: 70px !important;
}

.mt-80 {
    margin-top: 80px !important;
}

.mt-90 {
    margin-top: 90px !important;
}

.mt-100 {
    margin-top: 100px !important;
}

.mt-150 {
    margin-top: 150px;
}

/* bottom margin */
.mb-0 {
    margin-bottom: 0 !important;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-60 {
    margin-bottom: 60px !important;
}

.mb-70 {
    margin-bottom: 70px !important;
}

.mb-80 {
    margin-bottom: 80px !important;
}

.mb-90 {
    margin-bottom: 90px !important;
}

.mb-100 {
    margin-bottom: 100px !important;
}

.mb-150 {
    margin-bottom: 150px !important;
}

/* right margin */
.mr-0 {
    margin-right: 0;
}

.mr-30 {
    margin-right: 30px !important;
}

.mr-50 {
    margin-right: 50px;
}

.mr-60 {
    margin-right: 60px;
}

.mr-150 {
    margin-right: 150px;
}

/* left margin */
.ml-0 {
    margin-left: 0;
}

.ml-xs {
    margin-left: 10px;
}

.ml-sm {
    margin-left: 20px;
}

.ml-md {
    margin-left: 40px;
}

.ml-lg {
    margin-left: 80px;
}

.ml-30 {
    margin-left: 30px !important;
}

.ml-50 {
    margin-left: 50px;
}

.ml-60 {
    margin-left: 60px;
}

.ml-150 {
    margin-left: 150px;
}

/* All padding */
.p-0 {
    padding: 0 !important;
}

.p-xs {
    padding: 10px;
}

.p-sm {
    padding: 20px;
}

.p-md {
    padding: 40px;
}

.p-lg {
    padding: 80px;
}

/* top padding */
.pt-0 {
    padding-top: 0 !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.pt-30 {
    padding-top: 30px !important;
}

.pt-40 {
    padding-top: 40px !important;
}

.pt-50 {
    padding-top: 50px;
}

.pt-60 {
    padding-top: 60px;
}

.pt-70 {
    padding-top: 70px !important;
}

.pt-80 {
    padding-top: 80px;
}

.pt-90 {
    padding-top: 90px;
}

.pt-100 {
    padding-top: 100px !important;
}

.pt-150 {
    padding-top: 150px !important;
}

/* bottom padding */
.pb-0 {
    padding-bottom: 0 !important;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-60 {
    padding-bottom: 60px;
}

.pb-70 {
    padding-bottom: 70px !important;
}

.pb-80 {
    padding-bottom: 80px;
}

.pb-90 {
    padding-bottom: 90px;
}

.pb-100 {
    padding-bottom: 100px !important;
}

/* right padding */
.pr-0 {
    padding-right: 0;
}

.pr-xs {
    padding-right: 10px;
}

.pr-sm {
    padding-right: 20px;
}

.pr-md {
    padding-right: 40px;
}

.pr-lg {
    padding-right: 80px;
}

.pr-15 {
    padding-right: 15px !important;
}

.pr-30 {
    padding-right: 30px !important;
}

.pr-50 {
    padding-right: 50px;
}

.pr-60 {
    padding-right: 60px;
}

.pr-100 {
    padding-right: 100px !important;
}

.pr-150 {
    padding-right: 150px;
}

/* left padding */
.pl-0 {
    padding-left: 0 !important;
}

.pl-30 {
    padding-left: 30px;
}

.pl-50 {
    padding-left: 50px;
}

.pl-60 {
    padding-left: 60px;
}

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

.pl-150 {
    padding-left: 150px;
}

/* Postions */
.fixed {
    position: fixed;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.static {
    position: static;
}

/* Zindex*/
.zindex-1 {
    z-index: 1;
}

.zindex-2 {
    z-index: 2;
}

.zindex-3 {
    z-index: 3;
}

/* Borders */
.border-all {
    border: 1px solid var(--global--color-primary);
}

.border-top {
    border-top: 1px solid var(--global--color-primary);
}

.border-bottom {
    border-bottom: 1px solid var(--global--color-primary);
}

.border-right {
    border-right: 1px solid var(--global--color-primary);
}

.border-left {
    border-left: 1px solid var(--global--color-primary);
}

/* Display */
.inline {
    display: inline;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.hide {
    display: none;
}

/* Custom Font-Face Declarations */
@font-face {
    font-family: 'Inter';
    src: url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
    font-display: swap;
}

/* Global Typography Improvements */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.hero-title {
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
}

.hero-desc {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

/* Content Typography */
.terms-content h5,
.terms-content h6 {
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

.terms-content p,
.terms-content li {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

.terms-content strong {
    font-weight: 600 !important;
}

/* Navigation Typography */
.navbar-nav .nav-link {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
}

/* Footer Typography */
#footer h6 {
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
}

#footer a,
#footer .right-footer-ul li {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 400 !important;
}

#footer2 h5 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 500 !important;
}

/* Button Typography */
.btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
}

/* Form Typography */
.form-control,
.form-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 400 !important;
}

/* Alert Typography */
.alert {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 400 !important;
}

/* Responsive Font Sizes */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem !important;
    }
    
    .hero-desc {
        font-size: 1.1rem !important;
    }
    
    .terms-content h5 {
        font-size: 1.8rem !important;
    }
    
    .terms-content h6 {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-desc {
        font-size: 1rem !important;
    }
    
    .terms-content h5 {
        font-size: 1.6rem !important;
    }
    
    .terms-content h6 {
        font-size: 1.1rem !important;
    }
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media only screen and (max-width: 767px) {
    section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .text-center-xs {
        text-align: center !important;
    }

    .pull-none-xs {
        float: none !important;
        text-align: center !important;
    }

    .mb-15-xs {
        margin-bottom: 15px;
    }

    .mb-30-xs {
        margin-bottom: 30px !important;
    }

    .mb-50-xs {
        margin-bottom: 50px;
    }

    .mb-60-xs {
        margin-bottom: 60px !important;
    }

    .p-none-xs {
        padding-right: 0;
        padding-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .text-center-sm {
        text-align: center !important;
    }

    .mb-0-sm {
        margin-bottom: 0;
    }

    .mb-15-sm {
        margin-bottom: 15px;
    }

    .mb-30-sm {
        margin-bottom: 30px !important;
    }

    .mb-50-sm {
        margin-bottom: 50px;
    }

    .mb-60-sm {
        margin-bottom: 60px;
    }

    .pb-15-sm {
        padding-bottom: 15px;
    }

    .pb-30-sm {
        padding-bottom: 30px;
    }

    .pb-50-sm {
        padding-bottom: 50px;
    }

    .pb-60-sm {
        padding-bottom: 60px;
    }

    .p-none-sm {
        padding-right: 0;
        padding-left: 0;
    }

    .pull-none-sm {
        float: none !important;
        text-align: center !important;
    }
}

@media screen and (min-width: 992px) {
    .p-lg-60 {
        padding-right: 60px;
        padding-left: 60px;
    }
}

/*------------------------------------*\
    #Grid
\*------------------------------------*/
.row-no-padding [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.col-lg-5ths,
.col-md-5ths,
.col-sm-5ths,
.col-xs-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

.col-content {
    padding: 120px 100px 90px 120px;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
    .col-content {
        padding: 40px !important;
    }
}

.col-img {
    height: 600px !important;
    padding: 60px;
    overflow: hidden;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
    .col-img {
        height: auto;
        min-height: 600px;
    }
}

/* Postion Helpers */
.pos-fixed {
    position: fixed;
}

.pos-relative {
    position: relative;
}

.pos-absolute {
    position: absolute;
}

.pos-static {
    position: static;
}

.pos-top {
    top: 0;
}

.pos-bottom {
    bottom: 0;
}

.pos-right {
    right: 0;
}

.pos-left {
    left: 0;
}

.pos-vertical-center {
    position: relative;
    top: 50%;
    -webkit-transform: perspective(1px) translateY(-50%);
    transform: perspective(1px) translateY(-50%);
}

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

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

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

@media only screen and (min-width: 992px) {

    .hidden-lg,
    .hidden-md {
        display: none;
    }
}

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

    .hidden-on-mobile {
        display: none;
    }
}

@media only screen and (min-width: 578px) {

    .hidden-on-pc {
        display: none;
    }
}
/*------------------------------------*\
    #BACKGROUNDS
\*------------------------------------*/
.bg-theme {
    background-color: var(--global--color-primary) !important;
}

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

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

.bg-gray {
    background-color: var(--global--color-gray) !important;
}

.bg-white {
    background-color: var(--global--color-white) !important;
}

.bg-pink {
    background-color: var(--global--color-pink) !important;
    border-top: 1px solid #f8e2ff;
    border-bottom: 1px solid #f8e2ff;
}

.bg-dark {
    background-color: var(--global--color-heading) !important;
}

.bg-gradient {
    background: bottom center var(--global--color-white);
}

.bg-light-primary {
    background-color: #F1F8FE !important;
}

/* Background Image */
.bg-section {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top top;
    width: 100%;
    height: 100%;
}

.bg-pattern {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-repeat: repeat;
    background-position: center center;
    width: 100%;
    height: 100%;
}

.bg-content {
    background-size: contain;
}

.bg-overlay:before {
    content: "";
    display: inline-block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.bg-overlay-light:before {
    background-color: var(--global--color-white);
    opacity: 0.8;
}

.bg-overlay-dark:before {
    background-color: rgba(31, 24, 69, 0.06);
}

.bg-overlay-dark-2:before {
    background-color: black;
    opacity: 0.6;
}

.bg-overlay-grey:before {
    background-color: whitesmoke;
    opacity: 0.902;
}

.bg-overlay-theme:before {
    background-color: var(--global--color-primary);
    opacity: 0.7;
}

.bg-parallax {
    background-attachment: fixed;
}

.bg-ytvideo.bg-overlay:before {
    z-index: 1;
    opacity: .7;
}

/* Background Color Palettes */
.bg-purple {
    color: var(--global--color-white);
    background-color: #cc66cc !important;
}

.bg-sun-flower {
    color: var(--global--color-white);
    background-color: #f1c40f !important;
}

.bg-orange {
    color: var(--global--color-white);
    background-color: #f39c12 !important;
}

.bg-carrot {
    color: var(--global--color-white);
    background-color: #e67e22 !important;
}

.bg-pumpkin {
    color: var(--global--color-white);
    background-color: #d35400 !important;
}

.bg-alizarin {
    color: var(--global--color-white);
    background-color: #e74c3c !important;
}

.bg-pomegranate {
    color: var(--global--color-white);
    background-color: #c0392b !important;
}

.bg-turquoise {
    color: var(--global--color-white);
    background-color: #1abc9c !important;
}

.bg-green-sea {
    color: var(--global--color-white);
    background-color: #16a085 !important;
}

.bg-emerald {
    color: var(--global--color-white);
    background-color: #2ecc71 !important;
}

.bg-nephritis {
    color: var(--global--color-white);
    background-color: #27ae60 !important;
}

.bg-peter-river {
    color: var(--global--color-white);
    background-color: #3498db !important;
}

.bg-belize-hole {
    color: var(--global--color-white);
    background-color: #2980b9 !important;
}

.bg-amethyst {
    color: var(--global--color-white);
    background-color: #9b59b6 !important;
}

.bg-wisteria {
    color: var(--global--color-white);
    background-color: #8e44ad !important;
}

.bg-wet-asphalt {
    color: var(--global--color-white);
    background-color: #34495e !important;
}

.bg-wet-asphalt {
    color: var(--global--color-white);
    background-color: #34495e !important;
}

.bg-midnight-blue {
    color: var(--global--color-white);
    background-color: #2c3e50 !important;
}

.bg-silver {
    color: var(--global--color-white);
    background-color: #bdc3c7 !important;
}

.bg-concrete {
    color: var(--global--color-white);
    background-color: #859596 !important;
}

.bg-asbestos {
    color: var(--global--color-white);
    background-color: #7f8c8d !important;
}

.bg-asbestos {
    color: var(--global--color-white);
    background-color: #7f8c8d !important;
}

.bg-graphite {
    color: var(--global--color-white);
    background-color: #454545 !important;
}

.bg-gray-0 {
    background-color: #EEEEEE !important;
    color: #454545;
}

.bg-gray-1 {
    background-color: #ECECEC !important;
    color: #454545;
}

.bg-gray-2 {
    background-color: #BDC3C7 !important;
    color: #454545;
}

.bg-gray-3 {
    background-color: #DADFE1 !important;
    color: #454545;
}

.bg-gray-5 {
    background-color: #ECF0F1 !important;
    color: #454545;
}

.bg-gray-4 {
    background-color: #F2F1EF !important;
    color: #454545;
}

.bg-gray-6 {
    background-color: #D2D7D3 !important;
    color: #454545;
}

.bg-gray-7 {
    background-color: #E6E6E6 !important;
    color: #454545;
}

.bg-orange-1 {
    background-color: #F9690E !important;
    color: var(--global--color-white);
}

.bg-orange-2 {
    background-color: #D35400 !important;
    color: var(--global--color-white);
}

.bg-orange-3 {
    background-color: #F89406 !important;
    color: var(--global--color-white);
}

.divider-1 {
    height: 1px;
    background-color: #fce5e6;
}

.divider-2 {
    height: 1px;
    width: 100%;
    background-color: #f8e2ff;
}

.skew-divider {
    width: 100%;
    height: 100px;
    position: absolute;
    left: 0px;
    background: -o-linear-gradient(left top, #FEFBFF 49%, #fff 50%), -o-linear-gradient(140deg, #ffffff 16px, #000 0);
    background: linear-gradient(to right bottom, #FEFBFF 49%, #fff 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);
}

    .skew-divider.divider-theme {
        background: -o-linear-gradient(left top, var(--global--color-primary) 49%, #fff 50%), -o-linear-gradient(140deg, #ffffff 16px, #000 0);
        background: linear-gradient(to right bottom, var(--global--color-primary) 49%, #fff 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);
    }

.skew-divider-top {
    width: 100%;
    height: 100px;
    position: absolute;
    left: 0px;
    top: 0;
    background: -o-linear-gradient(left top, #ffffff 49%, #262B47 50%), -o-linear-gradient(140deg, #ffffff 16px, #000 0);
    background: linear-gradient(to right bottom, #ffffff 49%, #262B47 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);
}

/*------------------------------------*\
    #BUTTONS
\*------------------------------------*/
.btn {
    font-family: var(--global--font-heading);
    position: relative;
    z-index: 2;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    padding: 0;
    width: 200px;
    height: 60px;
    border: 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-transform: capitalize;
    -webkit-transition: 300ms ease-in-out;
    -o-transition: 300ms ease-in-out;
    transition: 300ms ease-in-out;
    border-radius: 6px;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    .btn {
        width: 200px;
        height: 70px;
    }
}

.btn:before {
    content: '';
    position: absolute;
    width: calc(100%);
    height: calc(100%);
    top: 0px;
    left: 0px;
    z-index: -1;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    transition: -webkit-transform 0.24s cubic-bezier(0.37, 0.31, 0.31, 0.9);
    -webkit-transition: -webkit-transform 0.24s cubic-bezier(0.37, 0.31, 0.31, 0.9);
    -o-transition: transform 0.24s cubic-bezier(0.37, 0.31, 0.31, 0.9);
    transition: transform 0.24s cubic-bezier(0.37, 0.31, 0.31, 0.9);
    transition: transform 0.24s cubic-bezier(0.37, 0.31, 0.31, 0.9), -webkit-transform 0.24s cubic-bezier(0.37, 0.31, 0.31, 0.9);
    border-radius: inherit;
}

.btn:hover:before {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
}

.btn.active,
.btn:active,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn.active.focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn .icon {
    margin-left: 10px;
}

.btn.btn-bg::before {
    content: unset;
}

.btn.btn-bg::after {
    content: '';
    position: absolute;
    width: calc(100%);
    height: calc(100%);
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center;
}

.btn.btn-bg.g-play::after {
    background-image: url("../images/buttons/g-play.png");
}

.btn.btn-bg.ios-store::after {
    background-image: url("../images/buttons/ios-store.png");
}

.btn.btn-bg.g-play-dark::after {
    background-image: url("../images/buttons/g-play-dark.png");
}

.btn.btn-bg.ios-store-dark::after {
    background-image: url("../images/buttons/ios-store-dark.png");
}

.btn-video {
    width: 73px;
    height: 73px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--global--color-primary);
    border-radius: 50%;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    position: relative;
    z-index: 5;
}

    .btn-video::after {
        content: '';
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #FF7D3B;
        border-radius: 100%;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
        -webkit-animation: pulse 0.8s ease-out 0s infinite;
        animation: pulse 0.8s ease-out 0s infinite;
        z-index: -1;
    }

    .btn-video svg {
        fill: var(--global--color-white);
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }

    .btn-video:hover {
        background-color: var(--global--color-secondary);
    }

        .btn-video:hover::after {
            background-color: var(--global--color-secondary);
        }

        .btn-video:hover svg {
            fill: var(--global--color-white);
        }

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        opacity: 0;
    }
}

a.back {
    position: absolute;
    top: 54px;
    left: 70px;
    font-size: 14px;
    font-weight: 500;
    line-height: 2.14;
    text-transform: capitalize;
    color: var(--global--color-white);
}

    a.back:hover span {
        -webkit-transform: rotate(-180deg) translateX(10px);
        -ms-transform: rotate(-180deg) translateX(10px);
        transform: rotate(-180deg) translateX(10px);
    }

    a.back span {
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
        display: inline-block;
        -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg);
        margin-right: 15px;
    }

/* Button Primary */
.btn--primary {
    background-color: var(--global--color-primary);
    color: var(--global--color-white);
}

    .btn--primary:active,
    .btn--primary:focus,
    .btn--primary:hover {
        color: var(--global--color-white);
        background-color: var(--global--color-secondary);
    }

.bg-dark .btn--primary:active,
.bg-dark .btn--primary:focus,
.bg-dark .btn--primary:hover {
    background-color: var(--color-hover);
    color: var(--global--color-white);
}

/* Button Secondary*/
.btn--secondary {
    background-color: var(--global--color-secondary);
    color: var(--global--color-white);
}

    .btn--secondary:active,
    .btn--secondary:focus,
    .btn--secondary:hover {
        background-color: var(--global--color-primary);
        color: var(--global--color-white);
    }

    .btn--secondary.btn--hover-white:active,
    .btn--secondary.btn--hover-white:focus,
    .btn--secondary.btn--hover-white:hover {
        background-color: var(--global--color-white);
        color: var(--color-hover);
    }

/* Button White */
.btn--white {
    background-color: var(--global--color-white);
    color: var(--global--color-heading);
    border: 1px solid var(--global--color-white);
    border-radius: 4px;
}

    .btn--white:active,
    .btn--white:focus,
    .btn--white:hover {
        background-color: var(--global--color-primary);
        color: var(--global--color-white);
        border-color: var(--global--color-primary);
    }

/* Button Block */
.btn--block {
    width: 100%;
}

.btn--auto {
    width: auto;
    padding: 0 17px;
}

/* Button Rounded */
.btn--rounded {
    border-radius: 50px;
}

/* Button Bordered */
.btn--bordered {
    background-color: transparent;
    border: 2px solid transparent;
}

    .btn--bordered.btn--primary {
        color: var(--global--color-primary);
        border-color: var(--global--color-primary);
    }

        .btn--bordered.btn--primary:active,
        .btn--bordered.btn--primary:focus,
        .btn--bordered.btn--primary:hover {
            color: var(--global--color-white);
            background-color: var(--global--color-primary);
            border-color: var(--global--color-primary);
        }

    .btn--bordered.btn--secondary {
        color: var(--global--color-secondary);
        border-color: var(--global--color-secondary);
    }

        .btn--bordered.btn--secondary:active,
        .btn--bordered.btn--secondary:focus,
        .btn--bordered.btn--secondary:hover {
            color: var(--global--color-white);
            background-color: var(--global--color-secondary);
        }

    .btn--bordered.btn--white {
        color: var(--global--color-white);
        border-color: var(--global--color-white);
    }

        .btn--bordered.btn--white:active,
        .btn--bordered.btn--white:focus,
        .btn--bordered.btn--white:hover {
            color: var(--global--color-primary);
            background-color: var(--global--color-white);
            border-color: var(--global--color-white);
        }

.btn--white.btn--secondary {
    color: var(--global--color-secondary);
    border-color: var(--global--color-white);
    background-color: var(--global--color-white);
}

    .btn--white.btn--secondary:active,
    .btn--white.btn--secondary:focus,
    .btn--white.btn--secondary:hover {
        color: var(--global--color-white);
        background-color: var(--global--color-primary);
        border-color: var(--global--color-primary);
    }

/*------------------------------------*\
    #FORMS
\*------------------------------------*/
.form-control {
    color: #D3D3D3;
    font-family: var(--global--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 55px;
    height: 55px;
    text-transform: capitalize;
    border: 1px solid #EBEEEE;
    background: transparent;
    padding: 0 20px;
    margin-bottom: 30px;
    position: relative;
    border-radius: 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

    .form-control:focus {
        border-color: var(--global--color-primary);
        -webkit-box-shadow: none;
        box-shadow: none;
        background: transparent;
    }

textarea.form-control {
    height: 120px;
    margin-bottom: 30px;
}

/* Placeholder */
.input-group {
    border-radius: 0;
    /*border: 1px solid grey;*/
    background-color: transparent;
    overflow: hidden;
    padding: 3px;
}

    .input-group .btn {
        width: 160px;
    }

    .input-group .input-group-btn {
        border-radius: 50px;
        overflow: hidden;
    }

    .input-group .btn-outline-success {
        height: 55px;
        border-radius: 0px 5px 5px 0px;
        border: 1px solid #198754;
    }

    .input-group .form-control {
        border-radius: 0px 5px 5px 0px !important;
    }

@media screen and (max-width:768px) {
    .input-group .btn-outline-success {
        width: 100px;
        font-size: 14px;
    }
}
/* Subscribe Alert */
.subscribe-alert {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    margin: 0;
    cursor: pointer;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
    -webkit-animation: alertfadein .35s ease .5s both;
    animation: alertfadein .35s ease .5s both;
}

    .subscribe-alert .alert {
        margin: 0 auto;
        font-size: 18px;
        height: 60px;
        line-height: 60px;
        border: none;
        border-radius: 0;
        padding: 0 30px;
        color: var(--global--color-white);
    }

        .subscribe-alert .alert:after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            width: 60px;
            background-color: rgba(0, 0, 0, 0.1);
            font-weight: 600;
            font-size: 18px;
            cursor: pointer;
            -webkit-transition: background-color .25s ease;
            -o-transition: background-color .25s ease;
            transition: background-color .25s ease;
            content: "\f00d";
            font-family: "Font Awesome 5 Free";
        }

        .subscribe-alert .alert.alert-danger {
            background-color: #cc0000;
        }

        .subscribe-alert .alert.alert-success {
            background-color: #198c19;
        }

@-webkit-keyframes alertfadein {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes alertfadein {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

.form-inline .form-control {
    background-color: var(--global--color-white);
    font-size: 16px;
    font-weight: 400;
    width: 221px;
    height: 51px;
    border-radius: 50px;
    margin-right: 30px;
    padding-left: 20px;
    border-bottom: none;
    margin-bottom: 0;
}

/*------------------------------------*\
    #Heading
\*------------------------------------*/
.heading {
    margin-bottom: 56px;
    position: relative;
}

@media screen and (max-width: 991px) {
    .heading {
        text-align: center;
    }
}

.heading .heading-subtitle {
    font-family: var(--global--font-body);
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 7px;
    color: var(--global--color-primary);
    text-transform: capitalize;
}

.heading .heading-title {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 13px;
    text-transform: capitalize;
}

@media screen and (max-width: 767px) {
    .heading .heading-title {
        font-size: 32px;
        line-height: 1.4;
    }

        .heading .heading-title br {
            display: none;
        }
}

.heading .heading-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 0;
    padding: 0;
    color: var(--global--color-body);
}

.heading.heading-light .heading-subtitle,
.heading.heading-light .heading-desc {
    color: #fefeff;
}

.heading.heading-light .heading-title {
    color: var(--global--color-white);
}

.about .heading {
    margin-bottom: 40px;
}

.about .about-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media screen and (max-width: 767px) {
    .about .about-action {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

.about .about-action .btn {
    margin-right: 30px;
}

    .about .about-action .btn:last-child {
        margin-right: 0;
    }

@media screen and (max-width: 767px) {
    .about .about-action .btn {
        margin-right: 0;
        margin-bottom: 25px;
    }

        .about .about-action .btn:last-child {
            margin-bottom: 0;
        }
}

@media screen and (max-width: 991px) {
    .about img {
        display: block;
        margin: 0 auto;
    }
}

/*------------------------------------*\
    #Blog
\*------------------------------------*/
.blog .blog-card {
    box-shadow: 0px 0px 8px rgba(85,85,87,0.2);
    border-radius: 15px;
    padding: 15px;
}

@media screen and (max-width: 991px) {
    .blog .blog-card {
        margin: 0 auto 30px;
        max-width: 370px;
        box-shadow: 0px 0px 8px rgba(85,85,87,0.2);
    }
}

@media screen and (max-width: 991px) {
    .blog .blog-card {
        max-width: 370px;
        margin: 0 auto 40px;
    }
}

.blog .blog-card:hover .blog-img img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.blog .blog-card .blog-img {
    overflow: hidden;
    border-radius: 18px;
}

    .blog .blog-card .blog-img img {
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
        max-width: 100%;
    }

.blog .blog-card .blog-content {
    padding-top: 18px;
    border-radius: 0 0 21px 21px;
    background-color: var(--global--color-white);
}

    .blog .blog-card .blog-content .blog-meta-container {
        margin-bottom: 19px;
    }

        .blog .blog-card .blog-content .blog-meta-container div {
            display: inline-block;
        }

            .blog .blog-card .blog-content .blog-meta-container div:first-of-type {
                margin-right: 5px;
            }

@media screen and (max-width: 767px) {
    .blog .blog-card .blog-content .blog-meta-container div:first-of-type {
        margin-bottom: 0px;
    }
}

.blog .blog-card .blog-content .blog-meta-container div span {
    font-family: var(--global--font-body);
    font-size: 13px;
    font-weight: 400;
    color: var(--global--color-body);
}

.blog .blog-card .blog-content .blog-meta-container .meta-date span {
    text-transform: capitalize;
}

.blog .blog-card .blog-content .blog-title {
    font-family: var(--global--font-body);
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    color: var(--global--color-heading);
    margin-bottom: 16px;
}

@media screen and (min-width: 1200px) {
    .blog .blog-card .blog-content .blog-title {
        padding-right: 0px;
    }
}

.blog .blog-card .blog-content .blog-title a {
    color: var(--global--color-heading);
    text-decoration: none;
}

    .blog .blog-card .blog-content .blog-title a:hover {
        color: var(--global--color-primary);
    }

.blog .blog-card .blog-content .blog-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 20px;
}

.blog .blog-card .blog-content .read-more a {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    text-transform: capitalize;
    color: var(--global--color-heading);
    position: relative;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    text-decoration: none;
}

    .blog .blog-card .blog-content .read-more a:hover {
        color: var(--global--color-primary);
    }

        .blog .blog-card .blog-content .read-more a:hover i {
            -webkit-transform: translateX(7px);
            -ms-transform: translateX(7px);
            transform: translateX(7px);
            color: var(--global--color-primary);
        }

    .blog .blog-card .blog-content .read-more a i {
        color: var(--global--color-heading);
        font-size: 13px;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
        margin-right: 12px;
    }

/*------------------------------------*\
    #Clients
\*------------------------------------*/
.clients {
    padding-top: 290px;
    padding-bottom: 30px;
    overflow: visible;
}

    .clients.bg-grey {
        background-color: var(--global--color-light);
    }

@media screen and (max-width: 991px) {
    .clients {
        padding-top: 30px;
        padding-bottom: 10px;
    }
}

.clients .client {
    padding-top: 60px;
    padding-bottom: 60px;
    cursor: pointer;
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
    width: 150px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .clients .client {
        width: 130px;
    }
}

.clients .client:hover::before {
    width: 100%;
}

.clients .client a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

.clients .client img {
    max-width: 100%;
    width: auto;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

/*------------------------------------*\
    #Counters
\*------------------------------------*/
@media screen and (max-width: 991px) {
    .counters {
        padding-bottom: 35px;
    }
}

@media screen and (max-width: 991px) {
    .counters .counter {
        text-align: center;
        margin-bottom: 30px;
    }
}

.counters .counter .counter-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media screen and (max-width: 991px) {
    .counters .counter .counter-content {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.counters .counter .counter-content .counter-icon {
    width: 42px;
    margin-right: 15px;
}

    .counters .counter .counter-content .counter-icon img {
        max-width: 100%;
    }

.counters .counter .counter-content .counter-num .counting {
    font-family: var(--global--font-body);
    font-weight: 500;
    font-size: 45px;
    color: var(--global--color-primary);
}

.counters .counter .counter-name h6 {
    font-family: var(--global--font-body);
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: #fefeff;
    text-transform: capitalize;
    margin-bottom: 0;
}

/*------------------------------------*\
    #HEADER
\*------------------------------------*/
.header {
    height: 80px;
}

    .header.header-transparent {
        background-color: transparent;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1001;
        direction:ltr;
    }

    /*------------------------------------*\
    #Menu
\*------------------------------------*/
    .header .navbar {
        margin-bottom: 0;
        border-radius: 0;
        min-height: 80px;
        border: none;
        padding: 0;
        border-bottom: 1px solid #e5e5e5;
    }

@media screen and (max-width: 991px) {
    .header .navbar {
        background: var(--global--color-white);
        -webkit-box-shadow: 0 2px 4px rgba(3, 27, 78, 0.1);
        box-shadow: 0 2px 4px rgba(3, 27, 78, 0.1);
    }
}

.header .navbar .navbar-brand {
    margin-right: 0;
    padding: 0;
}

    .header .navbar .navbar-brand img {
        width: 100px;
    }

    .header .navbar .navbar-brand .logo-dark {
        display: none;
    }

    .header .navbar .navbar-brand .logo-light {
        display: inline-block;
    }

.header .navbar .navbar-nav > li {
    margin-right: 35px;
    position: relative;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}


    .header .navbar .navbar-nav > li > a {
        font-family: var(--global--font-body);
        font-size: 16px;
        text-transform: capitalize;
        font-weight: 500;
        line-height: 24px;
        color: var(--global--color-heading);
        padding: 0;
        position: relative;
        display: block;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }

@media screen and (min-width: 768px) {
    .header .navbar .navbar-nav > li > a::before {
        position: absolute;
        left: 0;
        bottom: -5px;
        content: '';
        height: 3px;
        width: 0;
        background-color: var(--global--color-primary);
        -webkit-transition: width 300ms ease-in-out;
        -o-transition: width 300ms ease-in-out;
        transition: width 300ms ease-in-out;
    }
}

@media screen and (min-width: 992px) {

    .header .navbar .navbar-nav > li.active > a:before,
    .header .navbar .navbar-nav > li > a:focus:before,
    .header .navbar .navbar-nav > li > a:hover:before {
        width: 50%;
    }
}

@media screen and (max-width: 991px) {
    .header .navbar .navbar-nav > li {
        margin-right: 0;
        margin-bottom: 0;
        border-radius: 4px;
    }

        .header .navbar .navbar-nav > li a {
            margin-right: 0;
            padding: 15px 10px;
            color: var(--global--color-heading);
            line-height: 1;
        }

        .header .navbar .navbar-nav > li.active,
        .header .navbar .navbar-nav > li:hover,
        .header .navbar .navbar-nav > li:focus,
        .header .navbar .navbar-nav > li:active {
            background-color: var(--global--color-primary);
        }

            .header .navbar .navbar-nav > li.active a,
            .header .navbar .navbar-nav > li:hover a,
            .header .navbar .navbar-nav > li:focus a,
            .header .navbar .navbar-nav > li:active a {
                color: var(--global--color-white);
            }
}

.header .navbar.navbar-sticky {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
}

.header .navbar.navbar-fixed {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    background: var(--global--color-white);
    -webkit-box-shadow: 0 2px 4px rgba(3, 27, 78, 0.1);
    box-shadow: 0 2px 4px rgba(3, 27, 78, 0.1);
    -webkit-animation: navbarFixed 0.8s;
    animation: navbarFixed 0.8s;
}

    .header .navbar.navbar-fixed .navbar-brand .logo-dark {
        display: inline-block;
    }

    .header .navbar.navbar-fixed .navbar-brand .logo-light {
        display: none;
    }

    .header .navbar.navbar-fixed .navbar-nav > li > a {
        color: var(--global--color-heading);
    }

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

    .header .navbar.navbar-fixed .navbar-nav > li.active a,
    .header .navbar.navbar-fixed .navbar-nav > li:hover a,
    .header .navbar.navbar-fixed .navbar-nav > li:focus a,
    .header .navbar.navbar-fixed .navbar-nav > li:active a {
        color: var(--global--color-white);
    }
}

@media screen and (min-width: 992px) {
    .header.header-dark .navbar .navbar-nav > li > a {
        color: var(--global--color-heading);
    }
}

@-webkit-keyframes navbarFixed {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

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

@keyframes navbarFixed {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

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

/* Small Devices, Tablets */
@media only screen and (max-width: 576px) {
    .navbar .navbar-brand {
        max-width: 200px;
    }

        .navbar .navbar-brand img {
            max-width: 100%;
            height: auto;
        }
}

@media only screen and (max-width: 991px) {
    .navbar .navbar-brand {
        margin-left: 15px;
        line-height: 80px;
    }

        .navbar .navbar-brand img {
            max-width: 100%;
            height: auto;
        }

    .navbar .navbar-toggler {
        width: 30px;
        height: 30px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
        cursor: pointer;
        outline: none;
        margin-right: 15px;
        padding: 0;
    }

        .navbar .navbar-toggler:focus {
            -webkit-box-shadow: none;
            box-shadow: none;
        }
}

@media only screen and (max-width: 991px) and (min-width: 992px) {
    .navbar .navbar-toggler {
        display: none;
    }
}

@media only screen and (max-width: 991px) {
    .navbar .navbar-toggler .navbar-toggler-icon {
        width: 100%;
        height: 2px;
        background-color: var(--global--color-primary);
        position: relative;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }

        .navbar .navbar-toggler .navbar-toggler-icon:before,
        .navbar .navbar-toggler .navbar-toggler-icon:after {
            content: '';
            position: absolute;
            left: 0;
            height: 2px;
            width: 100%;
            background-color: var(--global--color-primary);
            -webkit-transition: 0.3s ease-in-out;
            -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
        }

        .navbar .navbar-toggler .navbar-toggler-icon:before {
            top: -10px;
        }

        .navbar .navbar-toggler .navbar-toggler-icon:after {
            top: 10px;
        }

        .navbar .navbar-toggler .navbar-toggler-icon.active {
            background-color: transparent;
        }

            .navbar .navbar-toggler .navbar-toggler-icon.active:before,
            .navbar .navbar-toggler .navbar-toggler-icon.active:after {
                top: 0;
            }

            .navbar .navbar-toggler .navbar-toggler-icon.active::before {
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
            }

            .navbar .navbar-toggler .navbar-toggler-icon.active::after {
                -webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

    .navbar .navbar-collapse {
        background-color: var(--global--color-white);
        padding: 15px;
    }

    .navbar.navbar-fixed .navbar-toggler .navbar-toggler-icon {
        background-color: var(--global--color-primary);
    }

        .navbar.navbar-fixed .navbar-toggler .navbar-toggler-icon.active {
            background-color: transparent;
        }

        .navbar.navbar-fixed .navbar-toggler .navbar-toggler-icon:before,
        .navbar.navbar-fixed .navbar-toggler .navbar-toggler-icon:after {
            background-color: var(--global--color-primary);
        }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .header .navbar .navbar-nav > li {
        margin-right: 20px;
    }

    .module .module-icon,
    .module-consultation .btn {
        margin-right: 0;
    }
}

@media only screen and (min-width: 992px) {
    .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
    }
}

/*------------------------------------*\
    #Modules
\*------------------------------------*/
.header .module-container {
    padding-left: 30px;
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .header .module-container {
        padding-left: 15px;
    }
}

@media screen and (max-width: 991px) {
    .header .module-container {
        padding-left: 0;
        margin-top: 15px;
    }
}

.header .module-container .module-cta .btn {
    width: 80px;
    height: 50px;
    padding: 0 5px;
    cursor: pointer;
    font-family: var(--global--font-heading);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    border-radius: 6px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: inherit;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    outline: none;
    background-color: var(--global--color-primary);
    border: 1px solid var(--global--color-primary);
}

    .header .module-container .module-cta .btn .icon {
        margin-left: 15px;
    }

    .header .module-container .module-cta .btn:hover {
        background-color: var(--global--color-secondary);
        border-color: var(--global--color-secondary);
        color: #fff;
    }
.header .module-container #go-to-panel-button {
    width: 180px;
    margin-right:-15px;
}
    @media screen and (max-width: 991px) {
        .header .module-container .module-cta .btn {
        width: 100% !important;
        height: 40px;
        line-height: 40px;
        font-size: 13px;
        margin-right: 0px;
        background-color: var(--global--color-secondary);
        border-color: var(--global--color-secondary);
        color: #fff;
        margin-top: 2px;
        margin-right:auto !important;
    }

        .header .module-container .module-cta .btn:before {
            line-height: 40px;
        }
}

.header .navbar-fixed .module-container .module-cta .btn {
    background-color: var(--global--color-secondary);
    border-color: var(--global--color-secondary);
    color: #fff;
}

    .header .navbar-fixed .module-container .module-cta .btn:hover,
    .header .navbar-fixed .module-container .module-cta .btn:active,
    .header .navbar-fixed .module-container .module-cta .btn:focus {
        background-color: var(--global--color-primary);
        border-color: var(--global--color-primary);
    }

/*------------------------------------*\
    #Hero
\*------------------------------------*/
.hero {
    overflow: visible;
    position: relative;
    padding: 0 0 50px 0;
    background-size: contain;
    background-position: right -3%;
}

    .hero .hero-cotainer {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        min-height: 800px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

@media screen and (min-width: 768px) and (max-width: 991px) {
    .hero .hero-cotainer {
        min-height: 650px;
    }
}

@media screen and (max-width: 767px) {
    .hero .hero-cotainer {
        height: auto;
        padding-top: 200px;
    }
}

.hero .hero-cotainer .hero-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    text-align: start;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    direction: ltr !important;
}

@media screen and (min-width: 991px) {
    .hero .hero-cotainer .hero-content {
        padding-right: 60px;
    }
}

@media screen and (max-width: 767px) {
    .hero .hero-cotainer .hero-content {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
        margin-bottom: 100px;
    }
}

.hero .hero-cotainer .hero-content .hero-title {
    font-size: 45px;
    line-height: 60px;
    margin-bottom: 14px;
}

@media screen and (max-width: 767px) {
    .hero .hero-cotainer .hero-content .hero-title {
        font-size: 34px;
        line-height: 1.2;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .hero .hero-cotainer .hero-content .hero-title {
        font-size: 38px;
        line-height: 48px;
    }
}

.hero .hero-cotainer .hero-content .hero-desc {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 35px;
    padding-right: 0px;
}

@media screen and (max-width: 991px) {
    .hero .hero-cotainer .hero-content .hero-desc {
        padding-right: 0;
    }
}

.hero .hero-cotainer .hero-content .hero-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media screen and (max-width: 767px) {
    .hero .hero-cotainer .hero-content .hero-action {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

.hero .hero-cotainer .hero-content .hero-action .btn {
    margin-right: 30px;
}

    .hero .hero-cotainer .hero-content .hero-action .btn:last-child {
        margin-right: 0;
    }

@media screen and (max-width: 767px) {
    .hero .hero-cotainer .hero-content .hero-action .btn {
        margin-right: 0;
        margin-bottom: 25px;
    }

        .hero .hero-cotainer .hero-content .hero-action .btn:last-child {
            margin-bottom: 0;
        }
}

.hero .hero-cotainer .hero-content .hero-action .contact-body .contactForm {
    position: relative;
}

    .hero .hero-cotainer .hero-content .hero-action .contact-body .contactForm .form-control {
        margin-bottom: 0;
        background-color: var(--global--color-white);
        border-radius: 4px;
        padding-left: 40px;
        padding-right: 250px;
        border-bottom: 0;
    }

@media screen and (max-width: 767px) {
    .hero .hero-cotainer .hero-content .hero-action .contact-body .contactForm .form-control {
        padding-left: 6px;
        padding-right: 200px;
    }
}

.hero .hero-cotainer .hero-content .hero-action .contact-body .contactForm .btn {
    position: absolute;
    top: 3px;
    right: 3px;
}

@media screen and (max-width: 767px) {
    .hero .hero-cotainer .hero-content .hero-action .contact-body .contactForm .btn {
        width: 170px;
    }
}

.hero .hero-cotainer .hero-content .hero-action .form-action {
    position: relative;
    width: 450px;
    margin-right: auto;
    margin-left: auto;
}

@media screen and (max-width: 576px) {
    .hero .hero-cotainer .hero-content .hero-action .form-action {
        width: 300px;
    }
}

@media screen and (min-width: 578px) and (max-width: 767px) {
    .hero .hero-cotainer .hero-content .hero-action .form-action {
        width: 500px;
    }
}

.hero .hero-cotainer .hero-content .hero-action .form-action .input-group {
    border: none;
    height: 65px;
    padding: 0;
    border-radius: 6px;
    background-color: var(--global--color-white);
}

    .hero .hero-cotainer .hero-content .hero-action .form-action .input-group .btn {
        width: 130px;
        height: 50px;
        line-height: 50px;
        border-radius: 4px;
    }

@media screen and (max-width: 767px) {
    .hero .hero-cotainer .hero-content .hero-action .form-action .input-group .btn {
        width: 120px;
        font-size: 13px;
    }
}

.hero .hero-cotainer .hero-content .hero-action .form-action .form-control {
    margin-bottom: 0;
    border-radius: 0;
    padding-left: 24px;
    padding-right: 0;
    border-bottom: 0;
    width: calc(100% - 130px);
    height: 50px;
}

@media screen and (max-width: 767px) {
    .hero .hero-cotainer .hero-content .hero-action .form-action .form-control {
        padding-left: 15px;
        padding-right: 10px;
        font-size: 13px;
        width: calc(100% - 120px);
    }
}

.hero .hero-cotainer .hero-content .hero-action .form-action .btn {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 60;
}

.about-us-hero img {
    max-width: 100% !important;
    margin-top: 15px;
}

.contact-us-hero img {
    max-width: 100% !important;
    margin-top: 15px;
    border-radius: 30%;
}

.hero .hero-cotainer .hero-img {
    overflow: hidden;
}

    .hero .hero-cotainer .hero-img img {
        max-width: 120%;
        margin: 0 auto;
    }

@media screen and (max-width:768px) {
    #Doctors-page .hero-cotainer .hero-img {
        display: none !important;
    }
}

.hero.hero-light .hero-cotainer .hero-content .hero-headline {
    color: var(--global--color-white);
}

.hero.hero-light .hero-cotainer .hero-content .hero-bio {
    color: #f8f9fa;
}

.hero.hero-lead-2 {
    background-color: #F2F0FB;
}

    .hero.hero-lead-2 .hero-cotainer {
        min-height: unset;
    }

        .hero.hero-lead-2 .hero-cotainer .hero-content {
            text-align: center;
            padding-top: 200px;
        }

@media screen and (max-width: 991px) {
    .hero.hero-lead-2 .hero-cotainer .hero-content {
        padding-top: 0;
    }
}

.hero.hero-lead-2 .hero-cotainer .hero-content .hero-title {
    font-size: 60px;
    line-height: 90px;
    margin-bottom: 12px;
}

@media screen and (max-width: 767px) {
    .hero.hero-lead-2 .hero-cotainer .hero-content .hero-title {
        font-size: 32px;
        line-height: 1.5;
    }
}

.hero.hero-lead-2 .hero-cotainer .hero-content .hero-desc {
    margin-bottom: 25px;
}

.shape-divider-bottom {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

    .shape-divider-bottom svg {
        fill: #fff;
    }

/*------------------------------------*\
    #Testimonial
\*------------------------------------*/
#testimonials {
    direction: ltr !important;
    display: none;
}

.testimonials .testimonials-customers-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 65px;
}

@media screen and (max-width: 991px) {
    .testimonials .testimonials-customers-container {
        margin-bottom: 25px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

.testimonials .testimonials-customers-container .author-img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    margin-right: 20px;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    opacity: 0.5;
    width: 90px;
    height: 90px;
    border-radius: 50%;
}

    .testimonials .testimonials-customers-container .author-img img {
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }

    .testimonials .testimonials-customers-container .author-img:last-child {
        margin-right: 0;
    }

    .testimonials .testimonials-customers-container .author-img.active {
        opacity: 1;
    }

        .testimonials .testimonials-customers-container .author-img.active img {
            -webkit-transform: scale(1.6);
            -ms-transform: scale(1.6);
            transform: scale(1.6);
        }

@media screen and (max-width: 991px) {
    .testimonials .testimonials-customers-container .author-img {
        width: 70px;
        height: 70px;
    }

        .testimonials .testimonials-customers-container .author-img:last-child {
            margin-right: 23px;
        }
}

.testimonials .testimonials-customers-container .author-img img {
    height: 100%;
    border-radius: 50%;
    width: 100%;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.testimonials .testimonial-card .testimonial-body {
    text-align: center;
}

.testimonials .testimonial-card .testimonial-name {
    font-family: var(--global--font-body);
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: var(--global--color-primary);
    text-transform: capitalize;
    margin-bottom: 0;
}

.testimonials .testimonial-card .testimonial-title {
    font-family: var(--global--font-body);
    font-size: 16px;
    line-height: 1.8;
    font-weight: 300;
    text-transform: capitalize;
    color: var(--global--color-body);
    margin-bottom: 0px;
}

.testimonials .testimonial-card .testimonial-desc {
    font-family: var(--global--font-body);
    font-size: 26px;
    font-weight: 500;
    line-height: 34px;
    color: var(--global--color-body);
    margin-bottom: 36px;
}

@media screen and (min-width: 1200px) {
    .testimonials .testimonial-card .testimonial-desc {
        max-width: 80%;
        margin: 0 auto 36px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .testimonials .testimonial-card .testimonial-desc {
        max-width: 75%;
        margin-right: auto;
        margin-left: auto;
    }
}

.testimonials.testimonials-2 {
    padding-top: 111px;
    padding-bottom: 0px;
}

@media screen and (max-width: 991px) {
    .testimonials.testimonials-2 {
        padding-top: 60px;
        padding-bottom: 0;
    }
}

.testimonials.testimonials-2 .owl-carousel {
    padding: 0 5%;
}

@media screen and (min-width: 992px) {
    .testimonials.testimonials-2 .owl-carousel {
        padding: 0 2%;
    }
}

@media screen and (min-width: 1200px) {
    .testimonials.testimonials-2 .owl-carousel {
        padding: 0 3%;
    }
}

.testimonials.testimonials-2 .owl-carousel .owl-stage-outer .owl-item {
    opacity: 0;
}

    .testimonials.testimonials-2 .owl-carousel .owl-stage-outer .owl-item.active {
        opacity: 1;
    }

@media screen and (min-width:1400px) {
    .testimonials.testimonials-2 .owl-carousel .owl-stage-outer .owl-item.active {
        max-width: 350px;
        margin-right: 50px;
    }
}

.testimonials.testimonials-2 .testimonial-card {
    background-color: var(--global--color-white);
    border-radius: 23px;
    -webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.04);
    box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.04);
    padding: 40px 45px 30px;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .testimonials.testimonials-2 .testimonial-card {
        padding-left: 25px;
        padding-right: 25px;
    }
}

@media screen and (max-width: 767px) {
    .testimonials.testimonials-2 .testimonial-card {
        padding-left: 25px;
        padding-right: 25px;
    }
}

.testimonials.testimonials-2 .testimonial-card .testimonial-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 28px;
}

    .testimonials.testimonials-2 .testimonial-card .testimonial-body .testimonial-img {
        width: 57px;
        height: 59px;
        border-radius: 20px;
        margin-right: 12px;
    }

    .testimonials.testimonials-2 .testimonial-card .testimonial-body .testimonial-content .testimonial-name {
        font-size: 15px;
        font-weight: 600;
        line-height: 32px;
        color: var(--global--color-heading);
        margin-bottom: 0;
    }

    .testimonials.testimonials-2 .testimonial-card .testimonial-body .testimonial-content .testimonial-title {
        font-size: 14px;
        font-weight: 300;
    }

.testimonials.testimonials-2 .testimonial-card .testimonial-desc {
    max-width: unset;
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 40px;
}

.testimonials.testimonials-2 .testimonial-background {
    width: 100%;
    height: 350px;
    border-radius: 50px;
    background-color: var(--global--color-secondary);
    opacity: 0.08;
    -webkit-transform: translateY(-227px);
    -ms-transform: translateY(-227px);
    transform: translateY(-227px);
    margin-bottom: -227px;
}

@media screen and (max-width: 991px) {
    .testimonials.testimonials-2 .testimonial-background {
        -webkit-transform: translateY(-260px);
        -ms-transform: translateY(-260px);
        transform: translateY(-260px);
        margin-bottom: -260px;
    }
}

@media screen and (max-width: 767px) {
    .testimonials.testimonials-2 .testimonial-background {
        -webkit-transform: translateY(-280px);
        -ms-transform: translateY(-280px);
        transform: translateY(-280px);
        margin-bottom: -280px;
    }
}

/*------------------------------------*\
    #Screenshots
\*------------------------------------*/
.screenshots .screenshot-warp {
    position: relative;
    direction: ltr;
}

    .screenshots .screenshot-warp:before {
        position: absolute;
        left: 50%;
        top: -10px;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        background: url("../images/screenshots/mockup-dark.png") no-repeat;
        background-size: contain;
        content: '';
        width: 320px;
        height: 710px;
        z-index: 3;
    }

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .screenshots .screenshot-warp:before {
        width: 276px;
    }
}

@media screen and (min-width: 1400px) {
    .screenshots .screenshot-warp:before {
        width: 380px;
    }
}

.screenshots .owl-carousel {
    padding-top: 55px;
    padding-bottom: 55px;
}

@media screen and (max-width: 767px) {
    .screenshots .owl-carousel {
        padding-top: 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .screenshots .owl-carousel {
        padding-top: 45px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .screenshots .owl-carousel {
        padding-top: 48px;
    }
}

.screenshots .owl-carousel .owl-stage-outer {
    overflow: visible;
}

    .screenshots .owl-carousel .owl-stage-outer .owl-item {
        border-radius: 18px;
        opacity: 0;
    }

        .screenshots .owl-carousel .owl-stage-outer .owl-item img {
            border-radius: 18px;
        }

@media screen and (max-width:991px) {
    .screenshots .owl-carousel .owl-stage-outer .owl-item img {
        text-align: center;
        margin-right: auto;
        margin-left: auto;
    }
}

@media screen and (max-width: 767px) {
    .screenshots .owl-carousel .owl-stage-outer .owl-item img {
        max-width: 300px;
        max-height: 615px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .screenshots .owl-carousel .owl-stage-outer .owl-item img {
        max-width: 300px;
        max-height: 615px;
    }
}

.screenshots .owl-carousel .owl-stage-outer .owl-item.active {
    opacity: 1;
    -webkit-box-shadow: 0px 0px 99px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 0px 99px rgba(0, 0, 0, 0.16);
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

@media screen and (max-width: 767px) {
    .screenshots .owl-carousel .owl-stage-outer .owl-item.active {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}

.screenshots .owl-carousel .owl-stage-outer .owl-item.center {
    z-index: 2;
    -webkit-box-shadow: 10px 10px 99px rgba(0, 0, 0, 0.33);
    box-shadow: 10px 10px 99px rgba(0, 0, 0, 0.33);
}

@media screen and (max-width: 767px) {
    .screenshots .owl-carousel .owl-stage-outer .owl-item.center {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}

@media screen and (min-width: 768px) {
    .screenshots .owl-carousel .owl-stage-outer .owl-item.center {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }
}

.screenshots .owl-carousel .owl-stage-outer .owl-item:not(.center):before {
    position: absolute;
    left: -22px;
    top: -19px;
    background: url("../images/screenshots/mockup-light.png") no-repeat;
    background-size: contain;
    content: '';
    width: calc(100% + 50px);
    height: calc(100% + 38px);
    z-index: 3;
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .screenshots .owl-carousel .owl-stage-outer .owl-item:not(.center):before {
        left: -18px;
    }
}

.screenshots .owl-carousel .owl-nav .owl-prev,
.screenshots .owl-carousel .owl-nav .owl-next {
    width: 45px;
    height: 45px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 8px;
}

    .screenshots .owl-carousel .owl-nav .owl-prev::before,
    .screenshots .owl-carousel .owl-nav .owl-next::before {
        content: unset;
    }

.screenshots .owl-carousel .owl-nav .owl-prev {
    background: url("../images/icons/chevron-left.png") no-repeat center;
    background-color: #fff;
    left: -85px;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

@media (min-width: 992px) and (max-width: 1200px) {
    .screenshots .owl-carousel .owl-nav .owl-prev {
        left: -40px;
    }
}

.screenshots .owl-carousel .owl-nav .owl-next {
    background: url("../images/icons/chevron-right.png") no-repeat center;
    background-color: #fff;
    right: -85px;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

@media (min-width: 992px) and (max-width: 1200px) {
    .screenshots .owl-carousel .owl-nav .owl-next {
        right: -40px;
    }
}

.screenshots.screenshots-2 {
    padding-top: 140px;
    padding-bottom: 128px;
}

@media screen and (max-width: 991px) {
    .screenshots.screenshots-2 {
        padding-top: 20px;
        padding-bottom: 70px;
    }
}

.screenshots.screenshots-2 .heading {
    z-index: 2;
    position: relative;
}

.blog-heading .heading-subtitle {
    text-decoration: none !important;
    font-size: 15px !important;
}

    .blog-heading .heading-subtitle i {
        margin-top: 15px;
        font-size: 10px;
        margin-right: 6px;
    }

@media screen and (min-width: 992px) {
    .screenshots.screenshots-2 .heading {
        padding-left: 15%;
    }
}

@media screen and (max-width: 991px) {
    .screenshots.screenshots-2 .heading {
        padding: 0 5%;
    }
}

@media screen and (max-width: 991px) {
    .screenshots.screenshots-2 .owl-carousel {
        padding: 0 5%;
    }
}

@media screen and (min-width: 992px) {
    .screenshots.screenshots-2 .owl-carousel .owl-stage-outer .owl-item.active {
        opacity: 0.7;
    }
}

@media screen and (min-width: 992px) {
    .screenshots.screenshots-2 .owl-carousel .owl-stage-outer .owl-item:not(.active) + .owl-item.active {
        z-index: 2;
        opacity: 1;
        -webkit-box-shadow: 10px 10px 99px rgba(0, 0, 0, 0.33);
        box-shadow: 10px 10px 99px rgba(0, 0, 0, 0.33);
    }
}

@media screen and (min-width: 992px) and (min-width: 768px) {
    .screenshots.screenshots-2 .owl-carousel .owl-stage-outer .owl-item:not(.active) + .owl-item.active {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }
}

/*------------------------------------*\
    #Features
\*------------------------------------*/
@media screen and (max-width: 991px) {
    .features {
        padding-bottom: 30px;
    }
}

.feature-card {
    padding: 75px 30px 68px;
    border-radius: 12px;
    position: relative;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    border: 1px solid #F2F1F4;
    transition: 0.3s ease-in-out;
    -webkit-box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.03);
    box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.03);
}

    .feature-card:hover,
    .feature-card.active {
        background-color: var(--global--color-secondary);
        -webkit-box-shadow: 0 20px 50px 0 rgba(69, 28, 192, 0.18);
        box-shadow: 0 20px 50px 0 rgba(69, 28, 192, 0.18);
    }

        .feature-card:hover .feature-content h3,
        .feature-card.active .feature-content h3 {
            color: #FFF2EB;
        }

        .feature-card:hover .feature-content p,
        .feature-card.active .feature-content p {
            color: var(--global--color-light);
        }

@media screen and (max-width: 991px) {
    .feature-card {
        max-width: 370px;
        margin: 0 auto 30px;
    }
}

@media screen and (max-width: 767px) {
    .feature-card {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

.feature-card .feature-icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 13px;
    background-color: var(--global--color-primary);
    height: 76px;
    width: 76px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 19px;
}

.feature-card .feature-content {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: center;
}

    .feature-card .feature-content h3 {
        font-size: 20px;
        font-weight: 500;
        line-height: 42px;
        margin-bottom: 10px;
        text-transform: capitalize;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }

    .feature-card .feature-content p {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
        color: var(--global--color-body);
        margin-bottom: 0;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }

/*------------------------------------*\
    #Processes
\*------------------------------------*/
.processes .process-card {
    padding: 0 20px;
    -webkit-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

@media screen and (max-width:991px) {
    .processes .process-card {
        text-align: center;
        max-width: 370px;
        margin: 0 auto 30px;
    }
}

.processes .process-card .process-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

    .processes .process-card .process-content .process-phase {
        margin-bottom: 40px;
        width: 90px;
        height: 90px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 8px;
        background-color: #FFF2EB;
        -webkit-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

        .processes .process-card .process-content .process-phase p {
            text-transform: capitalize;
            font-family: var(--global--font-body);
            font-size: 47px;
            font-weight: 600;
            color: var(--global--color-primary);
            margin-bottom: 0;
        }

    .processes .process-card .process-content .process-title {
        font-family: var(--global--font-body);
        text-transform: capitalize;
        font-weight: 600;
        font-size: 20px;
        line-height: 36px;
        color: var(--global--color-heading);
        margin-bottom: 10px;
    }

    .processes .process-card .process-content .process-desc {
        font-family: var(--global--font-body);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
        margin-bottom: 0;
        color: var(--global--color-body) 2;
    }

.processes .process-card:hover .process-content .process-phase {
    -webkit-box-shadow: 0 20px 50px 0 rgba(255, 125, 59, 0.16);
    box-shadow: 0 20px 50px 0 rgba(255, 125, 59, 0.16);
}

.processes .process-card.process-card-1 .process-content .process-phase {
    position: relative;
}

@media screen and (min-width: 992px) {
    .processes .process-card.process-card-1 .process-content .process-phase::after {
        content: '';
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 100%;
        z-index: 1;
        background-image: url("../images/line/line-top.png");
        background-size: contain;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 350px;
        height: 26px;
        background-repeat: no-repeat;
        background-position-x: center;
    }
}

@media screen and (min-width: 992px) and (min-width: 1200px) {
    .processes .process-card.process-card-1 .process-content .process-phase::after {
        right: 125%;
    }
}

.processes .process-card.process-card-2 .process-content .process-phase {
    background-color: var(--global--color-primary);
    -webkit-box-shadow: 0 20px 50px 0 rgba(255, 125, 59, 0.16);
    box-shadow: 0 20px 50px 0 rgba(255, 125, 59, 0.16);
    position: relative;
}

    .processes .process-card.process-card-2 .process-content .process-phase p {
        color: var(--global--color-white);
    }

@media screen and (min-width: 992px) {
    .processes .process-card.process-card-2 .process-content .process-phase::after {
        content: '';
        position: absolute;
        top: 72%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 100%;
        z-index: 1;
        background-image: url("../images/line/line-bottom.png");
        background-size: contain;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 350px;
        height: 26px;
        background-repeat: no-repeat;
        background-position-x: center;
    }
}

@media screen and (min-width: 992px) and (min-width: 1200px) {
    .processes .process-card.process-card-2 .process-content .process-phase::after {
        left: 125%;
    }
}

.processes.processes-2 {
    padding-bottom: 42px;
}

@media screen and (max-width: 991px) {
    .processes.processes-2 {
        padding-bottom: 2px;
    }
}

/*------------------------------------*\
    #Call To Action
\*------------------------------------*/
.cta {
    position: relative;
    overflow: visible;
    padding-bottom: 75px;
}

@media screen and (max-width: 991px) {
    .cta {
        padding-top: 0;
        padding-bottom: 50px;
    }
}

.cta .contactForm .btn {
    width: 220px;
    height: 65px;
    margin: 0 auto;
}

.form-mailchimp {
    position: relative;
    margin-right: 0;
    margin-left: 0;
}

    .form-mailchimp .input-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        border: none;
        height: 73px;
        padding: 0;
        border-radius: 13px;
        background-color: var(--global--color-white);
        border-color: var(--global--color-white);
        position: relative;
        overflow: hidden;
    }

        .form-mailchimp .input-group .btn {
            width: 79px;
            border-radius: 13px;
            height: 73px;
            line-height: 73px;
            outline: none;
        }

            .form-mailchimp .input-group .btn::before {
                content: unset;
            }

            .form-mailchimp .input-group .btn:hover {
                background-color: #ff5b07;
            }

        .form-mailchimp .input-group .input-icon {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
        }

            .form-mailchimp .input-group .input-icon .form-control {
                margin-bottom: 0;
                border: 0;
                height: 73px;
                padding-left: 15px;
                padding-right: 15px;
            }

.cta-note {
    text-align: center;
}

    .cta-note p {
        margin-bottom: 0;
        font-family: var(--global--font-body);
        font-weight: 400;
        font-size: 16px;
        line-height: 1.8;
        color: var(--global--color-body);
    }

        .cta-note p i {
            margin-right: 5px;
        }

/* Download */
.download {
    position: relative;
    padding-top: 110px;
    padding-bottom: 110px;
}

@media screen and (max-width: 991px) {
    .download {
        padding-top: 70px;
        padding-bottom: 70px;
        margin-bottom: 70px;
    }
}

.download .download-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: calc(100% - 5%);
    height: 100%;
    background-color: var(--global--color-secondary);
    z-index: 0;
    border-radius: 22px;
}

@media screen and (min-width: 991px) {
    .download .heading .heading-desc {
        padding: 0 40px;
    }
}

.download .download-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media screen and (max-width: 767px) {
    .download .download-action {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

.download .download-action .btn {
    margin-right: 30px;
    background-color: #F8F8F8;
    border-color: #F8F8F8;
}

    .download .download-action .btn:hover,
    .download .download-action .btn:active,
    .download .download-action .btn:focus {
        background-color: #f8f8f8bb;
        border-color: #f8f8f8bb;
    }

    .download .download-action .btn:last-child {
        margin-right: 0;
    }

@media screen and (max-width: 767px) {
    .download .download-action .btn {
        margin-right: 0;
        margin-bottom: 25px;
    }

        .download .download-action .btn:last-child {
            margin-bottom: 0;
        }
}

/*------------------------------------*\
    #Pricing
\*------------------------------------*/
.pricing {
    position: relative;
    padding-bottom: 100px;
}

@media screen and (max-width: 991px) {
    .pricing {
        padding-top: 55px;
        padding-bottom: 50px;
    }
}

.pricing .pricing-switcher {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 47px;
    display: none;
}

    .pricing .pricing-switcher input {
        display: none;
    }

    .pricing .pricing-switcher label {
        font-family: var(--global--font-body);
        font-size: 18px;
        font-weight: 500;
        line-height: 25px;
        text-transform: capitalize;
        cursor: pointer;
        -webkit-transition: 0.5s ease-in-out;
        -o-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
        color: var(--global--color-heading);
        margin-bottom: 0;
    }

@media screen and (max-width: 767px) {
    .pricing .pricing-switcher label {
        font-size: 16px;
    }
}

.pricing .pricing-switcher label:hover,
.pricing .pricing-switcher label.active {
    color: var(--global--color-heading);
}

.pricing .pricing-switcher .indicator {
    width: 55px;
    height: 25px;
    background-color: var(--global--color-secondary);
    border-radius: 22px;
    margin: 0 10px;
    position: relative;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 5px;
}

@media screen and (max-width: 767px) {
    .pricing .pricing-switcher .indicator {
        width: 70px;
        margin: 0 15px;
    }
}

.pricing .pricing-switcher .indicator .ball {
    display: inline-block;
    width: 19px;
    height: 19px;
    background-color: var(--global--color-white);
    border-radius: 50%;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
}

    .pricing .pricing-switcher .indicator .ball.yearly {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

@media screen and (max-width: 767px) {
    .pricing .pricing-switcher .indicator .ball.yearly {
        -webkit-transform: translateX(25px);
        -ms-transform: translateX(25px);
        transform: translateX(25px);
    }
}

.pricing .pricing-switcher .indicator .ball.monthly {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.pricing .pricing-table {
    position: relative;
}

@media screen and (max-width: 991px) {
    .pricing .pricing-table {
        max-width: 370px;
        margin: 0 auto 30px;
    }
}

.pricing .pricing-table .pricing-card {
    background-color: var(--global--color-white);
    border: 3px solid #EBEEEE;
    padding: 45px 45px 45px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: relative;
    border-radius: 19px;
}

    .pricing .pricing-table .pricing-card h4 {
        font-size: 25px;
        font-weight: bold;
        text-align: center;
    }

    .pricing .pricing-table .pricing-card p {
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        margin-top: -15px;
    }

#active_plan {
    color: #fff !important;
}

@media screen and (min-width:1400px) {
    .owl-carousel .owl-item img {
        width: 96% !important;
        margin-left: -5px !important;
        margin-top: 0px !important;
    }

    .screenshots .owl-carousel .owl-stage-outer .owl-item {
        margin-right: -20px !important;
    }
}

@media screen and (min-width:1200px) and (max-width:1400px) {
    .owl-carousel .owl-item img {
        height: 513px;
    }
}

@media screen and (min-width:992px) and (max-width:1200px) {
    .owl-carousel .owl-item img {
        height: 440px;
    }
}

@media screen and (min-width:768px) and (max-width:992px) {
    .owl-carousel .owl-item img {
        height: 525px;
    }
}

@media screen and (min-width:578px) and (max-width:768px) {
    .screenshots .screenshot-warp:before {
        width: 215px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .pricing .pricing-table .pricing-card {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media screen and (max-width: 767px) {
    .pricing .pricing-table .pricing-card {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.pricing .pricing-table .pricing-card.active {
    background-color: var(--global--color-secondary);
    border-color: var(--global--color-secondary);
}

    .pricing .pricing-table .pricing-card.active .pricing-head .pricing-type .per {
        color: var(--global--color-light);
    }

    .pricing .pricing-table .pricing-card.active .pricing-head .pricing-type .price {
        color: var(--global--color-light);
    }

        .pricing .pricing-table .pricing-card.active .pricing-head .pricing-type .price::before {
            color: var(--global--color-light);
        }

    .pricing .pricing-table .pricing-card.active .pricing-head .pricing-name {
        color: var(--global--color-light);
    }

    .pricing .pricing-table .pricing-card.active .pricing-head .pricing-desc {
        color: var(--global--color-light);
    }

    .pricing .pricing-table .pricing-card.active .pricing-body .pricing-list li {
        color: var(--global--color-light);
    }

        .pricing .pricing-table .pricing-card.active .pricing-body .pricing-list li.active svg {
            color: var(--global--color-light);
        }

        .pricing .pricing-table .pricing-card.active .pricing-body .pricing-list li.unavailable svg {
            color: #C3BADF;
        }

    .pricing .pricing-table .pricing-card.active .pricing-body .btn {
        background-color: var(--global--color-primary);
        border-color: var(--global--color-primary);
        color: #fff;
    }

        .pricing .pricing-table .pricing-card.active .pricing-body .btn:hover,
        .pricing .pricing-table .pricing-card.active .pricing-body .btn:active,
        .pricing .pricing-table .pricing-card.active .pricing-body .btn:focus {
            background-color: var(--global--color-white);
            border-color: var(--global--color-white);
            color: var(--global--color-primary);
        }

.pricing .pricing-table .pricing-card.visible {
    position: relative;
    z-index: 5;
}

.pricing .pricing-table .pricing-card.hidden {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.pricing .pricing-table .pricing-card .pricing-head {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    margin-bottom: 42px;
}

    .pricing .pricing-table .pricing-card .pricing-head .pricing-type {
        margin-bottom: 10px;
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    }

        .pricing .pricing-table .pricing-card .pricing-head .pricing-type .per {
            font-family: var(--global--font-body);
            font-size: 14px;
            font-weight: 400;
            line-height: 18px;
            color: var(--global--color-secondary);
            text-transform: lowercase;
            margin-bottom: 0;
            -webkit-transform: translateY(-2px);
            -ms-transform: translateY(-2px);
            transform: translateY(-2px);
            margin-left: 4px;
        }

        .pricing .pricing-table .pricing-card .pricing-head .pricing-type .price {
            font-family: var(--global--font-body);
            font-weight: 600;
            font-size: 60px;
            line-height: 89px;
            color: var(--global--color-secondary);
            position: relative;
            padding-left: 19px;
            margin-bottom: 0;
        }

            .pricing .pricing-table .pricing-card .pricing-head .pricing-type .price::before {
                content: 'ريال';
                position: absolute;
                font-family: var(--global--font-body);
                font-weight: 400;
                font-size: 20px;
                color: var(--global--color-secondary);
                line-height: 45px;
                top: 40px;
                left: -14px;
            }

    .pricing .pricing-table .pricing-card .pricing-head .pricing-name {
        font-family: var(--global--font-body);
        font-size: 26px;
        font-weight: 600;
        line-height: 36px;
        text-transform: capitalize;
        color: var(--global--color-heading);
        margin-bottom: 10px;
    }

    .pricing .pricing-table .pricing-card .pricing-head .pricing-desc {
        font-family: var(--global--font-body);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
        text-transform: capitalize;
        color: var(--global--color-body);
        margin-bottom: 0px;
    }

.pricing-part {
    position: absolute;
    width: 118%;
    left: -7%;
    bottom: 75px;
}

    .pricing-part p {
        font-size: 16px;
        color: #ff7d3b;
    }

.pricing .pricing-table .pricing-card .pricing-body {
    text-align: center;
}

    .pricing .pricing-table .pricing-card .pricing-body .pricing-list {
        margin-bottom: 45px;
        float: right;
        text-align: right;
        padding-right: 0;
    }

        .pricing .pricing-table .pricing-card .pricing-body .pricing-list li {
            font-family: var(--global--font-body);
            font-size: 16px;
            line-height: 1.8;
            color: var(--global--color-heading);
            font-weight: 400;
            text-align: right;
            text-transform: capitalize;
            padding-bottom: 20px;
        }

            .pricing .pricing-table .pricing-card .pricing-body .pricing-list li i {
                margin-left: 9px;
                font-size: 13px;
                color: #EBEEEE;
            }

            .pricing .pricing-table .pricing-card .pricing-body .pricing-list li.active i {
                color: var(--global--color-primary);
            }

            .pricing .pricing-table .pricing-card .pricing-body .pricing-list li:last-child {
                padding-bottom: 0;
            }

    .pricing .pricing-table .pricing-card .pricing-body .btn {
        width: 100%;
        height: 51px;
    }

.pricing .pricing-table.pricing-table-2 .pricing-card.active {
    -webkit-box-shadow: 0 20px 50px 0 rgba(69, 28, 192, 0.2);
    box-shadow: 0 20px 50px 0 rgba(69, 28, 192, 0.2);
    border-color: var(--global--color-secondary);
    background-color: var(--global--color-white);
}

    .pricing .pricing-table.pricing-table-2 .pricing-card.active .pricing-head .pricing-type .per {
        color: var(--global--color-secondary);
    }

    .pricing .pricing-table.pricing-table-2 .pricing-card.active .pricing-head .pricing-type .price {
        color: var(--global--color-secondary);
    }

        .pricing .pricing-table.pricing-table-2 .pricing-card.active .pricing-head .pricing-type .price::before {
            color: var(--global--color-secondary);
        }

    .pricing .pricing-table.pricing-table-2 .pricing-card.active .pricing-head .pricing-name {
        color: var(--global--color-secondary);
    }

    .pricing .pricing-table.pricing-table-2 .pricing-card.active .pricing-head .pricing-desc {
        color: var(--global--color-secondary);
    }

    .pricing .pricing-table.pricing-table-2 .pricing-card.active .pricing-body .pricing-list li {
        color: var(--global--color-secondary);
    }

        .pricing .pricing-table.pricing-table-2 .pricing-card.active .pricing-body .pricing-list li.active svg {
            color: var(--global--color-secondary);
        }

        .pricing .pricing-table.pricing-table-2 .pricing-card.active .pricing-body .pricing-list li.unavailable svg {
            color: rgba(69, 28, 192, 0.42);
        }

    .pricing .pricing-table.pricing-table-2 .pricing-card.active .pricing-body .btn {
        background-color: var(--global--color-secondary);
        border-color: var(--global--color-secondary);
        color: #fff;
        -webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08);
        box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08);
    }

        .pricing .pricing-table.pricing-table-2 .pricing-card.active .pricing-body .btn:hover,
        .pricing .pricing-table.pricing-table-2 .pricing-card.active .pricing-body .btn:active,
        .pricing .pricing-table.pricing-table-2 .pricing-card.active .pricing-body .btn:focus {
            background-color: var(--global--color-white);
            border-color: var(--global--color-secondary);
            color: var(--global--color-secondary);
        }

.video .player {
    margin-top: 50px;
    border-radius: 45px;
    height: 495px;
    position: relative;
    z-index: 1;
    overflow: visible;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media screen and (max-width: 991px) {
    .video .player {
        height: 450px;
    }
}

.video .player::before {
    border-radius: 45px;
}

.video .player .img-holder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 45px;
    -webkit-box-shadow: 10px 30px 50px 0 rgba(0, 0, 0, 0.04);
    box-shadow: 10px 30px 50px 0 rgba(0, 0, 0, 0.04);
}

.video .player .shape-top,
.video .player .shape-bottom {
    content: '';
    position: absolute;
    width: 156px;
    height: 156px;
    border-radius: 50%;
}

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

    .video .player .shape-top,
    .video .player .shape-bottom {
        width: 120px;
        height: 120px;
    }
}

.video .player .shape-top img,
.video .player .shape-bottom img {
    max-width: 100%;
}

.video .player .shape-top {
    top: -78px;
    right: -78px;
    z-index: -1;
}

@media screen and (max-width: 991px) {
    .video .player .shape-top {
        top: -60px;
        right: -60px;
    }
}

.video .player .shape-bottom {
    bottom: -78px;
    left: -78px;
    z-index: 2;
}

@media screen and (max-width: 991px) {
    .video .player .shape-bottom {
        bottom: -60px;
        left: -60px;
    }
}

/* 
=============================================================
                        Footer
=============================================================
*/
#footer {
    width: 100%;
    height: auto;
    min-height: 250px;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 40px 0 30px 0;
    direction: ltr;
    position: relative;
}

.right-footer-ul {
    list-style: none;
    margin-top: 30px;
    padding: 0;
}

    .right-footer-ul li {
        direction: ltr;
        padding: 0;
        margin-bottom: 20px;
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .right-footer-ul li h6 {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            color: #333;
            margin: 0;
            line-height: 1.4;
            font-size: 16px;
            font-weight: 600;
        }

            .right-footer-ul li h6 a {
                text-decoration: none;
                color: #007bff;
                transition: color 0.3s ease;
            }

                .right-footer-ul li h6 a:hover {
                    text-decoration: none;
                    color: #16a085;
                }

        .right-footer-ul li span {
            font-size: 20px;
            color: #333;
            position: relative;
            flex-shrink: 0;
        }

/* Removed absolute positioning - using flexbox layout instead */

#footer .box {
    width: 200px;
    height: 200px;
    text-align: center;
    background-color: transparent;
    border-radius: 8px;
    margin: auto;
    margin-bottom: 15px;
    margin-left: 8px;
    margin-top: 50px;
}

    #footer .box img {
        width: 70%;
        margin: auto;
        height: auto;
        margin-top: 30px;
    }

#footer2 {
    width: 100%;
    height: auto;
    min-height: 80px;
    background-color: #1a365d;
    padding: 25px 0;
    direction: ltr;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

    #footer2 h5 {
        color: #fff;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        line-height: 1.5;
        font-size: 14px;
        font-weight: 500;
        margin: 0;
    }

        #footer2 h5 a {
            color: #ffc107;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            text-decoration: none;
            transition: color 0.3s ease;
        }

            #footer2 h5 a:hover {
                color: #fff;
            }

@media screen and (max-width: 992px) {
    #footer2 h5 {
        text-align: center;
        margin-bottom: 15px;
    }

    .right-footer-ul li h6 {
        text-align: center;
    }
    
    .right-footer-ul li {
        justify-content: center;
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
    
    .right-footer-ul li span {
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 768px) {
    #footer {
        min-height: 200px;
        padding: 30px 0 20px 0;
    }
    
    .right-footer-ul {
        margin-top: 20px;
    }
    
    .right-footer-ul li {
        margin-bottom: 15px;
    }
}

    #accordion .card-header a {
        width: 100% !important;
        text-align: right !important;
        float: right !important;
        justify-content: normal !important;
    }

#accordion .card {
    border-radius: 8px !important;
}

#accordion .card-header a {
    color: #fff !important;
}

#ReadInPersian {
    float: right;
}

#ReadInEnglish {
    float: left;
}
#EnglishTerms {
    display: block;
    text-align: left;
}

.mg_b_50 {
    margin-bottom: 50px !important;
}

@media screen and (max-width:450px) {
    #ReadInPersian {
        float: none;
        width: 100%;
        margin: auto;
        margin-bottom: 20px;
    }

    #ReadInEnglish {
        float: none;
        width: 100%;
        margin: auto;
    }
}
#Terms {
    direction:ltr;
}
#Terms h5 {
    font-weight: bold;
    color: #34495e;
    text-align:left;
    direction:ltr !important;  
}
#commentForm {
    direction:ltr;
}
#Terms p {
    text-align: justify;
    direction: ltr;
    line-height: 2;
}

#Terms ul li {
    font-size: 14px;
}

#about-us-img {
    width: 100%;
    height: auto;
    margin: auto;
    border-radius: 30%;
}

.justify-rtl {
    text-align: justify;
    direction: rtl;
    line-height: 2;
}

#prize_aboutus {
    width: 100%;
    height: auto;
}


#Download-Page {
    width: 100%;
    height: auto;
    margin: auto;
    text-align: center;
    position: relative;
    padding-top: 0px;
    padding-bottom: 0px;
}

    #Download-Page .btn-success {
        height: 40px !important;
        width: 150px;
        margin-bottom: 50px;
        margin-top: -10px;
    }

    #Download-Page hr {
        width: 85% !important;
        margin: auto !important;
        height: 2px;
    }

#mobile-frame-container {
    width: 60%;
    margin: auto;
    height: auto;
    position: relative;
}


#mobile-container {
    padding-top: 20px;
    padding-bottom: 80px;
    height: 100%;
    width: 100%;
}

.mobile-header {
    width: 90%;
    transform: rotate(180deg);
}

.mobile-logo {
    width: 150px;
    float: right;
    margin-right: 20px;
    display: none;
}

#mobile-frame-container h4 {
    color: #ff7d3b;
    text-align: right;
    font-weight: bold;
    font-size: 28px;
}

#mobile-frame-container h5 {
    color: #ff7d3b;
    text-align: left;
    font-weight: bold;
    font-size: 20px;
    margin-right: 0px;
}

#mobile-frame-container h6 {
    color: #959595;
    text-align: left;
    font-weight: bold;
    margin-top: -20px;
}

#mobile-frame-container span {
    font-family: IRANSans;
    font-weight: bold;
    float:left;
    text-align:left;
}

.download-icons {
    width: 30px;
    height: auto;
}

div.scrollmenu {
    overflow: auto;
    white-space: nowrap;
    width: 90%;
    margin: auto;
}

    div.scrollmenu img {
        display: inline-block;
        margin: 14px;
        box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
        width: 200px;
        height: auto;
        border-radius: 8px;
    }

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ff7d3b;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #ffa679;
    }
/* width */
div.scrollmenu::-webkit-scrollbar {
    height: 5px;
}

/* Track */
div.scrollmenu::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
div.scrollmenu::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ff7d3b;
}

    /* Handle on hover */
    div.scrollmenu::-webkit-scrollbar-thumb:hover {
        background: #ffa679;
    }

.video-box {
    width: 90%;
    height: auto;
    margin: auto;
    border: 1px solid #ddd;
    padding: 8px;
    margin-top: 20px;
    border-radius: 5px;
    position: relative;
    margin-bottom: 40px;
}

    .video-box .btn-video {
        position: absolute;
        top: 45%;
        left: 45%;
    }

    .video-box .img-holder img {
        width: 100%;
        height: auto;
        border-radius: 5px;
        position: relative;
    }

.comment-box-gray {
    display: block;
    width: 100%;
    height: auto;
    min-height: 200px;
    border-radius: 10px;
    background-color: #EBEEEE;
    margin-left: 15px;
    margin-bottom: 20px;
    position: relative;
    white-space: nowrap;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

    .comment-box-gray p {
        width: 90% !important;
        height: 100%;
        direction: rtl;
        text-align: justify;
        margin-right: 15px;
        margin-top: -15px;
    }

    .comment-box-gray h6 {
        margin-right: 15px !important;
        margin-top: -25px !important;
    }

    .comment-box-gray span {
        color: #ccc !important;
        text-align: right !important;
        margin-top: -30px !important;
        margin-right: 15px !important;
        float: right;
    }

.comment-box-blue {
    display: block;
    width: 100%;
    height: auto;
    min-height: 200px;
    border-radius: 10px;
    background-color: #5d54a407;
    margin-left: 15px;
    margin-bottom: 20px;
    position: relative;
    white-space: nowrap;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

    .comment-box-blue p {
        width: 90% !important;
        height: 100%;
        direction: rtl;
        text-align: justify;
        margin-right: 15px;
        margin-top: -15px;
    }

    .comment-box-blue h6 {
        margin-right: 15px !important;
        margin-top: -25px !important;
    }

    .comment-box-blue span {
        color: #ccc !important;
        text-align: right !important;
        margin-top: -30px !important;
        margin-right: 15px !important;
        float: right;
    }

.Comments {
    overflow: hidden;
    white-space: nowrap;
    width: 90%;
    margin: auto;
}

.comment-form {
    width: 90%;
    margin: auto;
}

    .comment-form label {
        margin-right: 5px;
        margin-bottom: 10px;
        float: right;
    }

.comment-btn {
    width: 100% !important;
    height: 60px;
    margin: auto !important;
}

.download-label {
    margin-right: -150px;
}

.form-control {
    margin-bottom: 8px !important;
}

@media screen and (max-width:768px) {
    #mobile-frame-container {
        width: 100%;
        margin: auto;
        height: auto;
        position: relative;
        padding: 20px 0;
    }

    .mobile-logo {
        width: 80px;
        float: right;
        margin-right: 20px;
        display: block;
    }

    #mobile-frame-container h4 {
        color: #ff7d3b;
        text-align: right;
        font-weight: bold;
        font-size: 18px;
        margin-top: 20px;
    }

    #mobile-frame-container h6 {
        color: #959595;
        text-align: right;
        font-weight: bold;
        margin-top: -20px;
        font-size: 14px;
    }

    #Download-Page .btn-success {
        height: 40px !important;
        width: 85%;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .download-label {
        text-align: right;
        margin-right: 10%;
        float: right;
        margin-bottom: 30px;
    }

    .video-box .btn-video {
        position: absolute;
        top: 30%;
        left: 40%;
    }
}

.skeleton-box {
    width: 100%;
    height: auto;
    background-color: #f1f1f1;
    border-radius: 20px;
    margin-left: 60px;
    position: relative;
    border: 1px solid #e9e9e9;
}

    .skeleton-box #skeleton-img {
        width: 150%;
        height: auto;
        margin-right: -20%;
        pointer-events: none;
    }

    .skeleton-box img {
        pointer-events: none;
    }

.mag-box {
    width: 100%;
    height: 725px;
    border-radius: 20px;
    background-color: #fff;
    border: 1px solid #e9e9e9;
    position: relative;
    text-align: right;
    overflow-y: scroll;
    overflow-x: hidden;
}

    .mag-box h6 {
        display: none;
        color: #333;
        margin-top: 35px;
        margin-right: 10px;
    }

.back-link {
    margin-left: 10px;
    text-decoration: none;
    font-size: 16px;
    margin-top: 20px;
    border: 1px solid;
    border-radius: 10px;
    float: left;
    position: relative;
    padding: 5px 20px;
    display: none;
}

.circle-puls-dot {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid rgba(92,78,157,0.7);
    background-color: rgba(0,0,0,0.2);
    box-shadow: 0px 0px 1px 1px #0000001a;
    top: 0;
    cursor: pointer;
}

.pulse {
    animation: pulse-animation 5s infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    }
}

.part-container img {
    width: 100px;
    height: auto;
    position: relative;
    right: -85px;
    top: -17px;
}

.part-container span {
    position: relative;
    right: -240px;
    top: -30px;
    border: 1px solid rgba(92,78,157,0.7);
    padding: 3px 20px;
    border-radius: 5px;
}

#face-dot {
    position: absolute;
    top: 50px;
    right: 40%
}

    #face-dot img {
        right: -85px;
        top: -17px;
    }

    #face-dot span {
        right: -240px;
        top: -30px;
        cursor: pointer;
    }

#neck-dot {
    position: absolute;
    top: 120px;
    right: 47%
}

    #neck-dot img {
        right: 40px;
    }

    #neck-dot span {
        right: 33px;
        cursor: pointer;
    }

#shoulder-dot {
    position: absolute;
    top: 125px;
    right: 35%
}

    #shoulder-dot img {
        right: -60px;
        top: -11px;
    }

    #shoulder-dot span {
        right: -210px;
        top: -10px;
        cursor: pointer;
    }

#back-dot {
    position: absolute;
    top: 200px;
    right: 47%
}

    #back-dot img {
        right: 40px;
        top: -17px;
    }

    #back-dot span {
        right: 30px;
        top: -29px;
        cursor: pointer;
    }

#elbow-dot {
    position: absolute;
    top: 230px;
    right: 30%
}

    #elbow-dot img {
        right: -55px;
        top: -10px;
    }

    #elbow-dot span {
        right: -192px;
        top: -10px;
        cursor: pointer;
    }

#waist-dot {
    position: absolute;
    top: 280px;
    right: 47%
}

    #waist-dot img {
        right: 25px;
        top: -10px;
    }

    #waist-dot span {
        right: 20px;
        top: -10px;
        cursor: pointer;
    }

#hip-dot {
    position: absolute;
    top: 320px;
    right: 35%
}

    #hip-dot img {
        right: 20px;
        top: 30px;
        width: 130px;
    }

    #hip-dot span {
        right: 16px;
        top: 55px;
        cursor: pointer;
    }

#knee-dot {
    position: absolute;
    top: 465px;
    right: 37%
}

    #knee-dot img {
        right: 25px;
        top: 5px;
        width: 120px;
    }

    #knee-dot span {
        right: 20px;
        top: 20px;
        cursor: pointer;
    }

#ankle-dot {
    position: absolute;
    top: 600px;
    right: 38%
}

    #ankle-dot img {
        right: -70px;
        top: -10px;
    }

    #ankle-dot span {
        right: -235px;
        top: -10px;
        cursor: pointer;
    }

#hand-dot {
    position: absolute;
    top: 350px;
    right: 22%;
}

    #hand-dot span {
        cursor: pointer;
        right: -160px;
        top: 75px;
        padding: 3px 10px;
    }

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

    .mag-box {
        height: 625px;
    }

    #face-dot {
        position: absolute;
        top: 50px;
        right: 40%
    }

        #face-dot img {
            right: -85px;
            top: -17px;
        }

        #face-dot span {
            right: -240px;
            top: -30px;
            cursor: pointer;
        }

    #neck-dot {
        position: absolute;
        top: 100px;
        right: 47%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
            padding: 3px 5px;
        }

    #shoulder-dot {
        position: absolute;
        top: 105px;
        right: 33%
    }

        #shoulder-dot img {
            right: -60px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -210px;
            top: -10px;
            cursor: pointer;
        }

    #back-dot {
        position: absolute;
        top: 200px;
        right: 47%
    }

        #back-dot img {
            right: 25px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
            padding: 3px 10px;
        }

    #elbow-dot {
        position: absolute;
        top: 200px;
        right: 28%
    }

        #elbow-dot img {
            right: -55px;
            top: -10px;
        }

        #elbow-dot span {
            right: -192px;
            top: -10px;
            cursor: pointer;
        }

    #waist-dot {
        position: absolute;
        top: 250px;
        right: 47%
    }

        #waist-dot img {
            right: 7px;
            top: -10px;
        }

        #waist-dot span {
            right: 0px;
            top: -10px;
            cursor: pointer;
            padding: 3px 5px;
        }

    #hip-dot {
        position: absolute;
        top: 270px;
        right: 35%
    }

        #hip-dot img {
            right: 20px;
            top: 30px;
            width: 110px;
        }

        #hip-dot span {
            right: 16px;
            top: 55px;
            cursor: pointer;
            padding: 3px 5px;
        }

    #knee-dot {
        position: absolute;
        top: 395px;
        right: 37%
    }

        #knee-dot img {
            right: 25px;
            top: 5px;
            width: 120px;
        }

        #knee-dot span {
            right: 20px;
            top: 20px;
            cursor: pointer;
        }

    #ankle-dot {
        position: absolute;
        top: 500px;
        right: 37%
    }

        #ankle-dot img {
            right: -50px;
            top: -10px;
        }

        #ankle-dot span {
            right: -215px;
            top: -10px;
            cursor: pointer;
        }

    #hand-dot {
        position: absolute;
        top: 300px;
        right: 22%;
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -160px;
            top: 75px;
            padding: 3px 5px;
        }
}

@media screen and (min-width:992px) and (max-width:1200px) {
    .skeleton-box #skeleton-img {
        width: 110% !important;
        height: auto;
        margin-right: -2%;
    }

    #face-dot {
        top: 70px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 110px;
        right: 48%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
        }


    #shoulder-dot {
        top: 120px;
        right: 35%
    }


        #shoulder-dot img {
            right: -80px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -230px;
            top: -10px;
            cursor: pointer;
        }

    #back-dot {
        top: 200px;
        right: 47%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
        }




    #elbow-dot {
        top: 220px;
        right: 33%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -210px;
            top: -10px;
            cursor: pointer;
        }

    #waist-dot {
        top: 250px;
        right: 47%
    }

        #waist-dot img {
            right: 30px;
            top: -10px;
        }

        #waist-dot span {
            right: 30px;
            top: -10px;
            cursor: pointer;
        }


    #hip-dot {
        top: 305px;
        right: 37%
    }

        #hip-dot img {
            right: 20px;
            top: 35px;
            width: 120px;
        }

        #hip-dot span {
            right: 16px;
            top: 55px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 440px;
        right: 39%
    }

        #knee-dot img {
            right: 25px;
            top: 5px;
            width: 140px;
        }

        #knee-dot span {
            right: -5px;
            top: 42px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 560px;
        right: 41%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -235px;
            top: -10px;
            cursor: pointer;
        }

    #hand-dot {
        top: 330px;
        right: 28%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -190px;
            top: 75px;
        }

    .mag-box {
        height: 690px;
    }
}

@media screen and (min-width:767px) and (max-width:992px) {
    .skeleton-box #skeleton-img {
        width: 110% !important;
        height: auto;
        margin-right: -2%;
    }

    #face-dot {
        top: 70px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 150px;
        right: 48%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
        }


    #shoulder-dot {
        top: 160px;
        right: 37%
    }


        #shoulder-dot img {
            right: -80px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -230px;
            top: -10px;
            cursor: pointer;
        }

    #back-dot {
        top: 240px;
        right: 47%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
        }




    #elbow-dot {
        top: 290px;
        right: 34%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -210px;
            top: -10px;
            cursor: pointer;
        }

    #waist-dot {
        top: 330px;
        right: 47%
    }

        #waist-dot img {
            right: 30px;
            top: -10px;
        }

        #waist-dot span {
            right: 30px;
            top: -10px;
            cursor: pointer;
        }


    #hip-dot {
        top: 395px;
        right: 37%
    }

        #hip-dot img {
            right: 20px;
            top: 35px;
            width: 160px;
        }

        #hip-dot span {
            right: 16px;
            top: 65px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 570px;
        right: 41%
    }

        #knee-dot img {
            right: 25px;
            top: 5px;
            width: 140px;
        }

        #knee-dot span {
            right: -5px;
            top: 42px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 720px;
        right: 41%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -235px;
            top: -10px;
            cursor: pointer;
        }

    #hand-dot {
        top: 430px;
        right: 30%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -190px;
            top: 75px;
        }

    .mag-box {
        height: 690px;
    }
}

@media screen and (min-width:576px) and (max-width:767px) {


    #face-dot {
        top: 70px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 150px;
        right: 48%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
        }


    #shoulder-dot {
        top: 160px;
        right: 37%
    }


        #shoulder-dot img {
            right: -80px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -230px;
            top: -10px;
            cursor: pointer;
        }

    #back-dot {
        top: 240px;
        right: 47%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
        }




    #elbow-dot {
        top: 290px;
        right: 30%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -210px;
            top: -10px;
            cursor: pointer;
        }

    #waist-dot {
        top: 330px;
        right: 47%
    }

        #waist-dot img {
            right: 30px;
            top: -10px;
        }

        #waist-dot span {
            right: 30px;
            top: -10px;
            cursor: pointer;
        }


    #hip-dot {
        top: 395px;
        right: 37%
    }

        #hip-dot img {
            right: 20px;
            top: 35px;
            width: 160px;
        }

        #hip-dot span {
            right: 16px;
            top: 65px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 580px;
        right: 38%
    }

        #knee-dot img {
            right: 25px;
            top: 5px;
            width: 140px;
        }

        #knee-dot span {
            right: -5px;
            top: 42px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 730px;
        right: 39%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -235px;
            top: -10px;
            cursor: pointer;
        }

    #hand-dot {
        top: 430px;
        right: 23%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -190px;
            top: 75px;
        }
}

@media screen and (min-width:550px) and (max-width:576px) {

    #face-dot {
        top: 70px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 150px;
        right: 48%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
        }


    #shoulder-dot {
        top: 160px;
        right: 37%
    }


        #shoulder-dot img {
            right: -80px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -230px;
            top: -10px;
            cursor: pointer;
        }

    #back-dot {
        top: 240px;
        right: 47%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
        }




    #elbow-dot {
        top: 310px;
        right: 30%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -210px;
            top: -10px;
            cursor: pointer;
        }

    #waist-dot {
        top: 330px;
        right: 47%
    }

        #waist-dot img {
            right: 30px;
            top: -10px;
        }

        #waist-dot span {
            right: 30px;
            top: -10px;
            cursor: pointer;
        }


    #hip-dot {
        top: 420px;
        right: 35%
    }

        #hip-dot img {
            right: 20px;
            top: 35px;
            width: 160px;
        }

        #hip-dot span {
            right: 16px;
            top: 65px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 605px;
        right: 38%
    }

        #knee-dot img {
            right: 25px;
            top: 5px;
            width: 140px;
        }

        #knee-dot span {
            right: -5px;
            top: 42px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 760px;
        right: 39%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -235px;
            top: -10px;
            cursor: pointer;
        }

    #hand-dot {
        top: 450px;
        right: 23%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -190px;
            top: 75px;
        }
}

@media screen and (min-width:530px) and (max-width:550px) {

    #face-dot {
        top: 70px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }


    #neck-dot {
        top: 150px;
        right: 48%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
        }


    #shoulder-dot {
        top: 160px;
        right: 35%
    }


        #shoulder-dot img {
            right: -80px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -230px;
            top: -10px;
            cursor: pointer;
        }

    #back-dot {
        top: 240px;
        right: 47%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
        }




    #elbow-dot {
        top: 300px;
        right: 30%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -210px;
            top: -10px;
            cursor: pointer;
        }

    #waist-dot {
        top: 330px;
        right: 47%
    }

        #waist-dot img {
            right: 30px;
            top: -10px;
        }

        #waist-dot span {
            right: 30px;
            top: -10px;
            cursor: pointer;
        }


    #hip-dot {
        top: 390px;
        right: 35%
    }

        #hip-dot img {
            right: 20px;
            top: 35px;
            width: 155px;
        }

        #hip-dot span {
            right: 16px;
            top: 65px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 585px;
        right: 38%
    }

        #knee-dot img {
            right: 25px;
            top: 5px;
            width: 140px;
        }

        #knee-dot span {
            right: -5px;
            top: 42px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 740px;
        right: 39%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -235px;
            top: -10px;
            cursor: pointer;
        }

    #hand-dot {
        top: 430px;
        right: 23%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -190px;
            top: 75px;
        }
}

@media screen and (min-width:500px) and (max-width:530px) {

    #face-dot {
        top: 70px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 150px;
        right: 48%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
        }


    #shoulder-dot {
        top: 150px;
        right: 35%
    }


        #shoulder-dot img {
            right: -80px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -230px;
            top: -10px;
            cursor: pointer;
        }

    #back-dot {
        top: 240px;
        right: 47%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
        }




    #elbow-dot {
        top: 270px;
        right: 30%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -210px;
            top: -10px;
            cursor: pointer;
        }

    #waist-dot {
        top: 330px;
        right: 47%
    }

        #waist-dot img {
            right: 30px;
            top: -10px;
        }

        #waist-dot span {
            right: 30px;
            top: -10px;
            cursor: pointer;
        }


    #hip-dot {
        top: 380px;
        right: 35%
    }

        #hip-dot img {
            right: 20px;
            top: 35px;
            width: 160px;
        }

        #hip-dot span {
            right: 16px;
            top: 65px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 545px;
        right: 38%
    }

        #knee-dot img {
            right: 25px;
            top: 5px;
            width: 140px;
        }

        #knee-dot span {
            right: -5px;
            top: 42px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 700px;
        right: 39%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -235px;
            top: -10px;
            cursor: pointer;
        }

    #hand-dot {
        top: 410px;
        right: 23%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -190px;
            top: 75px;
        }
}

@media screen and (min-width:470px) and (max-width:500px) {

    #face-dot {
        top: 70px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 150px;
        right: 48%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
        }


    #shoulder-dot {
        top: 150px;
        right: 35%
    }


        #shoulder-dot img {
            right: -80px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -230px;
            top: -10px;
            cursor: pointer;
        }

    #back-dot {
        top: 240px;
        right: 47%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
        }




    #elbow-dot {
        top: 270px;
        right: 30%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -210px;
            top: -10px;
            cursor: pointer;
        }

    #waist-dot {
        top: 330px;
        right: 47%
    }

        #waist-dot img {
            right: 30px;
            top: -10px;
        }

        #waist-dot span {
            right: 30px;
            top: -10px;
            cursor: pointer;
        }


    #hip-dot {
        top: 360px;
        right: 35%
    }

        #hip-dot img {
            right: 20px;
            top: 35px;
            width: 160px;
        }

        #hip-dot span {
            right: 16px;
            top: 65px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 515px;
        right: 38%
    }

        #knee-dot img {
            right: 25px;
            top: 5px;
            width: 120px;
        }

        #knee-dot span {
            right: -10px;
            top: 37px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 660px;
        right: 39%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -235px;
            top: -10px;
            cursor: pointer;
        }

    #hand-dot {
        top: 400px;
        right: 23%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -190px;
            top: 75px;
        }
}

@media screen and (min-width:460px) and (max-width:470px) {

    #face-dot {
        top: 70px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 130px;
        right: 48%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
        }


    #shoulder-dot {
        top: 140px;
        right: 33%
    }


        #shoulder-dot img {
            right: -80px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -230px;
            top: -10px;
            cursor: pointer;
        }

    #back-dot {
        top: 240px;
        right: 47%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
        }




    #elbow-dot {
        top: 240px;
        right: 30%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -210px;
            top: -10px;
            cursor: pointer;
        }

    #waist-dot {
        top: 330px;
        right: 47%
    }

        #waist-dot img {
            right: 30px;
            top: -10px;
        }

        #waist-dot span {
            right: 30px;
            top: -10px;
            cursor: pointer;
        }


    #hip-dot {
        top: 340px;
        right: 35%
    }

        #hip-dot img {
            right: 20px;
            top: 35px;
            width: 160px;
        }

        #hip-dot span {
            right: 16px;
            top: 65px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 485px;
        right: 38%
    }


        #knee-dot img {
            right: 25px;
            top: 5px;
            width: 120px;
        }

        #knee-dot span {
            right: -10px;
            top: 37px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 610px;
        right: 39%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -235px;
            top: -10px;
            cursor: pointer;
        }

    #hand-dot {
        top: 370px;
        right: 22%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -190px;
            top: 75px;
        }
}

@media screen and (min-width:450px) and (max-width:460px) {
    #face-dot {
        top: 70px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 130px;
        right: 48%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
        }


    #shoulder-dot {
        top: 140px;
        right: 33%
    }


        #shoulder-dot img {
            right: -80px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -230px;
            top: -10px;
            cursor: pointer;
        }

    #back-dot {
        top: 240px;
        right: 47%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
        }




    #elbow-dot {
        top: 240px;
        right: 30%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -210px;
            top: -10px;
            cursor: pointer;
        }

    #waist-dot {
        top: 330px;
        right: 47%
    }

        #waist-dot img {
            right: 30px;
            top: -10px;
        }

        #waist-dot span {
            right: 30px;
            top: -10px;
            cursor: pointer;
        }


    #hip-dot {
        top: 340px;
        right: 35%
    }

        #hip-dot img {
            right: 20px;
            top: 35px;
            width: 160px;
        }

        #hip-dot span {
            right: 16px;
            top: 65px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 485px;
        right: 38%
    }


        #knee-dot img {
            right: 20px;
            top: 5px;
            width: 120px;
        }

        #knee-dot span {
            right: -15px;
            top: 37px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 610px;
        right: 39%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -235px;
            top: -10px;
            cursor: pointer;
        }

    #hand-dot {
        top: 370px;
        right: 22%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -190px;
            top: 75px;
        }
}

@media screen and (min-width:440px) and (max-width:450px) {
    #face-dot {
        top: 70px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 130px;
        right: 48%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
        }


    #shoulder-dot {
        top: 135px;
        right: 32%
    }


        #shoulder-dot img {
            right: -80px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -230px;
            top: -10px;
            cursor: pointer;
        }

    #back-dot {
        top: 220px;
        right: 45%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
        }




    #elbow-dot {
        top: 230px;
        right: 28%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -210px;
            top: -10px;
            cursor: pointer;
        }

    #waist-dot {
        top: 280px;
        right: 45%
    }

        #waist-dot img {
            right: 25px;
            top: -10px;
        }

        #waist-dot span {
            right: 20px;
            top: -10px;
            cursor: pointer;
        }


    #hip-dot {
        top: 320px;
        right: 35%
    }

        #hip-dot img {
            right: 20px;
            top: 35px;
            width: 160px;
        }

        #hip-dot span {
            right: 16px;
            top: 65px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 455px;
        right: 38%
    }


        #knee-dot img {
            right: 20px;
            top: 5px;
            width: 120px;
        }

        #knee-dot span {
            right: -15px;
            top: 37px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 580px;
        right: 39%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -235px;
            top: -10px;
            cursor: pointer;
        }

    #hand-dot {
        top: 350px;
        right: 22%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -190px;
            top: 75px;
        }
}

@media screen and (min-width:420px) and (max-width:440px) {
    #face-dot {
        top: 70px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 130px;
        right: 48%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
        }


    #shoulder-dot {
        top: 135px;
        right: 32%
    }


        #shoulder-dot img {
            right: -80px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -230px;
            top: -10px;
            cursor: pointer;
        }

    #back-dot {
        top: 220px;
        right: 45%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
        }




    #elbow-dot {
        top: 220px;
        right: 28%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -210px;
            top: -10px;
            cursor: pointer;
        }

    #waist-dot {
        top: 280px;
        right: 45%
    }

        #waist-dot img {
            right: 25px;
            top: -10px;
        }

        #waist-dot span {
            right: 20px;
            top: -10px;
            cursor: pointer;
        }


    #hip-dot {
        top: 310px;
        right: 35%
    }

        #hip-dot img {
            right: 20px;
            top: 35px;
            width: 160px;
        }

        #hip-dot span {
            right: 16px;
            top: 65px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 445px;
        right: 38%
    }


        #knee-dot img {
            right: 20px;
            top: 5px;
            width: 120px;
        }

        #knee-dot span {
            right: -15px;
            top: 37px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 570px;
        right: 39%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -235px;
            top: -10px;
            cursor: pointer;
        }

    #hand-dot {
        top: 340px;
        right: 22%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -190px;
            top: 75px;
        }
}

@media screen and (min-width:400px) and (max-width:420px) {
    #face-dot {
        top: 70px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 130px;
        right: 48%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
        }


    #shoulder-dot {
        top: 125px;
        right: 32%
    }


        #shoulder-dot img {
            right: -80px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -220px;
            top: -10px;
            cursor: pointer;
            padding: 3px 15px
        }

    #back-dot {
        top: 220px;
        right: 45%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
        }




    #elbow-dot {
        top: 210px;
        right: 28%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -190px;
            top: -10px;
            cursor: pointer;
            padding: 3px 10px
        }

    #waist-dot {
        top: 280px;
        right: 45%
    }

        #waist-dot img {
            right: 25px;
            top: -10px;
        }

        #waist-dot span {
            right: 15px;
            top: -10px;
            cursor: pointer;
            padding: 3px 10px
        }


    #hip-dot {
        top: 300px;
        right: 35%
    }

        #hip-dot img {
            right: 20px;
            top: 35px;
            width: 160px;
        }

        #hip-dot span {
            right: 16px;
            top: 65px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 420px;
        right: 37%
    }


        #knee-dot img {
            right: 20px;
            top: 5px;
            width: 120px;
        }

        #knee-dot span {
            right: -15px;
            top: 37px;
            cursor: pointer;
        }

    #ankle-dot {
        top: 540px;
        right: 38%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -235px;
            top: -10px;
            cursor: pointer;
        }

    #hand-dot {
        top: 320px;
        right: 22%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -170px;
            top: 75px;
            padding: 3px 10px
        }
}

@media screen and (min-width:380px) and (max-width:400px) {
    #face-dot {
        top: 70px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }


    #neck-dot {
        top: 110px;
        right: 46%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
        }


    #shoulder-dot {
        top: 115px;
        right: 32%
    }


        #shoulder-dot img {
            right: -80px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -220px;
            top: -10px;
            cursor: pointer;
            padding: 3px 15px
        }

    #back-dot {
        top: 200px;
        right: 45%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
        }




    #elbow-dot {
        top: 200px;
        right: 28%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -190px;
            top: -10px;
            cursor: pointer;
            padding: 3px 10px
        }

    #waist-dot {
        top: 270px;
        right: 45%
    }

        #waist-dot img {
            right: 25px;
            top: -10px;
        }

        #waist-dot span {
            right: 15px;
            top: -10px;
            cursor: pointer;
            padding: 3px 10px
        }


    #hip-dot {
        top: 280px;
        right: 35%
    }

        #hip-dot img {
            right: 20px;
            top: 30px;
            width: 135px;
        }

        #hip-dot span {
            right: 16px;
            top: 50px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 400px;
        right: 37%
    }


        #knee-dot img {
            right: 20px;
            top: 5px;
            width: 120px;
        }

        #knee-dot span {
            right: -15px;
            top: 37px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 510px;
        right: 38%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -235px;
            top: -10px;
            cursor: pointer;
        }

    #hand-dot {
        top: 300px;
        right: 22%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -170px;
            top: 75px;
            padding: 3px 10px
        }
}

@media screen and (min-width:370px) and (max-width:380px) {
    #face-dot {
        top: 60px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 110px;
        right: 46%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
        }


    #shoulder-dot {
        top: 115px;
        right: 32%
    }


        #shoulder-dot img {
            right: -80px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -220px;
            top: -10px;
            cursor: pointer;
            padding: 3px 15px
        }

    #back-dot {
        top: 185px;
        right: 45%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
        }




    #elbow-dot {
        top: 185px;
        right: 28%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -190px;
            top: -10px;
            cursor: pointer;
            padding: 3px 10px
        }

    #waist-dot {
        top: 255px;
        right: 45%
    }

        #waist-dot img {
            right: 25px;
            top: -10px;
        }

        #waist-dot span {
            right: 15px;
            top: -10px;
            cursor: pointer;
            padding: 3px 10px
        }


    #hip-dot {
        top: 275px;
        right: 35%
    }

        #hip-dot img {
            right: 20px;
            top: 30px;
            width: 135px;
        }

        #hip-dot span {
            right: 16px;
            top: 50px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 385px;
        right: 37%
    }


        #knee-dot img {
            right: 20px;
            top: 5px;
            width: 120px;
        }

        #knee-dot span {
            right: -15px;
            top: 37px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 500px;
        right: 38%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -235px;
            top: -10px;
            cursor: pointer;
        }

    #hand-dot {
        top: 290px;
        right: 22%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -170px;
            top: 75px;
            padding: 3px 10px
        }
}

@media screen and (min-width:360px) and (max-width:370px) {
    #face-dot {
        top: 50px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 90px;
        right: 46%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
            padding: 5px 10px;
        }


    #shoulder-dot {
        top: 100px;
        right: 32%
    }


        #shoulder-dot img {
            right: -75px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -205px;
            top: -10px;
            cursor: pointer;
            padding: 3px 10px
        }

    #back-dot {
        top: 180px;
        right: 45%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
            padding: 5px 10px;
        }




    #elbow-dot {
        top: 180px;
        right: 28%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -190px;
            top: -10px;
            cursor: pointer;
            padding: 3px 10px
        }

    #waist-dot {
        top: 230px;
        right: 45%
    }

        #waist-dot img {
            right: 20px;
            top: -10px;
        }

        #waist-dot span {
            right: 10px;
            top: -10px;
            cursor: pointer;
            padding: 3px 5px
        }


    #hip-dot {
        top: 250px;
        right: 35%
    }

        #hip-dot img {
            right: 20px;
            top: 30px;
            width: 115px;
        }

        #hip-dot span {
            right: 16px;
            top: 50px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 360px;
        right: 37%
    }


        #knee-dot img {
            right: 20px;
            top: 5px;
            width: 120px;
        }

        #knee-dot span {
            right: -15px;
            top: 37px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 470px;
        right: 38%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -215px;
            top: -10px;
            cursor: pointer;
            padding: 5px 10px;
        }

    #hand-dot {
        top: 270px;
        right: 22%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -170px;
            top: 75px;
            padding: 3px 10px
        }
}

@media screen and (min-width:350px) and (max-width:360px) {
    #face-dot {
        top: 50px;
        right: 45%
    }

        #face-dot img {
            right: -95px;
            top: -17px;
        }

        #face-dot span {
            right: -250px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 90px;
        right: 46%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 20px;
            cursor: pointer;
            padding: 5px 10px;
        }


    #shoulder-dot {
        top: 100px;
        right: 32%
    }


        #shoulder-dot img {
            right: -75px;
            top: -11px;
        }

        #shoulder-dot span {
            right: -205px;
            top: -10px;
            cursor: pointer;
            padding: 3px 10px
        }

    #back-dot {
        top: 180px;
        right: 45%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
            padding: 5px 10px;
        }




    #elbow-dot {
        top: 180px;
        right: 28%
    }


        #elbow-dot img {
            right: -70px;
            top: -10px;
        }

        #elbow-dot span {
            right: -190px;
            top: -10px;
            cursor: pointer;
            padding: 3px 10px
        }

    #waist-dot {
        top: 230px;
        right: 45%
    }

        #waist-dot img {
            right: 20px;
            top: -10px;
        }

        #waist-dot span {
            right: 10px;
            top: -10px;
            cursor: pointer;
            padding: 3px 5px
        }


    #hip-dot {
        top: 250px;
        right: 35%
    }

        #hip-dot img {
            right: 20px;
            top: 30px;
            width: 115px;
        }

        #hip-dot span {
            right: 16px;
            top: 50px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 360px;
        right: 37%
    }


        #knee-dot img {
            right: 20px;
            top: 5px;
            width: 120px;
        }

        #knee-dot span {
            right: -15px;
            top: 37px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 470px;
        right: 38%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -215px;
            top: -10px;
            cursor: pointer;
            padding: 5px 10px;
        }

    #hand-dot {
        top: 270px;
        right: 22%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -170px;
            top: 75px;
            padding: 3px 10px
        }
}

@media screen and (min-width:340px) and (max-width:350px) {
    #face-dot {
        top: 50px;
        right: 45%
    }

        #face-dot img {
            width: 80px;
            right: -75px;
            top: -10px;
        }

        #face-dot span {
            right: -210px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 90px;
        right: 46%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 15px;
            cursor: pointer;
            padding: 5px 10px;
        }


    #shoulder-dot {
        top: 100px;
        right: 32%
    }


        #shoulder-dot img {
            right: -70px;
            top: -11px;
            width: 95px;
        }

        #shoulder-dot span {
            right: -185px;
            top: -10px;
            cursor: pointer;
            padding: 3px 5px;
        }

    #back-dot {
        top: 180px;
        right: 45%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
            width: 90px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
            padding: 5px 10px;
        }




    #elbow-dot {
        top: 180px;
        right: 28%
    }


        #elbow-dot img {
            right: -65px;
            top: -10px;
            width: 90px;
        }

        #elbow-dot span {
            right: -165px;
            top: -10px;
            cursor: pointer;
            padding: 3px 5px;
        }

    #waist-dot {
        top: 230px;
        right: 45%
    }

        #waist-dot img {
            right: 20px;
            top: -10px;
            width: 90px;
        }

        #waist-dot span {
            right: 10px;
            top: -10px;
            cursor: pointer;
            padding: 3px 5px
        }


    #hip-dot {
        top: 250px;
        right: 35%
    }

        #hip-dot img {
            right: 20px;
            top: 30px;
            width: 115px;
        }

        #hip-dot span {
            right: 16px;
            top: 50px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 360px;
        right: 37%
    }

        #knee-dot img {
            right: 20px;
            top: 5px;
            width: 120px;
        }

        #knee-dot span {
            right: -15px;
            top: 40px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 470px;
        right: 38%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -215px;
            top: -10px;
            cursor: pointer;
            padding: 5px 10px;
        }

    #hand-dot {
        top: 270px;
        right: 22%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
            width: 90px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -155px;
            top: 70px;
            padding: 3px 5px
        }
}

@media screen and (min-width:320px) and (max-width:340px) {
    #face-dot {
        top: 50px;
        right: 45%
    }

        #face-dot img {
            width: 80px;
            right: -75px;
            top: -10px;
        }

        #face-dot span {
            right: -210px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 90px;
        right: 46%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 15px;
            cursor: pointer;
            padding: 5px 10px;
        }


    #shoulder-dot {
        top: 95px;
        right: 32%
    }


        #shoulder-dot img {
            right: -70px;
            top: -11px;
            width: 95px;
        }

        #shoulder-dot span {
            right: -185px;
            top: -10px;
            cursor: pointer;
            padding: 3px 5px;
        }

    #back-dot {
        top: 160px;
        right: 45%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
            width: 90px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
            padding: 5px 10px;
        }




    #elbow-dot {
        top: 170px;
        right: 28%
    }


        #elbow-dot img {
            right: -65px;
            top: -10px;
            width: 90px;
        }

        #elbow-dot span {
            right: -165px;
            top: -15px;
            cursor: pointer;
            padding: 3px 5px;
        }

    #waist-dot {
        top: 210px;
        right: 45%
    }

        #waist-dot img {
            right: 20px;
            top: -10px;
            width: 90px;
        }

        #waist-dot span {
            right: 10px;
            top: -10px;
            cursor: pointer;
            padding: 3px 5px
        }


    #hip-dot {
        top: 230px;
        right: 33%
    }

        #hip-dot img {
            right: 20px;
            top: 30px;
            width: 115px;
        }

        #hip-dot span {
            right: 16px;
            top: 50px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 330px;
        right: 37%
    }

        #knee-dot img {
            right: 15px;
            top: 5px;
            width: 120px;
        }

        #knee-dot span {
            right: -20px;
            top: 40px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 430px;
        right: 37%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -215px;
            top: -10px;
            cursor: pointer;
            padding: 5px 10px;
        }

    #hand-dot {
        top: 250px;
        right: 21%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
            width: 90px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -155px;
            top: 70px;
            padding: 3px 5px
        }
}

@media screen and (min-width:310px) and (max-width:320px) {
    #face-dot {
        top: 50px;
        right: 45%
    }

        #face-dot img {
            width: 80px;
            right: -75px;
            top: -10px;
        }

        #face-dot span {
            right: -210px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 90px;
        right: 46%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 15px;
            cursor: pointer;
            padding: 5px 10px;
        }


    #shoulder-dot {
        top: 95px;
        right: 32%
    }


        #shoulder-dot img {
            right: -70px;
            top: -11px;
            width: 95px;
        }

        #shoulder-dot span {
            right: -185px;
            top: -10px;
            cursor: pointer;
            padding: 3px 5px;
        }

    #back-dot {
        top: 160px;
        right: 45%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
            width: 90px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
            padding: 5px 10px;
        }




    #elbow-dot {
        top: 170px;
        right: 28%
    }


        #elbow-dot img {
            right: -65px;
            top: -10px;
            width: 90px;
        }

        #elbow-dot span {
            right: -165px;
            top: -15px;
            cursor: pointer;
            padding: 3px 5px;
        }

    #waist-dot {
        top: 210px;
        right: 45%
    }

        #waist-dot img {
            right: 20px;
            top: -10px;
            width: 90px;
        }

        #waist-dot span {
            right: 10px;
            top: -10px;
            cursor: pointer;
            padding: 3px 5px
        }


    #hip-dot {
        top: 230px;
        right: 33%
    }

        #hip-dot img {
            right: 20px;
            top: 30px;
            width: 95px;
        }

        #hip-dot span {
            right: 16px;
            top: 45px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 330px;
        right: 37%
    }

        #knee-dot img {
            right: -10px;
            top: 5px;
            width: 120px;
        }

        #knee-dot span {
            right: 50px;
            top: 10px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 430px;
        right: 37%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -215px;
            top: -10px;
            cursor: pointer;
            padding: 5px 10px;
        }

    #hand-dot {
        top: 250px;
        right: 21%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
            width: 90px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -155px;
            top: 70px;
            padding: 3px 5px
        }
}

@media screen and (min-width:290px) and (max-width:310px) {
    #face-dot {
        top: 50px;
        right: 45%
    }

        #face-dot img {
            width: 80px;
            right: -75px;
            top: -10px;
        }

        #face-dot span {
            right: -210px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 90px;
        right: 46%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 15px;
            cursor: pointer;
            padding: 5px 10px;
        }


    #shoulder-dot {
        top: 95px;
        right: 32%
    }


        #shoulder-dot img {
            right: -70px;
            top: -11px;
            width: 95px;
        }

        #shoulder-dot span {
            right: -185px;
            top: -10px;
            cursor: pointer;
            padding: 3px 5px;
        }

    #back-dot {
        top: 160px;
        right: 45%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
            width: 90px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
            padding: 5px 10px;
        }




    #elbow-dot {
        top: 170px;
        right: 28%
    }


        #elbow-dot img {
            right: -65px;
            top: -10px;
            width: 90px;
        }

        #elbow-dot span {
            right: -165px;
            top: -15px;
            cursor: pointer;
            padding: 3px 5px;
        }

    #waist-dot {
        top: 210px;
        right: 45%
    }

        #waist-dot img {
            right: 20px;
            top: -10px;
            width: 90px;
        }

        #waist-dot span {
            right: 10px;
            top: -10px;
            cursor: pointer;
            padding: 3px 5px
        }


    #hip-dot {
        top: 230px;
        right: 33%
    }

        #hip-dot img {
            right: 20px;
            top: 30px;
            width: 95px;
        }

        #hip-dot span {
            right: 16px;
            top: 45px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 330px;
        right: 37%
    }

        #knee-dot img {
            right: 5px;
            top: 15px;
            width: 120px;
        }

        #knee-dot span {
            right: 20px;
            top: 20px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 430px;
        right: 37%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -215px;
            top: -10px;
            cursor: pointer;
            padding: 5px 10px;
        }

    #hand-dot {
        top: 250px;
        right: 21%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
            width: 90px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -155px;
            top: 70px;
            padding: 3px 5px
        }
}

@media screen and (min-width:280px) and (max-width:290px) {
    #face-dot {
        top: 50px;
        right: 45%
    }

        #face-dot img {
            width: 80px;
            right: -75px;
            top: -10px;
        }

        #face-dot span {
            right: -210px;
            top: -30px;
            cursor: pointer;
        }



    #neck-dot {
        top: 90px;
        right: 46%
    }

        #neck-dot img {
            right: 25px;
        }

        #neck-dot span {
            right: 15px;
            cursor: pointer;
            padding: 5px 10px;
        }


    #shoulder-dot {
        top: 95px;
        right: 32%
    }


        #shoulder-dot img {
            right: -70px;
            top: -11px;
            width: 95px;
        }

        #shoulder-dot span {
            right: -185px;
            top: -10px;
            cursor: pointer;
            padding: 3px 5px;
        }

    #back-dot {
        top: 160px;
        right: 45%
    }

        #back-dot img {
            right: 30px;
            top: -17px;
            width: 90px;
        }

        #back-dot span {
            right: 20px;
            top: -29px;
            cursor: pointer;
            padding: 5px 10px;
        }




    #elbow-dot {
        top: 170px;
        right: 28%
    }


        #elbow-dot img {
            right: -65px;
            top: -10px;
            width: 90px;
        }

        #elbow-dot span {
            right: -165px;
            top: -15px;
            cursor: pointer;
            padding: 3px 5px;
        }

    #waist-dot {
        top: 210px;
        right: 45%
    }

        #waist-dot img {
            right: 20px;
            top: -10px;
            width: 90px;
        }

        #waist-dot span {
            right: 10px;
            top: -10px;
            cursor: pointer;
            padding: 3px 5px
        }


    #hip-dot {
        top: 230px;
        right: 33%
    }

        #hip-dot img {
            right: -75px;
            top: -18px;
        }

        #hip-dot span {
            right: -200px;
            top: -45px;
            cursor: pointer;
            padding: 3px 5px;
        }


    #knee-dot {
        top: 330px;
        right: 37%
    }

        #knee-dot img {
            right: 30px;
            top: -10px;
        }

        #knee-dot span {
            right: 25px;
            top: -10px;
            cursor: pointer;
        }


    #ankle-dot {
        top: 430px;
        right: 37%
    }

        #ankle-dot img {
            right: -70px;
            top: -10px;
        }

        #ankle-dot span {
            right: -215px;
            top: -10px;
            cursor: pointer;
            padding: 5px 10px;
        }

    #hand-dot {
        top: 250px;
        right: 21%
    }

        #hand-dot img {
            right: -40px;
            top: 32px;
            width: 90px;
        }

        #hand-dot span {
            cursor: pointer;
            right: -155px;
            top: 70px;
            padding: 3px 5px
        }
}

@media screen and (max-width:992px) {
    .mag-box {
        /*display: none;*/
        margin-top: 15px;
        max-height: 380px;
    }
}

.mag-ul {
    list-style: none;
    direction: rtl;
    padding: 0;
}

    .mag-ul li {
        width: 100%;
        height: 65px;
        border-bottom: 1px solid #e9e9e9;
        padding: 20px;
        font-size: 20px;
    }

        .mag-ul li:last-child {
            border-bottom: none;
        }

        .mag-ul li img {
            width: 25px;
            height: auto;
            margin-left: 8px;
        }

.mag-article-ul {
    list-style: none;
    direction: rtl;
    padding: 0;
}

    .mag-article-ul li {
        width: 100%;
        height: 65px;
        border-bottom: 1px solid #e9e9e9;
        padding: 20px;
        font-size: 20px;
        cursor: pointer;
    }

        .mag-article-ul li:last-child {
            border-bottom: none;
        }

        .mag-article-ul li a {
            text-decoration: none;
            font-size: 16px;
        }

#mag-modal {
    width: 0%;
    height: 100%;
    top: 0;
    right: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    transition: 0.54s;
    position: fixed;
    background-color: #fff;
    box-shadow: -10px 0 8px rgba(0,0,0,0.2);
    z-index: 9999;
}

    #mag-modal h6 {
        display: none;
        color: #333;
        margin-top: 30px;
        margin-right: 10px;
    }

.About-Application {
    margin-top: 50px;
    text-align: justify;
    direction: rtl !important;
}

    .About-Application p {
        margin-bottom: 15px;
    }

    .About-Application h6 {
        margin-top: 15px !important;
    }

    .About-Application ul li {
        font-size: 14px;
        line-height: 2;
        margin-bottom: 20px;
    }

.download-dropdown {
    display: inline-block;
}

    .download-dropdown a:first-child {
        width: 180px;
        height: 45px;
        display: inline-block;
        border: 3px solid #01875f;
        padding: 8px 12px;
        color: rgba(69, 28, 192, 0.5);
        text-decoration: none;
        border-radius: 5px;
    }

    .download-dropdown a {
        width: 180px;
        height: 45px;
        display: inline-block;
        border: 3px solid rgba(255,125,59,0.5);
        padding: 8px 8px 15px 8px;
        color: #ff7d3b;
        text-decoration: none;
        border-radius: 5px;
        transition: 0.3s;
        margin-top: 2px;
    }

        .download-dropdown a:hover {
            border: 3px dashed;
        }

        .download-dropdown a img {
            width: 25px;
            height: auto;
        }

.supportBox {
    width: 120px;
    height: 120px;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.8);
    box-shadow: 0px 5px 8px rgba(0,0,0,0.2);
    border: 3px dashed #ff7d3b;
    position: fixed;
    bottom: 25px;
    right: 25px;
    padding: 15px 0px;
    cursor: pointer;
}

    .supportBox img {
        width: 40px;
        height: auto;
    }

    .supportBox p {
        font-size: 12px;
        margin-bottom: 0px;
    }

    .supportBox span {
        font-size: 14px;
        font-weight: bold;
    }

/*
        =====================================

                   Doctors Page

        =====================================
    */
.doctors .box {
    width: 100%;
    height: auto;
    min-height: 100px;
    box-shadow: 0px 0px 12px rgba(85,85,85,0.2);
    border-radius: 8px;
    padding: 35px 25px;
    position: relative;
}

    .doctors .box .heading-title {
        color: #999;
        font-size: 18px;
        font-weight: bold;
    }

.input-group-mine {
    border: 1px solid #ddd;
    background-color: transparent !important;
    padding: 0px;
    border-radius: 5px;
    text-align: center;
    height: 50px;
    width: 100%;
}

#search-bar-hero-action {
    width: 85% !important;
}

.input-group-mine input {
    border: 0px !important;
    background-color: transparent !important;
    height: 50px;
    position: relative;
    width: 85%;
}

.input-group-mine span {
    margin-top: 10px;
    font-size: 30px;
    cursor: pointer;
    float: right;
    margin-right: 10px;
}

.input-group-mine a {
    width: 10%;
    height: 44px;
    float: left;
    margin-top: 2px;
    margin-left: 2px;
}

.doctors .categories-part {
    margin-top: 25px;
}

    .doctors .categories-part .box {
        height: 150px !important;
    }

@media screen and (max-width:992px) {
    .input-group-mine a {
        display: none;
    }

    .doctors .categories-part .box {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .doctors .box .avatar {
        top: -50px !important;
    }
}



.doctors .box .avatar {
    position: absolute;
    text-align: center;
    width: 100%;
    top: -40px;
    right: 0;
}

    .doctors .box .avatar img {
        width: 80px;
        margin: auto;
    }

.doctors .box h5 {
    font-size: 16px;
    font-weight: 300;
    position: relative;
    top: 20px;
    margin-block: 0px;
    text-align: center;
}

.doctors .categories-part .box .btn {
    border: 2px solid #ff7d3b;
    height: 40px;
    width: 100%;
    color: #666;
    transition: 0.3s ease-in-out;
    margin-top: 40px;
}

.doctors .categories-part .deActive-box {
    background-color: #e9e9e9;
}

    .doctors .categories-part .deActive-box .btn {
        border: 1px solid #454545;
        background: #757575;
        color: #fff;
    }

    .doctors .categories-part .deActive-box .avatar img {
        filter: grayscale(100%);
    }


.doctors .box .btn:hover {
    border: 2px dashed #ff7d3b;
    height: 40px;
    width: 100%;
}

.doctors #doctors-list-part .box {
    border-right: 1px solid #ff006e;
    overflow: hidden;
    text-align: center;
}

.doctors #doctors-list-part .doctor-box {
    min-height: 410px;
    max-height: 410px;
}

.doctors #doctors-list-part .box h6 {
    font-size: 18px;
    color: darkslategrey;
    position: relative;
    top: 10px;
}


.doctors #doctors-list-part .box .personal-details {
    text-align: right;
    padding-right: 30px;
    padding-top: 3px;
}

.doctors #doctors-list-part .box span {
    font-size: 14px;
    color: white;
    position: relative;
    margin-top: 20px;
    text-align: right !important;
}

.doctors #doctors-list-part .box .personal-details span {
    font-size: 12px;
}

.doctors #doctors-list-part .box i {
    position: absolute;
    right: 25px;
    margin-top: -5px;
}

.doctors #doctors-list-part .box .doctors-btn {
    text-decoration: none;
    padding: 8px 20px;
    width: 100%;
    display: inline-block;
    text-align: center;
    color: #ffffff;
    background: #ff7d3b;
    border-radius: 8px;
    margin-top: 10px;
}

    .doctors #doctors-list-part .box .doctors-btn:hover {
        background: #262B47;
    }

.doctors #doctors-list-part .box .doctors-btn-outline {
    text-decoration: none;
    padding: 8px 20px;
    width: 100%;
    display: inline-block;
    text-align: center;
    color: #ff7d3b;
    border: 1px solid #ff7d3b;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 10px;
}

    .doctors #doctors-list-part .box .doctors-btn-outline:hover {
        background: #ff7d3b;
        color: #fff;
        border-color: #fff;
    }

.doctors #doctors-list-part .box #GetTime {
    border: 1px solid #ff7d3b !important;
    margin-bottom: 5px;
    border-radius: 8px;
    background: transparent !important;
    border: 8px;
    color: #ff7d3b;
}

.doctors #doctors-list-part .box #pc-GetTime {
    border: 1px solid #ff7d3b !important;
    margin-bottom: 5px;
    margin-top: 10px;
    border-radius: 8px;
    background: transparent !important;
    border: 8px;
    color: #ff7d3b;
}

.doctors #doctors-list-part .box #GetTime:hover {
    border: 1px solid #262B47;
    background: transparent !important;
    border: 8px;
    color: #262B47;
}

.doctors-img {
    border-radius: 8px;
    object-fit: contain;
    width: 100%;
    height: 150px;
    margin-top:10px;
}

#doctors-list-part .active {
    border-right: 1px solid #16a085 !important;
}

#doctors-list-part .small-icon {
    width: 25px;
}


#doctors-list-part .box .doctor-deActive-badge {
    position: absolute;
    left: 5px;
    top: 5px;
    border: 1px solid #ff0101;
    padding: 3px 5px;
    border-radius: 5px;
    width: 115px;
    height: 30px;
}
#doctors-list-part .box .doctor-active-badge {
    position: absolute;
    left: 5px;
    top: 5px;
    border: 1px solid #16a085;
    padding: 3px 5px;
    border-radius: 5px;
    width: 90px;
    height: 30px;
}
    #doctors-list-part .box .doctor-active-badge span,
    #doctors-list-part .box .doctor-deActive-badge span {
        position: absolute;
        width: 100%;
        top: -16px;
        right: 20px;
    }
    #doctors-list-part .box .doctor-active-badge img,
    #doctors-list-part .box .doctor-deActive-badge img {
        width: 10px !important;
        height: 10px !important;
        position: absolute;
        right: 5px;
        top: 10px;
    }
.visit-now-btn {
    width: 100%;
    background-color: #16a085;
    color: #fff;
    height: 45px;
}

    .visit-now-btn:hover {
        width: 100%;
        background-color: #fff;
        color: #16a085;
        border: 2px solid #16a085 !important;
        height: 45px !important;
    }

#doctor-informations {
    margin-top: 150px;
}

    #doctor-informations .left-side-box {
        background-color: #262B47;
        padding: 0px !important;
    }

        #doctor-informations .left-side-box .header {
            border-bottom: 1px solid #666;
            height: 45px;
            padding: 10px;
            position: relative;
        }

            #doctor-informations .left-side-box .header h5 {
                color: #f5f5f5;
                line-height: 25px;
                top: auto !important;
                font-weight:bold;
            }

            #doctor-informations .left-side-box .header .small-icon {
                position: absolute;
                right: 10px;
            }

        #doctor-informations .left-side-box .body {
            height: auto;
            padding: 10px;
            position: relative;
        }

            #doctor-informations .left-side-box .body ul {
                padding: 10px 20px;
                text-align: right;
            }

                #doctor-informations .left-side-box .body ul li {
                    height: 45px;
                    color: #bac0e0;
                }

            #doctor-informations .left-side-box .body .visit-now-btn {
                color: #f1f1f1;
            }

                #doctor-informations .left-side-box .body .visit-now-btn:hover {
                    background-color: #262B47;
                    color: #bac0e0;
                    border: 1px solid #bac0e0;
                }

    #doctor-informations .second-left-side-box {
        margin-top: 10px;
        padding: 0px;
        height: auto !important;
    }

        #doctor-informations .second-left-side-box .header {
            border-bottom: 1px solid #e5e5e5;
            height: 45px;
            padding: 10px;
            position: relative;
        }

            #doctor-informations .second-left-side-box .header h5 {
                color: #262B47;
                line-height: 25px;
                top: auto !important;
                right: 0px;
                font-weight:bold;
            }

        #doctor-informations .second-left-side-box .body {
            padding: 10px 10px 0 10px;
        }

            #doctor-informations .second-left-side-box .body ul {
                text-align: right !important;
                padding: 0px !important;
            }

                #doctor-informations .second-left-side-box .body ul li {
                    line-height:2;
                }

    #doctor-informations .right-side-box {
        height: auto;
        margin-bottom: 30px;
        padding: 10px !important;
    }

        #doctor-informations .right-side-box img {
            height: 190px !important;
            border-radius: 20px !important;
        }

        #doctor-informations .right-side-box h4 {
            font-size: 20px;
            color: #262B47;
            margin-bottom: 10px !important;
            margin-top: 5px;
        }

        #doctor-informations .right-side-box ul {
            padding: 0px !important;
            list-style: none;
            width: 100% !important;
        }

            #doctor-informations .right-side-box ul li {
                background-color: #f9f9f9 !important;
                height: 45px;
                border: 1px solid #bcbebf;
                padding: 2px 8px;
                margin-top: 5px;
                border-radius: 5px;
                position: relative;
            }

                #doctor-informations .right-side-box ul li span {
                    position: absolute !important;
                    color: #ff7d3b !important;
                    top: 0px;
                    margin-top: 5px !important;
                    font-size: 30px !important;
                }

                #doctor-informations .right-side-box ul li h6 {
                    margin-right: 35px;
                    font-size: 14px !important;
                    line-height: 20px;
                }

    #doctor-informations .bio-graphy-box {
        padding: 5px 0 15px 0 !important;
        margin-bottom: 30px;
    }

        #doctor-informations .bio-graphy-box .header {
            height: 45px;
            padding: 7px 7px 5px 7px;
            position: relative;
            border-bottom: 1px solid #e5e5e5;
        }

            #doctor-informations .bio-graphy-box .header img {
                position: absolute;
                right: 5px;
            }

            #doctor-informations .bio-graphy-box .header h5 {
                top: 0;
                margin-top: 3px;
                font-weight:bold;
            }

    #doctor-informations #user-comments-for-doctor {
        margin-top: 30px !important;
    }

    #doctor-informations .comment-box {
        padding: 0px !important;
        margin-top: 10px;
        margin-bottom: 30px;
    }

        #doctor-informations .comment-box .header {
            padding: 10px;
            border-bottom: 1px solid #e5e5e5;
            height: 45px;
            line-height: 20px;
        }

        #doctor-informations .comment-box .body {
            padding: 10px;
        }

    #doctor-informations .right-side-box .personal-details {
        text-align: right;
        padding-top: 3px;
        padding-right: 5px !important;
        position: relative;
        width: 100% !important;
    }

@media screen and (max-width:768px) {
    #doctor-informations .left-side-box {
        margin-top: 10px;
    }
}

#doctor-informations .box {
    border-right: none !important;
    height: auto;
    box-shadow: none !important;
    border: 1px solid #e5e5e5 !important;
}

    #doctor-informations .box p {
        height: auto;
        text-align: justify;
        direction: ltr;
        line-height: 2;
        transition: 0.3s;
    }

#doctor-informations .text-holder {
    height: 100px;
    overflow: hidden;
    margin-bottom: 25px;
    padding: 20px;
    transition: 0.3s;
}

#doctor-informations .show-more {
    background-color: #ff7d3b;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    padding: 5px 15px;
}

    #doctor-informations .show-more:hover {
        background-color: #fff;
        color: #ff7d3b;
        text-decoration: none;
        border: 2px solid #ff7d3b !important;
        border-radius: 5px;
        padding: 5px 15px;
    }

.alert-dark {
    background-color: #FFF2EB !important;
    text-align: right !important;
}

    .alert-dark img {
        width: 65px;
    }

    .alert-dark b {
        font-size: 16px;
        font-weight: lighter;
    }

.doctors .heading {
    margin-bottom: 10px !important;
    border-bottom: 1px solid #e5e5e5;
}

#doctor-informations .box .btn-succes {
    height: 45px !important;
    padding: 0px !important;
}

#doctor-informations .box .btn-success:hover {
    height: 45px !important;
    border: none !important;
}

#doctor-informations .Comments {
    margin-right: 0px;
    width: 100% !important;
}

    #doctor-informations .Comments .comment-box-gray {
        min-height: 100px;
        border: 1px solid #e5e5e5 !important;
        padding: 0px !important;
        white-space: nowrap !important;
        min-height: auto !important;
        background-color:#f9f9f9;
    }

        #doctor-informations .Comments .comment-box-gray h6 {
            text-align: right;
        }

        #doctor-informations .Comments .comment-box-gray p {
            margin-top: -35px !important;
        }

        #doctor-informations .Comments .comment-box-gray .header {
            height: 45px !important;
            border-bottom: 1px solid #e5e5e5;
            padding: 8px 15px;
        }

            #doctor-informations .Comments .comment-box-gray .header h6 {
                margin-right: 30px !important;
                margin-top: 5px !important;
            }

            #doctor-informations .Comments .comment-box-gray .header img {
                position: absolute;
            }

        #doctor-informations .Comments .comment-box-gray .body {
            height: auto;
            padding: 40px 5px;
        }

    #doctor-informations .Comments .comment-box-blue {
        border: 1px solid #e5e5e5 !important;
        padding: 0px !important;
        white-space: nowrap !important;
        min-height: auto !important;
    }

        #doctor-informations .Comments .comment-box-blue .header {
            height: 45px !important;
            border-bottom: 1px solid #e5e5e5;
            padding: 8px 15px;
        }

            #doctor-informations .Comments .comment-box-blue .header h6 {
                margin-right: 30px !important;
                margin-top: 5px !important;
            }

            #doctor-informations .Comments .comment-box-blue .header img {
                position: absolute;
            }

        #doctor-informations .Comments .comment-box-blue .body {
            height: auto;
            padding: 20px 5px;
        }

#doctor-informations .box h5 {
    font-size: 16px;
    font-weight: 300;
    position: relative;
    top: -20px;
    right: 30px;
    margin-block: 0px;
    text-align: right;
}

#doctor-visit-factor .box h5 {
    font-size: 16px;
    font-weight: 300;
    position: relative;
    top: 10px;
    right: 8px;
    margin-block: 0px;
    text-align: right;
}

#doctor-visit-factor {
    margin-top: 50px;
}

    #doctor-visit-factor .small-icon {
        width: 35px;
        float: right;
    }

    #doctor-visit-factor .dateTime-placeHolder {
        background-color: #ff7d3b;
        width: 80px;
        height: 50px;
        text-align: center;
        padding-top: 15px;
        margin-top: 5px;
        color: #fff;
        border-radius: 0px 8px 8px 0px;
    }

    #doctor-visit-factor input {
        height: 50px;
        margin-top: 5px !important;
    }

        #doctor-visit-factor input[type=file] {
            height: 30px;
        }

    #doctor-visit-factor .second-left-side-box ul li {
        background-color: #f5fbf9;
        border: 1px solid #e5e5e5;
        border-radius: 5px;
        padding: 0px 5px;
        line-height: 40px;
        height: 40px;
        margin-bottom: 5px;
    }

.disabled {
    background-color: #f5f5f5 !important;
}

.mds-bs-dtp-container table td, .mds-bs-dtp-container table th {
    font-family: IranSans !important;
}

#doctor-visit-factor .visit-now-btn {
    width: 100%;
    background-color: #16a085 !important;
    color: #fff !important;
    height: 45px !important;
    padding-top: 5px !important;
}

    #doctor-visit-factor .visit-now-btn:hover {
        width: 100%;
        background-color: #fff !important;
        color: #16a085 !important;
        border: 2px solid #16a085 !important;
        height: 45px !important;
    }

#doctor-visit-factor .box ul {
    text-align: right;
    list-style: square;
}

    #doctor-visit-factor .box ul li {
        line-height: 2;
        font-size: 14px;
        padding-top:5px;
    }

.popover-header {
    font-family: IranSans !important;
}
/*
    =================================================

                Persian Date Picker

    ================================================
*/
#Calendar {
    width: 100%;
    height: auto;
}

    #Calendar .datepicker {
        width: 100%;
        border: 1px solid #eee;
        border-radius: 0px !important;
        margin: auto;
        margin-top: 25px;
    }

    #Calendar tr {
        border: 1px solid #ddd !important;
    }

    #Calendar .datepicker .table-condensed {
        width: 100%;
        border-collapse: separate;
    }

    #Calendar .datepicker td, #Calendar .datepicker th {
        height: 45px !important;
        border-radius: 0px;
        border: 1px solid #ddd;
        width: 100px;
    }

    #Calendar .datepicker table tr td.active.active {
        background-color: #d1e7dd !important;
        color: #198754;
        font-weight: bold;
        font-size: 18px;
    }

    #Calendar .datepicker table tr td.active {
        background-image: none !important;
    }

    #Calendar .datepicker .next, #Calendar .datepicker .prev {
        font-size: 25px;
        border: none !important;
    }

        #Calendar .datepicker .next:hover, #Calendar .datepicker .prev:hover {
            background-color: #fff;
            color: #ff7d3b;
        }

    #Calendar .datepicker table tr td.disabled {
        background-color: #e9e9e9 !important;
    }

    #Calendar .datepicker .datepicker-switch {
        border: none !important;
        background-color: #fff;
        color: #ff7d3b;
    }

    #Calendar .datepicker .dow {
        background-color: #5c4e9d;
        color: #fff;
    }

    #Calendar label {
        font-weight: bold;
    }

.time-box {
    width: 100%;
    height: 40px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px !important;
    line-height: 40px;
    text-align: center;
    color: #ff7d3b;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    margin-bottom: 25px;
}

    .time-box:hover {
        border: 1px solid #16a085;
        color: #16a085;
    }

    .time-box:focus {
        border: 1px solid #16a085;
        color: #fff;
        background-color: #16a085;
    }

.time-box-active {
    border: 1px solid #16a085;
    color: #fff;
    background-color: #16a085;
}

.deActive {
    background-color: #EEEEEE !important;
    color: #454545 !important;
    border: #eee !important;
}

#doctor-visit-factor input[type=checkbox] {
    height: 15px !important;
    margin-top: 2px !important;
    float: right;
}

#doctor-visit-factor .form-check-label {
    margin-right: -10px;
}

.categories-part .box .btn-activated {
    border: 3px solid #16a085 !important;
    background-color: #16a085;
    color: #fff !important;
}

.online-prescription {
    width: 100px;
    height: 30px;
    border-radius: 10px;
    background-color: #eee;
    color: #333;
    padding: 5px 5px 0 0;
    position: absolute;
    left: 55px;
    top: 5px;
}

.btn-outline-danger {
    width: 100%;
    margin: auto;
    background-color: #fff;
    border: 1px solid #ff006e;
    color: #ff006e;
    border-radius: 5px;
    padding: 5px 10px;
    text-align: center;
    height: 30px;
    margin-top: 5px;
}

#doctor-visit-factor .box .hidden {
    display: none;
}

.reciept-box {
    width: 100%;
    margin: auto;
    margin-top: 150px;
    margin-block: 150px;
    height: auto;
    min-height: 350px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(85,87,89,0.3);
    padding: 20px 25px;
    border-radius: 8px;
}

    .reciept-box h6 {
        text-align: right;
        margin-bottom: 15px;
        font-size: 16px;
        color: #ff7d3b;
    }

    .reciept-box img {
        width: 128px;
        height: auto;
        box-shadow: 0px 0px 10px rgba(85,87,89,0.03);
        margin-top: 25px;
    }

    .reciept-box h4 {
        margin-bottom: 15px;
        font-size: 18px;
        color: #ff7d3b;
    }

    .reciept-box h5 {
        margin-bottom: 15px;
        font-size: 16px;
    }

    .reciept-box span {
        font-size: 14px;
        text-align: justify;
        line-height: 2;
    }

        .reciept-box span a {
            text-decoration: none;
            color: #ff7d3b;
        }

    .reciept-box .alert {
        width: 100%;
    }

.input-groupt-btn {
    height: 50px !important;
    margin-top: 5px;
    border: 0px;
    border-radius: 5px 0 0 5px !important;
}

@media screen and (max-width:992px) {
    #factor-left-box {
        position: relative !important;
        width: 100% !important;
        margin-top: auto !important;
    }
}

.slick-slider {
    position: relative;
}

.slick-prev, .slick-next {
    background-color: #ff7d3b !important;
    border-radius: 50% !important;
    width: 25px !important;
    height: 25px !important;
    margin-top: 10px !important;
}

.slick-next {
    left: auto !important;
    right: -50px !important;
    padding-right: 3px !important;
}

.slick-prev {
    left: -50px !important;
    right: auto !important;
    padding-right: 3px !important;
}

.search-box {
    box-shadow: none !important;
    border: 1px solid #e5e5e5;
    margin-bottom: 50px !important;
}

    .search-box .btn:hover {
        width: 10% !important;
        height: 44px !important;
        border: none !important;
    }

.doctors-categories {
    direction: ltr !important
}

    .doctors-categories .box {
        width: 90% !important;
        text-align: center !important;
        margin-bottom: 15px;
        box-shadow: none;
        border: 1px solid #e5e5e5;
        margin-top: 40px;
    }

.slick-list {
    padding-right: 10px !important;
}

.doctor-box {
    box-shadow: none !important;
    border: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    cursor: pointer;
    margin-top: 15px;
}

    .doctor-box span {
        color: darkslategrey !important;
    }

.filter-box {
    box-shadow: none !important;
    border: 1px solid #e5e5e5;
    height: 495px !important;
    border-right: 1px solid #e5e5e5 !important;
    padding: 0px !important;
}

    .filter-box .header {
        text-align: right !important;
        padding: 15px 10px 0px 10px !important;
        height: 50px;
        position: relative;
    }

        .filter-box .header h5 {
            font-size: 20px !important;
            font-weight:bold;
            color: #454545 !important;
            text-align: right;
            font-weight: 900;
            color: #454545;
            position: relative;
            top: auto !important;
        }

            .filter-box .header h5 span {
                font-size: 20px !important;
                color: #454545 !important;
                text-align: right;
                font-weight: 900;
                color: #454545;
                top: auto !important;
                margin-right: 25px;
            }

        .filter-box .header img {
            width: 20px;
            height: auto;
            position: absolute;
        }

    .filter-box .body {
        text-align: right !important;
        position: relative;
        padding: 0px 10px 15px 10px !important;
    }

        .filter-box .body .filter-item {
            border-bottom: 1px solid #e9e9e9;
            margin-bottom: 15px;
        }

            .filter-box .body .filter-item:last-child {
                border-bottom: none !important;
                padding-bottom: 25px;
                margin-bottom: 15px;
            }

        .filter-box .body h6 {
            font-size: 16px !important;
            text-align: right;
            font-weight: 5600;
            color: #454545;
        }

        .filter-box .body ul {
            list-style: none !important;
            border: none !important;
            padding: 0 !important;
            position: relative;
        }

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    visibility: hidden;
}

    [type="radio"]:checked + label,
    [type="radio"]:not(:checked) + label {
        position: relative;
        padding-right: 28px;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
        color: #666;
    }

        [type="radio"]:checked + label:before,
        [type="radio"]:not(:checked) + label:before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border: 1px solid #ddd;
            border-radius: 100%;
            background: #fff;
        }

        [type="radio"]:checked + label:after,
        [type="radio"]:not(:checked) + label:after {
            content: '';
            width: 12px;
            height: 12px;
            background: #ff7d3b;
            position: absolute;
            top: 3px;
            right: 3px;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        [type="radio"]:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        [type="radio"]:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
    visibility: hidden;
}

    [type="checkbox"]:checked + label,
    [type="checkbox"]:not(:checked) + label {
        position: relative;
        padding-right: 28px;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
        color: #666;
    }

        [type="checkbox"]:checked + label:before,
        [type="checkbox"]:not(:checked) + label:before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border: 1px solid #ddd;
            background: #fff;
        }

        [type="checkbox"]:checked + label:after,
        [type="checkbox"]:not(:checked) + label:after {
            content: '';
            width: 12px;
            height: 12px;
            background: #ff7d3b;
            position: absolute;
            top: 3px;
            right: 3px;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        [type="checkbox"]:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        [type="checkbox"]:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }

.btn-resetFilters {
    width: 100%;
    margin: auto;
    background-color: #ff7d3b;
    border: 1px solid #fff;
    color: #fff;
    height: 45px;
}

    .btn-resetFilters:hover {
        background-color: #fff !important;
        border: 1px solid #ff7d3b !important;
        color: #ff7d3b !important;
        height: 45px !important;
    }

.categories-part .title-bar h5 {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #454545 !important;
    margin-bottom: 8px !important
}

.doctors .box-container {
    margin-top: 110px !important;
}

    .doctors .box-container .left-side-box {
        margin-top: 75px !important;
        padding: 0px !important;
    }

        .doctors .box-container .left-side-box .header {
            text-align: center;
            width: 100%;
            padding-bottom: 15px;
            border-bottom: 1px solid #e5e5e5;
            height: 45px;
            padding-top: 5px;
            margin-bottom: 15px;
            position: relative;
        }

            .doctors .box-container .left-side-box .header h5 {
                position: relative;
                width: auto !important;
                margin-right: 5px;
                line-height: 15px;
                font-weight:bold;
            }

        .doctors .box-container .left-side-box .body {
            padding: 10px 15px !important;
        }

        .doctors .box-container .left-side-box .visit-now-btn {
            line-height: 35px;
            border: 1px solid #16a085;
        }

            .doctors .box-container .left-side-box .visit-now-btn:hover {
                border: 1px solid #16a085 !important;
                background-color: #fff !important;
                color: #16a085 !important;
            }

    .doctors .box-container .second-left-side-box {
        margin-top: 15px;
        padding: 0px !important;
        min-height: auto !important;
    }

        .doctors .box-container .second-left-side-box .header {
            text-align: center;
            width: 100%;
            padding-bottom: 15px;
            border-bottom: 1px solid #e5e5e5;
            height: 45px;
            padding-top: 5px;
            margin-bottom: 15px;
            position: relative;
        }

            .doctors .box-container .second-left-side-box .header h5 {
                position: relative;
                width: auto !important;
                margin-right: 5px;
                line-height: 15px;
                font-weight:bold;
            }

        .doctors .box-container .second-left-side-box .body {
            padding: 10px 15px !important;
        }

            .doctors .box-container .second-left-side-box .body label {
                font-size: 14px;
            }

            .doctors .box-container .second-left-side-box .body #visit-price {
                font-size: 14px;
                text-align: left;
                font-weight:bold;
            }

        .doctors .box-container .second-left-side-box ul {
            list-style: none !important;
            padding: 0px !important;
        }

            .doctors .box-container .second-left-side-box ul li {
                height: 40px !important;
            }

        .doctors .box-container .second-left-side-box span {
            margin-bottom: 8px;
        }

.payment-page .box {
    box-shadow: none !important;
    border: 1px solid #e5e5e5;
    margin-bottom:5px;
}

#removeAttachedFile {
    height: auto !important;
}

#category-description {
    margin-top: 50px;
    border: 1px solid #e5e5e5;
    padding: 10px 25px;
    border-radius: 10px;
    display: none;
}

    #category-description h2 {
        font-size: 20px;
        width: 20%;
        color: #666;
        font-weight: bold;
    }

#categories-loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #ff7d3b #0000 #eee #0000;
    border-radius: 50%;
    box-sizing: border-box;
    animation: 1s rotate linear infinite;
    position: absolute;
    left: 48%;
}

    #categories-loader:before, #categories-loader:after {
        content: '';
        top: 0;
        left: 0;
        position: absolute;
        border: 10px solid transparent;
        border-bottom-color: #fff;
        transform: translate(-10px, 19px) rotate(-35deg);
    }

    #categories-loader:after {
        border-color: #de3500 #0000 #0000 #0000;
        transform: translate(32px, 3px) rotate(-35deg);
    }

@keyframes rotate {
    100% {
        transform: rotate(360deg)
    }
}

.checkbox-label {
    width: 100% !important;
}

    .checkbox-label .price {
        float: left;
    }

.second-left-side-box [type="radio"]:checked, [type="radio"]:not(:checked) {
    display: none !important;
}
#Consult-Reserve-Information-Box {
    display:none;
}
.btn-pagination {
    width:auto !important;
    height:35px !important;
    border:1px solid #eeeeee !important;
    line-height:20px !important;
    transition:0.3s ease-in-out;
}
.btn-pagination:hover {
    border: 1px solid #16a085 !important;
}
#noty_layout__topRight {
    right: 10% !important;
    width: 80% !important;
}

.noty_theme__metroui.noty_bar .noty_body {
    text-align: center;
    font-family: IRANSans;
    direction: rtl;
}
.return-button {
    width: 90%;
    height: 48px;
    margin: 15px 5% auto auto;
    background-color: #FD7901;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    font-family: IRANSans;
    border: none;
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    text-decoration: none;
    display: block;
    line-height: 45px;
}
.construction {
    width: 80%;
    height: 100%;
    background-image: url(/images/hero/construction.png);
    margin: auto;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background-color: #f5f7f9;
}