/*
 * Lucy’s Sitter & Co.
 * Main site stylesheet
 *
 * Organization:
 * 1. Variables & global styles
 * 2. Navigation
 * 3. Hero
 * 4. Shared components
 * 5. About / Services
 * 6. FAQ
 * 7. Reviews / Referral
 * 8. Booking / Form / Modal
 * 9. Footer
 * 10. Responsive styles
 */

/* =========================
   ROOT
========================= */

:root{
--navy:#4B548B;
--sky:#87CFDC;
--peach:#FDD3BD;
--coral:#F99C7E;
--linen:#F8F6F2;
--dark:#2E2E2E;
}


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

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

body{
font-family:'Montserrat',sans-serif;
background:var(--linen);
color:var(--dark);
line-height:1.7;
}

h1,h2,h3,h4{
font-family:'Poppins',sans-serif;
color:var(--navy);
}

section{
padding:100px 8%;
}

@media (max-width: 480px) {
  h2 {
    text-align: center;
  }
}


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

nav{
    position:fixed;
    top:0;
    width:100%;
    background:white;
    padding:20px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
    z-index:1000;
}


/* LOGO */

.logo{
    font-size:1.4rem;
    font-weight:700;
    font-family:'Poppins', sans-serif;
    color:var(--navy);
}


/* NAV LINKS */

.nav-links{
    display:flex;
    gap:28px;
    align-items:center;
}

.nav-links a{
    position:relative;

    text-decoration:none;

    color:var(--navy);

    font-family:'Montserrat', sans-serif;
    font-weight:500;
    font-size:1rem;

    padding:8px 0;

    transition:.3s ease;
}


/* PEACH UNDERLINE */

.nav-links a:not(.nav-cta)::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:2px;

    background:var(--coral);

    transition:.3s ease;
}


/* HOVER */

.nav-links a:not(.nav-cta):hover{
    color:var(--coral);
}

.nav-links a:not(.nav-cta):hover::after{
    width:100%;
}


/* ACTIVE */

.nav-links a.active{
    color:var(--coral);
}

.nav-links a.active::after{
    width:100%;
}


/* =========================
   BOOK A MEET & GREET
========================= */

.nav-links .nav-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:12px 22px;

    background:var(--coral);
    color:white;

    border-radius:40px;

    font-family:'Montserrat', sans-serif;
    font-weight:600;

    transition:.3s ease;
}


/* BUTTON HOVER */

.nav-links .nav-cta:hover{
    background:var(--navy);
    color:white;

    transform:translateY(-2px);
}


/* NO UNDERLINE ON BUTTON */

.nav-links .nav-cta::after{
    display:none !important;
}


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

.menu-toggle{
    display:none;

    background:none;
    border:none;

    font-size:2rem;

    color:var(--navy);

    cursor:pointer;
}






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

.hero{
    height:auto;
    min-height:auto;

    display:flex;
    flex-direction:column;

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

    text-align:center;

    background:linear-gradient(to right,var(--linen),#ffffff);

    padding:140px 8% 80px;
}

.hero-image{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;

    margin-bottom:30px;
}

.hero-image img{
    width:100%;
    max-width:220px;
    height:auto;
    display:block;
}

.hero-text{
    max-width:700px;
}

.hero h1{
    font-size:3.5rem;
    margin-bottom:20px;
    line-height:1.1;
}

.hero p{
    font-size:1.1rem;
    margin-bottom:30px;
}

.btn{
display:inline-block;
padding:14px 28px;
background:var(--navy);
color:white;
border-radius:40px;
text-decoration:none;
margin-right:15px;
transition:.3s;
border:none;
cursor:pointer;
font-family:'Poppins',sans-serif;
}

.btn:hover{
background:var(--coral);
}



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

.section-title{
text-align:center;
margin-bottom:60px;
}

.section-title h2{
font-size:2.8rem;
margin-bottom:15px;
}


/* =========================
   CARDS
========================= */



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

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

.about {
    position: relative;
    padding: 100px 8%;
    background: linear-gradient(
        135deg,
        var(--linen) 0%,
        #ffffff 55%,
        #f8f6f1 100%
    );
    overflow: hidden;
    scroll-margin-top: 100px;
}

/* Decorative background element */
.about::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: var(--coral);
    opacity: 0.08;
    top: -100px;
    right: -80px;
}

