/*
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: #D16806;
  --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-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: #ECB27B;
}

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

svg.social {
  color: #ECB27B;
}

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;
}


/* modal video override
------------------------------------------------------------- */
.modal-dialog {
  max-width: 800px;
  margin: auto;
  height: 100vh;
  display: flex;
  align-items: center;
}

.modal-content {
  padding: 0;
  background-color: #f5f3ef;
  border: none;
  border-radius: 0
}


/* 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: #D16806;
  -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: #ECB27B;
  -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: #f7dac1;
  -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 SITE STRUCTURE */
/*----------------------------------------------*/

/* 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.2 Billboard
/*----------------------------------------------*/

/* date */
div.datetime-container,
div.datetime-container * {
  box-sizing: border-box;
  font-family: var(--body-font);
}

div.datetime-container button.date,
div.datetime-container button.time {
  background-color: transparent;
  border: 1px solid #E9E9E9;
  border-radius: 8px;
  text-transform: capitalize;
  text-align: start;
  padding: 8px 20px;
  color: var(--gray-color);
  letter-spacing: 0.1rem;
}

div.datetime-container button>span {
  display: inline-block;
  margin: 0 -6px;
}

div.datetime-container button span.week-day {
  font-size: 16px;
  text-align: right;
}

div.datetime-container button span.week-day::after {
  content: ",";
  display: inline-block;
}

div.datetime-container button span.month {
  font-size: 16px;
  text-align: right;
}

div.datetime-container button span.hours,
div.datetime-container button span.month-day {
  font-size: 16px;
  text-align: center;
  width: 45px;
}

.month br {
  display: none;
}

@media (max-width: 1500px) {
  div.picker {
    width: max-content;
  }
}


/* 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);
}


/* 4.5 Blog Section
/*----------------------------------------------*/

.blog-post img.blog-img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: all 0.5s ease-in-out;
}

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


/*----------------------------------------------*/
/* 5 PAGES STYLE */
/*----------------------------------------------*/

/*--------------------------------------------------------------
5.1 About page 
--------------------------------------------------------------*/

.breadcrumb-item+.breadcrumb-item::before {
  color: var(--dark-color);
}

svg.play-icon {
  animation: play 1.5s alternate infinite ease-in;
}

@keyframes play {
  0% {
    transform: scale(.8);
  }

  100% {
    transform: scale(1.1);
  }

}

/*--------------------------------------------------------------
  5.2 Blog page 
  --------------------------------------------------------------*/
.pagination {
  --bs-pagination-color: var(--black-color);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: var(--primary-color);
  --bs-pagination-hover-border-color: var(--primary-color);
  --bs-pagination-focus-color: #fff;
  --bs-pagination-focus-bg: var(--primary-color);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-bg: var(--primary-color);
  --bs-pagination-active-border-color: var(--primary-color);
}


/*--------------------------------------------------------------
 5.3 Booking page 
  --------------------------------------------------------------*/
.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-check-input:focus {
  box-shadow: none;
}

/*--------------------------------------------------------------
 5.4 Gallery page 
  --------------------------------------------------------------*/
button.filter-button {
  border: 0;
  background: transparent;
  text-transform: uppercase;
  transition: all 0.5s ease-in-out;
  border-radius: 20px;
}

button.filter-button.active,
button.filter-button:hover {
  color: var(--bs-light);
  background: var(--primary-color);
}


/*--------------------------------------------------------------
 5.5 Reviews page
--------------------------------------------------------------*/

.reviews-components {
  box-shadow: 0px 12px 90px rgba(12, 12, 12, 0.06);
}

iconify-icon.quote {
  font-size: 60px;
  color: var(--primary-color);
}

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



/*--------------------------------------------------------------
5.6 FAQs page 
--------------------------------------------------------------*/

/* accordian style override  */

