/*
======================================
=====||   Hero 1 Start Here    ||=====
======================================
*/

.g-hero {
    margin-top: 32px;
}

.g-hero-area {
    width: 100%;
    height: 484px;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 60px;
}

.g-hero-banner-img img {
    border-radius: var(--radius-4xl);
    height: 100%;
    width: 100%;
    height: 400px;
}





/*
======  Banner Video  ======
*/
.banner-video {
    position: relative;
    height: 400px;
    width: 100%;
}

.banner-video video {
    width: 100%;
    height: 400px;
    border-radius: var(--radius-3xl);
    object-fit: cover;
}

.g-hero-img-wrap {
    overflow: hidden;
    position: absolute;
    width: 100%;
}


.g-hero-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    /* background-color: #00000012; */
    z-index: 1;
    border-radius: 32px;
}

.g-hero .bottom-search {
    z-index: 2;
}



/*
==============================================
=====||   Banner Section Start Here    ||=====
==============================================
*/
.offer-sec {
    display: grid;
    grid-template-columns: .5fr 2fr;
    gap: 24px;
}

.offer-sec .tab-contents {
    margin-top: 0;
}

/*
======  Left Buttons  ======
*/
.offer-sec .left-btns {
    height: 100%;
    border: 1px solid var(--my-white-off);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    padding: 24px 0;
}


.offer-sec .bottom-btns {
    max-height: 330px;
    overflow-y: auto;
    padding-right: 12px;
    width: calc(100% - 4px);
    overflow-y: scroll;
    scrollbar-width: none;
}

.offer-sec .bottom-btns:hover {
    scrollbar-width: auto;
}

.offer-sec .bottom-btns::-webkit-scrollbar {
    width: 8px;
    border: 1px solid var(--my-border-secondary);
    border-radius: 12px;
}

.offer-sec .bottom-btns::-webkit-scrollbar-thumb {
    background-color: #D5D7DA;
    border-radius: 12px;
}

.offer-sec .bottom-btns::-webkit-scrollbar-thumb:hover {
    background-color: #cdcdcd;
    cursor: pointer;
}




.offer-sec .left-btns .item {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: var(--fs-xl);
    font-weight: var(--fw-600);
    color: var(--text-quaternary);
    cursor: pointer;
    padding-left: 12px;
    height: 44px;
    min-height: 44px;
    width: 100%;
    font-size: var(--fs-md);
    display: flex;
    align-content: center;
    justify-content: space-between;
    transition: .2s linear;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    margin-bottom: 4px;
    user-select: none;
    border: 1px solid var(--my-white-off);
    border-radius: 44px;
}


/*
======  Left Button After  ======
*/
.offer-sec .left-btns .item::before,
.offer-sec .left-btns .item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: var(--my-primary-color);
    transition: left 0.36s ease;
    z-index: 0;
}

.offer-sec .left-btns .item.active::before {
    background-color: var(--my-primary-color);
}

.offer-sec .left-btns .item:hover::before {
    left: 0;
}

.offer-sec .left-btns .item:hover {
    color: var(--my-white);
    border-radius: var(--radius-pill);
}

.offer-sec .left-btns .item>* {
    position: relative;
    z-index: 1;
}


.offer-sec .left-btns .item.active {
    background-color: var(--my-primary-color);
    font-size: var(--fs-md);
    border-radius: var(--radius-pill);
    display: flex;
    align-content: center;
    justify-content: space-between;
    padding: 0;
    padding-left: 16px;
    color: var(--my-white);

}

.offer-sec .left-btns .item.active:hover::after {
    background-color: var(--my-secondary-color);
}


/*
======  Left Button Icon  ======
*/
.offer-sec .left-btns .item .icon {
    background-color: var(--my-white);
    width: 48px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -2px;
    box-shadow: var(--shadow-all-sm);
    border: 1px solid var(--my-bg-secondary);
    transition-delay: .3s linear;
}

.offer-sec .left-btns .item .icon:hover {
    border-color: var(--my-border-primary);
    box-shadow: var(--shadow-all-lg);
}

.offer-sec .left-btns .item .icon:hover svg {
    animation: moveRight 0.2s ease 0s 2;
}

@keyframes moveRight {
    0% {
        transform: translateX(0);
    }

    70% {
        transform: translateX(4px);
    }

    100% {
        transform: translateX(0px);
    }
}


.offer-sec .left-btns .item.active .icon {
    box-shadow: var(--shadow-all-md);
}







/*
===============  Offer Section Right  =================
*/
.offer-sec .right {
    height: 100%;
}

.offer-sec .offer-cart {
    position: relative;
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    height: 230px;
}

.offer-sec .offer-cart .video-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 50%;
    top: 40%;
    transform: translate(-40%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF66;
}


.offer-sec .offer-cart .video-btn:hover {
    background-color: var(--my-secondary-color);
    backdrop-filter: unset;
}

.offer-sec .offer-cart.full {
    height: 385px;
}