/* Main content container */
.about-content {
    position: relative;
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
}

/* Heading */
.about h2 {
    font-size: 2.8rem;
    line-height: 1.15;
    color: var(--navy);
    margin-bottom: 25px;
}

/* Accent line underneath heading */
.about h2::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    margin: 18px auto 30px;
    background: var(--coral);
    border-radius: 10px;
}

/* Paragraphs */
.about p {
    max-width: 850px;
    margin: 0 auto 24px;
    font-size: 1.08rem;
    line-height: 1.8;
    color: #3f3f3f;
}

/* Mission statement */
.about .mission {
    margin-top: 35px;
    padding: 25px 35px;
    background: rgba(255, 255, 255, 0.75);
    border-left: 4px solid var(--coral);
    border-radius: 0 16px 16px 0;
    font-weight: 500;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}


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


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

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}

.service-box{
background:white;
padding:42px;
border-radius:30px;
border:1px solid rgba(75,84,139,.08);
transition:.35s;
box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.service-box:hover{
transform:translateY(-8px);
box-shadow:0 25px 50px rgba(0,0,0,.10);
}

/* =========================
   FAQS
========================= *//

.faq-section{
    padding:100px 8%;
    background:#FAF9F7;
}
/* =========================
   CLIENT REFERRAL PERK
========================= */

.referral-perk {
    max-width: 760px;
    margin: 65px auto 0;
    padding: 30px 35px;

    display: flex;
    align-items: center;
    gap: 24px;

    background: white;

    border: 1px solid rgba(75,84,139,.10);
    border-radius: 22px;

    box-shadow: 0 8px 25px rgba(0,0,0,.04);

    transition: .3s ease;
}

.referral-perk:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 35px rgba(0,0,0,.07);
}


/* ICON */

.referral-perk-icon {
    width: 55px;
    height: 55px;

    flex-shrink: 0;

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

    background: var(--peach);
    color: var(--coral);

    border-radius: 50%;

    font-size: 1.5rem;
}


/* CONTENT */

.referral-perk-content {
    flex: 1;
}

.referral-perk-eyebrow {
    display: block;

    margin-bottom: 5px;

    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    font-weight: 700;

    letter-spacing: 2px;

    color: var(--coral);
}

.referral-perk h3 {
    margin: 0 0 7px;

    font-family: 'Poppins', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;

    color: var(--navy);
}

.referral-perk p {
    margin: 0 0 5px;

    font-family: 'Montserrat', sans-serif;
    font-size: .88rem;
    line-height: 1.6;

    color: var(--dark);
}

.referral-perk p strong {
    color: var(--navy);
    font-weight: 600;
}

.referral-perk-note {
    font-family: 'Montserrat', sans-serif;
    font-size: .75rem;

    color: #777;
}


/* MOBILE */

@media(max-width:600px) {

    .referral-perk {
        margin-top: 45px;
        padding: 28px 22px;

        flex-direction: column;

        text-align: center;

        gap: 15px;
    }

    .referral-perk-content {
        width: 100%;
    }

    .referral-perk h3 {
        font-size: 1.2rem;
    }

    .referral-perk p {
        font-size: .82rem;
    }

}

/* HEADER */

.faq-header{
    max-width:800px;
    margin:0 auto 35px;
    text-align:center;
}

.faq-eyebrow{
    display:block;
    margin-bottom:12px;

    font-family:Montserrat,sans-serif;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:3px;

    color:var(--coral);
}

.faq-header h2{
    margin:0 0 15px;

    font-family:Poppins,sans-serif;
    font-size:3.2rem;
    font-weight:600;

    color:var(--navy);
}

