/* @font-face {font-family:'Locatro'; font-style:normal; font-display: swap; font-weight: 400; src:url(/fonts/Locatro-Italic.ttf)} */
@font-face {font-family:'Locatro'; font-style:normal; font-display: swap; font-weight: 400; src:url(/fonts/Locatro.ttf)}
@font-face {font-family:'Raleway'; font-style:normal; font-display: swap; font-weight: 600; src:url(/fonts/Raleway-SemiBold.ttf)}




@media screen and (min-width:0px){
    
    *, 
    *::before, 
    *::after{font-family: 'Locatro', sans-serif; margin: 0rem; padding: 0rem; box-sizing: border-box;}

    html{font-size: 62.5%;}

    h1{font-size: 3.4rem;}

    #hero_section{width: 100%; min-height: 100vh; min-height: 100svh; padding: 4rem 0rem 0rem; background: url(/images/bg-hero.webp) no-repeat top/100%; background-size: cover; position: relative; overflow: hidden; }
    #hero_section::before{content: ''; position: absolute; bottom: -24rem; left: -10.3rem; width: 20rem; height: 51rem; background: url(/images/bg-planta-hero.webp) no-repeat top/100%; z-index: 1;}
    #hero_section::after{content: ''; position: absolute; bottom: -12.9rem; right: -8.6rem; width: 20.2rem; height: 39.4rem; background: url(/images/bg-cactus-hero.webp) no-repeat top/100%; z-index: 1;}
    #hero_section .hero_content{width: 100%; max-width: min(90%, 120rem); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; row-gap: 2rem; margin: 0rem auto; position: relative; z-index: 2;}
    #hero_section .hero_content .social_links{width: fit-content; display: flex; flex-direction: column-reverse; align-items: center; row-gap: 1rem;}
    #hero_section .hero_content .social_links .links{display: flex; gap: 1.8rem;}
    #hero_section .hero_content .social_links .links a{width: 3.2rem; height: 3.2rem; display: flex; justify-content: center; align-items: center; border-radius: 100%; background: #D20D48;}
    #hero_section .hero_content .social_links .links a:hover{background: #B20C3A;}
    #hero_section .hero_content .social_links span{font-family: 'Raleway', sans-serif; font-size: 1.2rem; font-weight: 600; line-height: 1.4rem; letter-spacing: 0.11em; text-transform: uppercase; color: #FFFFFF;}
    
    #hero_section .hero_content .info_content{display: flex; flex-direction: column; align-items: center; row-gap: 2.2rem;}
    #hero_section .hero_content .info_content figure{display: flex;}
    #hero_section .hero_content .info_content figure img{width: 100%; max-width: 23.6rem;}
    #hero_section .hero_content .info_content .content{display: flex; flex-direction: column; align-items: center; }
    #hero_section .hero_content .info_content .content h1{font-weight: 400; color: #D4A513;}
    #hero_section .hero_content .info_content .content p{font-size: 2.6rem; font-weight: 400; text-align: center; color: #FAF9E7;}
    #hero_section .hero_content .info_content .content p.contact{display: flex; flex-direction: column; gap: 2rem; padding-top: 4.3rem; color: #D7285D;}
    #hero_section .hero_content .info_content .content p.contact a{display: flex; column-gap: 1rem; color: #FAF9E7; text-decoration: none;}
    #hero_section .hero_content .info_content .content p.contact a:hover{text-decoration: underline;}
    
    #hero_section .hero_content .info_content .message{padding-top: 2.8rem;}
    #hero_section .hero_content .info_content .message svg{width: 28rem; height: 100%;}

}

@media screen and (min-width:768px){

    h1{font-size: 6.4rem;}
    #hero_section::before{width: 34rem; height: 51rem;}
    #hero_section::after{right: -14.6rem; width: 35.2rem; height: 50.4rem;}


    #hero_section .hero_content .info_content figure img{max-width: 35.6rem;}
    #hero_section .hero_content .info_content .content p{font-size: 3.6rem;}
    #hero_section .hero_content .info_content .content p.contact{flex-direction: row;}

    #hero_section .hero_content .info_content .message{padding-top: 5.8rem;}








}
@media screen and (min-width: 1024px){
    #hero_section{padding: 0rem;}
    #hero_section::before{width: 46rem; height: 63rem;}
    #hero_section::after{width: 44.2rem; height: 66.4rem;}

    #hero_section .hero_content{display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 2rem;}
    #hero_section .hero_content .social_links{flex-direction: column; align-items: start; row-gap: 2.9rem;}
    #hero_section .hero_content .social_links .links{flex-direction: column;}
    #hero_section .hero_content .social_links span{transform: rotate(-90deg) translate(-2rem,-2rem)}

    #hero_section .hero_content .info_content figure img{max-width: 43.6rem;}

}
@media screen and (min-width: 1440px){


    #hero_section .hero_content .info_content figure img{max-width: 50.6rem;}

}