/*
 * Zakharious Openmage Theme CSS
 * Optimized and extracted custom components
 */

/* ==========================================================================
   1. CORE RESET & CSS VARIABLES
   ========================================================================== */

:root {
    --transition: all .35s ease;
    --font-primary: "Sora", sans-serif;
    --font-montez: "Montez", sans-serif;
    --font-fontawesome: "Font Awesome 7 Free";
    --primary: #0008CA;
    --primary-hover: #161922;
    --primary-100: rgba(0, 8, 202, .1);
    --secondary: #EBF0F4;
    --heading: #00026E;
    --text: #22292F;
    --text-hover: #585B6F;
    --text-two: #535B5F;
    --border: rgba(118, 118, 118, .3);
    --bg: #22292F;
    --gray: #E7E5E4;
    --white: #FFFFFF;
    --white-200: rgba(255, 255, 255, .2);
    --white-300: rgba(255, 255, 255, .3);
    --white-500: rgba(255, 255, 255, .5);
    --success: #3CB371;
    --success-hover: #161922;
    --warning: #F7921F;
    --warning-hover: #cb7717;
    --info: #02A5CE;
    --info-hover: #113d48;
    --danger: #DC3545;
    --danger-hover: #bb1828;
    --bs-body-bg: #f8f9fa;
}

* {
    margin: 0;
    padding: 0
}

body,
html {
    color: var(--text);
    padding: 0 !important;
    font-family: var(--font-primary)
}

.ff-montez {
    font-family: var(--font-montez) !important
}

p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--text)
}

a,
a:hover,
a:focus {
    transition: var(--transition);
    text-decoration: none;
    outline: 0 solid transparent;
    color: var(--heading)
}

ul,
ol {
    margin-bottom: 0
}

ul li,
ol li {
    line-height: 1.7
}

img {
    max-width: 100%;
    height: auto
}

input:required,
textarea:required,
input:invalid,
textarea:invalid {
    box-shadow: none !important
}

.right-side-zakharious-offcanvas .offcanvas-body {
    padding: 40px 20px;
    scrollbar-width: thin
}

@keyframes experience-spin {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

.trip-card .trip-body {
    padding: 28px 24px
}

@keyframes video-sonar {
    0% {
        opacity: 1;
        transform: scale(.5)
    }
    to {
        opacity: 0;
        transform: scale(1.3)
    }
}

.faq-accordion .accordion-item .accordion-body {
    padding: 0 24px 30px;
    color: var(--text);
    font-size: 16px;
    border-radius: 0 0 10px 10px
}

.faq-accordion.style-two .accordion-item .accordion-body {
    background-color: var(--primary);
    font-size: 16px;
    color: var(--white);
    padding: 0 24px 16px
}

.faq-accordion.style-three .accordion-item .accordion-body {
    background-color: var(--secondary);
    font-size: 16px;
    color: var(--heading);
    padding: 16px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.faq-accordion.style-three .accordion-item .accordion-body .faq-image {
    width: 160px;
    flex-shrink: 0
}

/* ==========================================================================
   10. FOOTER SECTION
   ========================================================================== */

.footer-card {
    position: relative;
    display: flex;
    flex-direction: column
}

.footer-card p {
    font-size: 18px
}

.footer-card .footer-logo {
    margin-bottom: 32px
}

.footer-card .card-title {
    position: relative;
    z-index: 1
}

.footer-card .card-title:before {
    width: 60px;
    height: 2px;
    bottom: -15px;
    left: 0;
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 2px;
    background: var(--white-500)
}

.footer-card .card-title:after {
    width: 10px;
    height: 2px;
    bottom: -15px;
    left: 65px;
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 2px;
    background: var(--white-300)
}

.footer-card .social-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 30px
}

.footer-card .social-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 16px;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, .2);
    transition: var(--transition)
}

.footer-card .social-nav a:hover,
.footer-card .social-nav a:focus {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white)
}

.footer-card .footer-nav {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
    padding-left: 0
}

.footer-card .footer-nav li a {
    position: relative;
    z-index: 1;
    color: var(--white);
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 400
}

.footer-card .footer-nav li a:hover,
.footer-card .footer-nav li a:focus {
    color: var(--warning);
    padding-left: .5rem
}

.footer-card .gallery-post {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

.footer-card .gallery-post li {
    width: calc(33.333333% - 8px);
    border-radius: 8px;
    transition: var(--transition)
}

.footer-card .gallery-post li a {
    display: block
}

.footer-card .gallery-post li img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 8px
}

.footer-card .gallery-post li:hover,
.footer-card .gallery-post li:focus {
    transform: translateY(-5px)
}

.copyright-wrapper {
    padding-top: 32px;
    padding-bottom: 40px
}

.copyright-wrapper .copyright {
    font-size: 16px;
    color: var(--secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap
}

.copyright-wrapper .copyright a {
    font-size: 16px;
    color: var(--secondary);
    font-weight: 500
}

.copyright-wrapper .copyright a:hover,
.copyright-wrapper .copyright a:focus {
    color: var(--warning)
}

.footer-bottom-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-start
}

.footer-bottom-nav a {
    color: var(--secondary);
    font-size: 16px;
    line-height: 1.4;
    text-transform: capitalize
}

.footer-bottom-nav a:hover,
.footer-bottom-nav a:focus {
    color: var(--warning)
}

.footer-top-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 48px;
    width: 100%;
}

.footer-top-content .ft-item {
    display: flex;
    align-items: center;
    gap: 24px
}

.footer-top-content .ft-item .icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background-color: #ffffff1a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition)
}

.footer-top-content .ft-item:hover .icon,
.footer-top-content .ft-item:focus .icon {
    background-color: var(--primary)
}

.footer-top-content .vr-line {
    width: 1px;
    height: 75px;
    background: var(--white-300);
    flex-shrink: 0
}

.footer-wrapper {
    position: relative;
    z-index: 1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

.footer-wrapper .plane-img {
    position: absolute;
    top: 20%;
    left: 1%;
    z-index: 0;
    transform: translateY(-50%)
}

.footer-wrapper .tree-img {
    position: absolute;
    top: 50%;
    right: 1%;
    z-index: 0;
    transform: translateY(-50%)
}

.footer-wrapper .top2 {
    position: absolute;
    top: -1px;
    left: 0;
    z-index: 1;
    width: 100%;
    background-image: url("../images/divider-bg.webp");
    background-repeat: no-repeat;
    height: 90px;
}

.footer-wrapper .top2 img {
    width: 100%;
    height: 70px;
    -o-object-fit: cover;
    object-fit: cover
}

.footer-wrapper:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: var(--heading);
    opacity: .98
}

.footer-wrapper .border-top {
    border-top-color: #f9f7f333 !important
}

.footer-wrapper .form-check-label {
    color: var(--white)
}

.footer-wrapper .form-check .form-check-input {
    border-radius: 4px;
    background: #fff3;
    border-color: transparent
}
.footer-wrapper .form-check .form-check-input[type=radio] .footer-wrapper .form-check .form-check-input:checked[type=radio] {
    border-radius: 100%;
}

