@media screen and (max-width:980px) {
    h1 {
        font-size: 26px;
        line-height: 32px
    }

    h2, .editor-content h2 {
        font-size: 25px;
        line-height: 32px
    }

    h3, .editor-content h3 {
        font-size: 22px;
        line-height: 25px
    }

    h4, .editor-content h4 {
        font-size: 18px
    }

    .editor-content ul {
        padding: 0 0 15px 25px
    }

    .half-width, .col-3, .col-7 {
        width: 100%
    }

    .more-links-wraper {
        margin: 25px 0
    }

    .menu-icon-btn {
        display: flex;
        margin-right: 12px
    }

    .header-row .nav-bar {
        position: fixed;
        top: 0;
        left: -310px;
        opacity: 0;
        pointer-events: none;
        width: 300px;
        height: 100vh;
        z-index: 999;
        padding-top: 70px;
        background: #008186;
        flex-direction: column
    }

    .header-row .nav-bar.active {
        opacity: 1;
        pointer-events: all;
        left: 0
    }

    .header-row .nav-bar li::before, .header-row .nav-bar li::after {
        display: none
    }

    .header-row .nav-bar li {
        margin: 0 20px;
        padding: 0;
        border-bottom: 1px solid #339a9e
    }

    .header-row .nav-bar li a {
        font-size: 20px;
        line-height: 28px;
        color: #fff;
        padding: 10px 0 5px;
        font-weight: 400;
        text-transform: uppercase
    }

    .header-row .site-logo {
        width: 106px;
        height: 37px
    }

    .header-row {
        justify-content: start
    }

    .header-row .right-side {
        margin-left: auto
    }

    .header-row .header-btns a {
        width: 34px;
        height: 34px
    }

    .header-row .header-btns {
        gap: 8px
    }

    .header-row .nav-bar li:has(ul)::after {
        content: '+';
        position: absolute;
        right: 0;
        top: 0;
        font-family: 'icomoon';
        display: block;
        font-size: 25px;
        font-weight: 900;
        color: #fff;
        width: 43px;
        text-align: center;
        height: 44px;
        background-color: #fff0;
        align-content: center;
        border-left: 1px solid #339a9e
    }

    .header-row .nav-bar li:has(ul.active)::after {
        content: '_';
        align-content: start;
        line-height: .7
    }

    .header-row .nav-bar li ul {
        background: #fff0;
        box-shadow: none;
        position: relative;
        top: 0 !important;
        border-top: none;
        width: 100%;
        height: 0;
        opacity: 1;
        pointer-events: fill;
        padding: 0;
        overflow: hidden
    }

    .header-row .nav-bar li ul.active {
        height: fit-content
    }

    .header-row .nav-bar li ul li {
        margin: 0 8px
    }

    .header-row .nav-bar li ul li a {
        border: none
    }

    .ft-right {
        border: none;
        padding: 10px 0
    }

    ul.ft-nav {
        margin: 0
    }

    .copy-write-text {
        margin-left: 0
    }

    .hero-section {
        min-height: 330px;
        max-width: 100vw;
        margin-bottom: 45px
    }

    .hero-section .float-left-box {
        padding-bottom: 60px;
        min-height: auto;
        bottom: -45px
    }

    .float-left-box::before {
        width: 75%
    }

    .float-left-box .float-bx {
        width: 77%;
        padding: 15px 15px 25px 0
    }

    .hero-section::after {
        background-size: 120%;
        background-position: top -90px right
    }

    .hero-section .breadcrumb-bar {
        bottom: 25px
    }

    .countries-boxes {
        gap: 10px
    }

    .countries-boxes li {
        width: calc((100% - 2 * 10px) / 3);
    }

    .countries-boxes li img {
        height: 40px;
    }

    .countries-boxes li span {
        font-size: 14px;
    }

    .more-conutries {
        padding: 25px 20px;
        margin-top: 20px
    }

    .more-conutries .inner-boxes h3 {
        margin-bottom: 5px
    }

    .more-conutries ul.countries-list li {
        width: calc((100% - 10px) / 2)
    }

    .inquiry-form .bottom-form {
        padding: 0;
        margin-top: 25px;
        gap: 10px
    }

    .inquiry-form .feild-holder, ul.umrah-pack-list li {
        width: 100%
    }

    .pesnger-left, .pesnger-right {
        flex: 1 !important;
        max-width: 100%;
    }

    .inquiry-form .button {
        position: relative
    }

    .inquiry-form::before {
        width: 70%
    }

    .tour-pkg-wraper li {
        width: 100%;
        margin-bottom: 10px
    }

    .tour-pkg-wraper li .boxes-holder {
        width: 50%;
        min-width: 175px
    }

    .popup-wrapper .popup-box {
        padding: 15px 20px 30px
    }

    .popup-wrapper .popup-tab {
        font-size: 15px
    }

    .popup-wrapper .popup-form-grid {
        gap: 10px
    }

    #existing-email-form .feild-holder, #code-form .feild-holder, .popup-wrapper .popup-panel .feild-holder {
        width: 100%;
        margin-bottom: 0
    }

    .form-background {
        width: 100%;
        margin-right: -15px
    }

    .search-form-wraper .box-holder:first-child {
        max-width: 100%
    }

    .search-form-wraper .box-holder {
        flex: 1;
        min-width: 120px
    }

    .search-form-wraper .form-main-row {
        flex-wrap: wrap;
        gap: 10px;
        border-radius: 0;
        margin-top: 22px;
        background-color: #fff0;
        border: none;
        box-shadow: none
    }

    .search-form-wraper .field-holder {
        flex: 1;
        background: #fff;
        border-radius: 50px;
        min-width: 250px;
        border: none
    }

    .search-form-wraper .button-box {
        flex: 1;
        min-width: 90px;
        height: auto
    }

    .search-form-wraper .button-box .Flight {
        min-height: 44px;
        height: 44px
    }

    .search-form-wraper .multi-rows .form-main-row {
        border-bottom: 1px solid #ffffff94;
        padding-bottom: 15px
    }

    .search-form-wraper .multi-rows .form-main-row:last-child {
        border-bottom: none;
        padding-bottom: 0
    }

    .flight-detail-wrap .flight-inner-row {
        flex-wrap: wrap;
        padding: 15px 10px
    }

    .flight-fare-btns {
        padding-left: 15px;
        padding-right: 15px
    }

    .flight-fare-btns p {
        width: 100%
    }

    .flight-detail-wrap .middles-holder {
        flex: 1 1 100%;
        min-width: 250px;
        order: 3
    }

    .flight-detail-wrap .flt-text-holder p {
        font-size: 11px
    }

    .flight-detail-wrap .flight-inner-row:first-child {
        padding: 15px 10px
    }

    .flight-detail-wrap .filt-line-icon {
        min-width: 100px
    }

    .flight-detail-wrap .rights-holder {
        order: 1;
        flex: 1
    }

    .flight-detail-wrap .flight-inner-row h4 {
        font-size: 16px
    }

    .flight-detail-wrap .last-hold {
        gap: 8px
    }

    .search-results-number p {
        font-size: 14px;
        line-height: 1.3;
        margin-top: 5px
    }

    .hero-section.plain-banner .text-holder {
        padding: 40px 0
    }

    .float-btns a.whatsapp-btn, .float-btns .back-top-btn, .float-btns .getOffers {
        width: 45px;
        height: 45px;
        font-size: 12px;
    }

    .float-btns .back-top-btn img {
        width: 20px;
    }

    .float-btns a.whatsapp-btn img {
        width: 30px;
    }
}