.contact{
    margin-top: 100px;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 0px 6%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.top-background{
    background: url("../src/assets/background-contact.jpg") no-repeat center center/cover;
}

a{
    text-decoration: none;
}
.side1{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.side1 .wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    background: #008000;
    background: url("../src/assets/contact_us.webp") no-repeat center center/cover;
    height: 25rem;
}
.side1 h1{
    font-size: 3rem;
    font-weight: normal;
    color: #fff
}

.side1 p{
    color: #fff;
    line-height: 1.5;
}
.side2{
    text-align: left;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #0b1c59;
}

.side2 h1{
    font-size: 3rem;
    font-weight: normal;
    color: #fff;
}

.side2 p{
    line-height: 1.6;
    color: #F3F3F3;
}
.tip{
    margin-top: 30px;
    display: flex;
    color: #F3F3F3;
}
.tip i{
    font-size: 24px;
    margin-top: 5px; 
    margin-right: 20px;
}

.tip p{
    color: #F3F3F3;
}

.info-text a{
    position: relative;
}
.info-text p:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 50%;
    position: absolute;
    background: #ffffff;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}
.info-text a:hover p:after {
    width: 100%;
    left: 0;
}  
  
.social-medias{
    margin-top: 50px;
    display: flex;
    gap: 20px;
}

.social-medias i{
    color: #F3F3F3;
    font-size: 18px;
}

.social-medias a{
    transition: 0.4s ease;
}

.social-medias a:hover{
    transform: translateY(-3px);
}



@media screen and (max-width: 768px) {
    .contact{
        grid-template-columns: repeat(1,1fr);
        grid-gap: 20px;
        padding: 0px 3%;
    }

    .side1 .wrapper{
     height: 30rem;
    }
}


@media screen and (max-width:425px) {
    .side2{
        text-align: left;
        padding: 2rem;
    }
}