:root {
    --white: #FFFFFF;
    --grey: #535353;
    --golden: #D99233;
    --brown: #48290F;
}

html {font-size: 1rem; scroll-behavior: smooth;}
::-webkit-scrollbar{width:0.438rem;background-color:var(--white)}
::-webkit-scrollbar-thumb{background-color:var(--brown); }
::selection{background:var(--grey);color:#fff;}
::-moz-selection{background:var(--grey);color:#fff;}

body {margin: 0; padding: 0; color: var(--grey); font-size: 1rem; font-family: "Poppins"; line-height:1.6; overflow-x: hidden; background-color: #FFFFF0;}
a {color: inherit; text-decoration: none; font-weight: 400;}
ul,li {list-style: none; margin: 0; padding: 0; font-size: 0.875rem; line-height: 1.6rem; font-weight: 400;}
p{font-size: 0.875rem; line-height: 1.6rem; font-weight: 400; color: var(--grey); font-family: "Poppins";}

h3 {
  color: var(--golden);
  font-family: "Playfair Display SC", serif;
  font-weight: 400;
  margin-bottom: 30px;
}

@media (min-width: 1200px) {
    .h3, h3 {
        font-size: 2rem;
    }
}

.logo-dark {
  display: none;
}

header.fixed .logo-light {
  display: none;
}

header.fixed .logo-dark {
  display: inline-block;
}

header.fixed {
  background: var(--white);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: 0.3s ease;
}
header.fixed ul li a {
  color: #000!important;
}

/* Default (on transparent header) */
.site-header .icon-search {
  color: white; /* path uses currentColor */
}

/* When fixed */
.site-header.fixed .icon-search {
  color: black;
}


/* Search */
.searchWrapper {width:100%;height:300px;position:fixed;top:0;left:0;background:#FFFFF0;  display:none;padding-top:100px;z-index:-1000;}
.searchWrapper .searchForm {width:100%;max-width:1000px;height:60px;border:0;opacity:0;transition:all .3s ease;}
.searchWrapper .searchSubmit {background: unset; border:0;display:flex;justify-content:center;align-items:center; position: absolute; right: 0; bottom: 5px; cursor: pointer;}
.searchWrapper .searchSubmit svg {width:100%;height:auto}
.searchWrapper .form-control {padding:10px;height:100%;font-size:1.5rem;font-weight:300;color:var(--golden);background:transparent;border:0;border-bottom:1px solid var(--golden)}
.searchWrapper .form-control:focus {outline:none;box-shadow:none}
.searchWrapper .form-control::-moz-placeholder{color:inherit;opacity:1}
.searchWrapper .form-control::-ms-input-placeholder{color:inherit;opacity:1}
.searchWrapper .form-control::-webkit-input-placeholder{color:inherit;opacity:1}

.searchWrapper.searchopen {box-shadow:0 40px 40px rgba(0,0,0,.5);transition:box-shadow .1s .2s ease;}
.searchWrapper.searchopen .searchForm {opacity:1;transition-delay:.4s;}

/* .closeSearch {
  position: absolute;
    top: 23px;
    right: 90px;
    background: transparent;
    border: unset;
    color: var(--grey);
    font-size: 35px;
    font-weight: 200;
} */

.icon-close {
   color: var(--grey);
    font-size: 38px;
    font-weight: 200;
    line-height: 55px;
}

.btn:focus, .btn:focus-visible, .btn:active, .icon-search:focus, .search-btn:focus {
  border: none;
  box-shadow: none;
  outline: none;
}

.btn.active, .btn.active:focus, .btn.active:focus-visible {
  border: unset;
}

.search-btn {
  background-color: unset;
  border: unset;
}

.nav-link {
    font-size: 1rem;
    padding: 10px 25px;
    letter-spacing: unset;
    font-weight: 300;
}

.about p {
  text-align: justify;
}

.about img {
  object-position: 75% 100%;
}

/* Search Btn & Wishlist Btn */
.search-btn, .heart-btn { padding: 0 5px;}

.heart-btn {
  display: inline-block;
  position: relative;
}



/* White hamburger (default) */
/* .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
} */

/* When menu is open (turn into X) */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' d='M6 6l18 18M24 6L6 24'/%3E%3C/svg%3E");
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

header.fixed .offcanvas-body ul li a {
   color: #FFFFFF!important;
}

#mobileMenu {
  z-index: 1050; /* higher than banner */
}

.site-header.search-open .nav-link,
.site-header.search-open .icon-search,
.site-header.search-open .navbar-toggler {
  color: var(--grey) !important; /* force black */
}

.site-header.search-open .logo-dark {
  display: inline;
}
.site-header.search-open .logo-light {
  display: none;
}

.homeBanner video {
    height: 100vh;
    object-fit: cover;
    overflow: hidden;
}

.homeBanner::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* don’t block clicks */
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, #040404 100%);
  z-index: 2;
}

.intro-bg {
  position: relative;
  z-index: 1; /* keep the content above */
  text-align: center;
}

.intro-bg::before {
  content: "About Safari Crafters";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6rem;
  line-height: 8rem;
  font-weight: 400;
  color: rgba(72, 41, 15, 0.03);
  white-space: nowrap;
  z-index: -1; /* push behind the text */
  pointer-events: none; /* no interference */
  font-family: "Playfair Display SC";
  /* opacity: 0;
  animation: fadeMove 6s ease-in-out forwards; */
}

/* @keyframes fadeMove {
  0% {
    opacity: 0;
    transform: translate(-50%, -60%) scale(0.9);
  }
  50% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
} */


.intro-bg p {
    font-size: 1.125rem;
    line-height: 1.688rem;
    margin-bottom: 0;
    color: var(--grey);
    font-weight: 400;
    max-width: 850px;
    position: relative;
    z-index: 2;
    margin: 0 auto;
}

.count {
  color: var(--golden);
  font-size: 2.625rem;
  font-weight: 700;
  line-height: 2.188rem;
  margin-bottom: 15px;
}

.stat small {
  color: var(--grey);
  font-weight: 400;
}

.zoom-img {
  position: relative;
  overflow: hidden;
}

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


.zoom-img:hover img {
  transform: scale(1.1);
}


.counter {
  border-right: 1px solid var(--golden);
}

.counter:last-child {
  border-right: none;
}

.btn-amber, .btn-white {
  position: relative;
  font-size: 0.875rem;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: var(--brown);
  font-weight: 500;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.3s ease;
  gap: 10px;
  padding-right: 25px;
}

.btn-white {
  color: #FFFFFF;
  background-color: unset;
  box-shadow: unset;
  border: unset;
}

.btn-amber .line, .btn-white .line {
  display: inline-block;
  width: 2px;
  height: 25px;
  background-color: var(--brown);
}

 .btn-white .line {
  background-color: #FFFFFF;
 }

.btn-amber svg, .btn-white svg {
  transition: transform 0.3s ease;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-amber:hover svg, .btn-white:hover svg {
  transform: translateX(6px); /* arrow moves right */
}

.slider-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.main-slider {
  position: relative;
  z-index: 10;
}

.main-slider img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
}

.slide-content {
  position: absolute;
  bottom: 3%;
  left: 8%;
  color: #fff;
  z-index: 2;
}

.slide-content h4 {
  font-family: "Playfair Display SC", serif;
}

.slide-content .tag {
  display: inline-block;
  background: #fff;
  color: var(--brown);
  font-size: 0.875rem;
  padding: 5px 10px;
  font-style: italic;
}

.slide-content svg {
    background: #fff;
    border-radius: 50%;
    padding: 6px;
    width: 35px;
    height: 35px;
}

.thumb-box {
    position: absolute;
    top: auto;
    right: 0;
    left: auto;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}


.thumb-slider {
  position: relative;
  overflow: hidden;
}


.thumb-slider .swiper-wrapper {
  width: 500px;
  height: 25vh;
  background-color: transparent;
}

.thumb-wrap {
  position: relative;
  overflow: hidden;
}

.thumb-wrap .thumb-text {
  position: absolute;
  bottom: 0;
  right: 15px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  font-family: "Playfair Display SC", serif;
  margin-bottom: 5px;
  padding-left: 10px;
  line-height: 20px;
}

.thumb-slider img {
  width: 100%;
  height: 135px;
  object-fit: cover;
  filter: grayscale(100%);
  transition: 0.3s;
}

.thumb-slider .swiper-slide-thumb-active {
  filter: grayscale(0%);
}

/* Make the slider position relative */
.main-slider .swiper-slide {
  position: relative;
  overflow: hidden;
}

.main-slider .swiper-wrapper {
  background-color: #222;
}

/* Add gradient overlay using a pseudo-element */
.main-slider .swiper-slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(268deg, rgba(0, 0, 0, 0) 39.48%, #000 124.7%);
  pointer-events: none; /* so clicks pass through */
  z-index: 1;
}

.nav-arrows {
  display: flex;
  gap: 10px;
  padding-top: 50px;
  /* padding-right: 25px; */
}

.nav-arrows .swiper-button-prev,
.nav-arrows .swiper-button-next,
.nav-arrows .featured-btn-prev,
.nav-arrows .featured-btn-next,
.testiBtns .testi-btn-prev,
.testiBtns .testi-btn-next {
  position: static !important; /* remove Swiper’s absolute positioning */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--brown);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.swiper-button-prev:after, .swiper-button-next:after{
  display: none;
}

.swiper-button-prev svg,
.swiper-button-next svg {
  width: 20px;
  height: 20px;
}

 .featured-destination-swiper .swiper-slide {
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 0.9;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    color: hsla(0, 0%, 100%, 0.5);
}

 .featured-destination-swiper .swiper-slide.swiper-slide-active{
    -webkit-filter: none;
    filter: none;
    color: #fff;
}

.featured-swiper .slide-content, .featured-destination-swiper .slide-content {
    position: absolute;
    left: 0%;
    top: auto;
    right: 0%;
    bottom: 0%;
    z-index: 2;
    display: flex;
    width: 100%;
    padding-bottom: 1em;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

}

.slide-content h2 {
  font-family: "Playfair Display SC";
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  text-align: center;
  padding: 0 15px;
}

.featured-swiper .swiper-slide::after, .featured-destination-swiper .swiper-slide::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 29.44%, #000 103.58%);
  pointer-events: none; /* so clicks pass through */
  z-index: 1;
}


.otherSwiperBtn, .teamSwiperBtn {
  position: absolute;   /* overlay them relative to swiper container */
  top: 45%;
  left: 0%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 10;          /* above slides */
  pointer-events: none; /* container ignores clicks */
}

/* Base button */
.otherSwiperBtn .custom-btn-prev,
.teamSwiperBtn .swiper-team-prev,
.otherSwiperBtn .custom-btn-next,
.teamSwiperBtn .swiper-team-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brown);    
  border: 1px solid var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;   
  position: absolute;
  transition: transform 0.3s ease; /* smooth scale on hover */
}

