:root {
    --primary-clr: #94c617;
    --sub-clr: #1d87d9;
}

@font-face {
    font-family: 'rubic';
    src: url('../../fonts/Rubik-VariableFont_wght.ttf');
}

@font-face {
    font-family: 'adlery-pro';
    src: url('../../fonts/Adlery-Pro-trial.ttf');
}

* {
    font-family: rubic;
}

.p-bg {
    background-color: var(--primary-clr);
}

.s-bg {
    background-color: var(--sub-clr);
}

.top-bar {
    background-color: var(--sub-clr);
    color: white;

    a {
        color: var(--primary-clr);
    }
}

@media (max-width:768px) {
    .top-bar {
        font-size: 12px;
    }
}
body{
    background: #e5e6f0;
}
.bg-img-1{
    position: absolute;
    transform: translate(42%, 0);
    opacity: 10%;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 52%;
}
.bg-img-2{
    position: absolute;
    /* transform: translate(42%, 0); */
    opacity: 10%;
    left: 10px;
    top: 0;
    /* right: 0; */
    /* bottom: 0; */
    margin: auto;
    /* height: 52%; */
    z-index: -1;
}
.bg-img-3{
    opacity: 20%;
    position: absolute;
    top: 96px;
    right: -36px;
    transform: rotate(13deg) scaleX(-1);
    z-index: -1;
}
.bg-img-4{
    opacity: 20%;
    position: absolute;
    /* top: 96px; */
    /* right: -36px; */
    /* transform: rotate(13deg) scaleX(-1); */
    bottom: 0;
    left: 0;
    z-index: -1;
}
.bg-img-5{
    opacity: 20%;
    position: absolute;
    /* top: 96px; */
    /* right: -36px; */
    /* transform: rotate(13deg) scaleX(-1); */
    bottom: -12px;
    left: 0;
    transform: translateX(-44%);
    z-index: -1;
    height: 86vh;
}
.bg-img-6{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
opacity: 20%;
z-index: -1;
}
.except-header-footer{
    overflow: hidden;
}
section,.except-header-footer{
    position: relative;
}
/* <!--==================================================================
                        header
==================================================================--> */
header {
    padding: 0 10px;
    .navbar {
        background-color: #e5e6f0 !important;

        .navbar-brand img {
            height: 70px;
        }

        .nav-link {
            color: black !important;
            font-weight: bold;
        }

        .nav-link.active {
            color: var(--primary-clr) !important;
        }

        .navbar-collapse {
            justify-content: flex-end;
        }
    }

    .bnr {
        background: url('../../img/bnr-1.jpg') 100% -40px;
        background-size: cover;
        position: relative;
        height: 40vh;

        .title {
            color: white;
            background-color: rgba(148, 198, 23, 0.792);
            margin: 0;
            font-weight: bold;
            font-size: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bnr-curve-img {
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            z-index: 2;
            filter: invert(100%) sepia(60%) saturate(819%) hue-rotate(179deg) brightness(100%) contrast(89%);
        }
    }

}

@media (max-width:768px) {
    header {
        .navbar {
            background-color: white !important;

            .navbar-brand img {
                height: 70px;
            }

            .nav-link {
                color: black !important;
                font-weight: bold;
            }

            .nav-link.active {
                color: var(--primary-clr) !important;
            }

            .navbar-collapse {
                justify-content: flex-end;
            }
        }

        .bnr {
            background: url('../../img/bnr-1.jpg') 100% -40px;
            background-size: cover;
            position: relative;
            height: 40vh;

            .title {
                color: white;
                background-color: rgba(148, 198, 23, 0.792);
                margin: 0;
                font-weight: bold;
                font-size: 3rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .bnr-curve-img {
                position: absolute;
                width: 100%;
                bottom: 0;
                left: 0;
                z-index: 2;
            }
        }

    }
}

/* <!--==================================================================
                        header END
==================================================================--> */

/* <!--==================================================================
                        About 
==================================================================--> */
.abt-scn {
    position: relative;
    overflow: hidden;

    .img-col {
        .img {
            transform: translateY(-10%);
        }
    }

    .cnt {
        color: rgb(149, 154, 147);
        font-size: 18px;
    }

    .cnt-col {
        .title {
            /* font-weight: bold; */
            font-size: 3rem;
        }
    }

    .cnt-col .sub-title {
        font-family: adlery-pro;
        color: var(--primary-clr);
        display: flex;
        align-items: center;
        /* justify-content: center; */
        font-size: 22px;
        gap: 5px;

        /* text-transform: capitalize; */
        img {
            height: 15px;
        }
    }

    .col-md-12 .cnt {
        text-align: center;
    }

    .bubbles {
        position: absolute;
        right: 0;
        height: 100%;
        top: 0;
        transform: translateX(50%);
    }
}

/* <!--==================================================================
                        About 
==================================================================--> */


/* <!--==================================================================
                        destinations cards 
==================================================================--> */
.dest-scn {
    .d-grid {
        /* gap: 10px; */
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(12, 1fr);
        gap: 20px;
    }

    .card {
        height: 380px;
        border-radius: 15px;
        overflow: hidden;

        .img {
            object-fit: cover;
        }

        .title {
            position: absolute;
            color: white;
            font-weight: bold;
            font-size: 27px;
            text-transform: capitalize;
            padding: 5px;
            text-align: center;
        }

        .title::before,
        .title::after {
            content: '';
            position: absolute;
        }
    }

    .card:nth-child(1) {
        grid-column: span 3 / span 3;
        grid-row: span 3 / span 3;

        .title {
            left: 0;
            bottom: 20px;
            background-color: var(--sub-clr);
            min-width: 40%;
        }

        .title::before {
            background-color: var(--sub-clr);
            clip-path: polygon(100% 50%, 0 0, 0 100%);
            right: 0;
            transform: translateX(99%);
            height: 100%;
            width: 50px;
            top: 0;
        }
    }

    .card:nth-child(2) {
        grid-column: span 6 / span 6;
        grid-row: span 3 / span 3;
        grid-column-start: 4;

        .title {
            bottom: 0;
            margin: auto;
            left: 0;
            right: 0;
            width: fit-content;
            background-color: var(--primary-clr);
            min-width: 25%;
        }

        .title::before {
            background-color: var(--primary-clr);
            clip-path: polygon(50% 65%, 0 100%, 99% 100%);
            left: 0;
            transform: translatey(-99%);
            height: 200%;
            width: 100%;
            top: 0;
        }
    }

    .card:nth-child(3) {
        grid-column: span 3 / span 3;
        grid-row: span 3 / span 3;
        grid-column-start: 10;

        .title {
            right: 0;
            bottom: 20px;
            background-color: var(--sub-clr);
            min-width: 40%;
        }

        .title::before {
            background-color: var(--sub-clr);
            clip-path: polygon(100% 0, 0 50%, 99% 100%);
            left: 0;
            transform: translateX(-99%);
            height: 100%;
            width: 50px;
            top: 0;
        }
    }

    .card:nth-child(4) {
        grid-column: span 6 / span 6;
        grid-row: span 3 / span 3;
        grid-row-start: 4;

        .title {
            right: 0;
            left: 0;
            bottom: 20px;
            margin: auto;
            background-color: var(--primary-clr);
            min-width: 80%;
            width: fit-content;
        }

        .title::before {
            background-color: var(--primary-clr);
            clip-path: polygon(100% 0, 0 50%, 99% 100%);
            left: 0;
            transform: translateX(-99%);
            height: 100%;
            width: 50px;
            top: 0;
        }

        .title::after {
            background-color: var(--primary-clr);
            clip-path: polygon(100% 50%, 0 0, 0 100%);
            right: 0;
            transform: translateX(99%);
            height: 100%;
            width: 50px;
            top: 0;
        }
    }

    .card:nth-child(5) {
        grid-column: span 6 / span 6;
        grid-row: span 3 / span 3;
        grid-column-start: 7;
        grid-row-start: 4;

        .title {
            right: 0;
            left: 0;
            bottom: 20px;
            margin: auto;
            background-color: var(--sub-clr);
            min-width: 80%;
            width: fit-content;
        }

        .title::before {
            background-color: var(--sub-clr);
            clip-path: polygon(100% 0, 0 50%, 99% 100%);
            left: 0;
            transform: translateX(-99%);
            height: 100%;
            width: 50px;
            top: 0;
        }

        .title::after {
            background-color: var(--sub-clr);
            clip-path: polygon(100% 50%, 0 0, 0 100%);
            right: 0;
            transform: translateX(99%);
            height: 100%;
            width: 50px;
            top: 0;
        }
    }

    .card:nth-child(6) {
        grid-column: span 4 / span 4;
        grid-row: span 3 / span 3;
        grid-row-start: 7;

        .title {
            left: 0;
            bottom: 20px;
            background-color: var(--primary-clr);
            min-width: 40%;
        }

        .title::before {
            background-color: var(--primary-clr);
            clip-path: polygon(100% 50%, 0 0, 0 100%);
            right: 0;
            transform: translateX(99%);
            height: 100%;
            width: 50px;
            top: 0;
        }
    }

    .card:nth-child(7) {
        grid-column: span 4 / span 4;
        grid-row: span 3 / span 3;
        grid-column-start: 5;
        grid-row-start: 7;

        .title {
            right: 0;
            left: 0;
            bottom: 20px;
            margin: auto;
            background-color: var(--sub-clr);
            min-width: 70%;
            width: fit-content;
        }

        .title::before {
            background-color: var(--sub-clr);
            clip-path: polygon(100% 0, 0 50%, 99% 100%);
            left: 0;
            transform: translateX(-99%);
            height: 100%;
            width: 50px;
            top: 0;
        }

        .title::after {
            background-color: var(--sub-clr);
            clip-path: polygon(100% 50%, 0 0, 0 100%);
            right: 0;
            transform: translateX(99%);
            height: 100%;
            width: 50px;
            top: 0;
        }
    }

    .card:nth-child(8) {
        grid-column: span 4 / span 4;
        grid-row: span 3 / span 3;
        grid-column-start: 9;
        grid-row-start: 7;

        .title {
            right: 0;
            bottom: 20px;
            background-color: var(--primary-clr);
            min-width: 40%;
        }

        .title::before {
            background-color: var(--primary-clr);
            clip-path: polygon(100% 0, 0 50%, 99% 100%);
            left: 0;
            transform: translateX(-99%);
            height: 100%;
            width: 50px;
            top: 0;
        }
    }

    .card:nth-child(9) {
        grid-column: span 12 / span 12;
        grid-row: span 3 / span 3;
        grid-row-start: 10;

        .title {
            right: 0;
            left: 0;
            bottom: 20px;
            margin: auto;
            background-color: var(--primary-clr);
            min-width: 20%;
            width: fit-content;
        }

        .title::before {
            background-color: var(--primary-clr);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 95% 50%);
            left: 0;
            transform: translateX(-99%);
            height: 100%;
            width: 50px;
            top: 0;
        }

        .title::after {
            background-color: var(--primary-clr);
            clip-path: polygon(0% 0%, 75% 0%, 5% 50%, 75% 100%, 0% 100%);
            right: 0;
            transform: translateX(99%);
            height: 100%;
            width: 50px;
            top: 0;
        }
    }
}

@media (max-width:768px) {
    .dest-scn {
        .d-grid {
            display: flex !important;
            flex-direction: column;
        }
    }
}

/* <!--==================================================================
                        destinations cards END
==================================================================--> */



/* <!--==================================================================
                        destination details 
==================================================================--> */
.dest-detail-scn1 {
    .img-card {
        max-height: 400px;
        overflow: hidden;
        border-radius: 20px;

        .img {
            object-position: center;
        }

        .title {
            position: absolute;
            color: white;
            font-weight: bold;
            font-size: 27px;
            text-transform: capitalize;
            padding: 5px;
            text-align: center;
            bottom: 0;
            margin: auto;
            left: 0;
            right: 0;
            width: fit-content;
            background-color: var(--primary-clr);
            min-width: 25%;
        }

        .title::before {
            content: '';
            position: absolute;
            background-color: var(--primary-clr);
            clip-path: polygon(50% 65%, 0 100%, 99% 100%);
            left: 0;
            transform: translatey(-99%);
            height: 200%;
            width: 100%;
            top: 0;
        }
    }

    .price {
        color: gray;

        span {
            color: var(--primary-clr);
        }
    }

    .cnt {
        color: gray;
    }
}

/* <!--==================================================================
                        destination details END
==================================================================--> */


/* <!--==================================================================
                        package highlights 
==================================================================--> */
.dest-detail-scn2 {
    .container {
        text-align: center;
    }

    .title {
        color: black;
        margin-bottom: 0;
    }

    .underline-img {
        height: 6px;
        margin: auto;
        left: 0;
        right: 0;
    }

    .tags {
        gap: 10px;
        text-align: center;
        justify-content: center;
        flex-wrap: wrap;

        .tag {
            border: 3px solid var(--primary-clr);
            color: var(--primary-clr);
            border-radius: 20px;
            padding: 10px;
            font-size: 20px;
        }
    }
}

/* <!--==================================================================
                        package highlights END
==================================================================--> */


/* <!--==================================================================
                        Detailed Itinerary 
==================================================================--> */
.dest-detail-scn3 {
    .container {
        text-align: center;
    }

    .title {
        color: black;
        margin-bottom: 0;
    }

    .underline-img {
        height: 6px;
        margin: auto;
        left: 0;
        right: 0;
    }
}

.s6 {
    @media (max-width:765px) {
        .tab-link {
            margin-bottom: 1rem !important;
        }

        .tabs {
            padding: 0 !important;
        }

        .tab-content {
            background: transparent !important;
            text-align: justify;
            margin-top: 0 !important;

            /* padding: 0 !important; */
            p {
                font-size: 13px;
                padding: 0 10px;
            }
        }
    }

    @media (min-width:765px) {}

    .tabs-container {
        width: 100%;
        /* max-width: 700px; */
        height: auto;
        /* Make the height flexible */

        border-radius: 20px;

        overflow: hidden;
        position: relative;
    }

    .tabs {
        padding: 10px 20px 15px 20px;
        /* Increased padding */
    }

    .tab-links {
        display: flex;
        justify-content: center;

    }

    .tab-link {
        background: none;
        border: none;
        padding: 15px 30px;
        cursor: pointer;
        position: relative;
        transition: color 0.3s ease;
        color: #525252;
        font-weight: bold;

        background: white;
        border-radius: 50px;
        width: 100%;
        margin: 0 10px;
        display: flex;
        align-items: center;
        width: 120px;
        border: 1px solid var(--sub-clr);
        color: var(--sub-clr);
        text-align: center;
        justify-content: center;

        span {
            width: 50px;
            height: 50px;
            color: #f32c31;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            margin-right: 10px;
            background: white;
            position: relative;
            font-size: 18px;
        }

    }

    .tab-link.active {

        background: var(--sub-clr);
        color: white;
    }



    .tab-link i {
        margin-right: 10px;
    }



    .tab-content {
        display: none;
        animation: fadeInUp 0.5s ease;
        padding: 25px;
        margin-top: 2rem;
        font-size: 14px;
        color: #272727;
        line-height: 1.7;
        background: #ffffff;
        border-radius: 20px;
        border: 1px solid var(--sub-clr);
    }

    .tab-content.active {
        display: block;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Buttons */
    .cta-btn {
        display: inline-block;
        padding: 12px 25px;
        /* More padding */
        background: linear-gradient(180deg, #0f73b4 0%, #074f7f 100%);
        /* Purple gradient */
        color: white;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: background 0.4s ease;
        font-weight: 500;
        margin-top: 20px;
    }

    .cta-btn:hover {
        background: linear-gradient(45deg, #074f7f, #0f73b4);
        /* Darker gradient on hover */
    }

    /* Form Styles */
    .contact-form {
        display: flex;
        flex-direction: column;
    }

    .contact-form label {
        margin-bottom: 5px;
        font-weight: 500;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 12px 15px;
        /* Increased padding for inputs */
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 10px;
        transition: border 0.3s ease;
    }

    .contact-form input:focus,
    .contact-form textarea:focus {
        border-color: #b84de5;
        outline: none;
    }

    /* FAQ List */
    .faq-list {
        padding: 0;
        list-style: none;
    }

    .faq-list li {
        margin-bottom: 10px;
    }

    .faq-list li strong {
        font-weight: 600;
    }

    /* Responsive Design */
    @media screen and (max-width: 600px) {
        .tab-links {
            flex-direction: column;
            align-items: center;
        }

        .tab-link {
            text-align: center;
            width: 100%;
            padding: 15px;
        }
    }
}

/* <!--==================================================================
                        Detailed Itinerary END
==================================================================--> */


/* <!--==================================================================
                        terms and conditions 
==================================================================--> */
.dest-detail-scn-5 {
    .col-md-12 .card {
        border: 1px solid var(--sub-clr);
    }
}

/* <!--==================================================================
                        terms and conditions END
==================================================================--> */



/* <!--==================================================================
                        service 
==================================================================--> */
.service-scn {
    position: relative;
    overflow: hidden;

    .wrapper {
        align-items: center;
        gap: 30px;
    }

    .cnt {
        color: gray;
    }

    .bubbles {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        transform: translateX(50%);
    }
}

.service-scn.reverse {
    .row {
        justify-content: flex-end;
        text-align: right;
    }

    .bubbles {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        transform: translateX(-50%);
    }
}

@media (max-width:768px) {
    .service-scn {
        .wrapper {
            flex-direction: column;
            align-items: flex-start;

            .img {
                height: 200px;
            }

            .cnts {
                padding: 0 10px;
            }
        }

    }

    .service-scn.reverse {
        .wrapper {
            flex-direction: column-reverse;
            align-items: flex-end;
        }

    }
}

/* <!--==================================================================
                        service END
==================================================================--> */


/* <!--==================================================================
                        blog 
==================================================================--> */
.blog-scn {
    .card {
        border: 0;
        /* box-shadow: 0px 3px 5px 1px #454545cc; */
        max-width: 300px;
        margin: auto;

        .box-shadow {
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            transform: translateY(100%);
        }

        .img-div {
            height: 160px;
        }

        .card-body {
            background: #f2f6f8;

            .cnt {
                color: grey;
                font-size: 12px;
            }

            .button {
                color: white;
                background-color: var(--primary-clr);
                border: 0;
                padding: 10px 20px;
                text-decoration: none;
                margin-bottom: 20px;
            }
        }
    }
}

/* <!--==================================================================
                        blog END
==================================================================--> */


/* <!--==================================================================
                        visa 
==================================================================--> */
.visa-scn {
    .img-col {
        .img-div {
            height: 70vh;
            width: 90%;
            border-radius: 20px;
            position: relative;

            .img {
                z-index: 1;
                position: relative;
                border-radius: 20px;
                object-fit: cover;
            }

            .visa-img {
                height: 100px;
                transform: translate(50px, -50px);
                position: absolute;
                top: 0;
                right: 0;
                z-index: 2;
            }
        }

        .img-div::before {
            content: '';
            position: absolute;
            height: 100%;
            width: 100%;
            bottom: 0;
            left: 0;
            background-color: var(--primary-clr);
            transform: translate(-20px, 20px);
            z-index: 0;
            border-radius: 20px;
        }
    }

    .cnt-col {
        .title {
            font-size: 4rem;
        }

        .price {
            color: gray;

            span {
                color: var(--primary-clr);
            }
        }
    }
}

@media (max-width:768px) {
    .visa-scn {
        .img-col {
            .img-div {
                height: 33vh;
                width: 90%;
                border-radius: 20px;
                position: relative;

                .img {
                    z-index: 1;
                    position: relative;
                    border-radius: 20px;
                    object-fit: cover;
                }

                .visa-img {
                    height: 100px;
                    transform: translate(50px, -50px);
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 2;
                }
            }

            .img-div::before {
                content: '';
                position: absolute;
                height: 100%;
                width: 100%;
                bottom: 0;
                left: 0;
                background-color: var(--primary-clr);
                transform: translate(-20px, 20px);
                z-index: 0;
                border-radius: 20px;
            }
        }

        .cnt-col {
            margin-top: 37px;

            .title {
                font-size: 4rem;
            }

            .price {
                color: gray;

                span {
                    color: var(--primary-clr);
                }
            }
        }
    }
}

/* <!--==================================================================
                        visa END
==================================================================--> */


/* <!--==================================================================
                        required documents 
==================================================================--> */
.req-document-scn {
    .row {
        /* border: 1px solid #d5291e; */
        border-radius: 20px;
        padding: 10px;
        background: #e8f5e9;
        .col-md-4 {
            margin-bottom: 25px !important;
        }

        .cnt1 {
            color: gray;
        }

        .card {
            text-align: left;
            /* background: linear-gradient(#e1dcf8, #efeef8); */
            height: 100%;
            /* box-shadow: inset 0px 0px 2px 1px #39383842; */
            border-radius: 1px 1px 1px black;
            background: rgb(243, 225, 192);
            /* background: white; */
            border: 0;
            background: #FFFFFF85;
            display: flex;
            flex-direction: row;
            .card-img{
                width: 45px;
                object-fit: contain;
                padding-left: 5px;
            }
            .card-body {
                padding: 15px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;

                .title {
                    font-size: 20px;
                }

                .cnt {
                    margin-bottom: 0;
                    font-size: 11px;
                }
            }
        }
    }
}

/* <!--==================================================================
                        required documents END
==================================================================--> */


/* <!--==================================================================
                        FAQ 
==================================================================--> */
#accordionPanelsStayOpenExample{
    gap: 5px;
    .accordion-button:focus{
      border-color: none !important;
    }
  } 
/* <!--==================================================================
                        FAQ END
==================================================================--> */



/* <!--==================================================================
                        footer
==================================================================--> */
footer {
    background-color: var(--sub-clr);
    color: white;

    a {
        text-decoration: none;
    }

    .footer-logo {
        height: 100px;
    }

    button.book-now {
        background-color: var(--primary-clr);
        color: white;
        border: 0;
        border-radius: 50px;
        padding: 10px;
        font-size: 20px;
        text-transform: capitalize;
        text-align: left;
        padding-left: 20px;
        min-width: 200px;
        position: relative;

        i {
            font-size: 30px;
            position: absolute;
            right: 10px;
            top: 0;
            bottom: 0;
            margin: auto;
            display: flex;
            align-items: center;
        }
    }
    .bg-imgs-div{
        width: 100%;
    overflow: hidden;
    opacity: 17%;
    }
}

/* <!--==================================================================
                        footer END
==================================================================--> */