@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --padding-left-right: 10px;
    --width-small-size: 0;
    --width-phone-size: 767;
    --width-tablet-size: 1024px;
    --width-laptop-size: 1140px;
    --width-computer-size: 1400px;
    --color-grey: #676767;
    --primary-color: #eea200;
    --secondary-color: #0238a0;
    --header-height: 60px;
}


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    /* font-family: "Google Sans", sans-serif; */
    scroll-behavior: smooth;
}

/* ol, ul {
    margin-left: 15px;
} */

.mainContainer {
    padding: 0px 20px;
}

.mainContainer.full {
    padding: 0px;
}

.subContainer {
    max-width: 100%;
    margin: 0 auto;
}


.subContainer.full {
    max-width: 100%;
    margin: 0 auto;
}


@media (min-width: 767px) {
    .subContainer {
        max-width: var(--width-phone-size);
    }
}

@media (min-width: 1024px) {
    .subContainer {
        max-width: var(--width-tablet-size);
    }
}

@media (min-width: 1140px) {
    .subContainer {
        max-width: var(--width-laptop-size);
    }
}


.to-top {
    background-color: var(--primary-color);
    position: fixed;
    bottom: 16px;
    right: 32px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
    z-index: 1000;
}

.to-top.active {
    bottom: 32px;
    pointer-events: auto;
    opacity: 1;
}


/* HEADER STYLE */

.mainHeader {
    /* background-color: rgb(242, 242, 242); */
    background-color: transparent;
    position: absolute;
    width: 100%;
    z-index: 1000;
    top: 0;
}

.mainHeader .headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mainHeader .headerContainer .logo img {
    width: 150px;
    height: auto;
}

.mainHeader .headerContainer .afterLogo {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mainHeader .headerContainer .afterLogo .mainNavigation .site-navigation .primary-menu-container ul {
    list-style: none;
    display: flex;
    gap: 37px;
}

.mainHeader .headerContainer .afterLogo .mainNavigation .site-navigation .primary-menu-container ul li {
    display: flex;
    gap: 5px;
    align-items: center;
    position: relative;
    height: var(--header-height);
}

.mainHeader .headerContainer .afterLogo .mainNavigation .site-navigation .primary-menu-container ul li a {
    color: #2d2d2d;
    font-size: 13px;
    font-weight: 600;
}

.mainHeader .headerContainer .afterLogo .mainNavigation .site-navigation .primary-menu-container ul li .sub-menu-toggle {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mainHeader .headerContainer .afterLogo .mainNavigation .site-navigation .primary-menu-container ul li .sub-menu-toggle .icon-plus {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mainHeader .headerContainer .afterLogo .mainNavigation .site-navigation .primary-menu-container ul li .sub-menu-toggle .icon-plus svg {
    width: 17px;
    height: 17px;
    fill: #646464;
}

.mainHeader .headerContainer .afterLogo .mainNavigation .site-navigation .primary-menu-container ul li .sub-menu-toggle .icon-minus {
    display: none;
}

.mainHeader .headerContainer .afterLogo .mainNavigation .site-navigation .primary-menu-container ul li .sub-menu-toggle .screen-reader-text {
    display: none;
}

.mainHeader .headerContainer .afterLogo .mainNavigation .site-navigation .primary-menu-container ul li ul.sub-menu {
    background-color: white;
    position: absolute;
    top: 100%;
    right: 0;
    flex-direction: column;
    width: max-content;
    padding: 10px 15px;
    gap: 0px;
    display: flex;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

.mainHeader .headerContainer .afterLogo .mainNavigation .site-navigation .primary-menu-container ul li ul.sub-menu li {
    height: fit-content;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2117647059);
    padding: 5px 0px;
}

.mainHeader .headerContainer .afterLogo .mainNavigation .site-navigation .primary-menu-container ul li ul.sub-menu li a {
    font-weight: 500;
}

.mainHeader .headerContainer .afterLogo .mainNavigation .site-navigation .primary-menu-container ul li ul.sub-menu li:first-child {
    padding-top: 0;
}

.mainHeader .headerContainer .afterLogo .mainNavigation .site-navigation .primary-menu-container ul li ul.sub-menu li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.mainHeader .headerContainer .afterLogo .mainNavigation .site-navigation .primary-menu-container ul li:hover .sub-menu-toggle .icon-plus {
    transform: rotate(95deg);
    transition: all 0.3s ease;
}

.mainHeader .headerContainer .afterLogo .mainNavigation .site-navigation .primary-menu-container ul li:hover ul.sub-menu {
    visibility: visible;
    opacity: 1;
}

.mainHeader .headerContainer .afterLogo .menuIcon {
    display: flex;
    gap: 15px;
    align-items: center;
    background: white;
    padding: 0;
    height: 40px;
    padding-right: 20px;
    padding-left: 20px;
    border-radius: 50px;
}

.mainHeader .headerContainer .afterLogo .menuIcon .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mainHeader .headerContainer .afterLogo .menuIcon .icon a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mainHeader .headerContainer .afterLogo .menuIcon .icon a svg {
    width: 20px;
    aspect-ratio: 1;
}

.mainHeader .headerContainer .afterLogo .menuIcon .icon a svg path {
    fill: var(--primary-color);
}

.mainHeader .headerContainer .afterLogo .menuIcon .searchIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 100%;
}

.mainHeader .headerContainer .afterLogo .menuIcon .searchIcon svg {
    width: 20px;
    aspect-ratio: 1;
}

.mainHeader .headerContainer .afterLogo .menuIcon .searchIcon svg g {
    stroke: var(--primary-color);
}

.mainHeader .headerContainer .afterLogo .menuIcon .searchIcon .popUp {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(164deg, rgba(19, 119, 212, 1) 14%, rgba(109, 173, 242, 1) 54%, rgba(67, 181, 223, 1) 99%);
    backdrop-filter: blur(15px);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

.mainHeader .headerContainer .afterLogo .menuIcon .searchIcon .popUp .search-container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px;
    background-color: #f4f4f4;
    border-radius: 50px;
    padding: 5px 15px;
    transition: box-shadow 0.3s ease;
    opacity: 0.8;
}

.mainHeader .headerContainer .afterLogo .menuIcon .searchIcon .popUp .search-container:focus-within {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    border: 1px solid #ddd;
}

.mainHeader .headerContainer .afterLogo .menuIcon .searchIcon .popUp #search-bar {
    border: none;
    background: none;
    outline: none;
    padding: 10px;
    width: 100%;
    font-size: 16px;
    color: #333;
}

.mainHeader .headerContainer .afterLogo .menuIcon .searchIcon .popUp .search-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.mainHeader .headerContainer .afterLogo .menuIcon .searchIcon .popUp .search-icon-btn:hover {
    color: #000;
}

.mainHeader .headerContainer .afterLogo .menuIcon .searchIcon .popUp.active {
    visibility: visible;
    opacity: 1;
}

.mainHeader .headerContainer .afterLogo .menuIcon .languageIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    height: 100%;
}