/* Arrow icons */
.otherSwiperBtn .custom-btn-prev svg,
.teamSwiperBtn .swiper-team-prev svg {
  position: absolute;
  left: 15px;
  transition: transform 0.3s ease;
  width: 30px;
  height: 30px;
}

.otherSwiperBtn .custom-btn-next svg,
.teamSwiperBtn .swiper-team-next svg {
  position: absolute;
  right: 15px;
  transition: transform 0.3s ease;
  width: 30px;
  height: 30px;
}

/* Hover effect */
.otherSwiperBtn .custom-btn-prev:hover,
.teamSwiperBtn .swiper-team-prev:hover {
  transform: scale(1.1); /* circle grows 10% */
}

.otherSwiperBtn .custom-btn-prev:hover svg,
.teamSwiperBtn .swiper-team-prev:hover svg{
  transform: translateX(-5px); /* arrow slides inside */
}

.otherSwiperBtn .custom-btn-next:hover,
.teamSwiperBtn .swiper-team-next:hover {
  transform: scale(1.1); /* circle grows 10% */
}

.otherSwiperBtn .custom-btn-next:hover svg,
.teamSwiperBtn .swiper-team-next:hover svg{
  transform: translateX(5px); /* arrow slides inside */
}


.featured-swiper .custom-btn-prev  {
  left: 15px  /* adjust this value */
}