.offer-sec .offer-cart .img-wrapper {
    position: relative;
    height: 100%;
}

.offer-sec .offer-cart .img-wrapper img {
    height: 100%;
    position: absolute;
    object-fit: cover;

}

/*
======  Cart Content  ======
*/
.offer-sec .offer-cart .content {
    top: 0px;
    left: 0px;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
}

.offer-sec .offer-cart.sm .content {
    padding: 8px;
}

.offer-sec .offer-cart .content .bottom-area {
    display: flex;
    align-items: flex-end;
    justify-content: end;
    width: 100%;
}




.offer-sec .offer-cart.sm .bottom {
    padding: 8px 10px;
    width: 100%;
    display: flex;
    justify-content: sb;
}


/*
======  Cart Bottom  ======
*/
.offer-sec .offer-cart .bottom {
    border-radius: var(--radius-pill);
    padding: 11px 12px;
    background-color: var(--white-20);
    width: fit-content;
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
    backdrop-filter: blur(4px);
    border-radius: var(--radius-xxl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offer-sec .offer-cart .rating .star {
    display: flex;
    color: var(--my-secondary-color);
    align-items: center;
    gap: 2px;
}

/* tag */
.offer-sec .offer-cart .tag {
    padding: 5px 12px;
    font-size: var(--fs-sm);
    color: var(--my-white);
    background-color: var(--my-secondary-color);
    width: fit-content;
    border-radius: 12px 0 12px 0;
}

.offer-sec .offer-cart.sm {
    border-radius: var(--radius-xxl);
    height: 128px;
}


.offer-sec .offer-cart.sm .tag {
    font-size: var(--fs-low);
}

.offer-sec .offer-cart.sm .rating span {
    font-size: var(--fs-low);
}




.offer-sec .offer-cart .bottom .title {
    font-size: var(--fs-lg);
    color: var(--fw-600);
    color: var(--my-white);
    margin-bottom: 8px;
}

.offer-sec .offer-cart.sm .title {
    font-size: var(--fs-xs);
}

.offer-sec .offer-cart.sm i {
    font-size: 10px;
}


.offer-sec .offer-cart button {
    font-size: var(--fs-xs);
    line-height: var(--line-height-sm);
    border-radius: var(--radius-xl);
    background-color: var(--my-secondary-color);
    padding: 12px 20px;
    box-shadow: var(--n-shadow-1);
}

.offer-sec .offer-cart button:hover {
    background-color: var(--my-primary-color);
}

.offer-sec .offer-cart.sm button {
    font-size: var(--fs-low);
    line-height: var(--line-height-sm);
    border-radius: var(--radius-md);
    padding: 4px 8px;
}

.offer-sec .rating span {
    font-size: var(--fs-low);
}



/*
======================================
=====||   Hero 2 Start Here    ||=====
======================================
*/
.g-hero-2-area .slider-top {
    height: 400px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--my-white-off);
}

.g-hero-2-area .slider-top .swiper {
    height: 100%;
}

.g-hero-2-area .slider-top img {
    height: 100%;
    width: 100%;
}

.g-hero-2-area .slider-top {
    position: relative;
}


/* Style both buttons */
.g-hero-2-area .slider-top .swiper-button-next,
.g-hero-2-area .slider-top .swiper-button-prev {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    color: #000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border: 2px solid var(--my-border-secondary);
    bottom: 100px;
    top: auto !important;
    bottom: 80px !important;
    width: 44px;
    height: 44px;
    color: var(--my-white);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    background-color: rgba(0, 0, 0, 0.2);
}

.g-hero-2-area .slider-top .swiper-button-next:hover,
.g-hero-2-area .slider-top .swiper-button-prev:hover {
    background-color: var(--my-white);
    color: var(--my-text-quaternary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Make arrow icons smaller and centered */
.g-hero-2-area .slider-top .swiper-button-next::after,
.g-hero-2-area .slider-top .swiper-button-prev::after {
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* Position both buttons on the right side */
.g-hero-2-area .slider-top .swiper-button-next {
    right: 46px;
}

.g-hero-2-area .slider-top .swiper-button-prev {
    right: 110px;
    left: auto;
}


/*
================||   Slider Bottom  ||================
*/
.g-hero-2-area .slider-bottom {
    margin-top: -40px;
    height: 190px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    margin-top: -40px;
}

.g-hero-2-area .slider-bottom .bottom {
    height: 100%;
}

.slider-bottom .item img:hover {
    border-color: var(--my-white);
}

.slider-bottom .item img {
    border-radius: var(--radius-lg);
    border: 2px solid var(--my-white-off);
}

.slider-bottom .swiper-pagination-bullet-active {
    padding: 4px 8px;
    background-color: var(--my-primary-color);
    border-radius: 8px;
}




/*
=====================================================
=====||   Recently View Section Start Here    ||=====
=====================================================
*/


.recently-view.section-main {
    padding-bottom: 0;
}



/*
=======================================================
=====||   Recommendation  Section Start Here    ||=====
=======================================================
*/

.m-recommendation .m-tour-cart {
    background-color: var(--my-white);
}

.recommendation-area .item:hover {
    background-color: var(--my-white-off);
}

.recommendation .tab-contents {
    margin-top: 20px;
}






/*
====================================================
=====||   Tending Deal Section Start Here    ||=====
====================================================
*/







/*
=======================================================
=====||   Hot Destination Section Start Here    ||=====
=======================================================
*/

.hot-destination .head .left {
    max-width: 490px;
    width: 100%;
}

.hot-destination .search {
    position: relative;
    width: min(100%, 400px);
}


.hot-destination .grid-item .item {
    padding: 12px;
}

.hot-destination .grid-item .item:hover,
.hot-destination .grid-item .item.active {
    background-color: var(--my-bg-secondary);
}







/*
================================================
=====||   Map View Section Start Here    ||=====
================================================
*/
.map-view .section-sub-title {
    max-width: 1085px;
}

.map-view .map-wrapper {
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.map-view .head .left {
    max-width: 770px;
}

.map-view .map-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #16161618;
    transition: .3s;
}

.map-view .map-wrapper:hover::after {
    top: 100%;
    cursor: pointer;
}

.map-view iframe {
    height: 254px;
    width: 100%;
    border: none;
    border-radius: var(--radius-xl);
}

.map-view .shop-map {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background-color: var(--my-white);
    padding: 6px 12px;
    border: none;
    z-index: 2;
    font-size: var(--fs-sm);
    line-height: 20px;
    border-radius: var(--radius-md);
}

.map-view .shop-map svg {
    fill: var(--my-secondary-color);
    stroke: var(--my-secondary-color);
}

.map-tabs li.tab-btn {
    /* background-color: gainsboro; */
    border-radius: 50%;
    width: 126px;
    height: 126px;
    flex-direction: column;
    border: none;
    color: var(--my-text-color);
}


.map-tabs li img {
    width: 66px;
    height: 66px;
    border-radius: 50%;
}





/*
=================================================
=====||   Trip Plan Section Start Here    ||=====
=================================================
*/
.trip-plan {
    margin-top: -84px;
}

.trip-plan .plan-items-wrapper {
    margin-top: -60px;
}

.trip-plan-area .section-sub-title {
    max-width: 838px;
}


.trip-plan-area .head .left {
    max-width: 658px;
}

.trip-plan-area .head .right {
    position: relative;
}

.trip-plan-area .head .img-area {
    position: relative;
}





.trip-plan-area .right .img-wrapper {
    position: relative;
    width: 100%;
}

.trip-plan-area .right .img-wrapper img {
    width: 100%;
}




.plan-items-wrapper {
    display: grid;
    grid-template-columns: calc(30% - 12px) calc(70% - 12px);
    gap: 24px;
}



/*
=====  Trip plan single item =====
*/
.plan-items-wrapper .item {
    height: 304px;
    position: relative;
    border-radius: var(--radius-xxl);
    overflow: hidden;
    transform-style: preserve-3d;
}

.plan-items-wrapper .left .item::after,
.plan-items-wrapper .right .item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 40%;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(14, 14, 14, 0.4), rgba(14, 14, 14, 0.025));
}

.plan-items-wrapper .right .item::after {
    bottom: 0;
    top: unset;
    height: 50%;
    background: linear-gradient(to top,
            rgba(14, 14, 14, 0.85),
            rgba(14, 14, 14, 0.4) 25%,
            rgba(14, 14, 14, 0.3) 70%,
            rgba(14, 14, 14, 0.01)100%);
}

.plan-items-wrapper .item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.plan-items-wrapper .item .content {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 3;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.plan-items-wrapper .item .content .best-seller {
    text-wrap: wrap;
    word-break: break-all;
    word-wrap: wrap;
    text-align: center;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    background-color: var(--my-secondary-color);
    font-size: var(--fs-xs);
    color: var(--my-white);
    white-space: normal !important;
    display: inline-block;
    max-width: 55px;
}

.plan-items-wrapper .item .content .best-seller {
    text-align: center;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    background-color: var(--my-secondary-color);
    font-size: var(--fs-xs);
    color: var(--my-white);

    /* fix wrapping */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.plan-items-wrapper .item .content .tag {
    position: absolute;
    top: 12px;
    right: 12px;
    height: 30px;
    width: 30px;
    border-radius: var(--radius-round);
    background-color: var(--my-white);
}

.plan-items-wrapper .item .content .text {
    line-height: var(--line-height-sm);
}

.plan-items-wrapper .item .title {
    line-height: var(--line-height-md);
    color: var(--my-white);
}

.plan-items-wrapper .item .content .tag:hover {
    background-color: var(--my-border-primary);
}

.plan-items-wrapper .item .my-btn .content {
    padding: 0;
}

.plan-items-wrapper .item .content .my-btn {
    padding: 10px 16px;
    border-radius: var(--radius-md);
}

.plan-items-wrapper .item {
    transition: transform 0.3s ease;
}

.plan-items-wrapper .item {
    /* animation: .4s sway 0.5s ease-in-out; */
    /* transform-origin: bottom center;
    transform: translateY(12px) rotate(0deg); */
}



.plan-items-wrapper .item:hover {
    transform: perspective(100px) rotateX(4deg);
    background: #181818;
    background-size: 16px 16px;
    background-position: -1px -1px;
}




/*
===================================================
=====||   Testimonial Section Start Here    ||=====
===================================================
*/
.testimonial {
    background-color: var(--my-bg-secondary);
}

.testimonial .testimonial-swiper {
    padding-top: 12px;
}

.testimonial .tab-contents {
    margin-top: 20px;
}


.testimonial .hide-scroll-wrapper {
    justify-content: center;
}

.testimonial .testimonial-swiper {
    position: relative;
}

.testimonial .for-3 .slider-item {
    min-width: calc(33% - 12px);
}


.testimonial .slider-controls {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    position: unset;
}

.testimonial .item {
    padding: 32px;
    background-color: var(--my-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--my-border-secondary);
    transition: .2s ease;
    max-height: 280px;
}

.testimonial .item:hover {
    box-shadow: 0px 4px 16px 0px #0000001F;
    border-color: transparent;
    background-color: var(--my-white);
}

.testimonial .star i {
    color: var(--my-warring);
}







/*
=================================================
=====||   Our Brand Section Start Here    ||=====
=================================================
*/
.our-brand-area .head {
    font-weight: 400;
    font-size: 24px;
    text-align: center;
    color: var(--my-text-quaternary);
}


.our-brand-area {
    overflow: hidden;
    background: #fff;
}


/*===== Left Before =====*/
.our-brand-area .brandSwiper {
    position: relative;
}

.our-brand-area img {
    object-fit: contain;
    max-height: 80px;
}

.our-brand-area .brandSwiper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right, rgba(246, 255, 255, 255), rgba(155, 144, 144, 0));
    pointer-events: none;
    z-index: 10;
}

/*===== Right After =====*/
.our-brand-area .brandSwiper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 255), rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 10;
}








