/* =========================================================
   PK BEAUTY SALON
   MAIN STYLE.CSS
   Matches the new index.html exactly
   Desktop + Tablet + Mobile
   Hover + Load + Scroll Up Animations
   ========================================================= */

/* =========================================================
   GOOGLE FONTS
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Philosopher:wght@400;700&family=Poppins:wght@300;400;500;600;700&display=swap');


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --primary: #c2185b;
    --primary-dark: #8f1245;

    --pink: #f3a6bd;
    --pink-light: #fff1f6;

    --cream: #fff9fb;

    --dark: #281e23;
    --text: #62575c;
    --muted: #8d8086;

    --white: #ffffff;

    --border: #eadfe4;

    --gold: #c49a5b;

    /* Fixed missing variable from old CSS */
    --secondary: #f3a6bd;

    --heading: "Philosopher", Georgia, serif;
    --body: "Poppins", Arial, sans-serif;

    --container: 1180px;

    --radius: 22px;

    --shadow:
        0 16px 45px rgba(61, 25, 42, 0.10);

    --shadow-hover:
        0 24px 55px rgba(61, 25, 42, 0.16);

    --transition:
        0.35s cubic-bezier(.2, .7, .2, 1);
}


/* =========================================================
   RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    font-family: var(--body);
    color: var(--text);
    background: var(--white);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

button,
input {
    font: inherit;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Images move subtly against the page while scrolling. */
.parallax-image {
    translate: 0 var(--parallax-y, 0px);
    will-change: translate;
}

.parallax-background {
    --background-parallax-y: 0px;
    background-position: center calc(50% + var(--background-parallax-y)) !important;
}

.parallax-background::before {
    background-position: center calc(50% + var(--background-parallax-y)) !important;
}

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

ul {
    list-style: none;
}

section {
    position: relative;
}

::selection {
    background: var(--primary);
    color: var(--white);
}


/* =========================================================
   COMMON SECTION HEADING
   ========================================================= */

.section-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.section-heading > span,
.section-label,
.offer-label,
.cta-section > div > span {
    display: inline-block;

    margin-bottom: 10px;

    color: var(--primary);

    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-heading h2,
.intro-content h2,
.why-content h2,
.offer-content h2,
.cta-section h2 {
    color: var(--dark);

    font-family: var(--heading);

    font-size: clamp(2.2rem, 4vw, 3.5rem);

    font-weight: 400;
    line-height: 1.12;
}

.section-heading h2 strong,
.intro-content h2 span,
.why-content h2 span,
.offer-content h2 span,
.cta-section h2 strong {
    color: var(--primary);
    font-weight: 400;
}

.section-heading p {
    max-width: 680px;

    margin: 18px auto 0;

    color: var(--text);

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


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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 52px;

    padding: 13px 28px;

    border: 1px solid var(--primary);
    border-radius: 50px;

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

    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;

    cursor: pointer;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        color var(--transition);
}

.btn:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);

    color: var(--white);

    transform: translateY(-4px);

    box-shadow:
        0 12px 28px rgba(194, 24, 91, .22);
}

.btn:active {
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,.75);
}

.btn-outline:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--primary);
}

.btn-light {
    background: var(--white);
    color: var(--primary);
    border-color: var(--white);
}

.btn-light:hover {
    background: transparent;
    color: var(--white);
}


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

header {
    position: absolute;

    top: 0;
    left: 0;

    z-index: 1000;

    width: 100%;
    min-height: 88px;

    padding:
        0 max(5%, calc((100% - var(--container)) / 2));

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

    gap: 30px;

    transition:
        background .35s ease,
        box-shadow .35s ease,
        backdrop-filter .35s ease,
        min-height .35s ease;
}

/* JS adds this after scrolling */
header.scrolled {
    position: fixed;

    min-height: 72px;

    background: rgba(40, 30, 35, .96);

    box-shadow:
        0 8px 30px rgba(0,0,0,.14);

    backdrop-filter: blur(12px);
}

.logo {
    color: var(--white);

    font-family: var(--heading);

    font-size: clamp(1.65rem, 3vw, 2.15rem);

    font-weight: 700;

    white-space: nowrap;

    transition:
        color var(--transition),
        transform var(--transition);
}

.logo:hover {
    color: var(--pink);
    transform: translateY(-2px);
}


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

header nav ul {
    display: flex;
    align-items: center;

    gap: 2px;
}

header nav ul li a {
    position: relative;

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 12px 14px;

    color: var(--white);

    font-size: 13px;
    font-weight: 500;

    white-space: nowrap;

    transition: color var(--transition);
}

header nav ul li a::after {
    content: "";

    position: absolute;

    left: 14px;
    right: 14px;
    bottom: 5px;

    height: 2px;

    border-radius: 20px;

    background: var(--pink);

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

    transition: transform var(--transition);
}

header nav ul li a:hover,
header nav ul li a.active {
    color: var(--pink);
}

header nav ul li a:hover::after,
header nav ul li a.active::after {
    transform: scaleX(1);
}


/* Phone button */