.accordion {
  --bs-accordion-border-color: var(--primary-color);
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-btn-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23d06051&width=30');
  --bs-accordion-btn-active-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23d06051&width=30');
  --bs-accordion-border-radius: 0px;
}

.accordion-header {
  margin-bottom: 0;
  border-top: 1px solid var(--primary-color);
}

.accordion-button {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  line-height: var(--heading-line-height);
  letter-spacing: 0.065rem;
  text-transform: uppercase;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: var(--heading-color);
  background-color: transparent;
  box-shadow: none;
}

/* Contact visibility: address, email and telephone */
.contact-uppercase {
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
  line-height: 1.45;
}
@media (max-width: 767px) {
  .contact-uppercase {
    font-size: 17px !important;
  }
}



/* ==========================================================
   STYLE ALTERNATIF — NOIR OBSIDIEN / CUIVRE / SABLE
   Direction visuelle plus éditoriale et haut de gamme
   ========================================================== */
:root{
  --primary-color:#b66a3c;
  --secondary-color:#f3eadf;
  --accent-color:#d59a64;
  --dark-color:#11100f;
  --light-color:#fffaf4;
  --alt-ink:#171411;
  --alt-copper:#b66a3c;
  --alt-copper-light:#d9a477;
  --alt-sand:#eee1d2;
  --alt-cream:#fffaf4;
}
html{scroll-behavior:smooth}
body{
  background:#fffaf4 !important;
  color:#2c2621 !important;
  font-family:'Sora',sans-serif;
}
h1,h2,h3,h4,h5,h6,.navbar-brand{
  font-family:'Cormorant Upright',serif;
}
.text-primary,.color,a,.nav-link.active,.nav-link:hover{color:var(--alt-copper)!important}
.bg-secondary{
  background:linear-gradient(135deg,#f4e8d9 0%,#fffaf4 48%,#ead6c2 100%)!important;
}
header{
  background:rgba(255,250,244,.94)!important;
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(182,106,60,.18);
}
.navbar-brand{color:#15120f!important;font-weight:700!important;letter-spacing:.03em}
.nav-link{
  color:#2d2823!important;
  font-weight:700!important;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.82rem!important;
}
.btn-primary{
  background:#171411!important;
  border:1px solid #171411!important;
  color:#fff!important;
  border-radius:4px!important;
  padding:14px 24px!important;
  box-shadow:0 10px 24px rgba(23,20,17,.16);
}
.btn-primary:hover{
  background:#b66a3c!important;
  border-color:#b66a3c!important;
  transform:translateY(-2px);
}
#slider .d-flex{
  min-height:760px!important;
  border-radius:0!important;
  position:relative;
  overflow:hidden;
  box-shadow:0 28px 70px rgba(23,20,17,.20)!important;
}
#slider .d-flex::before{
  background:
    linear-gradient(90deg,rgba(12,11,10,.94) 0%,rgba(20,17,15,.83) 42%,rgba(20,17,15,.28) 78%,rgba(20,17,15,.12) 100%)!important;
  border-radius:0!important;
}
#slider h1,#slider h2,#slider h3{
  color:#fffaf4!important;
  letter-spacing:-.02em;
  text-shadow:none!important;
}
#slider h2{font-size:clamp(3.6rem,7vw,7.2rem)!important;line-height:.88!important}
#slider p{color:#f6eee5!important;font-size:1.13rem!important;max-width:700px}
#slider .btn{border-radius:4px!important}
.hero-contact-info{
  background:rgba(255,250,244,.96)!important;
  color:#171411!important;
  border:0!important;
  border-left:5px solid #b66a3c!important;
  border-radius:0!important;
  box-shadow:0 20px 55px rgba(0,0,0,.24)!important;
}
.hero-contact-info a,.hero-contact-info span,.hero-contact-info strong,.hero-contact-info b{
  color:#171411!important;
}
.hero-contact-info b,.hero-contact-info strong{
  color:#b66a3c!important;
  letter-spacing:.12em!important;
}
section{position:relative}
.service{
  background:#fffdf9!important;
  border:1px solid #dfc8b3!important;
  border-radius:4px!important;
  box-shadow:0 14px 34px rgba(63,43,29,.08)!important;
  transition:.3s ease;
}
.service:hover{
  transform:translateY(-8px)!important;
  border-color:#b66a3c!important;
  box-shadow:0 24px 48px rgba(63,43,29,.14)!important;
}
.service h3,.service h4,.service h5{color:#171411!important}
.blog-post,.room-item{
  border-radius:4px!important;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(27,22,18,.16);
}
.blog-post img,.room-item img{transition:transform .65s ease;filter:saturate(.88) contrast(1.04)}
.blog-post:hover img,.room-item:hover img{transform:scale(1.045)}
.blog-post::after,.room-item::after{
  background:linear-gradient(to top,rgba(14,12,10,.94) 0%,rgba(14,12,10,.30) 58%,rgba(14,12,10,.08) 100%)!important;
}
.photo-call::after{
  content:"06 05 95 73 78"!important;
  background:#fffaf4!important;
  color:#171411!important;
  border-radius:3px!important;
  border-left:4px solid #b66a3c;
  padding:11px 18px!important;
  font-size:17px!important;
  letter-spacing:.06em!important;
  box-shadow:0 10px 28px rgba(0,0,0,.22)!important;
}
h3.display-3.text-black{
  color:#171411!important;
  font-size:clamp(3rem,5.5vw,5.6rem)!important;
  line-height:.95!important;
  max-width:1000px;
  margin-inline:auto;
  position:relative;
  padding-bottom:28px;
}
h3.display-3.text-black::after{
  content:"";
  width:90px;
  height:3px;
  background:#b66a3c;
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
}
/* Section Travail rapide et sérieux */
.rapid-serious-section{
  background:
    radial-gradient(circle at 90% 10%,rgba(182,106,60,.18),transparent 28%),
    linear-gradient(135deg,#151310 0%,#211b17 55%,#30241c 100%)!important;
  padding-top:9rem!important;
  padding-bottom:9rem!important;
  border:0!important;
  color:#f8eee4!important;
}
.rapid-serious-section::before{
  content:"";
  position:absolute;
  inset:22px;
  border:1px solid rgba(217,164,119,.34);
  pointer-events:none;
}
.rapid-serious-section h2,
.rapid-serious-section h3,
.rapid-serious-section h4{
  color:#fffaf4!important;
}
.rapid-serious-section h2,
.rapid-serious-section h3{
  font-size:clamp(3.8rem,7vw,7rem)!important;
  line-height:.9!important;
}
.rapid-serious-section p{color:#eadfd5!important;font-size:1.12rem!important}
.rapid-serious-section .service,
.rapid-serious-section .card{
  background:rgba(255,250,244,.06)!important;
  border:1px solid rgba(217,164,119,.38)!important;
  color:#fff!important;
  backdrop-filter:blur(8px);
}
.rapid-serious-section .btn-primary{
  background:#b66a3c!important;
  border-color:#b66a3c!important;
}
.rapid-serious-section .btn-primary:hover{
  background:#fffaf4!important;
  color:#171411!important;
}
#footer,footer{
  background:#12100e!important;
  color:#e8ddd3!important;
  border-top:4px solid #b66a3c;
}
#footer h1,#footer h2,#footer h3,#footer h4,#footer .navbar-brand,
footer h1,footer h2,footer h3,footer h4{color:#fffaf4!important}
#footer a,footer a{color:#d9a477!important}
.whatsapp-float{
  border-radius:4px!important;
  padding:15px 20px!important;
  box-shadow:0 14px 35px rgba(0,0,0,.26)!important;
}
@media(max-width:991px){
  #slider .d-flex{min-height:680px!important}
  #slider h2{font-size:clamp(3rem,12vw,5.2rem)!important}
  .hero-contact-info{grid-template-columns:1fr!important}
  .rapid-serious-section{padding-top:6rem!important;padding-bottom:6rem!important}
}
@media(max-width:575px){
  #slider .d-flex{min-height:620px!important}
  h3.display-3.text-black{font-size:2.7rem!important}
  .photo-call::after{font-size:14px!important;right:10px!important;bottom:10px!important}
  .rapid-serious-section::before{inset:10px}
}
.image-travail {
  width: 100%;
  height: 420px;
  object-fit: cover;

  /* Remonte le cadrage pour mieux afficher le visage */
  object-position: center 20%;

  display: block;
}

/* Le conteneur prend exactement la hauteur de l'image */
.room-item:has(.image-travail) {
  height: 420px;
}

/* Mobile */
@media (max-width: 768px) {
  .image-travail {
    height: 350px;
  }

  .room-item:has(.image-travail) {
    height: 350px;
  }

  .room-item .product-description {
    padding: 25px !important;
  }
}

#footer .text-white,
#footer .text-white p,
#footer .text-white a,
#footer .text-white svg {
  color: #ffffff !important;
  fill: currentColor;
}

.footer-domain {
  font-family: 'Cormorant Upright', serif;
  font-size: 30px;
  font-weight: 700;
  color: #ffffff !important;
}

/* ==========================================
   CARTES VOYANCE
========================================== */

.voyance-card {
  width: 100%;
}


/* ==========================================
   IMAGE UNIQUEMENT
========================================== */

.voyance-image {
  position: relative;

  width: 100%;
  height: 440px;

  overflow: hidden;

  border-radius: 22px;

  background: #111;

  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.14);
}


.voyance-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  /* Permet de mieux afficher le visage */
  object-position: center 20%;

  transition: transform 0.6s ease;
}


