/*
Theme Name: Lu's Residential Cleaning
Description: A custom WordPress theme for Lu's Residential Cleaning based on Figma design.
Version: 1.0
Author: Flavia Sigoli
*/

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: #000000;
    background-color: #FFFFFF;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}
.text-paragraph-1{
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 24px */
    letter-spacing: -0.8px;
}
.caption {
    font-family: 'Geist Mono', monospace;
    font-weight: 700;
    font-size: 14px;
}

.button-text {
    font-family: 'Geist Mono', monospace;
    font-weight: 500;
    font-size: 14px;
}

.paragraph-1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
}

.paragraph-2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2em;
    letter-spacing: -0.03em;
}

.paragraph-1-medium {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 100%; /* 20px */
    letter-spacing: -0.4px;    
}

.header-1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 100%;
    letter-spacing: -0.04em;
}

.header-2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 80px;
    line-height: 100%;
    letter-spacing: -0.05em;
}

.header-3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 56px;
    line-height: 100%;
    letter-spacing: -0.03em;
}

.header-4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: -0.03em;
}

.header-5 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: -0.03em;
}

.style-td8m1x {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 80px;
    line-height: 1.1em;
    letter-spacing: -0.05em;
    color: #FFFFFF;
}

.style-f0w7ug {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.02em;
}

.style-1mh-cof {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 21.921px;
    text-transform: uppercase;
    text-align: center;
}

.style-5o3ml8 {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 14.695px;
}

.style-8csl0j {
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 17.814px;
}

.style-6fdjav {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 12.47px;
}

.style-satii8 {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.45em;
    letter-spacing: -0.005em;
}

.style-ru0tsm {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5em;
    letter-spacing: -0.005em;
}

