@import url('../css/base.css');

.banner-section {
    background: url('../images/top-bg-img.svg') no-repeat;
    background-position: top left;
}

.banner-side-img {
    width: 460px;
    height: 84%;
    background: url('../images/bottom-bg-img.svg') no-repeat; 
    background-size: cover;
}

@media (max-width: 1240px) {
    .banner-section {
        background-size: 4%;
    }

    .default-btn {
        font-size: 12px;
        padding: 7px 20px;
    }

    .banner-section h1 {
        font-size: 30px;
    }

    .banner-section h1 span {
        font-size: 24px;
    }

    .content {
        font-size: 13px;
        line-height: 26px;
        margin-bottom: 12px;
    }

    .store-btn img {
        height: 44px;
    }

    .banner-side-img {
        width: 40%;
        height: 84%;
        background-size: cover;
    }

    .banner-hand-img-wrapper {
        width: 40%;
    }
}

@media (max-width: 991px) {
    .banner-side-img {
        background: none; 
    }
    .banner-section {
        padding-top: 100px;
        background-size: 8%;
    }

    .banner-section h1 {
        font-size: 44px;
    }
}