@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Marcellus&display=swap");
html, body {

width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
Overflow-x: hidden !important;
    font-family: "Marcellus", serif;
}
.rooms .container-fluid {
    width: 85%;
}
body {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}h2{
    font-size: 80px !important;
}
 h2,h3 ,h4{
        font-family: "Marcellus", serif;
 }
.bg-light {
  background-color: #f2eee8 !important; /* The beige tint from your image */
}

.tracking-widest {
  letter-spacing: 5px;
}

/* Nav Link Styling */
.navbar-nav .nav-item .nav-link {
  color: #333 !important;
  text-transform: capitalize;
  font-weight: 400;
  transition: background 0.3s;
}

.navbar-nav .nav-item .nav-link:hover {
  background-color: #f8f9fa;
}
.navbar-brand  img{
width: 120px;

}

/* Dropdown Arrow styling */
.dropdown-toggle::after {
  vertical-align: middle;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
}

.nav-logo {
  width: 130px;
  padding: 10px;
}
/* Ensure the sticky nav stays above other content like images */
.sticky-top {
  top: 0;
  z-index: 1020;
  background-color: white !important;
}

/* Optional: Make the nav-links a bit more compact when sticky */
.sticky-top .nav-link {
  transition: padding 0.3s ease;
}

/* Button Styling */
.btn-explore {
  display: inline-flex;
  align-items: center;
  background-color: #e5e0d8; /* Beige background */
  color: #332a1e;
  text-decoration: none;
  padding: 0;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  border: 1px solid #d1ccc4;
}
.btn-explore:hover {
  background-color: #dcd7cf;
}

.btn-explore .arrow {
  background-color: transparent;
  padding: 12px 15px;
  border-left: 1px solid #d1ccc4;
}
.btn-explore {
  padding-left: 20px;
}

/* Image Collage Logic */
.image-collage {
  position: relative;
  padding-top: 100px; /* Space for the top image */
}

.img-top-left {
  position: absolute;
  margin-left: -50px;
  top: 0;

  width: 55%;
  z-index: 3;
}
.img-main {
  width:100%;
  margin-left: auto;
  z-index: 2;
}
.img-down {
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  width: 45%;
}

.content-box h1 {
  font-size: 104px;

  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
}

/* Footer Background Color */
.footer {
  background-color: #847563; /* The warm brown/taupe color from image */
}

.luxury-heading {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  font-size:70px !important;


}
/* Links Styling */
.footer-links-section h5 {
  letter-spacing: 2px;
  font-size: 1.2rem;
}
.footer-links-section a:hover {
  text-decoration: underline !important;
}
.logo-copyright {
  width: 120px;
  padding: 10px;
}
.map-frame {
    border: 2px solid #afaba7 !important; /* Matching your luxury beige border color */
    border-radius: 8px; /* Optional: softens the corners */
    padding: 10px;
}

/* Vertical dividers on Desktop */
@media (min-width: 992px) {
  .border-end-lg {
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  }
  .image-collage {
    padding-top: 50px;
  }
  .luxury-text {
    font-size: 2.5rem;
  }
  .nav-fill .nav-item {
    border-right: 1px solid #eee;
  }
  .nav-fill .nav-item {
    border-right: 1px solid #dee2e6;
  }
  .nav-fill .nav-item:last-child {
    border-right: none;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .luxury-heading {
    font-size: 2rem;
  }
}


/* About Us Page Section */
.about-us {
    /* 10px distance from all screen edges */
    margin: 10px; 
   
    
    /* Luxury Border */
    border: 2px solid #d1ccc4; 
    
    /* Spacing inside the border */
    padding-top: 100px;
    padding-bottom: 100px;
    
    /* Background Styles */
    background-color: #EEEBE4;
    background-image: url("image/Untitled-2 (1).png") ;
    background-size:80%;
    background-position: bottom;
    background-repeat: no-repeat;
    
    /* Ensures the section doesn't cause horizontal scrolling */
    box-sizing: border-box;
}


.about-us{
    text-align: center;
}
.about-us h2{
    font-size: 80px;
    font-weight: 400;
    text-transform: uppercase;
      font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
}
.about-us .about-1{
    width: 60%;
    position: relative;
    margin-top: 200px;
}
.about-us .about-3{
    width: 60%;
    position: relative;
    margin-top: 200px;
}

/* Ensure the images match the high-end Safar style */
.about-us img {
    border-radius: 8px;
    margin-top: 20px;
}

/* Gallery section */

.Gallery {
    background-color: #796756;

    padding: 100px 20px;
}
.Gallery h2{
    color: white;
text-transform: uppercase;
    font-size: 60px;
          font-family: "Marcellus", serif;
}
.Gallery p{
    color: rgba(255, 255, 255, 0.815);
}

/* rooms section */

.rooms{
    background-color:#EEEBE4 ;
    padding-top: 100px;
    padding-bottom: 100px;
}
.rooms h2{
    color: #363022;
       text-transform: uppercase;
    font-size: 80px;
      font-family: "Marcellus", serif;
      text-align: center;
}
/* Card Container */
.hotel-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    transition: transform 0.3s ease;
}