.featured-swiper .custom-btn-next {
  right: 15px; /* adjust this value */
}

.teamSwiperBtn .swiper-team-prev {
  left: 105px;
}

.teamSwiperBtn .swiper-team-next {
  right: 105px;
}

/* Parallax Section */
.craft{
  position: relative;
  overflow: hidden;
  background: url('../images/craft-your-safari.jpg') no-repeat center center;
  background-size: cover;
}

.craftContent p {
  color: #FFFFFF;
  font-size: 0.875rem;
  line-height: 1.7rem;
  font-weight: 300;
  text-align: justify;
}

.quote-form-section form {
  background: rgba(72, 41, 15, 0.93); /* dark transparent */
  padding: 2rem;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.quote-form label {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  padding: 0 0.5rem;
}

.quote-form input,
.quote-form select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.44);
  padding: 0.5rem;
  color: #FFFFFF;
  font-size: 0.875rem;
}


.quote-form input:focus-visible,
.quote-form select:focus-visible {
  box-shadow: unset;
  outline: unset;
}

/* .quote-form input:-internal-autofill-selected {
  background-color: transparent!important;
  color: #FFFFFF!important;
} */

.quote-form input::placeholder,
.quote-form select::placeholder {
  color: rgba(255, 255, 255, 0.31);
  font-size: 0.875rem;
}

.quote-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M0.120117 4.03419C0.120117 3.90822 0.169922 3.7793 0.266602 3.68262C0.459961 3.48926 0.776367 3.48926 0.969727 3.68262L7.58789 10.3008L14.1094 3.7793C14.3027 3.58594 14.6191 3.58594 14.8125 3.7793C15.0059 3.97266 15.0059 4.28906 14.8125 4.48242L7.93945 11.3584C7.74609 11.5518 7.42969 11.5518 7.23633 11.3584L0.266602 4.38867C0.166992 4.28906 0.120117 4.16309 0.120117 4.03419Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.7rem;
  /* color: rgba(255, 255, 255, 0.31); */
  font-size: 0.875rem;
}

.quote-form select option {
  background: #FFFFF0;
  opacity: 0.8;
  color: #000;    
}