.mainHeader .headerContainer .afterLogo .menuIcon .languageIcon svg {
    width: 20px;
    aspect-ratio: 1;
}

.mainHeader .headerContainer .afterLogo .menuIcon .languageIcon svg path {
    fill: var(--primary-color);
}

.mainHeader .headerContainer .afterLogo .menuIcon .languageIcon .popUp {
    position: absolute;
    top: 110%;
    right: 0;
    background-color: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(15px);
    padding: 20px;
    transition: all 0.3s ease;
    visibility: hidden;
    opacity: 0;
    cursor: auto;
}

.mainHeader .headerContainer .afterLogo .menuIcon .languageIcon .popUp.active {
    visibility: visible;
    opacity: 1;
}

.mainHeader .headerContainer .afterLogo .menuIcon .menuMobileIcon {
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 100%;
}

.mainHeader .headerContainer .afterLogo .menuIcon .menuMobileIcon .icon .menu {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
}

.mainHeader .headerContainer .afterLogo .menuIcon .menuMobileIcon .icon .menu svg {
    width: 28px;
    aspect-ratio: 1;
}

.mainHeader .headerContainer .afterLogo .menuIcon .menuMobileIcon .icon .line {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mainHeader .headerContainer .afterLogo .menuIcon .menuMobileIcon .icon .line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}

.mainHeader .headerContainer .afterLogo .menuIcon .menuMobileIcon .icon .line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
}

.mainHeader .headerContainer .afterLogo .menuIcon .menuMobileIcon .icon .line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}

.mainHeader .headerContainer .afterLogo .menuIcon .menuMobileIcon .icon .opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}

.mainHeader .headerContainer .afterLogo .menuIcon .menuMobileIcon .icon .opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
}

.mainHeader .headerContainer .afterLogo .menuIcon .menuMobileIcon .icon .opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}

.mainHeader .headerContainer .afterLogo .menuIcon .menuMobileIcon .mobileAside {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    min-height: 100vh;
    width: 100%;
    /* background-color: rgba(255, 255, 255, 0.95); */
    background: #1377d4;
    background: linear-gradient(164deg, rgba(19, 119, 212, 1) 14%, rgba(109, 173, 242, 1) 54%, rgba(67, 181, 223, 1) 99%);
    /* backdrop-filter: blur(15px); */
    transition: all 0.3s ease-in-out;
    visibility: hidden;
    opacity: 0;

    .site-navigation {
        padding: 100px 30px;

        .primary-menu-container {
            ul {
                display: flex;
                flex-direction: column;
                gap: 15px;
                list-style: none;

                li {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    cursor: pointer;
                    position: relative;
                    flex-direction: column;

                    a {
                        color: black;
                        font-size: 17px;
                        font-weight: 600;
                    }

                    .sub-menu-toggle {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: absolute;
                        top: 0;
                        right: 0;
                        background-color: transparent;
                        border: none;
                        padding: 0;


                        .icon-plus {
                            transform: rotate(90deg);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            transition: all 0.3s ease;


                            svg {
                                width: 25px;
                                aspect-ratio: 1;
                                fill: black;
                            }
                        }

                        .icon-plus.active {
                            transform: rotate(0deg);
                        }

                        .icon-minus,
                        .screen-reader-text {
                            display: none;
                        }
                    }

                    ul.sub-menu {
                        width: 100%;
                        height: max-content;
                        background-color: #ffffff36;
                        padding: 10px;
                        margin-top: 10px;
                        transition: all 0.3s ease;
                        visibility: hidden;
                        opacity: 0;
                        display: none;

                        li {
                            a {
                                font-size: 15px;
                                font-weight: 500;
                            }
                        }
                    }

                    ul.sub-menu.active {
                        visibility: visible;
                        opacity: 1;
                        display: flex;
                    }
                }
            }
        }
    }
}

.mainHeader .headerContainer .afterLogo .menuIcon .menuMobileIcon .mobileAside.active {
    visibility: visible;
    opacity: 0.99;
}



@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInDown {
    animation-name: fadeInDown;
}


.mainHeader.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #f7f7f7d4;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transition: all 0.2s ease-in-out;
    animation: fadeInDown 0.5s both 0.1s;
}

@media (max-width: 1140px) {}

@media (max-width: 1024px) {}

@media (max-width: 767px) {
    .mainHeader {
        background-color: white;
        position: fixed;
    }

    .mainHeader .headerContainer .logo img {
        width: 120px;
        height: auto;
    }

    .mainHeader .headerContainer .afterLogo .menuIcon {
        padding-right: 0px;
        border-radius: 0px;
    }

    .mainHeader .headerContainer .afterLogo .menuIcon .menuMobileIcon {
        display: flex;
    }

    .mainHeader .headerContainer .afterLogo .mainNavigation {
        display: none;
    }

    .mainHeader.sticky {
        background-color: white;
    }

    .mainHeader .headerContainer .afterLogo .menuIcon .searchIcon .popUp {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

/* CUSTOM BUTTON */

.customButtonThin {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border: 2px solid white;
    padding: 5px 25px;
    color: white;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    gap: 10px;
    transition: all 0.3s ease;
    width: fit-content;
}

.customButtonThin::after {
    content: "";
    width: 20px;
    height: 20px;
    background-color: white;
    /* The icon takes the text color */
    /* This is a simple arrow icon encoded as a data URI */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M32.324 32.571V4.5L15.677 20.144c3.748-.51 6.82-.145 7.1 3.833V43.5" stroke-width="4"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M32.324 32.571V4.5L15.677 20.144c3.748-.51 6.82-.145 7.1 3.833V43.5" stroke-width="4"/></svg>');
    mask-repeat: no-repeat;
    mask-size: contain;
    transform: rotate(90deg);
    transition: all 0.3s ease;
}

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

.customButtonThin:hover::after {
    background-color: var(--primary-color);
    /* The icon takes the text color */
}

.customButtonLight {
    display: inline-flex;
    align-items: center;
    background-color: white;
    border: 2px solid white;
    padding: 5px 25px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    gap: 10px;
    transition: all 0.3s ease;
    width: fit-content;
}

.customButtonLight::after {
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--primary-color);
    /* The icon takes the text color */
    /* This is a simple arrow icon encoded as a data URI */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M32.324 32.571V4.5L15.677 20.144c3.748-.51 6.82-.145 7.1 3.833V43.5" stroke-width="4"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M32.324 32.571V4.5L15.677 20.144c3.748-.51 6.82-.145 7.1 3.833V43.5" stroke-width="4"/></svg>');
    mask-repeat: no-repeat;
    mask-size: contain;
    transform: rotate(90deg);
    transition: all 0.3s ease;
}

.customButtonLight:hover {
    background-color: transparent;
    color: white;
}

.customButtonLight:hover::after {
    background-color: white;
}


#customTourPackages {
    display: inline-flex;
    align-items: center;
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 5px 25px;
    color: white;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    gap: 15px;
    transition: all 0.3s ease;
    width: fit-content;
    border-radius: 0;
}

