.main-header,
.dark-bg {
  background: #117180;
}
@font-face {
  font-family: "icomoon";
  src: url("fonts/icomoon.eot?db9qhr");
  src: url("fonts/icomoon.eot?db9qhr#iefix") format("embedded-opentype"),
    url("fonts/icomoon.ttf?db9qhr") format("truetype"),
    url("fonts/icomoon.woff?db9qhr") format("woff"),
    url("fonts/icomoon.svg?db9qhr#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-AC:before {
  content: "\e900";
}
.icon-Cycling-Track:before {
  content: "\e901";
}
.icon-FirePlace:before {
  content: "\e902";
}
.icon-Fridge:before {
  content: "\e903";
}
.icon-Garden:before {
  content: "\e904";
}
.icon-GreenGym:before {
  content: "\e905";
}
.icon-HotWater:before {
  content: "\e906";
}
.icon-kattle:before {
  content: "\e907";
}
.icon-KingBed:before {
  content: "\e908";
}
.icon-Library:before {
  content: "\e909";
}
.icon-Party-Lawn:before {
  content: "\e90a";
}
.icon-Restro:before {
  content: "\e90b";
}
.icon-RiverDeck:before {
  content: "\e90c";
}
.icon-Selfie:before {
  content: "\e90d";
}
.icon-Sofa:before {
  content: "\e90e";
}
.icon-Swiming-pool:before {
  content: "\e90f";
}
.icon-themeEvent:before {
  content: "\e910";
}

.dark-bg {
  border-top: 1px #2190a1 solid;
  color: #fff;
  padding-top: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  line-height: 1.25;
}

.color-1 {
  color: #117180;
}

.navbar-toggler {
  border: 0;
}

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

.navbar-brand {
  position: absolute;
  background: black;
  top: 0;
  left: 50%;
  border-radius: 0 0 0.5em 0.5em;
  padding: 10px 15px;
  z-index: 99;
  margin-left: -65px;
}

.navbar-brand img {
  max-width: 100px;
}

@media (min-width: 992px) {
  .navbar-brand {
    left: 0;
    margin-left: 0;
  }

  .top-nav {
    margin-left: 140px;
  }
}

@media (min-width: 1200px) {
  .navbar-brand {
    padding: 15px 20px;
  }

  .navbar-brand img {
    max-width: 135px;
  }

  .top-nav {
    margin-left: 175px;
  }
}

.navbar a {
  color: white;
}

.navbar-nav .active a,
.navbar-nav .active a:hover,
.nav-link:focus,
.nav-link:hover {
  color: #ffd855;
}

.partnership .nav-link {
  color: #ffd855;
  margin: 0.25em;
  padding: 0.5em 0.75em;
  border-radius: 0.75em;
  font-weight: bold;
}
@media (min-width: 768px) {
  .partnership .nav-link {
    margin: 1em 0.25em 0;
    border-radius: 1.5em 1.5em 0 0;
  }
}
@media (min-width: 1200px) {
  .partnership .nav-link {
    margin: 1em 1em 0;
    padding: 0.75em 1.75em;
  }
}

.partnership .nav-link.active,
.partnership .nav-link:hover {
  color: #117180;
  background: #fff;
}

.form-selection {
  background: #fff;
  position: sticky;
}

.form-selection > div {
  border: 1px #ccc solid;
  border-radius: 45px;
}

.btn {
  border-radius: 3em;
  padding-left: 1.75em;
  padding-right: 1.75em;
  font-weight: bold;
}

.btn-primary {
  background: #ffd855;
  color: black;
  border: 0;
}

.btn-primary:hover {
  color: #fff;
  background: #117180;
}

.btn-secondary {
  background: #117180;
  color: #fff;
  border: 0;
}

.btn-secondary:hover {
  background: #000;
}

.btn-outline-primary {
  color: #117180;
  border-color: #117180;
}
.btn.btn-outline-primary {
  padding-left: 0.75em;
  padding-right: 0.75em;
}
.btn-outline-primary:focus,
.btn-outline-primary:hover {
  background: #117180;
  color: white;
}
.btn-login {
  background: #000;
  color: #fff;
  border: 0;
}
.btn-login:focus,
.btn-login:hover {
  background: #ffd855;
  color: #000;
}
.main-content {
  min-height: 80vh;
}

.carousel {
  max-height: 75vh;
  background: #117180;
}

.carousel-inner,
.carousel-item {
  max-height: 75vh;
}

.carousel-item::after,
.owl-item::after {
  content: "";
  width: 100%;
  height: 50vh;
  position: absolute;
  bottom: 0;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgb(0 0 0 / 60%)
  );
  z-index: 1;
}

