:root {
            --brand-brown-rgb: 61, 58, 54;
            --brand-brown-dark: rgb(var(--brand-brown-rgb)); 
            --brand-brown-medium: #8c786a;
            --brand-brown-light: #c7b299;
            --brand-link-active: #007755;
            --brand-shadow-rgb: 90, 40, 0;
            --brand-bg: #f8f7f5;
        }

        body {
            font-family: 'Lato', sans-serif;
            color: #666;
            background-color: var(--brand-bg);
            font-size: 13pt;
        }
        
        
        
        /* Patterned Background for sections */
        .section-bg-pattern {
            background-image: url("/assets/img/bk-column-1800x.jpg");
            background-color: var(--brand-bg);
            /* Ensure container has padding for the divider */
            padding-bottom: 2rem; 
        }
        
        /* Custom Heading Font */
        .font-script {
            font-family: 'Great Vibes', cursive;
            font-weight: normal;
            font-size: 4rem;
            color: var(--brand-brown-medium);
        }

        /* Header & Navbar */
        .navbar {
            background-color: rgba(248, 247, 245, 0.9);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        /* Brand/Logo Text */
        .navbar-brand {
            font-family: 'Great Vibes', cursive;
            font-size: 2.2rem;
            /* It is okay to keep !important here if you don't want the logo to change color */
            color: var(--brand-brown-dark) !important; 
        }
        
        .navbar-brand img {
            height: 56px;
            margin-bottom: 10px;
        }
        
        /* Flag Icons */
        .lang-flag {
            width: 32px;
            height: auto;
            border: 1px solid #ddd;
        }
        
        /* --- MENU LINKS (The fixed part) --- */
        
        /* 1. Default State */
        .navbar-nav .nav-link {
            /* Font styles from the old code */
            font-size: 0.9rem;
            font-weight: 700;
            text-transform: uppercase;
            margin: 0 0.5rem;
            
            /* Color without !important so it can change */
            color: var(--brand-brown-dark);
            
            /* Smooth transition effect */
            transition: color 0.3s ease;
        }
        
        /* 2. Hover & Active State */
        /* This turns the text lighter brown when hovered or on the current page */
        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active {
            color: var(--brand-link-active);
        }
        /* Hero Section */
        #hero {
            position: relative;
            height: 85vh;
            min-height: 600px;
            background: url('/assets/img/bk7.jpg') no-repeat center center;
            background-size: cover;
            color: white;
        }
        #hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.1);
        }
        #hero .content {
            position: relative;
            z-index: 1;
        }

        /* 1. Add shadow to the Main Title */
        #hero h1 {
            font-family: 'Great Vibes', cursive;
            font-size: 7rem;
            font-weight: normal;
            text-shadow: 2px 2px 1px rgba(var(--brand-shadow-rgb), 0.8);
        }
        
        /* 2. Add shadow to the Slogan/Subtitle */
        #hero p {
            font-size: 1.4rem;
            letter-spacing: 2px;
            /* Slightly smaller shadow for smaller text */
            text-shadow: 2px 2px 1px rgba(var(--brand-shadow-rgb), 0.8);
            font-weight: 700;
        }



        /* Custom Button */
        .btn-outline-custom {
            border: 2px solid var(--brand-brown-medium);
            color: var(--brand-brown-medium);
            padding: 10px 30px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 0;
            transition: all 0.3s ease;
        }
        .btn-outline-custom:hover {
            background-color: var(--brand-brown-medium);
            color: white;
        }
        .btn-outline-custom-white {
            border-color: white;
            color: white;
        }
        .btn-outline-custom-white:hover {
            background-color: white;
            color: var(--brand-brown-dark);
        }

        /* Content Sections */
        .section-title {
            margin-bottom: 2rem;
        }
        
        /* Delimiter Style */
        .section-divider {
            border: 0;
            height: 1px;
            background-image: linear-gradient(to right, rgba(140, 120, 106, 0), rgba(140, 120, 106, 0.75), rgba(140, 120, 106, 0));
            margin-top: 4rem;
            margin-bottom: 1rem;
            opacity: 0.6;
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }

        /* Optional: Add a symbol in the middle of the line (using Pseudo-element) */
        .section-divider-symbol {
            text-align: center;
            margin-top: 3rem;
            margin-bottom: 1rem;
            position: relative;
        }
        .section-divider-symbol::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 10%;
            width: 35%;
            height: 1px;
            background: var(--brand-brown-medium);
            opacity: 0.3;
        }
        .section-divider-symbol::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 10%;
            width: 35%;
            height: 1px;
            background: var(--brand-brown-medium);
            opacity: 0.3;
        }
        .section-divider-symbol span {
            color: var(--brand-brown-medium);
            font-size: 1.5rem;
            padding: 0 10px;
        }

        .img-grid img {
            transition: transform 0.3s ease;
        }
        .img-grid img:hover {
            transform: scale(1.05);
        }
        
        /* Booking Section */
        .booking-box-container {
            position: relative;
        }
        .booking-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(100, 84, 69, 0.85);
            color: white;
            padding: 2rem 3rem;
            text-align: center;
        }
        .booking-box h3 {
            font-size: 2.5rem;
            font-weight: 300;
            letter-spacing: 1px;
        }

        /* Footer */
        footer {
            background-color: var(--brand-brown-dark);
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }
        footer h5 {
            color: white;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 1.5rem;
        }
        footer a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
        }
        footer a:hover {
            color: white;
        }
        .footer-links li {
            margin-bottom: 0.5rem;
        }
        .copyright {
            background-color: #33302c;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.8rem;
        }
        
        /* Responsive Adjustments */
        @media (max-width: 991.98px) {
            #hero h1 {
                font-size: 5rem;
            }
            .font-script {
                font-size: 3rem;
            }
            /* Adjust spacing on mobile */
            .section-title {
                margin-bottom: 1rem;
            }
        }

        @media (max-width: 767.98px) {
            #hero {
                height: 70vh;
                min-height: 500px;
            }
            #hero h1 {
                font-size: 4rem;
            }
            #hero p {
                font-size: 1rem;
            }
            .booking-box {
                position: static;
                transform: none;
                margin-top: 1.5rem;
            }
        }
        
        
        /* --- ROOMS PAGE & DETAIL STYLES --- */
        
        /* Page Header Section */
        .page-header-section {
            background: linear-gradient(rgba(61, 58, 54, 1), rgba(61, 58, 54, 1)), url('/assets/img/bk1.jpg');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 4rem 0;
            text-align: center;
            margin-bottom: 0;
        }
        
        .page-header-section h1 {
            font-family: 'Great Vibes', cursive;
            font-size: 5.4rem;
            text-shadow: 2px 2px 1px rgba(var(--brand-shadow-rgb), 0.8);
            margin-bottom: 0;
        }

        .rooms-introtext {
            font-size: 1.1rem;
        }

        /* Room Cards (From original page) */
        .room-card {
            border: none;
            background-color: #fff;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            transition: all 0.3s ease-in-out;
            height: 100%;
            margin-bottom: 2rem;
            display: flex;
            flex-direction: column;
        }

        .room-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .room-img-container {
            position: relative;
            height: 220px;
            overflow: hidden;
        }

        .room-img-container img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: 50% var(--img-focus-y, 50%);
          transition: transform 0.6s ease;
        }

        .room-card:hover .room-img-container img {
            transform: scale(1.1);
        }

        .room-card-body {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .room-number {
            color: var(--brand-link-active);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.85rem;
            margin-bottom: 1.1rem;
        }

        .room-title {
            font-family: 'Great Vibes', cursive;
            font-size: 2.4rem;
            line-height: 1;
            margin-bottom: 1rem;
            color: var(--brand-brown-dark);
        }

        .room-card-body p {
            font-size: 1.05rem;
            color: #666;
            line-height: 1.5;
            margin-bottom: 0.1rem;
            flex-grow: 1;
        }

        .room-price-cta {
            border-top: 1px solid #eee;
            padding-top: 1rem;
            text-align: center;
        }

        /* --- ROOM DETAIL PAGE SPECIFIC STYLES --- */
        
        
        .room-detail-title {
            font-family: 'Great Vibes', cursive;
            font-size: 3.5rem;
            color: var(--brand-brown-dark);
            line-height: 1;
            margin-bottom: 0.5rem;
        }

        .room-detail-column p {
            
            color: #666;
        }

        /* --- Template Texte --- */
        
        .page-header-section-texte {
            background: linear-gradient(rgba(61, 58, 54, 0.05), rgba(61, 58, 54, 0.05)), url('/assets/img/bk1.jpg');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 4rem 0;
            text-align: center;
            margin-bottom: 0;
        }
        
        .page-header-section-texte h1 {
            font-family: 'Great Vibes', cursive;
            font-size: 5.4rem;
            text-shadow: 2px 2px 1px rgba(var(--brand-shadow-rgb), 0.8);
            margin-bottom: 0;
        }

        @media (max-width: 767.98px) {
            .page-header-section-texte h1, .page-header-section h1 {
                font-size: 3.5rem;
            }
            .room-detail-title {
                font-size: 2.6rem;
            }
        }
        .section-divider-texte{
            border: 0;
            height: 1px;
            background-image: linear-gradient(to right, rgba(140, 120, 106, 1), rgba(140, 120, 106, 0.5), rgba(140, 120, 106, 0));
            margin-top: 1rem;
            margin-bottom: 1rem;
            opacity: 0.6;
            width: 50%;
            margin-left: 0;
        }
        
        /* --- Meniu texte --- */
        
        .sidemenu{
            list-style-type: disc;
        }
        
        .sidemenu .texte-link {
            font-size: 1.1rem;
            font-weight: 400;
            margin: 0 0rem;
            color: var(--brand-brown-dark);
            transition: color 0.3s ease;
        }
        
        .sidemenu .texte-link:hover, .sidemenu .texte-link.active {
            color: var(--brand-link-active);
        }
        
        .sidemenu li a{
            text-decoration: none;
        }
        
        .menu-texte p  {
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--brand-link-active) !important;
        }


        /* --- Contact --- */
        
        .contact-text h3  {
            font-weight: 700;
            font-size: 1.4rem;
            color: var(--brand-link-active) !important;
        }        
        
        .contact-text p  {
            font-weight: 400;
            font-size: 1rem;
        }
        
         .contact-text a{
            text-decoration: none;
            color: var(--brand-link-active);
        }
        
        .section-divider-contact{
            border: 0;
            height: 1px;
            background-image: linear-gradient(to right, rgba(140, 120, 106, 1), rgba(140, 120, 106, 0.5), rgba(140, 120, 106, 0));
            margin-top: 1rem;
            margin-bottom: 1rem;
            opacity: 0.6;
            width: 60%;
            margin-left: 0;
        }
        
        .section-divider-contact-sm{
            border: 0;
            height: 1px;
            background-image: linear-gradient(to right, rgba(140, 120, 106, 0.3), rgba(140, 120, 106, 1), rgba(140, 120, 106, 0.3));
            opacity: 0.6;
            width: 60%;
            margin: auto;
            margin-bottom: 2rem;
            margin-top: 1rem;
        }
        
        .map-col iframe{
            border:1px solid var(--brand-brown-medium);
            padding:4px;
        }
        
        
        
        /* Mobile Menu Styling (only applies to screens < 992px) */
        @media (max-width: 991.98px) {
            
            .navbar-collapse {
                border-top: 1px solid rgba(0,0,0,0.1);
                margin-top: 0.5rem;
                padding: 1rem 0; /* Vertical padding for the whole block */
            }

            .navbar-nav {
                    padding-left: 0.5rem;
            }
        
            .navbar-nav .nav-link {
                /* Indent the text */
                padding-left: 1rem; 
                position: relative; /* Needed to anchor the icon */
            }
        
            /* Create the icon/bullet */
            .navbar-nav .nav-link::before {
                content: "»";  /* You can change this to "•" or "→" */
                position: absolute;
                left: 0;       /* Stick it to the left edge */
                top: 50%;      /* Center vertically */
                transform: translateY(-50%);
                
                /* Style the icon */
                font-weight: bold;
                color: var(--brand-link-active); /* Use your active color for the icon */
                font-size: 1.2rem;
                line-height: 1;
            }
            
            /* Make the active link stand out more on mobile */
            .navbar-nav .nav-link.active {
                background-color: rgba(0,0,0,0.03); /* Subtle background highlight */
                border-radius: 4px;
            }
        }