.banner {
    background-image: url('../img/home/banner.png');
    background-position: top 25% right 0;
    background-size: cover;
    width: 100%;
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
    .banner .banner-text {
        padding-left: 80px;
    }
    .banner h4 {
        padding-bottom: 15px;
    }
    .banner .h2 {
        color: #108080;
    }
    .banner button {
        font-size: 20px;
        font-weight: 700;
    }
        .banner button:hover {
            background-color: #108080;
            border-color: #F0F0F0;
            color: #F0F0F0;
        }
.products {
    text-align: center;
    position: relative;
}
    .products .products-container {
        display: flex;
        justify-content: space-between;
        overflow-x: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }
        .products:hover .arrow {
            visibility: visible;
            opacity: 1;
        }
        .products .arrow {
            position: absolute;
            visibility: hidden;
            background: transparent;
            width: 40px;
            height: 40px;
            line-height: 40px;
            border: none;
            z-index: 99;
            top: 50%;
            cursor: pointer;
            opacity: 0;
            transition: visibility 0.25s linear,opacity 0.25s linear;
        }
            .products .arrow i {
                font-size: min(50px, max(4vw, 30px));
                color: #F0F0F0;
                -webkit-text-stroke: 1.1px #1a1a1a;
            }
            .products .arrow.a-left {
                left: 60px;
            }
            .products .arrow.a-right {
                right: 60px;
            }
        .products .product {
            position: relative;
            width: 33%;
            min-width: 250px;
            padding: 10px 12px;
            margin: 15px;
            border: 1px solid #CDE6D2;
            border-radius: 5px;
            cursor: pointer;
        }
            .products .product img {
                width: 100%;
            }
            .products .product .description {
                text-align: start;
                padding: 10px 0;
            }
                .products .product .description span {
                    color: #606060;
                    font-size: 12px;
                }
                .products .product .description h5 {
                    color: #1a1a1a;
                    font-size: 14px;
                    padding-top: 7px;
                }
                .products .product .description p {
                    display: inline;
                    font-weight: normal;
                }
                .products .product .description i {
                    color: #F5B419;
                    font-size: 12px;
                    font-weight: 700;
                }
                .products .product .description h4 {
                    font-size: 16px;
                    font-weight: 700;
                    padding-top: 7px;
                }
            .products .product .cart {
                position: absolute;
                bottom: 20px;
                right: 11px;
                width: 40px;
                height: 40px;
                line-height: 40px;
                background-color: #F0F0F0;
                font-weight: 600;
                color: #1a1a1a;
                border-radius: 50px;
                transition: .3s;
            }
                .products .product .cart:hover {
                    color: #108080;
                }
            .products .product:hover {
                box-shadow: 0 5px 10px rgba(0,0,0,0.08);
            }
            
.banner-box {
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    cursor: pointer;
}          
    .banner-box:hover {
        box-shadow: 0 7px 16px 0 rgba(0,0,0,.2),0 1px 3px 0 rgba(0,0,0,.1);
        transition: box-shadow .4s ease-out;
    }
.sm-banner, .banner3 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
    .sm-banner .banner-box {
        width: 42vw;
        height: 50vh;
        padding: 2.25vw;
    }
    .sm-banner .banner-box:nth-child(1) {
        background-image: url('../img/home/b17.jpg');
    }
    .sm-banner .banner-box:nth-child(2) {
        background-image: url('../img/home/b10.jpg');
    }
        .sm-banner .banner-box h4 {
            color: #fff;
            font-size: 24px;
            font-weight: 300;
        }
        .sm-banner .banner-box h2 {
            color: #fff;
            font-size: 36px;
            font-weight: 800;
        }
        .sm-banner .banner-box span {
            color: #fff;
            font-size: 16px;
            font-weight: 500;
            padding-bottom: 1.1vw;
        }
        .sm-banner .banner-box button:hover {
            background-color: #108080;
        }
.banner3 {
    /* .sm-banner */
    padding: 0 6vw;
}
    .banner3 .banner-box {
        min-width: 30%;
        height: 30vh;
        padding: 1.5vw;
        margin-bottom: 20px;
    }
        .banner3 .banner-box:nth-child(1) {
            background-image: url('../img/home/b7.jpg');
        }
        .banner3 .banner-box:nth-child(2) {
            background-image: url('../img/home/b4.jpg');
        }
        .banner3 .banner-box:nth-child(3) {
            background-image: url('../img/home/b18.jpg');
        }
            .banner3 .banner-box h2 {
                color: #fff;
                font-size: 28px;
                font-weight: 900;
            }
            .banner3 .banner-box h3 {
                color: #ef3636;
                font-size: 20px;
                font-weight: 800;
            }
.explore-banner {
    background-image: url('../img/home/explore.png');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 40vh;
}
    .explore-banner h4 {
        color: #fff;
        font-size: 20px;
    }
    .explore-banner h2 {
        color: #fff;
        font-size: 36px;
        padding: 2vh 0;
    }
    .explore-banner h2 span {
        color: #ef3636;
    }
    .explore-banner button:hover {
        background-color: #108080;
    }

.feature, .newsletter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
    .feature .feature-box {
        text-align: center;
        width: 180px;
        padding: 25px 15px;
        border: 1px solid #CDE6D2;
        box-shadow: 20px 20px 35px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        margin: 15px 0;
    }
        .feature .feature-box img {
            width: 100%;
            margin-bottom: 10px;
        }
        .feature .feature-box h6 {
            display: inline-block;
            line-height: 1;
            padding: 8px 8px;
            
        }
        .feature .feature-box:hover {
            transform: scale(1.1);
            transition: .5s;
            box-shadow: 10px 10px 50px rgba(70, 60, 220, 0.1);
        }

.newsletter {
    /* .feature */
    background-color: #051E41;
}
    .newsletter .text h4 {
        color: #fff;
        font-size: 32px;
        font-weight: 700;
    }
    .newsletter .text p {
        color: #828CA0;
        font-size: 16px;
        font-weight: 600;
    }
    .newsletter .form-container {
        display: flex;
        width: 40%;
    }
        .newsletter .form-container form {
            display: flex;
            width: 100%;
        }
        .newsletter .form-container form input {
            font-size: 16px;
            height: 3em;
            width: 100%;
            padding: 0 1.25em;
            border: 0;
            border-radius: 5px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            outline: none;
        }
        .newsletter .form-container form button {
            background-color: #108080;
            color: #fff;
            white-space: nowrap;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;  
        }
            .newsletter .form-container form button:hover {
                background-color: #fff;
                color: #108080;
            }

/* Large devices (laptops/desktops, 1024px and down) */
@media screen and (max-width:1024px) {
    .products .products-container {
        overflow-x: scroll;
        scrollbar-width: none;
    }
    .products:hover .arrow {
        visibility:hidden;
        opacity: 0;
    }

    .banner3 .banner-box {
        width: 31%;
    }

    .feature {
        padding: 40px 5vw;
    }
        .feature .feature-box {
            width: 130px;
            margin: 0 10px;
        }
}

/* Medium devices (tablets, 768px and down) */
@media screen and (max-width:768px) {
    .banner {
        background-position: top 30% right 30%;
        height: 92vh;
        padding: 0 40px;
    }
        .banner .banner-text {
            padding-left: 0;
        }
            .banner .banner-text h2 {
                font-size: 40px;
            }

    .sm-banner .banner-box {
        width: 100%;
        height: 35vh;
    }
    .sm-banner .banner-box:nth-child(1) {
        margin-bottom: 4vh;
    }

    .banner3 {
        padding: 0 5vw;
    }


    .explore-banner {
        height: 20vh;
    }

    .feature {
        justify-content: center;
    }
        .feature .feature-box {
            width: 180px;
            margin: 15px;
        }
    
    .newsletter .form-container {
        width: 100%;
    }
}

/* Small devices (phones, 480px and down) */
@media screen and (max-width:480px) {
    .banner {
        background-position: 55%;
        height: 50vh;
        padding: 0 20px;
    }

    .banner3 .banner-box {
        width: 100%;
    }

    .explore-banner {
        height: 40vh;
    }
    
    .feature {
        justify-content: space-around;
    }
        .feature .feature-box {
            width: 150px;
            margin: 0 0 15px 0;
        }

    .newsletter .form-container {
        width: 100%;
    }
}