@media (min-width: 1201px) and (max-width: 1380px) {
    .header-inner {
        padding-left: 28px;
        padding-right: 28px;
        gap: 20px;
    }

    .desktop-nav {
        gap: 24px;
    }
}

@media (min-width: 1201px) and (max-width: 1280px) {
    .header-logo {
        width: 180px;
    }

    .desktop-nav>a,
    .desktop-nav>.nav-item>a {
        font-size: 17px;
    }
}

@media (max-width: 1200px) {

    .desktop-nav {
        display: none;
    }

    .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
    }

    .header-logo {
        width: 170px;
    }

    .menu-toggle {
        display: block;
    }

    /* MOBILE NAV */

    .mobile-nav {
        display: flex;
        flex-direction: column;

        position: fixed;
        top: 0;
        right: 0;

        width: min(400px, 100%);
        height: 100dvh;

        padding: 100px 25px 35px;

        background: #8C718B;
        color: #000;

        z-index: 1050;

        overflow-y: auto;
        overscroll-behavior: contain;

        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;

        transition:
            transform 0.35s ease,
            visibility 0.35s ease;
    }

    .mobile-nav.active {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    /* MOBILE LINKS */

    .mobile-nav>a:not(.btn),
    .mobile-nav>.has-mega>.mega-toggle {
        display: block;
        width: 100%;

        padding: 16px 0;

        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);

        color: #fff;
        text-align: left;

        font-family: "Poppins", sans-serif;
        font-size: 16px;
        font-weight: 400;

        text-transform: uppercase;
        cursor: pointer;
    }

    /* MEGA TOGGLE */

    .mobile-nav .has-mega>.mega-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    .mobile-nav .has-mega>.mega-toggle::after {
        content: "+";
        font-size: 23px;
        font-weight: 300;
        transition: transform 0.25s ease;
    }

    .mobile-nav .has-mega.is-open>.mega-toggle::after {
        content: "−";
    }

    /* MOBILE MEGA MENU */

    .mobile-nav .mega-menu {
        position: static;

        width: 100%;
        padding: 0;

        column-count: 1;

        background: transparent;

        max-height: 0;
        overflow: hidden;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            max-height 0.4s ease,
            opacity 0.25s ease,
            visibility 0.25s ease;
    }

    .mobile-nav .has-mega.is-open>.mega-menu {
        max-height: 3000px;

        padding: 20px 0;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-nav .mega-column {
        margin-bottom: 25px;
    }

    .mobile-nav .mega-column:last-child {
        margin-bottom: 0;
    }

    .mobile-nav .mega-column span {
        font-size: 17px;
        margin-bottom: 12px;
    }

    .mobile-nav .mega-column a {
        display: block;
        width: 100%;

        padding: 7px 0;

        font-size: 15px;
        line-height: 1.5;
    }


    .menu-overlay {
        display: block;

        position: fixed;
        inset: 0;

        background: rgba(0, 0, 0, 0.5);

        z-index: 1040;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;
    }

    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .menu-toggle {
        z-index: 1101;
    }

}

@media (max-width: 480px) {

    .header-inner {
        padding: 16px 20px;
    }

    .header-logo {
        width: 145px;
    }

    .mobile-nav {
        width: 100%;
        padding: 90px 22px 30px;
    }

}


@media (max-width: 1199px) {

    .section-heading {
        font-size: 42px;
    }

    .hero-content {
        margin-left: 60px;
    }

    .hero-content h1 {
        font-size: 54px;
    }

    .contact-inner {
        gap: 40px;
    }

    .footer-grid {
        gap: 50px;
    }
}


@media (max-width: 991px) {

    .practice-section,
    .about-section,
    .treatments-section,
    .before-after-section,
    .reviews-section,
    .longevity-section,
    .social-section {
        padding: 60px 40px;
    }

    .section-heading {
        font-size: 36px;
    }

    .hero-section {
        padding-top: 130px;
        padding-bottom: 60px;
    }

    .hero-content {
        margin-left: 40px;
        max-width: 460px;
    }

    .hero-content h1 {
        font-size: 44px;
    }

    .practice-stats {
        gap: 20px;
    }

    .stat-card {
        padding: 28px 20px;
    }

    .stat-card .stat-number {
        font-size: 34px;
        line-height: 40px;
    }

    .about-grid,
    .doctor-section .about-grid,
    .col-reverse .about-grid {
        gap: 30px;
        grid-template-columns: 1fr !important;
    }

    .about-content .btn {
        margin-top: 36px;
    }

    .treatment-card {
        padding: 20px;
    }

    .treatment-card .section-heading {
        margin-top: 28px;
    }

    .pill-list a {
        font-size: 16px;
        padding: 8px 14px 8px 20px;
    }

    .before-after-grid {
        gap: 14px;
    }

    .before-after-grid figcaption {
        margin-top: 16px;
    }

    .reviews-section .section-heading {
        max-width: 100%;
    }

    .longevity-card {
        flex-direction: column;
    }

    .longetivity-card-img {
        max-width: 100%;
    }

    .longetivity-card-img>img {
        height: auto;
        max-height: 460px;
    }

    .longevity-card::after {
        display: none;
    }

    .longevity-content {
        max-width: 100%;
        margin-right: 0;
        padding: 50px 40px;
        background: #8C718B;
    }

    .longevity-content p {
        max-width: 100%;
    }

    .longevity-content .btn {
        margin-top: 36px;
    }

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

    .contact-section {
        padding: 60px 40px 180px;
    }

    .contact-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .contact-content {
        max-width: 100%;
        padding: 0;
    }

    .site-footer {
        padding: 50px 40px 0;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 30px;
        max-width: 100%;
    }

    .footer-bottom {
        padding: 50px 40px 50px;
    }
}


