/* =========================
   RESPONSIVE CSS
========================= */

@media (max-width: 1200px) {
    .nav {
        gap: 16px;
        font-size: 11px;
    }

    .features {
        padding: 40px 30px;
        grid-template-columns: repeat(2, 1fr);
    }

    .about {
        padding-left: 40px;
        gap: 40px;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    .doctor-card .btn {
        font-size: 14px;
    }
}

@media (max-width: 991px) {

    .nav {
        display: none;
    }

    .menu-btn {
        display: block;
    }

    .hero {
        height: 80vh;
    }

    .features {
        grid-template-columns: repeat(2, 1fr);
        padding: 40px 20px;
    }

    .about {
        flex-direction: column;
        padding: 50px 20px;
    }

    .about-content,
    .about-image-slider {
        max-width: 100%;
    }

    .specialists {
        padding-inline: 40px;
    }

    .specialists .splide__arrow--next {
        right: -30px;
    }

    .specialists .splide__arrow--prev {
        left: -30px;
    }

    .reviews,
    .blog,
    .social,
    .map,
    .footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .social-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .appointment-img img {
        max-height: 450px;
    }
}

@media (max-width: 767px) {
    .common-title {
        font-size: 26px;
        line-height: 34px;
    }

    .treatment-arrows .splide__arrow img {
        width: 32px;
        height: 32px;
    }

    .small-title {
        font-size: 14px;
        line-height: 24px;
    }

    .hero {
        height: 70vh;
    }

    .hero::before {
        height: 150px;
    }

    .btn {
        font-size: 13px;
        padding: 10px 16px;
    }

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

    .feature-card {
        padding: 26px 20px;
    }

    .about p,
    .review-card>p,
    .footer-content a,
    .footer-content p {
        font-size: 14px;
        line-height: 20px;
    }

    .quote {
        padding: 50px 20px 24px;
    }

    .quote h2,
    .quote h2 span {
        font-size: 26px;
        line-height: 34px;
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

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

    .social-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .appointment-form {
        padding: 40px 20px;
    }

    .appointment-form h2 {
        font-size: 26px;
        line-height: 34px;
    }

    .map {
        padding-top: 40px;
        margin-bottom: -30px;
    }

    .map iframe {
        height: 320px;
        border-radius: 12px;
    }

    .footer {
        padding-top: 90px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-content>div:first-of-type div {
        column-count: 1;
    }

    .copyright-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .copyright-wrapper>div:last-of-type {
        align-items: flex-start;
    }

    .copyright {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .copyright p:first-child {
        border-right: 0;
        padding-right: 0;
    }

    .copyright p,
    .copyright a {
        text-align: left;
    }

    .treatment-card {
        border: none;
    }
}

@media (max-width: 480px) {
    .hero {
        height: 65vh;
    }

    .hero .btn {
        margin-top: 70px;
    }

    .features,
    .about,
    .specialists,
    .reviews,
    .blog,
    .social,
    .map,
    .footer {
        padding-left: 15px;
        padding-right: 15px;
    }

    .reviews-arrows {
        display: block;
    }

    .specialists .splide__arrows,
    .reviews-arrows {
        position: relative;
        display: flex;
        gap: 20px;
        margin-top: 32px;
        justify-content: center;
    }

    .specialists .splide__arrows .splide__arrow,
    .reviews-arrows .splide__arrow {
        position: static;
        transform: none;
    }

    .reviews-arrows .splide__arrow{
        background: transparent;
        opacity: 1;
        width: auto;
        height: auto;
    }

    .reviews-arrows .splide__arrow svg{
        width: 20px;
    }

    .common-title {
        font-size: 23px;
        line-height: 30px;
    }

    .quote h2,
    .quote h2 span {
        font-size: 23px;
        line-height: 30px;
    }

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

    .review-card {
        padding: 18px;
    }

    .user-info {
        gap: 10px;
    }

    .appointment-form input,
    .appointment-form textarea {
        padding: 14px 16px;
        font-size: 14px;
    }
}

@media (min-width: 1260px) {
    .footer-content h4 {
        white-space: nowrap;
    }
}


@media (min-width: 1270px) and (max-width: 1440px) {
    .site-header {
        padding-inline: 20px;
        gap: 20px;
    }

    .mega-menu {
        top: 6vw;
    }

    .nav-item>a {
        font-size: 1vw;
    }

    .logo img {
        width: 5vw;
    }
}


@media (min-width: 1200px) and (max-width: 1269px) {
    .site-header {
        padding-inline: 16px;
        gap: 16px;
    }

    .nav-item>a {
        font-size: 1vw;
    }

    .mega-menu {
        top: 6vw;
    }

    .logo img {
        width: 4.7vw;
    }
}

/* below 1200: one mobile accordion */
@media (max-width: 1199px) {
    .site-header {
        padding: 22px 24px;
        align-items: center;
    }

    .desktop-nav {
        display: none;
    }

    .burger-btn {
        margin-left: auto;
    }

    .mega-menu,
    .desktop-burger {
        display: none;
    }

    .burger-menu {
        top: 136px;
        height: calc(100vh - 105px);
        padding: 20px 24px;
    }

    .mobile-menu {
        display: block;
    }

    .mobile-link,
    .mobile-toggle,
    .mobile-sub-toggle {
        width: 100%;
        border: 0;
        background: transparent;
        padding: 17px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        color: #000;
        font-family: "Playfair Display";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        /* 125% */
        text-transform: uppercase;
    }




    .mobile-toggle,
    .mobile-sub-toggle {
        display: flex;
    }

    .mobile-toggle img,
    .mobile-sub-toggle img {
        width: 20px;
    }

    .mobile-dropdown,
    .mobile-sub-dropdown {
        display: block;
        max-height: 0;
        transition: ease all 0.3s;
        opacity: 0;
        visibility: hidden;
        padding-left: 12px;
    }

    .mobile-item.active>.mobile-dropdown,
    .mobile-sub-toggle.active+.mobile-sub-dropdown {
        max-height: 2000px;
        opacity: 1;
        visibility: visible;
        padding-bottom: 16px;
    }

    .mobile-dropdown a,
    .mobile-sub-dropdown a {
        display: block;
        padding: 10px 0;
        font-size: 13px;
        text-transform: uppercase;
    }

    .mobile-toggle.active,
    .mobile-sub-toggle.active {
        color: #bd8b16;
    }


    .mobile-toggle img {
        transition: ease all 0.3s;
    }

    .mobile-toggle.active img {
        transform: rotate(180deg);
    }

    .mobile-toggle span,
    .mobile-sub-toggle span {
        transition: .3s ease;
    }

    .mobile-toggle.active span,
    .mobile-sub-toggle.active span {
        transform: rotate(45deg);
    }

    .mobile-divider {
        height: 24px;
    }
}

@media (max-width: 767px) {
    .logo img {
        width: 50px;
    }

    .site-header {
        padding: 20px;
    }

    .burger-menu {
        padding: 18px 16px;
        top: 106px;
    }

    .mobile-link,
    .mobile-toggle,
    .mobile-sub-toggle {
        font-size: 14px;
    }

    .mobile-link,
    .mobile-toggle,
    .mobile-sub-toggle {
        padding: 8px 0;
    }
}