.footer-wrapper .form-check .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary)
}

.footer-wrapper.style-two {
    border-radius: 18px
}

.footer-wrapper.style-two:after {
    border-radius: 18px
}

.copyright-wrapper img {
    margin: 0 !important;
}

/* ==========================================================================
   11. SUBPAGES: TOUR DETAILS & ITINERARY
   ========================================================================== */

.tour-details-meta {
    border-top: 1px solid rgba(118, 118, 118, .3);
    border-bottom: 1px solid rgba(118, 118, 118, .3)
}

.tour-details-content {
    display: flex;
    flex-direction: column;
    gap: 30px
}

.tour-details-content img {
    border-radius: 18px;
    width: 100%
}

.tour-details-content h1,
.tour-details-content .h1,
.tour-details-content h2,
.tour-details-content .h2,
.tour-details-content h3,
.tour-details-content .h3,
.tour-details-content h4,
.tour-details-content .h4,
.tour-details-content h5,
.tour-details-content .h5,
.tour-details-content h6,
.tour-details-content .h6,
.tour-details-content p {
    margin-bottom: 0 !important
}

.tour-details-content ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.tour-details-content ul li {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--heading);
    font-weight: 500
}

.tour-details-content ul li i {
    font-size: 120%;
    color: var(--primary)
}

.tour-details-content ul.style-two li {
    flex: 0 0 calc(50% - 6px);
    width: calc(50% - 6px)
}

.tour-details-content ul.style-two li i {
    font-size: 120%;
    color: var(--primary)
}

.tour-booking-summary ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--heading)
}

.tour-booking-summary ul li:last-child {
    font-weight: 600
}

/* ==========================================================================
   13. OTHER CUSTOM COMPONENTS & HELPERS
   ========================================================================== */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    color: var(--heading);
    font-weight: 600;
    line-height: 1.3
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
    letter-spacing: -1px
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
    letter-spacing: -.5px
}

.border,
.border-end,
.border-start,
.border-top,
.border-bottom {
    border-color: #2626294d !important
}

.bg-img {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: 320px
}

.g-4,
.gy-4 {
    --bs-gutter-y: 30px
}

.g-4,
.gx-4 {
    --bs-gutter-x: 30px
}

.gap-4 {
    gap: 30px !important
}

.fz-14 {
    font-size: 14px !important
}

.pt-100 {
    padding-top: 180px
}

.shadow-lg {
    box-shadow: 0 1rem 3rem #2f5bea2d !important
}

.bg-primary {
    background-color: var(--primary) !important
}

.bg-secondary {
    background-color: var(--secondary) !important
}

.bg-dark {
    background-color: var(--heading) !important
}

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

.text-dark,
.text-heading {
    color: var(--heading) !important
}

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

.divider {
    width: 100%;
    display: block;
    height: 60px
}

.divider-sm {
    width: 100%;
    display: block;
    height: 50px
}

.divider-xsm {
    width: 100%;
    display: block;
    height: 30px
}

.divider-border {
    width: 100%;
    display: block;
    height: 1px;
    background-color: rgba(118, 118, 118, .3);
}

.zakharious-dd-menu .divider {
    display: none !important;
}

.section-heading .sub-title {
    font-size: 24px;
    margin-bottom: .25rem;
    text-transform: capitalize;
    font-family: var(--font-montez) !important;
    display: inline-block;
    color: var(--primary)
}

.section-heading h2 {
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.2;
    text-transform: capitalize;
    color: var(--heading)
}

#preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    top: 0;
    left: 0;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.jarallax {
    position: relative;
    z-index: 0
}

.about-card-sm .icon {
    position: relative;
    z-index: 1;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
    background-color: var(--secondary);
    transition: var(--transition);
    font-size: 2rem
}

.about-card-sm .icon:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--secondary);
    z-index: -5;
    transition: var(--transition)
}

.about-card-sm .icon:before {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--primary);
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    z-index: -100;
    transition: var(--transition)
}

.about-card-sm .icon.bg-white:after {
    background-color: var(--white)
}

.about-card-sm .line {
    width: 1px;
    height: 60px;
    background: var(--text);
    flex-shrink: 0
}

.about-card-sm:hover .icon:before,
.about-card-sm:focus .icon:before {
    top: -9px;
    left: -9px
}

.feature-sm-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px
}

.feature-sm-card .icon {
    max-width: 80px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 50%;
    background: var(--secondary);
    position: relative;
    flex-shrink: 0
}

.feature-sm-card .icon:before {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--primary);
    transition: var(--transition);
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    z-index: -1
}

.feature-sm-card.style-two .icon {
    max-width: 64px;
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    border-radius: 10px;
    background: var(--secondary);
    position: relative;
    flex-shrink: 0
}

.feature-sm-card.style-two .icon:before {
    display: none
}

.map-widget iframe {
    width: 100%;
    height: 390px;
    border: 0;
    border-radius: 18px
}

.sidebar-widget {
    padding: 30px;
    border-radius: 18px;
    background: var(--secondary)
}
.sidebar-widget.whiteBg {
    background: var(--white);
}

.sidebar-checkbox-list,
.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.sidebar-checkbox-list li,
.checkbox-list li {
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--white)
}
.sidebar-widget.whiteBg .sidebar-checkbox-list li {
    background: var(--secondary);
}

.sidebar-checkbox-list .form-check,
.checkbox-list .form-check {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.sidebar-checkbox-list .form-check .form-check-input,
.checkbox-list .form-check .form-check-input {
    margin-top: 0;
    border-radius: 2px;
    border: 1px solid var(--text)
}

.sidebar-checkbox-list .form-check .form-check-input[type=radio],
.checkbox-list .form-check .form-check-input[type=radio] {
    border-radius: 100%;
}

.sidebar-checkbox-list .form-check .form-check-input:checked[type=checkbox],
.checkbox-list .form-check .form-check-input:checked[type=checkbox] {
    background-color: transparent;
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
}

.sidebar-checkbox-list .form-check .form-check-label,
.sidebar-checkbox-list .form-check span,
.checkbox-list .form-check .form-check-label,
.checkbox-list .form-check span {
    color: var(--text)
}

.choose-us-section-four {
    position: relative;
    z-index: 9
}

.choose-us-section-four .hotair-ballon {
    position: absolute;
    z-index: -1;
    bottom: -10%;
    left: 50%
}

.choose-us-main-img {
    position: relative;
    z-index: 9;
    margin-left: 30px
}

.choose-us-main-img .choose-us-image {
    max-width: 350px
}

.choose-us-main-img .choose-us-image img {
    width: 100%;
    height: 100%;
    border-radius: 18px
}

.choose-us-main-img .choose-us-one {
    max-width: 350px;
    position: absolute;
    bottom: -40%;
    left: 43%
}

.choose-us-main-img .choose-us-one img {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    border: 6px solid var(--white)
}

.trip-card {
    border-radius: 18px;
    background: var(--secondary);
    transition: var(--transition)
}

.trip-card img {
    border-radius: 18px 18px 0 0;
    width: 100%
}

.trip-card .trip-title {
    transition: var(--transition)
}

/* .trip-card .trip-meta {
    margin-bottom: 30px
} */

.trip-card .trip-meta .badge {
    padding: 8px 14px;
    color: var(--white);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .25);
    font-size: 16px;
    font-weight: 500;
    border-radius: 20rem
}