#customTourPackages::after {
    content: "";
    width: 23px;
    height: 23px;
    background-color: white;
    /* The icon takes the text color */
    /* This is a simple arrow icon encoded as a data URI */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M5 19V8q0-.825.588-1.412T7 6h2V3q0-.425.288-.712T10 2h4q.425 0 .713.288T15 3v3h2q.825 0 1.413.588T19 8v11q0 .825-.587 1.413T17 21q0 .425-.288.713T16 22q-.4 0-.562-.363T15 21H9q0 .425-.288.713T8 22q-.4 0-.562-.363T7 21q-.825 0-1.412-.587T5 19m6-13h2V4h-2zm3.588 5.663Q15.85 11.325 17 10.65V8H7v2.65q1.15.675 2.413 1.013T12 12t2.588-.337M11 14v-.05q-1.05-.125-2.05-.375T7 12.9V19h10v-6.1q-.95.425-1.95.675T13 13.95V14q0 .425-.288.713T12 15t-.712-.288T11 14m1-1.1"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M5 19V8q0-.825.588-1.412T7 6h2V3q0-.425.288-.712T10 2h4q.425 0 .713.288T15 3v3h2q.825 0 1.413.588T19 8v11q0 .825-.587 1.413T17 21q0 .425-.288.713T16 22q-.4 0-.562-.363T15 21H9q0 .425-.288.713T8 22q-.4 0-.562-.363T7 21q-.825 0-1.412-.587T5 19m6-13h2V4h-2zm3.588 5.663Q15.85 11.325 17 10.65V8H7v2.65q1.15.675 2.413 1.013T12 12t2.588-.337M11 14v-.05q-1.05-.125-2.05-.375T7 12.9V19h10v-6.1q-.95.425-1.95.675T13 13.95V14q0 .425-.288.713T12 15t-.712-.288T11 14m1-1.1"/></svg>');
    mask-repeat: no-repeat;
    mask-size: contain;
    /* transform: rotate(90deg); */
    transition: all 0.3s ease;
}

#customTourPackages:hover {
    background-color: transparent;
    color: var(--primary-color);
}

#customTourPackages:hover::after {
    background-color: var(--primary-color);
}

#allTourPackageButton {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border: 2px solid var(--primary-color);
    padding: 5px 25px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    gap: 15px;
    transition: all 0.3s ease;
    width: fit-content;
    border-radius: 0;
}

#allTourPackageButton::after {
    content: "";
    width: 23px;
    height: 23px;
    background-color: var(--primary-color);
    /* The icon takes the text color */
    /* This is a simple arrow icon encoded as a data URI */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M5 19V8q0-.825.588-1.412T7 6h2V3q0-.425.288-.712T10 2h4q.425 0 .713.288T15 3v3h2q.825 0 1.413.588T19 8v11q0 .825-.587 1.413T17 21q0 .425-.288.713T16 22q-.4 0-.562-.363T15 21H9q0 .425-.288.713T8 22q-.4 0-.562-.363T7 21q-.825 0-1.412-.587T5 19m6-13h2V4h-2zm3.588 5.663Q15.85 11.325 17 10.65V8H7v2.65q1.15.675 2.413 1.013T12 12t2.588-.337M11 14v-.05q-1.05-.125-2.05-.375T7 12.9V19h10v-6.1q-.95.425-1.95.675T13 13.95V14q0 .425-.288.713T12 15t-.712-.288T11 14m1-1.1"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M5 19V8q0-.825.588-1.412T7 6h2V3q0-.425.288-.712T10 2h4q.425 0 .713.288T15 3v3h2q.825 0 1.413.588T19 8v11q0 .825-.587 1.413T17 21q0 .425-.288.713T16 22q-.4 0-.562-.363T15 21H9q0 .425-.288.713T8 22q-.4 0-.562-.363T7 21q-.825 0-1.412-.587T5 19m6-13h2V4h-2zm3.588 5.663Q15.85 11.325 17 10.65V8H7v2.65q1.15.675 2.413 1.013T12 12t2.588-.337M11 14v-.05q-1.05-.125-2.05-.375T7 12.9V19h10v-6.1q-.95.425-1.95.675T13 13.95V14q0 .425-.288.713T12 15t-.712-.288T11 14m1-1.1"/></svg>');
    mask-repeat: no-repeat;
    mask-size: contain;
    /* transform: rotate(90deg); */
    transition: all 0.3s ease;
}

#allTourPackageButton:hover {
    background-color: var(--primary-color);
    color: white;
}

#allTourPackageButton:hover::after {
    background-color: white;
}

#customDestinationButton {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border: 2px solid var(--primary-color);
    padding: 5px 25px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    gap: 15px;
    transition: all 0.3s ease;
    width: fit-content;
    border-radius: 0;
}

#customDestinationButton::after {
    content: "";
    width: 23px;
    height: 23px;
    background-color: var(--primary-color);
    /* The icon takes the text color */
    /* This is a simple arrow icon encoded as a data URI */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19.3 16.9c.4-.7.7-1.5.7-2.4c0-2.5-2-4.5-4.5-4.5S11 12 11 14.5s2 4.5 4.5 4.5c.9 0 1.7-.3 2.4-.7l3.2 3.2l1.4-1.4zm-3.8.1c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5M12 20v2C6.48 22 2 17.52 2 12S6.48 2 12 2c4.84 0 8.87 3.44 9.8 8h-2.07A8 8 0 0 0 15 4.59V5c0 1.1-.9 2-2 2h-2v2c0 .55-.45 1-1 1H8v2h2v3H9l-4.79-4.79C4.08 10.79 4 11.38 4 12c0 4.41 3.59 8 8 8"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19.3 16.9c.4-.7.7-1.5.7-2.4c0-2.5-2-4.5-4.5-4.5S11 12 11 14.5s2 4.5 4.5 4.5c.9 0 1.7-.3 2.4-.7l3.2 3.2l1.4-1.4zm-3.8.1c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5M12 20v2C6.48 22 2 17.52 2 12S6.48 2 12 2c4.84 0 8.87 3.44 9.8 8h-2.07A8 8 0 0 0 15 4.59V5c0 1.1-.9 2-2 2h-2v2c0 .55-.45 1-1 1H8v2h2v3H9l-4.79-4.79C4.08 10.79 4 11.38 4 12c0 4.41 3.59 8 8 8"/></svg>');
    mask-repeat: no-repeat;
    mask-size: contain;
    /* transform: rotate(90deg); */
    transition: all 0.3s ease;
}