/* ZOOM IMAGE */
.voyance-card:hover .voyance-image img {
  transform: scale(1.04);
}


/* ==========================================
   CATÉGORIE SUR L'IMAGE
========================================== */

.voyance-category {
  position: absolute;

  left: 22px;
  bottom: 22px;

  z-index: 5;

  padding: 8px 18px;

  background: #ffffff;

  color: #111111 !important;

  border-radius: 50px;

  font-family: 'Sora', sans-serif;

  font-size: 14px;

  font-weight: 700;

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.15);
}


/* ==========================================
   CONTENU À L'EXTÉRIEUR DE L'IMAGE
========================================== */

.voyance-content {
  padding: 22px 10px 10px;

  text-align: center;
}


/* TITRE */
.voyance-content h4 {
  margin: 0 0 10px;

  line-height: 1.05;
}


.voyance-content h4 a {
  color: #111111 !important;

  font-family: 'Cormorant Upright', serif;

  font-size: 36px;

  font-weight: 700;

  line-height: 1.05;

  text-decoration: none;

  transition:
    color 0.3s ease,
    opacity 0.3s ease;
}


/* HOVER TITRE */
.voyance-content h4 a:hover {
  color: #b66a3c !important;
}


/* ==========================================
   GUIDANCE
========================================== */

.voyance-content p {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 7px;

  margin: 0;

  color: #777;

  font-size: 15px;

  font-weight: 600;
}


/* ==========================================
   TABLETTE
========================================== */

@media (max-width: 991px) {

  .voyance-image {
    height: 400px;
  }

  .voyance-content h4 a {
    font-size: 32px;
  }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

  .voyance-image {
    height: 420px;
  }

  .voyance-content {
    padding-top: 18px;
  }

  .voyance-content h4 a {
    font-size: 30px;
  }

}


/* ==========================================
   PETIT MOBILE
========================================== */

@media (max-width: 480px) {

  .voyance-image {
    height: 380px;
  }

  .voyance-content h4 a {
    font-size: 28px;
  }

}