/* Colors */
.text-button-text { color: #FFFFFF; }
.text-paragraph-2 { color: #6C6C6C; }
.text-headline { color: #000000; }
.text-paragraph-1 { color: #000000; }
.text-paragraph { color: #011B40; }
.fill-8cj3wx { background: linear-gradient(180deg, #FFFFFF 0%, #E1A4A0 100%); }
.fill-lt4no5 { background: linear-gradient(154deg, #E1A4A0 0%, #000000 39%, #E1A4A0 100%); }
.fill-iknhp9 { background: linear-gradient(135deg, #E1A4A0 0%, #000000 28%, #000000 80%, #E1A4A0 100%); }
.background-background-1 { background-color: #FFFFFF; }
.background-background-4 { background-color: #E1A4A0; }
.background-background-5 { background-color: #000000; }
.sticker { background-color: #BD7E7B; }
.fill-sizjo9 { color: #0E294A; }

/* Layout utilities */
.container {
    width: 100%;
    max-width: 1220px !important;
    margin: 0 auto;
}

.flex {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.align-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-5 { gap: 5px; }
.gap-7 { gap: 7px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-11 { gap: 11px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-22 { gap: 22px; }
.gap-24 { gap: 24px; }
.gap-29 { gap: 29px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.gap-48 { gap: 48px; }
.gap-56 { gap: 56px; }
.gap-64 { gap: 64px; }
.gap-70 { gap: 70px; }
.gap-80 { gap: 80px; }
.gap-96 { gap: 96px; }

.padding-20 { padding: 20px; }
.padding-32 { padding: 32px; }
.padding-40 { padding: 40px; }
.padding-60 { padding: 60px 64px; }
.padding-70 { padding: 70px 0; }
.padding-80 { padding: 80px 20px; }
.padding-120 { padding: 120px 20px; }
.padding-140 { padding: 140px 20px 0; }

.text-center { text-align: center; }
.text-left { text-align: left; }

/* Button styles */
.btn-primary {
    background-color: #E1A4A0;
    color: #000000;
    padding: 16px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.btn-primary:hover {
    background-color: #D19490;
}

.btn-default {
    background-color: transparent;
    color: #000000;
    padding: 16px;
    border: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.btn-default:hover {
    background-color: #F5F5F5;
}

/* Form styles */

.form-input {
    width: 100%;
    padding: 11px;
    border: 1px solid #BD7E7B;
    background-color: #FFFFFF;
    font-family: 'Urbanist', sans-serif;
    font-size: 14.7px;
}

.form-input:hover,
.form-input:focus {
    border-color: #E1A4A0;
    outline: none;
    box-shadow: 0 0 0 3px rgba(225, 164, 160, 0.2);
}

.form-label {
    display: block;
    margin-bottom: 7px;
    color: #BD7E7B;
    font-family: 'Urbanist', sans-serif;
    font-size: 14.7px;
}

/* Hero Section */
.hero {
    background: linear-gradient(154deg, #E1A4A0 0%, #000000 39%, #E1A4A0 100%);
    position: relative;
}

.hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(154deg, #E1A4A0 0%, #000000 39%, #E1A4A0 100%) no-repeat;
}

.hero .container {
    max-width: none;
    position: relative;
    z-index: 1;
}

.hero-content, .hero-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-bottom: 145px;
}

.hero-logo {
    max-width: 204px;
    object-fit: contain;
    margin: auto;
}

.hero-text {
    text-align: center;
}

.hero-text h1 {
    background: linear-gradient(180deg, #FFFFFF 0%, #E1A4A0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-image-wrapper {
    position: absolute;
    bottom: -270px;
    width: 100%;
    max-width: 960px;
    border-radius: 24px;
    overflow: hidden;
    border: 2px solid #000000;
}

.hero-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(211, 211, 211, 0.2);
    border-radius: 24px;
    pointer-events: none;
}

.hero-image {
    width: 100%;
    max-height: 608px;
    object-fit: cover;
    display: block;
}

/* Services Section */
.section-header {
    margin-bottom: 40px;
}

.services-container{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.services{
    padding-top: 350px
}

.services-section-header {
    max-width: 872px;
    text-align: center;
}
.services-section-header .header-4{
    max-width: 400px;
}
.service-item {
    justify-content: space-between;
    display: flex;
    height: 620px;
    padding: 40px 0;
}
.commercial-card{
    height: 695px;
}
.service-item-wrap{
    border-bottom: 1px solid #DBE0EC;
}
.service-item img {
    width: 100%;
    width: 693px;
    height: 100%;
    max-height: 618px;
    object-fit: cover;
}

.detail-item {
    padding: 24px 0;
    border-top: 1px solid #DBE0EC;
}

.service-content{
    max-width: 487px;
}

/* Frequency Options */
.frequency {
    display: flex;
    max-width: 900px;
    margin: auto;
    justify-content: space-between;
    padding: 0 30px 40px;
}
.frequency-service{
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
}
.frequency-service span{
    max-width: 80px;
    line-height: 100% !important;
}
/* About Section */
.about-content {
    align-items: baseline;
}

.about-text {
    max-width: 534px;
}

.about img {
    width: 569px;
    height: 569px;
    object-fit: cover;
}

/* Why Choose Us Section */
#why-choose {
    background: linear-gradient(154deg, #E1A4A0 0%, #000000 39%, #E1A4A0 100%);}
.why-choose{
    padding: 80px 20px;
    gap: 24px;
    display: flex;
    flex-direction: column;
}

.why-choose-header {
    margin-bottom: 40px;
}

.header-choose{
    text-align: center;
}

.why-choose-text {
    max-width: 731px;
    text-align: center;
    margin: 0 auto;
}

.value-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #E1A4A0 100%);
    padding: 40px;
    border-radius: 16px;
    flex: 1;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, background 0.35s ease;
    cursor: default;
}

.value-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 24px 48px rgba(189, 126, 123, 0.35);
    background: linear-gradient(160deg, #FFFFFF 0%, #BD7E7B 100%);
}

.value-card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Gallery Section */
.header-gl{
    max-width: 290px;
    text-align: center;
}
/* Gallery Grid / Slider */
.gallery-grid {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    cursor: grab;
    /* scroll-snap-type disabled for autoplay */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
    -webkit-user-select: none;
}

.gallery-grid::-webkit-scrollbar {
    display: none;
}

.gallery-grid.grabbing {
    cursor: grabbing;
    scroll-snap-type: none;
}

.gallery-item {
    display: flex;
    flex: 0 0 380px;
    max-width: 380px;
    overflow: hidden;
    scroll-snap-align: start;
}

.gallery-item img {
    max-width: 380px;
    width: 380px;
    height: 420px;
    object-fit: cover;
    display: block;
    pointer-events: none;
    border-radius: 15.385px;
}

/* .gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(229, 176, 173, 0.4);
    pointer-events: none;
} */

.gallery {
    padding: 70px 0;
}

.hero-container {
    padding: 140px 20px 0;
    max-width: none;
    position: relative;
    z-index: 1;
    gap: 56px;
    justify-content: center;
    display: flex;
}

.header-text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: -8px;
}

.about-image {
    width: 569px;
    height: 569px;
    object-fit: cover;
}

/* ig-frame */

.ig-iframe iframe{
    display: flex;
    width: 900px; 
    height: 760px;
    margin: auto;
}
@media screen and (max-width:980px) {
    .ig-iframe iframe{
        max-width: 500px; 
        height: 495px;
    }
    .follow-container{
        padding: 0 !important;
    }
}
@media screen and (max-width:580px) {
    .ig-iframe iframe{
        width:100% !important;
        width: 390px !important;
        height: 410px;
    }    
}

/* Form styles */
.form-group-full {
    flex: 1;
}

/* Footer styles */
.footer {
    background: linear-gradient(135deg, #E1A4A0 0%, #000000 28%, #000000 80%, #E1A4A0 100%);
    padding: 30px 64px;
    border-radius: 30px;
    margin: 0 20px 20px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.footer-nav {
    display: flex;
    gap: 40px;
}

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

.nav-column h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12px;
    line-height: 1.3em;
}

.nav-column a,
.nav-column span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14.79px;
    line-height: 1.5em;
}

.footer-bottom {
    margin-top: 32px;
}

.footer-bottom p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2em;
    letter-spacing: -0.04em;
}

.text-tiny-extra-bold {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12px;
    line-height: 1.3em;
}

.style-27juox {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14.79px;
    line-height: 1.5em;
}

.style-ecr3t7 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2em;
    letter-spacing: -0.04em;
}

/* Reviews Section */
.review-card {
    background: #FFFFFF;
    padding: 32px;
    border-radius: 16px;
    border: 1px solid rgba(1, 27, 64, 0.2);
    box-shadow: 0 12px 32px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.02);
    width: 336px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

.reviewer {
    display: flex;
    gap: 16px;
    align-items: center;
}

.reviewer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}

.reviewer-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reviewsgrid{
    display: flex;
    justify-content: center;
}

/* Social icon hover */
.footer-social-icon {
    display: inline-flex;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.footer-social-icon svg circle {
    transition: fill 0.2s ease;
}

.footer-social-icon:hover {
    transform: scale(1.1);
}

.footer-social-icon:hover svg circle {
    fill: #FFFFFF;
}

/* Follow Us Section */
.follow-us {
    padding: 60px 64px;
}

.social-gallery {
    display: flex;
    justify-content: stretch;
    gap: 32px;
}

.social-placeholder {
    flex: 1;
    background: rgba(229, 176, 173, 0.4);
}

/* Contact Section */
.contact {
    padding: 80px 300px;
    border-top: 0.5px solid #E9E9E9;
}

.contact-text {
    max-width: 669px;
    text-align: center;
}

.contact-form {
    background: #FFFFFF;
    padding: 40px 29px;
    border-radius: 24px;
    border: 2px solid #BD7E7B;
    backdrop-filter: blur(128px);
    margin-top: 40px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

.form-row {
    gap: 29px;
    display: flex;
}

.form-input-wrap {
    padding: 11px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.form-input-icon {
    font-size: 22px;
}

.form-input-field {
    border: none;
    flex: 1;
    background: transparent;
    outline: none;
    font-family: 'Urbanist', sans-serif;
    font-size: 14.7px;
}

.contact-info {
    display: flex;
    justify-content: space-between;
    gap: 29px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    justify-content: center;
}
.info-header{
    display: flex;
    align-items: center;
    justify-content: center;
}
.info-header span{
    display: flex;
    align-items: center;
    gap: 5px;
    text-align: center;
    justify-content: center;
}

.info-icon {
    font-size: 21px;
}
.submit-form{
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-submit {
    align-self: center;
}

/* Form sections (BOX) */
.form-section { border: 1.5px solid #BD7E7B; border-radius: 12px; padding: 20px; margin-bottom: 0; }
.form-section-title { font-size: 13px; font-weight: 700; color: #BD7E7B; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; font-family: 'Urbanist', sans-serif; }

/* Radio cards (Service Type / Property Details) */
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.radio-card input[type="radio"] { display: none; }
.radio-card label { display: block; padding: 12px 14px; border: 1.5px solid #BD7E7B; border-radius: 8px; cursor: pointer; font-family: 'Urbanist', sans-serif; font-size: 14px; color: #BD7E7B; transition: background .2s, color .2s; }
.radio-card input[type="radio"]:checked + label { background: #E1A4A0; color: #000; }

/* Home Areas rows */
.area-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 0.5px solid #E9E9E9; }
.area-row:last-child { border-bottom: none; }
.area-label { font-family: 'Urbanist', sans-serif; font-size: 14px; color: #BD7E7B; }
.area-select { border: 1px solid #BD7E7B; padding: 5px 8px; font-family: 'Urbanist', sans-serif; font-size: 14px; background: #fff; color: #BD7E7B; border-radius: 4px; }
.yes-no { display: flex; gap: 16px; align-items: center; }
.yes-no label { display: flex; align-items: center; gap: 5px; font-family: 'Urbanist', sans-serif; font-size: 14px; color: #BD7E7B; cursor: pointer; }

/* Pets row */
.pets-row { display: flex; align-items: center; justify-content: space-between; }
.pets-label { font-family: 'Urbanist', sans-serif; font-size: 14.7px; font-weight: 600; color: #BD7E7B; }

/* Areas Section */
.areas {
    display: flex;
    max-width: 1200px;
    background: linear-gradient(135deg, #E1A4A0 0%, #000000 28%, #000000 80%, #E1A4A0 100%);
    padding: 64px;
    border-radius: 30px;
    margin: auto;
}

.areas .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 96px;
}

.header-areas{
    display: flex;
}

.areas-content {
    width: 100%;
    display: flex;
    gap: 48px;
    justify-content: space-between;
}
.ulareas{
    display: flex;
    gap: 20px;
}
.areas-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px 0;
}

.areas-list li {
    display: inline;
    color: var(--Text-Button-text, #FFF);
    font-size: 16px;
    font-weight: 400;
    line-height: 120%; /* 19.2px */
    letter-spacing: -0.64px;
}

.areas-list li::before {
    content: "\2022";
    margin: 0 8px;
}

/* .areas-list li:first-child::before {
    display: none;
} */

.areas-map iframe {
    border: none;
    width: 644px;
    height: 446px;
}

/* Header text negative gap */
.header-text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: -8px;
}

/* Section headers with proper alignment */
.section-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: auto;
}

/* Follow Us Section */
.follow-us {
    padding: 60px;
}

.follow-icon {
    width: 29px;
    height: 29px;
}

.social-gallery {
    gap: 32px;
}

.social-placeholder {
    flex: 1;
    background: rgba(229, 176, 173, 0.4);
}

.social-placeholder:nth-child(1) { height: 411px; }
.social-placeholder:nth-child(2) { height: 360px; }
.social-placeholder:nth-child(3) { height: 251px; }
.social-placeholder:nth-child(4) { height: 300px; }
.social-placeholder:nth-child(5) { height: 162px; }
.social-placeholder:nth-child(6) { height: 222px; }

/* Contact Section */
.contact {
    border-top: 0.5px solid #E9E9E9;
}
.section-header-ct{
    width: 100%;
}
.header-ct{
    max-width: 350px;
    text-align: center;
}

.contact-text {
    max-width: 669px;
    text-align: center;
}

.contact-form {
    background: #FFFFFF;
    padding: 40px 29px;
    border-radius: 24px;
    border: 2px solid #BD7E7B;
    backdrop-filter: blur(128px);
    margin-top: 40px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.form-row {
    gap: 29px;
}

.form-input-wrap {
    padding: 11px;
}

.form-input-icon {
    font-size: 22px;
}

.form-input-field {
    border: none;
    flex: 1;
}

.info-icon {
    font-size: 21px;
}

/* ============================================
   TABLET  (769px – 1024px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Typography */
    .header-2    { font-size: 60px; }
    .header-3    { font-size: 40px; }
    .header-4    { font-size: 32px; }
    .header-5    { font-size: 26px; }
    .style-td8m1x { font-size: 60px; }

    /* Padding utilities */
    .padding-140 { padding: 80px 24px 0; }
    .padding-120 { padding: 80px 24px; }
    .padding-80  { padding: 60px 24px; }
    .padding-60  { padding: 40px 24px; }

    /* Hero */
    .hero-image-wrapper {
        max-width: 700px;
        bottom: -200px;
    }
    .hero-text{
        margin-bottom: 50px;
    }
    .services { padding-top: 250px; }

    /* Services – stack image above content */
    .service-item {
        flex-direction: column !important;
        height: auto !important;
        gap: 24px !important;
        padding: 40px 24px;
    }
    .commercial-card { height: auto !important; }
    .service-item img {
        width: 100% !important;
        height: 380px !important;
        object-fit: cover;
    }
    .service-content { max-width: 100% !important; }

    /* Frequency */
    .frequency {
        flex-wrap: wrap;
        gap: 32px !important;
        justify-content: center;
    }

    /* About */
    /* .about .container { flex-direction: column; }
    .about-text { max-width: 100%; }
    .about img,
    .about-image {
        width: 600px !important;
        height: 500px !important;
        object-fit: cover;
        align-self: baseline;
    } */

    /* Values */
    .value-modules { flex-direction: column; gap: 16px; }
    .value-card { min-height: auto; }

    /* Areas */
    .areas { padding: 48px 40px !important; 
        margin: 0 20px 20px;}
    .areas .container { flex-direction: column; gap: 40px; }
    .areas-content { flex-direction: column; gap: 24px; }
    .areas-map iframe { width: 100% !important; height: 350px !important; }

    /* Contact */
    .contact { padding: 80px 40px !important; }
    .contact-form { max-width: 100%; }
    .form-row { flex-direction: column; gap: 16px; }

    /* Follow Us */
    .follow-us { padding: 40px 30px !important; }
    .social-gallery { flex-wrap: wrap; gap: 20px; }
    .social-placeholder { flex: 0 0 calc(33.333% - 14px); }
    .ulareas {
        gap: 8px;
        padding: 0 20px;
        justify-content: center;
    }
}

/* ============================================
   MOBILE  (≤ 768px)
   Base: Figma Mobile frame – 375 px
   ============================================ */
@media (max-width: 768px) {

    .container { padding: 0 20px; }

    /* ---- Typography ---- */
    .header-1     { font-size: 24px; }
    /* Figma style_V4UGFA → fontSize 40 */
    .header-2     { font-size: 40px; }
    .header-3     { font-size: 28px; }
    .header-4     { font-size: 32px; }
    .header-5     { font-size: 24px; }
    .style-td8m1x { font-size: 40px; }
    .paragraph-2  { font-size: 18px; }
    .paragraph-1-medium { font-size: 18px; }

    /* ---- Padding utilities ---- */
    .padding-140 { padding: 120px 20px 0; }
    .padding-120 { padding: 60px 20px; }
    .padding-80  { padding: 60px 20px; }
    .padding-60  { padding: 40px 20px; }
    .padding-40  { padding: 30px 20px; }

    /* ---- Gap utilities ---- */
    .gap-96 { gap: 48px; }
    .gap-80 { gap: 40px; }
    .gap-64 { gap: 32px; }
    .gap-56 { gap: 32px; }
    .gap-70 { gap: 32px; }

    /* ---- Navigation ---- */
    /* nav-menu hidden on mobile; hamburger handled in header.css */
    .nav-menu { display: none; }
    .btn-primary.btntext { font-size: 14px; padding: 12px 16px; }

    /* ---- Hero ---- */
    /* Figma layout_6TUCPQ: column, gap 32px, padding 120px 20px 0 */
    .hero-container {
        padding: 120px 20px 0;
        flex-direction: column;
        gap: 32px;
    }
    .hero-content {
        gap: 24px;
        margin-bottom: 0;
    }
    
    .hero-text h1 {
     font-size: 52px;
     padding-top: 10px;
    }
    .hero-text { gap: 16px;
        margin-bottom: 150px;
    }
    .hero-text .paragraph-2{
        font-weight: 400;
        line-height: 120%; /* 21.6px */
        letter-spacing: -0.54px;
    }
    .hero-logo  { max-width: 150px; }

    /* Hero image: flow normally (not absolute) at height 212px */
    .hero-image-wrapper {
        max-width: 95%;
        width: 100%;
        bottom: -110px;
        /* border-radius: 0; */
        border-left: none;
        border-right: none;
        margin-top: 32px;
    }

    .hero-image {
        height: 212px !important;
        width: 100%;
        object-fit: cover;
    }

    /* ---- Services ---- */
    /* No 350px push-down needed; hero is in-flow on mobile */
    .services { padding-top: 160px; }
    .services-container { gap: 0; }
    .services-section-header {
        max-width: 100%;
        padding-bottom: 40px;
        border-bottom: 1px solid #DBE0EC;
    }
    .services-section-header, .header-choose, .why-choose-text, .header-gl, .section-header-center, .follow-header, .contact-text{
        text-align: start;
        align-items: baseline;
        width: 100%;
    }
    .services-section-header .header-4 {
        max-width: 100%;
        font-size: 36px;
    }

    /* Figma layout_00RQ0G: column, gap 40px, padding 40px 30px */
    .service-item {
        flex-direction: column !important;
        height: auto !important;
        padding: 40px 0 !important;
        gap: 24px !important;
    }
    .commercial-card { height: auto !important; }
    .service-item img {
        width: 100% !important;
        height: 250px !important;
        object-fit: cover;
    }
    .service-content {
        max-width: 100% !important;
        width: 100%;
        padding: 0;
    }

    /* Frequency – 2 per row on mobile */
    .frequency {
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px !important;
        padding: 0 20px 32px !important;
    }
    .freq-item {
        width: calc(50% - 12px);
        align-items: center;
    }

    /* ---- About ---- */
    /* Figma layout_QL6DVU: column, gap 40px; image height 315px */
    .about .container {
        flex-direction: column;
        gap: 0;
        padding: 0 !important;
    }
    .about-content {
        flex-direction: column !important;
        padding: 0 0 40px !important;
    }
    .about-text {
        max-width: 100%;
        padding: 0;
    }
    .about img,
    .about-image {
        width: 100% !important;
        height: 370px !important;
    }

    /* ---- Why Choose Us ---- */
    /* Figma layout_PQ2Z33: column, padding 80px 20px, gap 40px */
    .why-choose { padding: 80px 20px; gap: 32px; }
    .why-choose-text { max-width: 100%; }

    /* Value cards – Figma layout_08OEV5: column, gap 16px; each card 217px */
    .value-modules {
        flex-direction: column;
        gap: 16px !important;
    }
    .value-card {
        padding: 40px;
        min-height: 217px;
    }

    /* ---- Gallery ---- */
    /* Figma layout_0SQZZQ: row scroll, gap 12px, padding 32px 8px */
    .gallery { padding: 40px 0; }
    .gallery-grid { padding: 0 8px; }
    .gallery-grid .gallery-item {
        flex: 0 0 75%;
        min-width: 75%;
    }
    .gallery-item img {
        max-width: 100%;
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }

    /* ---- Reviews ---- */
    .review-cards {
        flex-direction: column;
        align-items: center;
    }
    .review-card {
        width: 100%;
        max-width: 340px;
    }

    /* ---- Follow Us ---- */
    /* Figma layout_2CJE1K: column, padding 10px 30px */
    .follow-us { padding: 40px 20px !important; }
    .social-gallery {
        flex-wrap: wrap;
        gap: 12px;
    }
    .social-placeholder { flex: 0 0 calc(33.333% - 8px); }
    .social-placeholder:nth-child(1) { height: 180px; }
    .social-placeholder:nth-child(2) { height: 158px; }
    .social-placeholder:nth-child(3) { height: 110px; }
    .social-placeholder:nth-child(4) { height: 132px; }
    .social-placeholder:nth-child(5) { height:  72px; }
    .social-placeholder:nth-child(6) { height:  98px; }

    /* ---- Contact ---- */
    /* Figma layout_KU1AG4: column, padding adjusted to 80px 20px for mobile */
    .contact { padding: 80px 20px !important; }
    .contact .container{padding: 0;}
    .contact-text { max-width: 100%; }
    .contact-form {
        max-width: 100%;
        padding: 40px 20px;
    }
    .header-ct{
        max-width: 350px;
        text-align: start;
    }
    /* Figma layout_17D4E8 form: width 329px on mobile */
    .form-row {
        flex-direction: column;
        gap: 16px !important;
    }
    .contact-info {
        flex-direction: column;
        gap: 20px;
        margin-top: 140px;
    }
    .submit-form{
        bottom: 240px;
        left: 0;
        right: 0;
        position: absolute;
    }
    .form-submit{
        margin-top: 0px;
    }
    /* ---- Areas ---- */
    /* Figma layout_U8HNH4 / layout_U59JGW: column, padding 60px 20px */
    .areas {
        margin: 0 20px !important;
        padding: 60px 0 !important;
        border-radius: 20px !important;
    }
    .header-areas .header-4{
        font-size: 24px;
        text-align: center;
    }
    .areas .container {
        flex-direction: column;
        gap: 40px;
    }
    .areas-content {
        flex-direction: column;
    }
    .areas-list { flex-direction: column; gap: 4px; }
    .areas-map iframe {
        width: 100% !important;
        height: 260px !important;
    }
    .ulareas {
        gap: 8px;
        justify-content: center;
    }
    .ulareas ul li{
        white-space: nowrap
    }
}