:root,
[data-bs-theme="light"] {
  --base-color: #f8430a;
  --very-light-base-color: #fbeee1;
  --second-color: #1f6eab;
  --third-color: #f18c1f;
  --four-color: #29a92e;
}

.bg-base-color {
  background-color: var(--base-color);
}

.bg-very-light-base-color {
  background-color: var(--very-light-base-color);
}

.bg-second-color {
  background-color: var(--second-color);
}

.text-base-color {
  color: var(--base-color);
}

/* p meta{
  display: none !important;
} */

.text-second-color {
  color: var(--second-color) !important;
}

.text-black {
  color: #000000;
}

.btn-base-color {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--base-color);
  --bs-btn-border-color: var(--base-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--base-color);
  --bs-btn-hover-border-color: var(--base-color);
  --bs-btn-focus-shadow-rgb: 92, 140, 229;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--base-color);
  --bs-btn-active-border-color: var(--base-color);
  --bs-btn-active-shadow: 0rem 0.25rem 0.75rem rgba(30, 34, 40, 0.15);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--base-color);
  --bs-btn-disabled-border-color: var(--base-color);
}

.btn-second-color {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--second-color);
  --bs-btn-border-color: var(--second-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--second-color);
  --bs-btn-hover-border-color: var(--second-color);
  --bs-btn-focus-shadow-rgb: 92, 140, 229;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--second-color);
  --bs-btn-active-border-color: var(--second-color);
  --bs-btn-active-shadow: 0rem 0.25rem 0.75rem rgba(30, 34, 40, 0.15);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--second-color);
  --bs-btn-disabled-border-color: var(--second-color);
}

/* Background */
.background-1 {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.background-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgb(255 255 255), rgb(0 0 0 / 0%)),
    url("../../assets/img/background-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  z-index: -1;
  /* opacity: 0.1; */
}

.background-2 {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.background-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://placehold.co/150");
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  opacity: 0.03;
}

.background-3 {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.background-3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../../assets/img/background-3.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  z-index: -1;
  opacity: 0.07;
}

.background-4 {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.background-4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://placehold.co/150");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  z-index: -1;
  opacity: 0.3;
}

/* Welcome Text */
.bg-dot.primary {
  background-image: radial-gradient(var(--base-color) 2px, transparent 2.5px);
}

/* Floating WA */
.contact-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 99999;
  display: flex;
  gap: 10px;
}

.button-33 {
  background-color: #39b54a;
  border-radius: 30px;
  color: white;
  cursor: pointer;
  display: inline-block;
  padding: 5px 25px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-33:hover {
  box-shadow: rgba(57, 181, 74, 0.35) 0 -25px 18px -14px inset,
    rgba(57, 181, 74, 0.25) 0 1px 2px, rgba(57, 181, 74, 0.25) 0 2px 4px,
    rgba(57, 181, 74, 0.25) 0 4px 8px, rgba(57, 181, 74, 0.25) 0 8px 16px,
    rgba(57, 181, 74, 0.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
  color: white;
}

.contact-btn-1 {
  position: fixed;
  bottom: 30px;
  left: 20px;
  z-index: 99999;
  display: flex;
  gap: 10px;
}

.button-34 {
  background-color: #39b54a;
  border-radius: 30px;
  color: white;
  cursor: pointer;
  display: inline-block;
  padding: 5px 25px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-34:hover {
  box-shadow: rgba(57, 181, 74, 0.35) 0 -25px 18px -14px inset,
    rgba(57, 181, 74, 0.25) 0 1px 2px, rgba(57, 181, 74, 0.25) 0 2px 4px,
    rgba(57, 181, 74, 0.25) 0 4px 8px, rgba(57, 181, 74, 0.25) 0 8px 16px,
    rgba(57, 181, 74, 0.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
  color: white;
}

/* Button */
.btn-group-very-sm > .btn,
.btn-very-sm {
  --bs-btn-padding-y: 0.4rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 0.7rem;
  --bs-btn-border-radius: 0.4rem;
}

.btn-group-very-sm > .btn-icon.btn,
.btn-icon.btn-very-sm {
  padding-top: 5px;
  padding-bottom: 5px;
}

.btn-group-very-sm > .btn-icon.btn i,
.btn-icon.btn-very-sm i {
  font-size: 0.8rem;
}

/* Navbar */
/* .nav-link {
    color: var(--bs-blue);
} */

/* CKE Editor*/
.description-list a {
  color: var(--main-color);
}

.description-list ul li {
  list-style: initial;
}

.description-list p strong {
  color: var(--black);
}

.description-list hr {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.header-title p strong {
  /* font-style: italic; */
  text-decoration: underline;
}

.desc-cta p {
  margin-bottom: 0px;
}

/* Navbar */
.img-navv {
    width: auto;
    height: 50px;
}

@media (max-width: 992px) {
    .navbar-expand-lg .navbar-brand {
        padding-top: 20px;
        padding-bottom: 20px;
     }
    .img-navv {
        height: 30px;
    }
}

/*==========================================================================
* Button CSS
==========================================================================*/
.btn-base-color {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--base-color);
  --bs-btn-border-color: var(--base-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--base-color);
  --bs-btn-hover-border-color: var(--base-color);
  --bs-btn-focus-shadow-rgb: 92, 140, 229;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--base-color);
  --bs-btn-active-border-color: var(--base-color);
  --bs-btn-active-shadow: 0rem 0.25rem 0.75rem rgba(30, 34, 40, 0.15);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--base-color);
  --bs-btn-disabled-border-color: var(--base-color);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--base-color);
  --bs-btn-border-color: var(--base-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--base-color);
  --bs-btn-hover-border-color: var(--base-color);
  --bs-btn-focus-shadow-rgb: 92, 140, 229;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--base-color);
  --bs-btn-active-border-color: var(--base-color);
  --bs-btn-active-shadow: 0rem 0.25rem 0.75rem rgba(30, 34, 40, 0.15);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--base-color);
  --bs-btn-disabled-border-color: var(--base-color);
}

.build_button {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 3;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: 0.4s;
  font-family: var(--primary-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
  color: white;
  background: var(--base-color);
  border-radius: 50px 50px 50px 50px;
  padding: 8px 8px 8px 30px;
  gap: 20px;
  &::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 100%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--second-color);
    transform-origin: 100% 50%;
    transform: scale3d(1, 2, 1);
    transition: transform 0.4s, opacity 0.4s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1);
  }
  i {
    position: relative;
    z-index: 2;
    transition: 0.4s;
    color: white;
    background: #017eb9;
    font-size: 26px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px 50px 50px 50px;
  }
  &:hover {
    color: white;
    i {
      color: var(--second-color);
      background: white;
      transform: rotate(45deg);
    }
    &::before {
      transform: scale3d(10, 9, 1);
      transform-origin: 110% 55%;
    }
  }
}

