:root {
    --primary-color: #FF7438;
    --secondary-color: #E8BA00;
    --tertiary-color: #CC202D;
    --quaternary-color: #4FAE4B;
    --quinary-color: #235EAC;
}

@font-face {
    font-family: "Integral CF Regular";
    src: url("https://db.onlinewebfonts.com/t/f1fcc5aed1e20fc0cdb9f8a7573625bd.eot");
    src: url("https://db.onlinewebfonts.com/t/f1fcc5aed1e20fc0cdb9f8a7573625bd.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/f1fcc5aed1e20fc0cdb9f8a7573625bd.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/f1fcc5aed1e20fc0cdb9f8a7573625bd.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/f1fcc5aed1e20fc0cdb9f8a7573625bd.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/f1fcc5aed1e20fc0cdb9f8a7573625bd.svg#Integral CF Regular")format("svg");
}


.open-sans-regular {font-family: "Open Sans", sans-serif !important;}

body {
    font-family: "Integral CF Regular", sans-serif;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

.fs-10 { font-size: 10px; }
.fs-12 { font-size: 12px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fs-24 { font-size: 24px; }
.fs-26 { font-size: 26px; }
.fs-28 { font-size: 28px; }
.fs-30 { font-size: 30px; }
.fs-32 { font-size: 32px; }
.fs-34 { font-size: 34px; }
.fs-36 { font-size: 36px; }
.fs-38 { font-size: 38px; }
.fs-40 { font-size: 40px; }
.fs-42 { font-size: 42px; }
.fs-44 { font-size: 44px; }
.fs-46 { font-size: 46px; }
.fs-48 { font-size: 48px; }
.fs-50 { font-size: 50px; }
.fs-52 { font-size: 52px; }
.fs-54 { font-size: 54px; }
.fs-56 { font-size: 56px; }
.fs-58 { font-size: 58px; }
.fs-60 { font-size: 60px; }
.fs-62 { font-size: 62px; }
.fs-64 { font-size: 64px; }
.fs-66 { font-size: 66px; }
.fs-68 { font-size: 68px; }
.fs-70 { font-size: 70px; }
.fs-72 { font-size: 72px; }
.fs-74 { font-size: 74px; }
.fs-76 { font-size: 76px; }
.fs-78 { font-size: 78px; }
.fs-80 { font-size: 80px; }
.fs-82 { font-size: 82px; }
.fs-84 { font-size: 84px; }
.fs-86 { font-size: 86px; }
.fs-88 { font-size: 88px; }
.fs-90 { font-size: 90px; }
.fs-92 { font-size: 92px; }
.fs-94 { font-size: 94px; }
.fs-96 { font-size: 96px; }
.fs-98 { font-size: 98px; }
.fs-100 { font-size: 100px; }
.fs-102 { font-size: 102px; }
.fs-104 { font-size: 104px; }
.fs-106 { font-size: 106px; }
.fs-108 { font-size: 108px; }
.fs-110 { font-size: 110px; }
.fs-112 { font-size: 112px; }
.fs-114 { font-size: 114px; }
.fs-116 { font-size: 116px; }
.fs-118 { font-size: 118px; }
.fs-120 { font-size: 120px; }
.fs-122 { font-size: 122px; }
.fs-124 { font-size: 124px; }
.fs-126 { font-size: 126px; }

.fw-100 { font-weight: 100; }
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }


.lh-5 { line-height: 5px; }
.lh-10 { line-height: 10px; }
.lh-15 { line-height: 15px; }
.lh-20 { line-height: 20px; }
.lh-25 { line-height: 25px; }
.lh-30 { line-height: 30px; }
.lh-35 { line-height: 35px; }
.lh-40 { line-height: 40px; }
.lh-45 { line-height: 45px; }
.lh-50 { line-height: 50px; }
.lh-55 { line-height: 55px; }
.lh-60 { line-height: 60px; }
.lh-65 { line-height: 65px; }
.lh-70 { line-height: 70px; }
.lh-75 { line-height: 75px; }
.lh-80 { line-height: 80px; }
.lh-85 { line-height: 85px; }
.lh-90 { line-height: 90px; }
.lh-95 { line-height: 95px; }
.lh-100 { line-height: 100px; }
.lh-102 { line-height: 102px; }
.lh-104 { line-height: 104px; }
.lh-106 { line-height: 106px; }
.lh-108 { line-height: 108px; }
.lh-110 { line-height: 110px; }
.lh-112 { line-height: 112px; }
.lh-114 { line-height: 114px; }
.lh-116 { line-height: 116px; }
.lh-118 { line-height: 118px; }
.lh-120 { line-height: 120px; }
.lh-122 { line-height: 122px; }
.lh-124 { line-height: 124px; }
.lh-126 { line-height: 126px; }


.ls-1 { letter-spacing: 1; }
.ls-2 { letter-spacing: 2; }
.ls-3 { letter-spacing: 3; }
.ls-4 { letter-spacing: 4; }
.ls-5 { letter-spacing: 5; }
.ls-6 { letter-spacing: 6; }
.ls-7 { letter-spacing: 7; }
.ls-8 { letter-spacing: 8; }
.ls-9 { letter-spacing: 9; }
.ls-10 { letter-spacing: 10; }


.bg-primary { background-color: var(--primary-color)!important; }
.bg-secondary { background-color: var(--secondary-color)!important; }
.bg-tertiary { background-color: var(--tertiary-color)!important; }
.bg-quaternary { background-color: var(--quaternary-color)!important; }

.text-primary { color: var(--primary-color)!important; }
.text-secondary { color: var(--secondary-color)!important; }
.text-tertiary { color: var(--tertiary-color)!important; }
.text-quaternary { color: var(--quaternary-color)!important; }

/* Bootstrap Utility Classes for Text Rotation */
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-270 { transform: rotate(270deg); }
.rotate-360 { transform: rotate(360deg); }

/* Vertical Text Writing Mode */
.text-vertical {
    writing-mode: vertical-lr;
    text-orientation: mixed;
}

/* Custom Letter Spacing */
.ls-05 { letter-spacing: 0.05em; }
.ls-1 { letter-spacing: 0.1em; }
.ls-2 { letter-spacing: 0.2em; }
.ls-3 { letter-spacing: 0.3em; }
.ls-4 { letter-spacing: 0.4em; }
.ls-5 { letter-spacing: 0.5em; }

/* Additional Bootstrap Utility Classes */
.text-nowrap { white-space: nowrap; }
.text-break { word-wrap: break-word; word-break: break-word; }

/* Custom spacing utilities */
.mt-6 { margin-top: 4rem; }
.mb-6 { margin-bottom: 4rem; }
.py-6 { padding-top: 4rem; padding-bottom: 4rem; }
.px-6 { padding-left: 4rem; padding-right: 4rem; }

/* Custom width utilities */
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }

.btn-red {
    background-color: var(--tertiary-color);
    color: white;
}

.btn-red:hover {
    background-color: var(--tertiary-color);
    color: white;
    transform: translateY(-2px);
}

/* Promo Section Styles */
.promo-content {
    color: #000;
    line-height: 1.4;
}

.promo-content h2,
.promo-content h3 {
    line-height: 1.2;
}

.promo-content .text-danger {
    color: var(--tertiary-color) !important;
}

.promo-content ul li {
    position: relative;
    padding-left: 0.5rem;
}

/* .promo-content ul li::before {
    content: "•";
    color: #000;
    font-weight: bold;
    position: absolute;
    left: -1rem;
} */

.pricing-info p {
    line-height: 1.3;
}

/* Hero Section Styles */
/* .hero-section {
    min-height: 100vh;
    overflow: hidden;
} */

/* .hero-left {
    background-color: #343a40;
    min-height: 100vh;
} */
/* 
.hero-right {
    min-height: 100vh;
    overflow: hidden;
} */

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 2rem;
    text-align: center;
    background: linear-gradient(transparent, rgba(0,0,0,0.3));
}
/* 
.hero-content {
    max-width: 800px;
    width: 100%;
} */

/* Highlight Text for "SAY YES" */
/* .highlight-text {

    color: white;
    padding: 0.5rem 1rem;
    display: inline-block;
    border-radius: 4px;
} */

