* {

    margin: 0px;

    padding: 0px;

    box-sizing: border-box;

}



body {

    overflow-x: hidden;

}



header {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 10;

}



h2 {

    font-family: Montserrat;

}



a {

    text-decoration: none;

}



ul,

li,

ol {

    list-style: none;

}



p {

    font-family: Montserrat;



}



.navbar-toggler:focus,

.navbar-toggler:active,

.navbar-toggler {

    outline: none !important;

    box-shadow: none !important;

    border: none !important;

}



/* Offcanvas base style */

.offcanvas-custom {

    position: fixed;

    top: 0;

    left: -100%;

    /* Move completely off screen */

    width: 100%;

    height: 100vh;

    background-color: #E45D3F;

    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);

    padding: 30px 20px;

    z-index: 1050;

    transition: left 0.3s ease;

}



/* Show menu */

.offcanvas-custom.active {

    left: 0;

}



/* Close button inside the menu */

.close-btn {

    font-size: 30px;

    border: none;

    background: none;

    position: absolute;

    top: 10px;

    right: 15px;

}





.navbar-nav {

    padding: 2px;

    width: 60%;

    background-color: #E3553AC9;

    border-radius: 50px;

    margin-left: 50px;

    justify-content: center;

    font-size: 20px;

}



nav div ul {

    display: flex;

    gap: 30px;

}



.nav-link {

    font-family: inter;

    font-size: 20px;

    color: white !important;

}



.navbar-toggler {

    width: 40px;

    height: 40px;

    padding: 0;

}



.login-btn {

    background-color: #E3553AC9;

    color: white;

    height: 45px;

    width: 45px;

    border: none;

    font-size: 25px;

    border-radius: 50%;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

}



.baner {

    height: 80vh;

    overflow: hidden;



}



.banner-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    position: absolute;

    top: 0;

    left: 0;

    z-index: -1;

    border-top-left-radius: 15px;

    border-top-right-radius: 15px;

}





.baner h1 {

    color: white;

    font-size: 95px;

    font-weight: 400;

    font-family: Italiana, serif;

    margin-top: 120px;

}



.baner p {

    font-size: 24px;

    color: white;

    font-family: Inter, sans-serif;

    font-weight: 400;

}



.title{

display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

}

.plusicon{

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 4px 9px;
    background-color: #E45D3F;

    color: white;

    border-radius: 50%;

    border: none;

}



.image {

    position: relative;



}



.image p {

    position: absolute;

    top: 50%;

    padding: 10px 30px;

    background-color: white;

    font-size: 20px;

    font-weight: 500;

    color: black;

    border-radius: 10px;

    left: 34%;

}



.image img {

    width: 437px;

    height: 500px;

    padding: 5px 20px;

     border-radius: 40px;

}





.filters {

    display: flex;

    /* flex-wrap: wrap; */
    overflow-x: scroll;
    gap: 10px;

    padding: 20px 0px;
    white-space: nowrap;
    scroll-behavior: smooth;
    scrollbar-width: none;
}







.destination-section h2 {

    font-family: Italiana;

    font-size: 70px;

    text-align: center;

    /* padding: 25px 0px; */

    margin-top: 50px;

}





.filter-btn {

    color: #E45D3F;

    background-color: #E45D3F;

    border: 1px solid #E45D3F;

    background: transparent;

    border-radius: 25px;

    padding: 5px 25px;

    cursor: pointer;

}



.filter-btn:active,

.filter-btn:hover {

    background-color: #E45D3F;

    color: white;

}







.page-btn {

    background-color: #E45D3F;

    background: transparent;

    color: #E45D3F;

    border: 1px solid #E45D3F;

    border-radius: 50%;

    height: 40px;

    width: 40px;

    margin-left: 10px;

    cursor: pointer;

}



.page-btn:active,

.page-btn:hover,

.active {

    background-color: #E45D3F;

    color: white;

}



.page-pre-btn {

    background-color: #E45D3F;

    color: white;

    border: none;

    padding: 10px 20px;

    border-radius: 50px;

    font-size: 20px;

    cursor: pointer;

}



.page-next-btn {

    background-color: #E45D3F;

    color: white;

    border: none;

    padding: 10px 20px;

    border-radius: 50px;

    font-size: 20px;

    cursor: pointer;

}





footer {

    background-color: #94A7D2;

    padding: 50px 0px;

    border-bottom-left-radius: 30px;

    border-bottom-right-radius: 30px;

    color: white;

}



.footer-img {

    height: 300px;

    width: 300px;

}



.footer-btn {

    border: none;

    color: white;

    background-color: #5E7CBD;

    border-radius: 50px;

    padding: 8px 30px;

    position: absolute;

    top: 8px;

    right: 80px;

}