header nav ul li #NavNum {
    margin-left: 8px;

    padding: 10px 17px;

    border:
        1px solid rgba(255,255,255,.65);

    border-radius: 50px;
}

header nav ul li #NavNum::after {
    display: none;
}

header nav ul li #NavNum:hover {
    background: var(--white);

    border-color: var(--white);

    color: var(--primary);
}


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

.menuToggle {
    display: none;
    position: relative;
    width: 34px;
    height: 25px;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1002;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
}

.menuToggle::before,
.menuToggle::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 5px;
    background: var(--white);
    transition:
        transform var(--transition),
        top var(--transition),
        box-shadow var(--transition),
        opacity var(--transition);
}

.menuToggle::before {
    top: 4px;
    box-shadow:
        0 8px 0 var(--white);
}

.menuToggle::after {
    top: 20px;
}

/* Hamburger → X */
header.active .menuToggle::before {
    top: 12px;
    transform: rotate(45deg);
    box-shadow: none;
}

header.active .menuToggle::after {
    top: 12px;
    transform: rotate(-45deg);
}

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

.hero {
    min-height: 790px;

    padding:
        145px max(5%, calc((100% - var(--container)) / 2))
        90px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.03fr)
        minmax(380px, .97fr);

    align-items: center;

    gap: 70px;

    overflow: hidden;

    background:
        linear-gradient(
            110deg,
            rgba(39,20,29,.52),
            rgba(102,39,65,.32)
        ),
        url("../img/backgroundimg.jpg")
        center / cover no-repeat;
}


/* Decorative circles */

.hero::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -280px;
    top: -300px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 50%;
}

.hero::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -300px;
    bottom: -260px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 50%;
}


/* Hero content */

.hero-content {
    position: relative;

    z-index: 2;

    max-width: 650px;

    animation:
        heroContentIn .9s both;
}

.hero-small-title {
    display: inline-block;

    margin-bottom: 17px;

    color: var(--pink);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.hero h1 {
    color: var(--white);

    font-family: var(--heading);

    font-size:
        clamp(3.2rem, 6vw, 5.7rem);

    font-weight: 400;

    line-height: .98;
}

.hero h1 span {
    display: block;

    color: var(--pink);
}

.hero-content > p {
    max-width: 600px;

    margin:
        25px 0 32px;

    color:
        rgba(255,255,255,.86);

    font-size: 15px;

    line-height: 1.8;
}

.hero-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 13px;
}

.hero-contact {
    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 34px;
}

.hero-contact > div {
    display: flex;

    align-items: center;

    gap: 9px;

    color:
        rgba(255,255,255,.86);

    font-size: 13px;
}

.hero-contact i {
    color: var(--pink);
}

.hero-contact a {
    transition: color var(--transition);
}

.hero-contact a:hover {
    color: var(--pink);
}


/* Hero image */

.hero-image {
    position: relative;

    z-index: 2;

    width:
        min(100%, 500px);

    justify-self: end;

    animation:
        heroImageIn 1s .15s both;
}

.hero-image-bg {
    position: absolute;

    z-index: -1;

    inset:
        25px -22px -22px 22px;

    border:
        1px solid rgba(255,255,255,.30);

    border-radius:
        250px 250px 25px 25px;

    transform: rotate(3deg);
}

.hero-image img {
    position: relative;

    height: 560px;

    object-fit: cover;

    object-position: center;

    border-radius:
        250px 250px 25px 25px;

    box-shadow:
        0 30px 70px rgba(0,0,0,.28);

    transition:
        transform .7s ease;
}

.hero-image:hover img {
    transform:
        scale(1.025);
}


/* Hero discount badge */

.hero-badge {
    position: absolute;

    right: -35px;
    bottom: 45px;

    width: 125px;
    height: 125px;

    padding: 15px;

    border:
        7px solid rgba(255,255,255,.85);

    border-radius: 50%;

    background: var(--primary);

    color: var(--white);

    display: flex;
    flex-direction: column;

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

    text-align: center;

    box-shadow:
        0 15px 35px rgba(0,0,0,.20);

    animation:
        floatBadge 4s ease-in-out infinite;
}

.hero-badge strong {
    font-family: var(--heading);

    font-size: 31px;

    line-height: .9;
}

.hero-badge span {
    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;
}

