:root {
            --color-primary: #1a1a1a;
            --color-gold: #D1B16D;
            --color-gold-hover: #b09060;
            --color-bg-light: #fbf9f6;
            --color-white: #ffffff;
            
            /* Font Variables */
            --font-h1: 'Instrument Serif', serif;
            --font-h2: 'Bricolage Grotesque', sans-serif;
            --font-p: 'Poppins', sans-serif;
        }

        body {
            font-family: var(--font-p);
            color: var(--color-primary);
            background-color: var(--color-bg-light);
            overflow-x: hidden;
        }

        /* --- Typography Mappings based on request --- */
        
        /* Specific class for the H1 style requested: Instrument Serif 400 Italic 40px */
        .style-h1 {
            font-family: var(--font-h1);
            font-style: italic;
            font-weight: 400;
            font-size: 40px; /* As requested */
            line-height: 1.2;
        }

        /* Specific class for the H2 style requested: Bricolage Grotesque 700 Bold 52px */
        .style-h2 {
            font-family: var(--font-h2);
            font-weight: 700;
            font-size: 52px; /* As requested */
            line-height: 1.1;
        }

        /* Specific class for the main paragraph text requested: Poppins Regular 30px */
        .style-p-large {
            font-family: var(--font-p);
            font-weight: 400;
            font-size: 27px; /* As requested */
            line-height: 1.6;
            color: #4a4a4a;
        }

        /* Utility helper for smaller text places (footer, cards) where 30px is too big */
        .text-regular {
            font-size: 16px;
        }
        .bg-cream{
            background-color: #FFFBF2;
        }
        /* --- Components --- */

        /* Buttons */
        .btn-gold {
            background-color: var(--color-gold);
            color: var(--color-primary);
            font-weight: 600;
            text-transform: uppercase;
            padding: 20px 30px;
            border: none;
            border-radius: 0;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        }
        .btn-gold:hover {
            background-color: var(--color-gold-hover);
            color: var(--color-white);
        }

        .btn-outline-light-custom {
            border: 1px solid rgba(255,255,255,0.5);
            color: white;
            text-transform: uppercase;
            font-size: 14px;
            padding: 10px 25px;
            border-radius: 0;
        }
        .btn-outline-light-custom:hover {
            background: white;
            color: black;
        }
        html {
            scroll-behavior: smooth;
        }    
        /* Navbar */
        .navbar {
            background: rgba(0,0,0,0); /* Transparent dark for visibility over hero */
            padding: 20px 0;
            position: absolute;
            width: 100%;
            z-index: 1000;
        }
        .navbar .container{
            padding-bottom: 20px;
            border-bottom: 1px solid #FFFFFF1A;
        }
        .nav-link {
            color: white !important;
            text-transform: uppercase;
            font-size: 14px;
            margin: 0 15px;
            letter-spacing: 1px;
        }
        .navbar ul li:last-child {
            display: none;
        }

        /* Hero Section */
        .hero-section {
            height: 60vh;
            min-height: 600px;
            background: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0)), url('img/Hero-section.jpg') no-repeat center center;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding-top: 80px;
        }
        .hero-section .text-warning{
            color: #fff !important;
        }
        .hero-section .text-warning img{
            max-width: 100px;
        }
        .hero-title {
            font-family: var(--font-h2);
            font-size: 6rem;
            line-height: 1;
            margin-bottom: 20px;
        }
        
        .hero-subtitle {
            font-family: var(--font-h1); /* Using the serif font for the elegant text above title */
            font-size: 1.5rem;
            color: #ddd;
            margin-bottom: 10px;
        }

        /* Welcome Section */
        .section-welcome {
            padding: 100px 0;
            background:linear-gradient(#C8A3583B, #fff), url('img/Garlog-bg-img.svg') no-repeat top center;
            background-size: cover;
        }
        .welcome-grid img {
            width: 100%;
            height: auto;
            object-fit: cover;
            margin-bottom: 20px;
        }
        .welcome-grid figure{
            overflow: hidden;
        }
        /*
        .welcome-grid figure img {
            -webkit-transform: rotate(15deg) scale(1.4);
            transform: rotate(15deg) scale(1.4);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .welcome-grid figure:hover img {
            -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
        }
        /*

        /* Apartment Cards */
        .apartment-card {
            border: none;
            transition: transform 0.3s;
            height: 100%;
        }
        .apartment-card img {
            height: 250px;
            object-fit: cover;
        }
        .apartment-card .apt-details img {
            width: 17px;
            height: auto;
            object-fit: cover;
            margin-left: 25px;
        }
        .apartment-card .apt-details img:first-child{
            margin-left: 0px;
        }
        .apartment-card a img {
            width: 17px;
            height: auto;
            position: relative;
            left: 10px;
        }
        .price-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: url('img/badge.svg') no-repeat center center;
            background-size: 100% 100%;
            padding: 5px 15px;
            font-weight: 400;
            font-family: var(--font-h2);
            padding-left: 30px;
        }
        .apt-details {
            font-size: 14px;
            color: #666;
            margin: 15px 0;
        }
        .apt-details i {
            margin-right: 5px;
            margin-left: 10px;
        }
        .apt-details i:first-child {
            margin-left: 0;
        }
        .more-info-link {
            color: black;
            text-decoration: none;
            font-weight: 700;
            font-size: 14px;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
        }
        .more-info-link i {
            color: var(--color-gold);
            margin-left: 5px;
        }

        /* Carousel Controls */
        .carousel-control-prev, .carousel-control-next {
            width: 50px;
            height: 50px;
            background: white;
            border-radius: 50%;
            top: 25%;
            opacity: 1;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            color: black;
        }
        .carousel-control-prev-icon, .carousel-control-next-icon {
            background-image: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .carousel-control-prev-icon::after {
            content: '\F284'; /* Bootstrap icon chevron-left */
            font-family: "bootstrap-icons";
            color: black;
        }
        .carousel-control-next-icon::after {
            content: '\F285'; /* Bootstrap icon chevron-right */
            font-family: "bootstrap-icons";
            color: black;
        }

        /* Testimonials */
        .testimonial-card {
            background: white;
            padding: 30px;
            border: 1px solid #eee;
            height: 100%;
        }
        .stars {
            color: var(--color-gold);
            margin-bottom: 15px;
        }
        .user-profile {
            display: flex;
            align-items: center;
            margin-top: 20px;
        }
        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ddd;
            margin-right: 15px;
            object-fit: cover;
        }
        .testimonialsbutton .btn{
            width: 45px;
            height: 45px;
            border:1px solid #0000001c;
        }
        .testimonialssextion .testimonial-card .text-regular{
            padding-bottom: 20px;
            border-bottom: 1px solid #DDE5ED;
        }

        /* Specials */
        .special-section {
            padding: 100px 0;
            background-color: #FFFBF2;
        }
        .special-img {
            width: 100%;
            height: 400px;
            object-fit: cover;
        }
        .special-section .text-right button{
            position: relative;
            left: 85px;
            z-index: 1;
            background: #fff;
            border: 1px solid #e5e5e5;
        }
        .special-section .text-left button{
            position: relative;
            right: 40px;
            z-index: 1;
            background: #fff;
            border: 1px solid #e5e5e5;
        }

        /* Luxury Features */
        .luxury-banner {
            text-align: center;
            padding: 80px 0;
        }
        .luxury-text {
            font-family: var(--font-h1);
            font-size: 60px;
            margin-bottom: 40px;
        }
        .luxury-text span {
            color: var(--color-gold);
            font-style: italic;
        }
        .features-list {
            display: flex;
            justify-content: center;
            gap: 15px 40px;
            flex-wrap: wrap;
            font-family: var(--font-p);
            font-size: 18px;
        }

        /* Contact Section */
        .contact-section {
            background-color: #DDC187; /* Beige gold tone */
            position: relative;
        }
        .contact-form-container {
            padding: 80px;
            background: url('img/Contactusimg.svg');
            background-size: cover;
            padding-left: 13%;
        }
        .contact-image {
            background: url('img/tablecontact.jpg') no-repeat bottom left;
            background-size: cover;
            min-height: 100%;
        }
        .form-control-custom {
            background: transparent;
            border: none;
            border-bottom: 1px solid rgba(0,0,0,0.2);
            border-radius: 0;
            padding: 15px 0;
            margin-bottom: 20px;
        }
        .form-control-custom:focus {
            background: transparent;
            box-shadow: none;
            border-color: black;
        }
        .form-control-custom::placeholder {
            color: #333;
            font-weight: 500;
        }
        .mobilecontact{
            display: none;
        }

        /* Footer */
        .footer {
            background: #EFE5D2;
            padding: 60px 0 20px;
            text-align: center;
            border-top: 1px solid #eee;
        }
        .footer-logo-area {
            margin-bottom: 40px;
            font-family: var(--font-h2);
            font-size: 24px;
            font-weight: bold;
        }
        .footer-links{
            border-bottom: 1px solid #D8CFBD;
            border-top: 1px solid #D8CFBD;
            padding: 15px 0px;
        }
        .footer-links a {
            color: #333;
            text-decoration: none;
            margin: 0 25px;
            font-size: 14px;
            text-transform: uppercase;
        }
        .footer i{
            color: #AA8842 !important;
        }
        .footer a {
            color: #999;
        }
        .footer-bottom {
            margin-top: 50px;
            font-size: 12px;
            color: #999;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }
        .singlestar{display: none;}
        .fade-in-text {
            opacity: 0;
            transform: translateY(20px); /* Optional: for a subtle slide-up */
            transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition */
            }

        .fade-in-text.appear {
            opacity: 1;
            transform: translateY(0);
        }
        .reveal-on-scroll {
            visibility: hidden;
        }

        .reveal-on-scroll.animate__animated {
            visibility: visible;
        }
        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .style-h2 { font-size: 36px; }
            .style-p-large { font-size: 18px; } /* Scales down the 30px on mobile for readability */
            .contact-form-container { padding: 40px 20px; }
            .hero-title { font-size: 3.5rem; }
            .luxury-text { font-size: 40px; }
            .hero-section h1{line-height: 1em;}
            .hero-section p{font-size: 1rem;}
            .manystars{display: none;}
            .singlestar{display: inline;}
            .hero-section {
                background: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0)), url('img/hero-img-mb.jpg') no-repeat bottom right;
            }
            .section-welcome{
                padding: 65px 0;
                background-size: auto;
            }
            .carousel-control-prev, .carousel-control-next{
                top: 95%;
            }
            .carousel-control-prev{left: 35% !important;}
            .carousel-control-next{right: 35% !important;}
             .mobilecontact{
                display: block;
                max-width: 100%;
            }
            .luxury-banner {
                padding: 65px 0;
            }
            .navbar-collapse{
                background-color: #D2B16E;
                margin-top: 12px;
            }
            .navbar-collapse .nav-link{
                color: #000 !important;
            }
        }
        
        
.style-p-large a { text-decoration: underline; color: #d9c28e; }

.small p.style-p-small { font-size: 1.0rem; }
.small h2 { font-size: 1.2rem; }

.contact-form h4 { padding-top: 50px; }

.flags { margin: 0 0 0 10px; }
.flags img { margin: 0 10px 0 0 !important; border-radius: 5px !important; }