.hotel-card:hover {
    transform: translateY(-5px);
}

/* Typography */
.hotel-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #332a1e;
    margin-bottom: 10px;
}

.location-text {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 25px;
}

.text-brown { color: #847563; }
.text-gold { color: #b59b6d; }

/* Split Footer Styling */
.card-footer-split {
    background: #fff;
}

.footer-item {
    flex: 1; /* Makes both sides equal width */
    padding: 15px 0;
    text-align: center;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.price-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: #332a1e;
    font-weight: bold;
}

.per-night {
    color: #6c757d;
    font-size: 0.85rem;
    margin-left: 5px;
}
.adventure-features{
    background-color: #796756;
}
.feature-label {
    position: relative;
    top: 38px !important;
    left: 15% !important;

    margin: auto;
    transform: translateX(-50%);
    background: var(--safar-brown);
    padding: 20px 70px;
    font-size: 12px;
    letter-spacing: 2px;
    z-index: 2;
    border: 1px solid rgba(255,255,255,0.25);
    display: inline-block;
       z-index: 2;
       background-color:#847563;
}

.adventure-features .border-end {
    border-color: rgba(255,255,255,0.25) !important;
}
.adventure-features {
    text-align: center;
    color: white;
}
.adventure-features .row .col-lg-4{
    border: 1px solid white;
  

}
.adventure-features h2{
   font-size: 80px;
    font-weight: 400;
    text-transform: uppercase;
      font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
}

.testimonial {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #FFFFFF;
    color: #362618;
}

.testimonial h2{
    font-size: 80px;
        font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal; 
  text-align: center;

}
.testimonial .card-test{
    padding:60px;

   border:  1px solid #332a1e;
}
.card-test-im {
    padding: 113px;
    border:  1px solid #332a1e;
    max-width:900px;

    height: fit-content;
}
  .beach-banner{
    background: url('../image/pool-8.jpg'),rgb(255,255,255) linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(32,32,32,1) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-blend-mode: multiply;
    height: 60vh;
  }
  .beach-banner h2{
    color: white;
    font-size: 80px;
  }
  .beach-banner p{
    color: #e5e0d8;
  }

.about-head {
    background-image: 
        linear-gradient(to top, white, transparent),
        url('../image/garder-1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 60vh;
    display: flex;
    align-items: center;
}
.about-head h2 {
    color: #332a1e; 
    font-size: 80px !important;
}
.rooms-1 {
    background-color: #ffffff;
    padding-top: 100px;
    padding-bottom: 100px;

}
.ls-2 { letter-spacing: 2px; }



.feature-card:hover {
    border-color: black !important;
    transform: translateX(2px);
    background-color: #3630223a;
}
.feature-card {
    padding: 30px;
    border: 1px solid #332a1e9a;
    margin-bottom: 20px; 
    border-radius: 16px

}
.core-features h4{
    color: #332a1e;
    font-size: 30px;
}

.core-features{
    background-color: #F3F1EF;
    padding-top: 100px;
    padding-bottom: 100px;
}
.core-features .container-fluid{
    max-width: 90%;
}

.col-l{
 width: 900px;
}
   
/* location page */

.location-head{
        background-image: 
        linear-gradient(to top, white, transparent),
        url('../image/pool-1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 60vh;
    display: flex;
    align-items: center;
}
.Gallery-head{
      background-image: 
        linear-gradient(to top, white, transparent),
        url('../image/decoratioon.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 60vh;
    display: flex;
    align-items: center;
}
.award-head{
     background-image: 
        linear-gradient(to top, rgba(255, 11, 11, 0), transparent),
        url('../image/p3512819881-200.webm');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 60vh;
    display: flex;
    align-items: center; 
}
.award-head-1 {
       background-image: 
        linear-gradient(to top, rgba(255, 11, 11, 0), transparent),
        url('../image/p3512819881-200.webm');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 60vh;
    display: flex;
    align-items: center; 
}
/* contact head */
.contact-head{
       background-color: #F3F1EF;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 60vh;
    display: flex;
    align-items: center;
}
.btn-post-review {
    background-color: #bc8264; /* Terracotta/Brown color from your image */
    color: white;
    border: none;
    padding: 0 0 0 25px;
    display: inline-flex;
    align-items: center;
    border-radius: 50px;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 1px;
    transition: 0.3s;
}

.btn-post-review .arrow {
    background: rgba(255, 255, 255, 0.2);
    padding: 12px 18px;
    border-radius: 50%;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-post-review:hover {
    background-color: #332a1e;
    color: white;
}
.formm{
    padding: 50px;
}
.about-location {
  padding-top: 100px;
  padding-bottom: 100px;
}

.sice{
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}
.cultures span{
color: transparent;
-webkit-text-stroke: 1px #bc8264; /* The terracotta color */
text-align: center !important;
justify-content: center !important;
margin-left: auto !important;
margin-right: auto !important
;
}
/* --- RESPONSIVE MEDIA QUERIES --- */
/* --- RESPONSIVE REFINEMENTS --- */

/* Large Tablets & Small Laptops */
@media (max-width: 1199px) {
    .col-l {
        width: 100%; /* Fixes the 900px overflow */
        max-width: 100%;
    }
    .content-box h1 {
        font-size: 80px;
    }
    h2, .rooms h2, .about-us h2, .testimonial h2 {
        font-size: 60px !important;
    }
}

/* Tablets (Portrait) */
@media (max-width: 991px) {
    .image-collage {
        padding-top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .img-top-left, .img-main, .img-down {
        position: relative !important;
        width: 100% !important;
        margin-left: 0 !important;
        top: 0 !important;
        margin-bottom: 20px;
    }
    .about-us .about-1, .about-us .about-3 {
        width: 90%;
        margin-top: 50px;
    }
    .feature-label {
        left: 50% !important;
        transform: translateX(-50%);
        padding: 15px 40px;
    }
    h2{
  font-size: 30px !important;
}
.core-features .container-fluid {
  max-width: 100%;
}
.luxury-heading {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  font-size: 33px !important;
}
}

/* Mobile Devices */
@media (max-width: 767px) {
    /* Typography Scaling */
    h2, .rooms h2, .about-us h2, .testimonial h2, .beach-banner h2 {
        font-size: 42px !important;
        line-height: 1.2;
    }
    .content-box h1 {
        font-size: 48px;
    }
    .about-head h2, .location-head h2, .Gallery-head h2 {
        font-size: 45px !important;
    }

    /* Layout Adjustments */
    .about-us {
        margin: 5px;
        padding-top: 60px;
        padding-bottom: 60px;
        background-size: cover;
    }
    .rooms .container-fluid {
        width: 95%;
    }
    .testimonial .card-test, .card-test-im {
        padding: 30px 20px;
        height: auto;
    }
    
    /* Utility Spacing */
    .sice, .about-location, .core-features, .rooms, .Gallery {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    /* Navbar & Buttons */
    .nav-logo, .navbar-brand img {
        width: 100px;
    }
    .btn-explore, .btn-post-review {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    /* Cultures Outline Text Fix */
    .cultures span {
        font-size: 40px;
        display: block;
        text-align: center;
        margin: 0 auto !important;
    }
    
    /* Banners */
    .beach-banner, .about-head, .location-head, .Gallery-head, .award-head {
        height: 85vh;
        color: white;
    }
    .beach-banner  h2 , .about-head h2 , .location-head h2, .Gallery-head h2, .award-head  h2 {
       color: white;
}
h2{
   font-size: 30px !important;
}
.rooms-1{
  padding-top: 50px;
  padding-bottom: 50px;
}
.core-features .container-fluid {
  max-width: 100%;
}
.luxury-heading {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  font-size: 33px !important;
}
}

/* Small Phones */
@media (max-width: 480px) {
    h2, .rooms h2 {
        font-size: 34px !important;
    }
    .hotel-title {
        font-size: 1.5rem;
    }
    h2{
  font-size: 30px !important;
}
.core-features .container-fluid {
  max-width: 100%;
}
.luxury-heading {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  font-size: 33px !important;
}
  .btn-explore { padding: 8px 15px; font-size: 0.8rem; }
            .award-head-1 p { font-size: 0.9rem; }
            .img-down{
              display: none;
            }
            .about-us{
  background-image: none !important;
            }
}