.hero-badge small {
    margin-top: 3px;

    font-size: 7px;

    line-height: 1.2;

    text-transform: uppercase;
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.intro-section {
    max-width: var(--container);

    margin: auto;

    padding:
        110px 25px;

    display: grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(0,1.1fr);

    align-items: center;

    gap: 80px;
}

.intro-image {
    position: relative;

    width:
        min(100%,500px);

    justify-self: center;
}

.intro-image::before {
    content: "";

    position: absolute;

    z-index: -1;

    inset:
        25px -20px -20px 20px;

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

    border-radius: 25px;
}

.intro-image img {
    height: 530px;

    object-fit: cover;

    border-radius: 25px;

    box-shadow: var(--shadow);

    transition:
        transform .7s ease;
}

.intro-image:hover img {
    transform:
        scale(1.025);
}


/* Experience card */

.experience-card {
    position: absolute;

    left: -28px;
    bottom: 35px;

    min-width: 150px;

    padding:
        17px 22px;

    border-radius: 15px;

    background: var(--white);

    box-shadow: var(--shadow);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    animation:
        floatCard 4s ease-in-out infinite;
}

.experience-card strong {
    color: var(--primary);

    font-family: var(--heading);

    font-size: 40px;

    line-height: 1;
}

.experience-card span {
    color: var(--muted);

    font-size: 11px;

    letter-spacing: .5px;

    text-transform: uppercase;
}


/* Intro text */

.intro-content {
    max-width: 650px;
}

.intro-content h2 {
    margin-bottom: 22px;
}

.intro-content > p {
    margin-bottom: 17px;

    color: var(--text);

    font-size: 14px;

    line-height: 1.8;
}


/* Intro features */

.intro-features {
    margin:
        28px 0 30px;

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 14px;
}

.intro-features > div {
    min-height: 54px;

    padding:
        12px 14px;

    display: flex;

    align-items: center;

    gap: 11px;

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

    border-radius: 12px;

    background: var(--cream);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.intro-features > div:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(194,24,91,.22);

    box-shadow: var(--shadow);
}

.intro-features i {
    color: var(--primary);

    font-size: 17px;
}

.intro-features span {
    color: var(--dark);

    font-size: 12px;

    font-weight: 600;
}


/* =========================================================
   STATS STRIP
   ========================================================= */

.stats-strip {
    max-width: var(--container);
    margin: 0 auto -20px;
    padding: 0 25px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    z-index: 2;
}

.stat-item {
    padding: 28px 20px;
    border-radius: 22px;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 18px 42px rgba(61, 25, 42, 0.07);
}

.stat-item strong {
    display: block;
    color: var(--primary);
    font-family: var(--heading);
    font-size: clamp(1.8rem, 2.2vw, 2.7rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-item span {
    color: var(--dark);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}


/* =========================================================
   PROCESS SECTION
   ========================================================= */

.process-section {
    padding: 120px max(5%, calc((100% - var(--container)) / 2)) 90px;
    background: linear-gradient(180deg, #fff9fb 0%, #ffffff 100%);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.process-step {
    position: relative;
    padding: 35px 22px 28px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--white);
    box-shadow: 0 12px 30px rgba(61, 25, 42, 0.04);
    transition: transform var(--transition), box-shadow var(--transition);
}

.process-step:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

.process-number {
    position: absolute;
    top: 18px;
    right: 18px;
    color: rgba(194, 24, 91, 0.14);
    font-size: 36px;
    font-weight: 700;
    font-family: var(--heading);
}

.process-step i {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: var(--pink-light);
    color: var(--primary);
    font-size: 23px;
}

.process-step h3 {
    margin-bottom: 12px;
    color: var(--dark);
    font-family: var(--heading);
    font-size: 26px;
    font-weight: 400;
}

.process-step p {
    font-size: 12px;
    line-height: 1.75;
    color: var(--text);
}


/* =========================================================
   SHOWCASE SECTION
   ========================================================= */

.showcase-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 25px 110px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 60px;
    align-items: center;
}

.showcase-copy h2 {
    margin-bottom: 18px;
}

.showcase-copy > p {
    margin-bottom: 25px;
    font-size: 14px;
    line-height: 1.8;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dark);
    font-size: 13px;
    font-weight: 500;
}

.feature-list i {
    color: var(--primary);
}

.showcase-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.gallery-card {
    overflow: hidden;
    border-radius: 24px;
    box-shadow: var(--shadow);
    min-height: 220px;
}

.gallery-card.tall {
    grid-row: span 2;
    min-height: 420px;
}

.gallery-card img {
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.gallery-card:hover img {
    transform: scale(1.05);
}


/* =========================================================
   TESTIMONIAL SECTION
   ========================================================= */

.testimonial-section {
    padding: 105px max(5%, calc((100% - var(--container)) / 2));
    background: var(--cream);
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.testimonial-card {
    padding: 30px 25px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--white);
    box-shadow: 0 12px 28px rgba(61, 25, 42, 0.04);
    transition: transform var(--transition), box-shadow var(--transition);
}

.testimonial-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-hover);
}

.testimonial-card.highlight {
    border-color: rgba(194, 24, 91, 0.3);
    background: linear-gradient(180deg, #fff6fa 0%, #ffffff 100%);
}

.stars {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    color: #f4b942;
    font-size: 14px;
}

.testimonial-card p {
    margin-bottom: 22px;
    font-size: 12px;
    line-height: 1.8;
    color: var(--text);
}

.client-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.client-meta strong {
    color: var(--dark);
    font-size: 14px;
    font-weight: 600;
}

.client-meta span {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}


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

.services-section {
    padding:
        105px max(5%, calc((100% - var(--container)) / 2));

    background: var(--cream);
}

.service-cards {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 22px;
}

.service-card {
    position: relative;

    min-height: 325px;

    padding:
        32px 25px 27px;

    display: flex;

    flex-direction: column;

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

    border-radius: var(--radius);

    background: var(--white);

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

    overflow: hidden;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.service-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--pink)
        );

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform var(--transition);
}