/*
=================================================
=====||   Our Blogs Section Start Here    ||=====
=================================================
*/

.our-blog-area .swiper-wrapper {
    padding: 12px 0;
}

.our-blog-area .section-btn-wrapper {
    margin-top: 28px;
}

.our-blog-area .head {
    position: relative;
}

.our-blog-area .head .slider-controls {
    bottom: 0;
    top: unset;
    right: 0;
}

.our-blog-area .head .left {
    max-width: 578px;
}

.our-blog-area .head .top-title {
    color: var(--my-secondary-color);
}

.our-blog .item .profile-img-lg {
    border: none;
    padding: 0px;
    width: 42px;
    height: 42px;
}

.our-blog .item {
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--my-primary-color);
    padding: 12px;
    border-radius: var(--radius-xxl);
    transition: .3s ease;
}

.our-blog .item a {
    width: 100%;
}

.our-blog .item a img {
    /* height: 260px; */
    width: 100%;
    aspect-ratio: 16/11;
}

.our-blog .item .profile-img-lg {
    border: 1px solid var(--white-50);
}

.our-blog .item .cart-title {
    color: var(--my-white);
}

.our-blog .item .cart-title:hover {
    color: var(--my-secondary-color);
}

.our-blog .item .desc {
    color: var(--white-50)
}