.trip-card .trip-meta ul li {
    color: var(--heading)
}

.trip-card .trip-meta .line {
    width: 1px;
    height: 85px;
    background: var(--border);
    flex-shrink: 0
}

.trip-card .trip-meta .trip-price {
    display: flex;
    align-items: baseline;
    font-size: 28px;
    color: var(--heading)
}

.trip-card .trip-meta .trip-price span {
    font-size: 16px;
    color: var(--text);
    text-decoration: line-through
}

.trip-card:hover,
.trip-card:focus {
    transform: translateY(-8px)
}

.trip-card:hover .trip-title,
.trip-card:focus .trip-title {
    color: var(--primary)
}

.trip-card.style-two .trip-meta {
    margin-bottom: 0
}

.trip-card.style-two .trip-meta ul li {
    display: flex;
    align-items: center;
    color: var(--text);
    gap: 6px;
    font-size: 14px
}

.trip-card.style-two .trip-meta ul li i {
    color: var(--primary)
}

.trip-card.style-two .trip-meta .trip-price {
    font-size: 20px;
    font-weight: 600
}

.trip-card.style-two .trip-meta .trip-price span {
    margin-left: 4px;
    font-size: 16px;
    color: var(--text);
    text-decoration: line-through;
    font-weight: 400
}

.testionial-box-items {
    margin-top: 140px;
    border-radius: 18px;
    background: var(--secondary);
    padding: 35px
}

.testionial-box-items h3 {
    font-size: 22px;
    font-weight: 400;
    margin-top: 15px
}

.video-popup-iframe {
    display: none;
    position: fixed;
    z-index: 999999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    justify-content: center;
    align-items: center
}

.video-popup-iframe .video-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    padding: 0;
    z-index: 1
}

.video-popup-iframe .video-content .close-btn {
    position: absolute;
    top: -3rem;
    right: 0;
    z-index: 1000;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    cursor: pointer;
    color: var(--heading);
    transition: var(--transition)
}

.video-popup-iframe .video-content .close-btn:hover,
.video-popup-iframe .video-content .close-btn:focus {
    background-color: var(--heading);
    color: var(--white)
}

.comment-form .form-control {
    background-color: var(--secondary)
}

.cookiealert {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1000;
    max-width: 280px;
    padding: 30px 22px;
    border-radius: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    transition: var(--transition)
}

.cookiealert.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.cookiealert p {
    font-size: 12px;
    color: var(--text)
}

.cookiealert a {
    color: var(--white);
    text-decoration: underline;
    font-weight: 600
}

.form-control {
    border-radius: 8px;
    background: var(--white);
    height: 50px;
    font-size: 16px;
    border: 0;
    padding: 8px 20px;
    color: var(--text)
}

.form-control:focus {
    box-shadow: none
}

.form-control::-moz-placeholder {
    color: var(--text)
}

.form-control::placeholder {
    color: var(--text)
}

textarea.form-control {
    min-height: 130px
}

.faq-title {
    font-size: 24px
}

.faq-accordion .accordion {
    display: flex;
    flex-direction: column
}

.faq-accordion .accordion-item {
    position: relative;
    border-radius: 12px;
    background: var(--secondary);
    border: 0;
    margin-right: 85px
}

.faq-accordion.style-two .accordion-item {
    background-color: var(--secondary);
    margin-right: 0
}

.faq-accordion.style-three .accordion-item {
    background-color: var(--secondary);
    margin-right: 0
}

.breadcrumb-section {
    position: relative;
    z-index: 1
}

.breadcrumb-section:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00026ecc;
    z-index: -10
}

.breadcrumb-section .breadcrumb-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 112px
}

.breadcrumb-section .breadcrumb-content h1 {
    color: var(--white);
    text-align: center;
    font-size: clamp(32px, 5vw, 80px);
    line-height: 1.1;
    margin-bottom: 2rem
}

.breadcrumb-section .breadcrumb-content ul {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    border-radius: 100px;
    border: .5px solid var(--white-300);
    background: #ffffff1a
}

.breadcrumb-section .breadcrumb-content ul li {
    color: var(--white);
    font-size: 13px
}

.breadcrumb-section .breadcrumb-content ul li a {
    color: #fffc;
    font-size: 13px;
    position: relative;
    z-index: 1;
    padding-right: 20px;
    transition: var(--transition)
}

.breadcrumb-section .breadcrumb-content ul li a:hover,
.breadcrumb-section .breadcrumb-content ul li a:focus {
    color: var(--white)
}

.breadcrumb-section .breadcrumb-content ul li a:after {
    content: "\f105";
    position: absolute;
    right: -5px;
    top: 55%;
    transform: translateY(-50%);
    font-family: var(--font-fontawesome);
    font-size: 16px;
    font-weight: 900;
}

.checkout-section .form-control {
    border: 1px solid var(--border);
    border-radius: 6px;
    height: 60px
}

.checkout-section label {
    margin-bottom: 20px;
    font-weight: 600;
    color: var(--heading)
}

.order-summary ul {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.order-summary ul li {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--heading)
}

.order-summary ul li:last-child span:last-child {
    color: var(--primary);
    font-weight: 600
}

.payment-method .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary)
}

/* ==========================================================================
   2. HEADER & NAVIGATION (DROPDOWNS/SUBMENUS)
   ========================================================================== */

.header-area {
    background-color: transparent;
    transition: var(--transition);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000
}

.header-area.mobile-menu-open {
    background-color: var(--white)
}

.header-area .navbar-toggler {
    padding: 0;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    color: var(--heading);
    border: 1px solid var(--border);
    transition: var(--transition)
}

.header-area .navbar-toggler:focus {
    box-shadow: none
}

.header-area .navbar {
    padding-top: .75rem;
    padding-bottom: .75rem;
    transition: var(--transition)
}

.header-area .navbar .navbar-brand {
    margin-right: 2rem;
    line-height: 1 !important
}