.build_button-wa {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 3;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: 0.4s;
  font-family: var(--primary-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
  color: var(--base-color);
  background: var(--bs-white);
  border-radius: 50px 50px 50px 50px;
  padding: 8px 8px 8px 30px;
  gap: 20px;
  &::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 100%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--base-color);
    transform-origin: 100% 50%;
    transform: scale3d(1, 2, 1);
    transition: transform 0.4s, opacity 0.4s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1);
  }
  i {
    position: relative;
    z-index: 2;
    transition: 0.4s;
    color: white;
    background: #017eb9;
    font-size: 26px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px 50px 50px 50px;
  }
  &:hover {
    color: white;
    i {
      color: var(--second-color);
      background: white;
      transform: rotate(45deg);
    }
    &::before {
      transform: scale3d(10, 9, 1);
      transform-origin: 110% 55%;
    }
  }
}

.build_button-detail {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 3;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: 0.4s;
  font-family: var(--primary-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
  color: white;
  background: #000000;
  border-radius: 50px 50px 50px 50px;
  padding: 8px 8px 8px 30px;
  gap: 20px;
  &::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 100%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--base-color);
    transform-origin: 100% 50%;
    transform: scale3d(1, 2, 1);
    transition: transform 0.4s, opacity 0.4s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1);
  }
  i {
    position: relative;
    z-index: 2;
    transition: 0.4s;
    color: white;
    background: #29a92e;
    font-size: 17px;
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px 50px 50px 50px;
  }
  &:hover {
    color: white;
    i {
      color: var(--second-color);
      background: white;
      transform: rotate(45deg);
    }
    &::before {
      transform: scale3d(10, 9, 1);
      transform-origin: 110% 55%;
    }
  }
}

/*==========================================================================
* START WA/ APPO BTN / SCROLL TOP
==========================================================================*/
.showhide {
  visibility: hidden;
  opacity: 0;
}

.showhide.show {
  opacity: 1;
  visibility: visible;
}

.flt-btn {
  border-radius: 30px;
  display: flex;
  height: 45px;
  min-width: 45px;
  position: fixed;
  cursor: pointer;
  text-align: center;
  z-index: 100;
  align-items: center;
  justify-content: center;
  transition: all 0.8s;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}

.appo-btn {
  position: fixed;
  left: 20px;
  border: 1px solid white;
  bottom: 100px;
  line-height: 40px;
  color: #fff;
  background: var(--base-color);
}

.appo-btn a {
  color: #fff !important;
  display: block;
}

.wa-btn {
  position: fixed;
  left: 20px;
  bottom: 40px;
  line-height: 48px;
  color: #fff;
  background: linear-gradient(to right, #61dc6a 0, #2bc911 100%, #61dc6a 200%);
}

.wa-btn a {
  color: #fff !important;
  height: 100%;
}

.flt-btn span {
  vertical-align: middle;
  font-size: 14px;
  letter-spacing: -15px;
  opacity: 0;
  line-height: 45px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
}

.flt-btn:hover {
  color: #fff;
  padding: 0 20px;
}

.flt-btn:hover span {
  opacity: 1;
  letter-spacing: 0;
  padding-left: 5px;
}

.wa-btn::after {
  z-index: -1;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 45px;
  height: 45px;
  animation: ripple 1.6s ease-out infinite;
  opacity: 1;
  background: #4bc75a;
  border-radius: 30px;
  -webkit-animation: ripple 1.6s ease-out infinite;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}

.appo-btn::after {
  z-index: -1;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 45px;
  height: 45px;
  animation: ripple 1.7s ease-out infinite;
  opacity: 1;
  background: var(--base-color);
  border-radius: 30px;
  -webkit-animation: ripple 1.7s ease-out infinite;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}

button.scroll-top:focus {
  outline: none;
}

.scroll-top.open {
  bottom: 40px;
}

.scroll-top {
  width: 45px;
  height: 45px;
  line-height: 45px;
  position: fixed;
  bottom: 105%;
  right: 25px;
  font-size: 16px;
  border-radius: 50%;
  z-index: 99;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: var(--base-color);
  transition: 1s ease;
  border: none;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.scroll-top span {
  color: #fff;
}

.scroll-top:after {
  position: absolute;
  z-index: -1;
  content: "";
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 1;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0) 80%
  );
  animation: ripple 1.7s ease-out infinite;
  -webkit-animation: ripple 1.7s ease-out infinite;
}

.wa-btn::after {
  z-index: -1;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 45px;
  height: 45px;
  animation: ripple 1.6s ease-out infinite;
  opacity: 1;
  background: #4bc75a;
  border-radius: 50%;
  -webkit-animation: ripple 1.6s ease-out infinite;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
  }
}
/* END WA/ APPO BTN / SCROLL TOP */

/* Artikel */
article .artikel:hover .card-body a.btn-outline-primary {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
}

.truncate-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-text-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-text p {
  line-height: 1.6;
}

/* header page */
.image-wrapper.bg-overlay:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgb(14 124 209), rgb(0 0 0 / 32%))
  /* background: linear-gradient(to left, rgb(241 140 31), rgb(32 69 123 / 50%)); */
}

/* Rental mobil */
.rental-mobil:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-blue-rgb), var(--bs-bg-opacity)) !important;
}

.rental-mobil:hover .card-body a.btn-blue {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--bs-navy) !important;
}

.rental-mobil:hover .card-body h2 a,
.rental-mobil:hover .card-body h3,
.rental-mobil:hover .card-body h3 span {
  color: #fff !important;
}

/* Paket Wisata */
/*.paket-wisata:hover {*/
/*   --bs-bg-opacity: 1; */
/*  background-color: var(--second-color);*/
/*}*/

.paket-wisata:hover .card-body .destination {
  background-color: #558df3 !important;
  color: #fff !important;
}

.paket-wisata:hover .card-body a.btn-blue {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--bs-navy) !important;
}

.paket-wisata:hover .card-body h2 a {
  color: #fff !important;
}

.paket-wisata:hover .card-body h3 span {
  color: #fff !important;
}

.paket-wisata:hover .card-body h3 {
  color: #fff !important;
}

.paket-wisata .destination-list {
    margin: 10px 0;
    text-align:left;
    font-size:14px;
    max-height: 10em;
    overflow-y: auto;
}

.paket-wisata .destination-list p {
    margin-bottom:0px;
}

.paket-wisata .destination-list ol,
.paket-wisata .destination-list ul {
    padding-left:1.5rem;
}