/* Placeholder option */
.quote-form select option[value=""] {
  color: #FFFFFF;
}

.bg-light{
  position: relative;
  overflow: hidden;
  background: url('../images/bg-img.jpg') no-repeat center center;
  background-size: cover;
}

.testi {
  position: relative;
  overflow: hidden;
  background: url('../images/footer-bg.png') no-repeat center center;
  background-size: cover;
}


.testiSwiper h5 {
font-family: "Playfair Display SC";
 color: var(--brown);
 font-weight: 400;
 font-size: 1.4rem;
 line-height: 2rem;
 margin-bottom: 15px;
}

.testiSwiper p {
  font-size: 0.975rem;
  font-weight: 400;
  line-height: 1.7rem;
  color: var(--grey);
}

.testiSwiper .swiper-slide {
  position: relative;
  padding-left: 40px; /* space for the icon */
}

.testiSwiper .swiper-slide::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 5px;
  width: 40px; /* width of your image */
  height: 40px; /* height of your image */
  background: url('../images/blockquote.svg') no-repeat center center;
  background-size: contain; /* scale image to fit */
}

.testiSwiper {
  position: relative;
}

.testiBtns {
  position: absolute;
  bottom: 0;         /* distance from the bottom of the section */
  left: 50%;            /* start at horizontal center */
  transform: translateX(-50%); /* center the container horizontally */
  display: flex;
  gap: 8px;            /* space between prev & next buttons */
  z-index: 10;
  pointer-events: none; /* container ignores clicks */
}

.testiBtns .swiper-btn-prev,
.testiBtns .swiper-btn-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto; /* buttons clickable */
}

.testiBtns .swiper-btn-prev svg,
.testiBtns .swiper-btn-next svg {
  width: 20px;
  height: 20px;
}

.card {
  border: 0;
}

.card-body {
background: #FFFFF0;
box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.12);
}

.card-body h5 {
  color: var(--brown);
  font-weight: 700;
  font-family: "Playfair Display SC";
  font-size: 1.2rem;
  line-height: 1.6rem;
}

.card-body p {
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--grey);
  margin-top: 15px;
}

.card-body span {
  font-style: italic;
  color: var(--grey);
  font-size: 0.875rem;
  line-height: 1.2rem;
}

.column-two .card img {
  width: 180px;
  height: 100%;
  object-fit: cover;
}

.column-two .card {
  padding-bottom: 12px;
}

  .contact-info {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
  }

  .contact-info li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: #535353;
  }

  .contact-info li p {
    margin-bottom: 0;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: #535353;

  }

  .contact-info li a {
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: #535353;
    font-weight: 400;
    letter-spacing: unset;

  }

  .contact-info .icon {
    margin-right: 15px;
  }

footer {
  position: relative;
  overflow: hidden;
  background: url('../images/footer-bg.png') no-repeat center center;
  background-size: cover;
  background-color: rgba(72, 41, 15, 1);
}



  .slider-wrap .swiper-pagination-bullet{
    width: 20px;
    height: 2px;
  }
  
.slider-wrap .swiper-pagination-bullet-active{
  background: #FFFFFF;
}

@media (max-width: 575px) {
  .featured-swiper .custom-btn-next {
    right: 10px;
  }

  .featured-swiper .custom-btn-prev {
    left: 10px;
  }
}

@media (max-width: 767px) {
   .py-5 {
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
   }

  .intro-bg p {
    font-size: 1rem;
  }

  .count {
    margin-bottom: 10px;
  }
  
  .card-body h5 {
    font-size: 1.1rem;
    line-height: 1.5rem;
  }

  .column-two .card img {
    width: 100%;
  }

  footer {
    text-align: center;
  }

  .blogBtn {
    text-align: center;
    padding-top: 1rem;
  }

  .breadcrumb-wrapper {
    display: none;
  }

  .innerBanner .headingClass h1 {
    font-size: 1.5rem;
  }

  .nav-tabs li {
    margin-bottom: 15px;
  }

  .tabsSection .tab-header .nav-tabs .nav-item .nav-link {
    padding: 10px 15px;
  }

  .itinerary-tabs {
    flex-direction: column;
    gap: 0!important
  }
}

@media (max-width: 992px) {
   .thumb-box{
    display: none;
   }

   .slider-wrap {
    height: 100%;
   }

/* 
   .slide-content{
    bottom: 15%;
   } */

   .counter {
    border-right: 0;
   }

   .logoDiv {
    text-align: center;
   }
}



@media (min-width: 992px) {
  .craftContent {
  padding-left: 120px;
}
  .contact-text {
    padding-left: 120px;
  }
}


/*inner page css */

.innerBanner img, .inner-banner img {
  transform: scale(1);
  animation: zoomIn 5s ease forwards; /* Play on page load */
}

@keyframes zoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.03); /* final zoom level */
  }
}


.inner-banner {
  position: relative;
  overflow: hidden;
}

