/* [ -- Master Stylesheet -- ] */

/* ##### Index of Stylesheet #####

/* color code #8B9B8B
:: 1.0 Import Fonts 
:: 2.0 Import All CSS
:: 3.0 Base CSS
:: 4.0 Preloader Area CSS
:: 5.0 Scroll Up Area CSS
:: 6.0 Section Heading Area CSS
:: 7.0 South Button CSS
:: 8.0 Header Area CSS
:: 9.0 Welcome Area CSS
:: 10.0 Advanced Search Area
:: 11.0 Single Property Area CSS
:: 12.0 Testimonials Area CSS
:: 13.0 Editor Area CSS
:: 14.0 Call to Action CSS
:: 15.0 Footer Area CSS
:: 16.0 Breadcumb Area CSS
:: 17.0 About Us Area CSS
:: 18.0 Team Member Area CSS
:: 19.0 Listings Area CSS
:: 20.0 Blog Area CSS 
:: 21.0 Contact Area CSS
:: 22.0 Shortcode Area CSS

##### Index of Stylesheet ##### /*

/* :: 1.0 Import Fonts */

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
/*@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');*/

/* :: 2.0 Import All CSS */

@import url(bootstrap.min.css);
@import url(animate.css);
@import url(owl.carousel.css);
@import url(classy-nav.min.css);
@import url(magnific-popup.css);
@import url(font-awesome.min.css);
@import url(themify-icons.css);
@import url(nice-select.css);
@import url(jquery-ui.min.css);

/* Base css */

html,body {
height:100%;
width:100%;
font-family:'Raleway';
font-weight: 300;
font-size: 14px;
color:#555;
}

*:focus {outline:none !important}


th{
    font-size: 11px;
}

img {
    width: auto ;
    max-width: 100% ;
    height: auto ;
  }

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: none;
}

.section-padding-10{
    padding: 10px 0;
}
.section-padding-20{
    padding: 20px 0;
}
.section-padding-30{
    padding: 30px 0;
}
.section-padding-40{
    padding: 40px 0;
}

.section-padding-60{
    padding: 60px 0;
}


.section-padding-80{
    padding: 80px 0;
}

.section-padding-100{
    padding: 100px 0;
}

.section-padding-130{
    padding: 130px 0;
}

.h-90{
    height: 90%;
}

.h-30{
    height: 30%;
}

.h-10{
    height: 10%;
}

.pad-nav{
    padding:50px;
}



.top-40{
    top:40%
}

.full-height{
    height:100%;
}

.dark-green-background{
    background-color:rgb(59, 100, 56);
}

.brown-background{
    background-color:#918074;
}

.white-background{
    background-color:#ffffff;
}

.gray-background{
    background-color:#eee;
}

.cream-white-background{
    background-color:rgb(248, 245, 245);
}

.creme-background{
    background-color:rgba(192,214,223,255);
}

.shutters-green-background{
    background-color:rgba(165,175,166);
}

.footer-gray-background{
    background-color:white;
    color: #A0AFA8;
}

.dark-red-background{
    background-color:rgb(37, 150, 190);
}

.light-gray-background{
    background-color:rgb(248, 245, 245);
}
.dark-blue-background{
    background-color:#223247;
    color:white;
}


.blue-background{
    background-color:#013580;
}

.font-serif{
    font-family:serif;
}


 .overflow-hddn{
    overflow-x: hidden;
 }

.center{
    margin: 0 auto;
}

.center-text{
    text-align: center;
}

.text-alignment-slleft{
    text-align: left;
}

.text-alignment-scenter-lleft{
    text-align: center;
}

.text-alignment-1 h4{
    text-align: left;
}

.color-text-green{
    color: #235a3b;
}

.color-text-gray{
    color: #eee;
}

.color-text-brown{
    color: #918074;
}

.color-text-red{
    color:#d9534f
}

.color-text-white{
    color: white;
}

.font-size-12{
    font-size:12px;
}

.font-size-14{
    font-size:14px;
}

.font-size-16{
    font-size:15px;
}

.color-text-black{
    color: black;
}

.hr-thick{
    height: 1m;
    background-color: #ffffff;
}

.vertical-align-50{
    position: relative;
    top:50%
}

    
.vertical-align-25{
    position: relative;
    top:25%
}

.vertical-align-20{
    position: relative;
    top:20%
}


.vertical-align-10{
    position: relative;
    top:10%
}

.font-georgia{
    font-family: georgia;
}

.font-droid-serif{
    font-family: "Droid Serif";
}

.font-fjalla-one{
    font-family: 'Fjalla One';
}

.h4, h5, h6  {
    font-family: 'Bodoni', serif !important; 
    font-weight: 400;
    color: #333;
}

h1, h2, h3 {
    font-family: 'julius sans one', sans-serif;
    font-weight: 400;
}

.h-ptext{
}

.font-bodoni{
font-family: 'Bodoni', serif !important; 
}

.font-julius{
    font-family: 'julius sans one', sans-serif;
}

.jumbotron {
    padding-bottom: 0;
    padding-top: 5px;
    background-color: white;
}

.verticalLine {
    border-left: thick solid #ff0000;
  }

@media (min-width: 576px) {
}

@media (min-width: 768px) { 
}

@media (min-width: 992px) { 
    .text-alignment-scenter-lleft{
    text-align: left;
    }
}

@media (min-width: 1200px) { 
    .text-alignment-scenter-lleft{
        text-align: left;
        }
}


/* Header Area */