/* PAKET TOUR */
#paket-tour .card .card-body h2 {
  /* text-wrap: nowrap; */
  /* overflow-x: clip;
    text-overflow: ellipsis; */

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* DESKRIPSI TOUR */
#description-tour table p {
  margin-bottom: 0px;
}

.table-container {
    width: 100%;
    overflow-x: auto; /* Scroll horizontal jika perlu */
}

#description-tour table {
  width: 100%;
  /*min-width: 500px;*/
  /*overflow-x: auto;*/
}

#description-tour table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  border: 1px solid #ddd;
  background-color: var(--base-color);
  color: white;
}

#description-tour table td,
#customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#description-tour table tr:nth-child(even) {
  background-color: #f2f2f2 !important;
}

#description-tour table tr:hover {
  background-color: #ddd;
}

#description-tour table p {
  margin-bottom: 0px;
}

#description-tour table {
  width: 100%;
}

#description-tour table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  border: 1px solid #ddd;
  background-color: var(--base-color);
  color: white;
}

#description-tour table td,
#customers th {
  border: 1px solid #ddd;
  padding: 8px;
  white-space:nowrap;
}

#description-tour table tr:nth-child(even) {
  background-color: #f2f2f2 !important;
}

#description-tour table tr:hover {
  background-color: #ddd;
}

/* Detail Include & Exclude */

.detail-tour-list .icon-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 kolom dengan lebar yang sama */
  column-gap: 70px;
  row-gap: 0px;
  list-style: none;
  padding: 0;
}

.detail-tour-list .icon-list li {
  display: flex;
  align-items: center;
  gap: 8px; /* Jarak antara ikon dan teks */
}

/* About Me */
@media (min-width: 992px) {
  .about-me-img {
    width: 20%;
  }
}

/* Testimoni */
blockquote.icon:before {
  content: "\201e";
  position: absolute;
  top: -4.5rem;
  left: 25.5rem;
  color: var(--base-color);
  font-size: 10rem;
  line-height: 1;
  z-index: 1;
}

@media (max-width: 756px) {
  blockquote.icon:before {
    top: -1.5rem;
    left: 9.5rem;
  }
}

/* destination area 3 start ---------------------*/
.destination-title {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.02em;
  color: var(--base-color);
}

.destination-item {
  background-color: #e9f6f9;
  border-radius: 16px;
  text-align: center;

  &_img {
    border-radius: 16px 16px 0px 0px;

    @include md {
      margin-bottom: 0;
    }
  }

  .destination-content {
    padding: 30px 0 24px 0;
  }

  .box-title {
    color: #000000;
    margin-bottom: 0;
  }

  .destination-text {
    color: #000000;
    margin-bottom: 20px;
  }

  .th-btn {
    padding: 10px 25px;
    border: 1px solid var(--base-color);
    font-weight: 500;

    &:after {
      mask-image: url("../img/icon/arrow-right2.svg");
      width: 15px;
      height: 15px;
    }
  }
}

/* destination area 3 end ---------------------*/

.theme-btn {
  background-color: var(--base-color);
  color: white;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  padding: 20px 40px;
  border-radius: 0;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: relative;
  z-index: 1;
  line-height: 1.3;
  border-radius: 10px;

  &::before {
    content: "";
    background-color: #0c142e;
    width: 0;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
    border-radius: 10px 10px 0 0;
  }

  &::after {
    content: "";
    background-color: #0c142e;
    width: 0;
    height: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
    border-radius: 0 0 10px 10px;
  }

  i {
    margin-left: 10px;
  }

  &:hover {
    color: white;

    &::before,
    &::after {
      width: 100%;
    }
  }

  &.bg-color {
    background-color: #0e9cdc;
    color: white;

    &::before,
    &::after {
      background-color: var(--base-color);
    }

    &:hover {
      color: white;
    }
  }

  &.bg-header {
    background-color: #0c142e;

    &::before,
    &::after {
      background-color: white;
    }

    &:hover {
      color: #0c142e;
    }
  }

  &.bg-white {
    background-color: white;
    color: #0c142e;

    &:hover {
      color: white;
    }
  }

  @include breakpoint(max-md) {
    padding: 20px 32px;
  }

  @include breakpoint(max-sm) {
    padding: 18px 30px;
    font-size: 14px;
  }
}

/* ==== */

