/* 
  Theme Name: Rovero - Hotel & Booking Service Website Html Template
  Date Created: May 12, 2024
  Last Update: May 12, 2024
  Author: eThemeStudio
  Support: xuwelkhan@gmail.com
  Description: Hotel & Booking Service HTML Template.
  Version: 1.0
*/

/* CSS Index
-----------------------------------
1. Theme default css
2. header
3. hero area
4. intro area
5. room search area
6. rooms area
7. video area
8. testimonial area
9. subscription area
10. blog area
11. offer area
12. brand area
13. footer area
14 about page
-- about area
-- choose us area
15. rooms page
16. rooms details page
17. blog page
18. booking page
19. checkout page
20. confirmation page
21. blog details page
22. contact page
*/

/* 1. Theme default css
-------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --theme-color: #007c9e;
  --primary-color: #bbbbbb;
  --main-color: #222222;
  --text-color: #666666;
  --section-bg: #fbf8f3;
  --theme-border: #05353c;
  --primary-border: #e5e5e5;
  --meta-text-color: #999999;
  --font_0:
    normal normal normal 100px/1em wfont_93b62d_1e75d6423ebb4b829ee3718639193ba0, wf_1e75d6423ebb4b829ee371863, orig_gambarino_regular: normal normal normal 100px / 1em wfont_93b62d_1e75d6423ebb4b829ee3718639193ba0, wf_1e75d6423ebb4b829ee371863, orig_gambarino_regular;
}

body {
  font-family: "Arial,Helvetica,sans-serif";
  font-weight: 400;
  color: #222222;
  background: #f5fafc;
  font: var(--font_0);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #002b45;
  font-weight: 700;
  text-transform: capitalize;
  font-family: "Noto Serif", serif;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  color: var(--theme-color);
}

h3 {
  font-size: 48px;
}

h4 {
  font-size: 36px;
}

h5 {
  font-size: 24px;
}

h6 {
  font-size: 21px;
  line-height: 1.45;
}

p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #000;
  font-weight: 400;

}

.fontNoto {
  font-family: "Noto Serif", serif;
}

/* title */
.title span {
  font-size: 16px;
}

.title h2 {
  font-size: 30px;
  line-height: 1.25;
}

.sub-title::before {
  position: absolute;
  content: "";
  background: var(--theme-color);
  width: 36px;
  height: 2px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

.section-content-title span {
  font-size: 24px;
  display: block;
}

.section-content-title h2 {
  font-size: 48px;
  line-height: 1.15;
}

.section-content-title p {
  line-height: 1.7;
}

/* button  css*/
.my-btn .btn {
  padding: 6px 32px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--theme-color);
  color: #ffffff;
  outline: 0 none;
  text-transform: uppercase;
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.9s ease-out;
  -moz-transition: all 0.9s ease-out;
  -ms-transition: all 0.9s ease-out;
  -o-transition: all 0.9s ease-out;
  -moz-transform: perspective(1px) translateZ(0px);
  -webkit-transform: perspective(1px) translateZ(0px);
  -o-transform: perspective(1px) translateZ(0px);
  -ms-transform: perspective(1px) translateZ(0px);
  transform: perspective(1px) translateZ(0px);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color;
  transition-property: color;
  vertical-align: middle;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}

.my-btn .btn::before {
  background-color: #ffffff;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -moz-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  -o-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  z-index: -1;
}

.my-btn .btn:hover::before,
.my-btn .btn:focus::before,
.my-btn .btn:active::before {
  -moz-transform: scaleX(1);
  -webkit-transform: scaleX(1);
  -o-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

.my-btn a.btn:hover,
.my-btn .btn:hover,
.my-btn a.btn:focus,
.my-btn a.btn:active,
.my-btn .btn:focus,
.my-btn .btn:active {
  color: var(--theme-color);
}

.slider-content .my-btn .btn {
  padding: 15px 48px;
  font-size: 18px;
}

/* btn2 css */
.my-btn2 .btn {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--main-color);
  padding: 0;
  border-bottom: 1px solid #ffffff;
}

.my-btn2 .btn::before {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: var(--theme-color);
  bottom: -1px;
  left: -1px;
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
}

.my-btn2:hover .btn::before {
  width: 103%;
}

.my-btn2 .btn:hover {
  color: var(--theme-color);
}

.my-btn2 .btn:hover .blog-hm1-wrapper .my-btn2 .btn,
.blog-btn .btn,
.offer-btn .btn {
  color: #ffffff;
}

.blog-hm1-wrapper .my-btn2 .btn:hover {
  color: var(--theme-color);
}

/* home2 btn */
.hm2 .my-btn .btn {
  padding: 11px 39px;
  font-size: 16px;
}

.hm2 .my-btn2 .btn {
  font-size: 16px;
}

.transparent-btn .my-btn .btn {
  color: var(--main-color);
}

.transparent-btn .my-btn .btn::before {
  background: var(--theme-color);
}

.transparent-btn .my-btn .btn:hover {
  color: #ffffff;
}

/* slick-arrow */
.slick-arrow .l-a,
.slick-arrow .r-a {
  position: absolute;
  top: 50%;
  background: transparent;
  border: 1px solid var(--primary-border);
  color: var(--main-color);
  text-align: center;
  z-index: 1;
  width: 54px;
  height: 54px;
  line-height: 54px;
  font-size: 18px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  left: 70px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  z-index: 1;
  cursor: pointer;
}

.slick-arrow .r-a {
  right: 70px;
  left: auto;
}

.slick-arrow .l-a:hover,
.slick-arrow .r-a:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--theme-color);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.07);
}

/* hm2 hero arrow*/
.hm2 .slider-active .slick-arrow .l-a,
.hm2 .slider-active .slick-arrow .r-a {
  border: 1px solid var(--theme-color);
  width: 58px;
  height: 58px;
  line-height: 58px;
  color: #ffffff;
}

.hm2 .slider-active .slick-arrow .l-a:hover,
.hm2 .slider-active .slick-arrow .r-a:hover {
  background: var(--theme-color);
}

/* hm1 hero arrow */
.hm1 .slider-active .slick-arrow .l-a,
.hm1 .slider-active .slick-arrow .r-a {
  top: auto;
  bottom: -25px;
  left: auto;
  right: 13.5%;
}

.hm1 .slider-active .slick-arrow .r-a {
  right: 10.2%;
}

/* feature arrow */
.feature-hm1-active .slick-arrow .l-a,
.feature-hm1-active .slick-arrow .r-a {
  top: auto;
  bottom: -20px;
  left: 30.5%;
}

.feature-hm1-active .slick-arrow .r-a {
  right: auto;
  left: 35.5%;
}

/* dots css */
.main-style .slick-dots {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 11;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

.main-style .slick-dots li {
  box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.12);
  border: 4px solid #ffffff;
  margin: auto 10px;
  cursor: pointer;
  display: inline-block;
}

.main-style .slick-dots button {
  width: 13px;
  height: 13px;
  background: var(--primary-color);
  display: block;
  text-indent: 1000px;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.main-style .slick-dots li.slick-active button {
  background: var(--theme-color);
}

/* hero-dots */
.slider-active .slick-dots {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.slider-active .slick-dots li {
  display: block;
  margin: 0;
  cursor: pointer;
  width: 22px;
  height: 32px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.slider-active .slick-dots li button {
  font-size: 30px;
  font-weight: 700;
  line-height: 0.7;
  font-family: "Noto Serif", serif;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--main-color);
  width: 22px;
  height: 32px;
  display: flex;
  align-items: end;
  justify-content: center;
  cursor: pointer;
}

.slider-active .slick-dots li.slick-active button {
  font-size: 47px;
  color: var(--theme-color);
}

/* home2 */
.hm2 .slider-active .slick-dots {
  display: none !important;
}


/* 2. header
--------------------------------------------------- */
.transparent-header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 22;
  transition: 0.3s;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.body-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
}

.body-overlay.opened {
  opacity: 1;
  visibility: visible;
}

.sticky-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 22;
  width: 100%;
  z-index: 99;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}

.sticky-menu.header-bottom {
  background: #ffffff;
  -webkit-box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.3);
  -moz-box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.3);
  box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.3);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.sticky-menu .main-menu ul>li a {
  margin-top: 20px;
  margin-bottom: 20px;
}

.sticky-menu .logo img {
  max-width: 70%;
}

/* header-top */
.header-top-left li.before-effect,
.header-top-right li.before-effect {
  position: relative;
  padding-left: 25px;
  margin-left: 25px;
}

.header-top-right li.before-effect {
  margin-left: 0;
}

.header-top-left li.before-effect::before,
.header-top-right li.before-effect::before {
  position: absolute;
  content: "";
  background: #ccc;
  width: 1px;
  height: 15px;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.header-top-left li a,
.header-top-right a {
  font-size: 16px;
  color: var(--text-color);
}

.header-top-left span,
.header-top-right span {
  font-size: 16px;
  color: var(--text-color);
}

.header-top .nice-select::after {
  height: 7px;
  right: 28px;
  width: 7px;
}

.header-top .nice-select .option {
  font-size: 14px;
  color: var(--text-color);
}

.header-top .nice-select span.current {
  padding-left: 0;
  margin-left: 0;
}

.header-top .nice-select,
.header-top .nice-select span {
  background: transparent;
}

.header-top .nice-select .option:hover,
.header-top .nice-select .option.focus,
.header-top .nice-select .option.selected.focus {
  background-color: var(--theme-color);
}

.show-language li a,
.show-currency li a {
  font-size: 14px;
  padding-bottom: 14px;
  display: block;
  color: var(--text-color);
}

.show-currency li span {
  font-size: 13px;
}

/* header bottom */
.main-menu ul li {
  display: inline-block;
  margin-right: 30px;
  position: relative;
}

.header-social li:last-child {
  margin-right: 0;
}

.main-menu ul li>a {
  color: var(--main-color);
  font-size: 16px;
  display: inline-block;
  text-transform: capitalize;
  position: relative;
  margin-top: 38px;
  margin-bottom: 38px;
}

.main-menu ul li:hover>a {
  color: var(--theme-color);
}

.main-menu nav a[aria-current="page"] {
  color: var(--theme-color) !important;
}

/* mega menu */
.main-menu ul li .mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  height: auto;
  margin: 0 15px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 2;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.12);
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
  transition: 0.5s;
  -webkit-transition: transform 500ms ease, opacity 500ms ease;
  -moz-transition: transform 500ms ease, opacity 500ms ease;
  -ms-transition: transform 500ms ease, opacity 500ms ease;
  -o-transition: transform 500ms ease, opacity 500ms ease;
  transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
}

