/*
Theme Name: Mellow - Hotel HTML Website Template
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Mellow is specially designed for Hotel Website by TemplatesJungle.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
2.1 General Styles
2.2 Background Color
2.3 Section
- Section Paddings
- Section Margins
- Section Title
2.4 Buttons
- Primary Buttons
- Outline Buttons
- Button Hover Effects

3. CONTENT ELEMENTS
- Dropdown
- Form
- Svg Color
- Swiper
- Modal Video
- Preloader

4. SITE STRUCTURE
4.1 Header
4.2 Billboard
4.3 Rooms Section
4.4 Services Section

5. PAGES STYLE
5.1 About page
5.2 Blog page 
5.3 Booking page 
5.4 Gallery page
5.5 Reviews page 
5.5 FAQs page 



/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  --primary-color: #F86295;
  --secondary-color: #F9F6F3;
  --black-color: #1A1A1A;
  --dark-color: #353535;
  --primary-color-200: #E8F0F1;
  --primary-color-400: #c4e9ed;
  --gray-color: #777F81;
  --light-color: #fdfdfd;
  
  /* bootstrap color-scheme */
  --bs-dark-rgb: 80, 80, 80;
  --bs-gray-100: #EAE5DD;
  --bs-gray-300: #DCDCDC;
  --bs-light-rgb: rgba(255, 255, 255, 1);
  --bs-body-color-rgb: 53, 53, 53;
  --bs-primary-rgb: 209, 104, 6;
  --bs-secondary-rgb: 249, 246, 243;
}

/* Fonts */
:root {
  --heading-font: "Cormorant Upright", serif;
  --body-font: "Sora", sans-serif;
}