.inner-banner img {
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.banner-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px; /* adjust height as needed */
  background: linear-gradient(180deg, rgba(255, 255, 240, 0.00) 3.64%, #FFFFF0 77.39%);
  pointer-events: none; /* make sure overlay doesn’t block clicks */
}

.inner-banner::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* don’t block clicks */
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, #040404 200%);
  z-index: 2;
}

.banner-text {
  bottom: 0; 
  left: 50%;  
  transform: translateX(-50%); 
  position: absolute;
  z-index: 2;
  text-align: center;  
  overflow: visible;       
}

.banner-text h1 {
  color: rgba(86, 54, 27, 0.10);
  font-family: "Playfair Display SC";
  font-style: normal;
  font-weight: 400;
  font-size: 8rem;
  line-height: 10rem;
}

.animated-text {
  display: inline-block;
  white-space: nowrap; /* prevent text breaking/cropping */
  overflow: visible;   /* ensure letters aren't cut off */
}

.animated-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px); /* start below */
  animation: fadeUp 0.6s forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0); /* end in place */
  }
}

/* .tourContent {
  margin: 0 auto;
  max-width: 745px;
} */

.tour-wrap em {
  color: var(--brown);
  font-size: 0.875rem;
  line-height: 1.2rem;
  font-weight: 400;
}

.tourContent h3 {
  margin: 20px 0;
}

.listStyled ul {
  padding-left: 20px;
  text-align: justify;
}

.listStyled ul li {
  list-style-type: disc;
  margin-bottom: 10px;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.listStyled h3 {
  margin-bottom: 15px;
}

.listStyled p, .content p, .team-section p {
  text-align: justify;
}

.price {
background: #FFF;
box-shadow: 0 14px 34px 0 rgba(0, 0, 0, 0.15);
}

.single-destinations .tab-pane p {
  padding: 0;
}

.priceDate p {
  color: #000;
  font-size: 0.85rem;
  line-height: 1.1rem;
  font-weight: 600;
  margin-bottom: 5px;
}

.priceDate h6 {
  color: var(--brown);
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 700;
}

.priceLocation p {
  color: var(--brown);
  font-size: 0.875rem;
  line-height: 1.1rem;
  font-weight: 500;
  margin-bottom: 10px;
}

.priceCard {
  border-right: 1px solid var(--brown);
}

.priceCard:last-child {
   border-right: 0;
}

.tab-header .nav-tabs .nav-item .nav-link {
  color: rgba(0, 0, 0, 0.26);
  font-size: 1rem;
  line-height: 1.1rem;
  font-weight: 400;
  transition: all 0.5s ease;
  padding: 10px 20px;
}

.tab-header .nav-tabs .nav-item .active {
  color: var(--golden);
  font-weight: 600;
  border-bottom: 1px solid var(--brown)!important;
  background: transparent;
}

/* Position parent relative so pseudo-element can sit behind */
#myTab {
  position: relative;
  z-index: 2; /* tabs above */
}

/* Big text behind */
#myTab .nav-link.active::before {
  content: attr(data-text);   /* take text from data-text attribute */
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;                /* sit behind */
  pointer-events: none;        /* not clickable */
  white-space: nowrap;
  color: rgba(86, 54, 27, 0.04);
  font-family: "Playfair Display SC";
  font-weight: 400;
  font-size: 8rem;
  line-height: 10rem;
}

.tab-pane p {
  font-size: 0.875rem;
  line-height: 1.6rem;
  padding: 0 2rem;
  text-align: justify;
}

.tab-pane h6 {
  padding: 0 1rem;
  font-weight: 700;
}

.tab-pane h6::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--golden);
  border-radius: 50%; /* if you want a dot */
  margin-right: 8px;
  vertical-align: middle;
}

@media (max-width: 574.99px) {
  
  .banner-text h1 {
    font-size: 2.5rem;
    line-height: 5rem;
  }

  #myTab .nav-link.active::before {
      font-size: 4rem;
      line-height: 6rem;
  }

  .testiSwiper .swiper-slide::before {
    top: -50px;
    left: 45%;
  }
}

@media (max-width: 430px) {
    .inner-banner img {
      height: 35vh;
    }
}

@media (max-width: 767px) {
   .priceCard {border-right: 0; margin-bottom: 25px;}
}



.darkSvg svg {
  background-color: var(--brown);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  padding: 7px;
}

.darkSvg .wishlist-btn {
  position: relative;
  top: 0;
  right: 0;
  padding: 0;
}

.darkSvg .wishlist-btn svg {
  height: unset;
}

@media (min-width: 700px) and (max-width: 768px) {
   .inner-banner img {
    height: 40vh;
   }
}


@media (min-width: 600px) and (max-width: 991.99px) {
 
  .banner-text h1 {
    font-size: 4rem;
    line-height: 6rem;
  }
}