#customDestinationButton:hover {
    background-color: var(--primary-color);
    color: white;
}

#customDestinationButton:hover::after {
    background-color: white;
}

#customAboutUsButton {
    display: inline-flex;
    align-items: center;
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 5px 25px;
    color: white;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    gap: 10px;
    transition: all 0.3s ease;
    width: fit-content;
    border-radius: 0;
}

#customAboutUsButton::after {
    content: "";
    width: 20px;
    height: 20px;
    background-color: white;
    /* The icon takes the text color */
    /* This is a simple arrow icon encoded as a data URI */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M32.324 32.571V4.5L15.677 20.144c3.748-.51 6.82-.145 7.1 3.833V43.5" stroke-width="4"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M32.324 32.571V4.5L15.677 20.144c3.748-.51 6.82-.145 7.1 3.833V43.5" stroke-width="4"/></svg>');
    mask-repeat: no-repeat;
    mask-size: contain;
    transform: rotate(90deg);
    transition: all 0.3s ease;
}

#customAboutUsButton:hover {
    background-color: transparent;
    color: var(--primary-color);
}

#customAboutUsButton:hover::after {
    background-color: var(--primary-color);
}

#customContactUsButton {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border: 2px solid var(--primary-color);
    padding: 5px 25px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    gap: 10px;
    transition: all 0.3s ease;
    width: fit-content;
    border-radius: 0;
}

#customContactUsButton::after {
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--primary-color);
    /* The icon takes the text color */
    /* This is a simple arrow icon encoded as a data URI */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M32.324 32.571V4.5L15.677 20.144c3.748-.51 6.82-.145 7.1 3.833V43.5" stroke-width="4"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M32.324 32.571V4.5L15.677 20.144c3.748-.51 6.82-.145 7.1 3.833V43.5" stroke-width="4"/></svg>');
    mask-repeat: no-repeat;
    mask-size: contain;
    transform: rotate(90deg);
    transition: all 0.3s ease;
}

#customContactUsButton:hover {
    background-color: var(--primary-color);
    color: white;
}

#customContactUsButton:hover::after {
    background-color: white;
}






.mainFooter {
    background: white;
    padding-top: 50px;
    padding-bottom: 50px;
}

