/*banner with 2 column and 2 container insider*/
.contact_section {
    display: flex;
    max-width: 1400;
    width: 100%;
    height: 600px;
    color: #fff; 
    background-color: #000000;
    overflow: hidden;
}
.contactcol1 {
    width: 55%;
    padding: 20px; /* Adjust padding as needed */
    display: flex;
    justify-content: center; 
    align-items: center;
    z-index: 2;
}
.contactcol2 {
    width: 45%;
    padding-top: 20px;
    display: flex;
    background-color: none;
    background-color: #000000;
    justify-content: center; 
    align-items: center; 
}
.contactcontrainer {
    width: 60%;
    box-sizing: border-box;
}

.contactcontrainer h2{
    font-size: 30px;
    font-weight: 600;
}
.contactcontrainer h1{
    font-size: 110px;
    font-weight: 600;
    margin-left: 30px;
    margin-top: 0px;
    margin-bottom: 0px;
    letter-spacing: 0px;
}

.formcontrainer {
    width: 70%;
    padding: 20px; 
    box-sizing: border-box;
    border-radius: 20px ;
    border-color: #000000;
    background: #181a1c;
    z-index: 2;
}

/***/
.contact-left{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
    padding: 15px;
}
.contact-left p{
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 13px;
}

/**checkbox option selection*/
.option-boxes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
  
.option {
    border: 2px solid #ffffff94;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.option input {  display: none;} /*remove tickbox*/
.option span {
    display: inline-block;
    padding: 10px;
    font-size: 14px;
    color: #ffffff94;
    transition: background-color 0.3s, color 0.3s;
}
.option input:checked + span {
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    border: none;
}

.contact-inputs{
    width: 100%;
    height: 30px;
    border: none;
    border-bottom: 2px solid #ffffff94;
    outline: none;
    background-color: transparent;
    font-weight: 500;
    color: #666;
}
.contact-inputs:focus{  color:#fff;}
.contact-inputs:placeholder{  color: #a9a9a9;}
.contact-left textarea {    height: 50px;}
  
.contact-left button{
    display: flex;
    align-items: center;
    padding: 15px 30px;
    font-size: 16px;
    color: #fff;
    gap: 10px;
    border: none;
    border-radius: 10px;
    background: #55a1df;
    cursor: pointer;
}
  
.contact-left button img{  height: 15px;}
  

@media screen and (max-width: 1300px) {
    .contactcol1 {    width: 52%;}
    .contactcol2 {    width: 48%;}
    .contactcontrainer h2{    font-size: 22px;}
    .contactcontrainer h1{    font-size: 80px;}
}
@media screen and (max-width: 1150px) {
    .contactcol1 { width: 52%;  padding: 20px; }
    .contactcol2 { width: 48%;  padding-top: 0px;}
    .contactcontrainer {  width: 70%;}
    .contactcontrainer h2{ font-size: 20px;  }
    .contactcontrainer h1{ font-size: 60px; margin-left: 20px; letter-spacing: 8px;}
    .formcontrainer {  width: 80%;}
}
@media screen and (max-width: 1000px) {
    .contactcol1 { width: 45%;  padding: 20px; }
    .contactcol2 { width: 55%; }
    .contactcontrainer {  width: 70%;}
    .contactcontrainer h2{ font-size: 20px;  }
    .contactcontrainer h1{ font-size: 50px; margin-left: 20px; letter-spacing: 5px;}
    .formcontrainer {  width: 80%;}
}
@media screen and (max-width: 880px) {
    .contact_section {flex-direction: column;   height: auto; padding-bottom: 40px;}
    .formcontrainer {   width: 65%; border-color: #000000;  background: #242525;}
    .contactcol1 { width: 100%; height: 350px;  }
        .contactcontrainer {  width: 70%; margin-top: -100px;}
    .contactcol2 { width: 100%; margin-top: -150px;background-color: #00000000;}
    .contactcontrainer h2{ font-size: 20px; text-align: center; margin-right: 100px;}
    .contactcontrainer h1{ font-size: 60px; text-align: end;}
}

@media screen and (max-width: 650px) {
    .contactcol1 { width: 100%; height: 300px;  }
    .formcontrainer {   width: 70%; }
    .contactcontrainer {  width: 70%; margin-top: -100px;}
    .contactcol2 { width: 100%; margin-top: -150px;}
    .contactcontrainer h2{ font-size: 18px;   }
    .contactcontrainer h1{ font-size: 50px; }
    .contact-left button{ padding: 15px 25px; font-size: 14px; gap: 10px;}
}
@media screen and (max-width: 560px) {
    .contactcol1 { width: 100%; height: 300px;  }
    .formcontrainer {   width: 80%; }
    .contactcontrainer {  width: 70%; margin-top: -100px;}
    .contactcol2 { width: 100%; margin-top: -150px;}
    .contactcontrainer h2{ font-size: 16px;   }
    .contactcontrainer h1{ font-size: 45px; }
    .contact-left button{ padding: 12px 20px; font-size: 13px; gap: 10px;}
}
@media screen and (max-width: 480px) {
    .contactcol1 { width: 100%; height: 250px;  }
    .formcontrainer { padding: 10px; }
    .contactcontrainer h2{ font-size: 14px;   }
    .contactcontrainer h1{ font-size: 40px; margin-bottom:20px; }
    .option span { font-size: 12px;}
}
@media screen and (max-width: 400px) {
    .formcontrainer {   width: 90%; }
    .contactcontrainer h2{ font-size: 13px;   }
    .contactcontrainer h1{ font-size: 35px; }
    .option span { font-size: 11px;}   
    .contact-left button{ padding: 10px 16px; font-size: 12px; }

}