@media (min-width: 992px) and (max-width: 1024px) {
   .banner-text h1 {
    font-size: 5rem;
    line-height: 7rem;
  }
}


.contactData {
  border: 1px solid var(--brown);
  min-height: 130px;
  display: flex;
  flex-direction: column;   /* stack items vertically */
  align-items: center;      /* horizontal center */
  justify-content: center;  /* vertical center */
  text-align: center;       /* center the paragraph text */
  gap: 10px;
}

.icon-circle {
  background: var(--brown);
  border-radius: 50%;
  padding: 10px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -35px; /* half of height to pull it up */
}

.icon-circle svg {
  width: 25px;
  height: 25px;
}
.contactData p {
  color: var(--grey);
  font-size: 0.875rem;
  line-height: 1.4rem;
  margin-bottom: 0;
}

.headingClass h1 {
  font-family: "Playfair Display SC";
  font-size: 3rem;
  line-height: 3rem;
  font-weight: 400;
}

.innerBanner {
  position: relative;
  overflow: hidden; /* ensures overlay doesn’t spill out */
}

.innerBanner img {
  height: 100vh;
  overflow: hidden;
  object-fit: cover;
}

.innerBanner::after {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.3); /* black overlay at 50% opacity */
  z-index: 1;
}

/* make sure text stays above overlay */
.innerBanner .headingClass {
  position: absolute;
  z-index: 2;
}

.whySafari {
    position: relative;
    overflow: hidden;
    background: url(../images/about-bg.png) no-repeat center center;
    background-size: cover;
}

.overviewText {
  position: relative;
  z-index: 1; /* keep the content above */
}

.overviewText::before {
  content: "About Safari Crafters";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6rem;
  line-height: 8rem;
  font-weight: 400;
  color: rgba(72, 41, 15, 0.03);
  white-space: nowrap;
  z-index: -1; /* push behind the text */
  pointer-events: none; /* no interference */
  font-family: "Playfair Display SC";
  /* opacity: 0;
  animation: fadeMove 6s ease-in-out forwards; */
}

.overviewText h3 {
  margin-bottom: 30px;
}

.teamSwiper h5 {
  font-family: "Playfair Display SC";
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: var(--brown);
  margin: 10px 0 0 0;
}

@media screen and (max-width: 575px) {
  .overviewText::before, .intro-bg::before {
    font-size: 1.8rem;
  }
  .teamSwiperBtn .swiper-team-next {
    right: 15px;
  }
  .teamSwiperBtn .swiper-team-prev {
    left: 15px;
  }
}

@media screen and (min-width: 600px)  and (max-width: 767px) {
  .overviewText::before, .intro-bg:before {
    font-size: 3rem; line-height: 5rem;
  }

  .teamSwiperBtn .swiper-team-next {
    right: 15px;
  }
  .teamSwiperBtn .swiper-team-prev {
    left: 15px;
  }
}

@media screen and (min-width: 768px)  and (max-width: 1024px) {
   .overviewText::before, .intro-bg::before {
    font-size: 4rem;line-height: 6rem;
  }

  .teamSwiperBtn .swiper-team-next {
    right: 15px;
  }
  .teamSwiperBtn .swiper-team-prev {
    left: 15px;
  }
}

.filter-box {
  border-right: 1px solid var(--brown);
  padding-right: 0;
  background-color: #FFFFF0;
}

.filter-box h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.tour-card img {
  height: 200px;
  object-fit: cover;
}

.tour-card .badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-block;
  background: #fff;
  color: var(--brown);
  font-size: 0.75rem;
  padding: 5px 10px;
  font-style: italic;
  border-radius: 0;
  font-weight: 400;
}
    
  .wishlist-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #fff;
    border-radius: 50%;
    padding: 0 5px;
  }

   .wishlist-btn svg {
    height: 18px;

  }

  .filter-box .accordion-button {
    background-color: #FFFFF0!important;
    border: 0;
    color: var(--brown)!important;
    padding: 0;
    font-weight: 400;
    font-size: 1.1rem;
  }

  .filter-box .accordion-button::after {
    content: none; /* remove default arrow */
  }

  .filter-box .accordion-button.collapsed .toggle-icon::before {
    content: "+";
    margin-right: 15px;
  }

  .filter-box .accordion-button .toggle-icon::before {
    content: "−";
    margin-right: 15px; 
  }

  .filter-box .accordion-item {
    border: unset;
    border-bottom: 1px solid var(--brown);
    background-color: #FFFFF0;
  }

   .filter-box .accordion-item:last-child {
    border-bottom: unset;
   }

  .filter-box .accordion-button:not(.collapsed), 
  .filter-box .accordion-button {
    box-shadow: unset;
  }

  .form-check label {
    font-size: 0.975rem;
    line-height: 1.5rem;
  }

  .card-title {
    font-family: "Playfair Display SC";
    color: var(--brown);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.6rem;
    margin-top: 5px;
    margin-bottom: 25px;
}