.car-rentals-items {
  margin-top: 30px;
}
.car-rentals-items .car-image {
  position: relative;
  overflow: hidden;
}
.car-rentals-items .car-image img {
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 0 0;
  transition: all 0.4s ease-in-out;
}
.car-rentals-items .car-content {
  padding: 25px 35px;
  background-color: var(--bs-white);
  border-radius: 0 0 10px 10px;
  /* border: 1px solid #d0d7de; */
  position: relative;
}
.car-rentals-items .car-content .post-cat {
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--bs-white);
  position: absolute;
  top: -11px;
  line-height: 1.3;
}
.car-rentals-items .car-content .star {
  margin-bottom: 5px;
}
.car-rentals-items .car-content .star i {
  font-size: 14px;
  color: var(--ratting);
}
.car-rentals-items .car-content .star span {
  font-size: 14px;
}
.car-rentals-items .car-content h4 {
  margin-bottom: 10px;
}
.car-rentals-items .car-content h4 a:hover {
  color: var(--theme);
}
.car-rentals-items .car-content h6 {
  font-size: 14px;
  color: var(--base-color);
}
.car-rentals-items .car-content h6 span {
  color: var(--bs-secondary);
}
.car-rentals-items .car-content .icon-items {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 70px;
  margin-bottom: 20px;
}
@media (max-width: 1199px) {
  .car-rentals-items .car-content .icon-items {
    gap: 40px;
  }
}
@media (max-width: 767px) {
  .car-rentals-items .car-content .icon-items {
    gap: 20px;
  }
}
.car-rentals-items .car-content .icon-items ul li:not(:last-child) {
  margin-bottom: 5px;
}
.car-rentals-items .car-content .theme-btn {
  line-height: 1;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1.3px;
}
.car-rentals-items:hover .car-image img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
>>> Home travel destination section  
----------------------------------------------------------------*/
.destination-section {
  padding-bottom: 100px;
}
@media screen and (min-width: 992px) {
  .destination-section {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 575px) {
  .destination-section {
    padding-bottom: 60px;
  }
}

.destination-three-column .row .row {
  margin: 0;
}
.destination-three-column .row .row [class*="col-"] {
  padding: 7px;
}
.destination-three-column > .row {
  margin: 0 -7px;
}
.destination-three-column > .row > [class*="col-"] {
  padding: 0;
}

.destination-four-column .row {
  margin: 0 -7px;
}
.destination-four-column .row [class*="col-"] {
  padding: 7px;
}

.overlay-desti-item .desti-content {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.overlay-desti-item .desti-content h3 {
  color: #ffffff;
  margin-bottom: 4px;
}
.overlay-desti-item .desti-content h3 a:hover {
  color: #f56960;
}

.desti-item {
  background-color: #ffffff;
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
  padding: 8px;
  position: relative;
}
.desti-item .desti-image {
  position: relative;
}
.desti-item .desti-image:before {
  background-color: #101f46;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.desti-item .desti-image .rating-start {
  position: absolute;
  top: 10px;
  right: 14px;
}
.desti-item .meta-cat a {
  display: inline-block;
  font-family: "Raleway", Sans-serif;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  -webkit-transition: background-color 0.3s;
  -moz-transition: background-color 0.3s;
  -ms-transition: background-color 0.3s;
  -o-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.desti-item .meta-cat a:hover,
.desti-item .meta-cat a:focus {
  color: #2c75ba;
}
.desti-item .bg-meta-cat {
  position: absolute;
  top: 30px;
  left: 30px;
}
.desti-item .bg-meta-cat a {
  background-color: rgba(7, 145, 190, 0.85);
  color: #ffffff;
  padding: 7px 24px;
}
.desti-item .bg-meta-cat a:hover,
.desti-item .bg-meta-cat a:focus {
  background-color: rgba(245, 105, 96, 0.85);
  color: #ffffff;
}
.desti-item .rating-start span:before {
  color: #ffffff;
}
@media screen and (max-width: 991px) {
  .desti-item .desti-image img {
    width: 100%;
  }
}

.desti-content {
  padding: 20px;
}
.desti-content h3 {
  margin-bottom: 4px;
}
.desti-content h3 a:hover {
  color: #f56960;
}

.btn-wrap a {
  margin-top: 50px;
}
@media screen and (max-width: 575px) {
  .btn-wrap a {
    margin-top: 20px;
  }
}

/*--------------------------------------------------------------
>>> Home travel testimoni section  
----------------------------------------------------------------*/
.testimonial-card-items {
  margin-top: 50px;
  position: relative;

  .testimonial-items-top {
    text-align: center;
    background-color: #ecf0f4;
    border-radius: 10px;
    padding: 40px 60px;
    height: 250px;
    position: relative;
    margin-bottom: 30px;
    @include transition;
    border: 1px solid transparent;

    @include breakpoint(max-sm) {
      padding: 30px 40px;
    }

    .icon {
      width: 70px;
      height: 70px;
      line-height: 70px;
      text-align: center;
      border-radius: 50%;
      background-color: var(--second-color);
      font-size: 26px;
      color: white;
      margin: -70px auto 30px;
      position: relative;
      z-index: 9;
    }

    p {
      font-size: 14px;
      line-height: 190%;
      position: relative;
      z-index: 9;

      @include breakpoint(max-sm) {
        font-size: 16px;
      }
    }

    .star {
      color: yellow;
      margin-top: 15px;
      position: relative;
      z-index: 9;
    }

    &::before {
      position: absolute;
      content: "";
      right: 41px;
      bottom: -1px;
      width: 81px;
      height: 1px;
      background-color: transparent;
      transform-origin: bottom left;
      transform: rotate(30deg);
      z-index: 1;
    }

    &:after {
      position: absolute;
      content: "";
      right: 50px;
      bottom: -41.5px;
      width: 72px;
      height: 42px;
      background-color: inherit;
      border-right: 1px solid transparent;
      -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
      clip-path: polygon(100% 0, 0 0, 100% 100%);
    }
  }

  .client-info-items {
    position: relative;

    .client-img {
      /*width: 70px;*/
      /*height: 70px;*/
      border-radius: 50%;
      border: 2px solid var(--base-color);
    }
  }

  .testimoni-bg-shape {
    position: relative;

    &::after {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      background-image: url(../../assets/img/testimonial/bg-30.png);
      opacity: 0.9;
      filter: brightness(100%) contrast(100%) saturate(0%) blur(0px)
        hue-rotate(0deg);
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }

  &:hover {
    .testimonial-items-top {
      background-color: #FBDCBA;
      /*border: 1px solid #e3e3e3;*/
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

      &:after {
        border-right: 1px solid #e3e3e3;
      }

      &::before {
        background-color: #e3e3e3;
      }
    }
  }
}

.testimonial-section {
  position: relative;
  z-index: 9;

  .testimonial-bg-shape {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    img {
      width: 100%;
    }
  }

  .array-button {
    .array-prev,
    .array-next {
      background-color: #ecf0f4;
      color: #0c142e;
      border: none;

      &:hover {
        background-color: var(--base-color);
        color: white;
      }
    }
  }
}

.testimonial-wrapper {
  margin-bottom: 60px;
  margin-top: -85px;

  @include breakpoint(max-xxl) {
    margin-bottom: 43px;
  }

  @include breakpoint(max-xl) {
    margin-bottom: 60px;
  }

  @include breakpoint(max-md) {
    margin-bottom: 0;
  }

  .testimonial-items {
    position: relative;

    @include breakpoint(max-lg) {
      margin-top: 50px;
    }

    @include breakpoint(max-md) {
      margin-top: 0;
    }

    .client-info-items {
      max-width: 420px;
      border: 1px solid var(--base-color);
      background-color: white;
      transition: all 0.3s ease;
      position: relative;
      margin: 0 0 40px 0;
      border-radius: 10px;
      margin-left: 30px;

      @include breakpoint(max-lg) {
        margin-left: 0;
      }

      p {
        padding: 30px;
        font-size: 20px;
        line-height: 160%;
        font-weight: 400;

        @include breakpoint(max-md) {
          font-size: 18px;
        }

        @include breakpoint(max-sm) {
          font-size: 16px;
        }
      }

      .info {
        padding: 25px 35px;
        background-color: var(--base-color);
        border-radius: 0 0 10px 10px;
        position: relative;
        display: flex;
        align-items: center;
        direction: ltr;
        gap: 15px;

        .icon {
          position: absolute;
          top: -37px;
          transform: translateX(50%);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 74px;
          height: 74px;
          border-radius: 50%;
          right: 25px;
          transform: none;
          border: 5px solid white;
          background-color: #0c142e;
        }

        .name-job {
          display: flex;
          flex-wrap: wrap;
          gap: 15px;
          align-items: center;

          .name {
            color: white;
          }

          .separator {
            color: white !important;
          }

          .job {
            color: white;
          }
        }

        &::after {
          transition: all 0.3s ease;
          position: absolute;
          content: "";
          right: 45px;
          bottom: -41.5px;
          width: 72px;
          height: 42px;
          background-color: inherit;
          -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
          clip-path: polygon(100% 0, 0 0, 100% 100%);
          z-index: 1;
        }
      }
    }

    .testimonial-image {
      position: absolute;
      right: 45px;
      bottom: -100px;
      z-index: -1;

      @include breakpoint(max-md) {
        display: none;
      }

      img {
        @include imgw;
      }
    }
  }
}

.testimonial-section-3 {
  position: relative;
}

.testimonial-wrapper-2 {
  .testimonial-single-items {
    display: flex;
    gap: 70px;

    @include breakpoint(max-lg) {
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
      text-align: center;
    }

    .testimonial-img {
      display: block;
      margin: 0 auto;
      width: 136px;
      height: 136px;
      border: 6px solid #fff;
      object-fit: cover;
      border-radius: 50%;
      position: relative;
      margin-left: 20px;
      margin-top: 5px;

      @include breakpoint(max-lg) {
        text-align: center;
        margin: 5px auto 0;
      }

      &::after {
        position: absolute;
        content: "";
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: linear-gradient(90deg, #ff3726, #0c142e);
        z-index: -1;
      }
    }

    .testimonial-content {
      flex-basis: 80%;

      @include breakpoint(max-lg) {
        flex-basis: 100%;
      }

      p {
        margin: 0;
        padding: 0 0 44px 0;
        font-size: 34px;
        line-height: 1.5;

        @include breakpoint(max-xl) {
          font-size: 30px;
        }

        @include breakpoint(max-lg) {
          font-size: 26px;
          padding: 0 0 35px 0;
        }

        @include breakpoint(max-md) {
          font-size: 24px;
          padding: 0 0 35px 0;
        }

        @include breakpoint(max-sm) {
          font-size: 22px;
          padding: 0 0 25px 0;
        }
      }

      .name-job {
        display: flex;
        align-items: flex-end;
        gap: 15px;

        @include breakpoint(max-lg) {
          justify-content: center;
        }

        .separator {
          font-size: 20px;
          color: #0c142e;
        }

        .job {
          color: var(--base-color);
          margin: 0;
          font-size: 14px;
          line-height: 1.6;
          font-weight: 500;
        }
      }
    }
  }

  .client-img-items {
    position: relative;

    .client-img {
      width: 60px;
      height: 60px;
      border-radius: 60px;
      display: block;
    }

    @include flex;
    gap: 10px;

    @include breakpoint(max-lg) {
      justify-content: center;
      margin-top: 30px;
    }

    .array-button {
      position: absolute;
      bottom: 0;
      right: 0;

      @include breakpoint(max-lg) {
        display: none;
      }

      .array-prev,
      .array-next {
        background-color: white;
        box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.07);
        color: #0c142e;
        border: none;

        &:hover {
          background-color: var(--base-color);
          color: white;
        }
      }
    }
  }
}

.scroll {
  display: block;
  height: 100px;
  overflow: auto;
  margin-bottom: 10px;
  /* direction: rtl;
    text-align: left; */
}

.simplescroll::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.simplescroll::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}
.simplescroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /* margin-left: 10px; */
  background: var(--second-color);
}
.simplescroll::-webkit-scrollbar-thumb:hover {
  background: var(--base-color);
}
.simplescroll::-webkit-scrollbar-thumb:active {
  background: var(--base-color);
}

/*--------------------------------------------------------------
# Services Four
--------------------------------------------------------------*/
.services-four {
  position: relative;
  display: block;
  padding: 120px 0 90px;
  z-index: 1;
}

.services-four__single {
  position: relative;
  display: block;
  margin-bottom: 30px;
}

.services-four__img {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 1;
}

.services-four__img::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(var(--elitecons-black-rgb), 0.3);
  position: absolute;
  bottom: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease-in-out;
  z-index: 1;
}

.services-four__single:hover .services-four__img::after {
  visibility: visible;
  opacity: 1;
}

.services-four__img img {
  width: 100%;
  transform: scale(1);
  transition: all 0.4s ease-in-out;
  object-fit: cover;
}

.services-four__single:hover .services-four__img img {
  transform: scale(1.1);
}

.services-four__content {
  position: relative;
  display: block;
  border-radius: 20px;
  background-color: var(--bs-white);
  border-bottom: 2px solid var(--base-color);
  box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.05);
  margin: -200px 20px 0;
  padding: 32px 30px 30px;
  z-index: 3;
}