input[type="email"] {

    width: 350px;

    padding: 15px;

    border-radius: 50px;

}



.footer-content-2 {

    padding: 40px;

}



.footer-content-3 {

    padding: 40px;

}





.icon {

    display: flex;

    text-decoration: none;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border: 2px solid white;

    border-radius: 50%;

    padding: 5px;

    box-sizing: border-box;

}



.para {

    display: block;

}



.para1 {

    display: none;

}





/* Small devices (phones) */

@media (min-width:320px) and (max-width: 767px) {



    * {

        box-sizing: border-box;

    }



    body {

        margin: 0;

        padding: 0;

        overflow-x: hidden;

    }





    .login-btn {

        background-color: #E3553AC9;

        color: white;

        height: 40px;

        width: 40px;

        border: none;

        font-size: 20px;

        border-radius: 50%;

        cursor: pointer;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        text-decoration: none;

    }



    .navbar-nav {

        background-color: #E45D3F;

        width: 100%;

        margin-left: 0;

        border-radius: 20px;

        font-size: 18px;

    }



    .img-fluid {

        border-radius: 16px !important;

    }



    .baner h1 {

        width: 100%;

        font-size: 26px;

        margin-top: 120px;

    }



    .baner p {

        font-size: 16px;

    }





    .filter-btn {

        padding: 5px 15px;

        font-size: 14px;

    }



    .destination-section h2 {

        font-size: 30px;

        margin-top: 30px;

    }



    .image {

        position: relative;



    }



    .para {

        display: none;

    }



    .para1 {

        display: block;

    }





    .image p {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        padding: 10px 10px;

        background-color: white;

        font-size: 15px;

        font-weight: 500;

        color: black;

        border-radius: 10px;

        text-align: center;

    }





    .image img {

        width: 437px;

        height: 250px;

        padding: 0px 0px;

    }



    .page-btn {

        height: 18px;

        width: 18px;

        margin-left: 5px;

        font-size: 10px;

    }



    .page-pre-btn,

    .page-next-btn {

        padding: 6px 12px;

        font-size: 10px;

    }



    .footer-img {

        width: 150px;

        height: 150px;

    }



    input[type="email"] {

        width: 100%;

        padding: 10px;

    }



  .footer-btn {

        right: 20px;

        padding: 5px 20px;

        font-size: 14px;

    }



    .footer-content-2,

    .footer-content-3 {

        padding: 10px 0px;

    }

}



/* Medium devices (tablets) */

@media (min-width: 768px) and (max-width: 1024px) {


    .navbar-nav {

        background-color: #E45D3F;

        width: 100%;

        margin-left: 0;

        border-radius: 20px;

        font-size: 24px;

    }



    .baner h1 {

        font-size: 50px !important;

        margin-top: 91px;

    }



    .baner p {

        font-size: 20px !important;

    }



    .image img {

        width: 100%;

        height: 300px;

        padding: 0px;

    }



    .image {

        position: relative;



    }



    .image p {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        padding: 10px 10px;

        background-color: white;

        font-size: 20px;

        font-weight: 500;

        color: black;

        border-radius: 10px;

        text-align: center;

    }





    .para {

        display: none;

    }



    .para1 {

        display: block;

    }



    .destination-section h2 {

        font-size: 50px;

    }



    .page-btn {

        height: 35px;

        width: 35px;

    }



    footer {

        text-align: start;

    }



    .footer-img {

        width: 200px;

        height: 200px;

    }



    input[type="email"] {

        width: 100% !important;

    }



   .footer-btn {

        right: 10px;

    }



    .footer-content-2,

    .footer-content-3 {

        padding: 10px 0px;

    }

}



/* Large devices (laptops/desktops) */

@media (min-width: 1025px) and (max-width: 1496px) {




    .navbar-nav {

        width: 70%;

        font-size: 19px;

    }



    .baner {

        height: 100vh;

    }



    .baner h1 {

        font-size: 70px;

        margin-top: 160px;

    }



    .baner p {

        font-size: 18px;

    }





    .destination-section h2 {

        font-family: Italiana;

        font-size: 54px;

        text-align: center;

        margin-top: 50px;

    }



    .image img {

        width: 437px;

        height: 450px;

        padding: 0px;

    }



    .image p {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        padding: 10px 10px;

        background-color: white;

        font-size: 20px;

        font-weight: 500;

        color: black;

        border-radius: 10px;

        text-align: center;

    }





    .footer-img {

        width: 250px;

        height: 250px;

    }



    input[type="email"] {

        width: 100%;

    }



    .footer-btn{

        right: 10px;

    }

}