.faq-header p{
    max-width:650px;
    margin:0 auto;

    font-family:Montserrat,sans-serif;
    font-size:.95rem;
    line-height:1.7;

    color:#666;
}


/* SEARCH */

.faq-search{
    width:100%;
    max-width:600px;

    margin:0 auto 55px;

    position:relative;

    background:white;

    border:1px solid rgba(75,84,139,.08);

    border-radius:50px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.04),
        0 2px 8px rgba(0,0,0,.025);

    transition:.3s ease;
}

.faq-search:focus-within{
    box-shadow:
        0 10px 30px rgba(0,0,0,.07),
        0 0 0 3px rgba(75,84,139,.06);
}

.faq-search-icon{
    position:absolute;

    left:25px;
    top:50%;

    transform:translateY(-50%);

    font-size:1rem;

    color:var(--navy);

    pointer-events:none;
}

.faq-search input{
    width:100%;

    padding:18px 25px 18px 58px;

    border:none;
    outline:none;

    background:transparent;

    border-radius:50px;

    font-family:Montserrat,sans-serif;
    font-size:.9rem;

    color:var(--navy);

    box-sizing:border-box;
}

.faq-search input::placeholder{
    color:#999;
}


/* MAIN FAQ AREA */

.faq-layout{
    max-width:1100px;

    margin:0 auto;

    display:grid;

    grid-template-columns:minmax(0,1fr) minmax(300px,.75fr);

    gap:70px;

    align-items:center;
}


/* ACCORDION */

.faq-list{
    display:flex;
    flex-direction:column;

    gap:8px;
}

.faq-item{
    background:white;

    border:1px solid rgba(75,84,139,.08);

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 4px 15px rgba(0,0,0,.025);

    transition:.3s ease;
}

.faq-item:hover{
    border-color:rgba(75,84,139,.15);
}


/* QUESTION */

.faq-question{
    width:100%;

    display:flex;

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

    gap:20px;

    padding:20px 24px;

    background:white;

    border:none;

    cursor:pointer;

    text-align:left;

    font-family:Montserrat,sans-serif;
    font-size:.9rem;
    font-weight:600;

    color:var(--navy);
}

.faq-icon{
    flex-shrink:0;

    width:25px;
    height:25px;

    display:flex;

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

    border-radius:50%;

    color:var(--coral);

    font-size:1.3rem;
    font-weight:400;

    transition:.3s ease;
}

.faq-item.active .faq-icon{
    transform:rotate(45deg);
}


/* ANSWER */

/* =========================
   FAQ ANSWER
========================= */

.faq-answer{
    max-height:0;
    overflow:hidden;

    transition:
        max-height .15s ease,
        padding .15s ease;

    padding:0 24px;

    font-family:Montserrat,sans-serif;
    font-size:.85rem;
    line-height:1.7;
    color:#666;
}

.faq-answer strong{
    color:var(--navy);
    font-weight:600;
}

.faq-answer a {
    color: #1F3A5F; /* navy */
    text-decoration: none;
    font-weight: 500;
}

.faq-answer a:hover {
    color: #E88973; /* coral */
    text-decoration: none;
}

/* OPEN */

.faq-item.active .faq-answer{
    max-height:1000px;
    padding:0 24px 22px;
}


/* ANSWER PARAGRAPHS */

.faq-answer p{
    margin:0 0 18px;
}

.faq-answer p:last-child{
    margin-bottom:0;
}

/* VISUAL */

.faq-visual{
    width:100%;
    min-width:0;
    max-width:450px;

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

    margin:0 auto;
    overflow:hidden;
}

.faq-image{
    display:block;

    width:100%;
    max-width:450px;
    height:auto;

    object-fit:contain;

}




/* CONTACT CTA */

.faq-contact{
    max-width:900px;

    margin:75px auto 0;

    padding:25px 35px;

    display:flex;

    align-items:center;

    gap:20px;

    background:white;

    border:1px solid rgba(75,84,139,.08);

    border-radius:25px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.05);

    box-sizing:border-box;
}

