@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


/* Common Css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Root Variables */
:root {
  /* Fonts Family */
  --firstvarient-font: "Montserrat", Sans-serif;
  --thirdvarient-font: "Marcellus", Sans-serif;

  /* Colors */
  --sec-blue: #007b89;
  --main-blue: #007C8A;
  --light-grey: #f4f4f4;
  --light-black: #333;
  --white: #fff;
}

body,
html {
  font-size: 1rem;
  font-family: var(--firstvarient-font);
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-style: var(--firstvarient-font);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.3;
}

p {
  font-size: 16px;
}

/* Header Starts */
.offcanvas {
  max-width: 50%;
  background-color: var(--main-blue);
}

.offcanvas-body .nav-item .nav-link {
  color: white;
  font-weight: 700;
  font-family: var(--firstvarient-font);
}

.bi-instagram,
.bi-facebook {
  color: #fff;
  font-size: 30px;
}

#navbar.scrolled .bi {
  color: #000;
  transition: all 2s;
}

.navbar-toggler {
  border-color: #fff;
}

#navbar.scrolled .navbar-toggler {
  border-color: #000;
}

.navbar-toggler-icon {
  background-image: url('../images/hamburger.png');
  transform: rotate(-46deg);

}

#navbar.scrolled .navbar-toggler-icon {
  background-image: url(../images/hamburger-black.png);
  transform: rotate(-46deg);

}

.navbar-toggler:focus {
  box-shadow: none;
}

/* Scrolled Navbar Starts */
#navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.96);
  color: black;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

}

.main-header {
  transition: all 0.3s ease;
}

/* Scrolled Navbar Ends */
/* Banner Starts */
.banner {
  background-size: cover;
  height: 100vh;
  background-position: center;

}


.banner h2 {
  font-size: 4rem;
  font-style: var(--thirdvarient-font);
  font-weight: 700;
}


.banner {
  background-size: cover;
  background-position: center;
  min-height: 60vh;
  padding: 20px 0;
}


@media (max-width: 768px) {
  .banner h2 {
    font-size: 1.5rem;
  }

  .banner p {
    font-size: 0.9rem;
  }

  .banner .col-12 {
    padding-left: 0;
    padding-right: 0;
  }

  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .banner .row {
    justify-content: center;
  }
}


@media (min-width: 1200px) {
  .banner h2 {
    font-size: 4rem;
  }

  .banner p {
    font-size: 1.1rem;
    font-family: var(--firstvarient-font);

  }
}

/* Banner Ends */

/* Text With Logo Section Starts */
.Text-logo-section .container {
  background-color: var(--sec-blue);
}

.Text-logo-section {
  margin: 100px 0px;
}

.Text-logo-section p {
  font-style: var(--thirdvarient-font);
  font-weight: 400;
}

@media (max-width: 600px) {
  .Text-logo-section {
    margin: 50px 0px;
  }
}

/* Text With Logo Section Ends */

/*  Image Slider with Text Section Ends  */
.image-slider-text-section {
  margin: 100px 0px;
}

.image-slider-text-section p {
  color: var(--light-black);
  font-family: var(--firstvarient-font);
  text-align: justify;
}

.image-slider-text-section h3 {
  color: var(--main-blue);
  font-family: var(--thirdvarient-font);
  font-weight: 400;
  writing-mode: inherit;
  font-size: 30px;

}

.image-slider-text-section h4 {
  color: var(--main-blue);
  font-family: var(--thirdvarient-font);
  writing-mode: inherit;
}

.image-slider-text-section .card {
  background-color: transparent;
}

.image-slider-text-section .card-text {
  font-size: 14px;
  color: #000;
  font-weight: 500;
}

.image-slider-text-section hr {
  border-color: var(--sec-blue) !important;
  font-weight: 600;
}

@media(max-width:768px) {
  .image-slider-text-section p {
    font-size: 14px;
  }

  .image-slider-text-section h4 {
    font-size: 16px;
  }

  .image-slider-text-section .card-text {
    font-size: 13px;
  }
}

@media(max-width:600px) {
  .image-slider-text-section {
    margin: 50px 0px;
  }
}

/* Image Slider with Text Section Ends */

/* Room Features Section Starts */
.Room-Features-section {
  margin: 100px 0px;
}

.room-feature {
  background-color: var(--sec-blue);

}