.carousel-caption h1 {
  font-size: 1.75em;
}

.badge {
  border-radius: 0;
  font-size: 12px;
}

.explore-link,
.explore-link:hover,
.carousel-caption .bi-geo-alt,
.carousel-caption .bi-geo-alt {
  color: #ffd855;
}

.explore-link:hover {
  text-decoration: none;
}

.form-check-input:checked {
  background-color: #25a249;
  border-color: #25a249;
}

.sub-header .searchbar {
  background: #fffcf0;
  padding: 1.25em;
}

.navbar-toggler-icon {
  background-image: url(../imgs/toggle-btn.svg);
}

@media (max-width: 767px) {
  .landing > div > .input-group {
    display: block;
    margin: auto;
    background: #fffcf0;
    border: 1px #ffd855 dashed;
    border-radius: 1em;
  }

  .sub-header > div > div > .input-group {
    display: block;
    margin: auto;
  }

  .searchbar .input-group > .form-control {
    width: 100%;
    border-radius: 1.25em;
    margin-bottom: 0.5em;
    box-sizing: border-box;
  }

  .searchbar
    .input-group:not(.has-validation)
    > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(
      .form-floating
    ),
  .searchbar
    .input-group
    > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
      .valid-feedback
    ):not(.invalid-tooltip):not(.invalid-feedback) {
    border-radius: 1.25em;
  }

  .checkin {
    width: 48%;
    display: inline-block;
  }

  .checkout {
    width: 48%;
    display: inline-block;
    float: right;
  }

  .checkin,
  .checkout {
    width: 48%;
    margin-bottom: 1em;
  }

  .guests {
    width: 100%;
    margin-bottom: 1em;
  }
}

.input-group .input-group-icon,
.input-group .input-group-icon,
.input-group .input-group-icon {
  position: relative;
}

.carousel-caption {
  text-align: left;
  z-index: 3;
  max-width: 915px;
  margin: auto;
}

.gallary-top {
  background: #117180;
  padding-bottom: 1em;
}

.input-group-icon {
  position: relative;
}

.searchbar .input-group-icon i,
.input-group-icon i {
  position: absolute;
  top: auto;
  left: 15px;
  bottom: 0%;
  transform: translateY(-50%);
  color: gray;
}

.input-group-icon i {
  top: 45%;
}

.searchbar .input-group-icon input {
  padding: 0.75em;
  padding-left: 2.5em;
}

.input-group-icon input {
  padding-left: 2.5em;
}

/* Style the datepicker input */
#datepicker {
  border: 2px solid #007bff;
  border-radius: 5px;
  font-size: 16px;
  padding: 10px;
  text-align: center;
  transition: 0.3s;
}

#datepicker:focus {
  border-color: #0056b3;
  box-shadow: 0 0 8px rgba(0, 91, 187, 0.5);
}

/* Style the datepicker popup */
.datepicker-dropdown {
  background: white;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Style the header (Month & Year) */
.datepicker table tr th {
  color: #117180;
  font-size: 16px;
  padding: 10px;
}

/* Style the calendar days */
.datepicker table tr td {
  padding: 8px;
  text-align: center;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
  background: #ffd855 !important;
  color: black !important;
  border-radius: 5px;
}

/* Hover effect on dates */
.datepicker table tr td:hover {
  background: #e0f0ff;
  cursor: pointer;
  border-radius: 5px;
}

@media (min-width: 768px) {
  .carousel-caption h1 {
    font-size: 2.5em;
  }
  .main-carousel .carousel-caption {
    bottom: 135px;
  }

  .landing .input-group-icon > label {
    color: #fff;
  }

  .searchbar.overlay {
    position: absolute;
    width: 100%;
    z-index: 3;
    margin-top: -125px;
  }

  .searchbar > div {
    max-width: 767px;
  }

  .input-group-icon > label {
    position: absolute;
    top: -27px;
    left: 15px;
  }

  .input-group .input-group-icon,
  .input-group .input-group-icon,
  .input-group .input-group-icon {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
  }

  .input-group .input-group-icon:first-child > .form-control {
    border-radius: 3em 0 0 3em;
  }

  .input-group .input-group-icon:not(:first-child) > .form-control {
    border-radius: 0;
  }
}

.resort-img {
  position: relative;
  background: #117180;
  overflow: hidden;
}

.resort-img img {
  opacity: 0.85;
  width: 100%;
}

.resort-img:hover img {
  opacity: 1;
}

.resort-info {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgb(0 0 0 / 49%)
  );
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  width: 100%;
  padding: 0.75em 1.25em;
}

