/* Add this style for the mobile navigation */
.mobile-nav {
    display: none; /* Hide the mobile navigation by default */
}

/* Add this style for the mobile menu toggle button */
.mobile-menu-toggle {
    display: block; /* Show the mobile menu toggle button */
    cursor: pointer;
}


@media only screen and (max-width: 767px) {

    .banner-section {
        margin-bottom: 0px;
    }

    #myVideo {
        top: 0px;
    }

    .destination-call p{
        overflow-x: hidden;
    }

    .search-box{
        top: 0;
    }
    .travvel-atraction-content .state-name{
        /* display: inline-block;
        overflow-x: hidden;
        text-overflow: ellipsis;
        width: 130px; */
        font-size: 12px !important;
    }

    body {
        font-size: 16px;
        overflow-x: hidden !important;
    }
    
    h1 {
        font-size: 2em;
    }

    .nav-link-left img {
        width: 40%;
    }
    .banner img {
        width: 100%;
        height: auto;
    }
    .search-btn {
        width: 35%;
    }
    .buy-lead-agent {
        width: 25vw;
    }
    .search-input {
        width: 40vw;
        padding-left: 20px;
    }
    .desktop-nav {
        display: none !important; /* Hide the desktop navigation on smaller screens */
    }

    .mobile-nav {
        display: block; /* Show the mobile navigation on smaller screens */
    }

    /* Add styles for the mobile navigation items */
    .nav-link-right {
        padding: 9px; /* Adjust padding for better mobile layout */
        border: 1px solid #2961ab;

    }

    /* Add styles for the mobile menu toggle button */
    .mobile-menu-toggle {
        display: block; /* Show the mobile menu toggle button */
    }

    .nav-ul {
        display: none; /* Hide the navigation items by default on smaller screens */
    }

    .nav-ul.active {
        display: block; /* Show the navigation items when the mobile menu is toggled */
    }

    .mob-margin-top{
        margin-top: 15px;
    }
    .mob-mt-50{
        margin-top: 50px;
    }

    .mobile-nav {
        position: static;
        top: 0;
        right: 0;
        bottom: 0;
        left: 100%;
        transition: all .3s linear;
    }
    .mobile-nav ul {
        padding: 0;
        margin: 0;
        width: 100%;
        background-color: #252525;
        position: relative;
        z-index: 9;
    }
    .mobile-nav ul li {
        width: 100%;
        border-bottom: 1px solid #343434;
    }
    .mobile-nav ul li:last-child {
        border-bottom: none;
    }
    .mobile-nav ul li a {
        padding: 9px 15px!important;
        color: #767676;
        font-size: 14px;
    }
    /* =========================================
    ===========Index Page ============================= */

    .best-tourist-places-img img {
        width: 100%;
        height: 270px;
    }
    .best-tourist-places-img {
        margin-left: 0%;
        padding-right: 0%;
        margin-bottom: 10px;
    }
    .travel-atraction-div1 img {
        width: 45vw;
    }
    .image-style img{
        width: 50%;
    }
    .style-container{
        height: 230px;
    }
    .form-sty{
        border-left: none;
    }
    .top-center{
        margin: 0 auto;
    }

    .cole1 img{
        width: auto;
        height: 198px;
    }
    .cole2 img{
        width: auto;
        height: 249px;
    }
    .cole3 img{
        width: auto;
        height: 233px;
    }
    .cole4 img{
        width: auto;
        height: 414px;
    }
    .galary-1{
        width: auto !important;
        height: 210px !important;
    }
    .galary-2-0{
        width: auto !important;
        height: 160px !important;
    }
    .galary-2-1     {
        width: auto !important;
        height: 160px !important;
    }
    .under-image-tp{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .galary-3-0{ 
        width: auto !important;
        height: 176px !important;
    }
    .first-img-txt{
        width: 297px;
    }
    .nav-ul li div.drop-third {
        left: 0px !important;
    }
    .nav-ul li div.drop-second{
        left: 0px !important;
    }
    .drop-cont-international p {
        padding-left: 5px;
    }
    .drop-cont-international p {
        padding-left: 35px;
    }

    .front-img-text p{
        margin-left: 0;
    }
    .best-tourist-places-galary a{
        margin-left: 0;
    }
    /* ==================Holiday Packages ============================ */
    .product-details img{
        width: 100%;
        height: auto;
    }
    .product-card-style {
        width: 100%;
    }
    .product-content {
        width: 91vw;
    }
    .budget-price{
        font-size: 12px;
    }
    .budget-private-tour{
        font-size: 12px;
    }
    span {
        color: brown;
    }
    /* ===================Best Place to visit in jan================== */
    .des-name {
        display: inline-block;
        margin-bottom: 0px;
    }
    .recomend-places {
        width: 100%;
    }
    /* ==========contact us ================ */
    .form-box textarea{
        width: 100%;
    }
    .contact-details .contacts-div .cont{
        display: inline-block;
    }
    .email-div,
    .address,
    .phone{
        width: 100%;
        margin-top: 8px;
    }
    .contact-details {
        padding: 5% 0%;
    }

    /* ========== Adventure ============== */

    .advent-st {
        width: 100%;
        padding-bottom:5%;
    }
    .addventure-st-side {
        width: 100%;
    }

    /* ====== Holiday Packages Details ================= */

    .overview-details {
        width: 100%;
    }

    .product-details-enq-form {
        width: 100%;
        margin-left: 0px;
    }
    .product-banner-img img {
        height: 150px;
    }
    .mobile-res{
        width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* ========== packages-details.php ============================ */

    .region-heading h2 span{
        padding: 0px !important;
    }
    .container-fullcustom {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .regbox {
        padding: 30px;
    }
    .regbox .image {
        flex: 0 0 100% !important;
    }
    .regbox .text .header h3 {
        margin-top: 8px !important;
    }
    .regbox .package .header a.btng {
        padding: 5px 10px !important;
        margin-top: 2px !important;
        font-size: 11px !important;
    }
    .offer-box1 {
        margin: 0px 0px 10px 0px;
        flex: 0 0 100% !important;
    }
    .time span{
        color: #fff;
    }
    .regbox .image img{
        width: 100% !important;
    }
    /* ====================index page 1st section============= */

    .card-area {
        display: flex;
        flex-direction: column;
    }
    .card {
        margin-bottom: 1rem;
        margin-left: 26px;
    }
    .card-front {
        width: 14rem;
    }
    .first-card-hover:hover {
        margin-right: 0px;
    }
    .pb-5 {
        padding-bottom: 1rem !important;
    }
    .front-img-text {
        bottom: 0px;
        width: 100%;
    }
    .travel-atraction-div1{
        flex-direction: column;
    }
    .package-by-month-container{
        display: none;
    }
    .style-container {
        height: 320px;
    }
    .image-style img {
        width: 95%;
    }
    .row> .padding-lr{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .enquiry-form img{
        width: 100%;
    }
    .button-content-wrapper span{
        color: #fff;
    }
    .wcu-btn>.button-content-wrapper> span{
        color: #2961ab;
    }
    .wcu-content h3 {
        font-size: 20px;
    }
    .photo-gallery .gallery-img {
        width: 100%;
    }

    .hot-leads-style{
        color: #2961ab;
    }
    .d-sm-block{
        display: block !important;
    }
    .d-sm-none{
        display: none !important;
    }
    .data-list>li>span:nth-of-type(2) {
        width: 28%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .data-list>li>span:nth-of-type(3) {
        width: 25%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .data-list>li>span:nth-of-type(4) {
        width: 25%;
        text-align: center;
    }

    .wcu-bg {
        background-size: contain;
        background-position: bottom;
    }
    .mb-5 {
        margin-bottom: 0rem !important;
    }
    .user-details .detail {
        margin: 1rem 2rem 1rem 2rem;
    }
    .bymonth {
        overflow-x: auto;
        overflow-y: hidden;
    }
    .flickity-viewport{
        height: 450px;
    }
    .contact-btn{
        margin-bottom: 15px;
    }

    .clients-visiting-places li:nth-child(5),
    .clients-visiting-places li:nth-child(6),
    .clients-visiting-places li:nth-child(7),
    .clients-visiting-places li:nth-child(8),
    .clients-visiting-places li:nth-child(9),
    .clients-visiting-places li:nth-child(10){
        display: none;
    }

    .mobile-view{
        width: 100%;
    }

    /* ===================== HEADER ============================== */

    .nav-ul li div.dropdown {
        min-width: 93vw; /* Set width of the dropdown */
        height: auto;
    }
    .nav-ul li div.drop-second{
        min-width: 93vw;
        height: auto;
    } 
    .nav-ul li div.drop-third{
        min-width: 93vw;
        height: auto;
    }

    /* ================== leads Page ============================= */

    .banner-content{
        display: none;
    }
    .signup{
        padding: 25px;
    }
    .blog-thumb-img img{
        min-height: 120px !important;
        max-height: 150px !important;
    }
}


@media only screen and (min-width: 601px) and (max-width: 1024px) {
    /* Styles for medium screens */
}

@media only screen and (min-width: 1025px) {
    /* Styles for large screens */
}
@media only screen and (max-width: 320px) {
    body {
        font-size: 14px;
    }

    .Visit-by-Theme-head h3{
        font-size: 16px;
    }
    .best-tourist-places-head h3{
        font-size: 16px;
    }

    .best-tourist-places-head p{
        font-size: 12px;
    }

    .travel-atraction-div1{
        flex-direction: column;
    }
    .travel-atraction-div1 img {
        width: auto;
    }
    .image-style img{
        width: 94% !important;
    }

    .style-container{
        height: 300px;
    }
    .ul-list li{
        font-size: 15px;
    }
    .month-style p{
        font-size: 13px; 
    }
    /* ======================== */
    .best-places-month-wise-head img {
        height: 26vh;
    }

    .mobile-res{
        width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .search-input,
    .buy-lead-agent,
    .search-btn{
        height: 50px;
    }
    .search-btn button{
        line-height: 1.5;
        font-size: 1.2rem;
        padding: 7px 17px;
    }
    .ho-inp-box-alig{
        border: 0px solid #1336819c;
    }
    .clients-visiting-places li:nth-child(3),
    .clients-visiting-places li:nth-child(4),
    .clients-visiting-places li:nth-child(5),
    .clients-visiting-places li:nth-child(6),
    .clients-visiting-places li:nth-child(7),
    .clients-visiting-places li:nth-child(8),
    .clients-visiting-places li:nth-child(9),
    .clients-visiting-places li:nth-child(10){
        display: none;
    }

    /* .regbox .package .header a.btng {
        padding: 0px 10px !important;
        font-size: 8px !important;
    } */
 
}