.faq-contact-icon{
    width:55px;
    height:55px;

    flex-shrink:0;

    display:flex;

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

    background:#F4A18F;

    border-radius:50%;

    font-size:2rem;

    color:white;
}

.faq-contact-text{
    flex:1;
}

.faq-contact-text h3{
    margin:0 0 4px;

    font-family:Poppins,sans-serif;

    font-size:1.45rem;
    font-weight:600;

    color:var(--navy);
}

.faq-contact-text p{
    margin:0;

    font-family:Montserrat,sans-serif;

    font-size:.8rem;

    line-height:1.5;

    color:#666;
}

.faq-contact-btn{
    flex-shrink:0;

    display:inline-flex;

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

    gap:12px;

    padding:13px 22px;

    border:1px solid var(--navy);

    border-radius:40px;

    background:var(--navy);

    color:white;

    text-decoration:none;

    font-family:Montserrat,sans-serif;

    font-size:.78rem;
    font-weight:600;

    transition:.3s ease;
}

.faq-contact-btn:hover{
    background:var(--coral);

    border-color:var(--coral);

    transform:translateY(-2px);
}


/* NO RESULTS */

.faq-no-results{
    padding:30px;

    text-align:center;

    font-family:Montserrat,sans-serif;

    font-size:.9rem;

    color:#777;
}


/* =========================
   FAQ MOBILE
========================= */

@media(max-width:900px){

    .faq-section{
        padding:80px 6%;
    }

    .faq-header h2{
        font-size:2.5rem;
    }

    .faq-layout{
        grid-template-columns:1fr;

        gap:35px;
    }

    .faq-visual{
        min-height:300px;

        order:-1;
    }

    .faq-illustration{
        transform:scale(.8);
    }

    .faq-question-mark{
        font-size:8rem;

        top:0;
        right:15%;
    }

}


@media(max-width:600px){

    .faq-section{
        padding:65px 5%;
    }

    .faq-header h2{
        font-size:2.2rem;
    }

    .faq-header p{
        font-size:.85rem;
    }

    .faq-search{
        margin-bottom:35px;
    }

    .faq-question{
        padding:18px;

        font-size:.82rem;
    }

    .faq-item.active .faq-answer p{
        padding-left:18px;
        padding-right:18px;
    }

    .faq-contact{
        flex-direction:column;

        text-align:center;

        padding:30px 22px;
    }

    .faq-contact-btn{
        width:100%;
    }

    .faq-visual{
        min-height:250px;
    }

}


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

.socials{
background:var(--navy);
color:white;
text-align:center;
}

.socials h2{
color:white;
}

.social-buttons a{
display:inline-block;
margin:15px;
padding:15px 25px;
border-radius:40px;
background:white;
color:var(--navy);
text-decoration:none;
font-weight:600;
}

.social-buttons a:hover{
background:var(--coral);
color:var(--linen);
}


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

.review-cta{
text-align:center;
margin:60px auto 0;
max-width:600px;
padding:45px 40px;
background:white;
border-radius:28px;
border:1px solid rgba(75,84,139,.08);
box-shadow:
0 12px 35px rgba(0,0,0,.05),
0 2px 10px rgba(0,0,0,.03);
}

.review-cta-stars{
font-size:1.6rem;
letter-spacing:6px;
margin-bottom:15px;
}

.review-cta h3{
font-size:1.8rem;
margin-bottom:12px;
}

.review-cta p{
font-size:1.05rem;
color:var(--dark);
margin-bottom:28px;
line-height:1.7;
}

.review-cta-btn{
margin-right:0;
padding:16px 34px;
font-size:1.05rem;
}


/* =========================
   CONTACT / BOOKING
========================= */
.contact{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:40px;
    width:100%;
}

.calendar-container{
    width:100%;
    max-width:900px;
    height:600px;
}

#contact-form{
    scroll-margin-top:90px;
    width:100%;
    max-width:900px;
    height:auto !important;
    min-height:0 !important;
    overflow:visible;
}

/* =========================
   FORM
========================= */

