@import './styles/fonts.css';
@import './styles/typography.css';
@import './styles/sections/header.css';
@import './styles/sections/hero.css';
@import './styles/sections/why.css';
@import './styles/sections/about.css';
@import './styles/sections/testimonials.css';
@import './styles/sections/pricing.css';
@import './styles/sections/faq.css';
@import './styles/sections/footer.css';

#hero {
    background-image: url('./assets/images/hero/hero.png');
    min-height: 868px;
    background-position: 25% 26%;
    /*padding-left: 60px;*/
    background-size: cover;
}
#testimonials {
    background-image: url('./assets/images/testimonials/background.png');
    background-size: cover;
    background-position: 25% 11%;
    height: 720px;
}
#pricing {
    margin-top: 0;
    padding-top: 100px;
    background-image: url('./assets/images/pricing/background.png');
    min-height: 860px;
}
.text-accent {
    color: #B39DDB;
}

section {
    margin-top: 130px;
}

header, main, footer {
    color: #424242;
}

button {
    background-color: #3E8E7E;
    border-radius: 10px;
}
button:hover {
    background-color: #2F6E61;
}
@media (max-width: 640px) {
    #hero {
        background-image: url('assets/images/hero/mobile-background.png');
        height: 789px;
    }
    button {
        padding: 17px 31px;
    }
    section {
        margin-top: 100px;
    }
    #testimonials {
        background-image: url('./assets/images/testimonials/mobile-background.png');
        height: 616px;
    }
    #pricing {
        height: auto;
    }
}