.our-blog .item {
    transform-style: preserve-3d;
}

.our-blog .item:hover {
    transform: perspective(250px) rotateY(3deg) scale(.96);
}




/*
=======================================================
=====||   Our Achivements Section Start Here    ||=====
=======================================================
*/
.our-achivements {
    background-color: var(--my-bg-secondary);
    padding: 60px 0;
    position: relative;
}

.our-achivements .head {
    max-width: 768px;
    margin: auto;
}


.our-achivements .items {
    position: relative;
    z-index: 1;
}

.our-achivements .items .item {
    border: 0.79px solid var(--my-secondary-color);
    border-radius: var(--radius-xxl);
    padding: 40px 0;
    background-color: var(--my-white);
    justify-content: space-between;
    transition: .2s linear;
}



.our-achivements .item .title-sm {
    font-size: var(--fs-xl);
    line-height: var(--line-height-xl);
}

.our-achivements .item .section-title {
    font-weight: var(--fw-600);
    color: var(--my-primary-color);
}

.our-achivements .items .item img {
    width: fit-content !important
}


/*===== Bg Image =====*/
.our-achivements .bg-img {
    background-image: url('../../images/achi.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 488px;
    width: 100%;
    margin-top: -250px;
    position: relative;
}


@keyframes swayScale {
    0% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.08);
    }

    30% {
        transform: scale(0.96);
    }

    45% {
        transform: scale(1.04);
    }

    60% {
        transform: scale(1.02);
    }

    75% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.our-achivements .items .item .icon {
    display: inline-block;
    transition: transform 0.3s ease;
}