.mainFooter .mainFooterContent {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.mainFooter .mainFooterContent .top {
    display: flex;
    justify-content: space-between;
}

.mainFooter .mainFooterContent .top .leftSide {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.mainFooter .mainFooterContent .top .leftSide img {
    width: 150px;
    height: auto;
}

.mainFooter .mainFooterContent .top .leftSide .logo img {
    width: 150px;
    height: auto;
}

.mainFooter .mainFooterContent .top .leftSide .contact ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 10px;
}

.mainFooter .mainFooterContent .top .leftSide .contact ul li a {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.mainFooter .mainFooterContent .top .leftSide .contact ul li a .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mainFooter .mainFooterContent .top .leftSide .contact ul li a .icon svg {
    width: 20px;
    height: 20px;
}

.mainFooter .mainFooterContent .top .leftSide .contact ul li a .icon svg g,
.mainFooter .mainFooterContent .top .leftSide .contact ul li a .icon svg path {
    stroke: var(--primary-color);
}

.mainFooter .mainFooterContent .top .leftSide .contact ul li a span {
    color: var(--secondary-color);
    font-size: 13px;
    font-weight: 600;
}

.mainFooter .mainFooterContent .top .leftSide .socialMedia ul {
    display: flex;
    list-style: none;
    gap: 10px;
}

.mainFooter .mainFooterContent .top .leftSide .socialMedia ul li a svg {
    width: 23px;
    height: 23px;
}

.mainFooter .mainFooterContent .top .leftSide .socialMedia ul li a svg g,
.mainFooter .mainFooterContent .top .leftSide .socialMedia ul li a svg path {
    fill: var(--primary-color);
    transition: all 0.3s ease;
}

.mainFooter .mainFooterContent .top .leftSide .socialMedia ul li:hover a svg g,
.mainFooter .mainFooterContent .top .leftSide .socialMedia ul li:hover a svg path {
    fill: var(--primary-color);
}

.mainFooter .mainFooterContent .top .rightSide {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: end;
}

.mainFooter .mainFooterContent .top .rightSide .sloganIcon {
    margin-right: -30px;
}

.mainFooter .mainFooterContent .top .rightSide .quickLink ul {
    display: flex;
    gap: 5px;
    flex-direction: column;
    align-items: end;
    list-style-type: none;
    margin-top: 88px;
}

.mainFooter .mainFooterContent .top .rightSide .quickLink ul li {
    position: relative;
    padding-left: 25px;
}

.mainFooter .mainFooterContent .top .rightSide .quickLink ul li a {
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}

.mainFooter .mainFooterContent .top .rightSide .quickLink ul li a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mainFooter .mainFooterContent .top .rightSide .quickLink ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%230238a0" d="M11.564 10.38L5.16 7.662q-.408-.159-.478-.58t.231-.721l.246-.266q.143-.142.325-.194t.385-.021l8.712 1.504l3.138-3.145q.421-.42 1.018-.42t1.019.42q.421.421.421 1.019t-.421 1.018L16.617 9.42l1.499 8.706q.03.204-.019.389q-.049.184-.191.327l-.265.24q-.302.302-.725.235q-.424-.068-.583-.475l-2.714-6.424l-3.069 3.064l.53 3.119q.032.154-.005.295q-.036.142-.154.259l-.271.252q-.235.235-.536.179q-.3-.056-.455-.333L7.95 16.05l-3.202-1.71q-.277-.153-.333-.454t.18-.536l.251-.271q.117-.118.259-.164q.141-.046.295-.015l3.113.544z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.mainFooter .mainFooterContent .below {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #b8eeb8;
    padding-top: 15px;
}

.mainFooter .mainFooterContent .below .leftSide span {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.mainFooter .mainFooterContent .below .rightSide span,
.mainFooter .mainFooterContent .below .rightSide a {
    color: #b4b4b4;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.topFooterRight {
    display: flex;
    gap: 20px;
}

.topFooterLeft {
    color: white;
}


@media (max-width: 1140px) {}

@media (max-width: 1024px) {}

@media (max-width: 767px) {
    .mainFooter .mainFooterContent .top {
        flex-direction: column;
        gap: 30px;
    }

    .mainFooter .mainFooterContent .top .rightSide {
        align-items: start;
        flex-direction: column-reverse;
        width: 100%;
        gap: 100px;
        padding-bottom: 50px;
    }

    .mainFooter .mainFooterContent .top .rightSide .quickLink ul {
        align-items: start;
        margin-top: 0;
    }

    .mainFooter .mainFooterContent .top .rightSide .sloganIcon {
        width: 100%;
        text-align: end;
    }

    .mainFooter .mainFooterContent {
        gap: 10px;
    }

    .mainFooter .mainFooterContent .below {
        flex-direction: column;
        align-items: end;
        margin-right: 30px;
    }

    .topFooterRight {
        flex-direction: column;
        gap: 10px;
        align-items: center;
        padding-top: 10px;
    }

    .topFooterLeft {
        text-align: center;
    }
}

.homepageTopDestination {
    padding-top: 20px;
    padding-bottom: 10px;

    .swiper {
        .swiper-wrapper {
            .swiper-slide {
                img {
                    width: 100%;
                    aspect-ratio: 4/3;
                    object-fit: cover;
                    object-position: center;
                    transition: all 0.3s ease;
                }

                img:hover {
                    opacity: 0.7;
                }
            }
        }
    }
}

.homepageTourPackages {
    padding-top: 30px;
    padding-bottom: 30px;
}

.tourItem {
    background-color: #F5FFF6;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #C1E7F4;

    .coverImage {
        a {
            img {
                width: 100%;
                aspect-ratio: 6/4;
                object-fit: cover;
                object-position: center;
                transition: all 0.3s ease;
            }

            img:hover {
                opacity: 0.7;
            }
        }
    }

    .content {
        padding: 10px 20px;

        a {
            h3.title {
                color: black;
                font-size: 12px;
                font-weight: 700;
            }

            .listDetail {
                display: flex;
                flex-direction: column;
                gap: 0px;
                padding-top: 5px;
                padding-bottom: 5px;

                .listDetailItem {
                    display: flex;
                    gap: 5px;
                    align-items: center;

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

                        svg {
                            width: 16px;
                            aspect-ratio: 1;

                            g {
                                path {
                                    fill: var(--primary-color);
                                }

                            }
                        }
                    }

                    span.detail {
                        font-size: 12px;
                        font-weight: 400;
                        color: #181818;
                    }
                }
            }

            .price {
                display: flex;
                gap: 0;
                align-items: end;

                span {
                    font-size: 24px;
                    font-weight: 600;
                    color: #638ee1;

                    .originalPrice {
                        opacity: 0.8;
                        font-size: 12px;
                        text-decoration: line-through;
                    }
                }
            }
        }
    }
}

.leftSidebar .filter-top-label {
    border: 1px solid #ac93e7 !important;
    background: linear-gradient(164deg, rgba(19, 119, 212, 1) 14%, rgba(109, 173, 242, 1) 54%, rgba(67, 181, 223, 1) 99%);
}

.ttbm_style .ribbon {
    box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.4);
    border-radius: 0 5px 5px 0;
    left: placeholder_area0px;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 600;
    background-color: var(--secondary-color) !important;
}

@media only screen and (min-width: 10px) {
    .ttbm_style div.bg_image_area {
        width: 100%;
        overflow: hidden;
        position: relative;
        height: auto !important;
        aspect-ratio: 6 / 4 !important;
    }
}

.filter_item {
    border: none !important;
    overflow: hidden;
}

.ttbm_list_details {
    background-color: #F5FFF6;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #C1E7F4;
}

.lotus .filter_item .ttbm_list_title {
    padding: 5px 20px 0px 20px;

    a {
        color: black;
        font-size: 12px;
        font-weight: 700;
    }
}

div.ttbm_list_info {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin: 0px 0 !important;
    overflow: hidden;
    gap: 10px;
    font-size: 12px;
    font-weight: 400;
    color: #181818;

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

        svg {
            width: 16px;
            aspect-ratio: 1;

            g {
                path {
                    fill: var(--primary-color);
                }
            }
        }
    }
}

div.ttbm_list_info span {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #638ee1 !important;
}

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

.ttbm_item_activity_active {
    background: linear-gradient(164deg, rgba(19, 119, 212, 1) 14%, rgba(109, 173, 242, 1) 54%, rgba(67, 181, 223, 1) 99%);
    color: #f7f5f5;
}

.ttbm_item_filter_by_activity:hover {
    background: linear-gradient(164deg, rgba(19, 119, 212, 1) 14%, rgba(109, 173, 242, 1) 54%, rgba(67, 181, 223, 1) 99%);
    color: #f7f5f5;
}


/* .site-content {
    margin-top: 150px;
} */

.widget_wp_travel_filter_search_widget select,
.widget_wp_travel_filter_search_widget input,
.widget_wp_travel_filter_search_widget .wp-travel-tab-wrapper .wp-travel-booking-form-wrapper form .wp-travel-form-field select,
.wp-travel-tab-wrapper .wp-travel-booking-form-wrapper form .wp-travel-form-field .widget_wp_travel_filter_search_widget select,
.widget_wp_travel_filter_search_widget .wp-travel-tab-wrapper .wp-travel-booking-form-wrapper form .wp-travel-form-field textarea,
.wp-travel-tab-wrapper .wp-travel-booking-form-wrapper form .wp-travel-form-field .widget_wp_travel_filter_search_widget textarea {
    width: 100%;
    background: transparent !important;
    border: 1px solid #6f9b17 !important;
}

.wp-trave-price-range .ui-widget.ui-widget-content {
    background: linear-gradient(164deg, rgba(19, 119, 212, 1) 14%, rgba(109, 173, 242, 1) 54%, rgba(67, 181, 223, 1) 99%) !important;
}

.wp-trave-price-range .ui-state-default,
.wp-trave-price-range .ui-widget-content .ui-state-default,
.wp-trave-price-range .ui-widget-header .ui-state-default,
.wp-trave-price-range .ui-button,
html .wp-trave-price-range .ui-button.ui-state-disabled:hover,
html .wp-trave-price-range .ui-button.ui-state-disabled:active {
    border: 1px solid #ffffff !important;
    background: var(--secondary-color) !important;
}