.service-card:hover {
    transform:
        translateY(-9px);

    border-color:
        rgba(194,24,91,.25);

    box-shadow:
        var(--shadow-hover);
}

.service-card:hover::before {
    transform:
        scaleX(1);
}


/* Service icon */

.service-icon {
    width: 62px;
    height: 62px;

    margin-bottom: 23px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--pink-light);

    color: var(--primary);

    font-size: 23px;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition);
}

.service-card:hover .service-icon {
    transform:
        rotate(-8deg) scale(1.08);

    background:
        var(--primary);

    color:
        var(--white);
}

.service-card h3 {
    margin-bottom: 11px;

    color: var(--dark);

    font-family: var(--heading);

    font-size: 25px;

    font-weight: 400;
}

.service-card p {
    margin-bottom: 20px;

    color: var(--text);

    font-size: 12px;

    line-height: 1.75;
}

.service-card > a {
    margin-top: auto;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    width: max-content;

    color: var(--primary);

    font-size: 12px;

    font-weight: 600;

    transition:
        gap var(--transition),
        color var(--transition);
}

.service-card > a:hover {
    gap: 13px;

    color: var(--primary-dark);
}


/* =========================================================
   SPECIAL OFFER
   ========================================================= */

.offer-section {
    max-width: var(--container);

    margin:
        105px auto;

    padding:
        65px 75px;

    display: grid;

    grid-template-columns:
        1fr .7fr;

    align-items: center;

    gap: 60px;

    border-radius: 30px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(243,166,189,.24),
            transparent 38%
        ),
        linear-gradient(
            115deg,
            #fff2f7,
            #fffafb
        );

    box-shadow: var(--shadow);
}

.offer-content {
    max-width: 600px;
}

.offer-content h2 {
    margin-bottom: 17px;
}

.offer-content > p {
    margin-bottom: 23px;

    font-size: 14px;
}

.offer-content > p strong {
    color: var(--primary);
}

.offer-points {
    display: flex;

    flex-wrap: wrap;

    gap: 13px 22px;

    margin-bottom: 29px;
}

.offer-points span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--dark);

    font-size: 12px;

    font-weight: 500;
}

.offer-points i {
    color: var(--primary);
}

.offer-image {
    justify-self: center;

    width:
        min(100%,350px);
}

.offer-image img {
    width: 100%;

    height: auto;

    object-fit: contain;

    animation:
        floatCard 4.5s ease-in-out infinite;
}


/* =========================================================
   PRICE SECTION
   ========================================================= */

.price-section {
    padding:
        105px max(5%, calc((100% - var(--container)) / 2));

    background: var(--cream);
}

.price-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 22px;
}

.price-card {
    position: relative;

    min-height: 350px;

    padding:
        30px 25px;

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

    border-radius: var(--radius);

    background: var(--white);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.price-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow-hover);
}

.price-card.featured {
    border-color:
        rgba(194,24,91,.35);

    box-shadow:
        0 15px 45px rgba(194,24,91,.10);
}


/* Popular */

.popular {
    position: absolute;

    top: 0;
    right: 0;

    padding:
        7px 13px;

    border-radius:
        0 20px 0 15px;

    background:
        var(--primary);

    color:
        var(--white);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}

.price-icon {
    width: 56px;
    height: 56px;

    margin-bottom: 19px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--pink-light);

    color:
        var(--primary);

    font-size: 20px;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition);
}

.price-card:hover .price-icon {
    transform:
        rotate(-8deg) scale(1.08);

    background:
        var(--primary);

    color:
        var(--white);
}

.price-card h3 {
    margin-bottom: 18px;

    color: var(--dark);

    font-family: var(--heading);

    font-size: 25px;

    font-weight: 400;
}

.price-card ul {
    display: flex;

    flex-direction: column;
}

.price-card li {
    min-height: 48px;

    padding:
        11px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    border-bottom:
        1px solid var(--border);
}

.price-card li:last-child {
    border-bottom: 0;
}

.price-card li span {
    color: var(--text);

    font-size: 11px;

    line-height: 1.4;
}

.price-card li strong {
    flex-shrink: 0;

    color: var(--primary);

    font-size: 12px;
}


/* =========================================================
   WHY CHOOSE US
   ========================================================= */

.why-section {
    max-width: var(--container);

    margin: auto;

    padding:
        110px 25px;

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    align-items: center;

    gap: 80px;
}

.why-content h2 {
    margin-bottom: 20px;
}

.why-content > p {
    max-width: 620px;

    margin-bottom: 30px;

    font-size: 14px;
}

.why-list {
    display: flex;

    flex-direction: column;

    gap: 20px;
}

.why-list > div {
    display: grid;

    grid-template-columns:
        25px 1fr;

    gap: 12px;
}

.why-list > div > i {
    margin-top: 4px;

    color: var(--primary);
}

.why-list h3 {
    margin-bottom: 3px;

    color: var(--dark);

    font-size: 14px;

    font-weight: 600;
}

.why-list p {
    color: var(--text);

    font-size: 12px;

    line-height: 1.65;
}

