@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap");
body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;

  font-style: normal;
}
.heading {
  font-family: "Tinos", serif;
  font-weight: 400;
  font-style: normal;
}
:root {
  --bs-primary-color: #1c4e85;
}

.blur {
  filter: blur(-100px);
}
.fs-c {
  font-size: 3rem !important;
}
.fs-7 {
  font-size: 0.8rem !important;
}
.fs-8 {
  font-size: 0.6rem !important;
}
.fs-9 {
  font-size: 0.4rem !important;
}
.border-primary {
  border-color: var(--bs-primary-color) !important;
}
.bg-primary {
  background-color: var(--bs-primary-color) !important;
}
.text-custom {
  color: var(--bs-primary-color) !important;
}
.btn-primary {
  background-color: var(--bs-primary-color) !important;
}
.more-text {
  display: none;
}
.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: #fff;
}

.highlightbg {
  background-image: url(assets/background.png);
  object-fit: cover;
  background-size: cover;
}

ul.custom-list {
  padding-left: 0;
}

ul.custom-list li {
  list-style: none;
  position: relative;
  padding-left: 28px; /* space for arrow */
}

ul.custom-list li::before {
  content: "";
  background-image: url("assets/arrow.png");
  background-repeat: no-repeat;
  background-size: 26px 26px; /* 🔹 Control size here */
  width: 26px;
  height: 26px;
  position: absolute;
  left: -20px; /* 🔹 horizontal alignment */
  top: 50%; /* 🔹 vertical alignment */
  transform: translateY(-50%);
  filter: invert(1); /* Inverts color (optional) */
}
.translate-middle {
  transform: translate(-10%, -4%) !important;
}
.w-amenities {
  width: 90% !important;
  max-height: 800px !important;
}

.linear-gradient {
  min-height: 300px;
  background: linear-gradient(
    to top,
    var(--bs-primary-color) 65%,
    transparent 35%
  );
}

.linear-gradient1 {
  min-height: 300px;
  background: linear-gradient(
    to bottom,
    var(--bs-primary-color) 65%,
    transparent 35%
  );
}
.right-btn {
  background-color: var(--bs-primary-color) !important;
}
@media screen and (max-width: 767px) {
  .float .fa-whatsapp {
    font-size: 27px !important;
    bottom: 20px;
  }
}

.float .fa-whatsapp {
  bottom: 30px;
  left: 20px;
  font-size: 35px !important;
  background: #25d366;
  z-index: 4;
}

/* Apply ratio only on large screens */
@media (min-width: 992px) {
  .custom-ratio-lg {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 ratio (3/4 = 0.75) */
  }

  .custom-ratio-lg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}