@media (max-width: 1024px) {
    .row {
        width: 100%;
        padding: 20px;
        margin: auto;
    }

    h1 {
        font-size: 1.8em !important;
    }

    h2 {
        font-size: 1.5em !important;
    }

    h3 {
        font-size: 1.2em !important;
    }

    button {
        font-size: 14px;
    }

    .gap,
    .gap3 {
        gap: 20px;
    }

    .newfooter {
        padding-bottom: 50px;

        .footsocial {
            justify-content: start;
        }
    }

    .cta {
        display: block;

        a {
            color: var(--fourth-color) !important;
            line-height: 1.5;
        }
    }

    .grid1,
    .grid2,
    .grid3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .fsroutes {
        .slide1 {
            p,
            button {
                display: block;
            }
        }
    }

    #on,
    #off {
        display: block;
    }

    .navigate {
        background-color: var(--primary-color);
        display: grid;
        position: absolute;
        right: 0;
        top: 0;
        height: 100vh;
        width: 60%;
        padding: 30px;
        display: none;

        hr, .undernav {
            display: block;
            margin-bottom: 20px;
            border-color:var(--third-color) !important;
        }

        nav {
            width: 100%;
        }

        ul {
            display: grid;
        }

        p {
            color: #141414 !important;
        }
    }

    .newheader {
        .left {
            img {
                width: 150px;
            }
        }

        .newhead {
            padding: 15px 0;
        }

        .right {
            flex: 1;
            justify-content: center;
        }
    }

    #ui-id-1 {
        top: 483px !important;
    }

    #ui-id-2 {
        top: 550px !important;
    }
}

@media (max-width: 768px) {
    #fsformid {
        width: 100%;
    }

    .d-flex {
        flex-direction: column;
    }

    .grid1,
    .grid2,
    .grid3 {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    .contact {
        .right {
            max-width: 100%;
            margin-bottom: 20px;
        }
    }

    .fsroutes {
        .slide1 {
            min-width: 70%;
        }
    }

    .fsdestinations {
        .slide2 {
            min-width: 46%;

            .innerdiv {
                height: 200px;
            }
        }
    }

    .fscardsec {
        .column {
            height: 300px;
        }
    }

    .newfooter {
        .row {
            padding-top: 20px !important;
        }

        .foot {
            font-size: 13px;
        }
    }

    .bg1 {
        .row {
            padding-block: 20px;
        }
             hr {
           display: block;
       }
    }

    .fshbg,
    .fscbg,
    .helibg,
    .yatchbg {
        .column {
            width: 100%;
        }
    }
}