.services-four__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 26px;
}

.services-four__title a {
  color: var(--elitecons-black);
}

.services-four__title a:hover {
  color: var(--elitecons-base);
}

.services-four__text {
  margin-top: 6px;
  margin-bottom: 33px;
}

.services-four__btn-box {
  position: relative;
  display: block;
}

.services-four__btn {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.services-four__btn span {
  font-size: 14px;
}

.services-four__btn:hover {
  color: var(--elitecons-black);
}

/* ================== Divider =================== */
.custom-shape-divider-top-1744096523 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-top-1744096523 svg {
  position: relative;
  display: block;
  width: calc(134% + 1.3px);
  height: 83px;
  transform: rotateY(180deg);
}

.custom-shape-divider-top-1744096523 .shape-fill {
  fill: #ffffff;
}

.custom-shape-divider-top-17440965234 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-top-17440965234 svg {
  position: relative;
  display: block;
  width: calc(134% + 1.3px);
  height: 83px;
  transform: rotateY(180deg);
}

.custom-shape-divider-top-17440965234 .shape-fill {
  fill: #8fa1bb;
}

.custom-shape-divider-top-1744096283 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-top-1744096283 svg {
  position: relative;
  display: block;
  width: calc(134% + 1.3px);
  height: 81px;
}

.custom-shape-divider-top-1744096283 .shape-fill {
  fill: #f18c1f;
}

.custom-shape-divider-top-1744096912 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-top-1744096912 svg {
  position: relative;
  display: block;
  width: calc(185% + 1.3px);
  height: 83px;
  transform: rotateY(180deg);
}

.custom-shape-divider-top-1744096912 .shape-fill {
  fill: #fceedf;
}

/* slider */
.custom-shape-divider-bottom-1744098144 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1744098144 svg {
  position: relative;
  display: block;
  width: calc(160% + 1.3px);
  height: 83px;
  transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1744098144 .shape-fill {
  fill: #ffffff;
}

@media (max-width: 991.98px) {
  .custom-shape-divider-top-1744096912 svg {
    height: 20px;
  }
  .custom-shape-divider-top-1744096523 svg {
    height: 20px;
  }
  .custom-shape-divider-top-1744096283 svg {
    height: 20px;
  }
  .custom-shape-divider-top-1744096283 svg {
    height: 20px;
  }
  .custom-shape-divider-bottom-1744098144 svg {
    height: 20px;
  }
}

/* ================ Pagination ================*/
.pagination {
  gap: 10px;
  box-shadow: none;
}
.pagination .page-link {
  width: 2rem;
  height: 2rem;
  font-size: 0.65rem;
  font-weight: 500;
  border-radius: 50% !important;
  color: var(--base-color);
  transition: all 0.2s;
  border-color: rgba(0, 0, 0, 0.1);
}
.active > .page-link,
.page-link.active,
.pagination .page-link:hover {
  z-index: 3;
  color: white;
  background-color: var(--base-color);
  border-color: var(--base-color);
}
.disabled > .page-link {
  z-index: 3;
  color: rgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
}

/* Paket Tour */

.feature-benefit-items {
  margin-top: 30px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  z-index: 9;
  background-color: white;
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);

  .icon-box-shape {
    position: absolute;
    top: -35px;
    right: -10px;
  }

  .feature-content {
    box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);
    background-color: white;
    /* padding: 40px 50px; */
    padding: 20px 40px 40px 40px;
    border-radius: 10px;

    @include breakpoint(max-md) {
      padding: 40px;
    }

    @include breakpoint(max-sm) {
      padding: 30px;
    }

    h4 {
      margin-bottom: 15px;

      a {
        &:hover {
          color: var(--base-color);
        }
      }
    }

    p {
      margin: 0 0 20px 0;
    }

    .icon {
      width: 98px;
      height: 98px;
      line-height: 80px;
      text-align: center;
      border-radius: 50%;
      background-color: var(--second-color);
      border: 9px solid white;
      margin: 0 0 -100px 0;
      z-index: 9;
      position: relative;
      @include transition;

      @include breakpoint(max-sm) {
        width: 80px;
        height: 80px;
        line-height: 60px;
        margin: 0 0 -70px 0;
      }
    }
  }

  .feature-button {
    padding: 25px 40px;
    text-align: right;
    background-color: #e4e7eb;
    @include transition;

    .link-btn {
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 1.3px;
      color: var(--second-color);
      position: relative;
      z-index: 9;
    }
  }

  .bg-button-shape {
    position: absolute;
    bottom: -68%;
    right: -31%;
    z-index: 1;
  }

  &:hover {
    .feature-content {
      .icon {
        background-color: var(--base-color);
      }
    }

    .feature-button {
      background-color: var(--base-color);

      .link-btn {
        color: white;
      }
    }
  }
}

