@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM Sans:ital,wght@0,200..800;1,200..800&family=DM Sans:ital,wght@0,400;0,700;1,400;1,700&family=Philosopher&display=swap');

/*Animations*/
.fadeinleft {
    opacity:0;
    transform: translateX(200px);
    transition: all 1.3s ease-out;
}

.fadeinright{
    opacity: 0;
    transform: translateX(-200px);
    transition: all 0.8s ease-out;
}

.fadeindown{
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1.2s ease-out;
}

.fade-in-up{
    opacity:0;
    transform: translateY(100px);
    transition: all 0.5s ease-in-out;
}

.active-left,.active-right,.active-down{
    opacity:1;
    transform: translateX(0);
    transform: translateY(0);
}

.active-up{
    opacity:1;
    transform: translateX(0);
    transform: translateY(0);
}

  /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.fadein{
opacity: 0;
}   


.fadein{
opacity: 0;
}   

html,body
{
    width: 100%!important;
    height: 100%!important;
    margin: 0px!important;
    padding: 0px;
    overflow-x: hidden!important; 
}


 body.modal-open {
            background: url('../img/aurora-3.png')!important;
            background-size: cover!important;
            background-position: center!important;
            background-attachment: fixed!important;
        }

        body.modal-open::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85)!important;
            z-index: 999;
        }

        

        /* Modal Styles */
        .modal {
            
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            animation: fadeIn 0.3s ease;
        }

        .modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background: url('../img/spa-contact.webp')!important;
            background: white;
            padding: 40px;
            border-radius: 20px;
            width: 90%;
            max-width: 500px;
            position: relative;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            animation: slideUp 0.3s ease;
            max-height: 90vh;
            overflow-y: auto;
            color: white;
        }

        .close-btn {
            position: absolute;
            top: 15px;
            right: 20px;
            background: none;
            border: none;
            font-size: 30px;
            cursor: pointer;
            color: #999;
            transition: color 0.3s ease;
           
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

       

/*Preloader*/

    .preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: linear-gradient(135deg, #492f1d 0%, #A0522D 30%, #D2691E 70%, #8f866b 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        /* Animated background elements */
        .bg-elements {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .floating-leaf {
            position: absolute;
            width: 20px;
            height: 20px;
            background: rgba(139, 69, 19, 0.3);
            border-radius: 0 100% 0 100%;
            animation: float 6s ease-in-out infinite;
        }

        .floating-leaf:nth-child(1) { top: 30%; left: 10%; animation-delay: 0s; }
        .floating-leaf:nth-child(2) { top: 60%; left: 20%; animation-delay: 0s; }
        .floating-leaf:nth-child(3) { top: 30%; right: 15%; animation-delay: 0s; }
        .floating-leaf:nth-child(4) { bottom: 40%; left: 30%; animation-delay: 0s; }
        .floating-leaf:nth-child(5) { top: 50%; right: 25%; animation-delay: 0s; }
         .floating-leaf:nth-child(6) { top: 60%; left: 50%; animation-delay: 0s; }
        .floating-leaf:nth-child(7) { top: 10%; left: 20%; animation-delay: 0s; }
        .floating-leaf:nth-child(8) { top: 80%; right: 75%; animation-delay: 0s; }
        .floating-leaf:nth-child(9) { bottom: 50%; left: 10%; animation-delay: 0s; }
        .floating-leaf:nth-child(10) { top: 90%; right: 25%; animation-delay: 0s; }
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }

        /* Mountain silhouettes */
        .mountains {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 40%;
            background: linear-gradient(to top, rgba(101, 67, 33, 0.3), transparent);
        }

        .mountain {
            position: absolute;
            bottom: 0;
            background: rgba(101, 67, 33, 0.4);
        }

        .mountain-1 {
            left: 0;
            width: 40%;
            height: 60%;
            clip-path: polygon(0 100%, 30% 20%, 100% 100%);
        }

        .mountain-2 {
            right: 0;
            width: 50%;
            height: 80%;
            clip-path: polygon(0 100%, 60% 10%, 100% 100%);
        } 

        /* Logo container */
        .logo-container {
            position: relative;
            z-index: 10;
            margin-bottom: 50px;
            animation: logoGlow 3s ease-in-out infinite;
        }

        .logo {
            width: 300px;
            height: auto;
            filter: drop-shadow(0 0 20px rgba(160, 82, 45, 0.5));
            animation: breathe 4s ease-in-out infinite;
        }

        @keyframes logoGlow {
            0%, 100% { filter: drop-shadow(0 0 20px rgba(160, 82, 45, 0.5)); }
            50% { filter: drop-shadow(0 0 30px rgba(210, 105, 30, 0.7)); }
        }

        @keyframes breathe {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        /* Loading animation */
        .loading-container {
            position: relative;
            z-index: 10;
        }

        .loading-text {
            color: #F5DEB3;
            font-size: 18px;
            font-weight: 300;
            letter-spacing: 2px;
            margin-bottom: 30px;
            text-align: center;
            opacity: 0.9;
            text-shadow: 1px 1px 2px rgba(101, 67, 33, 0.5);
        }

        .progress-bar {
            width: 250px;
            height: 4px;
            background: rgba(101, 67, 33, 0.4);
            border-radius: 2px;
            overflow: hidden;
            position: relative;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #D2691E 0%, #CD853F 50%, #DEB887 100%);
            border-radius: 2px;
            width: 0%;
            animation: progressLoad 4s ease-out forwards;
            box-shadow: 0 0 10px rgba(210, 105, 30, 0.6);
        }

        @keyframes progressLoad {
            0% { width: 0%; }
            100% { width: 100%; }
        }

        /* Nature particles */
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(222, 184, 135, 0.7);
            border-radius: 50%;
            animation: particleFloat 8s linear infinite;
        }

        .particle:nth-child(1) { left: 10%; animation-delay: 0s; }
        .particle:nth-child(2) { left: 20%; animation-delay: 1s; }
        .particle:nth-child(3) { left: 30%; animation-delay: 2s; }
        .particle:nth-child(4) { left: 40%; animation-delay: 3s; }
        .particle:nth-child(5) { left: 50%; animation-delay: 4s; }
        .particle:nth-child(6) { left: 60%; animation-delay: 5s; }
        .particle:nth-child(7) { left: 70%; animation-delay: 6s; }
        .particle:nth-child(8) { left: 80%; animation-delay: 7s; }

        @keyframes particleFloat {
            0% { transform: translateY(100vh) scale(0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100px) scale(1); opacity: 0; }
        }

        /* Fade out animation */
        .preloader.fade-out {
            animation: fadeOut 1s ease-out forwards;
        }

        @keyframes fadeOut {
            0% { opacity: 1; }
            100% { opacity: 0; visibility: hidden; }
        }

        /* Responsive design */
        @media (max-width: 768px) {
            .logo {
                width: 250px;
            }

            .loading-text {
                font-size: 16px;
            }

            .progress-bar {
                width: 200px;
            }
        }

        @media (max-width: 480px) {
            .logo {
                width: 200px;
            }

            .progress-bar {
                width: 180px;
            }
        }


/* Custom dark theme scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #202630;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #be8b65, #222833);
  border-radius: 4px;
  border: 1px solid #1a202c;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #718096, #4a5568);
}

/* Corner where horizontal and vertical scrollbars meet */
::-webkit-scrollbar-corner {
  background: #2d3748;
}


.main_div {
 --color: #3992e6;
 position: relative;
 z-index: 1;
 width: fit-content;
 
}

.main_div::before {
 content: '';
 position: absolute;
 width: 30px;
 height: 30px;
 background: transparent;
 top: -7px;
 left: -7px;
 z-index: -5;
 border-top: 3px solid #be8b65;
 border-left: 3px solid #be8b65;
 transition: 0.5s;
}

.main_div::after {
 content: '';
 position: absolute;
 width: 30px;
 height: 30px;
 background: transparent;
 bottom: -7px;
 right: -7px;
 z-index: -5;
 border-right: 3px solid #be8b65;
 border-bottom: 3px solid #be8b65;
 transition: 0.5s;
}

.main_div:hover::before {
 width: 100%;
 height: 100%;
}

.main_div:hover::after {
 width: 100%;
 height: 100%;
}

.main_div button {
 padding: 0.7em 2em;
 font-size: 16px;
 background: #222222;
 color: #fff;
 border: none;
 cursor: pointer;
 font-family: inherit;
 font-family: 'DM Sans';
}    

.language-dropdown {
            position: relative;
            display: inline-block;
        }
        
        .language-btn {
            background-color: transparent;
            color: white;
            border: none;
            padding: 7px 20px;
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 0.5px;
            cursor: pointer;
            position: relative;
            min-width: 60px;
            text-align: center;
            transition: background-color 0.2s ease;
            font-family: 'DM Sans';
        }
        
       
        .language-btn::after {
            content: '';
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 5px solid white;
            transition: transform 0.2s ease;
        }
        
        .language-btn.active::after {
            transform: translateY(-50%) rotate(180deg);
        }
        
        .language-dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background-color: #0000006b;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            display: none;
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.2s ease;
            z-index: 1000;
        }
        
        .language-dropdown-menu.show {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }
        
        .language-option {
            display: block;
            width: 100%;
            padding:10px;
            height: 40px;
            background: none;
            border: none;
            color: white;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0.5px;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s ease;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .language-option:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .language-option:last-child {
            border-bottom: none;
        }
        
        .language-option.active {
            background-color: rgba(255, 255, 255, 0.2);
        }

/* End Animations*/
h1,h2,h3,h4,h5,h6{
    font-family: 'Philosopher';

}

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

p{
    font-family: 'DM Sans';

}

body{
    background-color: #1a1a1a;
}

.offcanvas{

    background-color: #131212;
}

.offcanvas {
    transition: transform 0.8s ease-in-out !important;
}


.offcanvas {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.navbar-nav{
    width: 200px;
}

.navbar li a:hover{
    color: white!important;
}

.navbar-nav .dropdown-menu {
  
  
  right: auto;
  left: 150px; 
}
.dropdown-menu {
  display: block; /* We'll control visibility with opacity and pointer-events */
  opacity: 0;
  transform: translateY(10px); /* Start slightly below */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  pointer-events: none; /* Prevent interaction when hidden */
  background-color: #242222;
}

.dropdown-item{
    border-radius: 0px!important;
}
.dropdown-item:hover{
    background-color: transparent!important;
    color: white!important;
}
.dropdown-menu.show {
  opacity: 1;
  transform: translateY(0); /* Slide into place */
  pointer-events: auto; /* Allow interaction when shown */
}
.btn-close {
  /* This filter changes the black SVG icon to white */
  filter: invert(1) grayscale(100%) brightness(200%);
  /* You might also need to adjust the background color if it's not transparent */
  /* background-color: transparent; */
}

.navbar{
    background-color: #181818dc!important;
    padding: 0em 1em;
}
.offcanvas-end{
   
   
    padding: 15px; /* Example padding */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Optional shadow */
  }

.navbar li a{
    color: white!important;
    font-family: 'Philosopher';
    font-size: 20px;
    color: #be8b65!important;
    margin: 0em 1em;
}

.nav-direct h6{
    font-family: 'DM Sans';
    font-size: 14px;
    text-transform: uppercase;
    color: #be8b65;
}

.nav-direct{
    border: 1px solid #be8b65;
    background-color: transparent;
    padding: 10px 35px;
    margin: 0em 0.5em;
    padding-bottom: 0px;
}

.nav-direct:hover{
    background-color: #be8b65;
    color: white;
    transition-duration: 0.3s;
}
.nav-direct:hover h6{
    color: white;
        transition-duration: 0.3s;

}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23be8b65'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25'/%3e%3c/svg%3e");
}


  
        
.banner-hero{
    background: url('../img/bregu-about-test-2.jpg')rgba(0, 0, 0, 0.2);
    background-size: cover;
    background-position: 50%  60%;
    background-repeat: no-repeat;
    height: 95vh;
    display: flex;
    align-items: end;
    background-blend-mode: multiply;
    justify-content: end;
    
}   

/* From Uiverse.io by alexmaracinaru */ 
.cta {
  border: none;
  background: none;
  cursor: pointer;
}

.cta span {
  padding-bottom: 7px;
  letter-spacing: 4px;
  font-family: 'Philosopher';
  font-size:18px;
  padding-right: 15px;
  text-transform: uppercase;
}

.cta svg {
  transform: translateX(-8px);
  transition: all 0.3s ease;
}

.cta:hover svg {
  transform: translateX(0);
}

.cta:active svg {
  transform: scale(0.9);
}

.hover-underline-animation {
  position: relative;
  color: white;
  padding-bottom: 20px;
}

.hover-underline-animation:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.cta:hover .hover-underline-animation:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}




#background-video {
    
   width: 500px;
    height: 85vh;
    object-fit: cover;
    position: relative;
   
    z-index: -1;
    
  }




         .image-container {
            position: relative;
            width: 100%;
           height: 600px;
           
            overflow: hidden!important;
        }

        .reveal-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: translateX(0);
        }

        .overlay {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
             background-color: #1a1a1a;
            transform-origin: left;
            /* Initially cover the whole image */
            transform: scaleX(1);
            /* Custom easing: cubic-bezier starts fast and ends slow */
            transition: transform 0.95s cubic-bezier(0.18, 0.89, 0.32, 0.97);
        }

        .image-container.reveal .overlay {
            /* When revealed, shrink the overlay from right to left */
            transform: scaleX(0);
        }



        .village-bg{
            background: url('../img/home-bg-1.jpg');
            background-size: cover;
            background-position: bottom left;
            background-repeat: no-repeat;
            background-blend-mode: multiply;
           
        }


        .about-desc{
           background-color: #131212;
           padding: 8em;
           margin-left: -6em;
           color: white;
           margin-bottom: -8em;
        }

        /* Left Side Styles */
        .content-section {
            order: 2;
        }

        .main-title {
            font-size: 3.5rem;
            font-weight: 300;
            margin-bottom: 2rem;
            letter-spacing: 0.1em;
        }

        .description {
            margin-bottom: 3rem;
        }

        .description .intro {
            font-size: 1.25rem;
            font-weight: 300;
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

        .description .details {
            color: #b3b3b3;
            line-height: 1.6;
        }

        .houses-list {
            margin-bottom: 2rem;
        }

        .house-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #b3b3b3;
            font-size: 1.25rem;
            font-weight: 300;
            letter-spacing: 0.05em;
          
            padding-left: 0;
        }

        .house-item:hover {
            color: #ff7f50;
            padding-left: 0.5rem;
        }

        .house-item.active {
            color: #ff7f50;
            
            padding-left: 1rem;
        }

        .guest-count {
            font-size: 0.875rem;
            opacity: 0.6;
        }

        .view-all-btn {
            border: 1px solid #666;
            background: transparent;
            color: white;
            padding: 0.75rem 2rem;
            font-size: 0.875rem;
            letter-spacing: 0.2em;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .view-all-btn:hover {
            background: white;
            color: #1a1a1a;
        }

          /* Left Side Styles */
        .content-section {
            order: 2;
        }

        .main-title {
            font-size: 3.5rem;
            font-weight: 300;
            margin-bottom: 2rem;
            letter-spacing: 0.1em;
        }

        .description {
            margin-bottom: 2rem;
        }

        .description .intro {
            font-size: 1.25rem;
            font-weight: 300;
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

        .description .details {
            color: #b3b3b3;
            line-height: 1.3;
        }

        .houses-list {
            margin-bottom: 2rem;
        }

        .house-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.1rem 0;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #b3b3b3;
            font-size: 1.25rem;
            font-weight: 300;
            letter-spacing: 0.05em;
           
            padding-left: 0;
        }

        .house-item:hover {
            color: #ff7f50;
            padding-left: 0.5rem;
        }

        .house-item.active {
            color: #ff7f50;
           
            padding-left: 1rem;
        }

        .guest-count {
            font-size: 0.875rem;
            opacity: 0.6;
        }

        .view-all-btn {
            border: 1px solid #666;
            background: transparent;
            color: white;
            padding: 0.75rem 2rem;
            font-size: 0.875rem;
            letter-spacing: 0.2em;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .view-all-btn:hover {
            background: white;
            color: #1a1a1a;
        }

        /* Right Side Styles */
        .image-section {
            order: 1;
            max-width: 100%; /* Increased width to accommodate visible side cards */
            margin: 0 auto;
            padding-left: 6rem; /* Add padding to prevent left cards from being cut off */
        }

        .section-header {
            margin-bottom: 2rem;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 300;
            margin-bottom: 0.5rem;
        }

        .section-subtitle {
            color: #666;
            font-size: 0.875rem;
        }

        .image-stack-container {
            position: relative;
            height: 24rem;
            width: 100%;
            margin-bottom: 1.5rem;
            overflow: visible; /* Allow cards to extend beyond container */
        }

        .image-card {
            position: absolute;
            inset: 0;
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                        opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        z-index 0s linear 0s;
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            will-change: transform, opacity;
            backface-visibility: hidden;
            transform-style: preserve-3d;
        }

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

        .image-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
        }

        .image-info {
            position: absolute;
            bottom: 1rem;
            left: 1rem;
            color: white;
        }

        .image-info h3 {
            font-size: 1.25rem;
            font-weight: 300;
            letter-spacing: 0.05em;
        }

        .image-info p {
            font-size: 0.875rem;
            opacity: 0.8;
        }

        .progress-container {
            display: flex;
            align-items: center;
            font-size: 0.875rem;
            color: #666;
        }

        .progress1-bar {
            flex: 1;
            height: 1px;
            background: #333;
            margin-left: 1rem;
            position: relative;
        }

        .progress-fill-2 {
            position: absolute;
            left: 0;
            top: 0;
            height: 1px;
            background: #ff7f50;
            transition: width 0.7s ease;
        }

        .navigation-container {
            display: flex;
            justify-content: center;
            margin-top: 1.5rem;
        }

        .nav-arrow {
            background: transparent;
            border: 1px solid #666;
            color: #666;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nav-arrow:hover {
            border-color: #ff7f50;
            color: #ff7f50;
            transform: translateX(2px);
        }

        .nav-arrow:active {
            transform: translateX(2px) scale(0.95);
        }

        .nav-arrow svg {
            width: 20px;
            height: 20px;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .main-grid {
                grid-template-columns: 1fr;
                gap: 3rem;
            }

            .content-section {
                order: 1;
            }

            .image-section {
                order: 2;
            }

            .main-title {
                font-size: 3rem;
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: 2rem 1rem;
            }

            .main-title {
                font-size: 2.5rem;
            }

            .description .intro {
                font-size: 1.125rem;
            }

            .house-item {
                font-size: 1.125rem;
            }

            .image-section {
                max-width: 24rem; /* Smaller width on mobile */
                padding-left: 3rem; /* Reduced padding on mobile */
            }
        }


       

        .villas-section-home{
            background: url('../img/villas-section.png');
            background-size: 70%;
            background-position: center right;
            background-repeat: no-repeat;
            padding: 14em 0em;
            margin-top: 14em;
        }


        .content-section-home{
            background: url('../img/bg-dark-col.png');
            background-size: 40%;
            background-position: center;
            background-repeat: no-repeat;
           
            margin: 14em 0em;
        }

        .owl-carousel .item img{
            border-radius: 10px;
        }

        .score-box{
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    background-color: rgb(8, 8, 8);
    border-radius: 6px;
    padding: 2em;
    
    height: 30vh;
  }

  .score-box-content{
   
    width: 100%;
  }

  .apos-circle{
    background-color: #be8b65;
    color: white;
   height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: fit-content;
    border-radius: 50%;
    padding: 1.5em 2em;
    margin-top: -3.3em;
    margin-left: -4.5em;
    position: relative;
    z-index: 109;
    border: 12px solid #1a1a1a;
  }

  .reviews{
    margin-left: -6em;
    position: relative;
    z-index: 100;
    background: url('../img/outside-4.png')rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    background-blend-mode: multiply;
    backdrop-filter: blur(20.3px);
    -webkit-backdrop-filter: blur(11.3px);
    padding: 2em;
    padding-top: 3em;
    height: 30vh;
    
  }

  
footer{
    background-color: #131212;
    padding: 2em 0em;
    padding-top: 4em;
}

.spa-head{
    background: url('../img/senso-7.png')rgba(0, 0, 0, 0.3);
    height: 70vh;
    background-size: cover;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    color: white;
}

.spa-pack{
    background-color: #ece3d2;
    color: #A0522D;
    padding: 2em;
    border-radius: 10px 0px 0px 10px;
}

.pack-titles{
    margin-right: -12px;
    margin-bottom: -13px;
    padding-bottom: 5px;
   
}

.pack-title{
     background-color: #e7d5b4;
    color: #A0522D;
    margin-left: 1em;
    padding: 20px;
    padding-bottom: 0px;
     border-radius: 10px 10px 0px 0px;
}

.active-pack-title{
    background-color: #ece3d2;
}

.pack-period{
    background-color: #e7d5b4;
    padding: 0.5em 1em;
    border-radius: 10px;
    margin: 1em 0em;
}

.pack-period h5,.pack-period p{
    margin: 0px;
    padding: 0px;
    
}

.spa-pack{
    display: none;
}

.spa-pack-active{
    display: flex!important;
}

.spa-btn{
    background-color: #1a1a1a00;
    color: white;
    padding: 2px 10px;
    font-family: 'DM Sans';
   

    border: 1px solid #D2691E;
    color: #D2691E;
}

.spa-btn:hover{
    background-color: #D2691E;
    color: white;
}

.spa-contact{
    background: url('../img/spa-contact.webp')rgba(0, 0, 0, 0.3);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    height: 80vh;
}


form{
    background-color: #efe7d0;
    padding: 4em 2em;
} 

.form-container {
    max-width: 800px;
    margin: 0 auto;
   
}

.fcf-form-group {
   width: 100%;
   padding: 0.2em;
}

.fcf-label {
    position: absolute;
    left: -9999px;
   
    overflow: hidden;
    border: none;
}

.fcf-form-control {
    width: 100%;
    padding: 15px 20px;
    border: none;
    background-color: transparent;
    font-size: 16px;
}

.fcf-form-control::placeholder {
    color: #666;
}

select.fcf-form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding-right: 10px;
    border: none!important;
}

