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


    .header_bg {
        padding: 1.5rem 1.5rem;
    }
    .toggle_menu{
        display: block;
    }
    .toggle_menu span:nth-child(1) {
        display: block;
        background-color: #000;
        height: 2.5px;
        width: 35px;
        margin-bottom: 7px;
        border-radius: 12px;
        transition: all 0.3s ease-in-out;
    }
    .toggle_menu span:nth-child(2) {
        display: block;
        background-color: #000;
        height: 2.5px;
        width: 35px;
        margin-bottom: 7px;
        border-radius: 12px;
        transition: all 0.3s ease-in-out;
    }
    .toggle_menu span:nth-child(3) {
        display: block;
        background-color: #000;
        height: 2.5px;
        width: 35px;
        border-radius: 12px;
        transition: all 0.3s ease-in-out;
    }

    .toggle_close span:nth-child(1) {
        transform: rotate(45deg) translate(7px, 7px);
    }
    .toggle_close span:nth-child(2) {
        opacity: 0;
    }
    .toggle_close span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }


    .navs{
        display: none;
        transition: all 0.3s ease-in-out;
    }
    .navs_active{
        display: block;
        transition: all 0.3s ease-in-out;
    }

    .navs ul {
        position: fixed;
        left: 0;
        background-color: #ffffff;
        height: 80%;
        top: 140px;
        z-index: 1;
        margin: 0.7rem;
        padding: 0;
        right: 0;
        border-radius: 30px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 3px 15px 2px #66666633;
    }




    .banner {
        margin-top: 2rem;
    }
    .slider_content {
        width: 100%;
        padding: 3em 1.5rem;
    }
    .slider_content h1 {
        font-size: 35px;
        margin: 0;
    }

    .slider_img img{
        width: 100%;
        border-radius: 30px;
        height: 85vh;
        object-fit: cover;
    }
    .banner-slider .slick-list {
        border-radius: 30px 30px 0px 0px;
    }
    /* .year_badge {
        position: absolute;
        right: 4.5%;
        top: -1.5%;
        transform: rotate(-13deg);
    } */
    .year_badge img{
        width: 85px;
    }
    .country-flag ul {
        margin-top: 2rem;
        display: flex;
        gap: 2rem;
        padding: 0;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .available_head h3 {
        font-size: 25px;
    }

    .direction_row{
        flex-direction: column-reverse;
    }

    .offer_list_main {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        justify-content: space-between;
    }
    .offer_list{
        width: 48%;
    }
    .offer {
        margin-top: 5rem;
    }
    .offer_list p {
        font-size: 12px;
    }
    .banner_btns{
        flex-direction: column;
    }
    .availability button{
        width: 100%;
    }
    .package_btn button{
        width: 100%;
    }

    .key-points{
        gap: 1.5rem;
        margin-bottom: 1.5rem;
        padding: 1.5rem 1.5rem;
    }
    .key-points h3 {
        font-size: 30px;
    }
    .key-points h5 {
        font-size: 15px;
        font-weight: 500;
    }
    .key_points_main {
        margin-top: 0rem;
    }
    .service_item {
        width: 100%;
    }
    .tour_heading p {
        width: 100%;
        margin: auto;
    }

    .about_us {
        padding: 2rem 1.5rem;
        margin-bottom: 1.5rem;
    }
    .about_us h2 {
        font-size: 40px;
    }

    .services_heading {
        padding: 2.5rem 1.5rem 0rem 1.5rem;
        margin-bottom: 14rem;
    }
    .services_heading h2 {
        font-size: 40px;
    }
    .services_img {
        position: absolute;
        bottom: -175px;
    }
    .services_list {
        margin-top: 2rem;
    }
    .tour_heading {
        padding: 1.5rem;
        margin: 0;
    }
    .tour_section {
        margin-top: 4rem;
    }
    .tour_heading h2 {
        font-size: 40px;
    }
    .domestic_img {
        padding: 1.5rem;
    }
    .domestic_content h3 {
        font-size: 25px;
    }
    .domestic_content {
        padding: 1rem 1.5rem;
    }
    .domestic_list span {
        font-size: 14px;
    }
    .domestic {
        margin-top: 1.5rem;
    }
    .destination::after{
        height: 17px;
    }
    .domestic_img img{
        height: 250px;
    }


    /* ==================================
                Contact Section
    ================================== */

    .contact_sec{
        padding: 1.5rem;
    }
    .contact_heading p{
        width: auto;
        font-size: 15px;
    }
    .contact_details{
        display: flex;
        flex-direction: column;
    }
    .contact_address p {
        width: auto;
    }
    .Landline_content {
        gap: 0rem;
        flex-direction: column;
    }
    .branch_adrs {
        padding: 1.5rem;
    }
    .contact_form_sec{
        padding: 1.5rem;
    }
    .contact_form_sec p {
        font-size: 15px;
        width: auto;
    }




    /* ========================================
                Package Section
    ======================================== */

    .package_heading h2 {
        font-size: 35px;
    }
    .package_heading p{
        width: auto;
    }
    .controls{
        flex-direction: column-reverse;
        position: sticky;
        top: -1px;
        background-color: #ffffff;
        padding: 5px 0px;
        border-radius: 19px;
        z-index: 11;
    }
    .tabs_package {
        width: -webkit-fill-available;
    }
    .search_package {
        width: 100%;
    }
    .controls ul {
        flex-wrap: nowrap;
    }
    .selector_tab {
        font-size: 14px;
        width: auto;
        padding: 0.7rem 0.5rem;
    }
    .controls ul{
        display: inline-block;
    }
    .controls ul li {
        margin-left: 0.3rem;
    }
    .tabs_package {
        padding: 1.5rem 0.5rem;
        margin-top: 0.5rem;
        border-top: 1px solid #e8e8e8;
    }
    .item-grid {
        margin-top: 25px;
    }






    .available_section {
        margin-top: 3rem;
    }
    .available_sec {
        background-color: #fff;
        padding: 1rem;
    }
    .available_head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: column-reverse;
    }
    .available_seat p {
        margin-bottom: 12px;
    }
    .book_slide_img{
        display: none;
    }
    .available_content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .available_seat{
        width: 100%;
    }
    .seat_left{
        width: 100%;
    }
    .available_btn{
        width: 100%;
    }
    .available_btn button{
        width: 100%;
    }

    .popup-content {
        width: 95%;
        padding: 6px;
        margin: auto;
      }
      .location-links ul li::after {
        content: "";
        position: absolute;
        background-color: #ffffffcf;
        height: 22px;
        width: 1.5px;
        right: -9px;
    }

    .ftr-logo {
        width: 100%;
    }

  }




  /* =========================================
  --------------425px to 767px--------------------
  =========================================*/


  @media only screen and (min-width: 425px) and (max-width: 767px) {
   .header_bg {
    padding: 1.5rem 1.5rem;
    }
    .toggle_menu{
        display: block;
    }
    .toggle_menu span:nth-child(1) {
        display: block;
        background-color: #000;
        height: 2.5px;
        width: 35px;
        margin-bottom: 7px;
        border-radius: 12px;
        transition: all 0.3s ease-in-out;
    }
    .toggle_menu span:nth-child(2) {
        display: block;
        background-color: #000;
        height: 2.5px;
        width: 35px;
        margin-bottom: 7px;
        border-radius: 12px;
        transition: all 0.3s ease-in-out;
    }
    .toggle_menu span:nth-child(3) {
        display: block;
        background-color: #000;
        height: 2.5px;
        width: 35px;
        border-radius: 12px;
        transition: all 0.3s ease-in-out;
    }

    .toggle_close span:nth-child(1) {
        transform: rotate(45deg) translate(7px, 7px);
    }
    .toggle_close span:nth-child(2) {
        opacity: 0;
    }
    .toggle_close span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }


    .navs{
        display: none;
        transition: all 0.3s ease-in-out;
    }
    .navs_active{
        display: block;
        transition: all 0.3s ease-in-out;
    }

    .navs ul {
        position: fixed;
        left: 0;
        background-color: #ffffff;
        height: 80%;
        top: 140px;
        z-index: 1;
        margin: 0.7rem;
        padding: 0;
        right: 0;
        border-radius: 30px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 3px 15px 2px #66666633;
    }



    .banner {
        margin-top: 2rem;
    }

    .slider_content {
        width: 100%;
        padding: 3em 1.5rem;
    }
    .slider_content h1 {
        font-size: 45px;
        margin: 0;
    }

    .slider_img img{
        width: 100%;
        border-radius: 30px;
        height: 85vh;
        object-fit: cover;
    }
    .banner-slider .slick-list {
        border-radius: 30px 30px 0px 0px;
    }

    .direction_row{
        flex-direction: column-reverse;
    }

    .offer_list_main {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        justify-content: space-between;
    }
    .offer_list{
        width: 48%;
        padding: 7px 15px;
    }
    .offer {
        margin-top: 5rem;
    }
    .offer_list p {
        font-size: 15px;
    }
    .banner_btns{
        flex-direction: column;
    }
    .availability button{
        width: 100%;
    }
    .package_btn button{
        width: 100%;
    }

    .about_us {
        padding: 2rem 1.5rem;
        margin-bottom: 1.5rem;
    }
    .about_us h2 {
        font-size: 40px;
    }

    .key-points{
        gap: 1.5rem;
        margin-bottom: 1.5rem;
        padding: 1.5rem 1.5rem;
    }
    .key-points h3 {
        font-size: 40px;
    }
    .key-points h5 {
        font-size: 20px;
        font-weight: 500;
    }
    .key_points_main {
        margin-top: 0rem;
    }
    .services_heading {
        padding: 2.5rem 1.5rem 0rem 1.5rem;
        margin-bottom: 20rem;
    }
    .services_heading h2 {
        font-size: 40px;
    }
    .services_img {
        position: absolute;
        bottom: -175px;
    }
    .services_list {
        margin-top: 2rem;
        gap: 1rem;
        justify-content: space-between;
    }
    .flex_servi {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
    .service_item img {
        width: 100%;
    }
    .service_item {
        padding: 1rem;
    }
    .tour_heading {
        padding: 1.5rem;
    }
    .tour_heading p {
        width: auto;
    }
    .domestic_img {
        padding: 1.5rem;
    }
    .domestic_img img{
        height: 350px;
    }
    .domestic_list span {
        margin: 0;
    }
    .domestic {
        margin-top: 1.5rem;
    }

    /* .year_badge {
        position: absolute;
        right: 4.5%;
        top: -1.5%;
        transform: rotate(-13deg);
    } */
    .year_badge img{
        width: 100px;
    }

    .country-flag ul {
        margin-top: 2rem;
        display: flex;
        gap: 2rem;
        padding: 0;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .available_head h3 {
        font-size: 25px;
    }



    .package_heading h2 {
        font-size: 35px;
    }
    .package_heading p{
        width: auto;
    }
    .controls{
        flex-direction: column-reverse;
        position: sticky;
        top: -1px;
        background-color: #ffffff;
        padding: 5px 0px;
        border-radius: 19px;
        z-index: 11;
    }
    .tabs_package {
        width: -webkit-fill-available;
    }
    .search_package {
        width: 100%;
    }
    .controls ul {
        flex-wrap: nowrap;
    }
    .selector_tab {
        font-size: 14px;
        width: auto;
        padding: 0.7rem 0.5rem;
    }
    .controls ul{
        display: inline-block;
    }
    .controls ul li {
        margin-left: 0.3rem;
    }
    .tabs_package {
        padding: 1.5rem 0.5rem;
        margin-top: 0.5rem;
        border-top: 1px solid #e8e8e8;
    }
    .item-grid {
        margin-top: 25px;
    }



    .contact_sec{
        padding: 1.5rem;
    }
    .contact_heading p{
        width: auto;
        font-size: 15px;
    }
    .contact_details{
        display: flex;
        flex-direction: column;
    }
    .contact_address p {
        width: auto;
    }
    .Landline_content {
        gap: 0rem;
        flex-direction: column;
    }
    .branch_adrs {
        padding: 1.5rem;
    }
    .contact_form_sec{
        padding: 1.5rem;
    }
    .contact_form_sec p {
        font-size: 15px;
        width: auto;
    }

    .available_sec {
        background-color: #fff;
        padding: 1.5rem;
    }
    .available_head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: column-reverse;
    }
    .available_seat p {
        margin-bottom: 12px;
    }
    .book_slide_img{
        display: none;
    }

    .popup-content {
        width: 95%;
        padding: 6px;
        margin: auto;
      }
      .location-links ul li::after {
        content: "";
        position: absolute;
        background-color: #ffffffcf;
        height: 22px;
        width: 1.5px;
        right: -9px;
    }

  }


  @media only screen and (min-width: 768px) and (max-width: 991px) {

    .slider_content {
        width: 100%;
        padding: 3em 1.5rem;
    }
    .slider_content h1 {
        font-size: 60px;
        margin: 0;
    }

    .slider_img img{
        width: 100%;
        border-radius: 30px 30px 0px 0px;
        height: 500px;
        object-fit: cover;
        object-position: center;
    }
    .banner-slider .slick-list {
        border-radius: 30px 30px 0px 0px;
    }

    .direction_row{
        flex-direction: column-reverse;
    }

    .offer_list_main {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        justify-content: space-between;
    }
    .offer_list{
        width: 48%;
        padding: 11px 15px;
    }
    .offer {
        margin-top: 5rem;
    }
    .offer_list p {
        font-size: 16px;
    }
    /* .banner_btns{
        flex-direction: column;
    } */
    .availability button{
        width: 100%;
    }
    .package_btn button{
        width: 100%;
    }


    .about_us h2 {
        font-size: 40px;
    }
    .about_us {
        background-color: #fff;
        padding: 3rem 1.5rem;
        height: 100%;
    }

    .key-points {
        padding: 1rem 1rem;
        height: 100%;
        justify-content: center;
    }
    .key-points h3 {
        font-size: 40px;
    }
    .key-points h5 {
        font-size: 18px;
    }




    .services_heading {
        padding: 2.5rem 1.5rem 0rem 1.5rem;
    }
    .services_img {
        position: absolute;
        bottom: -125px;
        left: -10px;
    }
    .services_list {
        gap: 1rem;
        justify-content: space-between;
    }
    .flex_servi {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.1rem;
    }
    .service_item {
        padding: 1rem;
    }
    .service_item img {
        width: 100%;
    }
    .flex_servi h3{
        font-size: 18px;
    }



    .domestic_img {
        padding: 1.5rem;
    }
    .domestic_img img {
        width: 100%;
        border-radius: 15px;
        height: 350px;
    }
    .domestic_content {
        background-color: #fff;
        padding: 1.5rem 1.5rem;
    }
    .domestic_content h3 {
        font-size: 25px;
    }

    .domestic_list span {
        font-size: 16px;
        margin: 0;
    }




    .contact_heading p {
        font-size: 16px;
        width: auto;
    }
    .branch_adrs {
        padding: 1.2rem;
        height: calc(100% - 1.5rem);
    }
    .contact_details{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .contact_address h6 {
        font-size: 18px;
    }
    .contact_address p {
        width: auto;
    }
    .contact_address h3 {
        font-size: 25px;
    }
    .contact_form_sec p {
        width: auto;
    }


    .available_sec {
        background-color: #fff;
        padding: 1.5rem;
    }
    .available_head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: column-reverse;
    }
    .available_seat p {
        margin-bottom: 12px;
    }
    .book_slide_img{
        display: none;
    }

    .location-links ul li::after {
        content: "";
        position: absolute;
        background-color: #ffffffcf;
        height: 22px;
        width: 1.5px;
        right: -9px;
    }


  }















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

    .availability_sec{
        flex-direction: column;
        margin-top: 4rem;
    }
    .availability img {
        width: 100%;
        border-radius: 30px 30px 0px 0px;
    }
    .availability_content {
        padding: 1.5rem;
        width: 100%;
    }
    .availability_content h3 {
        font-size: 25px;
        margin-bottom: 0.8rem;
    }
    .availability_content p {
        font-size: 14px;
        margin-bottom: 2.5rem;
        width: 100%;
    }



