/* ============================================
   COMPLETE PRODUCT.CSS - EXACT FIGMA MATCH
   ============================================ */

/* RESET & BASE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

:root {
    /* Colors from Figma */
    --primary-blue: #015bf8;
    --secondary-blue: #01d0fc;
    --gradient: linear-gradient(90deg, #01d0fc 0%, #015bf8 100%);
    --text-primary: #000000;
    --text-secondary: #868686;
    --text-white: #ffffff;
    --bg-cream: #f4f0e9;
    /* Was #f1f1f1 -- only 15/255 off #bg-white, so .hero (and body, which
       shares this same variable) had no visible contrast against the
       white cards floating on top of them. Darkened enough to read as a
       deliberate light-gray canvas instead of an accidental non-color. */
    --bg-light: #e7e9ec;
    --bg-white: #ffffff;
    --bg-dark: #181f1f;
    --border-color: #ebebeb;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Container */
    --container-width: 1200px;
    --container-wide: 1440px;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-family);
    color: var(--text-primary);
    background: var(--bg-light);
    line-height: 1.6;
}

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

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

button {
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.hero-content {
    /* style.css defines a bare, unscoped .hero-content as a
       display:grid two-column layout (built for the homepage's own
       hero pattern) and loads before this file -- without overriding
       display/grid-template-columns here, that leaks in and silently
       splits this page's title/subtitle/buttons stack into two grid
       columns instead of a plain vertical block. Also override its
       margin-bottom (60px, meant for that other layout). */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* ============================================
   NAVIGATION
   ============================================ */
.navbar {
    position: sticky;
    top: 0;
    background: var(--bg-white);
    z-index: 1000;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.nav-container {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.nav-logo img {
    height: 50px;
    width: auto;
}

.nav-menu {
    display: none;
}

.nav-link {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
    transition: color 0.3s ease;
}

.nav-link.active {
    color: var(--primary-blue);
}

.nav-actions {
    display: none;
}

.nav-login {
    font-size: 18px;
    font-weight: 400;
    margin-top: 11px;
}

.mobile-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 28px;
}

.mobile-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--text-primary);
    border-radius: 2px;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--gradient);
    color: var(--text-white);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(1, 91, 248, 0.3);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 32px;
    background: var(--text-secondary);
    color: var(--text-white);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
}

.btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--text-primary);
    color: var(--text-white);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 400;
}

.btn-white {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--bg-white);
    color: var(--text-primary);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 400;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 32px;
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--text-primary);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
}

.btn-large {
    padding: 14px 28px;
    font-size: 17px;
}

.btn-xl {
    padding: 18px 36px;
    font-size: 18px;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    /* NOTE: index-responsive.css defines a global (unconditional)
       !important .hero padding rule sized for the homepage's phone
       mockup -- without !important here, that silently wins over
       this page's own padding, which has no such graphic. */
    padding: 70px 0 !important;
    background: var(--bg-light);
}

.hero-container {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.hero-title {
    /* style.css's earlier, unscoped .hero-title sets text-align:center
       for a different hero pattern; override explicitly since it
       otherwise wins (this file never set text-align of its own). */
    text-align: left;
    font-size: clamp(28px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
}

.hero-subtitle {
    text-align: left;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 420px;
    margin-bottom: 28px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-image {
    max-width: 440px;
    margin-left: auto;
    width: 100%;
}

.video-card {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    border: 8px solid #01d0fc;
    /* Fixed so every product page's hero card renders the same size --
       without this, .video-card img's height:100% falls back to auto
       (the parent has no definite height), so the card's own height
       ends up driven by whatever aspect ratio that page's photo happens
       to have. Matches the reference photo used on /website-builder. */
    aspect-ratio: 2300 / 2588;
}

.video-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none;
}

.video-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-overlay {
    position: absolute;
    z-index: 1;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
}

.play-btn {
    width: 50px;
    height: 50px;
    background: var(--bg-white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.video-text {
    max-width: 78%;
}

.video-caption {
    color: var(--text-white);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    text-align: left;
    margin: 0 0 6px;
}

.video-attribution {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    margin: 0;
}

.video-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

.video-dots .dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

.video-dots .dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--text-white);
}

/* ============================================
   APPOINTMENTS SECTION
   ============================================ */
.appointments-section {
    padding: 60px 0;
    background: var(--bg-white);
    border-radius: 70px;
    margin: 30px 0;
}

.section-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 40px;
}

.section-title.text-center {
    text-align: center;
}

.appointments-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
    align-items: center;
}