.header-area .navbar-nav {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.header-area .navbar-nav li>a {
    display: inline-block;
    color: var(--heading);
    font-weight: 600;
    font-size: 1rem;
    text-transform: capitalize;
    padding-top: .5rem;
    padding-bottom: .5rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px
}

.header-area .navbar-nav li>a i {
    margin-top: 3px
}

.header-area .navbar-nav li>a:hover,
.header-area .navbar-nav li>a:focus {
    color: var(--primary)
}

.header-area .navbar-nav li .zakharious-dd-menu {
    list-style: none;
    background-color: transparent;
    position: relative;
    z-index: 100;
    top: 100%;
    width: 100%;
    border: 0;
    border-radius: .5rem;
    display: none;
    padding-left: 0
}

.header-area .navbar-nav li .zakharious-dd-menu.zakharious-megamenu {
    width: 100%;
    display: flex
}

.header-area .navbar-nav li .zakharious-dd-menu.zakharious-megamenu ul {
    list-style: none;
    padding-left: 0
}

.header-area .navbar-nav li .zakharious-dd-menu.zakharious-megamenu.megamenu-lg {
    width: 100%
}

.header-area .navbar-nav li .zakharious-dd-menu li>a {
    transition: var(--transition);
    position: relative;
    font-size: 15px;
    padding: .25rem 1rem;
    color: var(--heading);
    text-transform: capitalize;
    align-items: center;
    justify-content: space-between
}

.header-area .navbar-nav li .zakharious-dd-menu li>a:hover,
.header-area .navbar-nav li .zakharious-dd-menu li>a:focus {
    background-color: transparent;
    color: var(--primary);
    padding-left: 1.5rem
}

.header-area .navbar-nav li.zakharious-dd {
    position: relative;
    z-index: 1
}

.header-area .navbar-nav li.zakharious-dd .dropdown-toggler {
    position: absolute;
    width: 100%;
    height: 36px;
    z-index: 100;
    background-color: transparent;
    color: var(--primary);
    top: 2px;
    cursor: pointer;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 14px
}

.header-area .navbar-nav li.zakharious-dd>a {
    position: relative
}

.header-area .navbar-nav li.zakharious-dd:hover>a,
.header-area .navbar-nav li.zakharious-dd:focus>a {
    color: var(--primary)
}

.header-area .navbar-nav li.zakharious-dd .zakharious-dd .dropdown-toggler {
    right: 1rem
}

.header-area .navbar-nav li.zakharious-dd .zakharious-dd>a {
    position: relative;
    width: 100%
}

.header-area .navbar-nav li.zakharious-dd .zakharious-dd .zakharious-dd-menu {
    display: none;
    padding-left: 1rem
}

.header-area.sticky-on {
    background-color: var(--white);
    box-shadow: 0 30px 42px #2127251a
}

.header-area.style-three {
    top: 28px;
    box-shadow: none;
    padding-left: 2%;
    padding-right: 2%
}

.header-area.style-three:after {
    display: none
}

.header-area.style-three.mobile-menu-open {
    background-color: transparent
}

.header-area.style-three .navbar {
    background-color: var(--white);
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--white)
}

.header-area.style-three .navbar-nav li>a {
    color: var(--heading)
}

.header-area.style-three .navbar-nav li>a:hover,
.header-area.style-three .navbar-nav li>a:focus {
    color: var(--primary)
}

.header-area.style-three .navbar-nav li .zakharious-dd-menu {
    background-color: transparent
}

.header-area.style-three .navbar-nav li .zakharious-dd-menu li>a {
    color: var(--heading)
}

.header-area.style-three .navbar-nav li .zakharious-dd-menu li>a:hover,
.header-area.style-three .navbar-nav li .zakharious-dd-menu li>a:focus {
    background-color: transparent;
    color: var(--primary)
}

.header-area.style-three .navbar-nav li.zakharious-dd:hover>a,
.header-area.style-three .navbar-nav li.zakharious-dd:focus>a {
    color: var(--primary)
}

.header-area.style-three .navbar-nav li.zakharious-dd .dropdown-toggler {
    background-color: transparent;
    color: var(--primary)
}

.header-area.style-three.sticky-on {
    box-shadow: none;
    background-color: transparent
}

.header-area.style-three.sticky-on .navbar {
    background-color: var(--white);
    box-shadow: 0 30px 42px #2127251a;
    border: 1px solid rgba(247, 247, 247, .1)
}

.navbar-nav-scroll {
    max-height: 50vh
}

.header-four .collapse {
    justify-content: space-between !important
}

.header-four .header-navigation {
    margin-left: 0 !important
}

.header-four .navbar-brand {
    margin-left: 50px
}

.tour-details-header h2 {
    font-size: 24px
}

.header-tools {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.header-tools .account {
    display: flex;
    gap: 15px;
}

.header-minicart .block-cart.show {
    display: block;
    left: auto;
    right: 0;
    width: 20rem;
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 12px 24px;
    gap: 6px;
    border-radius: 5rem;
    border: 0;
    font-weight: 600;
    position: relative;
    height: 48px;
    min-width: auto;
    text-transform: capitalize;
    overflow: hidden;
    transition: var(--transition)
}

.btn i {
    font-size: 140%;
    transition: var(--transition)
}

.btn:active,
.btn:hover,
.btn:focus {
    box-shadow: none;
    gap: 12px
}

.btn-primary {
    background-color: var(--primary);
    color: var(--white)
}

.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-hover);
    color: var(--white)
}

.btn-light {
    background-color: var(--white);
    color: var(--heading)
}

.btn-light:active,
.btn-light:hover,
.btn-light:focus {
    background-color: var(--primary);
    color: var(--white)
}

.btn-dark {
    background-color: var(--heading);
    color: var(--white) !important
}

.btn-dark:active,
.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--white);
    color: var(--heading) !important
}

.btn-link {
    position: relative;
    z-index: 1;
    color: var(--primary);
    gap: 6px;
    padding: 0 !important;
    min-width: 0;
    height: auto;
    background-color: transparent;
    border: 0;
    text-decoration: none;
    border-radius: 0 !important
}

.btn-link:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    z-index: -1;
    background-color: var(--primary);
    transition: var(--transition)
}

.btn-link i {
    font-size: 20px;
    transition: var(--transition)
}

.btn-link:active,
.btn-link:hover,
.btn-link:focus {
    color: var(--primary-hover);
    box-shadow: none
}

.btn-link:active:after,
.btn-link:hover:after,
.btn-link:focus:after {
    background-color: var(--heading);
    width: 50%
}

.btn-group-sm>.btn,
.btn-sm {
    padding: .375rem 1.25rem;
    font-size: 12px;
    height: 40px;
    min-width: 100px
}

.btn-outline-primary {
    border: 1px solid var(--primary);
    color: var(--primary)
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--white)
}

.right-side-zakharious-offcanvas .offcanvas-header .btn-close {
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: var(--transition);
    border: 1px solid var(--border)
}

.hero-section .background-slider-nav .background-button-prev,
.hero-section .background-slider-nav .background-button-next {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--secondary);
    color: var(--heading);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-size: 17px
}

.hero-section .background-slider-nav .background-button-prev:hover,
.hero-section .background-slider-nav .background-button-prev:focus,
.hero-section .background-slider-nav .background-button-next:hover,
.hero-section .background-slider-nav .background-button-next:focus {
    background-color: var(--primary);
    color: var(--white)
}

.destination-details-wrapper .destination-details-button-prev,
.destination-details-wrapper .destination-details-button-next {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--white);
    transition: var(--transition);
    font-size: 17px;
    border: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    left: 30px;
    background-color: var(--primary)
}

.destination-details-wrapper .destination-details-button-prev:hover,
.destination-details-wrapper .destination-details-button-prev:focus,
.destination-details-wrapper .destination-details-button-next:hover,
.destination-details-wrapper .destination-details-button-next:focus {
    color: var(--white);
    background-color: var(--primary)
}

.destination-details-wrapper .destination-details-button-next {
    right: 30px;
    left: auto;
}

