/*
####################################################
M E D I A  Q U E R I E S
####################################################

/*
Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap because it is "mobile first"
*/

body {
    overflow-x: hidden;
}

.mob-welcome-btn-group {
    display: none;
}

.web-bg-smile-check {
    display: block;
}

.mob-smile-check {
    display: none;
}

.mob-pricing-section {
    display: none;
}

.web-pricing-section {
    display: block;
}

.web-copyright-content-links {
    display: flex;
}

.mob-copyright-content-links {
    display: none;
}

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

.mob-footer-link {
    display: none;
}
.mb-7p{
    margin-bottom: 7%;
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    .d-mob {
        display: block !important;
    }

    .classy-nav-container .classy-navbar .classynav ul li a {
        padding: 0 17px;
    }

    .mob-login-signup-link {
        padding: unset !important;
        display: unset !important;
        margin: 0 5px;
    }

    .mob-user-icon {
        font-size: 15px;
        border: 3px solid var(--notification-banner);
        border-radius: 50%;
        padding: 5px 5px;
        height: 35px;
        width: 35px;
        text-align: center;
    }
    .header-user-name {
        margin-left: -30px;
        margin-top: 8px;
        font-size: 17px;
    }
    .main-header-area .classycloseIcon .cross-wrap {
        width: 20px;
        height: 26px;
        cursor: pointer;
        position: fixed;
        z-index: 12;
        top: 10px;
    }
    .mob-user-menu-header {
        background-color: var(--primary-color);
        margin-bottom: 10px;
        display: flex;
        height: 80px;
        align-items: center;
        padding: 10px 0px;
    }

    .mob-sticky-header-item {
        z-index: 11 !important;
    }

    .mob-sticky-header-item+li {
        padding-top: 90px;
    }

    .mob-sticky-header {
        width: 300px;
        position: fixed;
        z-index: 12;
        background-color: white;
        border: none;
        padding-bottom: 10px;
        box-shadow: 0px 3px 4px #cacaca;
        height: 80px;
    }

    .mob-menu-btn-default {
        font-size: 0.86rem;
        padding: 6px 8px;
        color: var(--default-button-color);
        border-radius: 7px;
        background-color: var(--default-button);
        transition: all 500ms;
        border: 2px solid var(--default-button);
    }

    /***********************
    * Common
    ************************/
    .shadow-text {
        font-size: 44px;
    }
    .shadow-text-acknowledgement{
        font-size: 32px;
    }

    .section-name {
        top: -35px;
        font-size: 1.8rem;
        line-height: normal;
        margin-top: -45px;
    }

    .btn-default {
        font-size: 1.1rem;
    }

    /***********************
    * Carousel
    ************************/
    .carousel-indicators {
        margin-right: 15px;
        bottom: 30%;
    }

    /**********************
    * Top Notification
    ************************/
    /* .top-header-area:before {
        left: -15px;
    } */

    .navbar-buttons {
        display: none;
    }

    /***********************
    * Menus
    ************************/

    .classy-nav-container .classy-navbar {
        height: 70px;
        padding: 4px 4px;
        /* margin-top: 10px; */
    }

    .classycloseIcon {
        top: 25px;
    }



    /***********************
    * Banner
    ************************/
    .banner-row,
    .h-575 {
        height: 275px;
    }
    .initial-banner{
        height: 100% !important;
    }

    .carousel-content-center {
        height: 265px;
    }
    .refer-a-friend-banner-sec .carousel-content-center {
        height: 200px;
    }

    .web-welcome-btn-group {
        display: none;
    }

    .mob-welcome-btn-group {
        display: flex;
        justify-content: center;
    }

    .mob-welcome-btn-group-row {
        margin-left: 0;
        margin-right: 0;
        margin-top: -20px;
    }

    .banner-text-title {
        font-size: 20px;
        width: 50%;
    }

    .banner-text-sub-title {
        font-size: 14px;
        width: 50%;
    }

    /* .welcome-btn-group {
        text-align: center;
        margin: 0px auto;
        margin-top: 125px;
    }*/
    .mob-welcome-btn-group .btn-free-video-consultion,
    .mob-welcome-btn-group .btn-upload-selfie {
        font-size: 14px !important;
        min-width: 120px !important;
    }


    .btn-upload-selfie {
        margin-top: 5px;
    }

    .dento-cta-area {
        margin-top: 0;

    }

    .carousel-content {
        top: 6%;
        left: 5.5% !important;
        width: 88%;
    }
    .mb-carousel-content{
        top:20%;
    }

    /**********************
    * Counter
    ***********************/
    /* .counter-row .border-right-2:not(:last-child) {
        border: none;
    } */

    .counter-row {
        background-color: unset;
        box-shadow: unset;
        border: unset;
        border-radius: unset;
        padding: 10px 0px;
        margin-left: 3px;
        margin-right: 3px;
        /* margin-top: 25px; */
        margin-top: 14px;
    }

    .counter-block {
        margin-bottom: 10px;
    }

    .counter-row>div {
        background-color: white;
        box-shadow: 0px 0px 8px #d4d4d4;
        border: 2px solid var(--primary-color);
        border-radius: 7px;
        margin-bottom: 5px;
    }

    /**********************
    * What is PhiAligner
    ***********************/
    .what-is_phialigner-card {
        margin-top: 10px;
    }

    .what-is-phialigner-row-1 {
        margin-top: 25px;
    }

    /**********************
    * How it Works
    ***********************/
    .get-appointment-section {
        text-align: center;
        padding-left: unset !important;
        top: -185px;
    }

    .how-it-works-area {
        /* background-image: url('/public-ui/images/how-it-works/how-it-work-mob.gif'); */
        background-position: center;
        margin-top: 0px;
        height: 61vh;
    }

    .how-it-work-block-body:before {
        position: unset;
        top: unset;
        right: unset;
        display: unset;
        border-top: unset;
        border-left: unset;
        border-right: unset;
        border-bottom: unset;
        content: unset;
    }

    .how-it-work-block-body-invert:before {
        position: unset;
        top: unset;
        right: unset;
        left: 0;
        display: unset;
        border-top: unset;
        border-left: unset;
        border-right: unset;
        border-bottom: unset;
        content: unset;
        border-left-width: unset;
        border-right-width: unset;
    }

    .how-it-works-row.row-rev .col-md-4 {
        order: 3;
        z-index: 1;
        margin-bottom: 2rem !important;
    }

    .how-it-works-row.row-rev .col-md-2 {
        order: 2
    }

    .how-it-works-row.row-rev .col-md-6 {
        order: 1
    }

    .web-how-it-works .yellow-box-shadow,
    .web-how-it-works .yellow-box-shadow-reverse {
        margin-top: -90px;
        margin-left: 17%;
    }

    .web-how-it-works .box {
        height: 180px;
    }

    .web-how-it-works .yellow-box-shadow,
    .web-how-it-works .yellow-box-shadow-reverse {
        box-shadow: -30px -30px var(--secondary-color);
    }


    /**********************
    * Smile Check
    ***********************/
    /* .web-smile-check-section {
        margin-top: -125px;
    } */
    .web-smile-check-section-container {
        margin-bottom: 5px;
    }

    .web-smile-check-section {
        padding-top: 50px;
    }

    .web-bg-smile-check {
        display: none;
    }

    .mob-smile-check {
        display: block;
        background-color: var(--primary-color);
        padding-bottom: 20px;
    }

    .bg-smile-check {
        /* background-image: url('/public-ui/images/smile-check/smile-check.svg'); */
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        height: 190px;
        width: 160px;
        margin-top: unset;
        margin: 0px auto;
    }

    .smile-check-right-block h3 {
        font-size: 26px
    }

    .smile-check-right-block p {
        font-size: 16px;
    }


    /**********************
    * Pricing  Section
    ***********************/
    .mob-pricing-section {
        display: block;
    }

    .pricing-section {
        height: unset;
    }

    .web-pricing-section {
        display: none;
    }

    .bg-pricing-section {
        /* height: 185px; */
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        height: 190px;
        width: 180px;
        margin-top: unset;
        margin: 0px auto;
    }

    .testimonial-section {
        height: unset;
        /*Home Page/Testimonial section page responsive*/
    }

    .mob-pricing-section .testimonial-section {
        height: 135px;
    }

    .pricing-section-right-block {
        padding-left: 15px;
        padding-top: unset;
        text-align: center;
    }

    .btn-pricing-section {
        margin-bottom: 40px;
    }

    /*********************
    * Testimonial
    **********************/

    .testimonial-card-image {
        height: 280px;
    }

    .patient-name {
        font-size: 18px;
    }

    .testimonial-description .read-more-link {
        font-size: 14px;
    }

    .slick-prev {
        left: 0;
    }

    .slick-next {
        right: 0;
    }

    /**********************
    * Footer
    ***********************/
    .web-footer-links {
        display: none;
    }

    .footer-area {
        /* padding-top: 190px; */
        padding-top: 55px;
        margin-top: -100px;
        /* margin-top: -40px; Register Button hide. Therefore we change */
    }

    .footer-area .single-footer-widget {
        margin-bottom: 25px;
    }

    .footer-social-info-block {
        text-align: left;
    }

    .copywrite-content nav ul {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .copywrite-content nav ul li {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .web-copyright-content-links {
        display: none;
    }

    .mob-copyright-content-links {
        display: block;
    }

    .mob-copyright-content-links.copywrite-content {
        padding-top: 20px;
    }

    .mob-footer-link {
        display: block;
    }

    .sticky-whatsapp-container a {
        right: 5%;
    }

    /**********************
    * Page: How It Works
    ***********************/
    .mob-whyus-section {
        display: none;
    }
    /**********************
    * Page: Result
    ***********************/

    .result-banner-text-title{
        font-family: var(--banner-text-title);
        letter-spacing: 1px;
        color: black;
        width: 47%;
        font-size: 20px;
    }

    .store-banner-text-title{
        font-family: var(--banner-text-title);
        letter-spacing: 1px;
        color: black;
        width: 50%;
        font-size: 19px !important;
    }
    .result-banner-text-first{
        margin-top: 5%;
    }
    .result-banner-text-sub-title {
        width: 100%;
        font-size: 14px;
        margin-top: 12%;
    }
    .result-banner .carousel-content{
        width: 100%;
    }

    /**********************
    * Page: Why Us
    ***********************/

    .why-us-banner-text-title {
        width: 56%;
        font-size: 18px;
    }

    .why-us-banner-text-sub-title {
        width: 70%;
        font-size: 13px;
    }

    .smile-check-banner .why-us-banner-text-title{
        width:47%;
        font-size: 20px;
        margin-top: 5%;
    }
    .smile-check-banner .why-us-banner-text-sub-title{
        width: 100%;
        font-size: 14px;
        margin-top: 15%;
    }
    .smile-check-banner .carousel-content{
        width: 100%;
    }
    .how-it-works-banner .why-us-banner-text-title{
        font-size: 20px;
        width:47%;
        margin-top: 5%;
        letter-spacing: 1px;
    }
    .how-it-works-banner .why-us-banner-text-sub-title{
        width: 100%;
        font-size: 14px;
        margin-top: 16%;
    }
    .how-it-works-banner .carousel-content{
        width: 100%;
    }
    .pricing-banner .why-us-banner-text-title{
        width: 47%;
        font-size: 20px;
        letter-spacing: 1px;
        margin-top: 18%;
    }
    .pricing-banner .why-us-banner-text-sub-title{
        width: 100%;
        font-size: 14px;
        margin-top: 20%;
    }
    .pricing-banner .carousel-content{
        width: 100%;
    }
    .whyus .why-us-banner-text-sub-title{
        width: 100%;
        margin-top: 13%;
        font-size: 14px;
    }
    .whyus .carousel-content{
        width: 100%;
    }
    .whyus .why-us-banner-text-title {
        width: 47%;
        margin-top: 5%;
    }
    .discount-text .discount-amount {
        font-size: 62px;
    }

    .discount-text .font-size60 {
        font-size: 50px;
    }

    .plan-includes-section {
        font-size: 30px;
    }

    .your-phi-plan-bullets.font-size30 {
        font-size: 20px;
    }

    .tag-line {
        font-size: 44px;
    }

    .web-whyus-section {
        display: none;
    }
    .web-dentistsevice{
        display: none;
    }

    .mob-whyus-section {
        display: block;
    }
    .mob-dentistsevice{
        display: block;
    }

    .box {
        height: 200px;
        /* width: 256px; */
        width: 220px;
        margin: 86px 34px -34px 43px;
        background-size: cover;
    }

    /**********************
    * Page: Smile Check
    ***********************/
    .section-smile-check-smile {
        margin-top: 37px;
    }

    .perfect-smile-quote:before {
        content: '“';
        left: -3.5rem;
        top: -2rem;
        font-family: 'Special Elite', cursive;
    }

    .perfect-smile-quote:before,
    .perfect-smile-quote:after {
        font-size: 6rem;
    }

    .perfect-smile-quote {
        font-size: 1.0rem;
        margin-left: 45px;
    }

    .phismile-today {
        margin: 100px 0px 50px 0px;
    }

    .section-smile-check-disclaimer {
        margin-top: 50px;
    }

    /**********************
    * Page: FAQ
    ***********************/
    .faq-card.patient-faq {
        margin-top: 25px;
    }

    .faq-card-header {
        min-height: unset;
    }

    .faq-card-body {
        min-height: unset;
    }

    .faq-card-header-title {
        font-size: 1.8rem;
    }

    .faq-card-body-item,
    .faq-card-header-sub-title {
        font-size: 18px;
    }

    .faq-card-body-item:last-child {
        border-bottom: none;
    }

    /**********************
    * Page: FAQ-Doctor
    ***********************/
    .faq-browse-container,
    .faq-container {
        margin-top: 5px;
    }

    .browse-us-our-faq {
        font-size: 1.3rem;
        margin-top: 10px;
        margin-bottom: 8px;
    }

    .faq-doc-content {
        margin-left: unset;
    }

    .faq-view-all {
        margin-top: unset;
    }

    .faq-container .yellow-box-shadow-reverse {
        box-shadow: -30px -30px var(--primary-color);
        margin-left: 10%;
    }

    .faq-container .box {
        margin: 50px 34px -34px 0px;
        height: 168px;
        width: 287px;
    }

    .faq-yellow-border-bottom{
        border-bottom: 8px dotted var(--primary-color);
        padding: 5px 0px;
        margin-bottom: 15px;
    }
    .about-us-page-sec{
        margin-top:70px;
    }
    .bg-pricing-section-overlay{
        padding-bottom: 30%;
    }
    .mob-bg-pricing{
        padding-bottom: 0px;
    }
    .section-smile-check-disclaimer{
        padding-bottom: 20%;
    }
    .dentist-area{
        margin-bottom: 135px;
    }
    .google-review-box{
        min-height: 240px;
    }
    .mob-init-perk-sec{
        margin-bottom: 40%;
    }
    .top-header-content .notificaion-label{
        font-size: 14px;
    }
    .mobile-mb-20{
        margin-bottom: 20%;
    }

}
.section-smile{
    padding-top: 15px;
}
.section-phismile{
    padding-top: 0px;
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}



/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

/* Set width to make card deck cards 100% width */
@media (min-width: 425px) and (max-width: 768px) {
    .bg-smile-check {
        /* background-image: url('/public-ui/images//smile-check/smile-check.svg'); */
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        height: 190px;
        width: 190px;
        margin-top: unset;
    }

    .btn-smile-check {
        margin: unset;
        margin-top: unset !important;
    }

    .testimonial-section {
        height: unset;
    }
    .refer-a-friend-modal-body .tabtop li a {
        padding-left: 15px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .faq-doc-content {
        margin-left: 95px;
        margin-top: 11px;
    }

    .faq-container .box {
        width: 100%;
    }
    .section-padding-0-80{
        padding-top: 0;
        padding-bottom: 160px;
    }
}
@media only screen and (min-width: 360px) and (max-width: 578px) {
    .box {
        height: 200px;
        width: 256px;
        margin: 86px 34px -34px 43px;
        background-size: cover;
    }

    .web-whyus-section {
        display: none;
    }
    .web-dentistsevice{
        display: none;
    }
    .section-padding-0-80{
        padding-top: 0;
        padding-bottom: 180px;
    }
    .why-us-banner-text-sub-title {
        font-size: 12px;
    }
}

@media (min-width: 1440px) {
    .whyus .why-us-banner-text-title {
        width: 60%;
    }
    .whyus .why-us-banner-text-sub-title {
        width: 58%;
    }
    .pricing-banner .why-us-banner-text-title{
        width: 60%;
    }
    .pricing-banner .why-us-banner-text-sub-title {
        width: 58%;
    }
}

@media (min-width: 1024px) and (max-width: 1440px) {
    .bg-smile-check {
        /* background-size: contain; */
        background-size: cover;
    }
    .why-us-banner-text-title {
        width: 95%;
    }
    .work-with-us-banner-sec .why-us-banner-text-title {
        width: 100%;
    }

    .smile-check-banner  .why-us-banner-text-title {
        width: 100%;
    }
    .google-review-box::before{
        bottom: 38px;
    }
    .whyus .why-us-banner-text-title {
        width: 60%;
    }
    .whyus .why-us-banner-text-sub-title {
        width: 60%;
    }
}

@media (min-width: 1024px) and (max-width: 1366px) {
    .whyus .why-us-banner-text-title {
        width: 60%;
    }
    .whyus .why-us-banner-text-sub-title {
        width: 60%;
    }
    .how-it-works-banner .why-us-banner-text-title {
        width: 80%;
    }
    .how-it-works-banner .why-us-banner-text-sub-title {
        width: 80%;
    }
}

@media screen and (max-width: 1441px) {
    .carousel-content {
        left: 5.5%;
    }

    .get-appointment-section {
        padding-left: 200px;
    }
    .initial-appointment-section{
        margin-top: 15px;
    }
}

/**************************
* 4K - Screen
***************************/
@media screen and (min-width: 2555px) {
    .carousel-content {
        left: 28.5%;
    }

    .how-it-works-area {
        background-position: center;
    }

    .get-appointment-section {
        padding-left: 255px;
    }
    .initial-appointment-section{
        padding-left: 50px;
    }
}

.margin-0{
    margin: 0;
}
.video-thumbnail{
    border-width: 0px;
}

@media (min-width: 320px) and (max-width: 568px) {
    .whyus .why-us-banner-text-sub-title {
        width: 100%;
        margin-top: 8%;
        font-size: 13px;
    }
    .whyus .why-us-banner-text-title {
        width: 47%;
        margin-top: 8%;
    }
}

@media (min-width: 375px) and (max-width: 667px) {
    .whyus .why-us-banner-text-sub-title {
        width: 100%;
        margin-top: 12%;
        font-size: 13px;
    }
}

@media (min-width: 414px) and (max-width: 736px) {
    .whyus .why-us-banner-text-sub-title {
        width: 100%;
        margin-top: 8%;
        font-size: 13px;
    }
}


@media (min-width:320px) and (max-width:400px){
    .mob-welcome-btn-group .btn-free-video-consultion, .mob-welcome-btn-group .btn-upload-selfie{
        font-size: 12px !important;
    }
    .mob-initial-welcome-btn{
        margin-top: 20px;
        justify-content: left;
    }
    .initial-appointment-section .btn,.consultation-btn .btn{
        font-size: 13px;
    }
    .top-header-content .notificaion-label{
        font-size: 13px;
    }
}
@media (min-width:411px) and (max-width:832px) {
    .mob-initial-welcome-btn{
        margin-top: 35px;
        justify-content: left;
    }
}