.card-image img {
    width: 100%;
    border-radius: 20px;
}

.appointment-features {
    display: flex;
    flex-direction: column;
    gap: 52px;
    justify-content: center;
}

.feature-item h3 {
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 10px;
}

.feature-item p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ============================================
   PROVEN SECTION
   ============================================ */

.proven-section {
    background: var(--bg-light);
    padding: 80px 0;
}

.section-container {
    max-width: 1240px;
    margin: auto;
    padding: 0 24px;
}

.section-title {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 50px;
}

/* ===== TOP GRID ===== */
.design-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #1a3a5c 0%, #0b0f14 100%);
    border-radius: 36px;
    -webkit-border-radius: 36px;
    -moz-border-radius: 36px;
    -ms-border-radius: 36px;
    -o-border-radius: 36px;
}

/* LEFT IMAGE CARD */
.design-search-card img {
    width: 100%;
    max-width: 500px;
}

/* RIGHT TEXT CARD */
.design-feature-box {
    background: transparent;
    border-radius: 36px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.design-feature-box h3 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
}

.badge {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
}

/* ===== BOTTOM GRID ===== */
.design-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.booking-card {
    background: #fff;
    border-radius: 36px;
    padding: 30px;
}

.booking-card img {
    width: 100%;
    border-radius: 18px;
}

.booking-card2nd img {
    width: 100%;
    border-radius: 18px;
}

.booking-card2ndp1 {
    background: #fff;
    border-radius: 36px;
    padding: 30px;
    padding-right: 0px !important;
}

.booking-card2ndp1 img {
    width: 100%;
    border-radius: 18px;
}

.booking-card1st img {
    width: 100%;
    /* margin-top: 183px; */
    /* border-radius: 18px; */
}

.booking-data {
    background-color: #fff;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    padding: 30px;
}

.booking-data h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #6c6f75;
}

.booking-data p {
    font-size: 36px;
    font-weight: 600;
    color: #181f1f;
    white-space: inherit;
}


@media (max-width: 991px) {
    .design-main-grid {
        grid-template-columns: 1fr;
    }

    .design-bottom-grid {
        grid-template-columns: 1fr;
    }

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


/* ============================================
   FAQ SECTION
   ============================================ */
.faq-section {
    padding: 60px 0;
    background: var(--bg-white);
    border-radius: 70px;
    margin-top: 30px;
    /* padding-top: 160px; */
}

.faq-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    /* margin-top: 30px; */
}

.faq-container-single {
    grid-template-columns: 1fr !important;
    max-width: 1040px;
    margin: 0 auto;
}

.faq-left {
    margin-top: 40px;
}

.faq-item {
    /* border-bottom: 2px solid var(--border-color); */
    padding: 20px 0;
}

/* The open item gets its own highlighted panel (padding moves from
   vertical-only to all sides so the panel reads as a distinct card),
   so it's obvious at a glance which answer is currently showing. Kept
   in sync with the near-identical rule in product-animations.css,
   which is the one that actually wins the cascade on every page that
   loads both files (it does on all of them today) since it's linked
   after this stylesheet. */
.faq-item[open] {
    background: var(--bg-cream);
    border-radius: 24px;
    padding: 24px 28px;
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    font-size: clamp(19px, 2.4vw, 24px);
    font-weight: 600;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: var(--text-primary);
}

