body {
}
/* ========================================
   RESPONSIVE CSS FOR IPHONE 14 PRO MAX & IPAD PRO
   ======================================== */

/* ========================================
   IPAD PRO (1024px and below)
   ======================================== */

@media (max-width: 1024px) {

    /* Header */
    .header-logo {
        width: 25%;
        margin-left: 40px;
    }
    .banner1 {
        margin-top: 40px;
    }
    .header-nav {
        width: 75%;
        margin: 0 40px 0 0;
    }

    .header-nav-inner {
        margin: 0 30px 0 0;
    }

    .nav-container {
        gap: 20px;
    }

    .nav-link a {
        font-size: 15px;
        padding: 0 10px;
    }

    .nav-social {
        gap: 20px;
        margin-left: 0px;
        margin-top:0px;
    }
    .nav-social-wrapper {
        height: 40px;
    }

        .nav-social3 {
        margin-left: 150px;
    }

    /* Top Bar */
    .top-bar {
        padding: 8px 40px 5px 40px;
    }

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

    /* Banner */
    .main-heading h1 {
        font-size: 70px;
        padding: 50px 0 60px 80px;
        min-height: 180px;
    }

    .prev {
        left: 30px;
    }

    .next {
        right: 30px;
    }

    /* Activities Section */
    .activities-containers h1 {
        font-size: 38px;
    }

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

    /* Amenities */
    .amenities-containers h1 {
        font-size: 38px;
    }

    .amenities-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    /* Pricing */
    .pricing-containers h1 {
        font-size: 42px;
    }

    .pricing-timeline {
        flex-wrap: wrap;
        gap: 25px;
    }

    .plan-step {
        flex: 1 1 45%;
    }

    /* About Section */
    .about-container {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 40px;
    }

    .about h1 {
        font-size: 42px;
    }

    .about-left h2 {
        font-size: 38px;
        line-height: 45px;
    }

    /* About Features */
    .about-features {
        grid-template-columns: 1fr 1fr;
        width: 90%;
        padding: 50px 0;
    }

    /* Healthy Section */
    .healthy-container {
        width: 95%;
        gap: 50px;
    }

    .healthy-content h2 {
        font-size: 36px;
    }

    /* Gallery */
    .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Transformation */
    .trans-head h1:first-of-type {
        font-size: 38px;
    }

    .trans-head h1:last-of-type {
        font-size: 24px;
    }

    .transform-section1-content {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .comparison-container {
        height: 450px;
    }

    .labels {
        font-size: 30px;
    }

    /* Nutrition */
    .ntr-container {
        min-height: 450px;
    }

    .ntr-content {
        padding: 60px 80px 60px 60px;
    }

    .ntr-h1 h1 {
        font-size: 42px;
    }

    /* Contact */
    .contact-container {
        gap: 50px;
        max-width: 900px;
    }

    .desc {
        font-size: 22px;
        line-height: 32px;
    }

    /* Footer */
    .footer {
        padding: 28px 20px 28px 30px;
    }

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

    .office {
        width: 80%;
    }

    .links ul {
        margin-right: 40px;
    }

    .newsletter {
        width: 85%;
    }
}

/* ========================================
   IPHONE 14 PRO MAX (430px and below)
   ======================================== */

@media (max-width: 430px) {

    /* Hide Desktop, Show Mobile */
    /* .header {
        display: none;
    }*/
    /* HIDE TOGGLE ON DESKTOP */
    /*   .menu-toggle {
        display: none;
        font-size: 28px;
        cursor: pointer;
        margin-right: 20px;
    }*/
    /* HEADER */ .header {
        position: fixed;
        top: 0;
        width: 100%;
        background: white;
        padding: 5px 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ddd;
        z-index: 100;
    }
    /* TOGGLE */

    .menu-toggle {
        width: 35px;
        height: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        z-index: 101;
    }
    .top-bar {
        display: none;
    }
        .menu-toggle span {
            height: 3px;
            width: 100%;
            background: black;
            border-radius: 2px;
            transition: 0.3s;
        }
        /* ANIMATION */

        .menu-toggle.active span:nth-child(1) {
            transform: translateY(12px) rotate(45deg);
        }

        .menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle.active span:nth-child(3) {
            transform: translateY(-12px) rotate(-45deg);
        }
    /* MOBILE MENU */

    .header-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 75%;
        height: 100vh;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.4s ease;
        z-index: 99;
    }

        .header-nav.active {
            right: 0;
            margin: 0px 0px 0px 0px;
        }
    /* CONTENT CENTER FIX */

    .nav-container {
        width: 100%;
        text-align: center;
    }
    /* LINKS */

    .nav-link {
        margin: 15px 0;
    }

        .nav-link a {
            font-size: 22px;
            font-weight: 600;
            text-decoration: none;
            color: black;
        }
    /* SOCIAL */

    .nav-social {
        margin-top: 25px;
        display: flex;
        justify-content: center;
        gap: 20px;
    }
    /* MOBILE VIEW */
    @media (max-width: 768px) {

        .header-inner {
            padding: 10px 0px 5px 0px;
            align-items: center;
            
        }

        .header-logo {
            width: 40%;
            margin-left: 5px;
        }

        .nav-social {
            z-index: 1;
        }

        .header-nav {
            position: fixed;
            top: 0;
            right: -100%;
            width: 75%;
            height: 100vh;
            background: white;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: 0.4s ease;
            z-index: 5;
        }

            .header-nav.active {
                right: 0;
            }

        .nav-container {
            flex-direction: column;
            gap: 20px;
            align-items: center;
        }

        .nav-link a {
            font-size: 20px;
        }

        .nav-social {
            margin-top: 0px;
            justify-content: center;
        }

        .menu-toggle {
            display: block;
        }
    }

    .header-mobile {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: white;
        border-bottom: 1px solid #c1b8b8;
        padding: 15px 20px;
    }

    .book-mobile {
        display: block;
    }

    /* Top Bar */
    .top-bar {
        padding:5px 5px 5px 5px;
        flex-direction: column;
        text-align: center;
        gap: 10px;

    }

    .nav-social a {
        width: 28px;
        height: 28px;
    }
        .nav-social a i {
            font-size: 15px;
        }
            .nav-social-wrapper {
        height: 30px;
    }
    .top-left {
        font-size: 13px;
        padding-left: 0;
        border-left: none;
    }
        .top-left p {
            margin: 0px 0px 0px 0px;
        }

    .top-right {
        gap: 15px;
        justify-content: center;
    }

    /* Banner */
    .banner {
        margin-top: 60px;
    }

    .main-heading h1 {
        font-size: 36px;
        padding: 30px 20px;
        margin-top: 60px;
        min-height: 120px;
        text-align: center;
    }

    .prev {
        left: 10px;
    }

    .next {
        right: 10px;
    }

        .prev img,
        .next img {
            width: 18px;
        }

    /* Activities Section */
    .activities {
        padding: 40px 5%;
    }

    .activities-containers h1 {
        font-size: 28px;
        margin-bottom: 40px;
    }

        .activities-containers h1::after {
            width: 80px;
            height: 3px;
        }

    .activities-container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 10px;
    }

    .activity-card {
        padding: 40px 20px;
    }

    .icon-box {
        width: 75px;
        height: 75px;
        margin-bottom: 20px;
    }

        .icon-box img {
            width: 35px;
        }

    .activity-card h3 {
        font-size: 20px;
    }

    .activity-card p {
        font-size: 14px;
        line-height: 22px;
    }

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

    /* Amenities */
    .amenities {
        padding: 40px 0;
    }

    .amenities-containers {
        width: 95%;
    }

        .amenities-containers h1 {
            font-size: 28px;
        }

            .amenities-containers h1::after {
                width: 80px;
                height: 3px;
                margin-bottom: 40px;
            }

    .amenities-container {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .cmn-img {
        width: 65px;
        height: 65px;
        margin-bottom: 18px;
    }

        .cmn-img img {
            width: 32px;
        }

    .cmn-txt h3 {
        font-size: 16px;
    }

    /* Pricing */
    .pricing-section {
        padding: 40px 5%;
    }

    .pricing-containers h4 {
        font-size: 14px;
    }

    .pricing-containers h1 {
        font-size: 32px;
        margin-bottom: 40px;
    }

    /*.pricing-timeline {
        flex-direction: column;
    }
*/
    .pricing-timeline::before {
        display: none;
    }

    .plan-step {
        flex: 1 1 100%;
    }

    .circle {
        width: 50px;
        height: 50px;
        font-size: 16px;
    }

    .most-popular .circle {
        font-size: 18px;
    }

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

    .info .price {
        font-size: 30px;
    }

    .info p {
        font-size: 13px;
    }

    .badge {
        font-size: 11px;
        padding: 3px 8px;
        margin-top: 15px;
    }

    /* About Section */
    .about-desk-banner img {
        margin-top: -52px;
    }
    /* When screen is mobile */
    @media (max-width: 430px) {
        .banner-desktop {
            display: none;
        }

        .banner-mobile {
            display: block;
        }
    }

    .about-section {
        padding: 40px 5%;
    }

    .about h1 {
        font-size: 32px;
        margin-bottom: 35px;
    }

        .about h1::after {
            width: 100px;
            height: 3px;
        }

    .about-container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px 20px;
    }

    .small-heading {
        font-size: 12px;
    }

    .about-left h2 {
        font-size: 30px;
        line-height: 38px;
        margin: 10px 0;
    }

    .about-left p {
        font-size: 14px;
        line-height: 24px;
    }

    .email-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .progress {
        height: 12px;
    }

    /* About Features */
    .about-features {
        grid-template-columns: 1fr;
        width: 95%;
        padding: 40px 0;
        row-gap: 25px;
    }

    .feature-card {
        padding: 35px 15px 12px 15px;
        width: 100%;
    }

    .icon img {
        width: 90px;
        height: 90px;
    }

    .feature-card h3 {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .feature-card p {
        font-size: 14px;
        line-height: 24px;
    }

    /* Healthy Section */
    .healthy-section {
        padding: 60px 0;
    }

    .healthy-container {
        width: 100%;
        flex-direction: column;
        gap: 40px;
    }

    .healthy-images {
        width: 100%;
        padding: 0 20px;
    }

        .healthy-images img {
            min-height: 250px;
        }

    .healthy-content {
        width: 100%;
        padding: 0 20px;
    }

        .healthy-content h2 {
            font-size: 30px;
        }

        .healthy-content p {
            font-size: 14px;
            line-height: 24px;
        }

    .healthy-list li {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .service-btn {
        padding: 12px 28px;
        font-size: 14px;
    }

    /* Gallery */
    .gallery-desk-banner {
        margin-top: 25px;
    }

    .gallery1 {
        margin-top: 60px;
    }

    .gallery {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        padding: 0 15px;
    }

        .gallery .big,
        .gallery .tall,
        .top1,
        .bottom,
        .left,
        .right {
            grid-row: span 1;
            border: none !important;
        }

    /* Transformation */
    .transform-desk-banner {
        margin-top: 25px;
    }

    .trans-head {
        padding: 40px 20px;
        margin-top: 60px;
    }

        .trans-head h1:first-of-type {
            font-size: 28px;
            margin-bottom: 15px;
        }

        .trans-head h1:last-of-type {
            font-size: 18px;
        }

    .transform-section1-desktop {
        padding: 50px 0 40px 0;
    }

    .transform-section1-content {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
    }

    .comparison-container {
        height: 400px;
    }

    .labels {
        font-size: 24px;
        top: 15px;
    }

        .labels.before {
            left: 15px;
        }

        .labels.after {
            right: 15px;
        }

    .slider::before {
        width: 45px;
        height: 45px;
    }

    .arrows {
        font-size: 22px;
        gap: 8px;
    }
    .banner1{
        margin-top:0px;
    }
    /* Nutrition */
    .nutrition-desk-banner {
        margin-top: 26px;
    }

    .nutrition {
        margin-top: 60px;
    }

    .ntr-container {
        flex-direction: column;
        min-height: auto;
    }

    .ntr-img,
    .ntr-content {
        width: 100%;
    }

    .cnt-img {
        min-height: 300px;
    }

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

    .ntr-h1 h1 {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .ntr-para p {
        font-size: 14px;
        line-height: 25px;
    }

    .ntr-btn a {
        padding: 12px 28px;
        font-size: 14px;
    }

    .ntr1-head h1 {
        font-size: 32px;
        padding: 0 20px;
    }

    .ntr1-img {
        width: 90%;
    }

    /* Contact */
    .contact-desk-banner {
        margin-top: 50px;
    }

        .contact-desk-banner img {
            margin-top: 50px;
        }

    .contact {
        padding: 60px 0;
    }

    .contact-container {
        flex-direction: column;
        gap: 40px;
        padding: 0 20px;
    }

    .contact-container1,
    .contact-container2 {
        width: 100%;
        min-height: auto;
    }

    .section-title {
        font-size: 12px;
    }

    .desc {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 25px;
    }

    .infoo {
        padding: 12px 14px;
        margin-bottom: 15px;
    }

        .infoo span {
            font-size: 18px;
        }

        .infoo h5 {
            font-size: 14px;
        }

        .infoo p {
            font-size: 13px;
            line-height: 20px;
        }

    .contact-form {
        padding: 30px 20px;
    }

    .form-title {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 15px;
        margin-bottom: 15px;
        font-size: 14px;
    }

    .submit {
        padding: 12px;
        font-size: 14px;
    }

    /* Footer */
    .footer {
        padding: 28px 20px;
    }

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

    .logo {
        width: 60%;
    }

    .office {
        width: 100%;
    }

        .office h3,
        .footer h3 {
            font-size: 20px;
            margin-bottom: 15px;
        }

        .office p {
            font-size: 14px;
            line-height: 24px;
        }

    .phone-main {
        padding: 5px 18px;
        width: 66%;
        font-size: 14px;
    }

    .links ul {
        grid-template-columns: 1fr 1fr;
        margin-right: 0;
        gap: 10px;
    }

    .links a {
        font-size: 14px;
    }

    .newsletter {
        width: 100%;
    }

    .input {
        font-size: 14px;
        padding: 10px 35px 8px 0;
    }

    #btn-submitforemailcontent {
        font-size: 16px;
        top: 6px;
    }

    /* Copyright */
    .copyright-container {
        flex-direction: column;
    }

    .left1,
    .right1 {
        width: 100%;
        border: none;
        padding: 15px 10px;
        font-size: 14px;
    }

    .left1 {
        border-bottom: 2px solid white;
    }

    .right1 a {
        font-size: 14px;
    }

    /* Social Bar */
    .social-bar {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

        .social-bar a {
            font-size: 14px;
        }

            .social-bar a i {
                font-size: 14px;
            }

        .social-bar img {
            width: 16px;
            height: 16px;
        }

    /* Back to Top */
    .back-to-top {
        bottom: 20px;
        right: 20px;
        padding: 8px 10px;
        font-size: 20px;
    }

    /* Thank You Page */
    .thank-page-v2 {
        padding: 40px 20px;
        min-height: 60vh;
    }

    .main-thank {
        font-size: 60px;
        margin-bottom: 20px;
    }

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

    /* Contact Block Section */
    .contact-block-section1 {
        padding: 40px 20px 30px 20px;
        margin-top: 60px;
    }

    .contact-block-section1-part2 {
        margin: 0 0 20px 0;
    }

    .contact-form1 h1 {
        font-size: 24px;
    }

    .name,
    .textform {
        font-size: 13px;
    }

    .button {
        padding: 0 0 0 20px;
        margin-top: 15px;
    }

    .buttons {
        padding: 8px 25px;
        font-size: 15px;
    }

    /* Popup Form */
    #contactPopup {
        max-width: 95%;
    }

    .popup-form {
        padding: 25px 20px;
    }

        .popup-form h2 {
            font-size: 22px;
            margin-bottom: 15px;
        }

    .label input,
    .label textarea {
        padding: 10px;
        margin-bottom: 12px;
        font-size: 14px;
    }

    .banner-desktop {
        display: none;
    }

    .banner-mobile {
        display: block;
    }
}






/* ========================================
   TABLET LANDSCAPE (768px - 1024px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    /* Optimize for iPad Pro landscape */
    .nav-container {
        gap: 15px;
    }

    .nav-link a {
        font-size: 14px;
    }

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

    .amenities-container {
        grid-template-columns: repeat(4, 1fr);
    }

    .pricing-timeline {
        flex-wrap: nowrap;
    }

    .plan-step {
        flex: 1;
    }
}

/* ========================================
   MOBILE LANDSCAPE (landscape orientation)
   ======================================== */

@media (max-width: 932px) and (orientation: landscape) {

    .main-heading h1 {
        font-size: 50px;
        padding: 30px 20px;
        min-height: 100px;
    }

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

    .comparison-container {
        height: 350px;
    }
}

/* ========================================
   EXTRA SMALL DEVICES (< 375px)
   ======================================== */

@media (max-width: 375px) {

    .main-heading h1 {
        font-size: 32px;
        padding: 25px 15px;
    }

    .activities-containers h1,
    .amenities-containers h1,
    .pricing-containers h1,
    .about h1 {
        font-size: 24px;
    }

    .activity-card h3,
    .feature-card h3 {
        font-size: 18px;
    }

    .comparison-container {
        height: 350px;
    }
}