.main-menu ul li .mega-menu.full-mega-menu {
  top: 80px;
  width: 97.5%;
}

.sticky-menu .main-menu ul li .mega-menu.full-mega-menu {
  top: 64px;
}

.header-area.white-bg .mega-menu {
  top: 100%;
}

.main-menu ul li:hover>.mega-menu {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}

.main-menu ul li.full-mega-menu-position {
  position: static;
}

.main-menu ul li .mega-menu li {
  margin: 0;
}

.full-mega-menu1 li {
  width: 24%;
}

.full-mega-menu1 li img {
  max-height: 250px;
}

.main-menu ul li .mega-menu a {
  font-size: 16px;
  color: var(--secondary-color);
  display: block;
  margin: 0;
}

.main-menu ul li .mega-menu.full-mega-menu2 a.mega-title {
  margin-bottom: 12px;
  color: var(--main-color);
}

.main-menu ul li .mega-menu a.mega-title {
  font-size: 16px;
  font-weight: 500;
}

.mega-menu.full-mega-menu.full-mega-menu2 li {
  display: block;
  padding-bottom: 5px;
}

.mega-menu.full-mega-menu.full-mega-menu2>li {
  width: 25%;
}

.rbm-text h6 {
  font-size: 16px;
}

.rbm-text span {
  font-size: 14px;
}

.rbm-img img {
  min-width: 72px;
}

.menu-info span,
.menu-info p {
  font-size: 14px;
}

/* dropdown menu */
.mega-menu.mega-dropdown-menu li {
  display: block;
  padding: 11px 10px 11px 30px;
  border-bottom: 1px solid #e5e5e5;
}

.mega-menu.mega-dropdown-menu li>a {
  font-size: 15px;
}

.mega-menu.mega-dropdown-menu li:last-child {
  border-bottom: none;
}

.main-menu ul li .mega-menu.mega-dropdown-menu {
  top: 75%;
}

.main-menu ul li .mega-menu.mega-sub-menu {
  left: 185px;
  top: 0;
}

.mega-menu.mega-dropdown-menu,
.main-menu ul li .mega-menu.mega-sub-menu {
  box-shadow: 9px 15.588px 30px 0px rgba(6, 7, 7, 0.12);
}

.main-menu ul li .mega-menu.full-mega-menu {
  max-width: 1175px;
  left: 50%;
  transform: translateX(-50%);
}

.mega-menu.full-mega-menu.full-mega-menu1 .single-menu-course h3,
.mega-menu.full-mega-menu.full-mega-menu1 h2 {
  font-size: 16px;
}

.mega-menu.full-mega-menu.full-mega-menu1 .single-menu-course .pc-category span,
.single-menu-course .news-time {
  font-size: 14px;
}

.mega-menu.full-mega-menu.full-mega-menu1 .single-menu-course .review-ratting li span {
  font-size: 14px;
}

.mega-menu.full-mega-menu.full-mega-menu1 .popular-course-content-wrapper {
  box-shadow: none;
}

.full-mega-menu1 li {
  width: 22.5%;
}

.full-mega-menu1 li.menu-blog-wrapper {
  width: 55%;
}

.main-menu ul li .mega-menu.full-mega-menu1 li a {
  margin: 8px 0;
}

.sticky-menu .main-menu ul li .mega-menu.mega-dropdown-menu {
  top: 100%;
}

.main-menu li a:hover {
  color: var(--theme-color);
}

/* header-right */
.header-search-content input {
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
}

.header-search-details .close-icon a {
  font-size: 22px;
}

.header-search-content a {
  font-size: 18px;
}