.tour-details-header .btn-share {
    border-radius: 30px;
    border: 1px solid var(--primary) !important;
    background: var(--white);
    color: var(--primary);
    height: 50px;
    padding: 8px 20px
}

.tour-details-header .btn-share:hover,
.tour-details-header .btn-share:focus {
    color: var(--white);
    background-color: var(--primary);
    border-color: var(--primary)
}

.faq-accordion .accordion-item .accordion-button {
    border-radius: 10px;
    background: transparent;
    color: var(--heading);
    font-size: 18px;
    font-weight: 600;
    padding: 30px 24px 24px
}

.faq-accordion .accordion-item .accordion-button:focus {
    box-shadow: none !important
}

.faq-accordion .accordion-item .accordion-button:after {
    width: 70px;
    height: 70px;
    position: absolute;
    right: -85px;
    top: 0;
    z-index: 10;
    border-radius: 50%;
    background-color: var(--heading);
    background-position: center;
    color: var(--white);
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2236%22%20height=%2236%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22white%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M12%205l0%2014%22/%3E%3Cpath%20d=%22M5%2012l14%200%22/%3E%3C/svg%3E)
}

.faq-accordion .accordion-item .accordion-button:not(.collapsed) {
    box-shadow: none;
    color: var(--primary)
}

.faq-accordion .accordion-item .accordion-button:not(.collapsed):after {
    background-color: var(--primary);
    transform: rotate(45deg)
}

.faq-accordion.style-two .accordion-item .accordion-button {
    font-size: 18px;
    font-weight: 600;
    padding: 16px 24px
}

.faq-accordion.style-two .accordion-item .accordion-button:after {
    position: relative;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background-color: var(--white);
    background-image: url(data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22none%22%20%20stroke=%22currentColor%22%20%20stroke-width=%222%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-chevron-down%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M6%209l6%206l6%20-6%22%20/%3E%3C/svg%3E)
}

.faq-accordion.style-two .accordion-item .accordion-button:not(.collapsed) {
    box-shadow: none;
    border-radius: 10px 10px 0 0;
    color: var(--white);
    background-color: var(--primary)
}

.faq-accordion.style-two .accordion-item .accordion-button:not(.collapsed):after {
    background-color: var(--white);
    transform: rotate(0);
    background-image: url(data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22none%22%20%20stroke=%22currentColor%22%20%20stroke-width=%222%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-chevron-up%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M6%2015l6%20-6l6%206%22%20/%3E%3C/svg%3E)
}

.faq-accordion.style-three .accordion-item .accordion-button {
    font-size: 18px;
    font-weight: 600;
    padding: 16px 24px
}

.faq-accordion.style-three .accordion-item .accordion-button:after {
    position: relative;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background-color: transparent;
    background-image: url(data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22none%22%20%20stroke=%22currentColor%22%20%20stroke-width=%222%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-chevrons-right%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M7%207l5%205l-5%205%22%20/%3E%3Cpath%20d=%22M13%207l5%205l-5%205%22%20/%3E%3C/svg%3E)
}

.faq-accordion.style-three .accordion-item .accordion-button:not(.collapsed) {
    box-shadow: none;
    border-radius: 10px 10px 0 0;
    color: var(--white);
    background-color: var(--primary)
}

.faq-accordion.style-three .accordion-item .accordion-button:not(.collapsed):after {
    background-color: var(--white);
    transform: rotate(0);
    background-image: url(data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22none%22%20%20stroke=%22currentColor%22%20%20stroke-width=%222%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-chevrons-down%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M7%207l5%205l5%20-5%22%20/%3E%3Cpath%20d=%22M7%2013l5%205l5%20-5%22%20/%3E%3C/svg%3E)
}

/* ==========================================================================
   4. HERO SECTION & SLIDERS (CUSTOM OVERRIDES)
   ========================================================================== */

.hero-content h3 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 400;
    color: var(--primary)
}

.hero-content h2 {
    font-size: clamp(28px, 5vw, 80px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -2px
}

.hero-content h2.style-two {
    font-size: clamp(28px, 5vw, 120px)
}

.hero-content p {
    font-size: 16px;
    margin-bottom: 32px
}

.hero-section {
    position: relative;
    z-index: 1;
    padding-top: 170px;
    padding-bottom: 150px;
    height: 100vh;
}

.hero-section .cloud-img {
    position: absolute;
    bottom: -100px;
    left: 0;
    right: 0;
    width: 100%;
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 2;
    background-image: url("../images/cloud-bg.webp");
}

.hero-section .social-icons {
    position: absolute;
    left: 3%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    flex-direction: column;
    z-index: 100
}

.hero-section .social-icons:before {
    content: "";
    position: absolute;
    bottom: calc(100% + 16px);
    left: 50%;
    transform: translate(-50%);
    width: 1px;
    height: 160px;
    background: linear-gradient(90deg, #3cb37100, #3cb371);
    z-index: 10
}

.hero-section .social-icons:after {
    content: "";
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    transform: translate(-50%);
    width: 1px;
    height: 160px;
    background: linear-gradient(90deg, #3cb37100, #3cb371);
    z-index: 10
}

.hero-section .social-icons a {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff1a;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition)
}

.hero-section .social-icons a:hover,
.hero-section .social-icons a:focus {
    background-color: var(--primary);
    color: var(--white)
}

.hero-section .background-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3%;
    z-index: 200;
    display: flex;
    gap: 20px;
    flex-direction: column
}

.hero-section.style-two {
    padding-top: 122px;
    padding-bottom: 0
}

.hero-section.style-three {
    padding-top: 122px;
    padding-bottom: 100px
}

.hero-section.style-three:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background-color: #00026e80
}

.background-swiper {
    position: absolute !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -10
}

.background-swiper .swiper-slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%
}

.background-swiper-content {
    z-index: 4;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.background-swiper .swiper-wrapper .swiper-slide:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--heading) 8.81%, rgba(22, 25, 32, .06) 99.92%);
    z-index: 4;
}

.testimonial-section-four .swiper-slide-active {
    margin-top: -80px
}

.testimonial-section-four .swiper-dot4 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    z-index: 9
}

.swiper-dot4 {
    text-align: center;
    margin-top: 50px
}

.swiper.testimonial-swiper-five {
    width: 120%;
    left: -10%
}

.swiper-dot4 .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    transition: var(--transition);
    background-color: transparent;
    opacity: 1;
    border-radius: 100%;
    position: relative;
    border: 1px solid var(--primary);
}

.swiper-dot4 .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--primary);
    transition: var(--transition);
    position: relative;
    width: 26px;
    border-radius: 30px;
}

/* ==========================================================================
   6. DESTINATION SECTION & DETAILS
   ========================================================================== */

.featured-destination {
    position: relative;
    z-index: 1
}

.featured-destination .shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.featured-destination-card {
    position: relative;
    z-index: 10;
    overflow: hidden;
    border-radius: 18px;
    height: 280px;
}

.featured-destination-card img {
    border-radius: 18px;
    width: 100%;
    transition: var(--transition);
    height: 280px;
}
.featured-destination-card a.subCategoryAImg {
    height: 100%;
    width: 100%;
    display: block;
}