.widget_wp_travel_filter_search_widget input[type=submit] {
    background: linear-gradient(164deg, rgba(19, 119, 212, 1) 14%, rgba(109, 173, 242, 1) 54%, rgba(67, 181, 223, 1) 99%) !important;
    border: 1px solid #b1bbf1 !important;
}

.wptravel-layout-v2 .wptravel-archive-wrapper .view-box {
    background: #F5FFF6 !important;
    border-radius: 20px !important;
    border: 1px solid #C1E7F4 !important;
    overflow: hidden;
    height: max-content;
    box-shadow: none;
}

.wptravel-layout-v2 .wptravel-archive-wrapper .view-box .view-image .image-thumb img {
    max-width: 100%;
    height: auto;
    width: 100%;
    aspect-ratio: 6 / 4;
    -o-object-fit: cover;
    object-fit: cover;
}

.wptravel-layout-v2 .wptravel-archive-wrapper .view-box .view-image {
    position: relative;
    width: 30%;
    height: auto;
    margin: 30px 0;
}

.wptravel-layout-v2 .wptravel-archive-wrapper.grid-view .view-box .view-content {
    flex-direction: column;
    margin: 0;
    padding: 10px 20px;
    width: auto;
}

.wptravel-layout-v2 .wptravel-archive-wrapper .view-box .view-content .left-content header .entry-title {
    width: 100%;
    margin: 0;
    text-align: left;
    font-size: 12px;
}

.archive.wptravel-layout-v2 .wptravel-archive-wrapper.grid-view .view-box .view-content .left-content header .heading-link,
.wptravel-layout-v2 .wp-travel-itinerary-items.wptravel-archive-wrapper.grid-view .view-box .view-content .left-content header .entry-title .heading-link {
    line-height: 1.5;
    color: black;
    font-size: 12px;
    font-weight: 700;
}

.wptravel-layout-v2 .wptravel-archive-wrapper.grid-view .view-box .view-content .left-content .trip-icons {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    -moz-column-gap: 1em;
    column-gap: 0px;
    position: relative;
    border: none;
    border-left: 0;
    border-right: 0;
    padding: 0;
    margin: 0;
    gap: 0px;
    padding-top: 5px;

    .trip-duration,
    .trip-location {
        display: flex;
        gap: 5px;
        align-items: center;

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

            svg {
                width: 16px;
                aspect-ratio: 1;


                path {
                    fill: var(--primary-color);
                }

            }
        }

        span {
            font-size: 12px;
            font-weight: 400;
            color: #181818;
        }
    }
}

.wp-travel-trip-time span {
    margin-left: 0px;
}

.wptravel-layout-v2 .wptravel-archive-wrapper.grid-view .view-box .view-content .right-content {
    margin: 0 !important;
}

.wptravel-layout-v2 .wptravel-archive-wrapper.grid-view .view-box .view-content .right-content .footer-wrapper {
    flex-direction: row !important;
}

.wptravel-layout-v2 .wptravel-archive-wrapper.grid-view .view-box .view-content .right-content .footer-wrapper .trip-price .price-here {
    font-size: 24px;
    font-weight: 600;
    color: #638ee1;
}

.wptravel-layout-v2 .wptravel-archive-wrapper .view-box:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.wp-travel-toolbar {
    display: none;
}

.widget_wp_travel_filter_search_widget .wp-travel-itinerary-items {
    padding: 15px;
    background: linear-gradient(180deg, #F1FFF2 0%, #E5F8FF 100%);
    padding: 40px 30px;
    border: 1px solid #ededfd;
    border-radius: 20px;
}

.wp-travel-itinerary-items .wp-travel-itinerary-list li {
    list-style: none;
    box-sizing: border-box;
    border: 1px solid #C1E7F4 !important;
    background: #F5FFF6 !important;
    width: 100%;
    height: max-content;
    margin: 0;
    padding-left: 0;
    border-radius: 20px;
    overflow: hidden;
}

.wp-travel-itinerary-items .wp-travel-post-item-wrapper .wp-travel-post-thumbnail img {
    aspect-ratio: 6 / 4;
}


.wp-travel-itinerary-items .wp-travel-post-wrap-bg {
    .content {
        padding: 20px 20px 10px 20px;

        .title {
            .post-title {
                a {
                    line-height: 1.5;
                    color: black;
                    font-size: 12px;
                    font-weight: 700;
                }
            }
        }


        .detailIcon {
            display: flex;
            gap: 0px;
            flex-direction: column;
            padding-top: 5px;

            .item {


                .trip-duration,
                .trip-location {
                    display: flex;
                    gap: 5px;
                    align-items: center;

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

                        svg {
                            width: 16px;
                            aspect-ratio: 1;

                            path {
                                fill: var(--primary-color);
                            }
                        }
                    }

                    span {
                        font-size: 12px;
                        font-weight: 400;
                        color: #181818;

                        a {
                            color: #181818;
                        }
                    }
                }
            }
        }

        .price {
            padding-top: 10px;

            .wptravel-price-wrap .trip-price {
                display: flex;
                gap: 5px;
                align-items: end;

                span {
                    font-size: 24px;
                    font-weight: 600;
                    color: #638ee1;
                }
            }
        }
    }
}

.wp-travel-itinerary-items .wp-travel-post-wrap-bg {
    background: transparent !important;
}