.header-search-form {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

/* home2 menu */
.hm2 .sticky-menu.header-bottom {
  background: #18140b;
}

.hm2 .main-menu ul li>a {
  color: #ffffff;
}

.hm2 .main-menu ul li:hover>a,
.hm2 .main-menu ul li a.active {
  color: var(--theme-color);
}

.hm2 .social-link.header-social li a,
.hm2 .header-top-left li a,
.hm2 .header-top-right a,
.hm2 .header-top-left span,
.hm2 .header-top-right span {
  color: #ffffff;
}

.hm2 .main-menu ul li .mega-menu.mega-dropdown-menu li>a,
.hm2 .show-language li a,
.hm2 .show-currency li a,
.hm2 .show-currency li a span {
  color: var(--main-color);
}

.header-top .nice-select,
.header-top .nice-select span {
  height: 20px;
  line-height: 20px;
}

/* 3. hero area
-------------------------------------------------------------- */
/* home1 */
.single-slider.slider-height1 {
  min-height: 960px;
}

.slider-content span {
  font-size: 30px;
}

.slider-content h1 {
  font-size: 60px;
  line-height: 1.2;
}

.slider-content p {
  font-size: 24px;
  line-height: 1.5;
}

.hero-dotted {
  left: 70px;
}

/* home2 */
.single-slider.slider-height2 {
  min-height: 1080px;
}

.slider-height2.black-overly::before {
  opacity: 0.478;
}

/* other page */
.inner-page-height {
  min-height: 575px;
  background-position: center center;
  background-size: cover;
}

.inner-page-content h1 {
  font-size: 90px;
}

.blog-details-page-height h1 {
  line-height: 1.4;
}

.inner-page-content p {
  font-size: 24px;
}

.inner-page-bg.black-overly::before {
  opacity: 0.351;
}

.inner-hero-nav {
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

.breadcrumb-item+.breadcrumb-item::before {
  padding-right: 5px;
  padding-left: 8px;
  color: #ffffff;
}

.img-hover-effect::after {
  position: absolute;
  content: "";
  background: #ffffff;
  height: 150%;
  left: -100%;
  opacity: .2;
  top: -100px;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
  -webkit-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: 1;
  -moz-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}

.img-hover-effect:hover::after {
  left: 150%;
  -webkit-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}

/* img-hover-effect2 */
.img-hover-effect2::after {
  background: rgba(255, 255, 255, 0.3);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  opacity: 1;
  pointer-events: none;
}

.img-hover-effect-wrapper:hover .img-hover-effect2::after {
  height: 100%;
  opacity: 0;
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}


/* 4. intro area
------------------------------------------------------------- */
.intro-shadow {
  opacity: 0.478;
  bottom: -35%;
}

.single-intro-content h3 {
  font-size: 24px;
}

.single-intro-content:hover .intro-ser-icon {
  transform: translateY(-10px);
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
}

.intro-ser-icon {
  border-radius: 50%;
  /* box-shadow: 9px 15.588px 30px 0px rgba(6, 7, 7, 0.12); */
  width: 120px;
  height: 120px;
}

.intro-ser-icon span {
  line-height: 120px;
}

.about-footer-content-right h6 {
  font-size: 18px;
}

.about-footer-content-right span {
  font-size: 14px;
}

/* home2 */
.hm2-intro-hotel-search-area {
  margin-top: -75px;
}

.hm2-intro-hotel-search-bg {
  box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.06);
}

.hm2-intro-hotel-search-area .hm2-intro-hotel-search-bg ul>li.hm2-single-intro-item {
  width: 25.2%;
  padding: 0 35px;
  position: relative;
}

.hm2-intro-hotel-search-area .hm2-intro-hotel-search-bg li.hm2-single-intro-item::before {
  position: absolute;
  content: "";
  background: var(--primary-border);
  width: 1px;
  height: 100%;
  right: 0;
}

.hm2-intro-hotel-search-area .hm2-intro-hotel-search-bg li.hm2-single-intro-item:last-child::before {
  position: static;
}

.hm2-intro-hotel-search-area .form-hotel-search input,
.hm2-intro-hotel-search-area .nice-select,
.hm2-intro-hotel-search-area .nice-select span {
  height: 42px;
  border: 1px solid var(--primary-color);
  line-height: 42px;
  padding: 0 15px;
}

.hm2-intro-hotel-search-area .ui-datepicker-trigger::before {
  font-size: 15px;
  right: 17px;
}

.hm2-intro-hotel-search-area .nice-select::after {
  height: 9px;
  right: 20px;
  width: 9px;
}

.hm2-intro-hotel-search-area .form-search-btn.my-btn .btn {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* 5. room search area
------------------------------------------------------------- */
.room-search-bg-img {
  width: 50%;
}

.nice-select.open .list {
  border-radius: 0;
  width: 100%;
}

.nice-select .option.selected {
  font-weight: normal;
}

.nice-select::after {
  border-bottom: 2px solid var(--primary-color);
  border-right: 2px solid var(--primary-color);
  height: 10px;
  right: 25px;
  width: 10px;
  font-weight: 700;
}

/* rooms search start*/
/* home1 */
.form-hotel label {
  font-size: 18px;
}

.form-hotel-search input,
.nice-select,
.nice-select span {
  height: 60px;
  background: #ffffff;
  border: 0;
  padding: 0 22px;
  line-height: 60px;
  display: block;
}

.ui-datepicker-trigger {
  position: absolute;
  /* content: "\f105"; */
  background: transparent;
  border: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  /* z-index: 11; */
}

.ui-datepicker-trigger::before {
  position: absolute;
  content: '\f073';
  font-family: 'Font Awesome 5 Free';
  font-weight: 700;
  color: var(--primary-color);
  right: 23px;
  bottom: 50%;
  font-size: 18px;
  transform: translateY(50%);
  -webkit-transform: translateY(50%);
  -moz-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
}

.form-search-btn.my-btn .btn {
  padding: 15px 32px;
  font-size: 18px;
}

/* other page */
.sidebar-search-area .form-hotel-search input,
.sidebar-search-area .nice-select,
.sidebar-search-area .nice-select span {
  height: 45px;
  line-height: 45px;
  padding: 0 20px;
}

.sidebar-search-area .form-search-btn.my-btn .btn {
  padding: 9px 32px;
  font-size: 16px;
}

.sidebar-search-area .ui-datepicker-trigger::before {
  font-size: 15px;
  right: 22px;
}

.sidebar-search-area .nice-select::after {
  height: 8px;
  right: 26px;
  width: 8px;
}

.booking-page-area .ui-datepicker-trigger::before {
  content: '\f00d';
}

.booking-page-area .sidebar-search-area .nice-select::after {
  content: '\f00d';
  font-family: 'Font Awesome 5 Free';
  font-weight: 700;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  border: 0;
  margin-top: 0;
  top: 0;
  font-size: 15px;
}

.rp-Comments span {
  font-size: 20px;
}

.rp-Comments h6 {
  font-size: 16px;
}


/* 6. rooms area
------------------------------------------------------------- */
.single-room-hm1 {
  box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.06);
}

.room-hm1-content h4 {
  font-size: 21px;
}

.room-price-details span {
  font-size: 16px;
}

.room-price-details span span {
  font-size: 30px;
}

/* home2 */
.hm2-room-content-margin {
  margin-left: 160px;
  margin-right: 160px;
}

.hm2 .room-price span span {
  font-size: 36px;
}

.hm2 .room-price span {
  font-size: 18px;
}

.room-info-right li {
  color: var(--text-color);
}

.room-info li {
  margin-bottom: 5px;
}

.room-hm2-content .review-ratting li span {
  font-size: 24px;
}

/* 7. video area
------------------------------------------------------------- */
.video-bg-overlay::before {
  position: absolute;
  content: "";
  background: rgb(0, 0, 0);
  opacity: 0.361;
  width: 100%;
  height: 100%;
}

/* .video-btn a {
  background-color: rgb(255, 255, 255, 0.302);
  width: 100px;
  height: 100px;
  display: inline-block;
  line-height: 100px;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  font-size: 24px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding-left: 5px;
  padding-top: 1px;
} */
.hm1-feature-dotted {
  left: 0;
  bottom: -80px;
}

.feature-hm1-img img {
  margin-left: auto;
}


/* 8. testimonial area
------------------------------------------------------------- */
.testimonial-bg::before {
  position: absolute;
  content: "";
  background: var(--section-bg);
  width: 100%;
  height: 75%;
}

.single-testimonial {
  box-shadow: 1px 5px 15px 0px rgba(0, 0, 0, 0.07);
}

.single-testimonial:hover {
  box-shadow: 1px 5px 12px 5px rgba(0, 0, 0, 0.07);
  box-shadow: 1px 2px 10px 5px rgba(0, 0, 0, 0.07);
}

.review-content p {
  line-height: 1.75;
}

.testi-info h6 {
  font-size: 18px;
}

.testi-info span {
  font-size: 14px;
}

.review-ratting li span {
  color: #ffd33c;
  font-size: 18px;
}

.client-img {
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

/* home2 */
.hm2 .quit span {
  font-size: 56px;
  line-height: 1;
}

.hm2 .testi-info h5 {
  font-size: 18px;
}


/* 9. subscription area
------------------------------------------------------------- */
.subscription-area.section-bg-overlay::before {
  background: var(--primary-color2);
  width: 59%;
}

.subscribe-info input,
.subscribe-btn {
  height: 60px;
  line-height: 60px;
}

.subscribe-btn span {
  font-size: 24px;
}

.subscription-area.about-subscription {
  margin-bottom: -1px;
}

.subscription-area.black-overly::before {
  background: #000 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0.6;
}



/* 10. blog area
-------------------------------------------------------------- */
.blog-hm1-text-hover {
  transform: translateY(30px);
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
}

.single-blog-wrapper:hover .blog-hm1-text-hover {
  transform: translateY(-10px);
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
}

.blog-btn,
.offer-btn {
  opacity: 0;
  visibility: hidden;
  height: 0;
}

.single-blog-wrapper:hover .blog-btn,
.single-offer-wrapper:hover .offer-btn {
  opacity: 1;
  visibility: visible;
  height: 14px;
}

.single-blog-wrapper span {
  font-size: 14px;
}

.single-blog-wrapper h4 {
  font-size: 21px;
  line-height: 1.5;
}

.blog-hm-date::before {
  position: absolute;
  content: "";
  background: #ffffff;
  width: 1px;
  height: 10px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

/* .single-blog-wrapper:hover .blog-hm1-content{
	background: linear-gradient(rgba(0,0,0,0) 0%,#000 70%);
  background: linear-gradient(rgba(109,141,140,0) 0%,#6d8d8c 70%);
} */

/* 11. offer area
------------------------------------------------------------- */
.offer-area.hm2 .room-price p {
  font-size: 14px;
}

.offer-area.hm2 .room-price span {
  font-size: 36px;
  line-height: 1;
}

.offer-area.hm2 .room-price span.room-price {
  font-size: 19px;
}

.offer-hm2-text2 {
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
}

.single-offer-wrapper:hover .offer-hm2-text2 {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.offer-hm2-text1 {
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
}

.single-offer-wrapper:hover .offer-hm2-text1 {
  transform: translateY(10px);
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
}

.offer-hm2-text3 {
  transform: translateY(20px);
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
}

.single-offer-wrapper:hover .offer-hm2-text3 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
}


/* 12. brand area
-------------------------------------------------------------- */
.single-brand img {
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.single-brand:hover img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}


/* 13. footer area
-------------------------------------------------------------- */
.footer-area {
  background: #18140b;
}

.footer-top a:hover,
.footer-bottom a:hover,
.footer-bottom a.c-theme:hover {
  color: var(--theme-color);
}

.footer-bottom a.c-theme {
  color: #ffffff;
}

.footer-area li,
.footer-area p,
.f-info a,
.f-about a,
.footer-phone a,
.footer-email a {
  font-size: 16px;
  color: #aaaaaa;
}

.footer-widget h6 {
  font-size: 18px;
}

.footer-area .social-link li a {
  font-size: 20px;
}

.footer-area .social-link li a:hover {
  color: var(--theme-color) !important;
}


/*
---------------------------- 
 14 about page
-------------------------------- */
/* -- about area
-------------------------------------------------------------- */
.about-page-left p {
  font-size: 18px;
}

.about-photo-gallery-wrapper {
  margin-left: -1.2px;
  margin-right: -1.2px;
}

.about-photo-gallery-img {
  margin: 5px;
  margin-bottom: 10px;
}

.gallery-hover {
  font-size: 30px;
  color: #ffffff;
  width: 100%;
  height: 100%;
  top: 0%;
  /* left: 50%; */
  bottom: 0;
  transform: scale(0);
  opacity: 0;
  transition: 0.6s;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  background: #000;
}

.gallery-img-hover:hover .gallery-hover {
  opacity: .6;
  transform: scale(1);
  transition: 0.6s;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
}

.about-gallery-slider-active {
  display: block;
  margin: auto auto;
  white-space: nowrap;
  overflow: hidden;
  min-width: 100%;
  height: 100%;
}

.about-gallery-slider-active ul {
  display: inline-block;
  padding-left: 0%;
  min-width: 100%;
  height: 100%;
  animation: moveSlideshow 20s linear infinite;
  -webkit-animation: moveSlideshow 20s linear infinite;
}

@keyframes moveSlideshow {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0);
  }
}

/* about-gallery-slider-active css end */

/* -- choose us area
-------------------------------------------------------------- */
.why-choose-us-area .ser-icon {
  min-width: 70px;
}


/* 
 15. rooms page
-------------------------------------------------------------- */
h4.sidebar-title {
  font-size: 21px;
}

.sidebar-widget .panel li a {
  font-size: 16px;
  color: var(--text-color);
}

.rp-service .panel li {
  width: 49%;
  display: inline-block;
}

.sidebar-widget .ratting-area span {
  font-size: 21px;
}

/* checkbox css start*/
.option-input {
  position: relative;
  appearance: none;
  border: 1px solid #cccccc;
  height: 15px;
  width: 15px;
  transition: .15s;
}

.option-input:checked::before {
  position: absolute;
  content: "✓";
  display: inline-block;
  color: var(--theme-color);
  font-size: 14px;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
}

/* checkbox css end*/
/* accordion start */
.sidebar-widget .accordion:after {
  content: '\f107';
  float: right;
  margin-left: 5px;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  font-size: 18px;
  color: var(--text-color);
}

.sidebar-widget .active::after {
  content: "\f105";
}

.sidebar-widget .panel-ser {
  padding: 0 5px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* accordion end */
/* radio check input color change css start */
input[type="radio"] {
  /* remove standard background appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 16px;
  height: 16px;
  padding: 3px;
  /* background-color only for content */
  background-clip: content-box;
  border: 1px solid #cccccc;
  background-color: transparent;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked {
  background-color: var(--theme-color);
}

/* radio check input color change css end */
/*Sidebar Price*/
#slider-range {
  position: relative;
  margin-bottom: 25px;
}

.ui-widget.ui-widget-content {
  border: none;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  background: var(--theme-color);
  border-radius: 0;
  border: none;
  outline: none;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.004);
}

.ui-slider-horizontal {
  height: 6px;
  border-radius: 0;
}

.ui-widget-content {
  background: #ebebeb;
}

.ui-widget-header {
  background: var(--theme-color);
}

.ui-slider-horizontal .ui-slider-handle {
  top: -5px;
}

.ui-slider .ui-slider-handle {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  -webkit-transition: all 0s ease-out 0s;
  -moz-transition: all 0s ease-out 0s;
  -ms-transition: all 0s ease-out 0s;
  -o-transition: all 0s ease-out 0s;
  transition: all 0s ease-out 0s;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.ui-slider .ui-slider-handle:before {
  position: absolute;
  content: "";
  height: 6px;
  width: 6px;
  background: #ffffff;
  top: 50%;
  left: 49%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.price-slider .prc-amount input {
  font-weight: 500;
  width: 100px;
  outline: 0;
}

/*Sidebar Price end*/
/* pagination */
.pagination-page .page-link {
  width: 60px;
  height: 60px;
  text-align: center;
  color: var(--text-color);
  border: 1px solid #cccccc;
  margin: 0 8px;
  line-height: 42px;
  display: block;
  font-size: 18px;
}

.pagination-page .page-link:hover,
.pagination-page .page-item.active .page-link {
  background: var(--theme-color);
  border-color: var(--theme-color);
  color: #fff;
}

.pagination-page .page-link:focus {
  box-shadow: none;
}

.page-item:first-child .page-link {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}


/* 16. rooms details page
-------------------------------------------------------------- */
.pr-rooms-content h6,
h5.sidebar-title {
  font-size: 18px;
}

.rpb-price .room-price {
  font-size: 36px;
}

.pr-rooms-content span,
.rc-price {
  font-size: 14px;
}

.pr-rooms-content .my-btn .btn {
  padding: 6px 25px;
}

.booking-help a {
  font-size: 30px;
  line-height: .7;
}

.rp-booking-area .my-btn .btn {
  padding: 12px 32px;
  font: 16px;
}

.rp-booking-area .sidebar-widget .accordion::after {
  content: '\f055';
  color: var(--main-color);
  float: none;
}

.rp-booking-area .sidebar-widget .active::after {
  content: "\f056";
}

.rp-booking-area .sidebar-widget .panel li a {
  font-size: 15px;
}

.rd-facilities-list p {
  font-size: 18px;
}

.rd-facilities-list li {
  width: 32.8%;
}

.room-details-info li {
  width: 100%;
  display: inline-block;
  position: relative;
}

.room-details-info li::before {
  position: absolute;
  content: "";
  background: var(--primary-border);
  width: 1px;
  height: 92%;
  right: 0;
}

.room-details-info ul li:last-child::before {
  position: static;
}

.review-head h5 {
  font-size: 16px;
}

.review-head span {
  font-size: 14px;
}

.single-similar-rooms h6,
.single-similar-rooms .review-ratting span {
  font-size: 16px;
}

.single-similar-rooms span {
  font-size: 14px;
}

.single-similar-rooms::before,
.blog-hm1-content {
  position: absolute;
  content: "";
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 80%);
  opacity: .3;
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
}

.single-blog-wrapper .blog-hm1-content {
  opacity: .5;
}

.single-blog-wrapper:hover .blog-hm1-content {
  opacity: .8;
}

.single-similar-rooms:hover::before {
  opacity: .7;
}

/* 17. blog page
-------------------------------------------------------------- */
.portfolio-menu button {
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 700;
  padding: 10px 20px;
  color: var(--main-color);
  cursor: pointer;
  font-family: "Noto Serif", serif;
}

.portfolio-menu button.active,
.portfolio-menu button:hover {
  color: var(--theme-color);
}

.blog-page-content .blog-hm-date span {
  color: var(--text-color);
}

.blog-page-content span {
  font-size: 14px;
}

.blog-page-content .blog-hm-date::before {
  background: var(--text-color);
}

.blog-page-content h4 {
  font-size: 21px;
  margin-top: 5px;
}

.single-blog-page-wrapper {
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.06);
}

.single-blog-page-wrapper:hover {
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.09);
}

