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



@media (max-width: 768px) {
  .blog-img {
      height: 200px; /* حجم أصغر للهواتف */
  }
}

@media (min-width: 1200px) {
  .blog-img {
      height: 400px; /* حجم أكبر للشاشات الكبيرة */
  }
}



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

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



/* 4.5 Blog Section
/*----------------------------------------------*/
.blog-post {
  height: 350px;
  width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}


.blog-post img.blog-img {
  height: 100%;
  width: 100%;
  object-fit: cover; /* يجعل الصورة تملأ الكارد دون تشويه */
  position: absolute;
  top: 0;
  left: 0;
  -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);
}