/* ==========================================================
   PEDICURE PURPLE ROSE
   MOBILE STYLESHEET
   ==========================================================

   Dit bestand bevat uitsluitend responsive styling.

   Desktop styling:
   style.css

   Breakpoints:
   - 992px : tablet / mobiel
   - 768px : contact / kleinere tablet
   - 600px : kleine smartphones
   - 480px : extra kleine smartphones

========================================================== */


/* ==========================================================
   TABLET / MOBILE
   MAX-WIDTH: 992PX
========================================================== */

@media screen and (max-width: 992px) {


    /* ======================================================
       GLOBAL
    ====================================================== */

    html {
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
    }


    /* ======================================================
       HEADER
    ====================================================== */

    header {
        position: absolute;
        top: 12px;
        left: 0;
        width: 100%;
        padding: 0;
        z-index: 1000;
    }

    header .container {
        width: calc(100% - 24px);
        min-height: 72px;
        margin: 0 auto;
        padding: 0 20px;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        box-sizing: border-box;
        border-radius: 18px;
    }


    /* ======================================================
       LOGO
    ====================================================== */

    header .logo {
        display: flex;
        align-items: center;

        flex: 0 0 auto;

        position: relative;
        z-index: 1102;
    }

    header .logo img {
        display: block;
        width: auto;
        height: 48px;
    }


    /* ======================================================
       NAVIGATION WRAPPER
    ====================================================== */

    .navigation {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        margin-left: auto;
        height: auto;
    }


    /* ======================================================
       HAMBURGER BUTTON
    ====================================================== */

    .menu-toggle {
        display: flex;

        width: 46px;
        height: 46px;
        flex: 0 0 46px;

        margin: 0;
        padding: 0;

        align-items: center;
        justify-content: center;
        flex-direction: column;

        gap: 5px;

        background: transparent;
        border: 0;
        outline: 0;

        cursor: pointer;

        position: relative;
        z-index: 1103;
    }

    .menu-toggle span {
        display: block;

        width: 24px;
        height: 2px;

        margin: 0;
        padding: 0;

        background: #4B474D;
        border-radius: 2px;

        transition:
            transform 0.3s ease,
            opacity 0.3s ease,
            background 0.3s ease;
    }


    /* ======================================================
       HAMBURGER → X
    ====================================================== */

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

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

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


    /* ======================================================
       MOBILE NAVIGATION
    ====================================================== */

    .nav-menu {
        position: fixed;

        top: 0;
        right: 0;

        width: min(320px, 85vw);
        height: 100dvh;

        margin: 0;
        padding: 110px 35px 40px;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        gap: 28px;

        list-style: none;

        background: rgba(248, 243, 248, 0.97);

        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);

        box-shadow:
            -15px 0 40px rgba(54, 42, 53, 0.15);

        transform: translateX(100%);

        transition:
            transform 0.4s ease;

        z-index: 1100;

        overflow-y: auto;
        overflow-x: hidden;
    }


    /* ======================================================
       OPEN MOBILE MENU
    ====================================================== */

    .nav-menu.active {
        transform: translateX(0);
    }


    /* ======================================================
       NAVIGATION ITEMS
    ====================================================== */

    .nav-menu li {
        width: 100%;
        margin: 0;
        padding: 0;
    }


    /* ======================================================
       NAVIGATION LINKS
    ====================================================== */

    .nav-menu a {
        position: relative;

        display: inline-flex;
        align-items: center;

        width: auto;

        padding: 6px 0;

        font-family: 'Manrope', sans-serif;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.4;

        color: #4B474D;

        text-decoration: none;
        white-space: nowrap;

        transition:
            color 0.3s ease;
    }

    .nav-menu a:hover {
        color: var(--primary, #8C5B87);
    }

    .nav-menu a.active {
        color: var(--primary, #8C5B87);
    }


    /* ======================================================
       MOBILE UNDERLINE
    ====================================================== */

    .nav-menu a::after {
        content: "";

        position: absolute;

        left: 0;
        bottom: 0;

        width: 100%;
        height: 1px;

        background: var(--primary, #8C5B87);

        transform: scaleX(0);
        transform-origin: center;

        transition:
            transform 0.3s ease;
    }

    .nav-menu a:hover::after,
    .nav-menu a.active::after {
        transform: scaleX(1);
    }


    /* ======================================================
       HERO
    ====================================================== */

    .hero {
        min-height: 85vh;
        padding-top: 110px;
    }

    .hero h1 {
        font-size:
            clamp(2.8rem, 13vw, 3.5rem);
    }

    .hero p {
        font-size: 0.95rem;
    }


    /* ======================================================
       BUTTONS
    ====================================================== */

    .button {
        width: auto;

        padding: 15px 30px;

        font-size: 0.85rem;
    }


    /* ======================================================
       GENERAL SECTIONS
    ====================================================== */

    section {
        padding: 70px 0;
    }


    /* ======================================================
       SECTION TITLES
    ====================================================== */

    .section-title h2,
    .about h2 {
        font-size: 2.5rem;
    }


    /* ======================================================
       SERVICES
    ====================================================== */

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


    /* ======================================================
       ABOUT / GENERAL ABOUT GRID
    ====================================================== */

    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }


    /* ======================================================
       USP
    ====================================================== */

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


    /* ======================================================
       CTA
    ====================================================== */

    .cta {
        padding: 80px 20px;
    }

    .cta h2 {
        font-size: 2.5rem;
    }


    /* ======================================================
       INTRO / PEDICURE INTRO
    ====================================================== */

    .intro,
    .pedicure-intro {
        padding: 80px 0;
    }

    .intro-grid,
    .pedicure-intro-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .intro h2 {
        font-size: 2.5rem;
    }


    /* ======================================================
       PAGE HERO
    ====================================================== */

    .page-hero {
        min-height: 680px;
        height: 85vh;
    }

    .page-hero-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center center;
    }

    .page-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(43, 34, 43, 0.28) 0%,
                rgba(43, 34, 43, 0.48) 45%,
                rgba(43, 34, 43, 0.75) 100%
            );
    }

    .page-hero-content {
        padding-top: 150px;
        padding-bottom: 60px;
    }

    .page-hero-content h1 {
        max-width: 500px;

        font-size:
            clamp(2.8rem, 13vw, 4rem);

        line-height: 0.98;
    }

    .page-hero-content p {
        max-width: 430px;

        font-size: 0.95rem;
        line-height: 1.7;
    }


    /* ======================================================
       PEDICURE SERVICES
    ====================================================== */

    .pedicure-services {
        padding: 80px 0;
    }

    .pedicure-intro .section-title,
    .pedicure-services .section-title {
        margin-bottom: 50px;
    }

    .pedicure-intro .section-title h2,
    .pedicure-services .section-title h2 {
        font-size: 2.7rem;
    }


    /* ======================================================
       PEDICURE TRUST
    ====================================================== */

    .pedicure-trust {
        width: 100%;
        max-width: 700px;

        padding: 30px 25px;

        box-sizing: border-box;
    }

    /* ======================================================
       PEDICURE LASER
    ====================================================== */

    .laser-treatment {
        padding: 90px 0;
    }

    .laser-treatment-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .laser-treatment-content {
        max-width: 700px;
    }

    .laser-treatment-content h2 {
        font-size: clamp(3rem, 8vw, 4rem);
    }

    .laser-treatment-detail {
        min-height: 380px;
        max-width: 700px;
        width: 100%;
    }


    /* ======================================================
       PRICE LIST
    ====================================================== */

    .price-list {
        width: 100%;
        max-width: 100%;
    }

    .price-category-header {
        grid-template-columns: 35px 1fr;
        gap: 12px;
    }

    .price-category-header h3 {
        font-size: 2rem;
    }

    .price-item {
        align-items: flex-start;
    }

    .price-info {
        padding-right: 10px;
        min-width: 0;
    }

    .price-info h4 {
        font-size: 0.86rem;
    }

    .price-item strong {
        font-size: 1.3rem;
    }


    /* ======================================================
       GENERIC PRICING
    ====================================================== */

    .pricing-item {
        align-items: flex-start;
    }

    .pricing-item-name {
        max-width: 70%;
        min-width: 0;
    }

    .pricing-item-price {
        font-size: 0.95rem;
    }


    /* ======================================================
       GALLERY
    ====================================================== */

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


    /* ======================================================
       FOOTER
    ====================================================== */

    footer {
        padding: 60px 0;
    }

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

    .footer-bottom {
        flex-direction: column;

        gap: 10px;

        text-align: center;

        font-size: 0.82rem;
    }


    /* ======================================================
       FOOTER SOCIALS
    ====================================================== */

    .footer-social {
        align-items: flex-start;
    }

    .social-links {
        gap: 10px;
    }

    .social-links a {
        width: 40px;
        height: 40px;
    }


    /* ======================================================
       BEAUTY HERO
    ====================================================== */

    .beauty-hero {
        min-height: 680px;
    }

    .beauty-hero-content {
        padding: 120px 30px 60px;
    }

    .beauty-hero-content h1 {
        font-size:
            clamp(3rem, 8vw, 4.5rem);
    }


    /* ======================================================
       BEAUTY INTRO
    ====================================================== */

    .beauty-intro {
        padding: 110px 0 90px;
    }


    /* ======================================================
       BEAUTY TRUST
    ====================================================== */

    .beauty-trust {
        padding-bottom: 100px;
    }

    .beauty-trust-grid {
        grid-template-columns: 1fr;
    }

    .beauty-trust-item,
    .beauty-trust-item:first-child,
    .beauty-trust-item:last-child {
        padding: 35px 0;

        border-right: none;

        border-bottom:
            1px solid rgba(75, 65, 75, 0.16);
    }

    .beauty-trust-item:last-child {
        border-bottom: none;
    }


    /* ======================================================
       BEAUTY SERVICES / PRICES
    ====================================================== */

    .beauty-services {
        padding: 110px 0 120px;
    }

    .beauty-services > .container {
        width: min(100% - 40px, 760px);
    }

    .price-category {
        margin-bottom: 90px;
    }

    .price-subcategory {
        margin-top: 45px;
    }


    /* ======================================================
       BEAUTY BOOKING
    ====================================================== */

    .beauty-booking {
        margin-top: 90px;
        padding: 75px 24px;
    }

    .beauty-booking-content h2 {
        font-size:
            clamp(2.6rem, 11vw, 3.5rem);
    }

    .beauty-booking-content p {
        font-size: 0.95rem;
    }

    .beauty-booking-content .button {
        width: 100%;
        max-width: 320px;
    }


    /* ======================================================
       BEAUTY TREATMENTS
    ====================================================== */

    .beauty-treatment,
    .beauty-treatment-reverse {
        width: min(100% - 36px, 700px);

        display: flex;
        flex-direction: column;

        gap: 40px;

        padding: 65px 0;
    }

    /*
       Mobiele volgorde:
       tekst → afbeelding
    */

    .beauty-treatment-content,
    .beauty-treatment-reverse .beauty-treatment-content {
        order: 1;
        max-width: none;
    }

    .beauty-treatment-image,
    .beauty-treatment-reverse .beauty-treatment-image {
        order: 2;

        width: 100%;
        height: 360px;

        overflow: hidden;

        border-radius:
            120px 120px 120px 30px;
    }

    .beauty-treatment-image img,
    .beauty-treatment-reverse .beauty-treatment-image img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .beauty-treatment-content h2 {
        font-size:
            clamp(2.5rem, 10vw, 3.4rem);
    }

    .beauty-treatment-content p {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .beauty-treatment-content .button {
        width: 100%;
        min-width: 0;
    }


    /* ======================================================
       ABOUT PAGE
    ====================================================== */

    .about-hero {
        min-height: 72vh;
    }

    .about-hero-content {
        width: min(100% - 40px, 680px);
        padding-top: 110px;
    }

    .about-hero h1 {
        font-size:
            clamp(3rem, 12vw, 4.5rem);
    }


    /* ------------------------------------------------------
       ABOUT INTRO
    ------------------------------------------------------ */

    .about-intro {
        padding: 80px 0;
    }

    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-intro-image img {
        display: block;

        width: 100%;
        height: 480px;

        object-fit: cover;

        border-radius:
            0 60px 0 60px;
    }


    /* ------------------------------------------------------
       SPECIALTIES
    ------------------------------------------------------ */

    .about-specialties {
        padding: 80px 0;
    }

    .about-specialties .section-title {
        margin-bottom: 50px;
    }

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

    .specialty-card {
        min-height: auto;
        padding: 35px;
    }

    .specialty-number {
        margin-bottom: 30px;
    }


    /* ------------------------------------------------------
       ABOUT SALON
    ------------------------------------------------------ */

    .about-salon {
        padding: 80px 0;
    }

    .about-salon-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-salon-content {
        max-width: none;
    }

    .about-salon-image img {
        display: block;

        width: 100%;
        height: 450px;

        object-fit: cover;

        border-radius:
            60px 0 60px 0;
    }


    /* ------------------------------------------------------
       ABOUT MISSION
    ------------------------------------------------------ */

    .about-mission {
        padding: 80px 0;
    }

    .about-mission-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-mission-image {
        order: 1;
    }

    .about-mission-content {
        order: 2;
        max-width: none;
    }

    .about-mission-image img {
        display: block;

        width: 100%;
        height: 450px;

        object-fit: cover;

        border-radius:
            0 60px 0 60px;
    }


    /* ------------------------------------------------------
       ABOUT CTA
    ------------------------------------------------------ */

    .about-cta {
        padding: 80px 20px;
    }

    .about-cta h2 {
        font-size:
            clamp(2.8rem, 12vw, 4rem);
    }


    /* ------------------------------------------------------
       TESTIMONIALS
    ------------------------------------------------------ */

    .about-testimonials {
        padding: 80px 0;
    }

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

    .testimonial {
        padding: 32px;
    }


    /* ======================================================
       SPRAY TANNING
       MOBILE BASIS
    ====================================================== */

    .spray-tanning-hero {
        min-height: 620px;
    }

    .spray-intro,
    .spray-benefits,
    .sienna-section,
    .spray-care,
    .spray-prices {
        padding: 90px 0;
    }


    /* ------------------------------------------------------
       SPRAY INTRO GRID
    ------------------------------------------------------ */

    .spray-intro-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 50px;

        min-width: 0;
    }

    .spray-intro-text {
        width: 100%;
        max-width: none;

        min-width: 0;
    }


    /* ------------------------------------------------------
       SPRAY INTRO IMAGE
    ------------------------------------------------------ */

    .spray-intro-image {
        position: relative;

        width: 100%;
        height: 480px;

        min-width: 0;

        overflow: hidden;

        box-sizing: border-box;

        border-radius:
            120px 30px 120px 30px;
    }

    .spray-intro-image img {
        display: block;

        width: 100%;
        height: 100%;

        max-width: 100%;

        object-fit: cover;
        object-position: center center;
    }


    /* ------------------------------------------------------
       SIENNA SECTION
    ------------------------------------------------------ */

    .sienna-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 50px;

        min-width: 0;
    }

    .sienna-content {
        width: 100%;
        max-width: none;

        min-width: 0;
    }

    .sienna-image {
        position: relative;

        width: 100%;
        height: 480px;

        min-width: 0;

        overflow: hidden;

        box-sizing: border-box;

        border-radius:
            120px 30px 120px 30px;
    }

    .sienna-image img {
        display: block;

        width: 100%;
        height: 100%;

        max-width: 100%;

        object-fit: cover;
        object-position: center center;
    }


    /* ------------------------------------------------------
       SPRAY BENEFITS
    ------------------------------------------------------ */

    .benefits-grid {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 20px;

        width: 100%;
        min-width: 0;
    }

    .benefit-card {
        min-width: 0;
        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       SPRAY CARE
    ------------------------------------------------------ */

    .care-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 20px;

        width: 100%;
        min-width: 0;
    }

    .spray-benefits .section-title,
    .spray-care .section-title {
        margin-bottom: 50px;
    }


    /* ------------------------------------------------------
       SPRAY CTA
    ------------------------------------------------------ */

    .spray-cta {
        padding: 100px 0;
    }
}