.resort-info .title {
  margin-bottom: 0;
}

.porperty-intro {
  width: 100%;
  padding: 1.5em;
  color: #fff;
}

.listing .list-item {
  box-shadow: 5px 10px 2px rgba(197, 197, 197, 0.25);
  background: #fff;
}

.buybox {
  position: fixed;
  bottom: 0;
  left: 0;
  border-radius: 0.75em 0.75em 0 0;
  border: dashed;
  background: #fffcf0;
  padding: 1em;
  border: 1px #ffd855 dashed;
  border-radius: 0.75em 0.75em 0 0;
  z-index: 100;
  box-shadow: 0 0 10px #000;
}

.buybox-mobile-btn {
  text-align: center;
  padding: 0.5em;
  margin: -1em -1em 0;
  font-size: 1.5em;
}

@media (min-width: 992px) {
  .carousel-caption h1 {
    font-size: 3em;
  }
  .searchbar > div {
    max-width: 915px;
  }

  .buybox {
    position: relative;
    border-radius: 0.75em;
    height: 100%;
    box-shadow: none;
  }
}
@media (min-width: 1400px) {
  .carousel-caption h1 {
    font-size: 3.25em;
  }
}
.rounded .form-control,
.rounded .form-control {
  border-radius: 3em;
}

.booking-section .form-control,
.booking-section .form-select {
  border-color: #ffd855;
}

.gray-bg {
  background: #f5f5f5;
}

.facilities {
  padding-left: 0;
}

.facilities li {
  list-style: none;
  width: 100%;
  display: inline-block;
  margin-bottom: 0.5em;
}
@media (min-width: 768px) {
  .facilities li {
    width: 49%;
  }
}
.resort-details {
  padding: 1em;
}

.list-gallary {
  position: relative;
  height: 100%;
}

.lg-main-img {
  object-fit: cover;
  max-width: 100%;
  height: 100%;
}

.lg-thumb {
  display: flex;
  position: absolute;
  width: 100%;
  padding: 0 0.25em 0.25em;
  bottom: 0;
}

.lg-thumb .thumb-img {
  margin: 0.15em;
  border: 1px #ccc solid;
  box-shadow: 0px 0px 20px #117180;
}

.lg-thumb img.active {
  border: 2px solid White;
  opacity: 0;
}

@media (min-width: 992px) {
  .lg-thumb {
    padding: 0 2em 1em;
  }

  .lg-thumb .thumb-img {
    margin: 0.25em;
  }
}

.booking-section > div > .row:not(:last-child) {
  border-bottom: 2px #e9e9e9 solid;
}

.select-room-label {
  background: #ffd855;
  margin-right: 1em;
  padding: 0 0.5em;
  position: relative;
}
.room-gallary {
  margin-bottom: 1em;
}
.room-gallary > img {
  border-radius: 1em 1em 0 0;
}

.rg-thumb {
  display: flex;
  width: 100%;
  margin-top: 1px;
}

.rg-thumb .thumb-img {
  margin: 0 1px 0 0;
}

.rg-thumb .thumb-img:last-child {
  margin: 0;
}

.rg-thumb .thumb-img:first-child img {
  border-radius: 0 0 0 1em;
}

.rg-thumb .thumb-img:last-child img {
  border-radius: 0 0 1em 0;
}

.modal-fullscreen {
  width: 90vw;
  max-width: 1320px;
  height: auto;
  margin: 5vh auto;
}