@media (max-width: 767px) {

    body {
        font-size: 16px;
    }

    .practice-section,
    .about-section,
    .treatments-section,
    .before-after-section,
    .reviews-section,
    .longevity-section,
    .social-section {
        padding: 40px 20px;
    }

    .section-heading {
        font-size: 30px;
    }

    .practice-section>p,
    .about-content>span,
    .about-content p,
    .treatment-card p,
    .reviews-section>p,
    .longevity-content p,
    .social-head a,
    .contact-content p,
    .footer-col a,
    .footer-col p,
    .copyright,
    .hero-content p,
    .review-top span.user-name {
        font-size: 16px;
    }

    .btn,
    .eyebrow,
    .slider-text,
    .before-after-head>a,
    .before-after-grid figcaption,
    .stat-card p,
    .review-card p {
        font-size: 15px;
    }

    .pill-list a {
        font-size: 16px;
    }

    .btn {
        padding: 11px 22px;
    }

    .hero-section {
        min-height: 100vh;
        min-height: 100svh;
        padding: 130px 20px 60px;
    }

    .hero-section::after {
        background: linear-gradient(90deg, rgba(27, 20, 28, 0.66) 0%, rgba(42, 30, 41, 0.52) 100%);
    }

    .hero-content {
        margin-left: 0;
        max-width: 100%;
    }

    .hero-content h1 {
        font-size: 38px;
    }

    .hero-content p {
        margin-bottom: 28px;
    }

    .text-slider {
        min-height: 100px;
    }

    .slider-text {
        padding: 0 20px;
    }

    .practice-stats {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-top: 30px;
    }

    .stat-card .stat-number {
        font-size: 32px;
    }

    .stat-card .stat-license {
        font-size: 18px;
        line-height: 36px;
    }

    .stat-card span:nth-child(2) {
        font-size: 18px;
    }

    .ck-logo {
        margin-top: 40px;
    }

    .ck-logo img {
        width: 90px;
        height: 90px;
        margin-top: -40px;
    }

    .about-grid,
    .doctor-section .about-grid,
    .col-reverse .about-grid {
        gap: 24px;
    }

    .about-image img {
        height: auto;
        border-radius: 20px;
    }

    .doctor-section .about-content {
        padding: 0;
    }

    .eyebrow {
        margin-bottom: 20px;
    }

    .about-content>span {
        margin: 4px 0 18px;
    }

    .about-content p+p {
        margin-top: 16px;
    }

    .about-content .btn {
        margin-top: 30px;
    }

    .treatments-section>span {
        font-size: 20px;
        margin-bottom: 30px;
    }

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

    .treatment-card,
    .treatment-card>img {
        border-radius: 20px;
    }

    .treatment-card .section-heading {
        margin-top: 24px;
    }

    .before-after-head {
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 24px;
    }

    .before-after-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .before-after-grid figure img {
        border-radius: 20px;
    }

    .review-card {
        padding: 20px;
        border-radius: 20px;
    }

    .rating-stars img {
        width: 20px;
        height: 20px;
    }

    .longevity-card {
        border-radius: 20px;
    }

    .longetivity-card-img>img {
        max-height: 360px;
    }

    .longevity-content {
        padding: 40px 20px;
    }

    .longevity-content .btn {
        margin-top: 30px;
    }

    .social-head {
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 24px;
    }

    .social-cta {
        margin-top: 30px;
    }

    .map-section {
        margin-bottom: 50px;
    }

    .contact-section {
        padding: 40px 20px 160px;
    }

    .contact-form form {
        padding: 28px 20px;
        border-radius: 20px;
    }

    .contact-form .btn {
        margin-top: 20px;
    }

    .site-footer {
        padding: 40px 20px 0;
    }

    .footer-grid {
        gap: 36px 24px;
    }

    .footer-col span {
        font-size: 18px;
    }

    .footer-col span:not(:first-child) {
        margin-top: 24px;
    }

    .footer-col a,
    .footer-col p {
        overflow-wrap: anywhere;
    }

    .footer-socials {
        margin-top: 20px;
    }

    .footer-bottom {
        padding: 40px 20px 40px;
    }

    .footer-logo {
        padding-bottom: 24px;
        margin-bottom: 24px;
    }

    .copyright {
        text-align: center;
    }
}