.blog-page-btn .my-btn .btn {
  padding: 16px 52px;
  font-size: 16px;
}


/* 18. booking page
-------------------------------------------------------------- */
.booking-page-wrapper h2 {
  font-size: 24px;
}

.booking-extra-service ul li a {
  color: var(--text-color);
}

.booking-extra-service.bp-cnt-ex-ser ul li input {
  margin-top: 6px;
}

.booking-extra-service ul li {
  width: 49%;
  display: inline-block;
}

.coupon-content,
.checkout-content,
#ship-box-info,
#cbox-account-info {
  display: none;
}

#login {
  border-bottom: 2px solid var(--theme-color);
}

.booking-your-info-area input {
  padding: 12px 15px;
  border: 1px solid var(--primary-border);
  height: 48px;
}

.booking-your-info-area textarea {
  min-height: 145px;
}

.save-info input {
  height: auto;
}


/* 19. checkout page
-------------------------------------------------------------- */
.checkout-your-info-area li {
  width: 49%;
}

.delete {
  font-size: 18px;
  color: var(--text-color)
}

.checkout-page .option-input {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.checkout-page .option-input:checked::before {
  content: "";
  background: var(--theme-color);
  width: 6px;
  height: 6px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}


/* 20. confirmation page
-------------------------------------------------------------- */

.confirmation-content h2 {
  font-size: 30px;
}

.confirmation-content p {
  font-size: 18px;
}

.confirmation-content .con-icon {
  border-width: 3px;
  width: 76px;
  height: 76px;
  line-height: 75px;
}

.confirmation-content .con-icon span {
  font-size: 24px;
}

.amount-paid p {
  font-size: 18px;
}

.con-btn .my-btn .btn {
  padding: 11px 34px;
  font-size: 16px;
}

.con-btn .my-btn .btn.bg-transparent {
  color: var(--main-color);
}


/* 21. blog details page
-------------------------------------------------------------- */
.blog-details-page-height {
  min-height: 935px;
}

.blockquote-quit span {
  font-size: 52px;
}

.blockquote-info span {
  font-size: 16px;
}

.blockquote-info span::before {
  background: var(--text-color);
  position: absolute;
  content: "";
  width: 16px;
  height: 1px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.blockquote p {
  font-size: 21px;
  line-height: 1.71;
}

.blockquote-quit {
  margin-right: 65px;
}

.blog-p-content-footer .social-link a {
  font-size: 18px;
}

.single-blog-comments {
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.06);
}

.single-blog-comments::before {
  position: absolute;
  content: "";
  background: #ffffff;
  width: 28px;
  height: 35px;
  left: -28px;
  top: 30px;
  clip-path: polygon(0 50%, 100% 100%, 100% 0);
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.06);
}

.single-blog-comments {
  margin-left: 45px;
}

.blog-details-page-review .client-avatar img {
  min-width: 90px;
}

.blog-details-page-review p {
  line-height: 1.75;
}

.contact-form input {
  height: 50px;
}

.contact-form textarea {
  height: 160px;
}

.contact-form .my-btn .btn,
.booking-page-area .my-btn .btn {
  padding: 10px 15px;
  font-size: 16px;
}

.review-text.ml--35 {
  margin-left: 0;
}

.single-news-page-content.n-d-p2,
.news-details-page2 .news-review-area,
.news-details-page2 .news-contact-form {
  box-shadow: none;
}

/* blog-details2-page css */
.blog-details2-page .blockquote-quit {
  margin-right: 40px;
}

.blog-details2-page .blockquote p {
  font-size: 18px;
  line-height: 1.65;
}

.blog-search span {
  line-height: 50px;
}

.blog-details2-page .pr-rooms-content h6,
h5.sidebar-title {
  font-size: 16px;
}

.popular-tag li {
  display: inline-block;
  padding: 5px 25px;
  border: 1px solid var(--primary-color);
  border-radius: 30px;
  color: var(--text-color);
  margin-bottom: 10px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}

.popular-tag li:hover {
  color: #ffffff;
  background: var(--theme-color);
}

.related-post h3 {
  font-size: 30px;
}

.blog-details2-page .single-blog-comments,
.blog-details2-page .single-blog-comments::before {

  background: #fbf8f3;
  box-shadow: none
}

.blog-details2-page .single-blog-comments {
  margin-left: 70px;
}


/* 22. contact page
-------------------------------------------------------------- */
.contact-icon {
  width: 72px;
  height: 72px;
  line-height: 72px;
  border-radius: 50%;
}

.contact-icon span {
  color: #ffffff;
}

.contact-info-sep::before {
  position: absolute;
  content: "";
  background: var(--primary-border);
  width: 1px;
  height: 96%;
  right: 0;
}

.contact-info-wrapper .contact-info-sep:last-child::before {
  position: static
}

.contact-text h4 {
  font-size: 21px;
}

.contact-text a {
  color: var(--text-color);
}

.contact-icon span,
.contact-info input,
.contact-info textarea {
  font-size: 16px;
}

.contact-info .massage {
  min-height: 140px;
}

.contact-form .form-message.success {
  color: green;
}

.contact-form .form-message.error {
  color: red;
}

/* map */
.map-wrapper {
  width: 100%;
  min-height: 370px;
  background: #f9f9f9;
  margin-right: 90px;
  border-radius: 10px;
}

.leaflet-marker-icon {
  width: 55px;
}

/* extra css  */
/* header-search-details */
.header-search-details {
  width: 100%;
  position: fixed;
  top: -250%;
  left: 0;
  z-index: 555;
  height: 100%;
  transition: 0.5s;
}

.header-search-details .header-search-form {
  width: 60%;
}

.header-search-details.open-search-info {
  top: 0;
}

.mobile-subscribe .subscribe-info span {
  top: 13px;
}










:root {
  --brand: #007C9E;
  --brand-dark: #005873;
  --accent: #2AB3D6;
  --nav-height: 110px;
  --drawer-w: 360px;
  --max-width: 1200px;
  --text: #111;
  --muted: #555;
}

* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

a {
  color: inherit;
  text-decoration: none
}

/* NAVBAR */
.msk-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  background: #fff;
  border-bottom: 1px solid #eee;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
}

.msk-container {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.msk-logo img {
  height: 76px;
  display: block;
}

.msk-right {
  display: flex;
  align-items: center;
  gap: 16px
}

.msk-phone {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* MENU BUTTON */
.msk-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--brand);
  color: #fff;
  border: 0;
  padding: 15px 38px;
  border-radius: 28px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.6px;
  font-size: 18px;
  transition: background .2s ease, transform .12s ease;
}

.msk-toggle:hover {
  background: var(--brand-dark)
}

.msk-toggle:active {
  transform: translateY(1px)
}

.msk-hamburger {
  width: 24px;
  height: 16px;
  position: relative
}

.msk-hamburger span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .28s ease, opacity .18s ease, top .18s ease;
}

.msk-hamburger span:nth-child(1) {
  top: 0
}

.msk-hamburger span:nth-child(2) {
  top: 7px
}

.msk-hamburger span:nth-child(3) {
  top: 14px
}

.msk-toggle.active .msk-hamburger span:nth-child(1) {
  transform: rotate(45deg);
  top: 7px;
}

.msk-toggle.active .msk-hamburger span:nth-child(2) {
  opacity: 0
}

.msk-toggle.active .msk-hamburger span:nth-child(3) {
  transform: rotate(-45deg);
  top: 7px;
}

/* DRAWER */
.msk-drawer {
  position: fixed;

  right: calc(-1 * var(--drawer-w));
  width: var(--drawer-w);
  height: 90vh;
  background: #fff;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
  transition: right .36s cubic-bezier(.2, .9, .2, 1);
  z-index: 1150;
  display: flex;
  flex-direction: column;
}

.msk-drawer.active {
  right: 0
}

.msk-drawer-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.msk-drawer-header img {
  height: 60px
}

.msk-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drawer-nav a {
  padding: 14px 12px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-dark);
}

.drawer-nav a:hover {
  background: #f7f7f7
}

.msk-drawer-footer {
  padding: 18px 20px;
  border-top: 1px solid #eee;
  background: #fafafa;
}

.drawer-contact {
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
}

.drawer-contact .phone {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-contact .addr {
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.drawer-cta {
  display: inline-block;
  margin-top: 12px;
  background: var(--brand);
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
}

/* MOBILE */
@media (max-width:880px) {
  .msk-phone {
    display: none
  }

  .msk-drawer {
    position: fixed;

    right: calc(-1 * var(--drawer-w));
    width: var(--drawer-w);
    height: 90vh;
    background: #fff;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
    transition: right .36s cubic-bezier(.2, .9, .2, 1);
    z-index: 1150;
    display: flex;
    flex-direction: column;
  }

  .msk-drawer.active {
    transform: scaleY(1)
  }
}

body.menu-open {
  overflow: hidden
}

.page-spacer {
  height: var(--nav-height)
}

main {

  margin: 24px auto;
  padding: 12px;

}

.drawer-nav .act {
  color: #555;
}






.hydeBookBtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #153255, #46A5BD);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
}

.hydeBookBtn i {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.hydeBookBtn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
  background: linear-gradient(135deg, #071138, #071138);
  color: #fff;
}

.hydeBookBtn:hover i {
  transform: rotate(15deg);
}

/* ====== Responsive ====== */
@media (max-width: 768px) {
  .hydeBookBtn {
    font-size: 1rem;
    padding: 12px 22px;
  }

  .hydeBookBtn i {
    font-size: 1rem;
  }

  #loading-center-absolute {
    position: absolute;
    left: 56%;
    top: 50%;
    height: 150px;
    width: 150px;
    margin-top: -75px;
    margin-left: -75px;
  }
}

.body1 {
  margin: 0;
  height: 100%;
  background: #040826;

}



:root {
  --primary-blue: #002b45;
  --light-blue: #d0e7ff;
}

/* Apartments Section */
.hydeApartSection {
  padding: 40px 5%;
}

.hydeApartHeader h2 {
  font-size: 2rem;
  margin-bottom: 8px;
  color: #fff;
}

.hydeApartHeader p {
  font-size: 1rem;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 30px;
}

/* Apartment List */
.hydeApartList {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.hydeApartItem {
  padding: 12px 20px;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  flex: 0 0 auto;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.hydeApartItem.active,
.hydeApartItem:hover {
  background: #17a2b8;
  color: #fff;
}

/* Carousel items */
.hydeSlickItem {
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin: 0 5px;
}

.hydeSlickItem img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}

.hydeSlickItem h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  text-align: center;
}

.roomTypeBox {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 8px;
}

.roomTypeBox span {
  padding: 4px 10px;
  font-size: 0.8rem;
  border-radius: 12px;
  font-weight: 500;
  color: var(--primary-blue);
  background-color: var(--light-blue);
}

.roomInfo p {
  margin: 4px 0;
  font-size: 0.95rem;
  color: #555;
  text-align: center;
}

.roomPrice p {
  margin: 8px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-blue);
  text-align: center;
}

.bookNowBtn {
  display: block;
  text-align: center;
  background: var(--primary-blue);
  color: #fff;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
  margin: 10px auto 0 auto;
}

.bookNowBtn:hover {
  background: #005a7f;
  color: #fff;
}

.slick-prev,
.slick-next {
  background: var(--primary-blue);
  color: #fff;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  z-index: 2;
}

.slick-prev:before,
.slick-next:before {
  content: '';
}

/* Mobile responsive */
@media(max-width:768px) {
  .hydeApartList {
    flex-direction: column;
    /* vertical list */
    overflow-x: visible;
    gap: 12px;
  }

  .hydeApartItem {
    white-space: normal;
    flex: 1 0 auto;
  }
}

.bookNowLightBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 15px;
  text-decoration: none;
  background: #17a2b8;
  /* Light blue background */
  color: #fff;
  /* Brand blue text */
  border: 1px solid #b3e0f2;
  /* Soft border */
  transition: all 0.3s ease;
}

.bookNowLightBtn:hover {
  background: #d0f0ff;
  /* Slightly darker on hover */
  color: #005873;
  /* Darker blue text */
}

.hydeVideoWrap {
  text-align: center;
  padding: 60px 20px;
  background: #ffffff;
}

.hydeVideoTitle {
  font-size: 3rem;
  color: #002b45;
  /* logo blue */
  margin-bottom: 15px;
  font-weight: bold;
}

.hydeVideoDesc {
  max-width: 700px;
  margin: 0 auto 40px;

  color: #000;
  line-height: 1.6;
}

.hydeVideoBox {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.hydeVideoThumb {
  width: 100%;
  display: block;
  border-radius: 16px;
}

.hydePlayBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: #0056b3;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s ease;
}

.hydePlayBtn:hover {
  background: #007bff;
  transform: translate(-50%, -50%) scale(1.1);
}

.hydePlayBtn::before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent white;
  margin-left: 5px;
}

.hydeVideoFrame {
  display: none;
  width: 100%;
  height: 450px;
  border: none;
  border-radius: 16px;
}

@media (max-width: 768px) {
  .hydeVideoTitle {
    font-size: 1.6rem;
  }

  .hydeVideoFrame {
    height: 250px;
  }



  .hydePlayBtn {
    width: 60px;
    height: 60px;
  }
}

.hydeZoomInit {
  transform: scale(0.8);
  opacity: 0;
  transition: all 1s ease;
}

.hydeZoomActive {
  transform: scale(1);
  opacity: 1;
}

.hydeFacilitiesWrapper {
  max-width: 1300px;
  margin: auto;
  padding: 80px 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hydeFacilitiesWrapper h2 {
  font-size: 3rem;
  margin-bottom: 70px;
  color: #002b45;
  position: relative;
  display: inline-block;
}



.hydeFacilityGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 40px;
}

.hydeFacilityCard {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 25px;
  padding: 40px 30px;
  backdrop-filter: blur(18px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  overflow: hidden;
}

.hydeFacilityCard::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, #0b5394, #1d80d3);
  border-radius: 50%;
  opacity: 0.15;
  z-index: 0;
}

.hydeFacilityCard:hover {
  transform: translateY(-15px) scale(1.03);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
}

.hydeFacilityCard h3 {
  font-size: 1.5rem;
  margin-bottom: 25px;
  color: #0b5394;
  position: relative;
  z-index: 1;
}

.hydeFacilityCard ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  position: relative;
  z-index: 1;
}

.hydeFacilityCard ul li {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  font-size: 1rem;
  font-weight: 500;
  position: relative;
}