.img-wrap {
  position: relative;
  overflow: hidden;
}

.img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.20) 0%,
    rgba(0, 0, 0, 0.20) 100%
  );
}


/* Reset bootstrap default */
.pagination .page-link {
  border: none;
  color: var(--brown);
  background: transparent;
  margin: 0 10px;
  padding: 5px 10px;
  font-weight: 400;
}

/* Numbers */
.pagination .number {
  background: transparent;
  font-size: 16px;
}

/* Active number underline */
.pagination .active .number {
  font-weight: bold;
  border-bottom: 2px solid #56361B;
  border-radius: 0;
  z-index: 1;
}

/* Circle buttons (Prev/Next arrows) */
.circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Text color for Prev/Next */
.text-brown {
  color: var(--brown);
}

.page-link:focus, .form-check-input:focus {
  box-shadow: unset;
}

.form-check-input:focus {
  border-color: var(--brown)!important;
}

.page-item:last-child .page-link, .filter-box .accordion-button {
  outline: unset;
}

/* Responsive: hide numbers on xs */
@media (max-width: 576px) {
  .pagination .number {
    display: none;
  }
  .pagination .active .number {
    display: inline-block;
  }
}

@media screen and (max-width: 991.99px) {
    .filter-box {border-right: unset; }
}

/* Reset Bootstrap checkbox look */
.form-check-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #48290F;
  border-radius: 0!important;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  margin-right: 8px;
}

/* When checked */
.form-check-input:checked {
  background-color: #56361B; /* brown fill */
  border-color: var(--brown);
}

input[type="date"] {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 5px;
  width: 100%;
  cursor: pointer;
}

input[type="date"]:focus {
  border-color: #56361B; /* your brown */
  outline: none;
  box-shadow: 0 0 4px rgba(86, 54, 27, 0.4);
}

.blogCard {
  padding-bottom: 35px;
}

.blogContent, .priceContent{
  background: #FFF;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.12);
}

.blogContent h5, .priceContent h5 {
  font-family: "Playfair Display SC";
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: var(--brown);
}

.blogContent p {
  color: var(--grey);
  font-size: 0.875rem;
  line-height: 1.4rem;
  font-weight: 400;
  margin-bottom: 10px;
}

.blogContent em {
  color: var(--grey);
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.2rem;
  font-weight: 400;
}

.date-picker-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #7a5a3d;
  padding: 5px 0;
  font-family: 'poppins';
  width: 200px;
  position: relative;
}

.date-picker-group label {
  color: var(--brown);
  font-size: 14px;
  font-weight: 400;
  font-family: 'poppins';
}

.date-picker-group input[type="date"] {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #5c3d2e;
  flex: 1;
  margin-left: 10px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  box-shadow: unset;
}

/* Hide placeholder dd-mm-yy */
.date-picker-group input[type="date"]::-webkit-datetime-edit {
  display: none;
}

.date-picker-group input[type="date"]::-webkit-inner-spin-button,
.date-picker-group input[type="date"]::-webkit-clear-button {
  display: none;
}

.date-picker-group input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

.date-picker-group .calendar-icon {
  color: #5c3d2e;
  cursor: pointer;
  position: relative;
}

.blogDetailContent img {
  padding: 25px 0;
}

.otherBlogs .teamSwiperBtn {
  top: 32%;
}

.craft-date-picker-group .custom-date {
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  background: transparent;
  padding: 0.5rem;
  font-size: 14px;
  color: #fff;
  outline: none;
  border-radius: 0;
}

.craft-date-picker-group .custom-date::placeholder {
  color: rgba(255,255,255,0.5);
}

.craft-date-picker-group .custom-date::-webkit-calendar-picker-indicator {
  filter: invert(1); /* makes the calendar icon visible on dark background */
  cursor: pointer;
}

.share-wrapper {
  position: relative;
  display: inline-block;
}