@media (max-width: 600px) {

    .section-heading {
        font-size: 28px;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .treatment-card {
        padding: 16px;
    }

    .pill-list {
        grid-template-columns: 1fr;
    }

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

    .social-grid div {
        border-radius: 20px;
    }

    .social-grid div::after {
        background-size: 56px;
    }

    .social-grid div:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .social-grid div:last-child:nth-child(odd) img {
        aspect-ratio: 2 / 1.18;
    }


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

    .footer-logo img {
        width: 180px;
    }
}

@media (max-width: 991px) {
    .common-hero {
        height: 540px;
        padding: 60px 40px;
    }

    .common-hero h1 {
        font-size: 48px;
    }

    .intro-section,
    .two-col-sec {
        padding: 60px 40px;
    }

    .combined-sec {
        padding: 50px 40px;
        gap: 40px;
    }

    .two-col-sec {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .card-title {
        font-size: 28px;
        line-height: 36px;
    }

}

@media (max-width: 767px) {
    .common-hero {
        height: 460px;
        padding: 40px 20px;
    }

    .common-hero h1 {
        font-size: 36px;
        line-height: 1.2;
    }

    .intro-section,
    .two-col-sec {
        padding: 40px 20px;
    }

    .combined-sec {
        padding: 40px 20px;
        gap: 40px;
    }

    .intro-section p,
    .two-col-sec p,
    .bullet li {
        font-size: 16px;
    }

    .intro-section p+p,
    .two-col-sec p+p {
        margin-top: 18px;
    }

    .bullet li {
        padding-left: 28px;
    }

    .points-wrapper {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .points-wrapper .bullet {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .two-col-sec {
        gap: 30px;
    }

    .card-title {
        font-size: 26px;
        line-height: 34px;
    }

    .two-card-sec>div {
        padding: 40px 20px;
        border-radius: 20px;
    }

    .about-content p+.btn {
        margin-top: 28px;
    }
}

@media (max-width: 600px) {
    .common-hero {
        height: 400px;
    }

    .common-hero h1 {
        font-size: 30px;
    }

    .card-title {
        font-size: 24px;
        line-height: 32px;
    }

    .combined-sec {
        gap: 30px;
    }
}

@media (max-width: 767px) {
    .p-36 {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .p-36+.p-36 {
        padding-bottom: 40px;
    }

    .p-36::before,
    section+hr {
        width: calc(100% - 40px);
    }

    .bg-secondary+.reviews-section {
        margin-top: 40px;
    }

    .bg-primary {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}


@media (max-width: 767px) {
    .centered-intro {
        width: calc(100% - 40px);
        margin: 40px auto;
        padding: 40px 20px;
    }

    .bg-primary+.reviews-section {
        margin-top: 70px;
    }
}

@media (max-width: 1199px) {

    .philosophy-section::before {
        width: 280px;
        height: 169px;
        right: 5%;
    }

    .philosophy-card {
        padding: 30px;
    }

    .inquiry-panel,
    .reach-us-panel {
        padding: 40px;
    }

    .reach-us-item {
        gap: 24px;
    }

    .blog-content-sec {
        padding: 60px 40px 80px;
    }
}

@media (max-width: 991px) {

    .philosophy-section,
    .get-in-touch-section,
    .insights-section {
        padding: 60px 40px;
    }

    .philosophy-section {
        margin-bottom: 60px;
    }

    .blog-content-sec {
        padding: 60px 40px 70px;
    }

    .philosophy-section::before {
        width: 220px;
        height: 133px;
        top: 40px;
        right: 40px;
    }

    .philosophy-section hr {
        margin: 70px 0 40px;
    }

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

    .get-in-touch-section>p {
        margin-bottom: 50px;
    }

    .get-in-touch-layout {
        grid-template-columns: 1fr;
    }

    .reach-us-panel {
        gap: 36px;
    }

    .insights-section>p {
        margin-bottom: 50px;
    }

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

    .insights-pagination {
        margin-top: 50px;
    }

    .blog-innerpage-hero h1 {
        font-size: 36px;
        line-height: 42px;
        max-width: 100%;
    }

    .blog-content-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 767px) {

    .philosophy-section,
    .get-in-touch-section,
    .insights-section {
        padding: 40px 20px;
    }

    .philosophy-section {
        margin-bottom: 40px;
    }

    .blog-content-sec {
        padding: 40px 20px 60px;
    }

    .philosophy-section::before {
        width: 150px;
        height: 91px;
        top: 20px;
        right: 20px;
    }

    .philosophy-intro .eyebrow {
        margin-bottom: 20px;
    }

    .philosophy-intro .section-heading {
        margin-bottom: 18px;
    }

    .philosophy-intro p {
        font-size: 16px;
    }

    .philosophy-section hr {
        margin: 50px 0 30px;
    }

    .philosophy-approach .section-heading {
        margin-bottom: 24px;
    }

    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .philosophy-card {
        padding: 24px;
        border-radius: 20px;
    }

    .philosophy-card span {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .philosophy-card p {
        font-size: 16px;
    }

    .get-in-touch-section>p {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .inquiry-panel,
    .reach-us-panel {
        padding: 30px 24px;
        border-radius: 20px;
    }

    .inquiry-panel>p {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 28px;
    }

    .inquiry-fields input:not([type="checkbox"]),
    .inquiry-fields textarea {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .inquiry-fields input::placeholder,
    .inquiry-fields textarea::placeholder {
        font-size: 15px;
    }

    .inquiry-consent {
        gap: 14px;
        margin: 28px 0;
    }

    .inquiry-consent input {
        width: 20px;
        height: 20px;
        margin-top: 2px;
    }

    .inquiry-consent span {
        font-size: 16px;
        line-height: 24px;
        max-width: 100%;
    }

    .reach-us-panel {
        gap: 28px;
    }

    .reach-us-item {
        gap: 18px;
    }

    .reach-us-icon {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .reach-us-icon img {
        width: 24px;
        height: 24px;
    }

    .reach-us-details {
        gap: 8px;
        min-width: 0;
    }

    .reach-us-details span {
        font-size: 18px;
        line-height: 20px;
    }

    .reach-us-details p,
    .reach-us-details a {
        font-size: 16px;
    }

    .insights-section>p {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .insights-grid {
        gap: 16px;
    }

    .insights-card {
        border-radius: 20px;
    }

    .insights-card-content {
        padding: 18px;
    }

    .insights-card span {
        font-size: 20px;
        line-height: 24px;
    }

    .insights-pagination {
        gap: 8px;
        margin-top: 40px;
    }

    .insights-pagination .page-number {
        width: 40px;
        height: 40px;
        font-size: 16px;
        border-radius: 10px;
    }

    .blog-innerpage-hero h1 {
        font-size: 32px;
        line-height: 38px;
    }

    .blog-content-wrapper h2 {
        font-size: 20px;
        line-height: 28px;
    }

    .blog-content-wrapper h3 {
        font-size: 20px;
        line-height: 28px;
    }

    .blog-content-wrapper h4 {
        font-size: 18px;
        line-height: 26px;
    }

    .blog-content-wrapper h5 {
        font-size: 16px;
        line-height: 24px;
    }

    .blog-content-wrapper h6 {
        font-size: 15px;
        line-height: 22px;
    }

    .blog-content-wrapper p {
        font-size: 16px;
        line-height: 24px;
    }

    .blog-content-wrapper p+p {
        margin-top: 18px;
    }

    .blog-content-wrapper p+h2 {
        margin-top: 36px;
    }

    .blog-content-wrapper h2+p {
        margin-top: 18px;
    }

    .blog-content-wrapper p+h3,
    .blog-content-wrapper p+h4,
    .blog-content-wrapper p+h5,
    .blog-content-wrapper p+h6,
    .blog-content-wrapper ul+ :is(h2, h3, h4, h5, h6) {
        margin-top: 30px;
    }

    .blog-content-wrapper h3+p,
    .blog-content-wrapper h4+p,
    .blog-content-wrapper h5+p,
    .blog-content-wrapper h6+p,
    .blog-content-wrapper :is(h2, h3, h4, h5, h6)+ul {
        margin-top: 16px;
    }

    .blog-content-wrapper ul {
        gap: 10px;
    }

    .blog-content-wrapper ul li {
        font-size: 16px;
        padding-left: 28px;
    }

    .blog-content-wrapper ul li::before {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 600px) {

    .philosophy-section::before {
        display: none;
    }

    .philosophy-card,
    .inquiry-panel,
    .reach-us-panel {
        padding: 24px 20px;
    }

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

    .insights-card {
        aspect-ratio: 1 / 1.05;
    }

    .insights-pagination .page-number {
        width: 38px;
        height: 38px;
    }

    .blog-innerpage-hero h1 {
        font-size: 28px;
        line-height: 34px;
    }
}

@media (max-width: 767px) {
    .combined-style-primary {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}