.hydeFacilityCard ul li i {
  font-size: 1.2rem;
  background: linear-gradient(135deg, #0b5394, #1d80d3);
  color: #fff;
  padding: 12px;
  border-radius: 14px;
  margin-right: 14px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.4s ease;
}

.hydeFacilityCard ul li:hover i {
  transform: rotate(12deg) scale(1.15);
}

/* Floating animation for icons */
.hydeFacilityCard ul li i {
  animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

/* Book Button */
.distributor-open {
  display: inline-block;
  margin-top: 60px;
  background: linear-gradient(135deg, #0b5394, #1d80d3);
  color: #fff;
  padding: 10px 15px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.distributor-open:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* Responsive */
@media(max-width: 768px) {
  .hydeFacilitiesWrapper h2 {
    font-size: 2rem;
  }

  .hydeFacilityCard {
    padding: 30px 20px;
  }
}

.hydeFacilitiesWrapper {
  opacity: 0;
  transform: scale(0.8);
  transition: all 1s ease;
}

/* When visible */
.hydeFacilitiesWrapper.show {
  opacity: 1;
  transform: scale(1);
}

footer {
  background: #fff;
  color: #000;

  padding: 70px 20px 30px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}

.footerWrapper {
  max-width: 1300px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
}

.footerCol h4 {
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: 600;
  color: #0b5394;
  text-transform: uppercase;
  position: relative;
}

.footerCol h4::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 40px;
  height: 3px;
  background: #1d80d3;
  border-radius: 2px;
}

.footerCol p,
.footerCol a {
  color: #000;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.7;
  display: block;
}

.footerCol a:hover {
  color: #0b5394;
}

.footerCol i {
  margin-right: 10px;
  color: #1d80d3;
}

.footerLogo {
  max-width: 180px;
  margin-bottom: 20px;
}

.footerBottom {
  text-align: center;
  margin-top: 50px;
  font-size: 0.85rem;
  color: #000;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

/* Responsive */
@media(max-width: 768px) {
  .footerWrapper {
    grid-template-columns: 1fr;
    text-align: left;
  }


  .footerCol h4::after {
    left: 5.5%;
    transform: translateX(-50%);
  }
}

.hydeBookingWrapper {
  max-width: 1400px;
  margin: auto;
  padding: 80px 20px;
}

.hydeBookingTitle {
  text-align: center;
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 60px;
  color: #002b45;

}

.hydeBookingGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.hydeBookingCard {
  position: relative;
  height: 380px;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.7s ease, opacity 0.7s ease;
}

.hydeBookingCard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

/* Overlay style */
.hydeOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 25px 20px;
  color: #fff;

  /* Light black overlay – top strong, center clear, bottom low */
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.45) 25%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0.2) 100%);

  text-align: center;
  z-index: 2;
  transition: all 0.5s ease;
}


/* Title at top */
.hydeOverlay h4 {
  font-size: 32px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;

  /* Text shadow for readability & depth */
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.6),
    2px 2px 6px rgba(0, 0, 0, 0.5);


  transition: all 0.4s ease;
}


/* Book Now Button */
.hydeReadMore {
  align-self: center;
  background: #005873;
  color: #fff;
  padding: 12px 28px;
  border-radius: 25px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: 0.5px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

/* Hover effects */
.hydeBookingCard:hover img {
  transform: scale(1.08);
}

.hydeBookingCard:hover .hydeOverlay {
  background: #cccaca;
  color: #000;
  justify-content: center;
}

.hydeBookingCard:hover .hydeOverlay h4 {
  color: #000;
  font-size: 2rem;
  margin-bottom: 20px;
}

.hydeBookingCard:hover .hydeReadMore {
  opacity: 1;
  transform: translateY(0);
}

.hydeBookingCard:hover .hydeReadMore:hover {
  background: #002b45;
  color: #fff;
}

/* Zoom-in effect when visible */
.showZoom {
  transform: scale(1);
  opacity: 1;
}

/* Responsive */
@media(max-width: 1200px) {
  .hydeBookingGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 768px) {
  .hydeBookingTitle {
    font-size: 2rem;
  }

  .hydeBookingGrid {
    grid-template-columns: 1fr;
  }

  .hydeBookingCard {
    height: 480px;
  }

  .hydeOverlay h4 {
    font-size: 2rem;
  }
}



.hydeAboutNoBG {

  padding: 100px 20px;
  text-align: center;
  opacity: 0;
  transform: translateY(50px);
}

.hydeAboutNoBG.show {
  animation: hydeBounceIn 1s forwards;
}

.hydeAboutSubtitleNoBG {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 30px;
  max-width: 900px;
  text-align: justify;
}

.hydeAboutSubtitleNoBG .hydeHighlight {
  color: #0b5394;
  /* Blue highlight for important words */
}

.hydeAboutParagraphNoBG {
  font-size: 1.2rem;
  line-height: 1.8;
  max-width: 900px;
  margin: auto;
  text-align: justify;
  color: #000;
}

@keyframes hydeBounceIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  60% {
    opacity: 1;
    transform: translateY(-20px);
  }

  80% {
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------------- Responsive ----------------- */
@media(max-width: 1024px) {
  .hydeAboutSubtitleNoBG {
    font-size: 1.8rem;
  }

  .hydeAboutParagraphNoBG {
    font-size: 1.1rem;
  }

  .hydeAboutNoBG {
    padding: 100px 15px;
  }
}

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

  .hydeAboutParagraphNoBG {
    font-size: 1rem;
  }

  .hydeAboutNoBG {
    padding: 80px 15px;
  }
}


.hydeAboutWrapper {
  max-width: 1200px;
  margin: 10px auto;
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 0 20px;
  opacity: 0;
  transform: translateY(50px);
}

.hydeAboutWrapper.show {
  animation: hydeBounceIn 1s forwards;
}

/* ----------------- Image ----------------- */
.hydeAboutImage {
  flex: 1;
}

.hydeAboutImage img {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

/* ----------------- Content ----------------- */
.hydeAboutContent {
  flex: 1;
  text-align: left;
}

.hydeAboutSubtitle {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.4;
}

.hydeAboutSubtitle .hydeHighlight {
  color: #0b5394;
  /* Highlighted word in blue */
}

.hydeAboutParagraph {
  font-size: 1.15rem;
  line-height: 1.8;
  color: #000;
  text-align: justify;
}

/* ----------------- Bounce Animation ----------------- */
@keyframes hydeBounceIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  60% {
    opacity: 1;
    transform: translateY(-20px);
  }

  80% {
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------------- Responsive ----------------- */
@media(max-width: 1024px) {
  .hydeAboutWrapper {
    flex-direction: column;
    gap: 30px;
  }

  .hydeAboutContent {
    text-align: center;
  }
}

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

  .hydeAboutParagraph {
    font-size: 1rem;
  }


}

.hydeEliteWrapper {
  max-width: 1200px;
  margin: 120px auto;
  padding: 0 20px;
  text-align: center;
}

.hydeEliteTitle {
  font-size: 2.3rem;
  font-weight: 800;
  margin-bottom: 15px;
  background: linear-gradient(90deg, #094376, #020f19);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hydeEliteSubtitle {
  font-size: 1.5rem;
  margin-bottom: 70px;
  color: #000;
  line-height: 1.6;
  text-align: center;

  font-weight: 600;

}

/* ----------------- Grid ----------------- */
.hydeEliteGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  opacity: 0;
  transform: translateY(50px);
}

/* ----------------- Card ----------------- */
.hydeEliteCard {
  background: #fff;
  border-radius: 20px;
  padding: 50px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.hydeEliteCard::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, rgba(4, 28, 47, 0.2), rgba(16, 70, 114, 0.2));
  transform: rotate(20deg);
  transition: all 0.6s ease;
}

.hydeEliteCard:hover::before {
  top: -20%;
  left: -20%;
}

.hydeEliteCard:hover {
  transform: translateY(-15px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}

.hydeEliteIcon {
  font-size: 3.5rem;
  color: #002b45;
  margin-bottom: 25px;
  transition: transform 0.5s ease, color 0.5s ease;
}

.hydeEliteCard:hover .hydeEliteIcon {
  transform: rotate(15deg) scale(1.2);
  color: #1d80d3;
}

.hydeEliteFeatureTitle {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #000;
}

.hydeEliteFeatureDesc {

  color: #000;
}

/* ----------------- Bounce Animation ----------------- */
.hydeEliteGrid.show {
  animation: hydeEliteBounce 1s forwards;
}

@keyframes hydeEliteBounce {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  60% {
    opacity: 1;
    transform: translateY(-20px);
  }

  80% {
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------------- Responsive ----------------- */
@media(max-width: 1024px) {
  .hydeEliteGrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width: 768px) {
  .hydeEliteGrid {
    grid-template-columns: 1fr;
  }

  .hydeEliteTitle {
    font-size: 2.2rem;
  }

  .hydeEliteSubtitle {
    font-size: 1.1rem;
    margin-bottom: 50px;
  }

  .hydeEliteCard {
    padding: 40px 20px;
  }
}

.testiAutoWrapper {
  background: linear-gradient(135deg, #0d6ea6 0%, #1f045a 100%);
  padding: 60px 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.testiAutoWrapper h2 {
  text-align: center;
  color: #fff;
  margin-bottom: 30px;
  font-size: 2rem;
}

.testiTrack {
  display: inline-flex;
  gap: 20px;
  will-change: transform;
  cursor: grab;
}

.testiCard {
  flex: 0 0 300px;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  color: #000;
}

.testiQuote {
  font-style: italic;
  margin-bottom: 10px;
}

.testiStars {
  color: rgb(8, 18, 148);
  margin-bottom: 8px;
}

.testiName {
  font-weight: bold;
  color: #002b45;
}

:root {
  --accent: #0b5394;
  --accent-2: #1d80d3;
  --bg: #f6f8fb;
  --card: #ffffff;
  --overlay: rgba(10, 20, 30, 0.75);
}

body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: #222;
  -webkit-font-smoothing: antialiased;
}

.hydeGalWrap {
  max-width: 1200px;
  margin: 60px auto;
  padding: 20px;
}

.hydeGalTitle {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  color: #002b45;
  margin-bottom: 18px;
}

.hydeGalSub {
  text-align: center;
  color: #000;
  margin-bottom: 60px;
  font-size: 1.2rem;
}

/* Grid */
.hydeGalGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  align-items: start;
}

.hydeGalItem {
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
  cursor: zoom-in;
  transition: transform .25s ease, box-shadow .25s ease;
}

.hydeGalItem:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12);
}

.hydeGalThumb {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: cover;
}

.hydeGalCaption {
  padding: 14px 12px;
  font-size: 14px;
  color: #333;
}

/* Responsive grid */
@media(max-width: 992px) {
  .hydeGalGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hydeGalThumb {
    height: 200px;
  }
}

@media(max-width: 620px) {
  .hydeGalGrid {
    grid-template-columns: 1fr;
  }

  .hydeGalThumb {
    height: 260px;
  }
}

/* Modal overlay */
.hydeModalRoot {
  position: fixed;
  inset: 0;
  display: none;
  /* shown via .open */
  align-items: center;
  justify-content: center;
  z-index: 1200;
  background: var(--overlay);
  padding: 20px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.hydeModalRoot.open {
  display: flex;
}

.hydeModalCard {
  width: 100%;
  max-width: 1000px;
  background: transparent;
  border-radius: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hydeModalImageWrap {
  width: 100%;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hydeModalImg {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  transition: transform .35s ease;
}

/* Controls */
.hydeModalClose {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  border: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.2);
  font-size: 18px;
  color: var(--accent);
}

.hydeModalNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.14);
  transition: transform .18s ease;
}

.hydeModalNav:hover {
  transform: translateY(-50%) scale(1.06);
}

.hydeModalPrev {
  left: 12px;
}

.hydeModalNext {
  right: 12px;
}

/* Caption inside modal */
.hydeModalCaption {
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  padding: 10px 20px;
  pointer-events: none;
}

/* small screens tweak for controls */
@media(max-width:480px) {
  .hydeModalClose {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .hydeModalNav {
    width: 40px;
    height: 40px;
  }
}

.multiMapSection {
  padding: 60px 20px;
  text-align: center;
}

.multiMapSection h2 {
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: #002b45;

}

.mapGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.mapCard {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  text-align: left;
}

.mapCard h3 {
  margin: 0;
  padding: 15px 20px;
  font-size: 1rem;
  background: #007c9e;
  color: #fff;
}

.mapCard iframe {
  width: 100%;
  height: 300px;
  border: 0;
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .mapGrid {
    grid-template-columns: 1fr;
  }

  .multiMapSection h2 {
    font-size: 1.8rem;
  }

  .mapCard h3 {
    font-size: 1rem;
  }

  .mapCard iframe {
    height: 250px;
  }
}

.aptMasterSection_789 {
  padding: 60px 20px;

  overflow: hidden;
}

.aptMasterSection_789 h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: #2c3e50;
}

.aptMasterSection_789 p.subtitle {
  text-align: center;
  font-size: 1.2rem;
  color: #000;
  margin-bottom: 40px;
}

.aptGridWrapper_789 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .aptGridWrapper_789 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 15px;
  }

}