.share-btn {
  background: unset;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.share-btn svg {
  display: block;
}

.share-icons {
  position: absolute;
  top: 100%; /* Below the button */
  left: 0;
  transform: translateX(-50%);
  margin-top: 10px;
  background: var(--brown);
  padding: 5px 10px;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transition: all 0.3s ease;
  gap: 5px;
}

.share-icons svg {
  padding: 3px;
}

/* Close button inside the share box */
.share-close {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  text-align: center;
  padding: 0;
}

/* Active state */
.share-wrapper.active .share-icons {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

.small p, .small a {
  font-weight: 300;
  font-size: 0.76rem;
}

footer .list-unstyled li a {
  font-size: 0.975rem;
}

/* Remove Chrome autofill background completely */
.quote-form input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: #FFFFFF !important; /* text stays visible */
}

.wpcf7-not-valid-tip {
  color: #FFF!important;
  font-size: 0.875rem!important;
  padding: 0 0.5rem;
}



/* Style placeholder text */
input[type="date"].custom-date::placeholder {
     color: rgba(255, 255, 255, 0.31);
}

/* Default placeholder style */
input[type="date"].custom-date:invalid {
  color: rgba(255, 255, 255, 0.31);
}

/* When user selects a date */
input[type="date"].custom-date {
  color: #FFFFFF; /* black for selected date */
}

.wishlist-btn svg path {
  transition: fill 0.3s ease;
}

.wishlist-btn.active svg path {
  fill: red; /* red when active */
}

.page-template-tours-php .wishlist-btn.active svg path, .photo-tours .wishlist-btn.active svg path{
  stroke: red;
}

.wishlist-count {
  background: red;
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
    position: absolute;
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    top: -5px;
    right: -8px;
}

.featuredImg img{
  height: 280px;
  object-fit: cover;
}


.photo-tours .darkSvg svg{
  background-color: var(--white);
  padding: 4px 7px;
}

.fixed-header-page .site-header {
    background: #fff;
}

.wishlist-container, .searchResults{
  padding-top: 150px;
  padding-bottom: 130px;
}

.remove-wishlist{
    position: absolute;
    top: 10px;
    right: 10px;
    background: #fff;
    border-radius: 50%;
    padding: 0 6px;
    cursor: pointer;
}


.wpcf7-form-control-wrap:focus-visible {
  outline: unset;
}

.quote-form input:-webkit-autofill,.quote-form select:-webkit-autofill {
  background-color: transparent!important;
}


.thankyouPage {
  padding: 200px 0 150px 0;
}

.fourzerofour h1{
font-size: 7rem;
color: var(--golden);
font-family: "Playfair Display SC", serif;
font-weight: 400;
}


.itinerary-tabs {
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

.itinerary-tabs .nav-item {
  flex: 1 1 auto;
}

.itinerary-tabs .nav-link {
  background: rgba(217, 146, 51, 0.34);
  color: var(--brown);
  border: none;
  border-radius: 8px 8px 0 0;
  padding: 8px 10px;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}

.itinerary-tabs .nav-link.active {
  background-color: var(--brown);
  color: #fff;
}

.itinerary-tab-content {
  background-color: #FFFFF0;;
  border: 1px solid rgba(72, 41, 15, 0.71);
  border-radius: 0 0 10px 10px;
}

.tab-subtitle {
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 2rem;
}

.tab-title {
  font-weight: 400;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .itinerary-tabs {
    flex-wrap: wrap;
  }

  .itinerary-tabs .nav-item {
    flex: 1 1 50%;
  }
}

@media (max-width: 576px) {
  .itinerary-tabs .nav-item {
    flex: 1 1 100%;
  }

  .itinerary-tabs .nav-link {
    border-radius: 6px;
  }

}

.breadcrumb-wrapper {
  top: 15%;
  z-index: 10;
}

#custom-breadcrumb {
  color: #fff;
  font-size: 12px;
  font-weight: 300;
}

#custom-breadcrumb a {
  color: #fff;
  text-decoration: none;
}

.highlights strong {
  color: var(--brown);
  font-style: italic;
}

.highlights h5{
  font-size: 0.875rem;
  margin-bottom: 10px;
}

.highlights ul li {
  margin-bottom: 5px;
  line-height: 20px;
}

.customizeBtn {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 15px;
}

.paddingList ul {padding: 15px 0 15px 50px;}


@media (min-width: 992px) {
  .team-section .row:nth-child(odd) {
    flex-direction: row-reverse;
  }
}


.privacyContent h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.privacyContent p strong {
  font-size: 1rem;
}

.privacyContent ul {
  padding-left: 20px;
  padding-bottom: 15px;
}

.privacyContent ul li {
  list-style-type: disc;
}

.privacyContent p a {
  text-decoration: underline;
}


@media (max-width: 992px) {
  .innerBanner, .inner-banner{
    padding-top: 90px;
  }

  .innerBanner img {
    height: auto;
  }

   .site-header svg {
    color: #000 !important;
  }

  .site-header {
    background-color: #FFFFFF;
  }

  .logo-light { display: none !important; }
  .logo-dark { display: block !important; }

  .logoDiv {
    display: flex;
    justify-content: center;
    align-items: center;
  }

}


.iconWrap svg {
  width: unset;
  height: unset;
  border-radius: unset;
}

@media (min-width: 1400px) {
  .team-section img {
    max-height: 630px;
    object-fit: cover;
  }
}

@media (min-width: 1200px) {
  .destination-card img {
    height: 280px;
    object-fit: cover;
  }
}

@media (max-width: 575px) {
  .main-slider img {
  width: 100%;
  height: 50vh;
 }
}


@media (min-width: 768px) and (max-width: 992px) {
    .main-slider img {
      width: 100%;
      height: 60vh;
    }
}