html{
    height: 100vh;
}

.keywords{
    position: absolute;
    left: -100%;
}

.section1{
    width: 100%;
    height: 105vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: url("../img/bgdesk/4.png")no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}
.section1::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 105%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}
.section1::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 40%);
    z-index: 1;
    clip-path: polygon(0 0, 30% 0, 60% 100%, 0% 100%);
}

.section1 h1 {
    position: absolute; left: -100%;
}

.section1 .cta{
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translate(-50%, 50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 3;
    align-self: center;
    transition: .4s;
}
.section1 .cta:hover{
    scale: 1.01;
}
.section1 .cta a{
    color: white;
    font-size: 1.3em;
    font-weight: 400;
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    transition: .6s;
    background-color: #452c2f7e;
    backdrop-filter: blur(4px);
    animation: piscar 3s ease-in-out infinite;
}
.section1 .cta a:hover{
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.6);
}
@keyframes piscar{
    0%{        
        background-color: #c49b62c0;;
    }
    50%{
        background-color: #452c2f7e;
    }
    100%{
        background-color: #c49b62c0;;

    }
}


.box_text{
    position: absolute;
    top: 28%;
    left: 15px;
    width: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    padding: 1%;
    color: white;
    /* background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2px); */
    z-index: 3;
    letter-spacing: 2px;
    border-radius: 9px;
    font-family: Poppins;
}

.box_text h2{
    font-size: 20px;
    text-align: justify;
}

.box_text p{
    font-size: 13px;
    font-weight: 200;
}
.section1 .seta img{width: 20px;}
.section1 .seta{
    width: 20px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
    bottom: 10vh;
    animation: cresce 2s linear infinite;
    z-index: 2;
}
@keyframes cresce {
    0%{
        transform: translateY(0);
    }

    50%{
        transform: translateY(5px);
    }
    
    100%{
        transform: translateY(0);
    }
}

@media screen and (max-width:800px){

    .section1{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-image: url("../img/bgmob/13.png");
        background-position: center top;
        background-size: cover;
        background-attachment: fixed;
        transition: .4s;
        padding-bottom: 70px;
        gap: 50px;
    }
    .section1::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 105%;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 1;
    }
    .bannermob{
        width: 100%;
        height: 50%;
        background: url("../img/2.png")no-repeat center center;
        background-size: contain;
        margin-top: 40vw;
    }

    .section1::after{content: unset;}

    .box_text{
        position: relative;
        top: unset;
        /* left: 0; */
        left: unset;
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 15px;
        padding: 2%;
        color: white;
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(2px);
        z-index: 3;
        letter-spacing: 2px;
        border-radius: 5px;
        border: 1px solid #cdab7c9c;
        background-size: 480px;
        background-repeat: no-repeat;
        background-position: center;
    }
    .box_text h2{
        font-size: 17.5px;
        line-height: 30px;
        text-align: unset;
    }
    .box_text p{
        font-size: 14px;
        text-align: justify;
        letter-spacing: 1px;
        line-height: 22px;
    }

    .section1 .cta{
        position: relative;
        left: unset;
        bottom: unset;
        transform: unset;
        -ms-transform: unset;
        z-index: 3;
        align-self: unset;
        transition: .4s;
    }

    .section1 .seta{
        width: 20px;
        position: absolute;
        left: 48%;
        bottom: 20%;
        transform: translate(-50%, 50%);
        animation: cresce 2s linear infinite;
        z-index: 2;
    }

}