.featured-destination-card:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    background: linear-gradient(180deg, #00026e00, #00026e);
    z-index: 1;
    transition: var(--transition)
}

.featured-destination-card .overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 30px
}

.featured-destination-card .overlay-content .badge {
    padding: 8px 14px;
    color: var(--white);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .25);
    font-size: 16px;
    font-weight: 500;
    border-radius: 20rem
}

.featured-destination-card:hover img,
.featured-destination-card:focus img {
    transform: scale(1.1)
}

.featured-destination-card.style-two .badge {
    position: absolute;
    z-index: 10;
    top: 24px;
    right: 24px;
    padding: 10px 14px;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    border-radius: 30px;
    background: var(--primary)
}

.destination-details-wrapper {
    position: relative
}

.destination-section-four,
.tour-package-section {
    position: relative;
    z-index: 1
}

.destination-section-four .shape1,
.tour-package-section .shape1 {
    position: absolute;
    width: 100%;
    top: -1px;
    left: 0;
    z-index: 1;
    background-image: url("../images/divider-bg.webp");
    height: 90px;
}

.destination-section-four .shape1 img,
.tour-package-section .shape1 img {
    width: 100%;
    height: 74px;
    -o-object-fit: cover;
    object-fit: cover
}

.destination-section-four .destination-shape-1,
.tour-package-section .destination-shape-1 {
    position: absolute;
    top: 10%;
    left: 185px;
    z-index: 0
}

.destination-section-four .destination-shape-2,
.tour-package-section .destination-shape-2 {
    position: absolute;
    bottom: 5%;
    right: 13%;
    z-index: 0
}

.destination-box-items {
    position: relative;
    z-index: 10
}

.destination-box-items:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: var(--transition);
    border-radius: 18px;
    background: linear-gradient(180deg, #00026e00, #00026e)
}

.destination-box-items .destination-image {
    position: relative
}

.destination-box-items .destination-image .top-items {
    padding: 8px 14px;
    color: var(--white);
    border-radius: 0 30px 30px 0;
    background: var(--primary);
    font-size: 16px;
    font-weight: 600;
    position: absolute;
    top: 40px;
    left: 0
}

.destination-box-items .destination-image img {
    border-radius: 18px;
    transition: var(--transition);
    width: 100%;
    height: 100%
}

.destination-box-items .destination-content {
    position: relative;
    position: absolute;
    bottom: 10px;
    left: 30px;
    z-index: 100;
    right: 30px
}

.destination-box-items .destination-content h3 {
    font-size: 18px;
    font-weight: 600
}

.destination-box-items .destination-content h3 a {
    color: var(--white)
}

.destination-box-items .destination-content h3 a:hover,
.destination-box-items .destination-content h3 a:focus {
    color: var(--warning)
}

.destination-box-items .destination-content ul {
    display: flex;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none
}

.destination-box-items .destination-content ul li {
    display: flex;
    gap: 10px;
    color: var(--white);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px
}

.destination-content .regular-price,
.destination-content .regular-price .price {
    color: var(--white);
}

.destination-box-items .destination-content ul li::marker {
    display: none
}

.destination-box-items .destination-content ul li del {
    color: var(--white-500);
    font-size: 18px;
    font-weight: 400
}

.destination-box-items .destination-content .destination-rattiing {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    color: var(--white);
    border-top: 1px solid rgba(118, 118, 118, .5);
    padding-top: 20px
}

.destination-box-items .destination-content .destination-rattiing .first-items {
    display: flex;
    gap: 10px
}

.destination-box-items .destination-content .destination-rattiing .first-items p,
.destination-box-items .destination-content .destination-rattiing p {
    color: var(--white)
}

.destination-image {
    height: 340px;
}

/* ==========================================================================
   7. TOUR CARD / TOUR ITEMS & FILTERS
   ========================================================================== */

.zakharious-scrolltop {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    transition: var(--transition);
    z-index: 9999;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .25rem;
    box-shadow: none;
    background-color: var(--primary);
    color: var(--white);
    cursor: pointer;
    transform: translateY(100px);
    border-radius: 50%;
    border: 0 !important
}

.zakharious-scrolltop span {
    font-size: 1.75rem
}

.zakharious-scrolltop.scrolltop-show {
    transform: translateY(0)
}

.zakharious-scrolltop.scrolltop-hide {
    transform: translateY(100px)
}

.zakharious-scrolltop:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: conic-gradient(var(--primary) var(--scroll-progress), var(--primary-hover) 0);
    z-index: -1
}

.zakharious-select,
.zakharious-select2 {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: var(--white);
    border-radius: 0;
    border: 0;
    float: none !important;
    font-size: 16px;
    height: auto;
    line-height: 1;
    padding-left: 0;
    padding-right: 30px;
    width: auto;
    font-weight: 600;
    color: var(--text)
}

.zakharious-select:after,
.zakharious-select2:after {
    border-bottom: 2px solid var(--heading);
    border-right: 2px solid var(--heading);
    height: 8px;
    right: 0;
    width: 8px
}

.tour-list-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px
}

.tour-single-meta {
    display: flex;
    align-items: center;
    gap: 12px
}

.tour-single-meta .icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 30px;
    color: var(--primary);
}

.tour-list-card {
    display: flex;
    border-radius: 18px;
}

.tour-list-card .tour-list-img {
    position: relative;
    z-index: 1;
    width: 40%;
    flex: 0 0 40%;
    border-radius: 18px 0 0 18px;
}

.tour-list-card .tour-list-img .featured-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    background-color: var(--heading);
    color: var(--white);
    padding: 5px 16px;
    border-radius: 5rem;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tour-list-card .tour-list-content {
    padding: 10px 20px;
    border-radius: 0 18px 18px 0;
}
.tour-list-card .tour-list-content .package-price {
    font-size: 20px;
}

.tour-list-card .viewDetails-wrap {
    display: flex;
    margin-top: 10px;
    justify-content: end;
    align-items: end;
}

.zakharious-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center
}

.zakharious-pagination li a,
.zakharious-pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    background-color: var(--secondary);
    color: var(--heading)
}

.zakharious-pagination li a i,
.zakharious-pagination li span i {
    font-size: 18px
}

.zakharious-pagination li a:hover,
.zakharious-pagination li a:focus {
    background-color: var(--primary);
    color: var(--white)
}

.zakharious-pagination li.active span {
    background-color: var(--primary);
    color: var(--white)
}

.checkout-section .zakharious-select {
    border: 1px solid var(--border);
    height: 60px;
    border-radius: 6px;
    padding: 20px
}

.checkout-section .zakharious-select:after {
    right: 20px
}

/* ==========================================================================
   8. TESTIMONIALS & CLIENT REVIEWS
   ========================================================================== */

.productReviewsSummary {
    display: flex;
    gap: 10px;
}
.customer-review-card {
    background-color: var(--heading);
    padding: 30px;
    border-radius: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px
}

.customer-review-card .average-rating {
    width: 200px;
    height: 150px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--heading);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px
}

.customer-review-card .average-rating h2 {
    font-size: 80px;
    line-height: 1;
    color: var(--white);
    margin-bottom: 0
}