.modal-content .btn-close {
  position: absolute;
  right: 1em;
  top: 0.75em;
  z-index: 2;
}

.guests-dropdown {
  width: 100%;
}

.guests-dropdown label {
  position: relative;
  color: #000;
}

.guests-dropdown .input-group {
  justify-content: space-between;
}

.counter div,
.counter span {
  width: 30px;
  text-align: center;
}

.counter div {
  cursor: pointer;
  background: #f9f4e4;
  border-radius: 0.2em;
}

.gallary-thumb {
  display: flex;
  padding: 0 1em;
}

.btn.edit {
  padding: 0.5em;
  position: absolute;
  right: 1em;
  width: 40px;
}

.room-heading {
  color: #117180;
  font-size: 1.5em;
}

@media (min-width: 992px) {
  .gallary-top:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(
      to right,
      rgb(0 0 0 / 60%),
      rgba(0, 0, 0, 0)
    );
    z-index: 1;
  }

  .gallary-caption {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 2;
  }

  .porperty-intro {
    width: 49%;
    padding: 4em;
    color: #fff;
  }

  .porperty-intro h2 {
    margin-bottom: 6em;
  }

  .resort-details {
    padding: 2em;
  }

  .gallary-top {
    padding-bottom: 0;
  }

  .gallary-thumb {
    width: 50%;
    right: 1em;
    position: absolute;
    bottom: -2em;
  }
}

.mainImage {
  transition: opacity 0.3s ease-in-out;
  /* Smooth transition */
}

.tab-pane.membership {
  background: url(../imgs/20241018.webp);
}

.package-card {
  text-align: center;
  background: #fff;
  padding-bottom: 1.5em;
  margin-bottom: 1.5em;
}

.package-card .card-header {
  padding-bottom: 1.5em;
  margin-bottom: 1.5em;
}

.card-header h3 {
  background: #117180;
  color: #fff;
  text-transform: uppercase;
  font-weight: 800;
  padding: 0.75em;
  border-bottom: black 3px solid;
  border-radius: 0 0 3em 0;
}

.card-header h4 {
  font-weight: 800;
  font-size: 2.5em;
  text-transform: uppercase;
}

.card-header.silver {
  background: #117180;
}

.card-header.gold {
  background: #ffd855;
}

.card-header.platinum {
  background: #000;
}

/*Owl carousel*/
.owl-prev,
.owl-next {
  width: 15%;
  height: 100%;
  position: absolute;
  top: 0;
  display: block !important;
  border: 0px solid black;
}

.owl-next {
  right: 0;
}

.owl-prev span,
.owl-next span {
  color: #ffc107;
  font-size: 4em;
  display: inline-block;
}

.prod-page-gallary > div > img,
.owl-carousel .owl-item img {
  max-height: 50vh;
  overflow: hidden;
  object-fit: cover;
  opacity: 0.75;
}

.owl-carousel .owl-item {
  background: black;
}

.owl-carousel .owl-item .carousel-caption {
  opacity: 0;
}

.owl-carousel .owl-item.active img,
.owl-carousel .owl-item.active .carousel-caption {
  opacity: 1;
}

.details-modal .nav-link {
  color: #117180;
  font-weight: bold;
  margin: 0.25em;
}
@media (min-width: 992px) {
  .details-modal .nav-link {
    margin: 1em;
  }
  .owl-prev,
  .owl-next {
    width: 100px;
    height: 100%;
  }
}
.details-modal .nav-link.active {
  background: #117180;
  color: #fff;
  border-radius: 3em;
}

/*Footer CSS*/
.footer {
  background: #262626;
  color: #fff;
}

@font-face {
  font-family: Italianno-Regular;
  src: url(../fonts/Italianno-Regular.ttf);
}

.tagline {
  background: #117180;
  color: #fff;
  font-family: Italianno-Regular;
  font-size: 1.75em;
}

@media (min-width: 992px) {
  .tagline {
    font-size: 3em;
  }
}

.footer-bottom {
  border-top: 1px #525252 solid;
}

.footer .nav-link {
  padding: 0 1em;
  color: #fff;
}

.footer .icons {
  color: #00c7be;
}