.why-image {
    position: relative;
}

.why-image::after {
    content: "";

    position: absolute;

    z-index: -1;

    inset:
        25px -20px -20px 20px;

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

    border-radius: 25px;
}

.why-image img {
    height: 530px;

    object-fit: cover;

    border-radius: 25px;

    box-shadow: var(--shadow);

    transition:
        transform .7s ease;
}

.why-image:hover img {
    transform:
        scale(1.025);
}


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

.review-section {
    padding:
        105px max(5%, calc((100% - var(--container)) / 2));

    background:
        var(--cream);
}

.review-box {
    max-width: 620px;

    margin: auto;

    padding:
        45px 35px;

    text-align: center;

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

    border-radius: 25px;

    background:
        var(--white);

    box-shadow:
        var(--shadow);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.review-box:hover {
    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow-hover);
}

.review-icon {
    width: 72px;
    height: 72px;

    margin:
        0 auto 18px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--pink-light);

    color:
        var(--primary);

    font-size: 27px;

    animation:
        heartbeat 2.2s ease-in-out infinite;
}

.review-box h3 {
    margin-bottom: 8px;

    color: var(--dark);

    font-family: var(--heading);

    font-size: 28px;

    font-weight: 400;
}

.review-box p {
    max-width: 450px;

    margin:
        0 auto 23px;

    font-size: 13px;
}


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

.cta-section {
    max-width: var(--container);

    margin:
        105px auto;

    padding:
        60px 70px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 45px;

    border-radius: 28px;

    overflow: hidden;

    background:
        linear-gradient(
            115deg,
            rgba(74,25,46,.96),
            rgba(143,18,69,.94)
        );

    box-shadow:
        var(--shadow);
}

.cta-section::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -170px;
    top: -190px;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius: 50%;
}

.cta-section > div:first-child {
    position: relative;

    z-index: 1;
}

.cta-section > div > span {
    color: var(--pink);
}

.cta-section h2 {
    color: var(--white);
}

.cta-section h2 strong {
    color: var(--pink);
}

.cta-section p {
    max-width: 600px;

    margin-top: 15px;

    color:
        rgba(255,255,255,.82);

    font-size: 13px;
}

