@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Istok+Web:ital,wght@0,400;0,700;1,400;1,700&family=Kaisei+Decol&display=swap");

@font-face {
  font-family: "ISOCPEUR";
  src: url("../fonts/ISOCPEUR.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Georgia";
  src: url("../fonts/georgia.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NunitoSans";
  src: url("../fonts/NunitoSans.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "FreightBigLight";
  src: url("../fonts/FreightBigProMedium-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "FreightBigLightSemiBold";
  src: url("../fonts/FreightBigProSemibold-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Carattere";
  src: url("../fonts/Carattere-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.font-carattere {
  font-family: "NunitoSans" !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "FreightBigLight" !important;
  word-spacing: 4px;
  letter-spacing: 1px;
}

p {
  font-family: "Georgia" !important;
  /* font-size: 16px; */
}

.bg-light-grey {
  background-color: #f4f4f4 !important;
}

:root {
  --black--1: #121212;
  --text--gray--1: #b5b5b5;
  --white: #fff;
  --main--orange: #faba40;
  --main--orange--dark: #614819;
  --main--light--yellow-darker-1: #fff7e8;
}

body {
  background-color: var(--black--1);
}

html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.bg-yellow {
  background-color: #c19d2fbb;
}

.bg-yellow-light {
  background-color: var(--main--light--yellow-darker-1) !important;
}

.text-gold {
  color: var(--main--orange) !important;
}

.text-brown {
  color: var(--main--orange--dark) !important;
}

.cursor {
  cursor: pointer;
}

/* hero section */
.hero-section {
  position: relative;
  height: 100vh;
  color: white;
  overflow: hidden;
  background-color: black;
  display: flex;
  align-items: center;
}

.hero-section .bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1s ease-in-out;
  z-index: -1;
  opacity: 0;
}

.hero-section .bg-layer.active {
  opacity: 1;
}

.about-section {
  position: relative;
  background-image: url("../assets/aboutUs/1.jpg");
  height: 100vh;
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  align-items: center;
  /* margin-top: -35px; */
}

.about1-section {
  position: relative;
  background-image: linear-gradient(#82590046, #12121257),
    url("../assets/aboutUs/2.jpg");
  height: 90vh;
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  align-items: center;
  /* margin-top: -35px; */
}

.hero-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.402) 0%,
    rgba(3, 3, 3, 0.154) 60%
  );
  /* Optional: dark overlay for better text readability */
  z-index: 1;
}

/* .hero-text {
  font-size: 6rem;
  padding: 0 4rem;
  color: var(--white);
  font-family: "Cinzel", sans-serif;
  line-height: 1.4;
  z-index: 2;
  position: relative;
} */

.description-section {
  padding: 2rem 2rem 3rem 2rem;
  text-align: center;
  background: #fff5e2;
}

@media (max-width: 992px) {
  .description-section {
    padding: 2rem 0.1rem 3rem 0.1rem;
  }
}

.description-section .home-title-1 {
  /* font-size: 3.2rem; */
  color: #ffffff;
  margin-bottom: 1rem;
}

.description-section .home-title-2 {
  font-size: 3.8rem;
  color: var(--white);
  margin: 0;
}

.description-section .home-title-3 {
  color: #ffffff;
}

.why-travel-section {
  display: grid;
  grid-template-columns: 2.3fr 1fr;
  background-color: var(--black--1);
  overflow: hidden;
  /* padding: 2rem 1rem 3rem; */
  padding: 100px 100px;
}

@media (max-width: 992px) {
  .why-travel-section {
    grid-template-columns: 1fr 0fr;
    padding: 60px 60px;
  }
}

.why-travel-section .image-div {
  background-image: url("../assets/homepage/slmap.png");
  background-size: contain;
  background-repeat: no-repeat;
  transition: 0.5s;
  margin-left: 60px;
}

.why-travel-section .image-div:hover {
  transform: scale(1.1);
  transition: 0.5s;
}

.why-travel-section .detail-container .t1 {
  color: var(--main--orange);
}

.why-travel-section .detail-container p {
  font-size: 1.2rem;
  color: var(--white);
  margin-top: 3rem;
}

/* top - 10 - places section */
.top-places {
  background-color: #ffffff;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.top-places h1 {
  font-family: "FreightBigLight", serif;
  text-align: center;
  padding-bottom: 2rem;
}

.top-10-place {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 1rem 2rem;
  gap: 0.5rem;
}

.top-10-place .place {
  height: 9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.place::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform 0.5s ease;
  z-index: 0;
}

.top-10-place span {
  color: var(--white);
  font-family: "FreightBigLight", serif;
  z-index: 2;
  font-size: 2rem;
}

@media (max-width: 992px) {
  .top-10-place span {
    font-size: 2rem;
  }
}

.carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.img-full-height {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  transition: 0.5s;
}

.ttdimage-right {
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
}

.img-full-height:hover {
  transform: scale(1.2);
  transition: 0.4s;
}

.card1:hover {
  transform: scale(1.02);
  transition: 0.5s;
  box-shadow: rgba(117, 88, 0, 0.149) 0px 3px 10px;
}

.card1:hover button {
  background-color: var(--black--1);
  color: white;
  transition: 0.5s;
}

.card2:hover {
  transform: scale(1.01) !important;
  transition: 0.5s !important;
  box-shadow: none;
}

.card.card1 img {
  object-fit: cover;
  height: 250px;
}

.card2 {
  transition: 0.5s;
}

.text-sm {
  font-size: 14px !important;
}
.custom-item {
  transition: transform 0.4s ease;
  transform: translateX(0px) !important;
}
.custom-item:hover {
  text-decoration: underline var(--main--orange) !important;
  cursor: pointer !important;
  transition: transform 0.4s ease;
  transform: translateX(10px) !important;
  /* margin-left: 8px !important; */
}

.card1 {
  transition: 0.4s;
}

.text-justify {
  text-align: justify;
}

.ttd-top-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  /* background-position-x: -100px; */
  /* width: 100%; */
  /* margin-top: -35px; */
}
.btn-orange {
  background-color: var(--main--orange) !important;
}

.btn-orange:hover {
  background-color: #ffcc6c !important;
}

.ttd-title {
  /* font-family: "Kaisei Decol", serif; */
  /* font-size: 5rem; */
  color: #ff9100;
  padding-top: 50px;
  padding-bottom: 50px;
}

.ttd-title1 {
  /* font-family: "Kaisei Decol", serif; */
  /* font-size: 3rem; */
  color: var(--main--orange);
  margin: 0;
}

.truncate {
  overflow: hidden;
  padding: 0 15px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ttd-section {
  position: relative;
  /* background-image: linear-gradient(
      rgba(255, 255, 255, 0.846),
      rgb(255, 255, 255)
    ),
    url("../assets/thingstodo/ttdbg.png"); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* .ttdbg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
} */

.ttd-view {
  height: 100vh;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.text-shadow {
  text-shadow: rgb(13, 13, 13) 0px 2px 10px;
}

.hero-text-shadow {
  text-shadow: rgba(13, 13, 13, 0.437) 0px 2px 6px;
}

.hero-text-shadow-white {
  text-shadow: rgb(255, 255, 255) 0px 0px 10px;
}

/* How to book with Us CSS */

.how-to-book-section {
  background-color: #fff5e2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4rem;
  padding-bottom: 6rem;
}

.how-to-book-section p {
  color: #434343;
  text-align: center;
  line-height: 1.5;
  font-family: "Nunito Sans", sans-serif;
  padding-bottom: 2rem;
}

.how-to-book-section .step-item-card {
  height: 100%;
  padding: 3rem;
  padding-top: 2rem;
  background-color: #000;
  margin-bottom: 1rem;
  transition: all 0.5s ease-in;
  border-radius: 0.5rem 0.5rem 2rem 2rem;
}

.how-to-book-section .step-item-card:hover {
  transform: translate(0, -6%);
  border-radius: 2rem 2rem 0.5rem 0.5rem;
}

.how-to-book-section .step-item-card .step-number {
  font-family: "FreightBigLight", sans-serif;
  font-size: 5rem;
  color: var(--main--orange);
  margin-bottom: 60px;
  padding-left: 0;
  line-height: 0.58;
}

.how-to-book-section .step-content {
  padding-left: 1.5rem;
}

.how-to-book-section .step-content-title {
  font-size: 2.3rem;
  line-height: 0.97;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
  color: var(--white);
  font-family: "FreightBigLight", sans-serif;
}
.how-to-book-section .step-content-text {
  line-height: 1.57;
  color: #c4bfbf;
  font-family: "Georgia";
}
/* Swiper Highlight Section  */

.swiper {
  width: 100%;
  height: 300px;
}

.swiper-slide {
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  /* font-size: 24px; */
  border-radius: 10px;
  width: 600px;
}

.hightlight-title {
  /* font-size: 3.6rem; */
  font-family: "Cinzel", sans-serif;
  color: var(--main--orange);
  text-align: center;
  padding: 3rem;
}

/* footer Section CSS */
.footer-section {
  background-image: linear-gradient(rgba(0, 0, 0, 0.75)),
    url("../assets/faq_page/homebg2.jpg");
  object-fit: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.footer-title {
  font-size: 3.6rem;
  font-family: "Cinzel", sans-serif;
  color: var(--white);
  text-align: center;
  padding: 3rem;
}

.footer-icon {
  border: 2px solid var(--main--orange);
  border-radius: 100%;
  padding: 1.5rem;
  font-size: 3.2rem;
  color: var(--white);
}

.footer-sub-title {
  font-family: "Inter", sans-serif;
  font-size: 1.6rem;
  color: var(--white);
  padding: 0 5rem;
}

.footer-sub-content {
  font-family: "Inter", sans-serif;
  font-size: 1.4rem;
  color: var(--white);
  padding: 0rem 5rem;
}

.copyrights {
  font-size: 1.2rem;
  color: #eee;
  padding: 3rem;
}

@media (max-width: 768px) {
  .des {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .des-img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}

@media (min-width: 768px) {
  .margin-left {
    margin-left: -350px;
  }
  .margin-right {
    margin-right: -350px;
  }
  .des {
    border-radius: 10px;
  }
  .des-img {
    border-radius: 10px;
  }
}

@media (min-width: 992px) {
  .margin-left {
    margin-left: -300px;
  }
  .margin-right {
    margin-right: -480px;
  }
}

@media (min-width: 1020px) {
  .margin-left {
    margin-left: -320px;
  }
  .margin-right {
    margin-right: -420px;
  }
}

@media (min-width: 1200px) {
  .margin-left {
    margin-left: -410px;
  }
  .margin-right {
    margin-right: -510px;
  }
}

@media (min-width: 1400px) {
  .margin-left {
    margin-left: -500px;
  }
  .margin-right {
    margin-right: -680px;
  }
}

.expand-text {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease;
}

.expand-text.show {
  max-height: 550px;
}

.expand-text1 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease;
}

.expand-text1.show {
  max-height: 550px;
}

.ds-img-div {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* width: 100%; */
}

.ttd-background-image {
  /* background-image: url("../assets/thingstodo/bg.jpg"); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 60vh;
  /* margin-top: -35px; */
  z-index: 5;
  /* width: 100vw; */
}

.ds-background-image {
  /* background-image: url("../assets/"); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 50vh;
  /* margin-top: -35px; */
  z-index: 5;
  /* width: 100vw; */
}

s #google_translate_element {
  display: none;
  z-index: -10; /* Completely hide the widget container */
}

.ss-background-image {
  background-image: linear-gradient(#ffdf9955, #1212122f),
    url("../assets/homepage/luxury.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  height: 90vh;
  /* width: 100vw; */
}

.me-section {
  position: relative;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.934),
      rgb(255, 255, 255)
    ),
    url("../assets/homepage/pytbg.jpg") !important;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  /* margin-top: -35px; */
  animation: shrink 30s infinite alternate;
}

.form-select:focus {
  background-color: #ffffff;
  box-shadow: none !important;
  border: 1px solid #b3a393 !important;
}

.circle-bg {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: rgba(186, 124, 0, 0.131); /* light dark background */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 3px solid var(--main--orange);
}

.circle-bg:hover {
  background-color: var(--main--orange);
  transform: scale(1.1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