.dark .classynav ul li .dropdown,
.dark.classy-nav-container,
.dark .classynav ul li .megamenu,
.dark.breakpoint-on .classynav>ul>li>a,
.dark.breakpoint-on .classy-navbar .classy-menu {
    font-family: 'Fjalla One';
    background-color: rgba(255, 255, 255, 0.76);
}
.header-area {
    position: absolute;
    z-index: 10000;
    width: 100%;
    height: auto;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.book-now-button{
    font-family: 'Julius Sans One';
    font-weight: 900;
    color: white;
}



@media only screen and (min-width: 768px) and (max-width: 991px) {
    .main-header-area {
        height: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .main-header-area {
        height: 70px;
        background-color: ;
    }
}
.main-header-area .classy-nav-container {
    background-color: #8B9B8B;
}
.main-header-area .classy-navbar {
    height: 90px;
    padding: .5em 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .main-header-area .classy-navbar {
        height: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .main-header-area .classy-navbar {
        height: 70px;
        padding: 0.5em 30px;
    }
}

.navbar{
    background-color:#8B9B8B;
    font-family: 'Julius Sans One';
    color: white;
}

.navbar-light .navbar-nav .nav-link {
    color: white;
    font-weight: bold;
}
.navbar-light .navbar-text a {
    color: white;
}

.dropdown-item{
    font-family: 'Julius Sans One';
    font-size: 14px;
    color: #A0AFA8;
    background-color: white;
}

.chez-color{
    color: #A0AFA8;
}

.classy-nav-container a:hover {
color:black;
}

.main-header-area .classynav ul li a {
    color: white;
    text-transform: uppercase;
    /*font-weight: 400;*/
    font-size: 14px;
    font-family: 'Julius Sans One';
}

.btn-xl{
    font-size: 0.85rem;
    padding: 10px 30px;
    border-radius: 0.3rem;
    color:#6D736A;
}

.main-header-area .nav-brand {
    line-height: 0.8;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-header-area .nav-brand {
        margin-right: 0;
    }
}

.main-header-area .classynav ul {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
.main-header-area .searchbtn {
    margin-left: 30px;
    line-height: 90px;
    background-color: transparent;
    width: 90px;
    text-align: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-header-area .searchbtn {
        margin-left: 15px;
        width: 50px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .main-header-area .searchbtn {
        margin-left: 0;
        height: 50px;
        width: 100%;
        margin-top: 15px;
        line-height: 50px;
        background-color: #947054;
    }
}
@media only screen and (max-width: 767px) {
    .main-header-area .searchbtn {
        margin-left: 0;
        height: 50px;
        width: 100%;
        margin-top: 15px;
        line-height: 50px;
        background-color: #531d1d;
    }
}
.main-header-area .searchbtn:hover {
    background-color: #531d1d;
}
.main-header-area .south-search-form {
    position: relative;
    z-index: 1;
    display: none;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
.main-header-area .south-search-form input {
    width: 650px;
    height: 50px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #050000;
    border-radius: 100px;
    padding: 0 30px;
    font-size: 14px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-header-area .south-search-form input {
        width: 550px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .main-header-area .south-search-form input {
        width: calc(100% - 30px);
        margin: 0 15px;
    }
}
@media only screen and (max-width: 767px) {
    .main-header-area .south-search-form input {
        width: calc(100% - 30px);
        margin: 0 15px;
    }
}
.main-header-area .south-search-form button {
    position: absolute;
    top: 0;
    right: 15px;
    height: 50px;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    width: 50px;
    outline: none;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
.main-header-area .south-search-form button:hover {
    color: #ffffff;
}
.search-close .searchbtn {
    background-color: #947054;
}
.search-close .classynav ul {
    display: none;
}
.search-close .south-search-form {
    display: block;
}
.is-sticky .main-header-area {
    width: 100%;
    z-index: 10000 !important;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .is-sticky .main-header-area {
        height: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .is-sticky .main-header-area {
        height: 70px;
    }
}
/* home-img */
.home-img{
opacity: 0.9;
}
.font-12{
    font-size: 12px;
}

.color-text-pink{
    color:#F5B7C2;
}

.color-text-green{
    color:#A0AFA8;
}

.collage-container {
    position: relative;
}


.collage-text {
    position: absolute;
    transform: translate(100%, 135%); /* Center horizontally */
    padding: 20px;
    font-weight: bold;
    color:#; /* Darker color for text contrast */
    background-color: rgb(256,256,256,0.95);  
    z-index: 1;
    border-radius: 2px;
    text-align: center; /* Center text */
}

.collage {
    display: grid;
    grid-template-columns: repeat(8, 2fr);
    gap: 5px;

    position: relative;
    z-index: 0; /* Ensure collage is below text */
}
        .collage img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        /* Style for images of varying heights */
        .tall {
            grid-row: span 2;
            grid-column: span 2;
        }

        .wide {
            grid-column: span 2; 
            grid-row: span 1;
        }
.collage_about {
    display: grid;
    grid-template-rows: repeat(8, 1fr); /* Divide the grid height into 10 equal rows */
    grid-template-columns: repeat(8, 1fr); /* Divide the width into 6 equal columns */
    gap: 5px; /* Space between the images */
    height: auto; /* Full viewport height */
    width: 100%; /* Full viewport width */
    position: relative;
    z-index: 0; /* Ensure collage stays behind text or other elements */
    /*border: 15px solid rgb(165, 175, 166); /* Border for visualization */*/
    /*border-radius: 5px; /* Rounded corners */*/

}

.tall_about {
    grid-row: span 2; /* Spans two rows */
    grid-column: span 1; /* Spans two columns */
}

.wide_about {
    grid-column: span 2; /* Spans two columns */
    grid-row: span 1; /* Spans one row */
}
.full-page-picture{
    width: 100%;
}
.image-container {
  position: relative;
  display: inline-block;
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-text {
  position: absolute;
  top: 85%; 
  left: 80%; 
  transform: translate(-50%, -50%); 
  background-color: #fff; 
  color: #000; 
  padding: 40px 40px; 
  /*border: 5px solid #A0AFA8;*/
  width: 40%;
  font-size: 12px; 
  text-align: center;.full-page-picture > div {
    position: unset !important;
}

.picture-remaining-height{
    object-fit: contain;
  width: 100% !important;
  position: relative !important;
  height: unset !important;
}


.arrival-screen-text-0container{
    position: absolute;
    top: 0%;
    height: 10vh;
    right:0%;
    background-color:rgb(247, 247, 247);
    color: white;
    font-size: 15px;
}
.section-padding-90{
    padding: 90px 0;
}

#homepage-container{
    display:none;
    font-family:Georgia;
    height:100vh;
}

.property-label
{
    opacity:0;
}

.img-below-text{
    display: none;
    max-height:50%
}
.img-above-text{
    display: inline;
    
}

.area-background{
    background-image:url('/static/property/surroundings/img/wine_field.jpg');
    background-size:cover;
    opacity:1;
    height:50%;
}

.txtbox-homecontainer{
    text-align:center;
    opacity:1;
    font-size:16px;
    height:100%;
}

.gite-home{
    height: 200px;
    }

.overlay-area{
        height: 100%;
        opacity: 1;
        transition: .5s ease;
      }

      .img__wrap {
        position: relative;

      }
      
      .img__description {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(243, 244, 245, 0.72);
        color: #fff;
        visibility: visible;
        opacity: 1;
      
        /* transition effect. not necessary */
        transition: opacity .2s, visibility .2s;
      }
      
      .img__wrap:hover .img__description {
        visibility: visible;
        opacity: 1;
      }

.area-background:hover .overlay-area {
    background-color:rgb(248, 245, 245,0.7);
    color:rgba(0, 0, 0, 1);
      }

        

@media (min-width: 576px) {
    .home-img{
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        width: 100%;
        margin: auto;
}
    
}

@media (min-width: 992px) { 
    #homepage-intro-text{
        display:none;
    }
    #homepage-container{
        display:block;
    }

    .gite-home{
        height: auto;
        }
}

@media (min-width: 768px) { 
}

@media (min-width: 992px) {

    .img__description {
        visibility: hidden;
        opacity: 0;
      }
 }

@media (min-width: 1200px) { 
    .img-above-text{
        display: none;
    }
    .img-below-text{
        display: inline;
        max-height: 50vh;
    }
    .overlay-area{
        background-color:rgb(248, 245, 245,0);
        color:rgba(0, 0, 0, 0);
    }

}



/* home page */

/* Property page */

.main-house-jumbotron{
    height: auto;
    font-size: 15px;
}



.property-information-page{
    font-family:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display:inline-block;
}

.grid-sizer,
.grid-item {
    width: 49%;
    margin: 0.2% 0.2% 0.2% 0.2%;
  }

  
.pswp{
    z-index: 10000000;
}

.dropdown-item.active, .dropdown-item:active{
    background-color:rgba(165,175,166);
    color:black;
}

.dropdown-menu-right .dropdown-item{
    height: 4vh;
}

.dropdown-toggle{
    height: 5vh;
}

@media (min-width: 576px) {
}
@media (min-width: 768px) { 
}
@media (min-width: 992px) { 
    .side-buttons-property .dropdown-item{
        height:6vh;
        font-size: 15px;
        box-shadow: none;
    }
    .sidenav {
        height: 89%;
        position: fixed;
        z-index: 1;
        bottom: 0;
        overflow-x: hidden;
        padding-top: 20px;
      }

    .grid-sizer,
.grid-item {
    width: 49%;
    margin: 0.2% 0.2% 0.2% 0.2%;
  }
}


@media (min-width: 1200px) { 
}


/* Slideshow container */
.slideshow-container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: block;
  width: 50%;
  margin:auto;
}

.arrangement-photos {
    display: block;
    width: 70%;
    margin:auto;
  }

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


/* Position the "next button" to the right */
.next {
  right: 10%;
  border-radius: 3px 0 0 3px;
}
.prev{
    left:10%;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #a2a2a3;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
  animation-fill-mode: forwards; 
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@media (min-width: 576px) {
}

@media (min-width: 768px) { 
}

@media (min-width: 992px) { 
    .text-alignment-scenter-lleft{
    text-align: left;
    }
}

@media (min-width: 1200px) { 
    .mySlides{
        width: 100%;
        margin:auto;
    }
    .next{
        right: 0;
    } 
    .prev{
        left:0;
    }
    .arrangement-photos{
        width: 100%;
        margin:auto;
    }

    .grid-sizer,
    .grid-item {
    width: 32%;
    margin: 0.% 0.5% 0.5% 0.5%;
  }
}

/* Bookings Page */
.arrive-booking-container{
    height: 30%;
    font-family:"serif";
}
.full-input-booking-container{
    position: relative;
    z-index: 100000000000;
    margin-top: 0;
}
.text-arrive-booking-image{
    top: 20%;
    z-index: 10;
}
.booking-top-image{
    height: 25vh;
}

.residence-container{
    height: 30%;
}
.btn-light:not(:disabled):not(.disabled).active,
.btn-light:active,
.btn-light.active {
    background-color: #dddbdb;
    border-color: #dddbdb;
    color: black;
  }

.booking-input-container{
    background-color:#dddbdb;
}

.full-booking-container{
    border-radius: 3px;
        position: absolute;
        top: 25%;
        height: 60%;
        background-color:rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
}

.booking-img{
    display: none;
}

.btn{
    font-size: 12px;
}

.book-button{
    border: none;
    color: #235a3b;
    height: 5%;
    width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    background-color:transparent !important;
}


.mobile-booking-background{
        background-image:url('/static/home/img/bg-img/main-house-outside.jpg');
        background-size: cover;
        height: 200%;
        opacity: 0.6;
}

.price-indication-container{
    position:absolute;
    display: block;
    border-radius: 10px;
    font-family: "Times New Roman";
    font-style: italic;
    font-weight: bold;
    color: #235a3b;
    background-color:white;
    font-size:2vw;
    height: 60%;
    text-align: center;
    text-indent: 3%;
    opacity: 1;
    background-color: white;
    color: #235a3b;
     -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}


.prices-indicator{
    padding-top: 5%;
    position:relative;
    height:80%;
    display: flex;
    align-content:space-around;
    flex-wrap: wrap;
    flex-direction:column;
     text-align: center;
}
.price-indication-row{
    flex:1;
}

.price-indication-flex-item{
    font-size:15px;
    width: 20%;
    position: relative;
}

.price-indication-flex-container{
    height: 10%;
    display: flex;
    flex-direction:column;
     -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
            
}

.label-list{
    height: 100%;
    display: flex;
    flex-direction:column;
     -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}

.child-price-indication{
    flex: 1;
  }

.big-child-price-indication{
    flex: 2;
  }

.label-height{
    position: relative;
    height: 20%;
}

.booking-img{
    display: block;
    max-width: 100%;
    max-height: 100vh;
    width: 100%;
    margin: auto;
    opacity: 0.7;
}
.mobile-booking-background{
    display: none;
}
.price-indication-container{
position:absolute;
top:25%;
display: block;
border-radius: 10px;
font-family: "Times New Roman";
font-style: italic;
font-weight: bold;
color: #235a3b;
background-color:white;
font-size:1.4vh;
height: 60%;
}

.image-stack::after {
    content: ' ';
    display: table;
    clear: both;
  }

  .image-stack__item--top {
      float: left;
      width: 66%;
      margin-right: -100%;
      position: relative;
      z-index: 1; // tells the browser to make this image on top
  }

  .image-stack__item--bottom {
      float: right;
      width: 75%;
  }

@supports (display: grid) {
  .image-stack {
    display: grid;
    position: relative; // imperative for the overlapping to work
    grid-template-columns: repeat(12, 1fr);
  }

  .image-stack__item--bottom {
    grid-column: 4 / -1;
    grid-row: 1;
    width: 100%;
  }

  .image-stack__item--top {
    grid-row: 1;
    grid-column: 1 / span 8;
    padding-top: 20%; // slightly arbitrary, keeps proportion once resized
    width: 100%;
  }
}

.confirm-booking-container{
background-color:#235a3b;
opacity: 0.4;
height: 750px;
padding: 200px 0 0px 0;
}

.house-jumbo{
    background-color:#918074;
    color:white !important;
}

.calendar-container {
border-radius: 5px;
  position: relative;
  width:60%;
  height:75%;
  bottom:15%;
  left: 20%;
  background-color: white;
  -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}

.calendar-upper-container{
    position:relative;
    border-radius: 5px;
    position: absolute;
    height: 15%;
    width:100%;
    background-color: #F36E3E;
    display: flex;
    flex-direction:row;
     justify-content: space-around;
     align-items: center;
     -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}
.card-header{
    width:20%;
    opacity: 1 !important;
    align-items: center;
    color: white;
    cursor: pointer;
}
.card-header-left{
    width:20%;
    opacity: 1 !important;
    text-align: left;
    color: white;
    cursor: pointer;
}

.card-header-right{
    width:20%;
    opacity: 1 !important;
    text-align: right;
    color: white;
    cursor: pointer;
}

.days-week-container{
    position:relative;
    border-radius: 5px;
    position: absolute;
    list-style-type:none;
    top:15%;
    height: 10%;
    width:100%;
    background-color: white;
    color: red;
    display: flex;
    flex-direction:row;
     justify-content: space-around;
     align-items: center;
     -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}

.day-of-week-box{
    position:relative;
    display: block;
    text-align: center;
    width:14.2857142857%;
}


.dates-container{
    border-radius: 5px;
    position: relative;
    display: flex;
    flex-direction:column;
    top: 30%;
    height: 100%;
    width: 100%;
}

.cell-class{
    position:relative;
    width: 14.2857142857%;
    font-size:20px;
    flex: 1;
    height: 100%;
    text-align: center;
    background-color:#ffffff;
}

.row-class{
    position:relative;
    border-radius: 5px;
    list-style-type:none;
    height: 20%;
    width:100%;
    color: red;
    display: flex;
    flex-direction:row;
    align-items: center;
}

/* Popup box BEGIN */
.hover_bkgr_fricc{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:10000;
}
.hover_bkgr_fricc .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.hover_bkgr_fricc > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 551px;
    height: auto;
    vertical-align: middle;
    width: 90%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
    color:black;
}
.popupCloseButton {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.popupCloseButton:hover {
    background-color: #ccc;
}
.trigger_popup_fricc {
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
}
/* Popup box BEGIN */


@media (min-width: 576px) {
}
@media (min-width: 768px) { 
}
@media (min-width: 992px) { 
}

@media (min-width: 1200px) { 
    .price-indication-container{
        font-size:2vh;
    }
    .price-indication-container{
        font-size:25%;
        height: 60%;
        }
    .arrive-booking-container{
            height: auto;
            font-family:"serif";
        }
    
    .text-arrive-booking-image{
        top: 30%;
    }

    .text-arrive-booking-image h1{
        font-size:60px;
    }

    .text-arrive-booking-image p{
        font-size:20px;
    }
    .booking-input-container {
        position: absolute;
        background-color: #eee;
        border-radius: 4px;
        top:31%;
        right:0%;
        margin-right: 10%
    }
    .full-input-booking-container{
        position: absolute;
        bottom:0%;
        align-items: center;
        left:0;
    }

    .big-large-screen{
        font-size:25px;
    }
    .booking-top-image{
        height: 45vh;
    }

}
/* Check out page */
.nice-select .list, 
.nice-select.open .list { 
    position: absolute;
    max-height: 30vh;
    line-height: 20px;
    /* height:20vh; */
     overflow: scroll;
     -webkit-appearance: menulist-button; }

.nice-select{
    line-height: 30px;
    color: #6c757d;
}
.top-text-checkout{
    font-family: serif;
    position:relative;
    display: block;
    height: 30vh;
    color:white;
    background-color:rgb(216, 215, 211);
}


.set-bottom-div{
    position:absolute;
    bottom:0;
}

.form-control.ng-untouched,
.form-control.ng-valid {
    border-color: red !important;
}

.border-red{
    border-color: red;
}


label .error{
    display: none !important; 
}
.wine-glass{
    height:60px;
    width:35px;
}

.fa-wine-glass{
    height: 20px;
}
.checkout-pay-box{
    background-color:#eee;
}

#card-error {
    color: rgb(105, 115, 134);
    text-align: left;
    font-size: 13px;
    line-height: 17px;
    margin-top: 12px;
  }

  #card-element {
    border-radius: 4px 4px 0 0 ;
    padding: 12px;
    border: 1px solid rgba(50, 50, 93, 0.1);
    height: 44px;
    width: 100%;
    background: white;
  }

  .stripe-button{
    background: #5469d4;
    color: #ffffff;
    font-family: Arial, sans-serif;
    border-radius: 0 0 4px 4px;
    border: 0;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: block;
    transition: all 0.2s ease;
    box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
    width: 100%;
  }
  .stripe-button:hover{
    filter: contrast(115%);
  }
  .stripe-button:disabled  {
    opacity: 0.5;
    cursor: default;
  }

  .input-form-stripe {
    align-self: center;
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
      0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
    border-radius: 7px;
    padding: 40px;
  }

  .result-message {
    line-height: 22px;
    font-size: 16px;
  }
  .result-message a {
    color: rgb(89, 111, 214);
    font-weight: 600;
    text-decoration: none;
  }
  .hidden {
    display: none;
  }

  #payment-request-button {
    margin-bottom: 32px;
  }

  .spinner,
  .spinner:before,
  .spinner:after {
    border-radius: 50%;
  }
  .spinner {
    color: #ffffff;
    font-size: 22px;
    text-indent: -99999px;
    margin: 0px auto;
    position: relative;
    width: 20px;
    height: 20px;
    box-shadow: inset 0 0 0 2px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }
  .spinner:before,
  .spinner:after {
    position: absolute;
    content: "";
  }
  .spinner:before {
    width: 10.4px;
    height: 20.4px;
    background: #5469d4;
    border-radius: 20.4px 0 0 20.4px;
    top: -0.2px;
    left: -0.2px;
    -webkit-transform-origin: 10.4px 10.2px;
    transform-origin: 10.4px 10.2px;
    -webkit-animation: loading 2s infinite ease 1.5s;
    animation: loading 2s infinite ease 1.5s;
  }
  .spinner:after {
    width: 10.4px;
    height: 10.2px;
    background: #5469d4;
    border-radius: 0 10.2px 10.2px 0;
    top: -0.1px;
    left: 10.2px;
    -webkit-transform-origin: 0px 10.2px;
    transform-origin: 0px 10.2px;
    -webkit-animation: loading 2s infinite ease;
    animation: loading 2s infinite ease;
  }


@media (min-width: 576px) {
}
@media (min-width: 768px) { 
}
@media (min-width: 992px) { 
    .top-text-checkout{
        height: 35vh;
}
.set-center-div{
    position:absolute;
    bottom:10%;
}
.wine-glass{
    height:80px;
    width:45px;
}

}

@media (min-width: 1200px) { 
}

/* About Us */
.top-text-aboutus{
    height: 20vh;
    background-color: rgba(255, 255, 255, 0.959);
    color: rgb(153, 153, 153);
    font-family:initial;
}

.about-us-page-bg{
    background-color:white;
}

@media (min-width: 576px) {
}
@media (min-width: 768px) { 
}
@media (min-width: 992px) { 
    .top-text-aboutus{
        height:10vh;
        background-color: white;
        font-size: 60px;  
        color: black;
    }

    .about-us-page-bg{
     background-color:rgb(255, 255, 255);
}
    }
@media (min-width: 1200px) { 
}

/* Succes */

.fill_div {
    background: linear-gradient(to right, #7c2b2b 50%, white 0);
    background-size: 200% 100%;
    background-position: right;
    animation: makeItfadeIn 5s 1s forwards;
  }

@keyframes makeItfadeIn {
    100% {
      background-position: left;
    }
  }

  .dispay-1-bootstrap{
    font-size:40px
}

.h1-bootstrap{
    font-size:15px
}

.center-screen{
    transform: translateY(-10%);
}

@media (min-width: 576px) {
}
@media (min-width: 768px) { 
}
@media (min-width: 992px) { 
    .dispay-1-bootstrap{
        font-size:90px
    }

    .center-screen{
        transform: translateY(0%);
    }

    .h1-bootstrap{
        font-size:35px
    }
}
@media (min-width: 1200px) { 
}


/* Footer */
.social-wrapper{
    display: inline-block;
}


.social-wrapper .social-button{
  display: inline-block;
  height: 60px;
  width: 60px;
  float: left;
  margin: 0 5px;
  overflow: hidden;
  background: #fff;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease-out;
}
.social-wrapper .social-button:hover{
  width: 200px;
}
.social-wrapper .social-button .icon{
  display: inline-block;
  height: 60px;
  width: 60px;
  text-align: center;
  border-radius: 50px;
  box-sizing: border-box;
  line-height: 60px;
  transition: all 0.3s ease-out;
}
.social-wrapper .social-button:nth-child(1):hover .icon{
  background: #4267B2;
}
.social-wrapper .social-button:nth-child(2):hover .icon{
  background: #1DA1F2;
}
.social-wrapper .social-button:nth-child(3):hover .icon{
  background: #E1306C;
}
.social-wrapper .social-button:nth-child(4):hover .icon{
  background: #333;
}
.social-wrapper .social-button:nth-child(5):hover .icon{
  background: #ff0000;
}
.social-wrapper .social-button .icon i{
  font-size: 25px;
  line-height: 60px;
  transition: all 0.3s ease-out;
}
.social-wrapper .social-button:hover .icon i{
  color: #fff;
}
.social-wrapper .social-button span{
  font-size: 20px;
  font-weight: 500;
  line-height: 60px;
  margin-left: 10px;
  transition: all 0.3s ease-out;
}
.social-wrapper .social-button:nth-child(1) span{
  color: #4267B2;
}
.social-wrapper .social-button:nth-child(2) span{
  color: #1DA1F2;
}
.social-wrapper .social-button:nth-child(3) span{
  color: #E1306C;
}
.social-wrapper .social-button:nth-child(4) span{
  color: #333;
}
.social-wrapper .social-button:nth-child(5) span{
  color: #ff0000;
}

.copyright-text{
    text-align: center;
    font-size: 11px;
}

a:hover {
    color: white;
    text-decoration: underline;
}


  .fa-facebook {
    color: white;
  }

.fa-instagram,
.fa-facebook-f {
    color: #2d2d2d !important;
}

@media (min-width: 576px) {
    .copyright-text{
        font-size: 11px;
    }
}

@media (min-width: 768px) { 
    .copyright-text{
    font-size: 11px;
    }

}

@media (min-width: 992px) { 
    .copyright-text{
    font-size: 12px;
    }
}

@media (min-width: 1200px) { 
    .copyright-text{
    font-size: 13px;
    }
 }

   /* CSS provided by you - ideally, move this to a separate CSS file */
    .about-us-french-style {
        background-color: #fdfaf5; /* A soft, creamy off-white, reminiscent of old French paper */
        color: #4a4a4a; /* A softer black for text */
        font-family: 'Lora', serif; /* An elegant serif font */
    }
/
    .about-us-french-style h1 {
        font-family: 'Playfair Display', serif; /* A classic, stylish serif for headings */
        color: #5C3D2E; /* A warm, earthy brown, like aged wood or rich coffee */
        font-weight: 700;
        letter-spacing: 0.5px;
        margin-bottom: 30px; /* More space after the heading */
    }

    .about-us-french-style p {
        line-height: 1.8; /* More breathable text */
        margin-bottom: 1.5rem; /* Consistent paragraph spacing */
        font-size: 1.1rem; /* Slightly larger for readability */
    }

    .about-us-french-style .lead-paragraph {
        font-size: 1.25rem;
        font-style: italic;
        color: #7a5c4e; /* A slightly lighter, warm brown for emphasis */
        margin-bottom: 2rem;
    }

    .about-us-french-style .signature {
        font-family: 'Dancing Script', cursive; /* A charming script font for the signature */
        font-size: 1.5rem;
        color: #5C3D2E;
        margin-top: 2rem;
        line-height: 1.5;
    }

    .about-us-french-style .remerciements { /* Styling for the "thanks" note */
        font-size: 0.9rem;
        font-style: italic;
        color: #888;
        margin-top: 3rem;
        border-top: 1px solid #e0e0e0; /* Subtle separator */
        padding-top: 1rem;
    }

    .image-gallery .img-fluid {
        border: 5px solid #fff; /* Clean white border around images */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Softer, more diffused shadow */
        border-radius: 8px; /* Slightly more pronounced rounding */
        padding: 0; /* Remove the p-2 if border is used this way */
        transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    }

    .image-gallery .img-fluid:hover {
        transform: scale(1.03); /* Slight zoom effect on hover */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .section-padding-navbar { /* Placeholder - adjust as needed based on your base.html */
         /* Example: padding-top: 70px; if your navbar is 70px tall */
        padding-top: 250px; /* Adjust this value based on your navbar height */
         /* This class needs to provide adequate top padding if you have a fixed navbar */
    }

    .contenu-principal { /* New class for the main content wrapper */
        padding: 3rem 1rem; /* Default padding */
    }

    @media (min-width: 768px) {
        .contenu-principal {
            padding: 4rem 2rem;
        }
    }

    @media (min-width: 992px) {
        .contenu-principal {
            padding: 5rem 3rem; /* Ensure this padding is desired */
        }
        .about-us-french-style .text-lg-start { /* Ensure text alignment classes are correctly applied */
             text-align: left !important;
        }
    }
```Clean and organise the code

## CodeCompanion (Gemini)

```css
/* [ -- Master Stylesheet -- ] */

/* ##### Index of Stylesheet #####

:: 1.0 Import Fonts
:: 2.0 Import All CSS
:: 3.0 Base CSS
:: 4.0 Preloader Area CSS (Not present in code)
:: 5.0 Scroll Up Area CSS (Not present in code)
:: 6.0 Section Heading Area CSS (Not present in code)
:: 7.0 South Button CSS (Not present in code)
:: 8.0 Header Area CSS
:: 9.0 Welcome Area CSS (Not present in code)
:: 10.0 Advanced Search Area (Partially present in Header)
:: 11.0 Single Property Area CSS (Not present in code)
:: 12.0 Testimonials Area CSS (Not present in code)
:: 13.0 Editor Area CSS (Not present in code)
:: 14.0 Call to Action CSS (Not present in code)
:: 15.0 Footer Area CSS
:: 16.0 Breadcumb Area CSS (Not present in code)
:: 17.0 About Us Area CSS
:: 18.0 Team Member Area CSS (Not present in code)
:: 19.0 Listings Area CSS (Not present in code)
:: 20.0 Blog Area CSS (Not present in code)
:: 21.0 Contact Area CSS (Not present in code)
:: 22.0 Shortcode Area CSS (Not present in code)

##### Index of Stylesheet ##### */

/* :: 1.0 Import Fonts */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
/*@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');*/

/* :: 2.0 Import All CSS */
@import url(bootstrap.min.css);
@import url(animate.css);
@import url(owl.carousel.css);
@import url(classy-nav.min.css);
@import url(magnific-popup.css);
@import url(font-awesome.min.css);
@import url(themify-icons.css);
@import url(nice-select.css);
@import url(jquery-ui.min.css);

/* :: 3.0 Base CSS */
html, body {
    height: 100%;
    width: 100%;
    font-family: 'Raleway'; /* Note: Raleway is not imported in section 1.0 */
    font-weight: 300;
    font-size: 14px;
    color: #555;
}

*:focus {
    outline: none !important;
}

th {
    font-size: 11px;
}

img {
    width: auto;
    max-width: 100%;
    height: auto;
}

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: none;
}

a:hover {
    color: white; /* Note: This might override more specific link hovers */
    text-decoration: underline;
}

/* Padding helpers */
.section-padding-10 { padding: 10px 0; }
.section-padding-20 { padding: 20px 0; }
.section-padding-30 { padding: 30px 0; }
.section-padding-40 { padding: 40px 0; }
.section-padding-60 { padding: 60px 0; }
.section-padding-80 { padding: 80px 0; }
.section-padding-100 { padding: 100px 0; }
.section-padding-130 { padding: 130px 0; }
.section-padding-90 { padding: 90px 0; } /* Added from later in the file */
.section-padding-navbar { /* Placeholder - adjust as needed based on your base.html */
    padding-top: 250px; /* Adjust this value based on your navbar height */
    /* This class needs to provide adequate top padding if you have a fixed navbar */
}


/* Height helpers */
.h-90 { height: 90%; }
.h-30 { height: 30%; }
.h-10 { height: 10%; }
.full-height { height: 100%; }

/* Top position helpers */
.top-40 { top: 40%; }

/* Background color helpers */
.dark-green-background { background-color: rgb(59, 100, 56); }
.brown-background { background-color: #918074; }
.white-background { background-color: #ffffff; }
.gray-background { background-color: #eee; }
.cream-white-background { background-color: rgb(248, 245, 245); }
.creme-background { background-color: rgba(192, 214, 223, 255); }
.shutters-green-background { background-color: rgba(165, 175, 166); } /* Note: Duplicated with footer-gray-background */
.footer-gray-background { background-color: white; } /* Note: Duplicated with shutters-green-background */
.dark-red-background { background-color: rgb(37, 150, 190); } /* Note: Color name contradicts value (blueish) */
.light-gray-background { background-color: rgb(248, 245, 245); } /* Note: Duplicated with cream-white-background */
.dark-blue-background { background-color: #223247; color: white; }
.blue-background { background-color: #013580; }
.mobile-booking-background {
    background-image: url('/static/home/img/bg-img/main-house-outside.jpg'); /* Note: Relative path */
    background-size: cover;
    height: 200%;
    opacity: 0.6;
}

/* Font family helpers */
.font-serif { font-family: serif; } /* Note: General serif, specific fonts preferred */
.font-georgia { font-family: georgia; }
.font-droid-serif { font-family: "Droid Serif"; }
.font-fjalla-one { font-family: 'Fjalla One'; }
.font-bodoni { font-family: 'Bodoni', serif !important; }
.font-julius { font-family: 'julius sans one', sans-serif; }

/* Font size helpers */
.font-size-12 { font-size: 12px; }
.font-size-14 { font-size: 14px; }
.font-size-16 { font-size: 15px; } /* Note: Class name 16, size 15 */
.font-12 { font-size: 12px; } /* Note: Duplicated with font-size-12 */
.big-large-screen { font-size: 25px; } /* Used in media query for booking */

/* Text color helpers */
.color-text-green { color: #235a3b; } /* Note: Duplicated later with different value */
.color-text-gray { color: #eee; }
.color-text-brown { color: #918074; }
.color-text-red { color: #d9534f; }
.color-text-white { color: white; }
.color-text-black { color: black; }
.color-text-pink { color: #F5B7C2; }
.color-text-green { color: #A0AFA8; } /* Note: Duplicated with different value */

/* Text alignment helpers */
.center-text { text-align: center; }
.text-alignment-slleft { text-align: left; } /* Note: Unusual name */
.text-alignment-scenter-lleft { text-align: center; } /* Note: Overwritten in media queries */
.text-alignment-1 h4 { text-align: left; } /* Note: Applies only to h4 within this class */

/* Vertical align helpers */
.vertical-align-50 { position: relative; top: 50%; }
.vertical-align-25 { position: relative; top: 25%; }
.vertical-align-20 { position: relative; top: 20%; }
.vertical-align-10 { position: relative; top: 10%; }

/* Other base styles */
.overflow-hddn { overflow-x: hidden; } /* Note: Unusual name */
.center { margin: 0 auto; }
.hr-thick { height: 1em; background-color: #ffffff; } /* Note: Height uses 'm' instead of 'em' */
.verticalLine { border-left: thick solid #ff0000; }
.h-ptext { } /* Empty rule */

h1, h2, h3 {
    font-family: 'julius sans one', sans-serif;
    font-weight: 400;
}

h4, h5, h6 {
    font-family: 'Bodoni', serif !important;
    font-weight: 400;
    color: #333;
}

.jumbotron {
    padding-bottom: 0;
    padding-top: 5px;
    background-color: white;
}

/* Base Media Queries */
@media (min-width: 576px) { }
@media (min-width: 768px) { }
@media (min-width: 992px) {
    .text-alignment-scenter-lleft {
        text-align: left;
    }
}
@media (min-width: 1200px) {
    .text-alignment-scenter-lleft {
        text-align: left;
    }
}

/* :: 8.0 Header Area CSS */
.dark .classynav ul li .dropdown,
.dark.classy-nav-container,
.dark .classynav ul li .megamenu,
.dark.breakpoint-on .classynav > ul > li > a,
.dark.breakpoint-on .classy-navbar .classy-menu {
    font-family: 'Fjalla One';
    background-color: rgba(255, 255, 255, 0.76);
}

.header-area {
    position: absolute;
    z-index: 10000;
    width: 100%;
    height: auto;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.book-now-button {
    font-family: 'Julius Sans One';
    font-weight: 900;
    color: white;
}

.main-header-area .classy-nav-container {
    background-color: #8B9B8B;
}

.main-header-area .classy-navbar {
    height: 90px;
    padding: .5em 60px;
}

.main-header-area .classynav ul li a {
    color: white;
    text-transform: uppercase;
    /*font-weight: 400;*/ /* Commented out */
    font-size: 14px;
    font-family: 'Julius Sans One';
}

.classy-nav-container a:hover {
    color: black;
}

.main-header-area .nav-brand {
    line-height: 0.8;
}

.main-header-area .classynav ul {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

/* Search form styles (related to 10.0 Advanced Search Area) */
.main-header-area .searchbtn {
    margin-left: 30px;
    line-height: 90px;
    background-color: transparent;
    width: 90px;
    text-align: center;
}

.main-header-area .south-search-form {
    position: relative;
    z-index: 1;
    display: none;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.main-header-area .south-search-form input {
    width: 650px;
    height: 50px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #050000;
    border-radius: 100px;
    padding: 0 30px;
    font-size: 14px;
}

.main-header-area .south-search-form button {
    position: absolute;
    top: 0;
    right: 15px;
    height: 50px;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    width: 50px;
    outline: none;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.main-header-area .south-search-form button:hover {
    color: #ffffff;
}

.search-close .searchbtn {
    background-color: #947054;
}

.search-close .classynav ul {
    display: none;
}

.search-close .south-search-form {
    display: block;
}

/* Sticky header */
.is-sticky .main-header-area {
    width: 100%;
    z-index: 10000 !important;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
}

/* Header Area Media Queries */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .main-header-area { height: 70px; }
    .main-header-area .classy-navbar { height: 70px; }
    .main-header-area .searchbtn {
        margin-left: 0;
        height: 50px;
        width: 100%;
        margin-top: 15px;
        line-height: 50px;
        background-color: #947054;
    }
    .main-header-area .south-search-form input {
        width: calc(100% - 30px);
        margin: 0 15px;
    }
}

@media only screen and (max-width: 767px) {
    .main-header-area { height: 70px; background-color: white; }
    .main-header-area .classy-navbar { height: 70px; padding: 0.5em 30px; }
    .main-header-area .searchbtn {
        margin-left: 0;
        height: 50px;
        width: 100%;
        margin-top: 15px;
        line-height: 50px;
        background-color: #531d1d;
    }
    .main-header-area .south-search-form input {
        width: calc(100% - 30px);
        margin: 0 15px;
    }
    .is-sticky .main-header-area { height: 70px; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-header-area .nav-brand { margin-right: 0; }
    .main-header-area .searchbtn { margin-left: 15px; width: 50px; }
    .main-header-area .south-search-form input { width: 550px; }
}

/* Navbar styles (potentially redundant with classy-nav) */
.navbar {
    background-color: #8B9B8B;
    font-family: 'Julius Sans One';
    color: #A0AFA8;
}

.navbar-light .navbar-nav .nav-link {
    color: #A0AFA8;
    font-weight: bold;
}

.navbar-light .navbar-text a {
    color: white;
}

.dropdown-item {
    font-family: 'Julius Sans One';
    font-size: 14px;
    color: #A0AFA8 !important;
    background-color: white;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: rgba(165, 175, 166);
    color: black;
}

.dropdown-menu-right .dropdown-item { height: 4vh; }
.dropdown-toggle { height: 5vh; }


/* Button styles */
.btn-xl {
    font-size: 0.85rem;
    padding: 10px 30px;
    border-radius: 0.3rem;
    color: #6D736A;
}

.btn { font-size: 12px; }

.book-button {
    border: none;
    color: #235a3b;
    height: 5%;
    width: 100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    background-color: transparent !important;
}

.btn-light:not(:disabled):not(.disabled).active,
.btn-light:active,
.btn-light.active {
    background-color: #dddbdb;
    border-color: #dddbdb;
    color: black;
}


/* Home page styles */
.home-img { opacity: 0.9; }
.collage-container { position: relative; }
.collage-text {
    position: absolute;
    transform: translate(100%, 135%); /* Center horizontally */
    padding: 20px;
    font-weight: bold;
    color: #; /* Darker color for text contrast */ /* Note: Empty color */
    background-color: rgb(256, 256, 256, 0.95); /* Note: RGB values > 255, should be 255 */
    z-index: 1;
    border-radius: 2px;
    text-align: center; /* Center text */
}
.collage {
    display: grid;
    grid-template-columns: repeat(8, 2fr); /* Note: using 2fr might be unintended, usually 1fr */
    gap: 5px;
    position: relative;
    z-index: 0; /* Ensure collage is below text */
}
.collage img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.collage .tall { grid-row: span 2; grid-column: span 2; } /* Note: Column span 2 here contradicts grid template */
.collage .wide { grid-column: span 2; grid-row: span 1; }
.collage_about { /* Note: Similar to .collage but for 'about' section */
    display: grid;
    grid-template-rows: repeat(8, 1fr); /* Divide the grid height into 10 equal rows */
    grid-template-columns: repeat(8, 1fr); /* Divide the width into 6 equal columns */
    gap: 5px; /* Space between the images */
    height: auto; /* Full viewport height */
    width: 100%; /* Full viewport width */
    position: relative;
    z-index: 0; /* Ensure collage stays behind text or other elements */
    /*border: 15px solid rgb(165, 175, 166); /* Border for visualization *//* Commented out */
    /*border-radius: 5px; /* Rounded corners *//* Commented out */
}
.collage_about .tall_about { grid-row: span 2; grid-column: span 1; } /* Spans two rows, one column */ /* Note: Comment says two columns */
.collage_about .wide_about { grid-column: span 2; grid-row: span 1; } /* Spans two columns, one row */
.full-page-picture { width: 100%; }
.full-page-picture > div { position: unset !important; }
.picture-remaining-height {
    object-fit: contain;
    width: 100% !important;
    position: relative !important;
    height: unset !important;
}
.arrival-screen-text-0container {
    position: absolute;
    top: 0%;
    height: 10vh;
    right: 0%;
    background-color: rgb(247, 247, 247);
    color: white; /* Note: Text color is white on light background */
    font-size: 15px;
}
#homepage-container {
    display: none;
    font-family: Georgia;
    height: 100vh;
}
.property-label { opacity: 0; } /* Empty rule */
.img-below-text { display: none; max-height: 50%; }
.img-above-text { display: inline; }
.area-background {
    background-image: url('/static/property/surroundings/img/wine_field.jpg'); /* Note: Relative path */
    background-size: cover;
    opacity: 1;
    height: 50%;
}
.txtbox-homecontainer {
    text-align: center;
    opacity: 1;
    font-size: 16px;
    height: 100%;
}
.gite-home { height: 200px; }
.overlay-area {
    height: 100%;
    opacity: 1;
    transition: .5s ease;
}
.img__wrap { position: relative; }
.img__description {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(243, 244, 245, 0.72);
    color: #fff;
    visibility: visible; /* Note: Starts visible */
    opacity: 1; /* Note: Starts opaque */
    /* transition effect. not necessary */ /* Commented out */
    transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description {
    visibility: visible;
    opacity: 1;
}
.area-background:hover .overlay-area {
    background-color: rgb(248, 245, 245, 0.7);
    color: rgba(0, 0, 0, 1);
}

/* Home page Media Queries */
@media (min-width: 576px) {
    .home-img {
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        width: 100%;
        margin: auto;
    }
    .mobile-booking-background { display: block; } /* Used in Booking page section */
}
@media (min-width: 992px) {
    #homepage-intro-text { display: none; }
    #homepage-container { display: block; }
    .gite-home { height: auto; }
    .img__description {
        visibility: hidden; /* Becomes hidden */
        opacity: 0; /* Becomes transparent */
    }
}
@media (min-width: 1200px) {
    .img-above-text { display: none; }
    .img-below-text { display: inline; max-height: 50vh; }
    .overlay-area {
        background-color: rgb(248, 245, 245, 0);
        color: rgba(0, 0, 0, 0);
    }
    .mobile-booking-background { display: none; } /* Used in Booking page section */
}


/* Property page styles */
.main-house-jumbotron {
    height: auto;
    font-size: 15px;
}
.property-information-page {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: inline-block;
}
.grid-sizer, .grid-item {
    width: 49%;
    margin: 0.2% 0.2% 0.2% 0.2%;
}
.pswp { z-index: 10000000; }

/* Property page Media Queries */
@media (min-width: 992px) {
    .side-buttons-property .dropdown-item {
        height: 6vh;
        font-size: 15px;
        box-shadow: none;
    }
    .sidenav {
        height: 89%;
        position: fixed;
        z-index: 1;
        bottom: 0;
        overflow-x: hidden;
        padding-top: 20px;
    }
    .grid-sizer, .grid-item {
        width: 49%;
        margin: 0.2% 0.2% 0.2% 0.2%;
    }
}
@media (min-width: 1200px) {
    .grid-sizer, .grid-item {
        width: 32%;
        margin: 0% 0.5% 0.5% 0.5%; /* Note: 0% margin */
    }
}

/* Slideshow styles */
.slideshow-container { position: relative; }
.mySlides { display: block; width: 50%; margin: auto; }
.arrangement-photos { display: block; width: 70%; margin: auto; }
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
.next { right: 10%; border-radius: 3px 0 0 3px; }
.prev { left: 10%; }
.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); }
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.active, .dot:hover { background-color: #a2a2a3; }
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
@-webkit-keyframes fade { from { opacity: .4; } to { opacity: 1; } }
@keyframes fade { from { opacity: .4; } to { opacity: 1; } }

/* Slideshow Media Queries */
@media (min-width: 1200px) {
    .mySlides { width: 100%; margin: auto; }
    .next { right: 0; }
    .prev { left: 0; }
    .arrangement-photos { width: 100%; margin: auto; }
}

/* Booking page styles */
.arrive-booking-container {
    height: 30%;
    font-family: "serif";
}
.full-input-booking-container {
    position: relative;
    z-index: 100000000000; /* Note: Very high z-index */
    margin-top: 0;
}
.text-arrive-booking-image { top: 20%; z-index: 10; }
.booking-top-image { height: 25vh; }
.residence-container { height: 30%; }
.booking-input-container { background-color: #dddbdb; }
.full-booking-container {
    border-radius: 3px;
    position: absolute;
    top: 25%;
    height: 60%;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.booking-img { display: none; } /* Note: Overridden by media query */
.price-indication-container {
    position: absolute;
    display: block;
    border-radius: 10px;
    font-family: "Times New Roman";
    font-style: italic;
    font-weight: bold;
    color: #235a3b;
    background-color: white;
    font-size: 2vw; /* Note: Using vw for font size */
    height: 60%;
    text-align: center;
    text-indent: 3%;
    opacity: 1;
    /* background-color: white; */ /* Duplicate */
    /* color: #235a3b; */ /* Duplicate */
    -webkit-animation: fadein 3s;
    -moz-animation: fadein 3s;
    -ms-animation: fadein 3s;
    -o-animation: fadein 3s;
    animation: fadein 3s;
}

.prices-indicator {
    padding-top: 5%;
    position: relative;
    height: 80%;
    display: flex;
    align-content: space-around; /* Note: align-content usually for flex-wrap */
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
}
.price-indication-row { flex: 1; }
.price-indication-flex-item { font-size: 15px; width: 20%; position: relative; }
.price-indication-flex-container {
    height: 10%; /* Note: Small height for a flex container with children */
    display: flex;
    flex-direction: column;
    -webkit-animation: fadein 3s;
    -moz-animation: fadein 3s;
    -ms-animation: fadein 3s;
    -o-animation: fadein 3s;
    animation: fadein 3s;
}
.label-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    -webkit-animation: fadein 3s;
    -moz-animation: fadein 3s;
    -ms-animation: fadein 3s;
    -o-animation: fadein 3s;
    animation: fadein 3s;
}
.child-price-indication { flex: 1; }
.big-child-price-indication { flex: 2; }
.label-height { position: relative; height: 20%; }

/* Booking page Media Queries */
@media (min-width: 576px) {
    .mobile-booking-background { display: block; }
}

@media (min-width: 1200px) {
    .price-indication-container {
        font-size: 2vh; /* Note: Using vh for font size */
        height: 60%;
        top: 25%; /* Positioned again */
        font-size: 25%; /* Note: Font size as percentage of parent? Unusual */
    }
    .arrive-booking-container { height: auto; font-family: "serif"; }
    .text-arrive-booking-image { top: 30%; }
    .text-arrive-booking-image h1 { font-size: 60px; }
    .text-arrive-booking-image p { font-size: 20px; }
    .booking-input-container {
        position: absolute;
        background-color: #eee;
        border-radius: 4px;
        top: 31%;
        right: 0%;
        margin-right: 10%;
    }
    .full-input-booking-container {
        position: absolute;
        bottom: 0%;
        align-items: center;
        left: 0;
    }
    .big-large-screen { font-size: 25px; }
    .booking-top-image { height: 45vh; }
    .mobile-booking-background { display: none; }
    .booking-img {
        display: block;
        max-width: 100%;
        max-height: 100vh;
        width: 100%;
        margin: auto;
        opacity: 0.7;
    }
}

/* Calendar styles (Used in Booking page) */
.calendar-container {
    border-radius: 5px;
    position: relative;
    width: 60%;
    height: 75%;
    bottom: 15%;
    left: 20%;
    background-color: white;
    -webkit-animation: fadein 3s;
    -moz-animation: fadein 3s;
    -ms-animation: fadein 3s;
    -o-animation: fadein 3s;
    animation: fadein 3s;
}
.calendar-upper-container {
    position: relative; /* Note: Position is relative and then absolute */
    border-radius: 5px;
    position: absolute;
    height: 15%;
    width: 100%;
    background-color: #F36E3E;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    -webkit-animation: fadein 3s;
    -moz-animation: fadein 3s;
    -ms-animation: fadein 3s;
    -o-animation: fadein 3s;
    animation: fadein 3s;
}
.card-header { /* Note: Used within calendar, confusing class name */
    width: 20%;
    opacity: 1 !important;
    align-items: center;
    color: white;
    cursor: pointer;
}
.card-header-left { /* Note: Used within calendar */
    width: 20%;
    opacity: 1 !important;
    text-align: left;
    color: white;
    cursor: pointer;
}
.card-header-right { /* Note: Used within calendar */
    width: 20%;
    opacity: 1 !important;
    text-align: right;
    color: white;
    cursor: pointer;
}
.days-week-container {
    position: relative; /* Note: Position is relative and then absolute */
    border-radius: 5px;
    position: absolute;
    list-style-type: none;
    top: 15%;
    height: 10%;
    width: 100%;
    background-color: white;
    color: red; /* Note: Day names are red */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    -webkit-animation: fadein 3s;
    -moz-animation: fadein 3s;
    -ms-animation: fadein 3s;
    -o-animation: fadein 3s;
    animation: fadein 3s;
}
.day-of-week-box {
    position: relative;
    display: block;
    text-align: center;
    width: 14.2857142857%; /* Approx 1/7th */
}
.dates-container {
    border-radius: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    top: 30%;
    height: 100%; /* Note: Height 100% starting at top 30%, likely overflow */
    width: 100%;
}
.cell-class {
    position: relative;
    width: 14.2857142857%;
    font-size: 20px;
    flex: 1;
    height: 100%; /* Note: Height 100% within a flex item, likely unintended */
    text-align: center;
    background-color: #ffffff;
}
.row-class {
    position: relative;
    border-radius: 5px;
    list-style-type: none;
    height: 20%; /* Note: Row height 20% gives 5 rows (5*20%=100%) which makes sense for a calendar */
    width: 100%;
    color: red;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Image Stack styles (Used in Booking page) */
.image-stack::after {
    content: ' ';
    display: table;
    clear: both;
}
.image-stack__item--top {
    float: left;
    width: 66%;
    margin-right: -100%;
    position: relative;
    z-index: 1;
}
.image-stack__item--bottom {
    float: right;
    width: 75%;
}
@supports (display: grid) {
    .image-stack {
        display: grid;
        position: relative;
        grid-template-columns: repeat(12, 1fr);
    }
    .image-stack__item--bottom {
        grid-column: 4 / -1;
        grid-row: 1;
        width: 100%;
    }
    .image-stack__item--top {
        grid-row: 1;
        grid-column: 1 / span 8;
        padding-top: 20%; /* slightly arbitrary, keeps proportion once resized */
        width: 100%;
    }
}

.confirm-booking-container {
    background-color: #235a3b;
    opacity: 0.4;
    height: 750px;
    padding: 200px 0 0px 0;
}

.house-jumbo {
    background-color: #918074;
    color: white !important;
}

/* Check out page styles */
.nice-select .list,
.nice-select.open .list {
    position: absolute;
    max-height: 30vh;
    line-height: 20px;
    /* height:20vh; */ /* Commented out */
    overflow: scroll;
    -webkit-appearance: menulist-button;
}
.nice-select { line-height: 30px; color: #6c757d; }
.top-text-checkout {
    font-family: serif;
    position: relative;
    display: block;
    height: 30vh;
    color: white; /* Note: Text color is white on light grey background */
    background-color: rgb(216, 215, 211);
}
.set-bottom-div { position: absolute; bottom: 0; }
.form-control.ng-untouched,
.form-control.ng-valid {
    border-color: red !important; /* Note: This will make valid fields red */
}
.border-red { border-color: red; }
label .error { display: none !important; } /* Note: Hides validation errors */
.wine-glass { height: 60px; width: 35px; }
.fa-wine-glass { height: 20px; }
.checkout-pay-box { background-color: #eee; }

/* Stripe related styles */
#card-error {
    color: rgb(105, 115, 134);
    text-align: left;
    font-size: 13px;
    line-height: 17px;
    margin-top: 12px;
}
#card-element {
    border-radius: 4px 4px 0 0;
    padding: 12px;
    border: 1px solid rgba(50, 50, 93, 0.1);
    height: 44px;
    width: 100%;
    background: white;
}
.stripe-button {
    background: #5469d4;
    color: #ffffff;
    font-family: Arial, sans-serif;
    border-radius: 0 0 4px 4px;
    border: 0;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: block;
    transition: all 0.2s ease;
    box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
    width: 100%;
}
.stripe-button:hover { filter: contrast(115%); }
.stripe-button:disabled { opacity: 0.5; cursor: default; }
.input-form-stripe {
    align-self: center;
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), 0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
    border-radius: 7px;
    padding: 40px;
}
.result-message { line-height: 22px; font-size: 16px; }
.result-message a { color: rgb(89, 111, 214); font-weight: 600; text-decoration: none; }
.hidden { display: none; }
#payment-request-button { margin-bottom: 32px; }

/* Spinner styles (Stripe) */
.spinner, .spinner:before, .spinner:after { border-radius: 50%; }
.spinner {
    color: #ffffff;
    font-size: 22px;
    text-indent: -99999px;
    margin: 0px auto;
    position: relative;
    width: 20px;
    height: 20px;
    box-shadow: inset 0 0 0 2px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.spinner:before, .spinner:after { position: absolute; content: ""; }
.spinner:before {
    width: 10.4px;
    height: 20.4px;
    background: #5469d4;
    border-radius: 20.4px 0 0 20.4px;
    top: -0.2px;
    left: -0.2px;
    -webkit-transform-origin: 10.4px 10.2px;
    transform-origin: 10.4px 10.2px;
    -webkit-animation: loading 2s infinite ease 1.5s;
    animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
    width: 10.4px;
    height: 10.2px;
    background: #5469d4;
    border-radius: 0 10.2px 10.2px 0;
    top: -0.1px;
    left: 10.2px;
    -webkit-transform-origin: 0px 10.2px;
    transform-origin: 0px 10.2px;
    -webkit-animation: loading 2s infinite ease;
    animation: loading 2s infinite ease;
}
@-webkit-keyframes loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

/* Checkout page Media Queries */
@media (min-width: 992px) {
    .top-text-checkout { height: 35vh; }
    .set-center-div { position: absolute; bottom: 10%; }
    .wine-glass { height: 80px; width: 45px; }
}

/* :: 17.0 About Us Area CSS */
.top-text-aboutus {
    height: 20vh;
    background-color: rgba(255, 255, 255, 0.959);
    color: rgb(153, 153, 153);
    font-family: initial; /* Note: initial font family is often browser default */
}
.about-us-page-bg { background-color: white; }

/* CSS provided by you - ideally, move this to a separate CSS file */
.about-us-french-style {
    background-color: #fdfaf5; /* A soft, creamy off-white, reminiscent of old French paper */
    color: #4a4a4a; /* A softer black for text */
    font-family: 'Lora', serif; /* An elegant serif font */
}
.about-us-french-style h1 {
    font-family: 'Playfair Display', serif; /* A classic, stylish serif for headings */
    color: #5C3D2E; /* A warm, earthy brown, like aged wood or rich coffee */
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 30px; /* More space after the heading */
}
.about-us-french-style p {
    line-height: 1.8; /* More breathable text */
    margin-bottom: 1.5rem; /* Consistent paragraph spacing */
    font-size: 1.1rem; /* Slightly larger for readability */
}
.about-us-french-style .lead-paragraph {
    font-size: 1.25rem;
    font-style: italic;
    color: #7a5c4e; /* A slightly lighter, warm brown for emphasis */
    margin-bottom: 2rem;
}
.about-us-french-style .signature {
    font-family: 'Dancing Script', cursive; /* A charming script font for the signature */
    font-size: 1.5rem;
    color: #5C3D2E;
    margin-top: 2rem;
    line-height: 1.5;
}
.about-us-french-style .remerciements { /* Styling for the "thanks" note */
    font-size: 0.9rem;
    font-style: italic;
    color: #888;
    margin-top: 3rem;
    border-top: 1px solid #e0e0e0; /* Subtle separator */
    padding-top: 1rem;
}
.image-gallery .img-fluid {
    border: 5px solid #fff; /* Clean white border around images */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Softer, more diffused shadow */
    border-radius: 8px; /* Slightly more pronounced rounding */
    padding: 0; /* Remove the p-2 if border is used this way */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.image-gallery .img-fluid:hover {
    transform: scale(1.03); /* Slight zoom effect on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.contenu-principal { /* New class for the main content wrapper */
    padding: 3rem 1rem; /* Default padding */
}

/* About Us Media Queries */
@media (min-width: 992px) {
    .top-text-aboutus {
        height: 10vh;
        background-color: white;
        font-size: 60px;
        color: black;
    }
    .about-us-page-bg { background-color: rgb(255, 255, 255); }
    .contenu-principal { padding: 5rem 3rem; } /* Ensure this padding is desired */
    .about-us-french-style .text-lg-start { text-align: left !important; } /* Ensure text alignment classes are correctly applied */
}
@media (min-width: 768px) {
    .contenu-principal { padding: 4rem 2rem; }
}


/* Success page styles */
.fill_div {
    background: linear-gradient(to right, #7c2b2b 50%, white 0);
    background-size: 200% 100%;
    background-position: right;
    animation: makeItfadeIn 5s 1s forwards;
}
@keyframes makeItfadeIn { 100% { background-position: left; } }
.dispay-1-bootstrap { font-size: 40px; }
.h1-bootstrap { font-size: 15px; }
.center-screen { transform: translateY(-10%); }

/* Success page Media Queries */
@media (min-width: 992px) {
    .dispay-1-bootstrap { font-size: 90px; }
    .center-screen { transform: translateY(0%); }
    .h1-bootstrap { font-size: 35px; }
}


/* Popup box styles */
.hover_bkgr_fricc {
    background: rgba(0, 0, 0, .4);
    cursor: pointer;
    display: none;
    height: 100%;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 10000;
}
.hover_bkgr_fricc .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.hover_bkgr_fricc > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 551px;
    vertical-align: middle;
    width: 90%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
    color: black;
}
.popupCloseButton {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.popupCloseButton:hover { background-color: #ccc; }
.trigger_popup_fricc { cursor: pointer; display: inline-block; font-weight: bold; }


/* :: 15.0 Footer Area CSS */
.social-wrapper { display: inline-block; }
.social-wrapper .social-button {
    display: inline-block;
    height: 60px;
    width: 60px;
    float: left; /* Note: float can be problematic with modern layouts */
    margin: 0 5px;
    overflow: hidden;
    background: #fff;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-out;
}
.social-wrapper .social-button:hover { width: 200px; }
.social-wrapper .social-button .icon {
    display: inline-block;
    height: 60px;
    width: 60px;
    text-align: center;
    border-radius: 50px;
    box-sizing: border-box;
    line-height: 60px;
    transition: all 0.3s ease-out;
}
.social-wrapper .social-button:nth-child(1):hover .icon { background: #4267B2; } /* Facebook */
.social-wrapper .social-button:nth-child(2):hover .icon { background: #1DA1F2; } /* Twitter (not in original icons) */
.social-wrapper .social-button:nth-child(3):hover .icon { background: #E1306C; } /* Instagram */
.social-wrapper .social-button:nth-child(4):hover .icon { background: #333; } /* Github/general dark (not in original icons) */
.social-wrapper .social-button:nth-child(5):hover .icon { background: #ff0000; } /* YouTube (not in original icons) */

.social-wrapper .social-button .icon i {
    font-size: 25px;
    line-height: 60px;
    transition: all 0.3s ease-out;
}
.social-wrapper .social-button:hover .icon i { color: #fff; }

.social-wrapper .social-button span {
    font-size: 20px;
    font-weight: 500;
    line-height: 60px;
    margin-left: 10px;
    transition: all 0.3s ease-out;
}
.social-wrapper .social-button:nth-child(1) span { color: #4267B2; } /* Facebook */
.social-wrapper .social-button:nth-child(2) span { color: #1DA1F2; } /* Twitter */
.social-wrapper .social-button:nth-child(3) span { color: #E1306C; } /* Instagram */
.social-wrapper .social-button:nth-child(4) span { color: #333; } /* Github/general dark */
.social-wrapper .social-button:nth-child(5) span { color: #ff0000; } /* YouTube */

/* Social icons inherit color from parent elements */

.copyright-text { text-align: center; font-size: 11px; }

/* Footer Media Queries */
@media (min-width: 576px) { .copyright-text { font-size: 11px; } }
@media (min-width: 768px) { .copyright-text { font-size: 11px; } }
@media (min-width: 992px) { .copyright-text { font-size: 12px; } }
@media (min-width: 1200px) { .copyright-text { font-size: 13px; } }




/* ============================================
   Mobile Touch-Friendly Styles
   ============================================ */

/* Ensure minimum touch target size of 44x44px for accessibility */
@media (max-width: 768px) {
    /* Navigation links */
    .navbar-nav .nav-link {
        min-height: 44px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
    }

    /* Dropdown items */
    .dropdown-item {
        min-height: 44px;
        padding: 12px 20px;
        display: flex;
        align-items: center;
    }

    /* Book Now button */
    .book-now-button {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* General buttons */
    button,
    .btn,
    [type="button"],
    [type="submit"],
    [type="reset"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
    }

    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    textarea,
    select {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Links that act as buttons */
    a.btn,
    .south-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Social icons */
    .social-wrapper .social-button .icon {
        min-height: 44px;
        min-width: 44px;
    }

    /* Footer links */
    footer a {
        min-height: 44px;
        padding: 8px 4px;
        display: inline-flex;
        align-items: center;
    }

    /* Navbar toggler */
    .navbar-toggler {
        min-height: 44px;
        min-width: 44px;
        padding: 8px 12px;
    }
}

/* Improve tap feedback on mobile */
@media (hover: none) and (pointer: coarse) {
    .nav-link:active,
    .btn:active,
    .book-now-button:active,
    button:active {
        opacity: 0.8;
        transform: scale(0.98);
    }
}