.our-achivements .items .item:hover .icon {
    animation: swayScale 0.6s cubic-bezier(0.45, 0, 0.55, 1) 1;
}

.our-achivements .items .item:hover {
    box-shadow: var(--n-shadow-2);
    border-color: transparent;
}

/*
================================================
=====||   Subcribe Section Start Here    ||=====
================================================
*/
.get-touch .get-touch-area {
    background-color: var(--my-bg-secondary);
    border-radius: var(--radius-3xl);
    border: 1px solid var(--my-white-off);
    padding: 60px 0;
    /* box-shadow: var(--shadow-1) */
}

.get-touch .get-touch-area .my-btn {
    padding: 16px 42px;
    border-radius: var(--radius-xxl);
    font-size: var(--fs-lg);
}

.get-touch .wrap {
    max-width: 560px;
}




/*
================================================
=====||   Subcribe Section Start Here    ||=====
================================================
*/
.subcribe-sec {
    margin-bottom: 0;
}

.subcribe-sec .subcribe-area {
    background-color: var(--my-primary-color);
    border-radius: var(--radius-3xl);
    overflow: hidden;
}

.subcribe-sec .section-title,
.subcribe-sec .section-sub-title {
    color: var(--my-white);
}

.subcribe-form .subcribe-btn {
    background-color: var(--my-bg-yellow);
    align-items: stretch;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    width: fit-content;
}

.subcribe-form .subcribe-btn:hover {
    background-color: var(--my-text-rating);
}

/*
================||   Subcribe Left Side  ||================
*/
.subcribe-sec .left-side {
    padding: 155px 60px;
}

.subcribe-sec .left-side form input {
    border: none;
    padding: 16px;
    border-radius: var(--radius-md);
    max-width: 345px;
}

.subcribe-sec .left-side form input:focus {
    box-shadow: none;
}


/*
================||   Subcribe Right Side  ||================
*/
.subcribe-sec .right-side {
    position: relative;
    z-index: 1;
}

/*==========  Notificaion  ===========*/
.subcribe-sec .right-side .notificaion {
    max-width: 320px;
    width: 320px;
    position: relative;
    z-index: 3;
    margin-top: 116px;
    margin-bottom: 40px;
}

.notificaion li:nth-child(3),
.notificaion li:nth-child(4) {
    opacity: .7;
}

.subcribe-sec .right-side .img-wrapper {
    height: 510px;
    position: absolute;
    top: 30px;
    left: 110px;
    right: 0;
    z-index: 2;
}

.subcribe-sec .right-side .img-wrapper img {
    height: 615px;
    width: 100%;
    object-fit: cover;
}

.subcribe-sec .my-secondary-btn:hover {
    background-color: var(--my-warring);
}


/*
===============================================
=====||   Responsive 1439 Start Here    ||=====
===============================================
*/
@media (max-width:1439px) {


    .our-achivements .items .item {
        padding: 32px 0;
    }

    .our-achivements .section-title {
        font-size: var(--fs-3xl);
    }

    .offer-sec .offer-cart .bottom .title {
        font-size: var(--fs-lg);
        color: var(--fw-600);
        color: var(--my-white);
        text-align: center;
    }

    .offer-sec .offer-cart.sm .title {
        font-size: var(--fs-low);
    }

    .offer-sec .offer-cart.sm i {
        font-size: 8px;
    }

    .offer-sec .offer-cart.sm .rating {
        font-size: 8px;
    }

    .offer-sec .offer-cart.sm button {
        font-size: var(--fs-xs);
        line-height: var(--line-height-low);
        padding: 0px 8px;
    }

    .offer-sec .offer-cart.sm button {
        font-size: 8px;
        line-height: var(--line-height-sm);
    }

    .offer-sec .offer-cart.sm .content .bottom-area {
        padding-bottom: 4px;
        padding-right: 4px;
    }

    .offer-sec .offer-cart.sm .bottom {
        padding: 6px 8px;
    }
}




/*
===============================================
=====||   Responsive 1280 Start Here    ||=====
===============================================
*/


@media (max-width:1280px) {

    /* .my-container,
    .my-container-sm,
    .my-container-cart {
        padding: 0px 16px;
        margin: 0px auto;
        width: 100%;
    } */

    .my-container-cart {
        padding-right: 0px;
    }

    .slider-controls {
        /* position: unset; */
        right: 16px;
        top: -68px;
    }


    header .header-top {
        gap: 20px;
    }

    header .header-top .right {
        gap: 20px;
    }

    header .other-btns {
        gap: 12px;
    }

    .header-top .meddile {
        gap: 12px;
    }

    header .header-main ul {
        gap: 12px;
    }

    .g-hero-area .tab-wrapper {
        max-width: 90%;
    }

    .tour-cart .visiable-content {
        padding: 16px;
    }

    .hotel-cart {
        padding: 9px;
    }

    .recently-view .slider-controls,
    .trip-plan-area .slider-controls {
        right: 16px;
    }

    .trip-plan-area .head .left {
        max-width: 50%;
    }


    .plan-items-wrapper {
        grid-template-columns: calc(60% - 8px) calc(40% - 8px);
        grid-template-columns: 100%;
        gap: 16px;
    }

    .plan-items-wrapper .right {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }



    .plan-items-wrapper .right .item:nth-child(n+2) {
        grid-column: span 1;
    }

}