form{
width:100%;
min-width:0;
height:auto;
min-height:600px;

background:white;

padding:38px;

border-radius:25px;

box-shadow:0 10px 30px rgba(0,0,0,0.05);

display:flex;
flex-direction:column;

box-sizing:border-box;
}

.form-field{
width:100%;
min-width:0;
margin-bottom:18px;
}

.form-field label{
display:block;
margin-bottom:8px;
font-family:'Poppins',sans-serif;
font-size:.92rem;
font-weight:600;
color:var(--navy);
}

.form-field label span{
color:var(--coral);
}


/* =========================
   INPUTS
========================= */

.form-field input,
.form-field textarea,
.form-field select{

display:block;

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

box-sizing:border-box;

padding:14px 15px;

margin:0;

border:1px solid #ddd;

border-radius:15px;

background:white;

font-family:'Montserrat',sans-serif;

font-size:.95rem;

color:var(--dark);

transition:
border-color .25s ease,
box-shadow .25s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder{
color:#999;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
outline:none;

border-color:var(--navy);

box-shadow:
0 0 0 3px rgba(75,84,139,.10);
}


/* =========================
   TEXTAREA
========================= */

.form-field textarea{

display:block;

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

height:150px;
min-height:150px;
max-height:250px;

box-sizing:border-box;

padding:14px 15px;

resize:vertical;

overflow-y:auto;

line-height:1.5;
}


/* =========================
   MESSAGE INFORMATION
========================= */

.message-footer{

display:flex;

justify-content:space-between;

align-items:flex-start;

width:100%;

margin-top:7px;

gap:10px;
}

.message-hints{

display:flex;

flex-direction:column;

gap:2px;
}

.message-hints small{

color:#777;

font-family:'Montserrat',sans-serif;

font-size:.72rem;

line-height:1.3;
}

#character-count{

flex-shrink:0;

color:#777;

font-family:'Montserrat',sans-serif;

font-size:.72rem;

white-space:nowrap;
}


/* =========================
   FIELD ERRORS
========================= */

.field-error{

display:block;

min-height:18px;

margin-top:5px;

font-size:.78rem;

color:#d65a5a;
}


/* =========================
   VALID / INVALID
========================= */

.form-field input.valid,
.form-field textarea.valid,
.form-field select.valid{
border-color:#8bbf9f;
}

.form-field input.invalid,
.form-field textarea.invalid,
.form-field select.invalid{

border-color:#d65a5a;

box-shadow:
0 0 0 3px rgba(214,90,90,.08);
}


/* =========================
   SUBMIT BUTTON
========================= */

#submit-btn{
margin-top:auto;
margin-right:0;
width:100%;
font-size:.95rem;
}

#submit-btn:disabled{
opacity:.65;
cursor:not-allowed;
}


/* =========================
   CALENDLY
========================= */

.calendar-container{

width:100%;
min-width:0;

height:600px;
max-height:80vh;

display:flex;
flex-direction:column;

background:white;

border-radius:25px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

overflow:hidden;
}

.calendly-inline-widget{

min-width: 320px;
height: 700px !important;
}


/* =========================
   FROSTED GLASS MODAL
========================= */

.modal{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background-color:rgba(0,0,0,.5);

z-index:2000;

justify-content:center;

align-items:center;

padding:20px;
}

.modal-content{

position:relative;

background:rgba(255,255,255,.9);

padding:2rem;

border-radius:20px;

box-shadow:0 4px 20px rgba(0,0,0,.2);

text-align:center;

backdrop-filter:blur(5px);

max-width:500px;

width:90%;
}

.close-modal-btn{

position:absolute;

top:10px;
right:10px;

background:none;

border:none;

font-size:1.5rem;

cursor:pointer;

color:#666;

transition:color .3s;
}

.close-modal-btn:hover{
color:#000;
}

.calendly-btn{

display:inline-block;

margin:1rem 0;

padding:.75rem 1.5rem;

background-color:var(--navy);

color:white;

text-decoration:none;

border-radius:40px;

font-weight:bold;

transition:background-color .3s;
}