/* ========================================
                service page
    ======================================== */
    .bnr-bg{
        padding: 20px;
    }
    .bnr-bg .bnr-img img {
        width: 100%;
    }
    .bnr-cnt p {
        padding: 0;
    }
    .top-cnt h3 {
        font-size: 30px;
    }
    /* HAJJ */

    .hj-bg{
        padding: 20px;
    }
    .hj-bg .hj-img img {
        width: 100%;
        height: 300px;
    }
    .hj-bg .cnt-sec {
       margin: 0;
    }
    .hj-bg .cnt-sec .top-cnt {
        margin-top: 1.5rem;
        display: flex;
        gap: 22px;
        align-items: flex-start;
        flex-direction: column;
    }
    /* UMRAH */
    .umrah-bg .umrah-img img{
        width: 100%;
        height: 300px;
    }
    .umrah-bg {
        padding: 20px;
    }
    .umrah-bg .cnt-sec .top-cnt {
        display: flex;
        gap: 22px;
        align-items: flex-start;
        flex-direction: column;
        margin-top: 15px;
    }
    .umrah-bg .umrah-sec{
        display: flex;
        flex-direction: column-reverse !important;
    }
    /* UMRAH PACKAGE */

    .package-bg {
        padding: 20px;
    }
    .package-bg .cnt-1 h3 {
        padding: 0;
    }
    .package-bg .pkg-btn {
        display: flex;
        justify-content: flex-start;
    }

    /* TOUR-PACKAGE */
    .hj-bg .cnt-sec .txt-2 {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .hj-bg .cnt-sec .txt-2 p{
        margin: 0;
    }


    .package_inner_content {
        padding: 1.5rem;
        margin-bottom: 2.5rem;
    }


    .footer_content {
        padding: 1.5rem;
    }
    .ftr-address {
        width: auto;
    }
    .footer_content ul {
        display: inline-flex;
        gap: 1rem;
        font-size: 14px;
        flex-wrap: wrap;
        padding: 0;
        justify-content: center;
        font-size: 14px;
    }
    .copyright {
        display: flex;
        justify-content: space-between;
        margin-top: 2rem;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
    }
  }