.singleTripTopCover {
    background: linear-gradient(180deg, #F1FFF2 0%, #E5F8FF 100%);
    width: 100%;
    height: 70px;
}

.wp-travel-trip-meta-info {
    border: 1px solid rgba(222, 222, 222, .49);
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(200deg, #a1e6f8 0%, #f5ffe2 100%);
    margin-top: 15px;
}

.wp-travel.trip-headline-wrapper .wptravel-book-your-trip {
    padding: 10px 50px;
    box-shadow: none;
    margin-right: 15px;
    background: linear-gradient(164deg, rgba(19, 119, 212, 1) 14%, rgba(109, 173, 242, 1) 54%, rgba(67, 181, 223, 1) 99%);
    border: none;
    border-radius: 0px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.wp-travel.trip-headline-wrapper .wptravel-book-your-trip:hover {
    border-radius: 20px;
    color: black;
}

.wp-travel.trip-headline-wrapper .right-plot-inner-wrap {
    padding: 0 0px 30px;
}

.wp-travel-tab-wrapper .tab-list-content {
    display: block;
    padding: 15px 0px;
    border: none;

    ol,
    ul {
        margin-left: 15px;
    }

    a {
        color: #196ea3;
    }
}

.singleTripBookingButton {
    padding: 10px 50px;
    box-shadow: none;
    margin-right: 15px;
    background: linear-gradient(164deg, rgba(19, 119, 212, 1) 14%, rgba(109, 173, 242, 1) 54%, rgba(67, 181, 223, 1) 99%);
    border: none;
    border-radius: 0px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.singleTripBookingButton:hover {
    border-radius: 20px;
    color: black;
}

.wp-travel-trip-code {
    margin-top: 15px;
}

.singleTripMiniTitle {
    color: black;
}

@media (max-width: 768px) {
    .wp-travel-tab-wrapper h2.resp-accordion {
        display: none;
    }
}

.wp-travel.trip-headline-wrapper p {
    margin: 20px 0;
    font-size: 14px !important;
    color: #196ea3 !important;
}

.timeline-contents h2 {
    text-align: center;
    display: none;
}

#trip_outline .panel-title,
#trip_outline .open-all-itinerary-link,
#trip_outline .close-all-itinerary-link {
    text-decoration: none;
    border: none;
    padding: 0;
    margin-bottom: 10px;
}

.wp-collapse-open {
    text-align: end;
    margin-bottom: 10px;
}

#trip_outline .open-all-itinerary-link,
#trip_outline .close-all-itinerary-link {
    background-color: white;
    padding: 3px 20px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.itenary .panel-collapse {
    border: none;
}

#trip_outline .panel-collapse {
    padding: 20px;
    background-color: #f6f6f9;
    margin-bottom: 15px;
    margin-left: 0px;

    ol,
    ul {
        li {
            font-size: 14px !important;
            color: #196ea3;
        }
    }


}

/* 1. Main Wrapper Setup */
.timeline-contents {
    padding-left: 60px !important;
    position: relative !important;
    overflow: visible !important;
}

/* 2. The Vertical Dotted Line */
/* We attach the line to every panel-default */
.timeline-contents .panel.panel-default {
    position: relative !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.timeline-contents .panel.panel-default::before {
    content: "" !important;
    position: absolute !important;
    left: -32px !important;
    /* Alignment of the vertical line */
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    /* Dotted Pattern */
    background-image: linear-gradient(to bottom, #d1d1d1 40%, rgba(255, 255, 255, 0) 0%) !important;
    background-position: center !important;
    background-size: 2px 10px !important;
    background-repeat: repeat-y !important;
    z-index: 1 !important;
}

/* 3. Logic to 'Cut' the line at the top and bottom */
.timeline-contents .panel.panel-default:first-of-type::before {
    top: 25px !important;
    /* Starts at Day 1 Icon */
}

.timeline-contents .panel.panel-default:last-of-type::before {
    height: 25px !important;
    /* Ends at Day 4 Icon */
    bottom: auto !important;
}

/* 4. Default Icon (Blue Dots for Day 2, 3, 4) */
.timeline-contents .accordion-toggle::before {
    content: "" !important;
    font-family: inherit !important;
    position: absolute !important;
    display: block !important;
    left: -40px !important;
    top: 12px !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #337ab7 !important;
    border: 4px solid #ffffff !important;
    border-radius: 50% !important;
    z-index: 10 !important;
    box-shadow: 0 0 0 1px #337ab7 !important;
}

/* 5. UNIQUE Style for Day 1 Icon (Orange Map Pin SVG) */
.timeline-contents .panel.panel-default:first-of-type .accordion-toggle::before {
    /* Orange Pin SVG */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF5733'%3e%3cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3e%3c/svg%3e") !important;
    background-color: #ffffff !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    /* Remove the Dot Styling */
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    /* Size and Position for Pin */
    width: 28px !important;
    height: 28px !important;
    left: -44px !important;
    top: 8px !important;
}

/* 6. General Cleanup */
.panel-heading {
    padding: 10px 0 !important;
    background: transparent !important;
}

.panel-title {
    margin: 0 !important;
    font-weight: bold !important;
    font-size: 14px;
}

.itenary .collapsed .panel-title span.collapse-icon:after {
    font-size: 13px;
}

#trip_includes,
#trip_excludes {
    ul {
        li {
            display: list-item;
            margin-left: 10px;

            &::marker {
                /* Replace the URL below with your SVG path or Data URI */
                content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 48 48"><g fill="none" stroke="%23196ea3" stroke-linejoin="round" stroke-width="4"><path d="M24 44a19.94 19.94 0 0 0 14.142-5.858A19.94 19.94 0 0 0 44 24a19.94 19.94 0 0 0-5.858-14.142A19.94 19.94 0 0 0 24 4A19.94 19.94 0 0 0 9.858 9.858A19.94 19.94 0 0 0 4 24a19.94 19.94 0 0 0 5.858 14.142A19.94 19.94 0 0 0 24 44Z"/><path stroke-linecap="round" d="m16 24l6 6l12-12"/></g></svg>');
            }

            p {
                display: inline-block;
                vertical-align: middle;
                padding-left: 20px;
                margin: 8px 0px;
                transform: translateY(-5px);
            }
        }
    }
}

#trip_excludes {
    ul {
        li {

            &::marker {
                /* Replace the URL below with your SVG path or Data URI */
                content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="%23c0bcbc" d="M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2m2.59 6L12 10.59L9.41 8L8 9.41L10.59 12L8 14.59L9.41 16L12 13.41L14.59 16L16 14.59L13.41 12L16 9.41z"/></svg>');
            }

            p {
                color: #c0bcbc !important;
            }
        }
    }
}

.wp-travel-view-gallery {
    display: none;
}

.wp-travel-gallery ul {
    margin: 0 !important;
    padding: 0 20px !important;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    -moz-column-gap: 0.5em;
    column-gap: 0.5em;
}

.wp-travel-gallery ul img {
    margin: 0;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    height: auto;
    aspect-ratio: 6 / 4;
}

#faq {
    .wp-collapse-open {
        display: none;
    }
}

#faq h4 a {
    font-size: 16px;
    color: black;
    font-weight: 600;
}

#review_form_wrapper .comment-respond p.form-submit input {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 5px 20px;
    font-weight: 600;
}

