body {
    animation-name: opacityCon;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-fill-mode: both;
}

@keyframes opacityCon {
    from {
        opacity: 0;
    }

    to {
        opacity: 75%;
    }
}

.containerContact {

    margin: 4rem 1rem 1rem;


}

.conatainerFlex {
    background-color: rgb(31, 31, 31);
    height: 80vh;
    padding: 1rem;
    border-radius: 25px;
}

.firstImg {
    display: none;
}

.boxText {

    position: relative;
    width: 100%;
    height: 70%;
    border-radius: 20px;
}

.boxText img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    opacity: 0.7;
}

.textCon {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.textCon h3 {
    font-size: 3rem;
    font-weight: 200;
    letter-spacing: 0.14em;
    color: rgb(222, 222, 222);
}

.textCon h4 {
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.14em;
    color: rgb(222, 222, 222)
}

.textCon p.text {
    margin-top: 1rem;
    font-size: 0.7rem;
    font-weight: 200;
    color: rgb(222, 222, 222)
}

.textCon p.form {
    margin-top: 1rem;
    font-size: 0.7rem;
    font-weight: 200;
    color: rgb(222, 222, 222)
}

.textCon p.form:nth-last-child(1) {
    margin-top: 0;
}

.boxIcon {

    width: 100%;
    height: 28%;
    margin-top: 1rem;
    background: linear-gradient(to bottom, #ed9358af 0%, rgba(0, 0, 0, 1) 85%);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iconBig {

   width: 80px;
    height: 80px;

}

.iconBigT {
   width: 70px;
   height: 70px;
    
}

@media (min-width: 390px) and (max-width: 630px) {

    .iconBig {


       width: 115px;
       height: 115px;
    }

    .iconBigT  {

       width: 100px;
       height: 100px;
    }

    .textCon h3 {
        font-size: 3.5rem;
        min-width: 320px;

    }

    .textCon h4 {
        font-size: 1.2rem;
    }

    .textCon p.text {
        font-size: 0.9rem;

    }

    .textCon p.form {
        font-size: 0.9rem;
    }

}

@media (min-width: 631px) {

    .containerContact {

        margin: 4rem 1rem 1rem;
        background-color: rgb(31, 31, 31);
        height: 80vh;
        padding: 1rem;
        border-radius: 25px;
        display: flex;
        gap: 1rem;

    }

    .conatainerFlex {

        height: 100%;
        padding: 0rem;
        border-radius: 0px;
        width: 50%;

    }

    .firstImg {
        display: block;
        width: 50%;

    }

    .firstImg img {
        border-radius: 20px;
    }

    .boxText img {
        display: none;
    }

    .textCon {
        position: relative;
        background-color: black;
        border-radius: 20px;
        height: 100%;
        display: grid;
        justify-content: center;
        align-content: center;
        text-align: left;
        padding-left: 1rem;
    }

    .boxIcon {
        height: 27.5%;
        background: linear-gradient(to bottom, #a45e2f 0%, rgba(0, 0, 0, 1) 85%);
    }

}

@media (min-width: 1024px) {
    .textCon h3 {
        width: 60%;
        margin: auto;
        font-size: 4rem;
    }

    .textCon h4 {
        width: 60%;
        margin: auto;
        font-size: 1.7rem;
    }

    .textCon p.text {
        width: 60%;
        margin: 1rem auto;
        font-size: 1rem;
    }

    .textCon p.form {
        width: 60%;
        margin: auto;
        font-size: 1rem;
    }

}