textarea.fcf-form-control {
   
    resize: vertical;
    min-height: 60px;

    max-height: 80px;
}

.fcf-btn {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    line-height: 1.5;
    border-radius: 0px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-family: 'Quicksand';
    
}

.fcf-btn-primary {
    color: #ffffff;
    background-color: #CD853F;
}

.fcf-btn-primary:hover {
    background-color: #CD853F;
}

.fcf-btn-block {
    display: block;
    width: 200px;
}

.fcf-btn-lg {
    padding: 15px 30px;
    font-size: 18px;
}

@media (max-width: 768px) {
    .fcf-form-group {
        flex: 1 1 100%;
    }
}

.villa-head{
    background: url('../img/drin-2.png')rgba(0, 0, 0, 0.35);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    height: 80vh;
}


.owl-nav .owl-prev{
    position: relative!important;
    top: calc(41%);
    color: white!important;
    left: 0%;
    opacity: 1;
    font-size: 15px!important;
    z-index: 1;
    width: 35px;
    height: 35px;
    background-color: #CD853F!important;
    color: #ffffff!important;
    border: 1px solid #CD853F!important;
    transition-duration: 0.3s;
    border-radius: 50%!important;
    z-index: 100!important;
}
.owl-nav .owl-next{
    position: relative!important;
    top: calc(41%);
    right: 0%;
    opacity: 1;
    font-size: 15px!important;
    z-index: 1;
    width: 35px;

    height: 35px;
    background-color: #CD853F!important;
    color: white!important;
    border: 1px solid #CD853F!important;
    transition-duration: 0.3s;
    border-radius: 50%!important;
    z-index: 100!important;
    
}