.wp-travel-calendar-view {
    background: linear-gradient(105deg, #E2FFE57D 35%, #CBF1FF87 100%);
    padding: 20px;
    border: 2px solid #c1e5fc;
}

.wp-travel-calendar-view .wp-travel-booking__datepicker-wrapper .react-datepicker-wrapper .react-datepicker__input-container .wp-travel-date-picker-btn span {
    display: inline-block;
    margin-left: 1em;
    padding: .75em 1em;
    background-color: rgb(80 172 37 / 30%);
}


.wp-travel-booking__panel-bottom {
    position: fixed;
    bottom: 0;
    padding: 15px;
    background: linear-gradient(164deg, rgba(19, 119, 212, 1) 14%, rgba(109, 173, 242, 1) 54%, rgba(67, 181, 223, 1) 99%);
    width: 100%;
    left: 0;
    z-index: 11;
    padding-right: 150px;

    .left-info,
    .right-info {
        display: flex;
        align-items: center;
        gap: 10px;

        p {
            color: white !important;
        }
    }

}

.wp-travel-booking__panel-bottom .left-info p:last-child {
    margin-top: 0;
}

@media (max-width: 767px) {
    .timeline-contents {
        padding-left: 39px !important;
    }

    .wp-travel-row-wrap {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
}

.checkout-page-wrap .wp-travel-checkout-section .checkout-left .ws-theme-timeline-block .panel-body .payment-content .wp-travel-form-field #wp-travel-book-now {
    margin: 0;
    float: right;
    background-color: var(--primary-color);
    border: 2px solid black;
    font-weight: 600;
    color: black;
}

.wp-travel-trip-code {
    display: none;
}

.wp-travel.trip-headline-wrapper .wptravel-price-wrap {
    display: inline-block;
    margin-top: 15px;
}

.wp-travel.trip-headline-wrapper .wp-travel-average-review {
    float: right;
    margin-top: 20px;
}

.archiveMainCover {
    background: linear-gradient(180deg, #F1FFF2 0%, #E5F8FF 100%);
    height: 400px;
}

html[lang="km-kh"] {
    * {
        font-family: "Google Sans", sans-serif;
    }

    .fa-calendar-alt:before {
        content: "\f073";
        font-family: "Font Awesome 5 Free" !important;
    }

    .dashicons {
        font-family: dashicons !important;
    }

    .wp-travel-average-review {
        font-family: "Font Awesome 5 Free" !important;
    }

    .fa,
    .far,
    .fas {
        font-family: "Font Awesome 5 Free" !important;
    }
}

.widget_wp_travel_filter_search_widget .trip-duration-calender {
    width: 100% !important;
    display: block;
    float: left;
    margin-bottom: 20px;
    position: relative;

    input {
        max-width: 100% !important;
        width: 100% !important;
        height: 29px !important;
    }
}

@media (max-width: 575px) {
    .widget_wp_travel_filter_search_widget .trip-duration-calender input {
        box-sizing: border-box !important;

        display: block !important;
        /* Ensures it behaves as a full-width element */
        width: 100% !important;
        max-width: 100% !important;
        height: 29px !important;

        /* iOS Specific reset */
        -webkit-appearance: none;
        margin: 0 !important;
        color: #000000 !important;
        /* Force text to be black */
        -webkit-text-fill-color: #000000 !important;
        /* Required for some iOS versions */
        background-color: transparent !important;
    }
}

@media (max-width: 767px) {
    .wp-travel-itinerary-items .wp-travel-itinerary-list {
        margin: 0;
        padding-left: 0 !important;
    }
}

.wpml-ls-legacy-list-vertical a {
    display: flex;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding: 5px 10px;
    line-height: 1;
    align-items: center;
}

.customGalleryBox img {
    height: 250px;
    /* Adjust height as needed */
    object-fit: cover;
}


.filterBar {
    display: inline-block;
    text-align: center;
    width: 100%;

    label {
        background: #efe2e2;
        padding: 6px 15px;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        box-shadow: #EDEDED 0 0 0 1px inset, rgba(0, 0, 0, 0.05) 0 1px 2px 0;
        display: inline-block;
        font-weight: 500;
        font-size: 0.85rem;
        margin-top: 10px;
    }

    label:hover {
        background: rgba(0, 0, 0, 0.03);
        box-shadow: #CFCFCF 0 0 0 1px inset, rgba(0, 0, 0, 0.1) 0 1px 2px;
    }

    input {
        appearance: none;
        display: none;
    }

    input:focus {
        outline: none;
    }

    input:checked+label {
        box-shadow: var(--primary-color) 0 0 0 2px inset, rgba(0, 0, 0, 0.1) 0 1px 2px 1px;
        background: var(--primary-color);
        color: white;
    }
}

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

.customPagnition {
    display: flex;
    gap: 20px;
    align-items: center;
    transform: scale(0.8);

    .page-numbers {
        background-color: lightgray;
        padding: 5px 5px;
        width: 30px;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-weight: 600;
        color: var(--text-color);
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }

    .page-numbers.current,
    .page-numbers:hover {
        background-color: var(--primary-color);
        color: white;
    }
}

.teamsPageGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

@media (max-width: 767px) {
    .teamsPageGrid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.gridHomepageItem {
    display: flex;
    gap: 7px;
    flex-direction: column;
}

.gridHomepageItem .image {
    overflow: hidden;
    border-radius: 0px;
}

.gridHomepageItem .image img {
    opacity: 1;
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover;
    object-position: center;
    transition: all 0.3s ease;
}

.gridHomepageItem .image:hover img {
    opacity: 0.5;
}

.gridHomepageItem .content .title {
    font-size: 0.80rem;
    font-weight: 400;
}

.searchMainContentContainer {
    padding-bottom: 50px;

    .post-type-group {

        .post-type-heading {
            font-size: 1rem;
            padding-top: 30px;
        }

        .searchGridResult {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 20px;
            padding-top: 30px;

            .search-result-item {
                display: flex;
                flex-direction: column;
                gap: 10px;

                .image {
                    width: 100%;


                    a {
                        img {
                            width: 100%;
                            height: 100%;
                            aspect-ratio: 5/3;
                            object-fit: cover;
                            object-position: center;
                            border-radius: 10px;
                        }
                    }
                }

                .content {
                    h3 {
                        font-size: 0.85rem;

                        a {
                            color: black;
                            font-weight: 400;
                            line-height: 1.5;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 576px) {
    .searchMainContentContainer {
        .post-type-group {
            .searchGridResult {
                grid-template-columns: 1fr 1fr;
            }
        }
    }
}

.searchTopBackground {
    height: 400px;
    background: linear-gradient(180deg, #F1FFF2 0%, #E5F8FF 100%);
}

.theTitleCustom {
    text-align: center;
}

.wp-travel-booking__panel-bottom .right-info .wp-travel-book {
    background: var(--primary-color);
    padding: 5px 25px;
    border-radius: 20px;
}

.wp-travel-booking__panel-bottom .right-info .wp-travel-book[disabled] {
    border-radius: 0;
}

@media (max-width: 576px) {
    .wp-travel-booking__panel-bottom{
        padding-right: 15px;
    }
}


.wp-travel.trip-headline-wrapper .banner-image-wrapper{
	img {
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		object-position: center;
	}
}