/* ==========================================================
   CONTACT PAGINA
   MAX-WIDTH: 768PX
========================================================== */

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


    /* ------------------------------------------------------
       CONTACT SECTIE
    ------------------------------------------------------ */

    .contact-section {
        width: 100%;

        padding: 80px 20px 70px;

        box-sizing: border-box;

        overflow: hidden;
    }


    /* ------------------------------------------------------
       CONTACT CONTAINER
    ------------------------------------------------------ */

    .contact-section .container {
        width: 100%;
        max-width: 100%;

        margin: 0 auto;
        padding: 0;

        box-sizing: border-box;

        min-width: 0;
    }


    /* ------------------------------------------------------
       CONTACT GRID
       Desktop = 2 kolommen
       Mobiel = onder elkaar
    ------------------------------------------------------ */

    .contact-grid {
        display: flex;

        flex-direction: column;

        gap: 50px;

        width: 100%;
        max-width: 100%;

        min-width: 0;
    }


    /* ------------------------------------------------------
       CONTACT INTRO
    ------------------------------------------------------ */

    .contact-intro {
        width: 100%;
        max-width: 100%;

        padding: 0;

        min-width: 0;

        box-sizing: border-box;
    }

    .contact-intro h1,
    .contact-intro h2 {
        max-width: 320px;

        margin-bottom: 28px;
    }

    .contact-intro p {
        max-width: 320px;

        margin-bottom: 28px;
    }


    /* ------------------------------------------------------
       CONTACT DETAILS
    ------------------------------------------------------ */

    .contact-details {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       CONTACT FORM WRAPPER
    ------------------------------------------------------ */

    .contact-form-wrapper {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        margin: 0;

        padding: 32px 24px;

        box-sizing: border-box;

        overflow: hidden;
    }


    /* ------------------------------------------------------
       FORM
    ------------------------------------------------------ */

    .contact-form {
        display: block;

        width: 100%;
        max-width: 100%;

        min-width: 0;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       FORM GROUP
    ------------------------------------------------------ */

    .contact-form .form-group {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        margin-bottom: 26px;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       LABELS
    ------------------------------------------------------ */

    .contact-form label {
        display: block;

        width: 100%;

        margin-bottom: 9px;

        font-size: 0.85rem;
        line-height: 1.4;
    }


    /* ------------------------------------------------------
       INPUTS
    ------------------------------------------------------ */

    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        display: block;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        padding: 13px 14px;

        box-sizing: border-box;

        font-size: 0.9rem;
        line-height: 1.5;

        border-radius: 0;
    }


    /* ------------------------------------------------------
       TEXTAREA
    ------------------------------------------------------ */

    .contact-form textarea {
        min-height: 150px;

        resize: vertical;
    }


    /* ------------------------------------------------------
       SUBMIT AREA
    ------------------------------------------------------ */

    .contact-form .form-submit {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        margin-top: 8px;

        display: flex;

        justify-content: flex-start;
        align-items: stretch;

        overflow: hidden;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       VERSTUUR BUTTON
    ------------------------------------------------------ */

    .contact-form button,
    .contact-form input[type="submit"] {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 100%;

        min-width: 0;
        min-height: 54px;

        padding: 0 20px;

        box-sizing: border-box;

        white-space: normal;

        font-size: 0.78rem;

        letter-spacing: 0.04em;

        overflow: hidden;
    }


    /* ------------------------------------------------------
       VERPLICHTE VELDEN
    ------------------------------------------------------ */

    .contact-form .form-note {
        width: 100%;
        max-width: 100%;

        margin-top: 18px;

        font-size: 0.75rem;
        line-height: 1.6;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       CONTACT INFO ONDERAAN
    ------------------------------------------------------ */

    .contact-info {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;
    }

    .contact-info-item {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       E-MAIL / ADRES
    ------------------------------------------------------ */

    .contact-details a,
    .contact-details p {
        max-width: 100%;

        overflow-wrap: anywhere;
        word-break: normal;
    }
}


/* ==========================================================
   SMALL MOBILE
   MAX-WIDTH: 600PX
========================================================== */

@media screen and (max-width: 600px) {


    /* ======================================================
       HEADER
    ====================================================== */

    header {
        top: 10px;
    }

    header .container {
        width: calc(100% - 20px);

        min-height: 72px;

        padding: 0 15px;

        border-radius: 18px;
    }


    /* ======================================================
       LOGO
    ====================================================== */

    header .logo img {
        height: 44px;
    }


    /* ======================================================
       HAMBURGER
    ====================================================== */

    .menu-toggle {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }

    .menu-toggle span {
        width: 23px;
    }


    /* ======================================================
       MOBILE MENU
    ====================================================== */

    .nav-menu {
        width: min(320px, 88vw);

        padding-left: 28px;
        padding-right: 28px;
    }


    /* ======================================================
       HERO
    ====================================================== */

    .hero h1 {
        font-size:
            clamp(2.8rem, 13vw, 3.5rem);
    }

    .hero p {
        font-size: 0.95rem;
    }


    /* ======================================================
       GENERAL SECTIONS
    ====================================================== */

    section {
        padding: 60px 0;
    }

    .section-title h2,
    .about h2 {
        font-size: 2.5rem;
    }


    /* ======================================================
       CTA
    ====================================================== */

    .cta {
        padding: 70px 20px;
    }

    .cta h2 {
        font-size: 2.5rem;
    }


    /* ======================================================
       PEDICURE
    ====================================================== */

    .pedicure-intro,
    .pedicure-services {
        padding: 70px 20px;
    }

    .pedicure-intro .section-title h2,
    .pedicure-services .section-title h2 {
        font-size: 2.45rem;
    }

    .pedicure-trust {
        padding: 25px 20px;
    }

    .price-category-header {
        grid-template-columns: 30px 1fr;
        gap: 10px;
    }

    .price-category-header h3 {
        font-size: 1.8rem;
    }

    .price-info h4 {
        font-size: 0.86rem;
    }

    .price-item strong {
        font-size: 1.2rem;
    }

    /* ======================================================
       PEDICURE - LASER
    ====================================================== */
    .laser-treatment {
        padding: 75px 20px;
    }

    .laser-treatment-grid {
        gap: 45px;
    }

    .laser-treatment-content h2 {
        margin-bottom: 25px;
        font-size: clamp(2.7rem, 12vw, 3.6rem);
        line-height: 0.98;
    }

    .laser-treatment-content p {
        font-size: 0.94rem;
        line-height: 1.75;
    }

    .laser-treatment-content .laser-lead {
        font-size: 1rem;
        line-height: 1.7;
    }

    .laser-treatment-button {
        width: 100%;
        max-width: 300px;
        margin-top: 10px;
    }

    .laser-treatment-detail {
        min-height: 340px;
        padding: 40px 30px;
        border-radius: 80px 20px 80px 20px;
    }

    .laser-treatment-detail h3 {
        font-size: clamp(2.5rem, 11vw, 3.2rem);
    }

    /* ======================================================
       PAGE HERO
    ====================================================== */

    .page-hero {
        min-height: 620px;
        height: 85vh;
    }

    .page-hero-content {
        padding-top: 140px;
        padding-bottom: 50px;
    }

    .page-hero-content h1 {
        font-size:
            clamp(2.7rem, 13vw, 3.8rem);
    }


    /* ======================================================
       FOOTER
    ====================================================== */

    footer {
        padding: 55px 20px;
    }


    /* ======================================================
       BEAUTY HERO
    ====================================================== */

    .beauty-hero {
        min-height: 620px;
    }

    .beauty-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(49, 38, 48, 0.72),
                rgba(49, 38, 48, 0.35)
            );
    }

    .beauty-hero-content {
        padding: 120px 22px 50px;
    }

    .beauty-hero-content h1 {
        font-size:
            clamp(2.8rem, 12vw, 4rem);

        line-height: 1;
    }

    .beauty-hero-content p {
        font-size: 0.92rem;
    }


    /* ======================================================
       BEAUTY INTRO
    ====================================================== */

    .beauty-intro {
        padding: 90px 0 75px;
    }

    .beauty-intro .section-title h2,
    .beauty-services .section-title h2 {
        font-size: 44px;
    }


    /* ======================================================
       BEAUTY SERVICES
    ====================================================== */

    .beauty-services {
        padding: 90px 0 100px;
    }

    .beauty-services > .container {
        width: calc(100% - 32px);
    }

    .beauty-services > .container > .section-title {
        margin-bottom: 75px;
    }

    .price-category-header h3 {
        font-size: 36px;
    }

    .price-item {
        min-height: auto;

        padding: 23px 0;

        align-items: flex-start;
    }

    .price-info h4 {
        font-size: 0.88rem;
    }

    .price-info span {
        font-size: 0.78rem;
    }

    .price-item strong {
        font-size: 1.2rem;
    }

    .price-subcategory {
        margin-top: 45px;
    }


    /* ======================================================
       BEAUTY BOOKING
    ====================================================== */

    .beauty-booking {
        margin-top: 70px;

        padding: 65px 22px;
    }

    .beauty-booking h2 {
        font-size: 44px;
    }


    /* ======================================================
       BEAUTY TREATMENTS
    ====================================================== */

    .beauty-treatment,
    .beauty-treatment-reverse {
        width: calc(100% - 32px);

        gap: 35px;

        padding: 55px 0;
    }

    .beauty-treatment-image,
    .beauty-treatment-reverse .beauty-treatment-image {
        width: 100%;
        height: 360px;

        border-radius:
            80px 20px 80px 20px;
    }

    .beauty-treatment-content h2 {
        font-size:
            clamp(2.4rem, 10vw, 3.2rem);
    }

    .beauty-treatment-content p {
        font-size: 0.95rem;
        line-height: 1.7;
    }


    /* ======================================================
       ABOUT
    ====================================================== */

    .about-hero {
        min-height: 650px;
    }

    .about-hero-content {
        width: calc(100% - 40px);
    }

    .about-hero h1 {
        font-size: 3.2rem;
    }

    .about-intro-image img,
    .about-salon-image img,
    .about-mission-image img {
        height: 380px;
    }

    .about-intro-content h2,
    .about-salon-content h2,
    .about-mission-content h2 {
        font-size: 3rem;
    }

    .specialty-card {
        padding: 30px;
    }

    .about-cta {
        padding: 70px 20px;
    }


    /* ======================================================
       SPRAY TANNING
    ====================================================== */

    .spray-tanning-hero {
        min-height: 560px;
    }

    .spray-intro,
    .spray-benefits,
    .sienna-section,
    .spray-care,
    .spray-prices {
        padding: 75px 0;
    }


    /* ------------------------------------------------------
       SPRAY INTRO
    ------------------------------------------------------ */

    .spray-intro-grid {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 40px;

        min-width: 0;
    }

    .spray-intro-text {
        width: 100%;
        max-width: none;

        min-width: 0;
    }

    .spray-intro-image {
        width: 100%;
        height: 390px;

        min-width: 0;

        border-radius:
            70px 20px 70px 20px;
    }

    .spray-intro-image img {
        display: block;

        width: 100%;
        height: 100%;

        max-width: 100%;

        object-fit: cover;
        object-position: center center;
    }


    /* ------------------------------------------------------
       SIENNA
    ------------------------------------------------------ */

    .sienna-grid {
        grid-template-columns: 1fr;

        gap: 40px;

        min-width: 0;
    }

    .sienna-content {
        width: 100%;
        max-width: none;

        min-width: 0;
    }

    .sienna-image {
        width: 100%;
        height: 390px;

        min-width: 0;

        border-radius:
            70px 20px 70px 20px;
    }

    .sienna-image img {
        display: block;

        width: 100%;
        height: 100%;

        max-width: 100%;

        object-fit: cover;
        object-position: center center;
    }


    /* ------------------------------------------------------
       SPRAY BENEFITS
    ------------------------------------------------------ */

    .benefits-grid {
        grid-template-columns: 1fr;

        gap: 16px;

        width: 100%;
        min-width: 0;
    }

    .benefit-card {
        width: 100%;

        min-width: 0;

        padding: 35px 30px;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       SPRAY CARE
    ------------------------------------------------------ */

    .care-grid {
        grid-template-columns: 1fr;

        gap: 16px;

        width: 100%;
        min-width: 0;
    }

    .care-card {
        width: 100%;

        min-width: 0;

        padding: 35px 30px;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       SPRAY PRICES
    ------------------------------------------------------ */

    .price-item {
        align-items: flex-start;

        gap: 20px;

        padding: 25px 0;

        min-width: 0;
    }

    .price {
        font-size: 1.4rem;
    }

    .price-info h3 {
        font-size: 0.92rem;
    }


    /* ------------------------------------------------------
       SPRAY CTA
    ------------------------------------------------------ */

    .page-cta-content h2 {
        font-size: 3.3rem;
    }
}


/* ==========================================================
   EXTRA SMALL MOBILE
   MAX-WIDTH: 480PX
========================================================== */

@media screen and (max-width: 480px) {


    /* ======================================================
       HEADER
    ====================================================== */

    header .container {
        width: calc(100% - 16px);

        padding: 0 14px;
    }


    /* ======================================================
       LOGO
    ====================================================== */

    header .logo img {
        height: 42px;
    }


    /* ======================================================
       HAMBURGER
    ====================================================== */

    .menu-toggle {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }

    .menu-toggle span {
        width: 22px;
    }


    /* ======================================================
       MOBILE MENU
    ====================================================== */

    .nav-menu {
        width: 88vw;

        padding-left: 28px;
        padding-right: 28px;
    }

    .nav-menu a {
        font-size: 1rem;
    }


    /* ======================================================
       PAGE HERO
    ====================================================== */

    .page-hero-content h1 {
        font-size: 2.8rem;
    }


    /* ======================================================
       GENERAL HEADINGS
    ====================================================== */

    .section-title h2,
    .about h2 {
        font-size: 2.3rem;
    }

    .cta h2 {
        font-size: 2.3rem;
    }


    /* ======================================================
       SPRAY TANNING
    ====================================================== */

    .spray-intro-image,
    .sienna-image {
        height: 350px;

        border-radius:
            60px 18px 60px 18px;
    }

    .spray-intro-image img,
    .sienna-image img {
        display: block;

        width: 100%;
        height: 100%;

        max-width: 100%;

        object-fit: cover;
        object-position: center center;
    }

    .benefit-card,
    .care-card {
        padding: 30px 24px;
    }

    .price-item {
        gap: 15px;
    }

    .price {
        font-size: 1.3rem;
    }

    .page-cta-content h2 {
        font-size: 2.8rem;
    }

    /* ======================================================
       PEDICURE - LASER
    ====================================================== */

    .laser-treatment {
        padding: 65px 20px;
    }

    .laser-treatment-content h2 {
        font-size: 2.8rem;
    }

    .laser-treatment-content p {
        font-size: 0.92rem;
    }

    .laser-treatment-button {
        width: 100%;
        max-width: none;
    }

    .laser-treatment-detail {
        min-height: 310px;
        padding: 35px 25px;
        border-radius: 65px 18px 65px 18px;
    }

    .laser-treatment-detail h3 {
        font-size: 2.7rem;
    }

    /* ======================================================
       CONTACT
    ====================================================== */

    .contact-section {
        padding: 65px 20px 60px;
    }

    .contact-grid {
        gap: 40px;
    }

    .contact-form-wrapper {
        width: 100%;
        max-width: 100%;

        padding: 28px 20px;

        box-sizing: border-box;
    }

    .contact-intro h1,
    .contact-intro h2 {
        font-size:
            clamp(2.8rem, 13vw, 4rem);

        line-height: 1.05;
    }

    .contact-form .form-group {
        margin-bottom: 22px;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        padding: 12px 13px;

        box-sizing: border-box;
    }

    .contact-form textarea {
        min-height: 140px;
    }

    .contact-form .form-submit {
        width: 100%;
        max-width: 100%;

        overflow: hidden;
    }

    .contact-form button,
    .contact-form input[type="submit"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        padding: 0 20px;

        box-sizing: border-box;
    }
}