@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Roboto:wght@100..900&display=swap');

* {
    padding: 0;
    margin: 0;
}


body {
    padding: 0;
    margin: 0;
    font-family: "Roboto", sans-serif;
    /* font-family: "Philosopher", sans-serif; */
    font-optical-sizing: auto;
    font-style: normal;
}

:root {
    --themeOrange: #e96606;
    --themeColor: #8dc63f;
    --themebgColor: #f5f5f5;
    --darkBlack: #000000;
    --whiteColor: #ffffff;
    --textcolor: #333333;
    --paraTextcolor: #6d6c6c;
    --lightGreen: #ecfffd;
    --themeLightbg: #f4fdfd;
    --starColor: #fbb040;
    --lowOpacitywhite: #ffffffa8;
    --borderRadius: 10px;
    --themeBorder: 1px solid var(--themeColor);
}

/* ---------------------- Common CSS Responsive Start ---------------------- */

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

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

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

@media (max-width: 768px) {
    h3 {
        font-family: "Philosopher", sans-serif;
        font-size: 36px;
    }

    .section-header h3 span {
        display: block;
    }

}

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

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

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

/* ---------------------- Common CSS Responsive End ---------------------- */

/* ---------------------- Navbar Responsive CSS Start ---------------------- */

@media (max-width: 1200px) {
    .custom-navbar .nav-menu .nav-inner-menu {
        Display: none;
    }

    .custom-navbar .nav-menu .nav-btn {
        display: block;
    }

    #mobile-menu {
        width: 360px;
        height: 100%;
        padding: 100px 0;
        background: var(--themeLightbg);
        display: block;
        position: fixed;
        left: -360px;
        top: 0;
        z-index: 995;
        transition: all 0.5s;
    }

    #mobile-menu.active {
        left: 0px;
        transition: all 0.5s;
    }

    #mobile-menu ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    #mobile-menu ul li {
        height: 45px;
        padding-left: 20px;
    }

    #mobile-menu ul li a {
        color: var(--themeColor);
        font-family: "Philosopher", sans-serif;
        font-size: 24px;
        font-weight: 700;
    }

    #mobile-menu ul li a:hover,
    #mobile-menu ul li a.active {
        color: var(--themeOrange);
        transition: all 0.5s;
    }

    #mobile-menu .common-btn {
        border: 1px solid var(--themeOrange);
        margin: 40px auto 10px;
        color: var(--themeOrange);
        transition: all 0.5s;
    }

    #mobile-menu .common-btn:hover {
        border: None;
        background: var(--themeOrange);
        color: var(--whiteColor);
        transition: all 0.5s;
    }


}

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

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

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

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

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

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

/* ---------------------- Navbar Responsive CSS End ---------------------- */

/* ---------------------- Banner Responsive CSS Start ---------------------- */

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

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

@media (max-width: 992px) {
    .hero-title span {
        display: block;
    }
}

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

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

@media (max-width: 480px) {
    .hero-title {
        font-size: 42px;
    }
}

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

/* ---------------------- Banner Responsive CSS End ---------------------- */

/* ---------------------- About Us Responsive CSS Start ---------------------- */

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

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

@media (max-width: 992px) {
    #about .about-img-box {
        width: 100%;
        height: 400px;
        margin-bottom: 40px;
    }
}

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

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

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

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

/* ---------------------- About Us Responsive CSS End ---------------------- */

/* ---------------------- 360 Degree View Responsive CSS Start ---------------------- */

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

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

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

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

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

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

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

/* ---------------------- 360 Degree View Responsive CSS End ---------------------- */

/* ---------------------- Photo Gallery Responsive CSS Start ---------------------- */

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

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

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

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

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

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

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

/* ---------------------- Photo Gallery Responsive CSS End ---------------------- */

/* ---------------------- Our Packages Responsive CSS Start ---------------------- */

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

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

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

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

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

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

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

/* ---------------------- Our Packages Responsive CSS End ---------------------- */

/* ---------------------- Facilities Responsive CSS Start ---------------------- */

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

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

@media (max-width: 992px) {
    #facilities .facilities-img {
  width: 100%;
  height: 360px;
  position: relative;
  margin-bottom: 80px;
}
}

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

@media (max-width: 576px) {
    #facilities .swiper {
  width: 300px;
  height: 300px;
}

#facilities .facilities-img {
  margin-bottom: 40px;
}

#facilities .facilities-info .facility-list ul li {
  font-size: 16px;
  margin-bottom: 10px;
}
}

@media (max-width: 480px) {
     #facilities .swiper {
  width: 250px;
  height: 250px;
}
}

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

/* ---------------------- Facilities Responsive CSS End ---------------------- */

/* ---------------------- Places of Interest Responsive CSS Start ---------------------- */

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

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

@media (max-width: 992px) {
    #visited-place .visited-card {
  margin-bottom: 30px;
}
}

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

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

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

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

/* ---------------------- Places of Interest Responsive CSS End ---------------------- */

/* ---------------------- Contact Us Responsive CSS Start ---------------------- */

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

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

@media (max-width: 992px) {
    #contact .footer-info,
    #contact .Useful-link {
        margin-bottom: 20px;
    }
}

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

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

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

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

/* ---------------------- Contact Us Responsive CSS End ---------------------- */

/* ---------------------- Responsive CSS Start ---------------------- */

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

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

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

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

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

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

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

/* ---------------------- Responsive CSS End ---------------------- */

/* ---------------------- Responsive CSS Start ---------------------- */

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

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

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

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

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

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

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

/* ---------------------- Responsive CSS End ---------------------- */

/* ---------------------- Responsive CSS Start ---------------------- */

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

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

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

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

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

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

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

/* ---------------------- Responsive CSS End ---------------------- */