/* ==============Keunggulan=============== */

.how-works-items {
  margin-top: 30px;
  text-align: center;

  .title {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 21px;
    background-color: #ecf0f4;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
  }

  .icon-box {
    background-image: url('https://placehold.co/150');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0;
    border-radius: 0;
    padding: 20px 0 135px 0;

    .icon {
      .icon-2 {
        display: none;
      }
    }
  }

  &:hover {
    .title {
      background-color: var(--second-color);

      a {
        color: white;
      }
    }

    .icon-box {
      .icon {
        .icon-2 {
          display: block;
          text-align: center !important;
          margin: 0 auto;
        }

        .icon-1 {
          display: none;
        }
      }
    }
  }

  &.active {
    .title {
      background-color: var(--second-color);

      a {
        color: white;
      }
    }

    .icon-box {
      .icon {
        .icon-2 {
          display: block;
          text-align: center !important;
          margin: 0 auto;
        }

        .icon-1 {
          display: none;
        }
      }
    }
  }
}

/* Share button */

.elements-social ul {
  margin-bottom: 0;
  list-style: none;
  padding: 0;
}
.small-icon li {
  margin: 0 7px;
}
.elements-social ul li:first-child {
  margin-left: 0 !important;
}
.elements-social ul li {
  display: inline-block;
}
.social-icon-style-09 ul.light li a {
  border-color: rgba(255, 255, 255, 0.3);
}
.elements-social .light li a {
  color: white;
}
.social-icon-style-09 ul li a {
  z-index: 9;
  border: 1px solid rgba(35, 35, 35, 0.15);
  border-radius: 100%;
  position: relative;
}
.elements-social ul li a {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: 0.3s cubic-bezier(0.12, 0, 0.39, 0);
  transition: 0.3s cubic-bezier(0.12, 0, 0.39, 0);
}
.social-icon-style-09 ul.light li a:hover {
  color: var(--second-color) !important;
}
.social-icon-style-09 ul.light li a span {
  background-color: white;
}
.social-icon-style-09 ul li a span {
  display: block;
  border-radius: 100%;
  height: 100%;
  width: 100%;
  top: -1px;
  left: -1px;
  padding: 1px;
  box-sizing: content-box;
  margin: 0;
  position: absolute;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 0;
  -webkit-transition: 0.5s cubic-bezier(0.12, 0, 0.39, 0);
  transition: 0.5s cubic-bezier(0.12, 0, 0.39, 0);
  pointer-events: none;
  z-index: -1;
  background-color: black;
}
.social-icon-style-09 ul li a:hover span {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.small-icon a {
  font-size: 18px;
  width: 40px;
  height: 40px;
}

/* 1 */
.elements-social ul {
  margin-bottom: 0;
  list-style: none;
  padding: 0;
}
.small-icon li {
  margin: 0 5px;
}
.elements-social ul li:first-child {
  margin-left: 0 !important;
}
.elements-social ul li {
  display: inline-block;
}
.social-icon-style-1 ul.dark li a {
  border-color: rgba(0, 0, 0, 0.3);
}
.elements-social .dark li a {
  color: black;
}
.social-icon-style-1 ul li a {
  z-index: 9;
  border: 1px solid rgba(35, 35, 35, 0.15);
  border-radius: 100%;
  position: relative;
}
.elements-social ul li a {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: 0.3s cubic-bezier(0.12, 0, 0.39, 0);
  transition: 0.3s cubic-bezier(0.12, 0, 0.39, 0);
}
.social-icon-style-1 ul.dark li a:hover {
  /* color: var(--second-color) !important; */
  color: white;
}
.social-icon-style-1 ul.light li a span {
  background-color: white;
}
.social-icon-style-1 ul li a span {
  display: block;
  border-radius: 100%;
  height: 100%;
  width: 100%;
  top: -1px;
  left: -1px;
  padding: 1px;
  box-sizing: content-box;
  margin: 0;
  position: absolute;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 0;
  -webkit-transition: 0.5s cubic-bezier(0.12, 0, 0.39, 0);
  transition: 0.5s cubic-bezier(0.12, 0, 0.39, 0);
  pointer-events: none;
  z-index: -1;
  background-color: var(--second-color);
}
.social-icon-style-1 ul li a:hover span {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.small-icon a {
  font-size: 18px;
  width: 40px;
  height: 40px;
}

/* Footer */
.link-footer a:hover {
  color: var(--base-color) !important;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}


.vertical-lines {
  background-image: url('https://placehold.co/150');
  background-repeat: repeat;
  background-position: center center;
}

.vertical-lines + #footer {
  background-image: url('https://placehold.co/150');
  background-repeat: repeat;
  background-position: center center;
}

.border-radius-none{
    border-radius:0px !important;
}



/* whatsapp float */
.cbh-phone {
    display: block;
    position: fixed;
    left: -50px;
    bottom: -55px;
    visibility: hidden;
    background-color: transparent;
    width: 200px;
    height: 200px;
    cursor: pointer;
    z-index: 999;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -webkit-transition: visibility .5s;
    -moz-transition: visibility .5s;
    -o-transition: visibility .5s;
    transition: visibility .5s
}

.cbh-phone.cbh-show {
    visibility: visible
}

.cbh-phone.cbh-static1 {
    opacity: .6
}

.cbh-phone.cbh-hover1 {
    opacity: 1
}

.cbh-ph-circle {
    width: 110px;
    height: 110px;
    top: 40px;
    left: 40px;
    position: absolute;
    background-color: transparent;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid rgba(30,30,30,.4);
    opacity: .1;
    -webkit-animation: cbh-circle-anim 1.2s infinite ease-in-out;
    -moz-animation: cbh-circle-anim 1.2s infinite ease-in-out;
    -ms-animation: cbh-circle-anim 1.2s infinite ease-in-out;
    -o-animation: cbh-circle-anim 1.2s infinite ease-in-out;
    animation: cbh-circle-anim 1.2s infinite ease-in-out;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s
}

.cbh-phone.cbh-active .cbh-ph-circle1 {
    -webkit-animation: cbh-circle-anim 1.1s infinite ease-in-out!important;
    -moz-animation: cbh-circle-anim 1.1s infinite ease-in-out!important;
    -ms-animation: cbh-circle-anim 1.1s infinite ease-in-out!important;
    -o-animation: cbh-circle-anim 1.1s infinite ease-in-out!important;
    animation: cbh-circle-anim 1.1s infinite ease-in-out!important
}

.cbh-phone.cbh-static .cbh-ph-circle {
    -webkit-animation: cbh-circle-anim 2.2s infinite ease-in-out!important;
    -moz-animation: cbh-circle-anim 2.2s infinite ease-in-out!important;
    -ms-animation: cbh-circle-anim 2.2s infinite ease-in-out!important;
    -o-animation: cbh-circle-anim 2.2s infinite ease-in-out!important;
    animation: cbh-circle-anim 2.2s infinite ease-in-out!important
}

.cbh-phone.cbh-hover .cbh-ph-circle {
    border-color: rgba(0,175,242,1);
    opacity: .5
}

.cbh-phone.cbh-green.cbh-hover .cbh-ph-circle {
    border-color: rgba(117,235,80,1);
    opacity: .5
}

.cbh-phone.cbh-green .cbh-ph-circle {
    border-color: rgba(0,175,242,1);
    opacity: .5
}

.cbh-phone.cbh-gray.cbh-hover .cbh-ph-circle {
    border-color: rgba(204,204,204,1);
    opacity: .5
}

.cbh-phone.cbh-gray .cbh-ph-circle {
    border-color: rgba(117,235,80,1);
    opacity: .5
}

.cbh-ph-circle-fill {
    width: 74px;
    height: 74px;
    top: 58px;
    left: 58px;
    position: absolute;
    background-color: #000;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid transparent;
    opacity: .1;
    -webkit-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out;
    -moz-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out;
    -ms-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out;
    -o-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out;
    animation: cbh-circle-fill-anim 2.3s infinite ease-in-out;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s
}

.cbh-phone.cbh-active .cbh-ph-circle-fill {
    -webkit-animation: cbh-circle-fill-anim 1.7s infinite ease-in-out!important;
    -moz-animation: cbh-circle-fill-anim 1.7s infinite ease-in-out!important;
    -ms-animation: cbh-circle-fill-anim 1.7s infinite ease-in-out!important;
    -o-animation: cbh-circle-fill-anim 1.7s infinite ease-in-out!important;
    animation: cbh-circle-fill-anim 1.7s infinite ease-in-out!important
}

.cbh-phone.cbh-static .cbh-ph-circle-fill {
    -webkit-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out!important;
    -moz-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out!important;
    -ms-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out!important;
    -o-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out!important;
    animation: cbh-circle-fill-anim 2.3s infinite ease-in-out!important;
    opacity: 0!important
}

.cbh-phone.cbh-hover .cbh-ph-circle-fill {
    background-color: rgba(0,175,242,.5);
    opacity: .75!important
}

.cbh-phone.cbh-green.cbh-hover .cbh-ph-circle-fill {
    background-color: rgba(117,235,80,.5);
    opacity: .75!important
}

.cbh-phone.cbh-green .cbh-ph-circle-fill {
    background-color: rgba(0,175,242,.5);
    opacity: .75!important
}

.cbh-phone.cbh-gray.cbh-hover .cbh-ph-circle-fill {
    background-color: rgba(204,204,204,.5);
    opacity: .75!important
}

.cbh-phone.cbh-gray .cbh-ph-circle-fill {
    background-color: rgba(117,235,80,.5);
    opacity: 1!important
}

.cbh-ph-img-circle1 {
    width: 50px;
    height: 50px;
    top: 70px;
    left: 70px;
    position: absolute;
    background-image: url('https://placehold.co/150');
    background-size: 40px 40px;
    background-color: rgba(30,30,30,.1);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid transparent;
    opacity: 1;
    -webkit-animation: cbh-circle-img-anim 1s infinite ease-in-out;
    -moz-animation: cbh-circle-img-anim 1s infinite ease-in-out;
    -ms-animation: cbh-circle-img-anim 1s infinite ease-in-out;
    -o-animation: cbh-circle-img-anim 1s infinite ease-in-out;
    animation: cbh-circle-img-anim 1s infinite ease-in-out
}

.cbh-phone.cbh-active .cbh-ph-img-circle1 {
    -webkit-animation: cbh-circle-img-anim 1s infinite ease-in-out!important;
    -moz-animation: cbh-circle-img-anim 1s infinite ease-in-out!important;
    -ms-animation: cbh-circle-img-anim 1s infinite ease-in-out!important;
    -o-animation: cbh-circle-img-anim 1s infinite ease-in-out!important;
    animation: cbh-circle-img-anim 1s infinite ease-in-out!important
}

.cbh-phone.cbh-static .cbh-ph-img-circle1 {
    -webkit-animation: cbh-circle-img-anim 0 infinite ease-in-out!important;
    -moz-animation: cbh-circle-img-anim 0 infinite ease-in-out!important;
    -ms-animation: cbh-circle-img-anim 0 infinite ease-in-out!important;
    -o-animation: cbh-circle-img-anim 0 infinite ease-in-out!important;
    animation: cbh-circle-img-anim 0 infinite ease-in-out!important
}

.cbh-phone.cbh-hover .cbh-ph-img-circle1 {
    background-color: rgba(0,175,242,1)
}

.cbh-phone.cbh-green.cbh-hover .cbh-ph-img-circle1:hover {
    background-color: rgba(117,235,80,1)
}

.cbh-phone.cbh-green .cbh-ph-img-circle1 {
    background-color: rgba(0,175,242,1);
    background-color: rgba(0,175,242,1)
}

.cbh-phone.cbh-gray.cbh-hover .cbh-ph-img-circle1 {
    background-color: rgba(204,204,204,1)
}

.cbh-phone.cbh-gray .cbh-ph-img-circle1 {
    background-color: rgba(117,235,80,1)
}

@-moz-keyframes cbh-circle-anim {
    0% {
        -moz-transform: rotate(0deg) scale(0.5) skew(1deg);
        opacity: .1;
        -moz-opacity: .1;
        -webkit-opacity: .1;
        -o-opacity: .1
    }

    30% {
        -moz-transform: rotate(0deg) scale(.7) skew(1deg);
        opacity: .5;
        -moz-opacity: .5;
        -webkit-opacity: .5;
        -o-opacity: .5
    }

    100% {
        -moz-transform: rotate(0deg) scale(1) skew(1deg);
        opacity: .6;
        -moz-opacity: .6;
        -webkit-opacity: .6;
        -o-opacity: .1
    }
}

@-webkit-keyframes cbh-circle-anim {
    0% {
        -webkit-transform: rotate(0deg) scale(0.5) skew(1deg);
        -webkit-opacity: .1
    }

    30% {
        -webkit-transform: rotate(0deg) scale(.7) skew(1deg);
        -webkit-opacity: .5
    }

    100% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg);
        -webkit-opacity: .1
    }
}

