:root {
  --fluid-body: clamp(1rem, 0.96rem + 0.21vw, 1.1rem);
  --fluid-h6: clamp(1rem, 0.97rem + 0.16vw, 1.1rem);
  --fluid-h5: clamp(1.1rem, 1.06rem + 0.18vw, 1.2rem);
  --fluid-h4: clamp(1.25rem, 1.19rem + 0.32vw, 1.45rem);
  --fluid-h3: clamp(1.5rem, 1.43rem + 0.36vw, 1.75rem);
  --fluid-h2: clamp(1.75rem, 1.67rem + 0.45vw, 2rem);
  --fluid-h1: clamp(2rem, 1.85rem + 0.95vw, 2.6rem);
}

/* Header css */
/* Mobile first */
.samui-explorer-logo a {
  display: block;
  line-height: 0;
}

.samui-explorer-logo svg {
  width: 50px;
  height: 50px;
  display: block;
}

@media (min-width: 600px) {
  .samui-explorer-logo svg {
    width: 60px;
    height: 60px;
  }
}

@media (min-width: 1024px) {
  .samui-explorer-logo svg {
    width: 90px;
    height: 90px;
  }
}

/* ----------------------------------
   HOME HERO SECTION
---------------------------------- */

.home-hero-section {
    position:relative;
    height:80vh;
}

@media (min-width:1280px) {

.home-hero-section{
    height:auto;
    aspect-ratio:16/9;
}
}

.home-hero-section .l-section-h,
.home-hero-section .g-cols,
.home-hero-section .vc_column_container,
.home-hero-section .vc_column-inner,
.home-hero-section .wpb_wrapper {
    height:100%;
}

.home-hero-inner-wrapper {
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.home-hero-section::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:
        radial-gradient(
        ellipse at center,
        rgba(0,0,0,0) 40%,
        rgba(0,0,0,0.55) 100%
        ),
        linear-gradient(
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.35)
        );
}

.home-hero-inner-wrapper {
    position:relative;
    z-index:2;
    width: 100%;
}

@media (min-width:1280px) {
    .home-hero-inner-wrapper {
        width: 70%;
    }
}

.home-hero-button-wrapper {
  display: flex;
  flex-direction: column;
}

@media (min-width:1280px) {
    .home-hero-button-wrapper {
      display: flex;
      flex-direction: row;
  }
}

/* ==========================================================================
   MOBILE FIRST
========================================================================== */

.home-hero-title {
  color: var(--color-white);
  width: 100%;
  font-size: var(--fluid-h1);
  font-weight: 800;
  line-height: 1.1;
}

.home-hero-intro-tagline {
  color: var(--color-white);
  width: 100%;
  font-size: var(--fluid-h6);
  font-weight: 300;
  line-height: 1.26;
  margin-bottom: 0;
}

/* ==========================================================================
   TABLET + DESKTOP
========================================================================== */

@media (min-width: 601px) {

  .home-hero-title,
  .home-hero-intro-tagline {
    width: 80%;
  }

}


.best-selling-tours-section {
  background: var(--color-white);
}

/* ==========================================================================
   MOBILE FIRST
========================================================================== */

.best-selling-tours-section .sub-title h2 {
  color: var(--color-raisin-black);
  width: 100%;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fluid-h2);
  font-weight: 800;
  line-height: 1.16;
  margin-bottom: 0.8rem;
}

.best-selling-tours-section .sub-tagline {
  color: var(--color-raisin-black);
  width: 100%;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fluid-h5);
  font-weight: 300;
  line-height: 1.26;
  margin-bottom: 0;
}

/* ==========================================================================
   TABLET + DESKTOP
========================================================================== */

@media (min-width: 601px) {

  .best-selling-tours-section .sub-title h2,
  .best-selling-tours-section .sub-tagline {
    width: 70%;
  }

}


.main-categories-section {
  background: var(--color-giants-orange);
}

/* ==========================================================================
   MOBILE FIRST
========================================================================== */

.main-categories-section .sub-title h2 {
  color: var(--color-white);
  width: 100%;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fluid-h2);
  font-weight: 800;
  line-height: 1.16;
  margin-bottom: 0.8rem;
}

.main-categories-section .sub-tagline {
  color: var(--color-white);
  width: 100%;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fluid-h5);
  font-weight: 300;
  line-height: 1.26;
  margin-bottom: 0;
}

/* ==========================================================================
   TABLET + DESKTOP
========================================================================== */

@media (min-width: 601px) {

  .main-categories-section .sub-title h2,
  .main-categories-section .sub-tagline {
    width: 70%;
  }

}

/* Footer CSS */
.main-footer-section {
    background: #231f20;
}

.main-footer-inner-wrapper .vc_column-inner > .wpb_wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}


@media (min-width: 1024px) {
    .main-footer-inner-wrapper .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4rem;
    }
}

.main-footer-title {
    color: #FFFFFF;
    font-size: var(--fluid-h5);
    font-weight: 800;
}

.footer-content {
    color: #FFFFFF;
    font-weight: 400;
    font-size: var(--fluid-body);
}

.recent-footer-posts ul li a {
  color: #fda527;
}

/* hover color */
.recent-footer-posts ul li a:hover {
  color: #ffffff;
}

/* post date color */
.recent-footer-posts .post-date {
  color: #ffffff;
}

.tat-license-number {
  color: var(--color-orange-peel);
  font-size: calc(var(--fluid-body) * 0.85);
}

.bottom-footer-section {
  background: #FFFFFF;
  padding-block: 0.5rem;
  color: var(--color-raisin-black);
}

.bottom-footer-text {
  color: var(--color-raisin-black);
  text-align: center;
  font-weight: 600;
  font-size: calc(var(--fluid-body) * 0.85);
}

.bottom-footer-text a {
  color: var(--color-giants-orange);
}

.bottom-footer-text a:hover {
  color: var(--color-orange-peel);
}

/* new tour card css */
.home-tour-grid .tour-card-item {
  border-radius: 0.625rem;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.home-tour-grid .tour-card-item:hover {
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}

.home-tour-grid .inner-tour-media-card-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.home-tour-grid .tour-card-media {
  position: absolute;
  inset: 0;
}

.home-tour-grid .tour-card-media a {
  display: block;
  width: 100%;
  height: 100%;
}

.home-tour-grid .tour-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.home-tour-grid .tour-card-item:hover .tour-card-media img {
  transform: scale(1.06);
}

.home-tour-grid .inner-tour-card-wrapper {
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.home-tour-grid .tour-card-title {
  font-size: var(--fluid-h6);
  color: #231f20;
  font-weight: 800;
  margin-bottom: auto;
}

.home-tour-grid .tour-card-price {
  font-weight: 600;
  color: #231f20;
}

.home-tour-grid .tour-card-cta {
  margin-top: 0.5rem;
}


h4.tripadvisor-title,
h4.our-reviews-title {
  font-size: var(--fluid-h5);
  color: #231f20;
  font-weight: 800;
  text-align: center;
}