:root{
    --danger-red:#c51b33;
    --text-color-light:#ffffff;
    --text-color-dark:#342b46;
    --IHCD-blue:#02abee;
}

.contact-page{
    width: 80%;
   margin: auto !important;
   padding: 30px;
   
}
.contacts{
    width: 50%;
    padding: 50px;
    margin: auto;
    font-size: larger;
}
.contacts h3{
    color: var(--IHCD-blue);
    font-size: 40px;
}
.contacts ul{
    list-style-type: none;
}
#contacts a{
    color: var(--text-color-dark);
}

/* Form */
.offer{
    color: var(--text-color-light);
    background-color:var(--IHCD-blue) ;
    display: flex;
    justify-content: space-evenly;
    border-radius: 15px;
    box-shadow: 20px 12px 99px -30px rgba(0,0,0,1);
    padding: 30px;
}
.offer-col{
    width: 80%;
}
.offer-col h2{
    font-size: 60px;
    text-align: center;
}
.form-group{
    display: flex;
    flex-direction: column;
}
#offer-form{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding: 20px;
    gap:15px;
    width: 100%; 
}

#offerform-text{
    height: 150px;
}

#offerform-subject{
    display: flex;
    flex-direction: row !important;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.col-form-label:after {
    content: " *";
    color: var(--danger-red);
}
.offset-sm-2{
    margin: 0px;
}
.custom-control-label{
    color: var(--text-color-light) !important;
}
.custom-control-label a:after{
    content: "*";
    color: var(--danger-red);
}
.send{
    border-radius: 15px;
}

@media only screen and (max-width:1100px){
    .contact-page{
        width: 100%;
     }
     .offer-col h2{
        font-size: 40px;
        text-align: center;
    }
}
@media only screen and (max-width:680px){
    .contacts{
        width: 100%;
        padding: 10px;
    }
    .contact-page{
        padding: 0px;
    }
 .offer{
    margin: 0px;
    padding: 10px;
    width: 100%;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
 }
 .offer-col{
    width: 100%;
 }
 .offer-col h2{
    font-size: 32px;
    text-align: center;
}
 #offerform-subject{
    flex-direction: column !important;
 }
}