@-o-keyframes cbh-circle-anim {
    0% {
        -o-transform: rotate(0deg) kscale(0.5) skew(1deg);
        -o-opacity: .1
    }

    30% {
        -o-transform: rotate(0deg) scale(.7) skew(1deg);
        -o-opacity: .5
    }

    100% {
        -o-transform: rotate(0deg) scale(1) skew(1deg);
        -o-opacity: .1
    }
}

@keyframes cbh-circle-anim {
    0% {
        transform: rotate(0deg) scale(0.5) skew(1deg);
        opacity: .1
    }

    30% {
        transform: rotate(0deg) scale(.7) skew(1deg);
        opacity: .5
    }

    100% {
        transform: rotate(0deg) scale(1) skew(1deg);
        opacity: .1
    }
}

@-moz-keyframes cbh-circle-fill-anim {
    0% {
        -moz-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }

    50% {
        -moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);
        opacity: .2
    }

    100% {
        -moz-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }
}

@-webkit-keyframes cbh-circle-fill-anim {
    0% {
        -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }

    50% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg);
        opacity: .2
    }

    100% {
        -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }
}

@-o-keyframes cbh-circle-fill-anim {
    0% {
        -o-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }

    50% {
        -o-transform: rotate(0deg) scale(1) skew(1deg);
        opacity: .2
    }

    100% {
        -o-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }
}

