/* RESPONSIVE */

@media(max-width: 768px) {

    /* ================= RESET & BASE ================= */
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Prevent horizontal scroll */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }

    /* Better font rendering */
    body {
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
    }

    /* Images & media responsive */
    img,
    video,
    iframe {
        max-width: 100%;
        height: auto;
        /* display: block; */
    }

    /* Remove default styles */
    ul,
    ol {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    /* Buttons fix */
    button {
        cursor: pointer;
        border: none;
    }

    /* ______________________________ */



    .div-nabar {
        /* background-color: white; */
        /* border: 3px solid rgb(207, 230, 8); */
        color: black;
        width: 100%;
    }

    .navbar {
        /* border: 2px solid blue; */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 5px;
        padding-left: 20px;
        /* padding-right: 1px; */
        align-items: center;
        /* background-color: rgb(168, 161, 161) !important; */
        /* height: 60px; */
        /* width: 100%; */
        /* gap: 100px; */

        z-index: 20;

    }

    .logo-div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }



    .nav-links {
        display: none;
        position: absolute;
        right: 0;
        top: 100%;
        /* border: 3px solid red; */
        gap: 3px;
        /* background: linear-gradient(135deg, #8E2DE2, #FF6A88); */
        background: #333;

        flex-direction: row;
        justify-content: center;
        width: 100%;
        text-align: center;
        transform: translateY(-200%);
        transition: 0.5s;
        z-index: 11;
        /* border: 5px solid rgb(255, 9, 173); */

    }

    .nav-links li {
        margin: 20px 0;
        /* border: 1px solid yellowgreen; */
    }

    .nav-active {
        /* border: 3px solid rgb(3, 58, 117); */
        display: flex;
        width: 37%;
        height: 70vh;
        top: 60px;
        right: 0px;
        transform: translateY(0);
        background: linear-gradient(135deg, #C8A96A, #A8894F);
        flex-direction: column;
        z-index: 15;
        /* position: relative; */

    }

    .hamburger {
        display: flex;
        color: black;
        justify-content: flex-end;
        z-index: 11;
        justify-content: center;

    }







    .navbar img {
        width: 18%;
        height: 10%;
    }

    .logo {
        width: 30%;
        font-size: 18px;
        font-style: normal;
        /* font-family: serif; */
        display: flex;
        flex-direction: row;
        justify-content: flex-start;

        font-weight: 300;
    }

    .navbar ul li {
        list-style: none;
        display: flex;


    }



    .nav-lo {
        display: flex;
        flex-direction: column;
        /* justify-content: flex-end; */
        /* align-items: center; */
    }

    .logo span {
        /* color: rgb(0, 0, 0); */
        padding-left: 5px;

    }

    .logo-sub {
        font-size: 10px;
        /* color: black; */
        /* font-family: 'Times New Roman', Times, serif; */
        font-weight: 400;
    }

    .nav-links li a {
        color: rgb(255, 255, 255);
        text-decoration: none;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 5px;

    }





    /* _________________________________ */

    .particles {
        top: 60px;
        display: block;
        height: 100vh;
        width: 100%;
    }


    /* --------------------------------------- */

    .hero-video {
        /* border: 5px solid rgb(0, 13, 255); */
        width: 100%;
        height: 62vh;
        /* background-color: beige; */
    }

    .imag-hero-main {
        height: 35vh;
        /* width: 120%; */

        border: 2px solid green;
    }

    .video-container {
        /* border: 2px solid rgb(166, 67, 67); */
        position: relative;
        height: 100vh;
        width: 100%;
        overflow: hidden;
    }

    .video-container iframe {
        /* border: 5px solid rgb(0, 251, 255); */

        position: absolute;
        top: 10%;
        left: 50%;
        width: 177.77vh;
        /* 16:9 ratio */
        height: 100vh;
        transform: translate(-50%, -50%);
        pointer-events: none;


        width: 100%;
        height: 100%;
        object-fit: cover;
    }




    /* ------------------------------- */

    .hero {
        width: 100%;
        height: auto;
        /* justify-content: space-between; */
        /* margin-top: 30px; */
        /* border: 12px solid red; */
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        /* position: relative; */
        /* opacity: .1; */


    }

    .hero::before {
        /* opacity: .8; */
    }

    .image-box-div-her {
        /* width: 100%; */
        width: 300px;
        height: 400px;

    }


    .hero-div {
        /* padding: 0px 18px;
        margin: 18px 12px;
        position: absolute;
        top: 65%;
        left: 0px; */


        width: 80%;

    }

    .hero-div-2 {
        flex-direction: column;
        width: 80%;
    }

    .text-5xl {
        font-size: 32px;
        /* border: 2px solid rgb(255, 108, 4); */
    }

    .mt-4-text-lg {
        font-size: 10px;
        margin-top: 0px;
        /* margin-bottom: 12px; */

    }

    button {
        padding: 6px 6px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        font-size: 10px;
    }

    .hero-sec-btn button {

        width: 100%;
    }


    .left-text {
        font-size: 3rem;
    }

    /*  ---------------------------*/

    .services {
        padding: 27px 20px;

    }

    /* ________________________________ */

    .about-section {
        margin-top: -8vh;
        padding: 16px 0px;
        /* border: 2px solid red; */
    }

    .about-container {
        flex-direction: column;
        text-align: center;
    }

    .about-image img {
        width: 100%;
    }

    .about-sec-h2 {
        font-size: 16px;

    }

    .about-image {
        margin-top: 30px;
        width: 80%;
    }


    /* .hero-div {} */

    /*  vidoe show case  */
    .video-container iframe {
        height: 250px;
    }

    .section-title {
        font-size: 2.2rem;
    }

    /* ___________________ service se c */



    .section-title {
        font-size: 2rem;
    }

    /* _____________________________ */
    .gallery-title {

        font-size: 34px;
    }

    /* -__________________________________ */
    .footer-container {
        flex-direction: column;
        text-align: center;

    }

    /*  */
    .vssection-title {
        font-size: 2.2rem;
    }

    .video-wrapper iframe {
        height: 180px;
    }

    /* ___________________ */
    .section-title-choose {
        font-size: 2.2rem;
    }

    /* _______________________ */
    .package-section {
        /* border: 2px solid red; */
    }

    .package-title {
        font-size: 34px;
    }

    .package-box {

        padding: 0px;
        width: 90%;
        border-radius: 15px;
        transition: 0.4s ease;
        cursor: pointer;
        /* border: 1px solid #222; */
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .package-container {
        flex-direction: column;
        align-items: center;
    }

    .package-box ul {
        padding: 30px;
    }

    .pack-view {
        width: 80%;
    }


    /* __________________ */

    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 24px;
        bottom: 15px;
        right: 15px;
    }



    /* process sec */

    .process-timeline {
        flex-direction: column;
    }

    .process-timeline::before {
        width: 4px;
        height: 100%;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }

    .process-timeline::after {
        width: 4px;
        height: 0%;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        animation: glowLineVertical 4s infinite linear;
    }

    @keyframes glowLineVertical {
        0% {
            height: 0%;
        }

        100% {
            height: 100%;
        }
    }

    .process-step {
        max-width: 100%;
    }
}



@media (max-width: 480px) {
    .whatsapp-float {
        width: 45px;
        height: 45px;
        font-size: 22px;
        bottom: 12px;
        right: 12px;
    }
}