.customer-review-card .average-rating .rating {
    font-size: 20px;
    color: var(--warning)
}

.customer-review-card .rating-bars {
    width: 100%
}

.customer-review-card .rating-bar {
    display: flex;
    align-items: center;
    gap: 12px
}

.customer-review-card .rating-bar p {
    font-size: 18px;
    color: var(--white)
}

.customer-review-card .rating-bar .progress {
    width: 150px;
    border-radius: 1rem;
    background: #3cb37180;
    height: 8px;
    overflow: hidden
}

.customer-review-card .rating-bar .progress .progress-bar {
    border-radius: 1rem;
    background: var(--warning)
}

.customer-review-card .rating-bar .rating {
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 4px
}

.customer-review-card .rating-bar .rating .ti-star-filled {
    color: var(--warning)
}

.customer-review-card .rating-bar .rating .ti-star {
    color: #ffb70080
}

.testimonial-section-four {
    position: relative
}

.testionial-box-items .client-info-area {
    display: flex;
    justify-content: space-between;
    margin-top: 30px
}

.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 1px
}

.travjexPackagesToolbar,
.travjexExcursionsToolbar {
    padding: 0px !important;
}
.travjexPackagesToolbar-sort_view,
.travjexExcursionsToolbar-sort_view {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.travjexPackagesToolbar-sort_view .sort-by,
.travjexPackagesToolbar-sort_view .view-mode,
.travjexExcursionsToolbar-sort_view .sort-by,
.travjexExcursionsToolbar-sort_view .view-mode {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.travjexPackagesToolbar ul.sort-bar,
.travjexExcursionsToolbar ul.sort-bar {
    display: flex !important;
    gap: 10px;
}
.travjexPackagesToolbar ul.sort-bar>li,
.travjexExcursionsToolbar ul.sort-bar>li {
    display: flex !important;
    padding: 0px 0px 0px 5px !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.travjexPackagesToolbar ul.sort-bar li>.sorting_data,
.travjexExcursionsToolbar ul.sort-bar li>.sorting_data {
    position: unset !important;
    display: flex !important;
    flex-direction: column;
    gap: 5px;
}
.travjexPackagesToolbar ul.sort-bar .sorting_data a,
.travjexExcursionsToolbar ul.sort-bar .sorting_data a {
    position: unset !important;
}

.travjexPackagesToolbar .pager,
.travjexExcursionsToolbar .pager {
    display: none;
}
.toolbar-bottom .travjexPackagesToolbar .pager,
.toolbar-bottom .travjexExcursionsToolbar .pager {
    display: block;
    padding: 20px;
}
.toolbar-bottom .travjexPackagesToolbar-sort_view,
.toolbar-bottom .travjexExcursionsToolbar-sort_view {
    display: none;
}

.travjexPackagesToolbar-pager,
.travjexExcursionsToolbar-pager {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.travjexPackagesToolbar-pager .count-container,
.travjexExcursionsToolbar-pager .count-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.travjexPackagesToolbar-pager .count-container .amount,
.travjexExcursionsToolbar-pager .count-container .amount {
    margin: 0;
}
.travjexPackagesToolbar-pager .count-container .limiter,
.travjexExcursionsToolbar-pager .count-container .limiter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.travjexPackagesToolbar-pager .count-container .limiter .form-control,
.travjexExcursionsToolbar-pager .count-container .limiter .form-control {
    background: var(--secondary);
    appearance: auto;
    padding: 8px 10px;
    height: 40px;
}

.toolbar-bottom {
    margin-top: 30px;
}

.list_unstyled_wrap ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-left: 0;
    list-style: none;
}

.tour_includes_excludes ul li {
    list-style: none;
    padding-inline-start: 10px;
    display: flex;
    gap: 10px;
}

.tour_includes_excludes ul li:before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    display: inline-block;
    color: #217cc0;
}

.tour_includes_excludes.tour_includes ul li:before {
    content: "\f00c";
}

.tour_includes_excludes.tour_excludes ul li:before {
    content: "\f00d";
}

.checkAvailabilityForm {
    padding: 25px 10px;
    margin: 20px auto !important;
}

.checkAvailabilityForm .form-check {
    text-align: left;
}
.checkAvailabilityForm-inner {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}
.checkAvailabilityForm .checkbox-list {
    gap: 0;
}
.checkAvailabilityForm .checkbox-list li {
    background: unset;
}

.checkAvailabilityForm .formicon {
    top: 15px !important;
}

#available-priceing .priceBox {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#available-priceing .priceBox .priceBox-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.priceingTableWrap,
.bookingFormInner {
    padding: 20px;
}
.bookingFormInner .roomWrap {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dotted;
}
.bookingFormInner .roomWrap .roomLabel {
    color: var(--primary);
}
.bookingFormInner .roomWrap .paxCol {
    margin-top: 10px;
}

.bookresults-content .button-set {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.minicart-wrapper .block-subtitle {
    color: var(--primary);
}

.header-minicart .mini-products-list {
    padding: 0 !important;
}

.header-minicart .info-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.minicart-actions .button-set {
    display: flex;
    justify-content: space-between;
    padding: 0 10px 10px 10px;
}

.minicart-actions .button-set .btn {
    height: 40px;
    padding: 16px 15px;
    font-size: 13px;
}

.minicart-wrapper .subtotal {
    color: var(--primary);
    padding: 10px;
    border-top: 1px dotted;
    border-bottom: 1px dotted;
    margin-bottom: 20px;
}

.tour-item-img .travjex-rating-box {
    position: absolute;
    top: 10px;
    left: 10px;
    line-height: 1;
    font-size: 12px;
    color: #fff;
}

.travjex-rating-box {
    vertical-align: middle;
    font-size: 16px;
    font-family: "Font Awesome 7 Free";
    display: inline-block;
    color: #f68127;
}

.travjex-rating-box .travjex-rating {
    position: relative;
    left: 0;
    top: 0;
    white-space: nowrap;
    overflow: hidden;
    color: #f68127;
    border-radius: 25px;
    padding: 10px;
    font-weight: bold;
}

.travjex-rating.no_rating {
    display: none;
}

.travjex-rating-box .travjex-rating:before {
    content: "\f005 \f005 \f005 \f005 \f005";
}

.product-reviews {
    margin-top: 20px;
}

.listing-review-item {
    margin-top: 30px;
    border-radius: 25px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, .08);
}

.listing-review-author {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: start;
}

.ratings-list-value {
    display: flex;
    gap: 20px;
    align-items: center;
}

.ratings-list-value-label {
    width: 150px;
}

.ratings-list-value .travjex-rating-box .travjex-rating {
    padding: 3px;
}

.form-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.star-cb-group {
    font-size: 14px;
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: initial;
}

.star-cb-group>input {
    display: none;
}

.star-cb-group>input+label {
    display: inline-block;
    overflow: hidden;
    text-indent: 9999px;
    width: 1em;
    white-space: nowrap;
    cursor: pointer;
    font-size: 20px;
}

.star-cb-group>input+label::before {
    display: inline-block;
    text-indent: -9999px;
    content: "☆";
    color: rgb(136, 136, 136);
}

.star-cb-group>input:checked~label::before,
.star-cb-group>input+label:hover~label::before,
.star-cb-group>input+label:hover::before {
    content: "★";
    color: #f68127;
}

ul.messages {
    margin: 20px 15px;
}

ul.messages>li {
    padding: 15px 15px 15px 50px;
    position: relative;
}

ul.messages>li:before {
    vertical-align: middle;
    font-size: 25px;
    font-family: "Font Awesome 7 Free";
    display: inline-block;
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}

ul.messages .success-msg {
    background: #ddffdd;
}

ul.messages .success-msg:before {
    content: "\f058";
    color: #00b534;
}

ul.messages .failure-msg {
    background: #ffdddd;
}

ul.messages .failure-msg:before {
    content: "\f057";
    color: #b50000
}

.product-review-table {
    width: 100%;
}

.discount-coupon-wrap,
.totals-wrap {
    padding: 20px;
}
.discount-coupon-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

#shopping-cart-totals-table,
#CartTOtals {
    margin-bottom: 10px;
    width: 100%;
}
#shopping-cart-totals-table tr td:first-child,
#CartTOtals tr td:first-child {
    padding-right: 20px;
    font-weight: bold;
}
#shopping-cart-totals-table tr td:last-child,
#CartTOtals tr td:last-child {
    font-weight: bold;
    color: var(--primary);
}