@keyframes cbh-circle-fill-anim {
    0% {
        transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }

    50% {
        transform: rotate(0deg) scale(1) skew(1deg);
        opacity: .2
    }

    100% {
        transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }
}

@keyframes cbh-circle-img-anim {
    0% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    100%,50% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
}

@-moz-keyframes cbh-circle-img-anim {
    0% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    10% {
        -moz-transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -moz-transform: rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -moz-transform: rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -moz-transform: rotate(25deg) scale(1) skew(1deg)
    }

    100%,50% {
        -moz-transform: rotate(0deg) scale(1) skew(1deg)
    }
}

@-webkit-keyframes cbh-circle-img-anim {
    0% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg)
    }

    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }

    100%,50% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg)
    }
}

@-o-keyframes cbh-circle-img-anim {
    0% {
        -o-transform: rotate(0deg) scale(1) skew(1deg)
    }

    10% {
        -o-transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -o-transform: rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -o-transform: rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -o-transform: rotate(25deg) scale(1) skew(1deg)
    }

    100%,50% {
        -o-transform: rotate(0deg) scale(1) skew(1deg)
    }
}

.cbh-phone.cbh-green .cbh-ph-circle {
    border-color: #00f2a4
}

.cbh-phone.cbh-green .cbh-ph-circle-fill {
    background-color: #00f2a4
}

.cbh-phone.cbh-green .cbh-ph-img-circle1 {
    background-color: #2ecb71
}

/* Hero Slider Styles */
.hero-slider-section {
    position: relative;
    z-index: 1;
}

.hero-slider {
    height: 550px;
    width: 100%;
}

.hero-slide {
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.hero-slide-1 {
    background-image: url('https://pub-837161880d934c948fd462532e83b6e3.r2.dev/hero-banner/Web%20PC%2001%20-%201600%20x%20640.jpg');
}

.hero-slide-2 {
    background-image: url('https://pub-837161880d934c948fd462532e83b6e3.r2.dev/hero-banner/Web%20PC%2002%20-%201600%20x%20640.jpg');
}



.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-slider .swiper-pagination {
    bottom: 20px;
}

.hero-slider .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.7);
    width: 12px;
    height: 12px;
}

.hero-slider .swiper-pagination-bullet-active {
    background: var(--base-color);
}

.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    transition: all 0.3s ease;
}

.hero-slider .swiper-button-next:hover,
.hero-slider .swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.5);
    color: white;
}

.hero-slider .swiper-button-next::after,
.hero-slider .swiper-button-prev::after {
    font-size: 18px;
    font-weight: bold;
}

/* Responsive Hero Slider */
@media (max-width: 768px) {
    .hero-slider {
        height: 420px;
    }
    
    /* Mobile Images - Square format 1000x1000 */
    .hero-slide-1 {
        background-image: url('https://pub-837161880d934c948fd462532e83b6e3.r2.dev/hero-banner/Web%20Mobile%2001%20-%201000%20x%201000.jpg');
    }
    
    .hero-slide-2 {
        background-image: url('https://pub-837161880d934c948fd462532e83b6e3.r2.dev/hero-banner/Web%20Mobile%2002%20-%201000%20x%201000.jpg');
    }
    
    .hero-slider .swiper-button-next,
    .hero-slider .swiper-button-prev {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-slider {
        height: 340px;
    }
}