.Room-Features-section h4 {
  color: var(--white);
  font-family: var(--firstvarient-font);
  writing-mode: inherit;
  font-size: 24px;
}

.Room-Features-section h6 {
  text-transform: capitalize;
  color: var(--white);
  font-family: var(--thirdvarient-font);
  font-size: 16px;
  font-weight: 400;
}

.Room-Features-section p {
  color: var(--white);
  font-size: 14px;
}

.our-rooms {
  background-image: url("../images/Maqam-Background.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

.Room-Features-section .our-rooms>h4 {
  text-transform: capitalize;
  color: var(--main-blue);
  font-family: var(--firstvarient-font);
  writing-mode: inherit;
  font-size: 24px;
}

.our-rooms>ul>li {
  color: black;
  font-weight: 700;
  line-height: 45px;
}

@media (max-width:600px) {
  .Room-Features-section {
    margin: 50px 0px;
  }
}

/* Room Features Section Ends */

/* Service Package cards Starts */
.service-package-section {
  background-image: url("../images/1.jpg");
  background-position: center;
  background-repeat: no-repeat;
  margin: 100px 0px;

}

.service-card {
  background-color: #00000070;
}

.package-card {
  background-color: #007B896E;
}

.service-package-section .service-card>h3 {
  color: var(--white);
  font-family: var(--thirdvarient-font);
  font-weight: 500;
}

.service-package-section p {
  color: var(--white);
  font-family: var(--thirdvarient-font);
  font-weight: 400;
  line-height: 30px;
  font-size: 18px;
}

.service-package-section .package-card>h3 {
  color: var(--white);
  font-family: var(--thirdvarient-font);
  font-weight: 500;
}

.service-package-section button {
  background-color: var(--sec-blue);
  color: var(--white);
  font-family: var(--firstvarient-font);
  font-weight: 500;
  border: 1px solid var(--white);
  padding: 10px 20px;
}

@media(max-width:600px) {
  .service-package-section {
    margin: 50px 0px;
  }
}

/* Service package cards ends */

/* Contact Section Starts */
.contact-section h2 {
  color: var(--main-blue);
  font-family: var(--thirdvarient-font);
  writing-mode: inherit;
  font-weight: 500;
  font-size: 30px;
}

.contact-section {
  color: #000;
  font-weight: 500;
  font-family: var(--firstvarient-font);
}

.contact-section button {
  background-color: var(--sec-blue);

  font-weight: 500;
  border: 1px solid var(--white);
  padding: 10px 26px;
}

.contact-section a {
  text-decoration: none;
  color: var(--white);
  font-family: var(--thirdvarient-font);
}

.form-btn {
  background-color: var(--sec-blue);
  color: var(--white);
  font-family: var(--thirdvarient-font);
  font-weight: 500;
  border: 1px solid var(--white);
  padding: 10px 20px;
}

/* Contact Section Ends */



/* ======================== Packages Page ============================ */
/* Breadcrumb Starts */
.breadcrum_wrapper {

  background-image: url('../images/packages-banner.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 500px;
  margin-bottom: 40px;
  padding: 130px 0px;

}

.breadcrum_wrapper h1 {
  font-size: 4rem;
  font-style: var(--thirdvarient-font);
  font-weight: 700;
  color: var(--white);
}


@media(max-width:600px) {
  .breadcrum_wrapper {
    padding: 50px 0px;
    height: 400px;
  }

  .breadcrum_wrapper h1 {
    font-size: 2rem;
  }
}

/* Breadcrumb Ends */

/* Packages Card Section Stats */
.packages-card-images-section h3 {
  color: var(--main-blue);
  font-family: var(--thirdvarient-font);
  font-size: 26px;
  font-weight: 400;

}

.packages-card-images-section {
  font-family: var(--firstvarient-font);
}

.packages-card-images-section i {
  color: var(--main-blue);
  font-size: 30px;
}

/* Packages Card Section Ends */


/* Destination Section starts */
.destination-section h2 {
  color: var(--main-blue);
  font-weight: 500;
  font-family: var(--thirdvarient-font);
}

.destination-section h3 {
  color: var(--main-blue);
  font-weight: 500;
  font-family: var(--thirdvarient-font);
  font-size: 20px;
}

/* Destination Section Ends */


/* Footer Starts */
.footer{
  background-color: #000;
}
/* Footer Ends */