.checkout-types li {
    display: flex;
    justify-content: end;
}

.header-minicart .miniCartAnc .count {
    display: unset;
    color: #fff;
}

.login-content {
    padding: 3rem;
    border-radius: 18px;
    background: var(--secondary);
}

.gap-4 {
    gap: 30px !important;
}

.input-group .cancelBtn {
    height: auto;
    border: none;
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
    padding: 10px;
}

.checkoutSteps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.checkoutSteps .checkoutSteps-step {
    background-color: var(--secondary);
}

.checkoutSteps .checkoutSteps-step .step-title,
.opc-block-progress-items dt {
    border-top-left-radius: unset !important;
    border-top-right-radius: unset !important;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--heading);
    font-size: 16px;
    font-weight: 600;
    padding: 30px 24px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.opc-block-progress-items dt {
    padding: 24px 24px 24px 24px;
}

.checkoutSteps .checkoutSteps-step.active .step-title,
.opc-block-progress-items dt.complete {
    border-radius: 10px 10px 0 0;
    background: var(--primary);
    color: var(--white);
}

.checkoutSteps .checkoutSteps-step.active .step-title h2 {
    color: var(--white);
}

#checkout-step-login {
    text-align: center;
}
div.customization-socialconnect-facebook,
div.customization-socialconnect-google,
div.customization-socialconnect-twitter,
div.customization-socialconnect-apple {
    margin-top: 15px;
}
div.customization-socialconnect-facebook a,
div.customization-socialconnect-google a,
div.customization-socialconnect-twitter a,
div.customization-socialconnect-apple a {
    color: #fff;
    padding: 0;
    font-size: 16px;
    width: 250px;
    display: inline-block;
    text-decoration: none;
    text-align: initial;
    width: 100%;
}
div.customization-socialconnect-google a {
    background: #dd4b39;
}
div.customization-socialconnect-facebook span.icon,
div.customization-socialconnect-google span.icon,
div.customization-socialconnect-twitter span.icon,
div.customization-socialconnect-apple span.icon {
    width: 20%;
    text-align: center;
}
.customization-socialconnect-wrapper a .icon {
    width: 20%;
    float: left;
    padding: 20px 0px;
    background: rgba(0, 0, 0, 0.19);
}
div.customization-socialconnect-facebook span.title,
div.customization-socialconnect-google span.title,
div.customization-socialconnect-twitter span.title,
div.customization-socialconnect-apple span.title {
    width: 100%;
    padding: 16px 0;
    text-align: center;
    display: block;
    font-size: 12px;
}

.fieldset>ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fieldset .fields {
    display: flex;
    align-items: center;
    gap: 20px;
}

.fieldset .fields .input-box {
    width: 100%;
}

.opc .buttons-set {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row-reverse;
}

.input-box {
    position: relative;
}
.input-box .validation-advice {
    position: absolute;
    bottom: -6px;
    right: 0;
}

.opc-block-progress .block-title {
    color: var(--heading);
    margin-bottom: 10px;
}

.opc-block-progress .opc-block-progress-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.opc-block-progress-items .changelink a {
    color: var(--white);
}

.opc-block-progress .opc-block-progress-items>div {
    background-color: var(--secondary);
}

.niceCard {
    background: #fff;
    border-radius: 40px 40px 40px 0;
    padding: 5px;
    margin-bottom: 25px;
    box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%)
}

.niceCard.lightBlueBg {
    background: #217cc066
}

.niceCard.extraPadding {
    padding: 10px 20px
}

.sidebar_wrap.niceCard .block-title {
    display: none
}

.sidebar_wrap.niceCard li {
    margin: 5px 0
}

.sidebar_wrap.niceCard li a {
    color: var(--heading);
    font-weight: 500;
    padding: 6px 6px 6px 15px;
    display: block
}

.block-account .block-content li a,
.block-account .block-content li.current {
    border-bottom: none;
}

.sidebar_wrap.niceCard li.current strong {
    background: var(--heading);
    padding: 6px 6px 6px 15px;
    color: var(--white) !important;
    border-radius: 50px 50px 50px 0;
    display: block
}

.block-account .block-content {
    padding: 0;
}

.my-account {
    margin-top: 60px;
    padding: 10px 20px;
    background: #fff;
    border-radius: 40px 40px 40px 0;
    margin-bottom: 25px;
    box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%)
}

.my-account .page-title h1 {
    color: var(--heading);
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    font-weight: 600;
    font-size: 22px
}

.my-account .buttons-set {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 0
}

.box-account {
    padding: 0;
}

.box-account.box-info .box-title {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.dashboard .col2-set>.box>.box-title {
    margin: 0;
}

.box-account.box-info .box {
    margin: 10px 0
}

.account-edit-form .form-control {
    border: var(--bs-border-width) solid var(--bs-border-color)
}

.contactForm-wrap {
    padding: 3rem;
    border-radius: 18px;
    margin-bottom: 20px;
}

.contactForm-wrap .form-row {
    gap: 20px 0;
}


.contactForm-wrap .submitBtn {
    display: flex;
    justify-self: end;
}

.btn-filter {
    float: right;
}

.whiteBg .form-control {
    background-color: var(--bs-body-bg);
}

.form-group.date {
    position: relative;
}
.form-group .formicon {
    position: absolute;
    right: 10px;
    top: 15px;
}

.TravJex-Spinner {
    position: fixed;
    z-index: 99999;
    background: #00000038;
    top: 0;
    width: 100%;
    height: 100%;
}

.TravJex-Spinner .spinner {
    width: 40px;
    height: 40px;
    position: relative;
    margin: 0px auto;
    top: 50%;
}

.TravJex-Spinner .double-bounce1,
.double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #333;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}
.TravJex-Spinner .double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}