.calendly-btn:hover{
background-color:var(--coral);
}


/* =========================
   REVIEWS
========================= */

.reviewsSwiper .swiper-wrapper{
align-items:stretch;
}

.reviewsSwiper .swiper-slide{
height:auto;
display:flex;
}

.review-card,
.review-cta{

position:relative;

width:100%;

background:#fff;

border-radius:28px;

padding:42px;

display:flex;

flex-direction:column;

border:1px solid rgba(75,84,139,.08);

box-shadow:
0 12px 35px rgba(0,0,0,.05),
0 2px 10px rgba(0,0,0,.03);

transition:.35s ease;
}

.review-card:hover,
.review-cta:hover{

transform:translateY(-8px);

box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.review-card::before,
{

content:"\201C";

position:absolute;

top:-15px;

right:20px;

font-size:110px;

font-family:Georgia,serif;

color:#EEF1F9;

pointer-events:none;
}

.stars{

font-size:1.5rem;

letter-spacing:4px;

color:#FDBA12;

margin-bottom:18px;
}

.review-card p{

flex:1;

margin:20px 0;

line-height:1.8;
}

.review-footer{

margin-top:auto;

padding-top:18px;

border-top:1px solid #ececec;

display:flex;

flex-direction:row;

align-items:center;

justify-content:space-between;

gap:15px;
}

.review-footer strong{

color:var(--navy);

font-size:1rem;

font-weight:600;
}

.review-footer span{

padding:5px 10px;

background:#F5F7FC;

color:var(--navy);

border-radius:30px;

font-size:.75rem;

font-weight:600;
}

.reviews-wrapper{

display:flex;

align-items:center;

gap:20px;
}

.review-prev,
.review-next{

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--navy);

color:white;

font-size:1.4rem;

cursor:pointer;

transition:.3s;

flex-shrink:0;
}

.review-prev:hover,
.review-next:hover{
background:var(--coral);
}


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

footer{

background:white;

padding:40px;

text-align:center;
}


/* =========================
   TABLET / MOBILE
========================= */

@media(max-width:900px){

nav{
padding:20px 8%;
}

.menu-toggle{
display:block;
}

.nav-links{

display:flex;

position:absolute;

top:85px;
left:0;

width:100%;

background:white;

flex-direction:column;

align-items:center;

box-shadow:0 10px 25px rgba(0,0,0,.08);

max-height:0;

overflow:hidden;

transition:max-height .35s ease,padding .35s ease;

padding:0;
}

.nav-links.active{

max-height:400px;

padding:25px 0;
}

.hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    height:auto;

    padding:140px 8% 80px;
}

.hero .btn{

display:block;

margin:15px auto;

width:max-content;
}

.hero h1{

font-size:2.8rem;
}


/* IMPORTANT:
   Form grows naturally.
*/

form{

height:auto;

min-height:750px;
}

.calendar-container{

height:750px;
}

.review-card{

padding:28px;
}

.review-card p{

font-size:.96rem;

line-height:1.7;
}

.reviews-wrapper{

gap:8px;
}

.review-prev,
.review-next{

width:38px;

height:38px;

font-size:1rem;
}

}


@media(max-width:600px){


.form-field textarea{

width:100%;

max-width:100%;

font-size:16px;
}

.form-field input,
.form-field select{

font-size:16px;
}

.message-footer{

gap:6px;
}

.message-hints small,
#character-count{

font-size:.7rem;
}

.modal-content{

padding:1.75rem 1.25rem;
}

}





/* =========================
   SMALL SCREENS
========================= */

@media(max-width:420px){

section{

padding-left:6%;
padding-right:6%;
}

form{
    width:100%;
    min-width:0;
    height:auto !important;
    min-height:0;

    background:white;

    padding:38px;

    border-radius:25px;

    box-shadow:0 10px 30px rgba(0,0,0,0.05);

    display:flex;
    flex-direction:column;

    box-sizing:border-box;

    overflow:visible;
}

/* =========================
   END CSS
========================= */