/* mobile*/
@media only screen and (max-width: 600px) {


    /*----------------------------------------*/
    /*  01- Header css 
    /*----------------------------------------*/

    /* topbar start */
    .topbar {
        display: none;
    }

    /* topbar end */

    /* offcanvas start */
    .toothcare-site .offcanvas-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .toothcare-site .offcanvas-body {
        padding: 0;
    }

    .toothcare-site .Offc-topmaindiv {
        display: flex;
        gap: 8px;
        flex-direction: column;
        background: #00a8cc;
        color: #fff;
        padding: 20px;
    }

    .toothcare-site .nav-item .nav-link {
        font-size: 20px;
        font-weight: 500;
        color: var(--text-color);
    }

    .toothcare-site .offcanvas-Menu {
        padding: 20px;
    }

    /* offcanvas end */

    /*----------------------------------------*/
    /*   02- Index css 
    /*----------------------------------------*/

    /* about us start */
    .aboutus {
        padding: 10% 0;
    }

    .aboutcol {
        margin-top: 20px;
        padding: 0 10%;
    }

    .counterbox {
        height: 36% !important;
    }

    .mainboxcol {
        margin-bottom: 40px;
    }

    .iconbox {
        margin-left: 30px;
    }

    /* about us end */

    /* service start */
    .servicetitle {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* service end */

    /* why choose us start */
    .whychooseus {
        padding: 5%;
    }

    .chooseus h1 {
        font-size: 40px;
        font-weight: 700;
    }

    .chooseus p {
        font-size: 20px;
        margin-bottom: 0;
    }

    .whychooseusbox {
        margin-bottom: 20px;
    }

    /* why choose us end */

    /* calendar start */
    .calendar {
        margin-top: 15%;
    }

    .calendarsub {
        display: flex;
        gap: 0;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }

    .weekdays,
    .days {
        grid-template-columns: repeat(7, 1fr);
    }

    .weekdays div {
        font-size: 12px;
    }

    .appoinmentbox {
        flex-direction: column;
    }

    .time {
        width: 100%;
    }

    /* calendar end */


    /* ---------------------
    03 - about us 
    ------------------------ */

    /* who we are start */
    .arebox {
        padding: 40px 10px 0 10px;
        text-align: start;
    }

    /* who we are end */

    /* parallax section start*/
    .parallax {
        display: none;
    }

    /* parallax section end */

    /* service start */
    .services {
        display: flex;
        justify-content: center;
        gap: 20px;
        padding: 40px 20px;
        align-items: center;
        /* flex-direction: column; */
        flex-wrap: wrap;
    }

    .service {
        flex: 0 1 calc(50% - 10px);
    }

    /* service end */


    /*----------------------------------------*/
    /*  04 - Services css
    /*----------------------------------------*/
    .faqcolumn {
        display: flex;
        gap: 20px;
        flex-direction: column;
    }

    .pricing-card {
        background: white;
        padding: 30px;
        border-radius: 10px;
        text-align: center;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s;
        margin: 20px;
    }

    .pricing-section {
        padding: 0;
        background: #f9f9f9;
    }

    .emergency-box {
        width: 100%;
    }


    /*----------------------------------------*/
    /*  05 - Services Detail css
    /*----------------------------------------*/


    .inner-content img {
        border-radius: 8px;
        margin-top: 10px;
        width: 100%;
    }

    .sidebar {
        background: var(--white);
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 100%;
    }

    .working-hours {
        background: var(--primary_color);
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 100%;
    }


    /*----------------------------------------*/
        /*  06 - Testimonial Page css
    /*----------------------------------------*/
    .testimonialsmain {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 15px;
        border-left: 5px solid var(--primary_color);
        border-radius: 10px;
        margin-bottom: 15px;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
        gap: 20px;
        width: 100%;
        position: relative;
        left: 0;
        flex-direction: column;
    }

    .quote {
        border: 2px solid var(--primary_color);
        border-radius: 50px;
        padding: 18px 20px;
        width: 18%;
        text-align: center;
    }

    .bento-grid {
        grid-template-columns: 1fr;
    }

    .span-6,
    .span-4,
    .span-3,
    .span-2 {
        grid-column: span 1;
    }

    /*----------------------------------------*/
        /*  07 - Blog Page css
    /*----------------------------------------*/
    .commentbox {
        padding: 40px;
        border: 4px solid var(--primary_color);
        border-left: 4px solid var(--secondary_color);
        border-right: 4px solid var(--secondary_color);
        border-radius: 0 20px;
        width: 100%;
    }



    /*----------------------------------------*/
        /*  08 - Blog Details Page css
    /*----------------------------------------*/
    .profile-card {
        flex-direction: column;
    }

    .doctor-img {
        width: 100%;
        height: 100%;
    }

    /*----------------------------------------*/
        /*  09 - Contact Us Page css
    /*----------------------------------------*/
    .contact-box {
        display: flex;
        gap: 20px;
        flex-direction: column;
    }

}

/*mini tab*/
@media only screen and (min-width: 600px) and (max-width: 860px) {

    /*----------------------------------------*/
    /*  01- Header css 
    /*----------------------------------------*/

    /* topbar start */
    .topbar {
        display: none;
    }

    /* topbar end */

    /* offcanvas start */
    .toothcare-site .offcanvas-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .toothcare-site .offcanvas-body {
        padding: 0;
    }

    .toothcare-site .Offc-topmaindiv {
        display: flex;
        gap: 8px;
        flex-direction: column;
        background: #00a8cc;
        color: #fff;
        padding: 20px;
    }

    .toothcare-site .nav-item .nav-link {
        font-size: 20px;
        font-weight: 500;
        color: var(--text-color);
    }

    .toothcare-site .offcanvas-Menu {
        padding: 20px;
    }

    /* offcanvas end */

    /*----------------------------------------*/
    /*   02- Index css 
    /*----------------------------------------*/


    /* banner start */
    .bannertext {
        padding: 8% 2%;
    }

    /* banner end */

    /* about us start */
    .aboutimg {
        position: relative;
        margin-bottom: 5%;
    }

    .counterbox {
        width: 40%;
        height: 250px;
        right: 0px;
    }

    .tabcol {
        margin-bottom: 20px;
    }

    /* about us end */

    /* calendar start */
    .calendar {
        margin-top: 5%;
    }

    /* calendar end */

    /*----------------------------------------*/
    /*   03-  About us
    /*----------------------------------------*/


    /* number section start */
    .stats-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px;
    }

    .stat-box {
        background: white;
        padding: 40px 8px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    /* number section end */

    /* parallax start */
    .parallax {
        display: none;
    }

    /* parallax end */

    /* services start */
    .services {
        display: flex;
        justify-content: center;
        gap: 20px;
        padding: 40px 20px;
        flex-wrap: wrap;
    }

    /* services end */

    /* testimonial start*/
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .span-6,
    .span-4,
    .span-3,
    .span-2 {
        grid-column: span 2;
    }

    /* testimonial end*/

    /*----------------------------------------*/
    /*   04-  Service details page
    /*----------------------------------------*/

    .sidebar {
        background: var(--white);
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 100%;
    }

    .working-hours {
        background: var(--primary_color);
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 100%;
    }

    .faqcolumn {
        display: flex;
        gap: 20px;
        flex-direction: column;
    }

    /*----------------------------------------*/
    /*   05 -  SOur Team page
    /*----------------------------------------*/

    .team-member {
        flex: 0 1 calc(50% - 10px);
    }

    /*----------------------------------------*/
    /*   06 -  Testimonials page
    /*----------------------------------------*/

    .testimonialsmain {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 15px;
        border-left: 5px solid var(--primary_color);
        border-radius: 10px;
        margin-bottom: 15px;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
        gap: 20px;
        width: 100%;
        position: relative;
        left: 0;
    }

    .quote {
        border: 2px solid var(--primary_color);
        border-radius: 50px;
        padding: 18px 20px;
        width: 15%;
        text-align: center;
    }

    /*----------------------------------------*/
    /*   07 -  Bolg details page
    /*----------------------------------------*/


    .commentbox {
        padding: 40px;
        border: 4px solid var(--primary_color);
        border-left: 4px solid var(--secondary_color);
        border-right: 4px solid var(--secondary_color);
        border-radius: 0 20px;
        width: 100%;
    }

    /*----------------------------------------*/
    /*   08 -  contact us page
    /*----------------------------------------*/

    .contact-box {
        display: flex;
        gap: 20px;
        flex-direction: column;
    }
}

/*pro tab*/
@media only screen and (max-width: 1024px) {

    /* banner start */
    .bannertext {
        padding: 6%;
    }

    .topbar {
        display: none;
    }

    /* about us start */
    .counterbox {
        height: 36%;
    }

    .tabcol {
        margin-bottom: 20px;
    }

    /* about us end */
}