.faq-item[open] .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    padding-top: 12px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.testimonial-card-dark {
    background: var(--bg-dark);
    border-radius: 20px;
    padding: 30px 10px;
    color: var(--text-white);
}

.testimonial-card-dark img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 20px;
}

.testimonial-card-dark blockquote {
    font-size: clamp(16px, 3vw, 18px);
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 20px;
}

.testimonial-author {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.author-role {
    color: var(--text-secondary);
}

/* ============================================
   TESTIMONIALS CAROUSEL
   ============================================ */
/* ============================================
   TESTIMONIALS CAROUSEL
   ============================================ */

.testimonials-carousel {
    background: #f6f1e9;
    padding: 60px 0;
    border-radius: 70px;
    position: relative;
    overflow: visible;
}

.carousel-container {
    max-width: 1440px;
    margin: auto;
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

/* DECORATIVE BACKGROUND IMAGES - FIXED POSITION */
.bg-left,
.bg-right {
    position: absolute;
    width: 132px;
    z-index: 1;
}

.bg-left {
    left: 155px;
    top: 112px;
}

.bg-right {
    right: 155px;
    top: 117px;
}

/* SLIDER WRAPPER */
.slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* CAROUSEL TRACK - SLIDING CONTAINER */
.carousel-track {
    display: flex;
    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 40px 0;
    will-change: transform;
}

/* TESTIMONIAL SLIDE WRAPPER */
.testimonial-slide {
    min-width: 100%;
    flex-shrink: 0;
}

/* MAIN CARD */
.testimonial-card {
    background: #fff;
    border-radius: 40px;
    display: grid;
    grid-template-columns: 420px 1fr;
    overflow: hidden;
    height: 450px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    max-width: 1176px;
    margin: 0 auto;
}

/* LEFT IMAGE */
.testimonial-image {
    position: relative;
    height: 100%;
}

.testimonial-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-labels {
    position: absolute;
    bottom: 70px;
    left: 40px;
}

.label {
    color: #fff;
    display: block;
    width: fit-content;
    margin-bottom: 6px;
    font-size: 24px;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.label-sub {
    color: #fff;
    display: block;
    width: fit-content;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.95;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* RIGHT CONTENT */
.testimonial-content {
    padding: 50px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testimonial-content1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quote {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 600;
    margin-bottom: 156px;
    color: #333;
}

/* STATS */
.stats {
    display: flex;
    gap: 50px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.stat-item h3 {
    font-size: 32px;
    font-weight: 700;
    color: #2c2c2c;
    margin-bottom: 8px;
}

.stat-item p {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

/* BUTTON */
.story-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #efebe3;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    width: fit-content;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    margin-top: 20px;
    justify-content: end;
}

.story-btn:hover {
    background: #e5dfd4;
    transform: translateX(5px);
}

.story-btn img {
    transition: transform 0.3s ease;
    width: 8px;
    height: 12px;
}

.story-btn:hover img {
    transform: translateX(3px);
}

/* PAGINATION DOTS */
.carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

.carousel-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d4cec1;
    border: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0;
    position: relative;
    overflow: hidden;
}

.carousel-dots .dot:hover {
    transform: scale(1.3);
    background: #999;
}

.carousel-dots .dot.active {
    width: 40px;
    border-radius: 5px;
    background: #e8e4dc;
    animation: dotPulse 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Progress Bar Inside Active Dot */
.carousel-dots .dot.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #4a90e2 0%, #357abd 100%);
    border-radius: 5px;
    animation: progressBar 5s linear forwards;
}

@keyframes dotPulse {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.1);
    }

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

@keyframes progressBar {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* MOBILE */
@media (max-width: 1024px) {
    .testimonial-card {
        grid-template-columns: 320px 1fr;
    }

    .testimonial-content {
        padding: 30px 40px;
    }

    .bg-left {
        left: 50px;
    }

    .bg-right {
        right: 50px;
    }
}

@media (max-width: 768px) {
    .testimonials-carousel {
        padding: 60px 0;
        border-radius: 40px;
    }

    .carousel-container {
        padding: 0 15px;
    }

    .testimonial-card {
        height: auto;
        grid-template-columns: 1fr;
    }

    .testimonial-image {
        height: 280px;
    }

    .image-labels {
        left: 30px;
        bottom: 20px;
    }

    .testimonial-content {
        padding: 30px;
    }

    .stats {
        gap: 30px;
    }

    .stat-item h3 {
        font-size: 26px;
    }

    .bg-left,
    .bg-right {
        width: 80px;
    }

    .bg-left {
        left: 20px;
        top: 40px;
    }

    .bg-right {
        right: 20px;
        top: 40px;
    }
}

/* ============================================
   GUIDES SECTION
   ============================================ */
.guides-section {
    padding: 60px 0;
    background: #f8f8f8;
    padding-bottom: 150px;
    margin-bottom: -100px;
    /* bottom radius */
    border-radius: 0px 0px 70px 70px;
}

.guides-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.guides-header h2 {
    font-size: clamp(24px, 4vw, 45px);
    font-weight: 600;
    line-height: 1.2;
}

.btn-dark {
    background: #111;
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.guides-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
}

.guide-large,
.guide-small {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: clamp(320px, 30vw, 460px);
}

.guide-large img,
.guide-small img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Dark scrim so the white overlay text/play button stay readable no
   matter how bright the underlying photo is. */
.guide-large::after,
.guide-small::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none;
}

.guide-small .guide-link {
    font-size: 16px;
    /* slightly smaller for small image */
}

.guide-small .guide-play {
    width: 40px;
    /* smaller play button */
    height: 40px;
}

.guide-overlay {
    position: absolute;
    z-index: 1;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

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

.guide-link {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.guide-label {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    margin-top: 4px;
}

.guide-play {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: auto;
    margin-left: auto;
}

/* ============================================
   BOOKING CTA
   ============================================ */
.booking-cta {
    padding: 40px 0;
    background: #181F1F;
    padding-bottom: 100px;
    margin-bottom: 0px;
}

.booking-cta-title {
    font-size: clamp(24px, 5vw, 40px);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--text-white);
    margin-bottom: 60px;
    margin-top: 190px;
}

.booking-banner {
    background: #343a3a;
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    max-width: 700px;
    margin: 0 auto;
}

.booking-banner {
    position: relative;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: stretch;
}

.booking-image {
    width: 100%;
    /* border-radius: 16px; */
    object-fit: none;
}


/* .booking-image {
  width: 100%;
  height: auto;
  object-fit: cover;
} */

.booking-text {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 👈 bottom */
    align-items: flex-start;
    /* 👈 right */
    text-align: left;
    margin-top: auto;
}

.booking-icon {
    position: absolute;
    top: 16px;
    right: 16px;

    width: 44px;
    height: 44px;
    border-radius: 50%;

    background: #181F1F;
    /* circle color */
    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.booking-icon img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}


.booking-icon img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.booking-text h3 {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.booking-text p {
    font-size: 14px;
    font-weight: 500;
    color: #666;
    max-width: 360px;
}

@media (max-width: 768px) {
    .booking-banner {
        grid-template-columns: 1fr;
    }

    .booking-text {
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .booking-icon {
        right: 12px;
        top: 12px;
    }
}

.booking-text {
    padding: 30px 20px;
    /* text-align: center; */
    color: var(--text-white);
}

.booking-text h3 {
    font-size: 1.7rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.booking-text p {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ============================================
   GROWTH CTA - MOBILE IMAGE FIX
   ============================================ */
.growth-cta {
    padding: 60px 0;
    background: var(--bg-dark);
    color: var(--text-white);
}

.growth-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto 30px;
    border-radius: 20px;
    object-fit: contain;
}

.growth-title {
    font-size: clamp(24px, 5vw, 40px);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 24px;
}

/* ============================================
   FINAL CTA
   ============================================ */
.final-cta {
    padding: 60px 0;
    background: var(--bg-light);
}

.final-cta h2 {
    font-size: clamp(20px, 4vw, 36px);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ============================================
   FOOTER - RESPONSIVE IMAGE FIX
   ============================================ */
.footer {
    background: var(--bg-white);
    border-radius: 70px 70px 0 0;
    padding: 60px 0 30px;
    margin-top: 40px;
}

.footer-container {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 20px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

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

.footer-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
    align-items: center;
    text-align: center;
}

.footer-bottom p {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ============================================
   TABLET (768px+)
   ============================================ */
@media (min-width: 768px) {
    .nav-container {
        padding: 0 40px;
    }

    .nav-menu {
        display: flex;
        gap: 28px;
    }

    .nav-actions {
        display: flex;
        gap: 16px;
    }

    .mobile-toggle {
        display: none;
    }

    .hero-container {
        grid-template-columns: 1.35fr 1fr;
        align-items: center;
        gap: 60px;
        padding: 0 40px;
    }

    .section-container {
        padding: 0 40px;
    }

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

    .design-main-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .corner-img {
        width: 80px;
        height: 80px;
    }


    .branding-treatments-grid {
        grid-template-columns: 1fr 1fr;
    }

    .faq-container {
        grid-template-columns: 2fr 0.6fr;
    }

    .testimonial-large {
        grid-template-columns: 380px 1fr;
    }

    .testimonial-image img {
        height: 100%;
    }

    .guides-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .guides-grid {
        grid-template-columns: 2fr 1fr;
    }

    .booking-banner {
        grid-template-columns: 220px 1fr;
    }

    .growth-image {
        max-width: 600px;
    }

    .footer-top {
        gap: 40px;
    }

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

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .carousel-container {
        padding: 0 40px;
    }
}

/* ============================================
   DESKTOP (1024px+)
   ============================================ */
@media (min-width: 1024px) {
    .design-main-grid {
        grid-template-columns: 1fr 1fr;
    }

    .corner-img {
        width: 100px;
        height: 100px;
    }

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

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

    .footer-cta {
        flex-direction: row;
    }
}

/* ============================================
   UTILITY
   ============================================ */
.text-center {
    text-align: center;
}

.d-flex {
    display: flex;
    gap: 10px;
}

.cta-text {
    z-index: 1;
}

/* MOBILE */

.booking-cta {
    padding: 40px 0;
    padding-bottom: 200px !important;
    margin-bottom: -160px !important;
    z-index: -1;
    position: relative;
}


.image-hero {
    position: relative;

}


.growth-cta {
    position: relative;
    /* background: #0f1e2e; */
    background-image: url('/main-assets/images/car-detailing-hero.png');
    z-index: 1;

    padding: 100px 0 120px;
    overflow: hidden;
    /* 👈 YAHI MAIN FIX */
}

.image-hero {
    /*position: relative;
  */
    margin-top: 220px;
    height: 600px;
    background-color: var(--primary-blue, #015bf8);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='7' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0.28 0.28 0.28 0 0.42 0.28 0.28 0.28 0 0.42 0.28 0.28 0.28 0 0.42 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
        url('/main-assets/images/footer-cta-bg.jpg');
    background-blend-mode: multiply, normal;
    background-size: 420px 420px, cover;
    background-position: center;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 70px;
    z-index: 2;
    margin-right: 0 !important;
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    -ms-border-radius: 70px;
    -o-border-radius: 70px;
}

.image-hero-phone {
    position: absolute;
    right: 6%;
    bottom: -140px;
    height: 155%;
    width: auto;
    z-index: 1;
    pointer-events: none;
    animation: heroPhoneFloat 4.5s ease-in-out infinite;
}

@keyframes heroPhoneFloat {

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

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

@media (prefers-reduced-motion: reduce) {
    .image-hero-phone {
        animation: none;
    }
}

/* dark overlay for readability */
.image-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    /* background: rgba(0,0,0,0.35); */
}

/* text container */
.image-hero-overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 300px;
    max-width: 1000px;
    color: #fff;
}

.image-hero-overlay h1 {
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 20px;
}

.image-hero-btn-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-ghost-light {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease;
}

.btn-ghost-light:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* .growth-image {
    position: absolute;
    left: 50%;
    bottom: -140px;
    transform: translateX(-50%);
    max-width: 1500px;
    width: 100%;
    border-radius: 24px;
    z-index: 1;
} */

.text-dark {
    color: #000;
}

.growth-title {
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 24px;
    color: #ffffff;
    z-index: 2;
}

.growth-cta .btn-white {
    padding: 14px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .growth-image {
        max-width: 85%;
        bottom: -90px;
    }

    .growth-cta {
        padding: 80px 0 140px;
    }
}

.proven-section {
    background: var(--bg-light);
    padding: 80px 0;
}

.section-container {
    max-width: 1270px;
    margin: auto;
    padding: 0 24px;
}

.section-title {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 50px;
}

/* ===== TOP GRID ===== */
.design-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #1a3a5c 0%, #0b0f14 100%);
    border-radius: 36px;
    -webkit-border-radius: 36px;
    -moz-border-radius: 36px;
    -ms-border-radius: 36px;
    -o-border-radius: 36px;
    padding: 40px;
}

/* LEFT IMAGE CARD */
.design-search-card {
    background: transparent;
    border-radius: 36px;
    /* padding: 20px; */
    display: flex;
    align-items: center;
    /* justify-content: center; */
    padding-left: unset;
}

/* seo-video-card was previously unstyled and just happened to look
   right with the old video's smaller native pixel size (784x716) --
   constrain it explicitly so it doesn't overflow its column. */
.seo-visual-wrapper,
.seo-video-card {
    width: 100%;
    max-width: 500px;
}

.seo-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 36px;
}

/* VIDEO MOCKUP CONTAINER */
.video-mockup-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-mockup-container .main-mockup {
    width: 100%;
    display: block;
}

/* OVERLAY VIDEO */
.overlay-video {
    position: absolute;
    top: 52%;
    left: 54%;
    background-color: white;
    padding: 20px;
    transform: translate(-50%, -50%);
    width: 86%;
    height: auto;
    max-width: 100%;
    border-radius: 40px;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
}

/* Show video when playing */
.overlay-video.playing {
    opacity: 1;
}

/* Hide video controls and icons */
.overlay-video::-webkit-media-controls {
    display: none !important;
}

.overlay-video::-webkit-media-controls-enclosure {
    display: none !important;
}

.overlay-video::-webkit-media-controls-panel {
    display: none !important;
}

/* RIGHT TEXT CARD */
.design-feature-box {
    background: transparent;
    border-radius: 36px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.design-feature-box h3 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
}

.badge {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
}


/* ===== BOTTOM GRID ===== */
.design-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.booking-card {
    background: #fff;
    border-radius: 36px;
    padding: 30px;
}


@media (max-width: 991px) {
    .design-main-grid {
        grid-template-columns: 1fr;
    }

    .design-bottom-grid {
        grid-template-columns: 1fr;
    }

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

    .overlay-video {
        width: 80%;
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 24px;
    }

    .design-search-card {
        padding: 20px;
    }

    .overlay-video {
        width: 75%;
        border-radius: 8px;
    }
}

/* ===== BOTTOM GRID ===== */
.design-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}

/* LEFT CARD */
.booking-cardp1 {
    border-radius: 32px;
    overflow: hidden;
}

.booking-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 440px;
}

.booking-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-text-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: anchor-center;
    padding: 60px;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0.65) 100%);
}

.booking-text-overlay h3 {
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.3;
    max-width: 90%;
}

/* RIGHT CARD */
.booking-card-ai {
    background: #ffffff;
    border-radius: 32px;
    padding: 40px;
    padding-right: 0;
    padding-bottom: 0;
}

/* INNER 2 COLUMN LAYOUT */
.ai-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    height: 100%;
    align-items: center;
}

/* LEFT TEXT */
.ai-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 20px;
}

.ai-badge {
    font-size: 15px;
    /* color: #8b8f94; */
    font-weight: 600;
    margin-bottom: 12px;
}

.ai-main {
    display: flex;
    gap: 16px;
}

.ai-icon {
    width: 44px;
    height: 44px;
    /* background: #f5f7fa; */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-main h3 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    color: #121212;
    max-width: 320px;
}

/* RIGHT IMAGE */
.email-preview {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: 58px;
}

.email-preview img {
    width: 240px;
    /* margin-bottom: 20px;
    margin-right: 20px; */
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* GRID */
.design-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}

/* RIGHT CARD */
.booking-card2nd {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
}

.booking-card2nd img {
    width: 100%;
    display: block;
    border-radius: 32px;
}

/* TEXT OVER IMAGE — RIGHT BOTTOM */
.booking-card2nd .text-overlay {
    position: absolute;
    bottom: 58px;
    right: 313px;
    text-align: left;
    color: #fff;
}

.booking-card2nd .text-overlay .small-heading {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 4px 0;
}

.booking-card2nd .text-overlay .main-heading {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}


/* GRID */
.ratings-app-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.ratings-card-left {
    position: relative;
    background: #ffffff;
    border-radius: 32px;
    padding: 40px;
    overflow: hidden;
}

.rating-float img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.rating-float strong {
    font-size: 14px;
}

.mt-50 {
    margin-top: 50px;
}

.rating-float p {
    font-size: 12px;
    margin: 2px 0;
    color: #555;
}

.rating-float span {
    font-size: 13px;
    font-weight: 600;
}

/* POSITIONS — MATCH IMAGE */
.rating-one {
    top: 230px;
    left: 300px;
}

.rating-two {
    top: 328px;
    left: 20px;
}

.rating-three {
    top: 425px;
    left: 300px;
}

/* RIGHT CARD */
.ratings-card-right {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
}

/* IMAGE FULL WIDTH */
.ratings-card-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* TEXT OVER IMAGE */
.app-text {
    position: absolute;
    top: 32px;
    left: 32px;
    z-index: 2;
    color: #fff;
    max-width: 70%;
}

.app-text span {
    font-size: 13px;
    opacity: 0.85;
}

.app-text h4 {
    font-size: 22px;
    margin-top: 6px;
    line-height: 1.3;
}


@media (max-width: 991px) {
    .rating-float {
        position: static;
        width: 100%;
        margin-top: 16px;
    }
}

.ratings-badge {
    font-size: 13px;
    color: #7b7f85;
}

.ratings-title {
    font-size: 30px;
    font-weight: 700;
    margin: 16px 0 32px;
    line-height: 1.25;
    color: #121212;
}


.rating-float {
    position: absolute;
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    row-gap: 6px;
    background: #F1F1F3;
    padding: 18px 20px;
    border-radius: 12px;
    width: 285px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

/* LOGO */
.rating-float img {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

/* NAME + STARS */
.rating-content {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* DESCRIPTION — START FROM LOGO EDGE */
.rating-float p {
    grid-column: 1 / -1;
    /* 👈 FULL WIDTH */
    font-size: 13px;
    line-height: 1.35;
    color: #5f6368;
    margin: 6px 0 0;
}

.appointment-features {
    display: flex;
    flex-direction: column;
    gap: 52px;
    justify-content: center;
}

/* Feature row */
.feature-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Icon box */
.feature-icon {
    width: 48px;
    height: 48px;
    background: var(--bg-cream);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon img {
    width: 22px;
    height: 22px;
}

/* Text */
.feature-text h3 {
    font-size: clamp(19px, 3vw, 28px);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}

.feature-text p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}
/* ============================================
   PROVEN SECTION - BOTTOM GRID
   (fresh, uniquely-named classes -- avoids the
   legacy .design-bottom-grid/.booking-card* rules
   that collide across this file's duplicate blocks)
   ============================================ */
.proven-bottom-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
}

@media (min-width: 768px) {
    .proven-bottom-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.proven-card {
    border-radius: 36px;
    padding: 44px;
    overflow: hidden;
    position: relative;
    min-height: 690px;
    display: flex;
    flex-direction: column;
}

.proven-card-left {
    background: #e2dbd1;
}

.proven-card-right {
    background: #fff;
}

.proven-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #6c6f75;
    margin-bottom: 10px;
}

.proven-heading {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #0b0f14;
    max-width: 420px;
}

/* Stacked menu-item cards */
.menu-stack {
    position: relative;
    margin: 70px auto 0;
    width: 100%;
    max-width: 400px;
    height: 220px;
}

.menu-stack-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.menu-card {
    position: absolute;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.menu-card-back {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 16px;
    left: 50%;
    transform: translateX(-50%);
}

.menu-card-back .menu-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #6c6f75;
}

.menu-badge {
    position: absolute;
    top: -11px;
    right: -7px;
    background: #6fcf7f;
    color: #0b3d17;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.menu-add-btn {
    position: absolute;
    bottom: -9px;
    right: -9px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0b0f14;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Phone showcase */
.phone-showcase {
    position: relative;
    flex: 1;
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
}

.phone-showcase-bg {
    position: absolute;
    left: -44px;
    right: -44px;
    bottom: -44px;
    height: 70%;
    background:
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0px,
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px,
            transparent 16px),
        var(--gradient);
    border-radius: 32px 32px 0 0;
}

.phone-showcase-image {
    position: relative;
    z-index: 1;
    width: 96%;
    max-width: 340px;
    height: auto;
    filter: drop-shadow(0 35px 45px rgba(0, 0, 0, 0.3));
}

/* Shared tilted-phone-with-notch frame -- also reused as-is by
   mobile-app.blade.php's .mobileapp-phone-back/-front (see its own
   comment) and by .phone-screen alone on a couple of other pages, so
   this stays generic rather than folded into any one page's styles. */
.phone-mockup-tilted {
    position: relative;
    width: 240px;
    height: 420px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 44px;
    padding: 10px;
    transform: rotate(9deg);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.25);
}

.phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 74px;
    height: 20px;
    background: #0b0f14;
    border-radius: 12px;
    z-index: 2;
}

.phone-side-btn {
    position: absolute;
    background: #d7dade;
    border-radius: 3px;
}

.phone-side-btn-1 {
    left: -3px;
    top: 100px;
    width: 3px;
    height: 26px;
}

.phone-side-btn-2 {
    left: -3px;
    top: 138px;
    width: 3px;
    height: 44px;
}

.phone-side-btn-3 {
    right: -3px;
    top: 120px;
    width: 3px;
    height: 54px;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 36px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (max-width: 991px) {
    /* .proven-bottom-grid/.design-main-grid collapse to a single column at
       this same breakpoint (see the max-width:991px rules above), so the
       card's height needs to relax here too -- otherwise cards go
       full-width but keep the two-column layout's tall fixed height,
       leaving a large empty gap below their (now full-width) content. */
    .proven-card {
        min-height: auto;
    }
}

@media (max-width: 767px) {
    .proven-card {
        padding: 32px;
    }

    .phone-mockup-tilted {
        width: 200px;
        height: 350px;
    }
}