style.scss

@import 'styler/media-queries';
@import 'styler/typography';
@import 'styler/button';

.hero1 {
    max-width: 100%;
    min-height: 500px;
    &__container {
        max-width: 800px;
        min-height: 500px;
        margin: 0px auto;
    }
}
.hero1 {
    text-align: center;
    margin: 0px 10px;
    @include media-query(tablet) {
        padding: 0px 50px;
    }
    @include media-query(mobile) {
        padding: 0px 25px;
    }
    &__logo {
        @include media-query(mobile) {
            width: 100px;
        }
    }
    &__area1 {
        min-height: 250px;
        padding: 50px 0px;
        p {
            margin-top: -30px;
            @include media-query(tablet) {
                margin-top: -10px;
            }
            @include media-query(mobile) {
                margin-top: 15px;
            }
        }
    }
    &__area2 {
        min-height: 200px;
        margin-top: 100px;
        p {
            padding: 0px 20px;
            @include media-query(tablet) {
                margin-top: -10px;
            }
            @include media-query(mobile) {
                padding: 0px 0px;
            }
        }
    }
}
.btn__container {
    margin-top: 50px;
}
.btn__left {
    margin-right: 7.5px;
    @include media-query(mobile) {
        display: block;
        margin-right: 0px;
    }
}
.btn__right {
    margin-left: 7.5px;
    @include media-query(mobile) {
        display: block;
        margin-left: 0px;
        margin-top: 20px;
    }
}
.hero2 {
    max-width: 1400px;
    min-height: 500px;
    display: flex;
    flex-wrap: wrap;
    margin: 50px auto;
    &__area1 {
        flex: 1;
        min-height: 150px; 
        text-align: center;
        @include media-query (tablet) {
            flex: 1 992px;
        }
        img {
            width: 95%;
        }
    }
    &__area2 {
        flex: 1;
        min-height: 500px; 
        @include media-query (tablet) {
            flex: 1 992px;
        }
    }
}
.feature {
    padding: 0px 60px;
    margin-top: 50px;
    @include media-query (mobile) {
        padding: 0px 30px;
        text-align: center;
    }
    p {
        margin-top: -15px;
    }
}
.hero3 {
    max-width: 1000px;
    margin: -50px auto 0px auto;
    text-align: center;
    &__heading {
        min-height: 150px;
        padding: 50px 120px;
        @include media-query (tablet) {
            padding: 20px 120px;
        }
        @include media-query (tablet-mini) {
            padding: 20px 60px;
        }
        @include media-query (mobile) {
            padding: 20px 30px;
        }
    }
    &__image {
        min-height: 0px;
        padding: 40px 0px;
        img {
            width: 95%;
        }
    }
}
.hero4 {
    max-width: 1200px;
    margin: 0px auto;
    text-align: center;
    &__heading {
        padding: 20px 40px;
    }
    &__features {
        display: flex;
        padding: 30px 0px;
        margin-top: -20px;
        @include media-query (tablet) {
            flex-wrap: wrap;
        }
    }
}
.icons {
    padding: 20px;
    flex: 1;
    @include media-query (tablet-mini) {
        flex: 1 262px;
    }
    &__feature3 {
        @include media-query (tablet-mini) {
            padding: 10px 150px;
        }
        @include media-query (large-mobile) {
            padding: 10px 20px;
        }
    }
}
.hero5 {
    max-width: 1200px;
    margin: 50px auto;
    display: flex;
    text-align: center;
    @include media-query(tablet) {
        flex-wrap: wrap;
    }
}
.sponsor {
    padding: 30px 0px;
    flex: 1;
    @include media-query(tablet) {
        flex: 1 240px;
    }
}
.hero6 {
    max-width: 700px;
    margin: 50px auto;
    text-align: center;
    padding: 50px 20px 100px 20px;
    &__heading {
        padding: 0px 20px;
    }
}
footer {
    max-width: 100%;
    background-color: darken($color-accent-5, $amount: 7);
    min-height: 100px;
    a:hover {
        color: $color-accent-1;
    }
}
.foot-container {
    display: flex;
    max-width: 1200px;
    margin: 0px auto;
    padding: 50px 0px 30px 0px;
    @include media-query(tablet-mini) {
        flex-wrap: wrap;
        text-align: center;
    }
}
.foot {
    padding: 20px;
    &__foot1, &__foot2, &__foot3, &__foot4 {
        flex: 1;
        display: flex;
        flex-direction: column;
        img {
            width: 60px;
        }
        @include media-query(tablet-mini) {
            flex: 1 1 400px;
            margin-top: -35px;
            a {
                padding-top: 10px;
            }
            img {
                padding-bottom: 20px;
                align-self: center;
            }
        }
    }
    &__foot5 {
        flex: 2;
        text-align: right;
        padding-top: 40px;
        img {
            margin-left: 20px;
        }
        @include media-query(tablet) {
            flex: 1;
            padding-top: 20px;
            img {
                margin-left: 10px; 
            }
        }
        @include media-query(tablet-mini) {
            flex: 1 400px;
            text-align: center;
            img {
                margin-left: 20px; 
                padding-right: 10px;
            }
        }
    }
}
.copyright {
    text-align: center;
    min-height: 50px;
    padding: 0px 50px;
}