/*
===============================================
=====||   Responsive 1024 Start Here    ||=====
===============================================
*/
@media (max-width: 1080px) {

    .g-hero {
        margin-top: 16px;
    }


    /*
    ================||   Achivements Section Start Here  ||================
    */
    .our-achivements .items {
        padding: 0px 0px;
    }

    /*
    ================||   Subcribe Section Start Here  ||================
    */
    .subcribe-sec .left-side {
        padding: 32px 24px 24px 0px;
        height: 300px;
    }

    .subcribe-area {
        padding: 24px;
    }

    .subcribe-sec .left-side .my-mt-24 {
        margin-top: 24px;
    }


    .subcribe-sec .right-side {
        margin-top: -50px;
    }

    .subcribe-sec .right-side .img-wrapper {
        height: unset;
        top: -64px;
        left: 0;
    }

    .subcribe-sec .subcribe-area {
        height: 800px;
    }

    .subcribe-sec .right-side .img-wrapper img {
        height: unset;
        width: 100%;
    }

    .subcribe-sec .right-side .notificaion {
        display: none;
    }


    .our-achivements .mobile-bg {
        margin-top: -100px;
    }


    /*
    ================||   Testimonial Section Start Here  ||================
    */
    .testimonial .for-3 .slider-item {
        min-width: unset;
    }


    .testimonial .for-md-1 .slider-item {
        min-width: calc(100% - 0px);
        width: 100%;
    }

    .testimonial .for-md-2 .slider-item {
        min-width: calc(50% - 12px);
        width: 100%;
    }

    .offer-sec .bottom-btns {
        max-height: 310px;
        overflow-y: auto;
        padding: 12px;
    }

    .offer-sec .bottom-btns .item,
    .offer-sec .bottom-btns .item.active {
        font-size: var(--fs-md);
        text-transform: capitalize;
    }

    .trip-plan-area .right .create-trip-btn {
        font-size: var(--fs-lg);
    }

    .plan-items-wrapper {
        margin-top: 80px;
    }

    .all-offer-text {
        font-size: var(--fs-sm);
    }

    .trip-plan .plan-items-wrapper {
        margin-top: -34px;
    }

    .g-hero-area .bottom-search {
        width: 96%;
        left: 2%;
    }

    .search-group .s-btn {
        padding: 14px 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .search-group .s-btn .content {
        padding-right: 20px;
        padding-top: 4px;
    }

    .search-group .big.my-input-control.big {
        min-width: 160px;
    }

    .search-group .big.my-input-control {
        min-width: 130px;
    }

    .search-group .my-input-control input {
        font-size: var(--fs-sm) !important;
    }

    .bottom-search .form-wrap {
        margin-right: 16px;
        margin-left: 16px;
    }

    .offer-sec .left-btns .item .icon {
        width: 44px;
        height: 44px;
        gap: 8px;
    }

    .offer-sec .left-btns .item .icon svg {
        width: 12px;
        height: 12px;
    }


}


@media (max-width: 991px) {

    .offer-sec {
        display: grid;
        grid-template-columns: .7fr 2fr;
        gap: 16px;
    }

    .offer-sec .left-offer .bottom,
    .offer-sec .left-offer {
        gap: 16px;
    }

    .offer-sec .offer-cart.sm {
        border-radius: var(--radius-xxl);
        height: 136px;
    }

    header .header-top {
        gap: 8px;
    }

    .form-wrap .search-group {
        gap: 6px;
    }

    .search-group .my-input-control {
        min-width: 120px;
    }


}


/*
================================================
=====||   Responsive 769px Start Here    ||=====
================================================
*/
@media (max-width: 991px) {

    header {
        border-bottom: none;
    }

    .tab-contents {
        margin-top: 16px;
    }



    .section-sub-title {
        font-size: var(--fs-sm);
        font-weight: var(--fw-400);
        line-height: 20px;
        color: var(--my-text-tertiary);
    }


    /* Worldwide Hot Dest */
    .hot-destination .search-input {
        flex: 1;
    }

    .hot-destination .head .left {
        max-width: 190px;
        width: 100%;
    }

    .hot-dest-cart {
        height: 192px;
    }

    .hot-dest-cart .content {
        padding-left: 12px;
        padding-bottom: 12px;
    }

    .hot-dest-cart .title {
        font-size: 14px;
        line-height: 100%;
    }

    .hot-dest-cart .sub-title {
        font-size: 12px;
    }



    .hot-destination .search-input input::placeholder {
        font-size: var(--fs-xs) !important;
    }






    /*===============  Offer Section For MObile  ===================*/
    .offer-section-mobile {
        background-color: var(--my-bg-secondary);
        padding-bottom: 16px;
        margin-top: 32px;
        /* height: 220px; */
    }

    .offer-section-mobile .big-banner {
        display: block;
    }

    .offer-section-mobile .big-banner img {
        /* height: 166px; */
        border-radius: 12px;
    }

    .offer-section-mobile .small-banners {
        margin-top: -36px;
        padding: 0 8px;
    }

    .offer-section-mobile .small-banners img {
        border-radius: 8px;
        border: 1px solid var(--my-white);
        object-fit: cover;
        /* height: 74px; */
    }

    .map-view .shop-map {
        bottom: 8px;
        left: 8px;
        color: var(--my-primary-color);
    }

    .map-view .shop-map svg path {
        stroke: var(--my-primary-color);
    }

    .m-best-deal .img-wrap img,
    .m-map-area .img-wrap img {
        aspect-ratio: 16/10;
    }






    /*===============  Hot Destination  ===================*/
    .hot-destination .search-input input {
        border-radius: var(--radius-pill);
    }

    .hot-destination .search-input svg {
        right: 8px;
        width: 16px;
    }


    /*===============  Recommendation  ===================*/
    .m-recommendation {
        background-color: #f5f5f5;
    }



    .map-view .section-title {
        max-width: 270px;
    }


    /*===============  Trip Plan  ===================*/
    .m-trip-plan {
        background-color: #f5f5f5;
    }

    .m-trip-plan .head .section-title {
        max-width: 280px;
    }

    .m-trip-plan .m-create-trip-plan-btn {
        background-color: var(--my-primary-color);
        padding: 12px 24px;
        font-size: var(--fs-md);
        font-weight: 600;
        border-radius: var(--radius-pill);
        color: var(--my-white);
    }

    .m-trip-plan .m-create-trip-plan-btn .content {
        display: flex;
        align-items: center;
        gap: 8px;
        line-height: 24px;
    }

    .m-trip-plan .items .item {
        border-radius: 12px;
        background-color: var(--my-white);
        overflow: hidden;
    }

    .m-trip-plan .items .item img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }


    .m-trip-plan .items .item .content {
        padding: 16px;
    }

    .m-trip-plan .items .item .title {
        font-size: var(--fs-sm);
        color: var(--my-text-primary);
        line-height: 100%;
    }


    /* Item button */
    .m-trip-plan .items .item .my-btn {
        background-color: var(--my-primary-color);
        font-size: var(--fs-sm);
        line-height: var(--fs-sm);
        border-radius: var(--radius-pill);
        width: 100%;
        text-align: center;
        padding: 10px 12px;
        font-weight: 600;
    }

    .m-trip-plan .items .item .my-btn .content {
        padding: 0;
    }

    /*===============  Testimonial  ===================*/
    .testimonial {
        background-color: #f5f5f5;
    }

    .testimonial .hide-scroll-wrapper {
        justify-content: unset;
    }


    .mobile-review .see-all .my-btn.my-outline-btn {
        width: 100%;
        color: var(--my-primary-color);
        border-color: #D5D7DA;
    }

    .testimonial .slider-controls {
        display: none;
    }

    .testimonial .tab-btn {
        border-color: var(--my-border-primary) !important;
    }

    .testimonial .tab-btn.active {
        border-color: var(--my-primary-color) !important;
    }

    .testimonial .item {
        padding: 16px;
        background-color: var(--my-white);
        border: none;
    }


    /*===============  Blogs  ===================*/
    .blog-items {
        grid-template-columns: repeat(3, 1fr);
    }

    .our-blog-mobile .blog-items .item {
        padding: 0;
        background-color: #F5F5F5;
        border-radius: 12px;
        overflow: hidden;
    }

    .our-blog-mobile .blog-items .item .img-wrap img {
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

    .our-blog-mobile .blog-items .item .content {
        padding: 12px;
    }

    .our-blog-mobile .blog-items .item .blog-name {
        font-size: var(--fs-sm);
        color: var(--my-text-primary);
        font-weight: 600;
        line-height: 18px;
    }

    .our-blog-mobile .blog-items .author img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
    }

    .our-blog-mobile .blog-items .item .name {
        font-size: var(--fs-xs);
        color: var(--my-text-primary);
        line-height: 16px;
    }

    .our-blog-mobile .blog-items .item .post-date {
        font-size: 10px;
        color: var(--my-text-tertiary);
    }


    /*===============  Our Achivements  ===================*/
    .our-achivements .head .section-title,
    .our-achivements .section-sub-title {
        text-align: left;
    }

    .our-achivements .achivement-body .item .title-sm {
        font-size: var(--fs-sm);
        color: var(--my-text-primary);
    }

    .our-achivements .items .item {
        padding: 16px 0;
        gap: 8px;
        /* aspect-ratio: 16 /16; */
        justify-content: center;
    }

    .our-achivements .items .item .icon {
        width: 56px;
        height: 56px;
        border-radius: var(--radius-round);
    }

    .our-achivements .item .section-title {
        font-weight: var(--fw-600);
        color: var(--my-primary-color);
        font-size: var(--fs-xxl);
    }

    .our-achivements .bg-img {
        background-image: unset;
        height: unset;
        margin: 0;
    }

    .our-achivements {

        background-color: var(--my-white-off);
    }

    .our-achivements .achivement-body {
        background-image: url('../../images/achivment-mobile.png');
        background-repeat: repeat;
        background-position: center;
        background-size: cover;
        height: 100%;
        width: 100%;
        position: relative;
    }




    /*===============  Get Touch  ===================*/
    .get-touch .get-touch-area {
        padding: 40px 0;
    }

    .get-touch .wrap {
        max-width: 280px;
    }

    .get-touch .section-title {
        font-size: var(--fs-xl);
    }

    .get-touch p {
        font-size: var(--fs-lg);
        line-height: 28px;
    }

    .get-touch .get-touch-area .my-btn {
        padding: 12px 18px;
        border-radius: var(--radius-pill);
        background-color: var(--my-primary-color);
    }

    .get-touch .get-touch-area .my-btn::after {
        background-color: var(--my-secondary-color);
    }


    /*===============  Subcirbe Section  ===================*/
    .subcribe-form {
        align-items: flex-start;
    }

    .subcribe-sec .right-side .img-wrapper {
        height: unset;
        top: 9px;
        left: 0;
    }

    .subcribe-area .left-side .desc {
        font-size: var(--fs-sm);
        font-weight: var(--fw-400);
    }

    .subcribe-sec .right-side .img-wrapper img {
        height: 450px;
        width: 100%;
        border-radius: 12px;
    }

    .subcribe-sec .right-side {
        margin-top: 32px;
    }

    .subcribe-sec .subcribe-area {
        height: auto;
        border-radius: 12px;
    }

    .subcribe-sec .left-side {
        padding: 0px;
        padding-top: 16px;
        height: auto;
    }

    .subcribe-sec .left-side .section-title {
        font-size: 24px !important;
        line-height: 32px !important;
        max-width: 280px;
    }

    .subcribe-sec .left-side .section-sub-title {
        font-size: 16px !important;
        line-height: 20px !important;
        max-width: 240px;
    }


    .m-trip-plan-bg {
        position: relative;
        max-height: 240px;
    }

    .m-trip-plan-bg img {
        max-height: 220px;
    }

    .m-trip-plan-bg .m-create-trip-plan-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        align-items: flex-start;
        justify-content: flex-start;
    }

    .m-trip-plan.section-main {
        margin-bottom: 0;
    }

    .m-bottom-sidebar .grid-view .item {
        aspect-ratio: unset;
        padding: 32px;
    }

    .our-achivements .section-title {
        font-size: var(--fs-xl);
    }
}








