html,

body {

    scroll-behavior: smooth;

    position: relative;

    height: 100%;

}



body {

    background: #eee;

    font-size: 14px;

    color: #fff;

    margin: 0;

    padding: 0;

    font-family: "Poppins", sans-serif;

    font-style: normal;

    font-weight: 500;

    overflow-x: hidden;

}



.container-top {

    position: fixed;

    bottom: 2rem;

    display: flex;

    align-items: flex-end;

    width: 70px;

    justify-self: end;

    justify-content: flex-end;

    z-index: 1;

    right: 1rem;

    

}



.top {

    display: none;

    position: sticky;

    bottom: 20px;

    margin-right: 10px;

    place-self: end;

    margin-top: calc(100vh + 50px);

    /* visual styling */

    width: 60px;

    aspect-ratio: 1;

    background: #ff8a243f;

    border-radius: 10px;

}

.top:hover {

    background: #ff8a2470;

}

.top:before {

    content: "";

    position: absolute;

    inset: 30%;

    transform: translateY(20%) rotate(-45deg);

    border-top: 5px solid rgb(255, 255, 255);

    border-right: 5px solid rgb(255, 255, 255);

}



.container-fluid {

    position: relative;

    display: flex;

    justify-content: center;
    overflow: hidden;

}



.swiper {

    width: 100%;

    height: 100%;

}

.swiper-slide img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.swiper-slide {

    text-align: center;

    font-size: 18px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

}

.swiper-pagination-bullet {

    transition: width 0.15s;

    width: 10px;

    height: 10px;

    line-height: 20px;

    font-size: 12px;

    color: rgb(255, 255, 255);

    opacity: 1;

    background: rgba(255, 255, 255, 0.555);

    border-radius: 6px;

}

.swiper-pagination-bullet-active {

    width: 20px !important;

    transition: width 0.15s;

    color: #fff;

    background: #ffffff;

}

.swiper-button-next {

    right: 210px;

}



.swiper-button-prev {

    left: 210px;

}



.swiper-button-next {

    background-image: url(/image/Vector.png);

    background-repeat: no-repeat;

    background-size: 100% auto;

    background-position: center;

    z-index: 2;

    width: 30px;

    height: 30px;

}

.swiper-button-next:hover {

    filter: opacity(60%);

}

.swiper-button-prev {

    background-image: url(/image/Vector2.png);

    background-repeat: no-repeat;

    background-size: 100% auto;

    background-position: center;

    z-index: 2;

    width: 30px;

    height: 30px;

}

.swiper-button-prev:hover {

    filter: opacity(60%);

}

.swiper-button-next:hover {

    filter: opacity(60%);

}

.swiper-button-prev::after {

    display: none;

}

.swiper-button-next::after {

    display: none;

}

.btn {

    padding: 5px;

    min-width: 11rem;

    border-radius: 30px;

    font-weight: 700;

    font-size: 16px;

    box-shadow: 4px 4px 5px rgba(18, 69, 200, 0.5);
    padding: 0.3rem;
    color: black;
    cursor: pointer;

}



/* modal */

.modal {

    display: none; /* Hidden by default */

    position: fixed; /* Stay in place */

    z-index: 3; /* Sit on top */

    padding-top: 100px; /* Location of the box */

    left: 0;

    top: 0;

    width: 100%; /* Full width */

    height: 100%; /* Full height */

    overflow: auto; /* Enable scroll if needed */

    background-color: rgb(0, 0, 0); /* Fallback color */

    background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */

}

/* Modal Content (Image) */

.modal-content {

    margin: auto;

    display: block;

    width: 20%;

    max-width: 700px;

    position: absolute;

    top: 50%;

    bottom: 50%;

    left: 0;

    right: 0;

}



@keyframes zoom {

    from {

        transform: scale(0);

    }

    to {

        transform: scale(1);

    }

}



/* The Close Button */

.close {

    position: absolute;

    top: 15px;

    right: 35px;

    color: #f1f1f1;

    font-size: 40px;

    font-weight: bold;

    transition: 0.3s;

}



.close:hover,

.close:focus {

    color: #bbb;

    text-decoration: none;

    cursor: pointer;

}



/* 100% Image Width on Smaller Screens */

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

    .modal-content {

        width: 100%;

    }

    .background-layout {

        display: none;

    }

}