/* Hero Separator Lines */
.hero-separator {
    border: none;
    height: 2px;
    background-color: white;
    opacity: 1;
    margin: 1.5rem 0;
}

/* Property Details Styling */
.property-details h2,
.property-details h3,
.property-details h4 {
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

/* Price Section */
.price-section {
    margin: 2rem 0;
}

.price-section .display-1 {
    font-size: 4.5rem;
    line-height: 1;
}

/* Payment Info */
.payment-info p {
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

/* CTA Button */
/* .cta-section .btn {
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
} */
/* 
.cta-section .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
} */


/* Hero Slider Styles */
.hero-slider {
    height: 100%;
    position: relative;
    min-height: 400px; /* Ensure minimum height */
}

.hero-slider .carousel-inner {
    height: 100%;
}

.hero-slider .carousel-item {
    height: 100%;
    position: relative;
    min-height: 400px; /* Ensure minimum height for videos */
}

.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next {
    width: 50px;
    height: 50px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.hero-slider .carousel-control-prev {
    left: 20px;
}

.hero-slider .carousel-control-next {
    right: 20px;
}

.hero-slider .carousel-control-prev:hover,
.hero-slider .carousel-control-next:hover {
    opacity: 1;
    background-color: rgba(0,0,0,0.8);
}

.hero-slider .carousel-indicators {
    bottom: 20px;
    margin-bottom: 0;
}

.hero-slider .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
    border: 2px solid rgba(255,255,255,0.8);
    margin: 0 5px;
}

.hero-slider .carousel-indicators .active {
    background-color: rgba(255,255,255,0.9);
    border-color: rgba(255,255,255,1);
}

/* Carousel Styles */
.interior-image-container {
    height: 500px;
    overflow: hidden;
    /* border-radius: 15px; */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

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

.carousel-indicators {
    bottom: -50px;
}

.carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: 2px solid var(--secondary-color);
    margin: 0 5px;
}

.carousel-indicators .active {
    background-color: var(--secondary-color);
    border-color: var(--primary-color);
}

.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    height: 50px;
    background-color: var(--quinary-color);
   
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.carousel-control-prev {
    left: -50px;
}

.carousel-control-next {
    right: -50px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
    background-color: var(--primary-color);
}

.carousel-caption {
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    border-radius: 0 0 15px 15px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
}

.carousel-caption h5 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.carousel-caption p {
    color: #f8f9fa;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* Hero Slider Responsive */
@media (max-width: 768px) {
    .hero-slider .carousel-control-prev,
    .hero-slider .carousel-control-next {
        width: 40px;
        height: 40px;
    }
    
    .hero-slider .carousel-control-prev {
        left: 10px;
    }
    
    .hero-slider .carousel-control-next {
        right: 10px;
    }
    
    .hero-slider .carousel-indicators {
        bottom: 10px;
    }
    
    .hero-slider .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        margin: 0 3px;
    }
    
}

/* Mobile-specific video styles */
@media (max-width: 768px) {
    .hero-video {
        /* Ensure videos don't interfere with touch events */
        pointer-events: none;
        /* Ensure video covers the container properly */
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    .hero-slider {
        /* Ensure touch events work on mobile */
        touch-action: manipulation;
        /* Ensure proper height */
        height: 300px;
        min-height: 300px;
    }
    
    .hero-slider .carousel-item {
        height: 300px;
        min-height: 300px;
    }
    
    .hero-slider .carousel-inner {
        height: 300px;
    }
}

/* Carousel Responsive */
@media (max-width: 768px) {
    .interior-image-container {
        height: 300px;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 40px;
        height: 40px;
    }
    
    .carousel-control-prev {
        left: 10px;
    }
    
    .carousel-control-next {
        right: 10px;
    }
    
    .carousel-caption {
        padding: 1rem;
    }
    
    .carousel-caption h5 {
        font-size: 1.2rem;
    }
    
    .carousel-caption p {
        font-size: 0.9rem;
    }
}

/* Registration Form Section Styles */
.registration-form .form-control,
.registration-form .form-select {
    background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important;
    border: 2px solid white;
    border-radius: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: white;
}

/* Placeholder Styling */
.registration-form .form-control::placeholder {
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 1;
}

.registration-form .form-control:focus::placeholder {
    color: white;
}

/* Select Placeholder Styling */
.registration-form .form-select option:disabled {
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.registration-form .form-control:focus,
.registration-form .form-select:focus {
    border-color: white;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    background-color: var(--quaternary-color);
    color: white;
}

.registration-form .form-label {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.registration-form .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

/* Container Styling */
/* .registration-form-section .container {
    max-width: 1200px;
} */

.registration-form-section .row {
    min-height: 600px;
}

/* Form Container Styling */
.form-container {
    max-width: 500px;
}

/* Left Section Styling */
/* .left-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
} */

.bottom-content {
    margin-top: auto;
}

/* Price Section Styling */
.price-section .text-vertical {
    writing-mode: vertical-lr;
    text-orientation: mixed;
}

/* Copyright Text Styling */
.copyright-section p {
    line-height: 1.4;
    opacity: 0.8;
}

/* Button Styling */
.registration-form .btn {
    border-radius: 40px;
    font-size: 1.1rem;
    letter-spacing: 1px;
    transition: all 0.3s 
ease;
    width: 30% !important;
}

.registration-form .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
/* iPad (portrait and landscape) */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero-section .row {
        flex-direction: row;
    }

    .hero-content {
        padding: 3rem 2rem;
    }

    .fs-92 {
        font-size: 72px;
    }

    .fs-100 {
        font-size: 65px;
    }

    .fs-70 {
        font-size: 56px;
    }

    .fs-46 {
        font-size: 40px;
    }

    .fs-48 {
        font-size: 42px;
    }

    .fs-32 {
        font-size: 28px;
    }

    .price-section .fs-72 {
        font-size: 3.5rem;
    }

    .form-container {
        max-width: 90%;
    }

    .registration-form .btn {
        width: 60% !important;
        font-size: 1rem;
    }

    .interior-image-container {
        height: 350px;
    }
}

/* Tablet and below (991.98px) */
@media (max-width: 991.98px) {
    .fs-92 {
        font-size: 63px;
    }

    .fs-100 {
        font-size: 65px;
    }

    .fs-70 {
        font-size: 50px;
    }

    .fs-46 {
        font-size: 36px;
    }
    
    .fs-48 {
        font-size: 38px;
    }
    
    .fs-32 {
        font-size: 24px;
    }
    /* Hero Section */
    .hero-section .row {
        flex-direction: column;
    }
    
    .hero-section .col-lg-5,
    .hero-section .col-lg-7 {
        min-height: 50vh;
    }
    
    
    /* Ensure hero right section has proper height for video */
    .hero-section .col-lg-7 {
        height: 300px;
        min-height: 300px;
    }
    
    /* Ensure hero slider has proper height on mobile */
    .hero-slider {
        min-height: 300px;
    }
    
    .hero-slider .carousel-item {
        min-height: 300px;
    }
    
    .hero-content {
        padding: 2rem 1rem;
    }
    
  
    
    .property-details h2,
    .property-details h3,
    .property-details h4 {
        font-size: 1.5rem;
    }
    
    .price-section .fs-72 {
        font-size: 3rem;
    }
    
    .payment-info p {
        font-size: 1rem;
    }
    
    .hero-overlay h1 {
        font-size: 2.5rem;
    }
    
    /* Promo Section */
    .promo-content h2 {
        font-size: 2rem;
    }
    
    .promo-content h3 {
        font-size: 1.5rem;
    }
    
    .promo-content ul {
        font-size: 1.1rem;
    }
    
    .promo-content .pricing-info p {
        font-size: 1.2rem;
    }
    
    /* Carousel */
    .interior-image-container {
        height: 400px;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 45px;
        height: 45px;
    }
    
    .carousel-control-prev {
        left: 15px;
    }
    
    .carousel-control-next {
        right: 15px;
    }
    
    /* Registration Form */
    .registration-form-section .row {
        flex-direction: column;
        min-height: auto;
    }
    
    .registration-form-section .col-lg-6 {
        min-height: auto;
    }
    
    .left-content {
        padding: 1rem 0;
    }
    
    .headline-section h1 {
        font-size: 2rem;
    }
    
    .price-section .fs-48 {
        font-size: 2.5rem;
    }
    
    .logo-section h2 {
        font-size: 2rem;
    }
}

/* Mobile (767.98px) */
@media (max-width: 767.98px) {
    /* Hero Section */
    .hero-slider {
        height: 250px;
        min-height: 250px;
    }
    
    .hero-slider .carousel-item {
        height: 250px;
        min-height: 250px;
    }
    
    .hero-slider .carousel-inner {
        height: 250px;
    }
    
    /* Ensure hero right section has proper height for video on mobile */
    .hero-section .col-lg-7 {
        height: 250px;
        min-height: 250px;
    }
    
    .property-details h2,
    .property-details h3,
    .property-details h4 {
        font-size: 4.25rem;
    }
    
    .price-section .fs-72 {
        font-size: 2.5rem;
    }
    
    .payment-info p {
        font-size: 1.9rem;
    }
    
    .hero-overlay h1 {
        font-size: 2rem;
    }
    
    .cta-section .btn {
        font-size: 1rem;
        padding: 0.75rem 2rem;
    }
    
    /* Promo Section */
    .promo-content h2 {
        font-size: 1.5rem;
    }
    
    .promo-content h3 {
        font-size: 1.25rem;
    }
    
    .promo-content ul {
        font-size: 1rem;
    }
    
    .promo-content .pricing-info p {
        font-size: 1.1rem;
    }
    
    /* Carousel */
    .interior-image-container {
        height: 300px;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 40px;
        height: 40px;
    }
    
    .carousel-control-prev {
        left: 10px;
    }
    
    .carousel-control-next {
        right: 10px;
    }
    
    .carousel-caption {
        padding: 1rem;
    }
    
    .carousel-caption h5 {
        font-size: 1.2rem;
    }
    
    .carousel-caption p {
        font-size: 0.9rem;
    }
    
    /* Registration Form */
    .registration-form-section .col-lg-6 {
        padding: 2rem 1rem;
    }
    
    .headline-section h1 {
        font-size: 1.5rem;
    }
    
    .price-section .fs-72 {
        font-size: 2rem;
    }
    
    .logo-section h2 {
        font-size: 1.5rem;
    }
    
    .form-container h2 {
        font-size: 1.5rem;
    }
    
    .registration-form .form-control,
    .registration-form .form-select {
        font-size: 0.9rem;
        padding: 0.6rem 0.8rem;
    }
    
    .registration-form .btn {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }
}

/* Small Mobile (575.98px) */
@media (max-width: 575.98px) {
    .videologo {
        width: 100px !important;
    }
    /* General */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Hero Section - Very small screens */
    .hero-slider {
        height: 200px;
        min-height: 200px;
    }
    
    .hero-slider .carousel-item {
        height: 200px;
        min-height: 200px;
    }
    
    .hero-slider .carousel-inner {
        height: 200px;
    }
    
    /* Ensure hero right section has proper height for video on very small screens */
    .hero-section .col-lg-7 {
        height: 200px;
        min-height: 200px;
    }
    
    /* Font Size Overrides */
    .fs-64 { font-size: 32px; }
    .fs-56 { font-size: 36px; }
    .fs-52 { font-size: 26px; }
    .fs-48 { font-size: 24px; }
    .fs-46 { font-size: 23px; }
    .fs-40 { font-size: 20px; }
    .fs-38 { font-size: 19px; }
    .fs-36 { font-size: 18px; }
    .fs-48 { font-size: 24px; }
    .fs-36 { font-size: 20px; }
    .fs-32 { font-size: 18px; }
    .fs-28 { font-size: 16px; }
    .fs-24 { font-size: 14px; }
    .fs-20 { font-size: 52px; }
    .fs-18 { font-size: 12px; }
    .fs-16 { font-size: 11px; }
    .fs-14 { font-size: 10px; }
    .fs-12 { font-size: 9px; }
    .fs-10 { font-size: 8px; }
    
    /* Hero Section */
    .hero-content {
        padding: 1.5rem 1rem;
    }
    

    
    .highlight-text {
        padding: 0.25rem 0.75rem;
    }
    
    .price-section .fs-72 {
        font-size: 2rem;
    }
    
    .hero-overlay {
        padding: 1rem;
    }
    
    .hero-overlay h1 {
        font-size: 1.5rem;
    }
    
    /* Promo Section */
    .promo-content h2 {
        font-size: 1.25rem;
    }
    
    .promo-content h3 {
        font-size: 1.1rem;
    }
    
    .promo-content ul {
        font-size: 0.9rem;
    }
    
    .promo-content .pricing-info p {
        font-size: 1rem;
    }
    
    /* Carousel */
    .interior-image-container {
        height: 250px;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 35px;
        height: 35px;
    }
    
    .carousel-control-prev {
        left: 5px;
    }
    
    .carousel-control-next {
        right: 5px;
    }
    
    .carousel-caption h5 {
        font-size: 1rem;
    }
    
    .carousel-caption p {
        font-size: 0.8rem;
    }
    
    /* Registration Form */
    .registration-form-section .col-lg-6 {
        padding: 1.5rem 1rem;
    }
    
    .headline-section h1 {
        font-size: 3.25rem;
    }
    
    .price-section .fs-72 {
        font-size: 1.75rem;
    }
    
    .logo-section h2 {
        font-size: 1.25rem;
    }
    
    .form-container h2 {
        font-size: 1.25rem;
    }
    
    .registration-form .form-control,
    .registration-form .form-select {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }
    
    .registration-form .btn {
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
        width: 50% !important;
    }
    
    .copyright-section p {
        font-size: 0.7rem;
    }
}

/* Landscape Mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
    .hero-section .col-lg-5,
    .hero-section .col-lg-7 {
        min-height: 40vh;
    }
    
    .registration-form-section .col-lg-6 {
        min-height: 40vh;
    }
    
    .interior-image-container {
        height: 200px;
    }
}


@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 375px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

    .fs-92 {
        font-size: 47px;
    }
    .fs-100 {
        font-size: 44px;
    }
    .fs-70 {
        font-size: 40px;
    }
    .fs-46 {
        font-size: 36px;
    }

    .videologo {
        width: 100px !important;
    }
    /* iPhone 5, 5S, 5C, SE (1st gen), 6, 6S, 7, 8 portrait */
    .hero-section .col-lg-5,
    .hero-section .col-lg-7 {
        min-height: 30vh;
    }

    .hero-slider {
        height: 220px !important;
        min-height: 220px !important;
    }

    .hero-slider .carousel-item,
    .hero-slider .carousel-inner {
        height: 220px !important;
        min-height: 220px !important;
    }

    .interior-image-container {
        height: 180px !important;
    }

    .hero-headline h1,
    .hero-headline .fs-100,
    .hero-headline .fs-70 {
        font-size: 2rem !important;
    }

    .property-details h2,
    .property-details h3,
    .property-details h4 {
        font-size: 1.2rem !important;
    }

    .price-section .fs-92 {
        font-size: 2.2rem !important;
    }

    .payment-info.fs-32 {
        font-size: 1.1rem !important;
    }

    .cta-section .btn {
        font-size: 1rem !important;
        padding: 0.5rem 1rem !important;
        width: 100% !important;
    }

    .registration-form .form-control,
    .registration-form .form-select {
        font-size: 0.9rem !important;
        padding: 0.4rem 0.6rem !important;
    }

    .copyright-section p {
        font-size: 0.6rem !important;
    }
}


/* ========================================
   THANK YOU PAGE STYLES
   ======================================== */


.confirmation-section {
    background-color: var(--primary-color); /* Green background */
    min-height: 50vh;
    display: flex;
    align-items: center;
}

.property-details-section {
    background-color: #2c2c2c; /* Dark grey/black background */
    min-height: 50vh;
    display: flex;
    align-items: center;
}

/* Logo Header Styles */
.logo-header h1 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    letter-spacing: 0.2em;
}

.logo-small h4 {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    letter-spacing: 0.15em;
}

/* Thank You Content */


/* .confirmation-text p {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    max-width: 800px;
    margin: 0 auto;
} */

/* Property Info Styles */
.property-title h3 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 0.1em;
}

.price-display {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.price-display .text-vertical {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    margin-right: 1rem;
}



/* ========================================
   THANK YOU PAGE RESPONSIVE DESIGN
   ======================================== */

/* Tablet and below (991.98px) */
@media (max-width: 991.98px) {

    
    .confirmation-section,
    .property-details-section {
        min-height: 50vh;
    }
    
    .logo-header h1 {
        font-size: 3.5rem;
    }
    
    .thank-you-content h2 {
        font-size: 2.5rem;
    }
    
    .confirmation-text {
        font-size: 1.1rem;
    }
    
    .property-title h3 {
        font-size: 2.5rem;
    }
    
    .price-display .fs-72 {
        font-size: 3rem;
    }
    
    .logo-small h4 {
        font-size: 2rem;
    }
    
    .copyright-text p {
        font-size: 0.9rem;
    }
    
    .financing-details p {
        font-size: 0.8rem;
    }
}

/* Mobile (767.98px) */
@media (max-width: 767.98px) {
    .confirmation-section,
    .property-details-section {
        min-height: 50vh;
        padding: 2rem 0;
    }
    
    .logo-header h1 {
        font-size: 2.5rem;
    }
    
    .thank-you-content h2 {
        font-size: 1.8rem;
    }
    
    .confirmation-text {
        font-size: 1rem;
    }
    
    .property-title h3 {
        font-size: 1.8rem;
    }
    
    .price-display .fs-72 {
        font-size: 2.5rem;
    }
    
    .logo-small h4 {
        font-size: 1.5rem;
    }
    
    .copyright-text p {
        font-size: 0.8rem;
    }
    
    .financing-details p {
        font-size: 0.7rem;
    }
    
    .price-display {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .price-display .text-vertical {
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        transform: none;
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

/* Small Mobile (575.98px) */
@media (max-width: 575.98px) {
    .confirmation-section,
    .property-details-section {
        padding: 1.5rem 0;
    }
    
    .logo-header h1 {
        font-size: 2rem;
    }
    
    .thank-you-content h2 {
        font-size: 1.5rem;
    }
    
    .confirmation-text {
        font-size: 0.9rem;
    }
    
    .property-title h3 {
        font-size: 1.5rem;
    }
    
    .price-display .fs-72 {
        font-size: 2rem;
    }
    
    .logo-small h4 {
        font-size: 1.25rem;
    }
    
    .copyright-text p {
        font-size: 0.7rem;
    }
    
    .financing-details p {
        font-size: 0.65rem;
    }
}