.aptCard_789 {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.8s ease;
}

.aptCard_789.visible {
  opacity: 1;
  transform: translateX(0);
}

.aptCard_789:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.aptCardHeader_789 {
  background: #007c9e;
  color: #fff;
  padding: 15px;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}

.aptCardBody_789 {
  padding: 20px;
}

.aptCardBody_789 p {
  margin: 8px 0;
  line-height: 1.5;
  font-size: 1rem;
}

.aptFacilities_789 {
  margin-top: 15px;
  padding: 10px 15px;
  background: #f5faff;
  border-left: 4px solid #007c9e;
  border-radius: 8px;
}

.aptFacilities_789 h4 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: #002b45;
}

.aptFacilities_789 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.aptFacilities_789 ul li {
  margin: 5px 0;
  padding-left: 18px;
  position: relative;
}

.aptFacilities_789 ul li::before {
  content: "✔";
  color: #2196f3;
  position: absolute;
  left: 0;
}

/* 3D Check Rooms button */
.checkRoomsBtn {
  display: inline-block;
  padding: 10px 25px;
  background: linear-gradient(145deg, #032644, #0d5594);
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 30px;
  box-shadow: 0 5px 0 #1769aa, 0 10px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  perspective: 1000px;
}

.checkRoomsBtn:hover {
  transform: translateY(-8px) rotateX(5deg) rotateY(5deg) scale(1.05);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.35), 0 8px 0 #1769aa;
  background: linear-gradient(145deg, #42a5f5, #1e88e5);
  color: #002b45;
}

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

.hyde-gallery-section {
  position: relative;
  background: rgba(0, 0, 0, 0.9);
  padding: 80px 60px;
  overflow: hidden;
  background-image: url('../images/hero/gallery-bg.avif');
  background-size: cover;
  background-position: center;
}

.hyde-gallery-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(37, 37, 37, 0.8);
  z-index: 0;
}

/* -------------------- Text -------------------- */
.container1 {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto 50px;
  text-align: center;
}

.hyde-gallery-title {
  font-size: 56px;
  color: #fff;
  font-weight: 500;
  margin-bottom: 15px;
}

.hyde-gallery-subtitle {
  font-size: 18px;
  color: #fff;
  line-height: 1.6;
}

/* -------------------- Carousel -------------------- */
.hyde-gallery-wrapper {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
}

.hyde-gallery-slider {
  padding: 30px 10px;
}

.slick-slide {
  padding: 0 10px;
  transition: all 0.4s ease;
}

.hyde-gallery-item {
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.hyde-gallery-item img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  border-radius: 14px;
  transition: transform 0.4s ease;
  filter: brightness(0.96);
}

.hyde-gallery-item img:hover {
  transform: scale(1.05);
}

/* ---------- Custom Arrows ---------- */
.hyde-prev,
.hyde-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--brand);
  color: #fff;
  border: none;
  font-size: 32px;
  width: 60px;
  height: 60px;
  font-weight: 900;
  border-radius: 50%;
  z-index: 10;
  cursor: pointer;
  transition: all 0.3s ease;

  display: flex;
  /* centers arrow horizontally and vertically */
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* removes extra vertical space */
}

.hyde-prev span,
.hyde-next span {
  position: relative;
  top: -3px;
  /* small fine-tune if needed */
}


.hyde-prev:hover,
.hyde-next:hover {
  background: #555;
}

.hyde-prev {
  left: 30px;

}

.hyde-next {
  right: 30px;
}

.hyde-prev.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .hyde-gallery-slider {
    padding: 0 50px;
  }

  .hyde-prev,
  .hyde-next {
    width: 50px;
    height: 50px;
    font-size: 32px;
  }

  .hyde-gallery-item img {
    height: 360px;
  }
}

@media (max-width: 600px) {
  .hyde-gallery-slider {
    padding: 0 80px;
  }

  .hyde-gallery-item img {
    height: 300px;
  }



  .hyde-next {
    right: -35px;
  }

  @media (max-width: 2100px) {
    .hyde-gallery-slider {
      padding: 30px 0px;
    }
  }
}

@media (max-width: 600px) {

  .hyde-prev,
  .hyde-next {
    position: absolute;
    top: 42%;
    /* slight upward shift (was 50%) */
    transform: translateY(-50%);
    width: 50px;
    /* bigger size */
    height: 50px;
    font-size: 28px;
    /* larger arrow icon */

    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
  }



}

@media (min-width: 601px) and (max-width: 767px) {

  .hyde-prev,
  .hyde-next {
    position: absolute;
    top: 42%;
    /* slight upward shift (was 50%) */
    transform: translateY(-50%);
    width: 50px;
    /* bigger size */
    height: 50px;
    font-size: 28px;
    /* larger arrow icon */

    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
  }

  .hyde-prev {
    left: 80px;
  }


}



@media (min-width: 3738px) and (max-width: 4200px) {
  .slick-slider {
    width: 3600px;
    /* 👈 fixed width for 4K screen */
    margin: 0 auto;
    /* 👈 centers it horizontally */
  }

  .container1 {
    position: relative;
    z-index: 1;
    max-width: 3600px;
    margin: 0 auto 50px;
    text-align: center;
  }

  .hyde-gallery-wrapper {
    position: relative;
    z-index: 2;
    max-width: 3600px;
    margin: 0 auto;
  }


  .hyde-gallery-item img {
    height: 450px;
  }

}

@media (min-width: 2100px) and (max-width: 3737px) {
  .slick-slider {
    width: 1600px;
    /* 👈 fixed width for 4K screen */
    margin: 0 auto;
    /* 👈 centers it horizontally */
  }

  .container1 {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    margin: 0 auto 50px;
    text-align: center;
  }

  .hyde-gallery-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1600px;
    margin: 0 auto;
  }


  .hyde-gallery-item img {
    height: 450px;
  }

}


/* -------------------- Book Now -------------------- */
.hyde-book-btn-wrap {
  text-align: center;
  margin-top: 50px;
  position: relative;
  z-index: 2;
}

.msk-book-btn {
  background-color: #a46b3e;
  color: #fff;
  padding: 14px 38px;
  border-radius: 40px;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.msk-book-btn:hover {
  background-color: #8c5930;
}

.msk-arrow-circle {
  margin-left: 8px;
  transition: transform 0.3s;
}

.msk-book-btn:hover .msk-arrow-circle {
  transform: translateX(6px);
}

/* -------------------- Responsive -------------------- */
@media (max-width: 991px) {
  .hyde-gallery-title {
    font-size: 34px;
  }

  .hyde-gallery-item img {
    height: 350px;
  }

  .slick-prev {
    left: -40px;
  }

  .slick-next {
    right: -40px;
  }

  .hyde-gallery-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
  }
}

@media (max-width: 2500px) {


  .hyde-gallery-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1900px;
    margin: 0 auto;
  }



  .hyde-gallery-item img {
    width: 100%;
    height: 400px;

  }
}

@media (min-width: 2250px) and (max-width: 2500px) {


  .hyde-gallery-wrapper {
    position: relative;
    z-index: 2;
    max-width: 2100px;
    margin: 0 auto;
  }

  .slick-slider {
    width: 2100px;
    margin: 0 auto;
  }

  .container1 {
    max-width: 2100px;
  }
}

@media (max-width: 1499px) {


  .hyde-gallery-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1900px;
    margin: 0 auto;
    padding: 0 60px;
  }


  .hyde-gallery-item img {
    width: 100%;
    height: 420px;
  }
}



/* --- Section Wrapper --- */
.elite-section {
  background-color: #f3f7fa;
  padding: 0;
  margin: 0;
}

/* --- Grid Layout --- */
.elite-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  align-items: stretch;
}