.cta-buttons {
    position: relative;

    z-index: 1;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


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

footer {
    background:
        linear-gradient(180deg, #1d1519 0%, #110d10 100%);

    color:
        rgba(255,255,255,.74);
}

.beforefooter {
    max-width: var(--container);

    margin: auto;

    padding:
        75px 25px 50px;

    display: grid;

    grid-template-columns:
        1.45fr .8fr 1fr;

    gap: 28px;
}

.footer-box {
    min-width: 0;

    padding: 0;

    border: none;

    border-radius: 0;

    background: transparent;

    backdrop-filter: none;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.footer-box:hover {
    transform:
        translateY(-2px);

    border-color:
        transparent;

    box-shadow: none;
}

.footer-logo {
    display: inline-block;

    color: var(--white);

    font-family: var(--heading);

    font-size: 31px;

    font-weight: 700;

    line-height: 1.1;

    transition:
        color var(--transition),
        transform var(--transition);
}

.footer-logo:hover {
    color: var(--pink);
    transform: translateY(-2px);
}

.footer-tagline {
    display: block;

    margin-top: 8px;

    color: var(--pink);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;
}

.footer-box > p {
    margin:
        17px 0 22px;

    font-size: 12px;

    line-height: 1.9;
}

.footer-box h3 {
    margin:
        18px 0 14px;

    color: var(--white);

    font-family: var(--heading);

    font-size: 21px;

    font-weight: 400;
}


/* Newsletter */

.subscribe {
    display: flex;

    max-width: 390px;

    min-height: 55px;

    padding: 5px 6px 5px 18px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 999px;

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

    overflow: hidden;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.subscribe:focus-within {
    border-color:
        rgba(243,166,189,.5);

    box-shadow:
        0 0 0 4px rgba(194,24,91,.12);
}

.subscribe input {
    min-width: 0;

    flex: 1;

    padding:
        1px 8px;

    border: 0;

    outline: 0;

    background: transparent;

    color: var(--white);

    font-size: 11px;
}

.subscribe input::placeholder {
    color:
        rgba(255,255,255,.45);
}

.subscribe button {
    padding:
        0 18px;

    border: 0;

    border-radius: 999px;

    background:
        linear-gradient(135deg, var(--primary), #f35a96);

    color:
        var(--white);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .6px;

    cursor: pointer;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition),
        background var(--transition);
}

.subscribe button:hover {
    transform:
        translateY(-2px) scale(1.02);

    box-shadow:
        0 12px 23px rgba(194,24,91,.25);

    filter:
        brightness(1.04);
}


/* Footer links */

.footer-box ul {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.footer-box ul a {
    font-size: 12px;

    transition:
        color var(--transition),
        padding-left var(--transition),
        transform var(--transition);
}

.footer-box ul a:hover {
    padding-left: 5px;

    color: var(--pink);
    transform: translateX(2px);
}


/* Social icons */

.social-icons {
    display: flex;

    gap: 10px;
}

.social-icons a {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(255,255,255,.22);

    border-radius: 50%;

    color: var(--white);

    font-size: 14px;
    background: rgba(255,255,255,0.02);

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        color var(--transition),
        font-size var(--transition);
}

.social-icons a:hover {
    transform:
        translateY(-4px) scale(1.08);

    border-color:
        transparent;

    background:
        linear-gradient(135deg, var(--primary), #f85f9a);

    box-shadow:
        0 12px 24px rgba(194,24,91,.24);
}

.footer-box > p a {
    transition:
        color var(--transition);
}

.footer-box > p a:hover {
    color:
        var(--pink);
}

.footer-box > p i {
    width: 20px;

    color:
        var(--pink);
}


/* Footer bottom */

.footer-bottom {
    min-height: 65px;

    padding:
        18px max(5%, calc((100% - var(--container)) / 2));

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid rgba(255,255,255,.09);

    color:
        rgba(255,255,255,.48);

    font-size: 10px;
}


/* =========================================================
   SCROLL UP ANIMATION
   ========================================================= */

/*
   JS adds .show when an element enters the viewport.
*/

.reveal {
    opacity: 0;

    transform:
        translateY(55px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.reveal.show {
    opacity: 1;

    transform:
        translateY(0);
}


/* Left animation */

.reveal-left {
    opacity: 0;

    transform:
        translateX(-55px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.reveal-left.show {
    opacity: 1;

    transform:
        translateX(0);
}


/* Right animation */

.reveal-right {
    opacity: 0;

    transform:
        translateX(55px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.reveal-right.show {
    opacity: 1;

    transform:
        translateX(0);
}


/* Scale animation */

.reveal-scale {
    opacity: 0;

    transform:
        scale(.92);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.reveal-scale.show {
    opacity: 1;

    transform:
        scale(1);
}


/* =========================================================
   STAGGER ANIMATION
   ========================================================= */

.service-card:nth-child(1),
.price-card:nth-child(1) {
    transition-delay: 0s;
}

.service-card:nth-child(2),
.price-card:nth-child(2) {
    transition-delay: .08s;
}

.service-card:nth-child(3),
.price-card:nth-child(3) {
    transition-delay: .16s;
}

.service-card:nth-child(4),
.price-card:nth-child(4) {
    transition-delay: .24s;
}


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

@keyframes heroContentIn {

    from {
        opacity: 0;

        transform:
            translateY(40px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes heroImageIn {

    from {
        opacity: 0;

        transform:
            translateX(55px)
            scale(.95);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }
}


@keyframes floatBadge {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(3deg);
    }
}


@keyframes floatCard {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-9px);
    }
}


@keyframes heartbeat {

    0%,
    100% {
        transform:
            scale(1);
    }

    12% {
        transform:
            scale(1.08);
    }

    24% {
        transform:
            scale(1);
    }
}


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

@media (max-width: 1100px) {

    header {
        padding-left: 4%;
        padding-right: 4%;
    }

    header nav ul li a {
        padding-left: 9px;
        padding-right: 9px;
    }

    header nav ul li a::after {
        left: 9px;
        right: 9px;
    }

    header nav ul li #NavNum {
        margin-left: 4px;
        padding:
            10px 12px;
    }

    .hero {
        grid-template-columns:
            1fr .85fr;

        gap: 45px;
    }

    .hero-image {
        width:
            min(100%,430px);
    }

    .hero-image img {
        height: 520px;
    }

    .service-cards,
    .price-grid,
    .process-grid,
    .testimonial-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .showcase-section {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .offer-section {
        margin-left: 4%;
        margin-right: 4%;
    }

    .why-section {
        gap: 50px;
    }

    .cta-section {
        margin-left: 4%;
        margin-right: 4%;
    }

    .beforefooter {
        gap: 45px;
    }
}


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

@media (max-width: 900px) {

    header {
        min-height: 78px;
    }

    .menuToggle {
        display: block;
        z-index: 1002;
    }

    header nav {
        position: fixed;

        top: 0;
        right: -100%;

        width: min(340px, 86vw);
        height: 100vh;

        padding:
            100px 25px 35px;

        background:
            rgba(248, 243, 244, 0.98);

        box-shadow:
            -15px 0 40px rgba(0,0,0,.20);

        transition:
            right .4s cubic-bezier(.2,.7,.2,1);

        overflow-y: auto;
    }

    header.active nav {
        right: 0;
    }

    header nav ul {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 5px;
    }

    header nav ul li a {
        justify-content: flex-start;

        padding:
            14px 12px;

        font-size: 14px;
        color: var(--dark);
    }

    header nav ul li a::after {
        display: none;
    }

    header nav ul li a:hover,
    header nav ul li a.active {
        color: var(--primary);
        background: var(--pink-light);
        border-radius: 12px;
    }

    header nav ul li #NavNum {
        margin:
            12px 0 0;

        justify-content: center;

        padding:
            13px 15px;
        color: var(--white);
        background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    }

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

        min-height:
            auto;

        padding-top:
            125px;

        padding-bottom:
            80px;
    }

    .hero-content {
        max-width:
            700px;

        text-align:
            center;

        margin:
            auto;
    }

    .hero-content > p {
        margin-left:
            auto;

        margin-right:
            auto;
    }

    .hero-buttons,
    .hero-contact {
        justify-content:
            center;
    }

    .hero-image {
        width:
            min(100%,450px);

        justify-self:
            center;
    }

    .hero-image img {
        height:
            560px;
    }

    .intro-section,
    .why-section {
        grid-template-columns:
            1fr;

        gap:
            55px;
    }

    .intro-image,
    .why-image {
        margin:
            auto;
    }

    .intro-content,
    .why-content {
        max-width:
            700px;

        margin:
            auto;
    }

    .stats-strip {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 0;
    }

    .offer-section {
        grid-template-columns:
            1fr;

        text-align:
            center;

        padding:
            55px 40px;

        gap:
            35px;
    }

    .offer-content {
        margin:
            auto;
    }

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

    .offer-image {
        width:
            min(100%,300px);
    }

    .cta-section {
        flex-direction:
            column;

        text-align:
            center;

        padding:
            55px 40px;
    }

    .cta-section p {
        margin-left:
            auto;

        margin-right:
            auto;
    }

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

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

    .footer-box {
        padding: 0;
    }
}


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

@media (max-width: 600px) {

    header {
        min-height:
            72px;

        padding-left:
            20px;

        padding-right:
            20px;
    }

    header.scrolled {
        min-height:
            65px;
    }

    .logo {
        font-size:
            1.55rem;
    }

    .hero {
        padding:
            110px 20px 65px;
    }

    .hero-small-title {
        font-size:
            10px;

        letter-spacing:
            1px;
    }

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

        line-height:
            1;
    }

    .hero-content > p {
        font-size:
            13px;

        margin:
            20px auto 27px;
    }

    .hero-buttons {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .hero-buttons .btn {
        width:
            100%;
    }

    .hero-contact {
        flex-direction:
            column;

        align-items:
            center;

        gap:
            12px;

        margin-top:
            27px;
    }

    .hero-image {
        width:
            calc(100% - 35px);
    }

    .hero-image img {
        height:
            440px;

        border-radius:
            180px 180px 22px 22px;
    }

    .hero-image-bg {
        inset:
            18px -15px -15px 15px;

        border-radius:
            180px 180px 22px 22px;
    }

    .hero-badge {
        right:
            -20px;

        bottom:
            25px;

        width:
            95px;

        height:
            95px;

        border-width:
            5px;
    }

    .hero-badge strong {
        font-size:
            24px;
    }

    .hero-badge span {
        font-size:
            10px;
    }

    .hero-badge small {
        font-size:
            6px;
    }


    /* Intro */

    .intro-section {
        padding:
            75px 20px;
    }

    .intro-image {
        width:
            calc(100% - 20px);
    }

    .intro-image img {
        height:
            430px;
    }

    .experience-card {
        left:
            -8px;

        bottom:
            25px;

        min-width:
            125px;

        padding:
            13px 15px;
    }

    .experience-card strong {
        font-size:
            32px;
    }

    .experience-card span {
        font-size:
            9px;
    }

    .section-heading {
        margin-bottom:
            38px;
    }

    .section-heading h2,
    .intro-content h2,
    .why-content h2,
    .offer-content h2,
    .cta-section h2 {
        font-size:
            2.25rem;
    }

    .section-heading p {
        font-size:
            13px;
    }

    .intro-content > p {
        font-size:
            13px;
    }

    .intro-features {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    /* Services */

    .services-section,
    .price-section,
    .review-section {
        padding:
            75px 20px;
    }

    .service-cards,
    .price-grid,
    .process-grid,
    .testimonial-grid,
    .stats-strip {
        grid-template-columns:
            1fr;

        gap:
            17px;
    }

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

    .gallery-card.tall {
        grid-row: span 1;
    }

    .service-card {
        min-height:
            auto;

        padding:
            28px 22px 25px;
    }

    .service-card h3,
    .price-card h3 {
        font-size:
            23px;
    }


    /* Offer */

    .offer-section {
        margin:
            65px 15px;

        padding:
            42px 22px;

        border-radius:
            22px;
    }

    .offer-content > p {
        font-size:
            13px;
    }

    .offer-points {
        flex-direction:
            column;

        align-items:
            center;

        gap:
            10px;
    }

    .offer-content .btn {
        width:
            100%;
    }


    /* Why */

    .why-section {
        padding:
            75px 20px;
    }

    .why-content > p {
        font-size:
            13px;
    }

    .why-image img {
        height:
            430px;
    }


    /* Review */

    .review-box {
        padding:
            35px 20px;
    }

    .review-box h3 {
        font-size:
            25px;
    }


    /* CTA */

    .cta-section {
        margin:
            65px 15px;

        padding:
            42px 22px;

        border-radius:
            22px;
    }

    .cta-buttons {
        width:
            100%;

        flex-direction:
            column;
    }

    .cta-buttons .btn {
        width:
            100%;
    }


    /* Footer */

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

        gap:
            18px;

        padding:
            55px 20px 45px;
    }

    .footer-box {
        text-align:
            center;
        padding:
            0;
    }

    .footer-logo {
        font-size:
            28px;
    }

    .subscribe {
        max-width:
            100%;
        padding:
            5px 6px 5px 12px;

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            8px;

        min-height:
            auto;

        padding:
            10px;

        border-radius:
            16px;
    }

    .subscribe input {
        min-height:
            38px;

        padding:
            0 10px;
    }

    .subscribe button {
        min-height:
            38px;

        padding:
            0 14px;
    }

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

    .social-icons a:hover {
        transform:
            translateY(-3px) scale(1.06);
    }

    .footer-box > p {
        font-size:
            11px;

        max-width:
            320px;

        margin-left:
            auto;

        margin-right:
            auto;
    }

    .footer-box h3 {
        margin-top:
            22px;

        margin-bottom:
            12px;
    }

    .beforefooter {
        gap:
            28px 16px;

        padding-top:
            48px;
    }

    .footer-box:not(:first-child) {
        padding-top:
            22px;

        border-top:
            1px solid rgba(255, 255, 255, .1);
    }

    .footer-box:last-child {
        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        column-gap:
            16px;

        align-items:
            start;
    }

    .footer-box:last-child h3,
    .footer-box:last-child p {
        margin-top:
            0;
    }

    .footer-box:last-child h3:nth-of-type(1) {
        grid-area:
            email-title;
    }

    .footer-box:last-child p:nth-of-type(1) {
        grid-area:
            email;
    }

    .footer-box:last-child h3:nth-of-type(2) {
        grid-area:
            phone-title;
    }

    .footer-box:last-child p:nth-of-type(2) {
        grid-area:
            phone;
    }

    .footer-box:last-child h3:nth-of-type(3) {
        grid-area:
            location-title;
    }

    .footer-box:last-child p:nth-of-type(3) {
        grid-area:
            location;
    }

    .footer-box:last-child {
        grid-template-areas:
            "email-title phone-title"
            "email phone"
            "location-title location-title"
            "location location";
    }

    .footer-box ul {
        gap:
            6px;
    }

    .footer-bottom {
        min-height:
            auto;

        padding:
            18px 20px;

        flex-direction:
            column;

        text-align:
            center;

        gap:
            5px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .hero {
        padding-left:
            16px;

        padding-right:
            16px;
    }

    .hero h1 {
        font-size:
            2.65rem;
    }

    .hero-image {
        width:
            calc(100% - 25px);
    }

    .hero-image img {
        height:
            390px;
    }

    .section-heading h2,
    .intro-content h2,
    .why-content h2,
    .offer-content h2,
    .cta-section h2 {
        font-size:
            2rem;
    }

    .btn {
        min-height:
            49px;

        padding:
            12px 21px;

        font-size:
            13px;
    }

    .service-card,
    .price-card {
        padding:
            25px 20px;
    }
}

/* Keep navbar labels stable on hover and active states. */
header nav ul li a,
header nav ul li a:hover,
header nav ul li a:focus,
header nav ul li a.active,
header nav ul li a[aria-current="page"] {
    font-size: .84rem;
    transform: none;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity:
            1;

        transform:
            none;
    }
}

/* Shared inner-page hero sizing. */
.sectionFirst {
    min-height: 520px !important;
}

@media (max-width: 900px) {
    .sectionFirst {
        min-height: 480px !important;
    }
}

@media (max-width: 600px) {
    .sectionFirst {
        min-height: 400px !important;
    }
}

@media (max-width: 380px) {
    .sectionFirst {
        min-height: 370px !important;
    }
}

/* Shared navbar sizing across every page. */
header {
    min-height: 78px !important;
}

header.scrolled {
    min-height: 68px !important;
}

@media (max-width: 900px) {
    header {
        min-height: 74px !important;
    }
}

@media (max-width: 600px) {
    header,
    header.scrolled {
        min-height: 70px !important;
    }
}

@media (max-width: 380px) {
    header,
    header.scrolled {
        min-height: 66px !important;
    }
}

/* Refined Why Choose section hierarchy. */
.why-section {
    padding-top: 125px;
    padding-bottom: 125px;
}

.why-content .section-label {
    margin-bottom: 18px;
    padding: 4px 9px;
    background: var(--primary);
    color: var(--white);
    font-size: 11px;
    letter-spacing: 1.8px;
    line-height: 1.2;
}

.why-content h2 {
    max-width: 620px;
    margin-bottom: 24px;
    font-size: clamp(3rem, 4.8vw, 4.5rem);
    line-height: 1.04;
}

.why-content > p {
    max-width: 590px;
    margin-bottom: 34px;
    font-size: 15px;
    line-height: 1.85;
}

.why-list {
    gap: 23px;
}

@media (max-width: 900px) {
    .why-section {
        padding-top: 85px;
        padding-bottom: 85px;
    }

    .why-content h2 {
        font-size: clamp(2.8rem, 7vw, 4rem);
    }
}

@media (max-width: 600px) {
    .why-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .why-content h2 {
        font-size: clamp(2.6rem, 12vw, 3.4rem);
    }
}