/*----------------------------------------------*/
/* 2 GENERAL TYPOGRAPHY
/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}

body {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 164%;
  letter-spacing: 0.32px;
  color: var(--dark-color);
  margin: 0;
}

p {
  color: var(--dark-color);
}

a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}

a:hover {
  color: var(--primary-color);
}

.text-light {
  color: var(--light-color) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-black {
  color: var(--black-color) !important;
}

/* 2.2 Background Color
/*----------------------------------------------*/
.bg-light {
  background-color: var(--light-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-gray {
  background-color: var(--bs-gray-100) !important;
}

/*--------------------------------------------------------------
/** 2.3 Section
--------------------------------------------------------------*/
/* - Section Padding
--------------------------------------------------------------*/
.padding-small {
  padding-top: 5em;
  padding-bottom: 5em;
}

.padding-top {
  padding-top: 5em;
}

.padding-bottom {
  padding-bottom: 5em;
}

.padding-medium {
  padding-top: 8em;
  padding-bottom: 8em;
}

.padding-large {
  padding-top: 8em;
  padding-bottom: 8em;
}

.padding-side {
  padding-left: 6rem;
  padding-right: 6rem;
}

@media (max-width: 1400px) {
  .padding-side {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

@media (max-width: 1200px) {
  .padding-side {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

@media (max-width: 992px) {
  .padding-side {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (max-width: 768px) {
  .padding-side {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  .padding-large {
    padding-top: 15em;
  }
}

@media (max-width: 576px) {
  .padding-side {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .padding-large {
    padding-top: 18em;
  }
}

/* - Section Margin
--------------------------------------------------------------*/
.margin-small {
  margin-top: 8.125em;
  margin-bottom: 8.125em;
}

.margin-medium {
  margin-top: 10em;
  margin-bottom: 10em;
}

.margin-large {
  margin-top: 12em;
  margin-bottom: 12em;
}


/* - Section Title
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--black-color);
  font-family: var(--heading-font);
  text-transform: capitalize;
  font-weight: 400;
}

/* Animation */
@media (min-width: 200px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

/* Animate Slide */
@keyframes slide {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
  
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slide {
  -webkit-animation-name: slide;
  animation-name: slide;
}

/*--------------------------------------------------------------
/** 2.4 Buttons
--------------------------------------------------------------*/
.btn {
  --bs-btn-padding-x: 2.4rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  text-transform: capitalize;
  border-radius: 10px;
  transition: all 0.4s ease-in-out;
}

/* - Primary Buttons
--------------------------------------------------------------*/
.btn-primary {
  --bs-btn-color: var(--dark-color);
  --bs-btn-bg: var(--secondary-color);
  --bs-btn-border-color: var(--secondary-color);
  --bs-btn-hover-color: var(--dark-color);
  --bs-btn-hover-bg: var(--secondary-color);
  --bs-btn-hover-border-color: var(--secondary-color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--dark-color);
  --bs-btn-active-bg: var(--secondary-color);
  --bs-btn-active-border-color: var(--secondary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--dark-color);
  --bs-btn-disabled-bg: var(--secondary-color);
  --bs-btn-disabled-border-color: var(--secondary-color);
}

/* - Outline Buttons
--------------------------------------------------------------*/
.btn-outline-primary {
  --bs-btn-color: var(--secondary-color);
  --bs-btn-border-color: var(--secondary-color);
  --bs-btn-hover-color: var(--dark-color);
  --bs-btn-hover-bg: var(--secondary-color);
  --bs-btn-hover-border-color: var(--secondary-color);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: var(--dark-color);
  --bs-btn-active-bg: var(--secondary-color);
  --bs-btn-active-border-color: var(--secondary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--secondary-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--secondary-color);
  --bs-gradient: none;
}

/* - Button Hover Effects
------------------------------------------------------------- */
.btn-arrow {
  position: relative;
  transition: background-color 300ms ease-out;
}

.btn-arrow span {
  display: inline-block;
  position: relative;
  transition: all 300ms ease-out;
  will-change: transform;
}

.btn-arrow:hover span {
  transform: translate3d(-0.7rem, 0, 0);
}

.btn-arrow svg {
  position: absolute;
  right: 0;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 300ms ease-out;
  will-change: right, opacity;
}

.btn-arrow:hover svg {
  opacity: 1;
  right: -1.6rem;
}


/*--------------------------------------------------------------
/** 3.CONTENT ELEMENTS
--------------------------------------------------------------*/

/* Dropdown
------------------------------------------------------------- */
.dropdown-item {
  color: var(--dark-color);
  text-transform: capitalize;
}

.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:active {
  color: var(--dark-color);
  background-color: var(--secondary-color);
}

/* Form
------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
  border-color: var(--dark-color);
  outline: 0;
  box-shadow: none;
}

input,
select,
textarea {
  border-color: var(--dark-color);
  outline: 0;
  box-shadow: none;
}

select:focus {
  box-shadow: none;
}

/* Svg Color
------------------------------------------------------------- */
svg.light-color {
  color: var(--light-color);
}

svg.dark-color {
  color: var(--dark-color);
}

svg.color {
  color: #F86295;
}

svg.primary-color {
  color: var(--primary-color);
}

svg.social {
  color: #F86295;
}

svg.social:hover {
  color: var(--primary-color);
}



/* Swiper
------------------------------------------------------------- */

/* room */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
}

.room-pagination .swiper-pagination-bullet {
  width: 18px;
  height: 18px;
  background-color: var(--primary-color);
}

.room-pagination .swiper-pagination-bullet-active {
  background-color: var(--primary-color);
}

/* gallery */
.main-slider-button-next.swiper-button-disabled,
.main-slider-button-prev.swiper-button-disabled {
  opacity: .35;
  cursor: auto;
  pointer-events: none;
}

/* Preloader
------------------------------------------------------------- */
.preloader {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 111;
  background: #fff;
}

.loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #F86295;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #F86295;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

.loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #F86295;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* 4.1 Header
/*----------------------------------------------*/

a.nav-link {
  text-transform: capitalize;
  color: var(--dark-color);
}

a.nav-link:focus {
  color: var(--dark-color);
}

a.nav-link.active,
a.nav-link:hover {
  color: var(--primary-color) !important;
  outline: none;
}

#primary-header .dropdown .search::after {
  content: none;
}

#primary-header .search-dropdown .dropdown-menu {
  width: 260px;
}

#primary-header .search-dropdown .dropdown-menu input {
  min-width: 100%;
}

#primary-header .search-dropdown .dropdown-menu button {
  padding: 0 12px;
  min-height: -webkit-fill-available;
  border-radius: 0.25rem;
}

@media (max-width: 999px) {
  a.nav-link {
    font-size: 30px;
    padding: 15px 0 15px 0 !important;
  }
}


/* 4.3 Rooms Section
/*----------------------------------------------*/
.room-item img.post-image {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.room-item:hover img.post-image {
  opacity: 0.5;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.product-description {
  opacity: 0;
  bottom: -125px;
  transition: all 0.5s ease-in-out;
}

.room-item:hover .product-description {
  opacity: 1;
  bottom: 20px;
}

@media only screen and (min-width:770px) and (max-width: 1400px) {
  .product-description {
    bottom: -180px;
  }
}


/* 4.4 Services Section
/*----------------------------------------------*/

.service {
  border: 1px solid #F4E2D8;
  transition: all 0.3s ease-in-out;
}

.service:hover {
  border: 1px solid var(--primary-color);
}


.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F86295;
  color: #333;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  width: 50px;
  height: 50px;
  text-decoration: none;
  z-index: 1000;
}

.back-to-top:hover {
  background-color: #e0e0e0;
}

.back-to-top svg {
  transform: translate(0, 0); /* Force le centrage si l'alignement n'est pas parfait */
  
}

.rounded-center {
  display: block; /* Permet de centrer via margin */
  margin: 0 auto; /* Centre horizontalement */
  border-radius: 50%; /* Rend l'image ronde */
  overflow: hidden; /* Coupe les coins si nécessaire */
}

#Encoreplus {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.info-box {
  background-color: #f8f9fa; /* couleur de fond du rectangle */
  border-radius: 15px; /* coins arrondis */
  padding: 20px 30px; /* marge intérieure */
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ombre douce pour donner de la profondeur */
  width: 80%; /* ajuster la largeur du rectangle */
  max-width: 600px; /* largeur maximale */
  
}

/* Pages tarifs */

.pricing-container {
  display: flex;
  justify-content: center;
  gap: 70px;
  flex-wrap: wrap;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  width: 250px;
  overflow: hidden;
}

.card-header {
  color: white;
  padding: 20px;
  font-size: 1.5em;
  font-weight: bold;
}

.card-body {
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.basique {
  background-color: #F5A6C7;
}

.standard {
  background-color: #e64688;
}

.prime {
  background-color: #CA1562;
}

.price {
  font-size: 2em;
  margin: 20px 0;
}

.features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.features li {
  padding: 8px 0;
  border-top: 1px solid #eee;
}

.buy-btn {
  display: inline-block;
  margin-bottom: 20px;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.buy-btn:hover {
  background-color: white ;
  color: #e64688;
  border: 2px solid #e64688;
}

/* Pages Mes articles */

    h1 {
      text-align: center;
      margin: 40px 0 20px;
      font-size: 2.2em;
    }

    .articles-container {
      max-width: 1000px;
      margin: 0 auto 80px;
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .article-card {
      background-color: #fff;
      display: flex;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      flex-wrap: wrap;
    }

    .article-card img {
      width: 100%;
      max-width: 300px;
      object-fit: cover;
      height: auto;
    }

    .article-content {
      flex: 1;
      padding: 20px;
    }

    .article-content h2 {
      margin-top: 0;
      font-size: 1.4em;
    }

    .article-content p {
      color: #666;
    }

    .meta {
      font-size: 0.85em;
      color: #aaa;
      margin: 10px 0;
    }

    .btn {
      display: inline-block;
      margin-top: 10px;
      padding: 10px 16px;
      background-color: #e64688;
      color: white;
      text-decoration: none;
      border-radius: 6px;
      font-weight: bold;
    }

  /* --- Section A propos --- */
.apropos h2 {
  color: #e64688;
  text-decoration: solid;
}
.valeurs {
  display: flex;
  justify-content: center;
  gap: 2rem; /* espace horizontal entre les valeurs */
  margin-top: 1rem;
  flex-wrap: wrap; /* permet le retour à la ligne si écran trop petit */
}
.valeurs span {
  font-weight: 600;
  font-size: 1.1rem;
}