.about-head{
    background: url('../img/outside-3.png')rgba(0, 0, 0, 0.2);
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-position: center;
    height: 80vh;
    display: flex;
    align-items: center;
}


.gallery-head{
    background: url('../img/experience-1.png')rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-position: center;
    height: 80vh;
    display: flex;
    align-items: center;
}

.contact-head{
    background: url('../img/about-1-bregu.png')rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-position: center;
    height: 80vh;
    display: flex;
    align-items: center;
}

.salts-row img{
    border-radius: 10px;
}



    @media only screen and (max-width: 965px) {
    
    .apos-circle{
        margin: 0em;
        margin-left: 7em;
        margin-top: -3em;
        margin-bottom: -3em;
    }
    .reviews{
        margin-left: 0em;
        height: 40vh;

        padding-top: 4em;
    }
    .mobile-nav-none{
        display: none!important;
    }
    .nav-logo{
        width: 160px!important;
    }
    .col-mobile{
        padding: 2em;
    }
    .intro{
        padding: 4em 0em!important;
        padding-bottom: 2em!important;
    }
    .village-bg{
        padding: 2em 0em!important;
    }
    .villas-section-home{
        padding: 2em 0em!important;
        margin-top: 4em;
    }
    .about-desc{
        padding: 4em!important;
        margin-left: 0em!important;
        margin-bottom: 0em!important;
    }

    .villas-section-home{
        padding: 2em 0em!important;
        padding-top: 0em!important;
        margin-top: 0em!important;
    }

    .content-section-home{
        margin-top: 1em!important;
        margin-bottom: 2em!important;
    }
    .rest-row{
        margin-top: 0em!important;
        padding-top: 2em!important;
    }
    .package-section{
        padding: 0em!important;
    }
    .pack-titles{
        margin-bottom: -6px;
    }
    .pack-title{
        height: 140px;
        margin-top: 0px!important;
    }
  }