/* --- Left Content --- */
.elite-content {
  padding: 100px 80px;
  box-sizing: border-box;
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* keeps content slightly toward top */
  align-self: start;
}

.elite-content h1 {
  font-size: 6rem;
  font-weight: 500;
  font-family: "Georgia", "Times New Roman", Times, serif;
  color: #000;
  margin-bottom: 30px;
}

.elite-content p {
  font-size: 18px;
  line-height: 1.6;
  color: #000;
  margin-bottom: 40px;
  font-weight: 300;
  letter-spacing: 0.2px;
  max-width: 700px;
}

/* --- Right Image --- */
.elite-image {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.elite-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Zoom-in Animation --- */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.show-content {
  animation: zoomIn 1s ease forwards;
}

/* --- Laptop Screens (1024px - 1366px) --- */
@media (max-width: 1366px) {
  .elite-content {
    padding: 90px 60px;
  }

  .elite-content h1 {
    font-size: 5rem;
  }

  .elite-content p {
    font-size: 17px;
    line-height: 1.5;
  }
}

/* --- Tablet Screens (768px - 1023px) --- */
@media (max-width: 1023px) {
  .elite-container {
    grid-template-columns: 1fr;
  }

  .elite-content {
    padding: 80px 40px;
    text-align: left;
    justify-content: flex-start;
  }

  .elite-image {
    height: 500px;
  }

  .elite-content h1 {
    font-size: 5rem;
  }

  .elite-content p {
    font-size: 20px;
    line-height: 1.8;
  }
}

/* --- Mobile Screens (max-width: 600px) --- */
@media (max-width: 600px) {
  .elite-content {
    padding: 70px 25px;
  }

  .elite-content h1 {
    font-size: 55px;
    font-weight: 400;
  }

  .elite-content p {
    font-size: 20px;
    line-height: 1.6;
  }

  .msk-book-btn {
    font-size: 15px;
    padding: 10px 20px;
  }

  .msk-arrow-circle {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }
}

/* --- Extra Large Screens (min-width: 1900px) --- */
@media (min-width: 1900px) {
  .elite-content {
    padding: 160px 180px 100px;
    justify-content: flex-start;
    /* slightly toward top */
    align-items: flex-start;
    min-height: 770px;
  }

  .elite-content h1 {
    font-size: 95px;
  }

  .elite-content p {
    font-size: 22px;
    line-height: 1.7;
    font-weight: 400;
    color: #000;
    max-width: 750px;
  }
}

/* --- MSK Unique Book Now Button --- */
.msk-book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  width: 100%;
  max-width: 250px;
  padding: 14px 32px;
  border-radius: 50px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

/* --- Circular Arrow --- */
.msk-arrow-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  border-radius: 50%;
  transition: all 0.4s ease;
  font-size: 21px;
}

/* --- Hover Effect --- */
.msk-book-btn:hover {
  background-color: #064a6a;
  color: #fff;
}

.msk-book-btn:hover .msk-arrow-circle {
  transform: translateX(6px);
  border-color: #fff;
}

.hps-hero-section {
  width: 100%;
  overflow: hidden;

}

.hps-hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;

}

/* LEFT CONTENT */
.hps-hero-content {
  padding: 80px;
  color: #000;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  max-width: 750px;
  margin: 0 auto;
  text-align: left;

  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically centered */
  align-items: flex-start;
  /* ✅ keeps heading/para/button aligned left */
  height: 100%;
}

.hps-hero-content.show {
  opacity: 1;
  transform: scale(1);
  /* Fade + zoom effect */
}

.hps-hero-content h1 {
  font-size: clamp(55px, 8vw, 100px);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 20px;
  width: 100%;
  color: #000;
  text-align: left;
}

.hps-hero-content p {
  font-size: 18px;
  line-height: 1.5;
  color: #000;
  font-weight: 300;
}

.distributor-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  border-radius: 50px;
  letter-spacing: 2px;

  /* IMPORTANT: remove transition all */
  /* no transform here */
}

.hps-text {
  transition: letter-spacing 0.4s ease;
  /* only text is animated */
}

.distributor-open:hover .hps-text {
  letter-spacing: 3px;
  color: #fff;
  /* stretches only the text */
}

.hps-arrow-icon:hover {

  color: #fff;
  /* stretches only the text */
}

.hps-arrow-icon {
  border: 2px solid #fff;
  padding: 4px 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* RIGHT IMAGE */
.hps-hero-image {
  width: 100%;
  height: auto;
  opacity: 0;
  /* Hidden initially */
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  /* Sudden appear (no animation motion) */
}

.hps-hero-image.show {
  opacity: 1;
}

.hps-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* RESPONSIVE */
@media(max-width: 900px) {
  .hps-hero-container {
    grid-template-columns: 1fr;
  }

  .hps-hero-content {
    padding: 40px 20px;
  }

  .hps-hero-image {
    height: 55vh;
  }

  .hyde-gallery-item img {
    width: 100%;
    height: 400px;

  }
}

@media(max-width: 1200px) {


  .hyde-gallery-item img {
    width: 100%;
    height: 350px;

  }
}

@media(max-width: 950px) {


  .hyde-gallery-item img {
    width: 100%;
    height: 300px;

  }

  @media (max-width: 1499px) {
    .hyde-gallery-wrapper {
      position: relative;
      z-index: 2;
      max-width: 1900px;
      margin: 0 auto;
      padding: 0 20px;
    }
  }
}

@media(max-width: 765px) {


  .hyde-gallery-item img {
    width: 100%;
    height: 380px;

  }

  .hyde-gallery-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1900px;
    margin: 0 auto;
    padding: 0 0px;
  }


}

@media(max-width: 374px) {


  .hyde-gallery-item img {
    width: 100%;
    height: 250px;

  }

  .hyde-gallery-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1900px;
    margin: 0 auto;
    padding: 0 0px;
  }


}



/* General */
.hps-gallery-section {
  padding: 80px 20px;
  background: #fff;
  text-align: center;
}

.hps-heading-wrap {
  margin-bottom: 40px;
}

.hps-gallery-title {
  font-size: 40px;
  font-weight: 600;
  color: #000;
  margin-bottom: 15px;
}

.hps-gallery-subtitle {
  font-size: 18px;
  color: #555;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Slider */
.hps-gallery-slider {
  position: relative;
}

.hps-gallery-item {
  overflow: hidden;
  border-radius: 10px;
}

.hps-gallery-item img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  transition: transform 2.5s ease;
}

.hps-gallery-item:hover img {
  transform: scale(1.1);
  /* Zoom effect */
}

/* Book button */
.distributor-open-wrap {
  margin-top: 50px;
}

.distributor-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  border-radius: 50px;
  font-size: 15px;
  letter-spacing: 2px;
  /* No transform here — button will not stretch */
}

/* Text stretch animation */
.hps-text {
  transition: letter-spacing 0.4s ease;
  /* smooth text expand */
}

.distributor-open:hover .hps-text {
  letter-spacing: 3px;
  /* text stretches */
}

.hps-arrow-icon {
  border: none;

  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 26px;
  display: flex;
  justify-content: center;
  align-items: center;

  transition: all 0.4s ease;
}

.distributor-open:hover .hps-arrow-icon {
  transform: rotate(45deg);
  color: #fff;
  /* rotates arrow */
}

.hps-arrow-circle {
  border: 2px solid #fff;
  padding: 5px 8px;
  border-radius: 50%;
  font-size: 16px;
}

/* Responsive */
@media (max-width: 768px) {
  .hps-gallery-item img {
    height: 230px;
  }
}

/* Section Container */
.hyde-heading-section {
  padding: 100px 20px 60px;

  text-align: center;
}

/* Wrapper for content */
.hyde-heading-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* Title */
.hyde-main-title {
  font-size: 63px;
  font-weight: 400;
  color: #fff;

  line-height: 1.1;
  margin-bottom: 20px;

}

/* Paragraph */
.hyde-main-desc {
  font-size: 18px;
  font-weight: 300;
  color: #fff;
  font-family: "Poppins", sans-serif;
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 50px
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .hyde-main-title {
    font-size: 45px;
  }

  .hyde-main-desc {
    font-size: 16px;
  }

  .container1 {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto 50px;
    text-align: center;
  }
}

@media (max-width: 2100px) {


  .container1 {
    position: relative;
    z-index: 1;
    max-width: 1800px;
    width: 100%;
    margin: 0 auto 50px;
    text-align: center;
  }



}

@media (min-width: 3738px) and (max-width: 4200px) {

  .hps-hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 10vh;

  }

  .hps-hero-image img {
    width: 100%;
    height: 750px;
    object-fit: cover;
  }

}

@media (min-width: 900px) and (max-width: 3738px) {

  .hps-hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 10vh;

  }
}

.whatsapp-left-bottom {
  position: fixed;
  left: 15px;
  bottom: 40px;
  z-index: 9999;
}

/* ===== WhatsApp Button ===== */
.whatsapp-left-bottom a {


  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

}

/* ===== WhatsApp Icon ===== */
.whatsapp-left-bottom img {
  width: 72px;
  height: 72px;
}

/* ===== Hover Effect ===== */
.whatsapp-left-bottom a:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

/* ===== Mobile Responsive ===== */
@media (max-width: 768px) {


  .whatsapp-left-bottom img {
    width: 72px;
    height: 72px;
  }
}

.scroll-top-btn {
  position: fixed;
  right: 20px;
  bottom: 45px;
  width: 52px;
  height: 52px;
  background-color: #007c9e;
  /* Sky Blue */
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.3s ease;
  z-index: 9999;
}

/* ===== Show on Scroll ===== */
.scroll-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ===== Hover Effect ===== */
.scroll-top-btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

/* ===== Mobile Responsive ===== */
@media (max-width: 768px) {
  .scroll-top-btn {
    width: 56px;
    height: 56px;
    font-size: 22px;
    right: 15px;
    bottom: 45px;
  }
}