body, html {background-color: #f4f0ec;}
main {padding-top: 0;}
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");

/** HERO **/
#hero {height: 100vh;}
#hero .hero-section {display: flex; justify-content: center; text-decoration: none!important;}

#hero .hero-section>.title {
    color: #FFF!important; text-shadow: 0 0 20px rgb(0 15 30 / 20%), 0 0 3px rgb(0 15 30 / 30%); text-align: center;
}

@media only screen and (min-width: 576px) {
    #hero {background: url("hero-images/hero-image.jpg") no-repeat center top / cover; position: relative;}
    #hero-images {width: 100%; height: 100%; position: absolute; display: block;}
    #hero-images .hero-images-section {width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; display: none;}
    #hero-images #hero-1 {background: url('hero-images/designed.jpg') no-repeat center top / cover;}
    #hero-images #hero-2 {background: url('hero-images/passion.jpg') no-repeat center bottom / cover;}
    #hero-images #hero-3 {background: url('hero-images/details.jpg') no-repeat center top / cover;}
    #hero-desc {height: 100%; width: 100%; position: absolute;}
    #hero-desc .row, #hero-desc .hero-section {height: 100%;}
    #hero-2 {border-left: 1px solid #FFF; border-right: 1px solid #FFF;}
    #hero-desc .hero-section {align-items: flex-end; padding-bottom: 50px;}
    #hero-desc .hero-section>.title {font-size: 2rem;}
    @-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}} @keyframes fade-in{0%{opacity:0}100%{opacity:1}}
    @-webkit-keyframes fade-out{0%{opacity:1}100%{opacity:0}} @keyframes fade-out{0%{opacity:1}100%{opacity:0}}
}

@media only screen and (min-width: 576px) and (max-width: 992px) {
    #hero .hero-section>.title {font-size: 1.65rem;}
}

@media only screen and (max-width: 576px) {
    #hero .row {height: calc(100% - 50px); margin-top: 50px;}
    #hero-images {display: none;}
    #hero-desc #hero-1 {background-image: url("hero-images/designed.jpg")}
    #hero-desc #hero-2 {background-image: url("hero-images/passion.jpg"); border-top: 1px solid #FFF; border-bottom: 1px solid #FFF;}
    #hero-desc #hero-3 {background-image: url("hero-images/details.jpg")}
    #hero .hero-section {height: 33.33%; align-items: center; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative;}
    #hero .hero-section>.title {font-size: 2rem;}
}

/** SECTIONS **/
#about, #contact {display: flex; justify-items: center;}
section .title {margin-bottom: 30px;}

#contact {flex-direction: column;}
#contact #wa-btn {height: 50px;}
#contact a {color: #000!important; text-decoration: none!important; }
#contact #direct a {display: block; margin: 40px 0; font-size: 2rem;}
#contact #social .nav-item {padding: 0 40px 0 0; margin: 0;}
#contact #social .nav-item a {font-size: 38px;}

@media only screen and (min-width: 576px) {
    section .container-fluid {padding: 0;}
    #about, #contact {display: flex; align-items: center; justify-content: center; text-align: left; padding: 120px;}
    section .title {font-size: 3rem;}
    .about-text {font-size: 1.35rem; line-height: 1.5;}
}

@media only screen and (max-width: 576px) {
    #about, #contact {display: flex; justify-content: center; text-align: left; padding: 50px 0;}
    section .title {font-size: 2.5rem;}
    .about-text {font-size: 1.1rem; line-height: 1.7;}
    #contact #direct a {font-size: 1.2rem;}
}