@media(max-width:767px) {

    .m-bottom-sidebar .grid-view .item {
        aspect-ratio: unset;
        padding: 16px;
    }

    .our-blog-mobile .blog-items .item .content {
        padding: 8px;
    }

    .blog-items {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial .item .mail {
        font-size: var(--fs-xs);
    }

    .testimonial .item h5 {
        font-size: var(--fs-md);
        line-height: 1.2;
    }

    .testimonial .item .desc {
        font-size: var(--fs-sm);
    }

    .get-touch .my-btn {
        font-size: var(--fs-sm);
        line-height: 28px;
    }

    .recently-view {
        margin-top: 16px;
    }

    .recently-view .swiper-slide {
        padding-bottom: 0px;
    }

    .swiper.other-common-slider {
        position: relative;
        padding-top: 0px;
    }

    .m-trip-plan {
        padding: 32px 0;
    }

    .m-trip-plan .m-create-trip-plan-btn {
        font-size: var(--fs-sm);
    }

    .testimonial .section-sub-title {
        max-width: 280px;
        margin: auto;
        margin-top: 16px;
    }

    .our-blog {
        padding-top: 16px;
    }

    .our-blog .section-sub-title {
        max-width: 266px;
    }



    .get-touch .get-touch-area .my-btn {
        padding: 12px 36px;
        border-radius: var(--radius-pill);
        font-size: var(--fs-sm);
    }

    .our-achivements {
        background-color: var(--my-bg-secondary);
        padding: 32px 0;
        position: relative;
    }

    .m-trip-plan .items .item .my-btn {
        font-size: var(--fs-xs);
    }

    .m-trip-plan .items .item .content {
        padding: 12px;
    }

    .map-view-tabs{
        padding-left: 320px;
    }
}