.mainContact {
    width: 100%;
  

    background-color: var(--black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);


}


.mainContact .firstDiv {
    margin-top: 6em;

     width: 68rem;
    padding: 1em;
    display: flex;
    align-items: flex-start;
   

margin-bottom: 2em;

/* border: 2px solid teal; */

}

.mainContact .firstDiv img{

 
   height: 25rem;
  min-width: 15rem;

/* border: 2px solid red; */

}

.mainContact .firstDivItems{
    max-width: 32rem;
    padding: 1em;
    display: flex;
    flex-direction: column;
/* border: 2px solid bisque; */

    
}
.mainContact .firstDivItems div:nth-child(1){
 
    font-size: var(--contactHeadline);
}

.mainContact .firstDivItems div:nth-child(2) {

   color: var(--grey);
}

.mainContact .firstDivItems div{
    padding: .5em;
    font-size: var(--contactText);
}
.mainContact input[type="text"] {
       max-width: 25rem;
        padding: .6em;
        border-bottom-right-radius: var(--borderRadius);
        border: .2em solid var(--blue);
        background-color: var(--black);
        color: var(--white);
    
    
        margin-bottom: 2em;

}

.mainContact  input[type="email"] {
     max-width: 25rem;
      padding: .6em;
    border-bottom-right-radius: var(--borderRadius);
    border: .2em solid var(--blue);
    background-color: var(--black);
    color: var(--white);

    margin-bottom: 2em;

  }

    .mainContact select {
      max-width: 25rem;
      padding: .6em;
      border-bottom-right-radius: var(--borderRadius);
      border: .2em solid var(--blue);
      background-color: var(--black);
      color: var(--white);
   
  
      margin-bottom: 2em;
    }





  .mainContact ::placeholder {
    color: var(--white);
    opacity: 1;
    /* Firefox */
}
  .mainContact ::-ms-input-placeholder{
color: var(--white);
    opacity: 1;
}


  .mainContact button{
    border: none;
    background-color: var(--blue);
    color: var(--white);
    max-width: 10rem;
    border-bottom-right-radius: var(--borderRadius);
    padding: .6em;
    font-weight: 500;
    font-size: var(--contactButton);
  }



  .mainContact .firstDivItems :nth-child(7){
margin-left: 15em;

   
  }



    .mainContact button:hover {

      background-color: var(--grey);
      color: var(--white);
      font-weight: bold;
      transition: 450ms;
      transform: scale(.98);

    }









@media (max-width:68rem){
.mainContact .firstDiv {
    margin-top: 6em;

    width: 50rem;
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: space-around;


    margin-bottom: 2em;



  }

  .mainContact .firstDiv img {


    height: 25rem;
    min-width: 15rem;

    /* background-color: red; */

  }

  .mainContact .firstDivItems {
    max-width: 25rem;
    padding: 1em;
    display: flex;
    flex-direction: column;
    /* background-color: red; */

  }

  .mainContact .firstDivItems div:nth-child(1) {

    font-size: var(--contactHeadline);
  }

  .mainContact .firstDivItems div:nth-child(2) {

    color: var(--grey);
  }

  .mainContact .firstDivItems div {
    padding: .5em;
    font-size: var(--contactText);
  }

  .mainContact input[type="text"] {
    max-width: 25rem;
    padding: .6em;
    border-bottom-right-radius: var(--borderRadius);
    border: .2em solid var(--blue);
    background-color: var(--black);
    color: var(--white);


    margin-bottom: 2em;

  }

  .mainContact input[type="email"] {
    max-width: 25rem;
    padding: .6em;
    border-bottom-right-radius: var(--borderRadius);
    border: .2em solid var(--blue);
    background-color: var(--black);
    color: var(--white);

    margin-bottom: 2em;

  }

  .mainContact ::placeholder {
    color: var(--white);
    opacity: 1;
    /* Firefox */
  }

  .mainContact ::-ms-input-placeholder {
    color: var(--white);
    opacity: 1;
  }


  .mainContact button {
    border: none;
    background-color: var(--blue);
    color: var(--white);
    max-width: 10rem;
    border-bottom-right-radius: var(--borderRadius);
    padding: .6em;
    font-weight: 500;
    font-size: var(--contactButton);
  }



  .mainContact .firstDivItems :nth-child(7) {
    margin-left: 15em;


  }




}











@media (max-width:50rem) {
  .mainContact .firstDiv {
    margin-top: 6em;

    width: 40rem;
    padding: 1em;
    display: flex;
    flex-wrap: wrap;
 
    justify-content: space-around;


    margin-bottom: 2em;


  }

  .mainContact .firstDiv img {


    height: 25rem;
    min-width: 15rem;
    align-self: flex-start;



  }

  .mainContact .firstDivItems {
    max-width: 25rem;
    padding: 1em;
    display: flex;
    flex-direction: column;
    /* background-color: red; */

  }

  .mainContact .firstDivItems div:nth-child(1) {

    font-size: var(--contactHeadline);
  }

  .mainContact .firstDivItems div:nth-child(2) {

    color: var(--grey);
  }

  .mainContact .firstDivItems div {
    padding: .5em;
    font-size: var(--contactText);
  }

  .mainContact input[type="text"] {
    max-width: 25rem;
    padding: .6em;
    border-bottom-right-radius: var(--borderRadius);
    border: .2em solid var(--blue);
    background-color: var(--black);
    color: var(--white);


    margin-bottom: 2em;

  }

  .mainContact input[type="email"] {
    max-width: 25rem;
    padding: .6em;
    border-bottom-right-radius: var(--borderRadius);
    border: .2em solid var(--blue);
    background-color: var(--black);
    color: var(--white);

    margin-bottom: 2em;

  }

        .mainContact select {
          max-width: 25rem;
          padding: .6em;
          border-bottom-right-radius: var(--borderRadius);
          border: .2em solid var(--blue);
          background-color: var(--black);
          color: var(--white);
    
    
          margin-bottom: 2em;
        }

  .mainContact ::placeholder {
    color: var(--white);
    opacity: 1;
    /* Firefox */
  }

  .mainContact ::-ms-input-placeholder {
    color: var(--white);
    opacity: 1;
  }


  .mainContact button {
    border: none;
    background-color: var(--blue);
    color: var(--white);
    max-width: 10rem;
    border-bottom-right-radius: var(--borderRadius);
    padding: .6em;
    font-weight: 500;
    font-size: var(--contactButton);
  }



  .mainContact .firstDivItems :nth-child(7) {
    margin-left: 15em;


  }




}









@media (max-width:40rem) {
  .mainContact .firstDiv {
    margin-top: 6em;

    width: 95%;
    padding: .5em;
    display: flex;
 
    justify-content: space-around;


    margin-bottom: 1em;


  }

  .mainContact .firstDiv img {


    height: 25rem;
    min-width: 15rem;



  }

  .mainContact .firstDivItems {
    max-width: 100%;
    padding: 1em;
    display: flex;
    flex-direction: column;
    /* background-color: red; */

  }

  .mainContact .firstDivItems div:nth-child(1) {

    font-size: var(--contactHeadline);
  }

  .mainContact .firstDivItems div:nth-child(2) {

    color: var(--grey);
  }

  .mainContact .firstDivItems div {
    padding: .5em;
    font-size: var(--contactText);
  }

  .mainContact input[type="text"] {
    max-width: 25rem;
    padding: .6em;
    border-bottom-right-radius: var(--borderRadius);
    border: .2em solid var(--blue);
    background-color: var(--black);
    color: var(--white);


    margin-bottom: 2em;

  }

  .mainContact input[type="email"] {
    max-width: 25rem;
    padding: .6em;
    border-bottom-right-radius: var(--borderRadius);
    border: .2em solid var(--blue);
    background-color: var(--black);
    color: var(--white);

    margin-bottom: 2em;

  }

  .mainContact ::placeholder {
    color: var(--white);
    opacity: 1;
    /* Firefox */
  }

  .mainContact ::-ms-input-placeholder {
    color: var(--white);
    opacity: 1;
  }


  .mainContact button {
    border: none;
    background-color: var(--blue);
    color: var(--white);
    max-width: 8rem;
    border-bottom-right-radius: var(--borderRadius);
    padding: .6em;
    font-weight: 500;
    font-size: var(--contactButton);
  }



  .mainContact .firstDivItems :nth-child(7) {
    margin-left: 0em;


  }




}









@media (max-width:25rem) {
  .mainContact .firstDiv {
    margin-top: 6em;

    width: 95%;
    padding: .5em;
    display: flex;

    justify-content: space-around;


    margin-bottom: 1em;


  }

  .mainContact .firstDiv img {


    height: 20rem;
    min-width: 95%;



  }

  .mainContact .firstDivItems {
    max-width: 100%;
    padding: 1em;
    display: flex;
    flex-direction: column;


  }

  .mainContact .firstDivItems div:nth-child(1) {

    font-size: var(--contactHeadline);
  }

  .mainContact .firstDivItems div:nth-child(2) {

    color: var(--grey);
  }

  .mainContact .firstDivItems div {
    padding: .5em;
    font-size: var(--contactText);
  }

  .mainContact input[type="text"] {
    max-width: 100%;
    padding: .5em;
    border-bottom-right-radius: var(--borderRadius);
    border: .2em solid var(--blue);
    background-color: var(--black);
    color: var(--white);


    margin-bottom: 2em;

  }

  .mainContact input[type="email"] {
    max-width: 100%;
    padding: .5em;
    border-bottom-right-radius: var(--borderRadius);
    border: .2em solid var(--blue);
    background-color: var(--black);
    color: var(--white);

    margin-bottom: 2em;

  }

        .mainContact select {
          max-width: 25rem;
          padding: .5em;
          border-bottom-right-radius: var(--borderRadius);
          border: .2em solid var(--blue);
          background-color: var(--black);
          color: var(--white);
    
    
          margin-bottom: 2em;
        }

  .mainContact ::placeholder {
    color: var(--white);
    opacity: 1;
    /* Firefox */
  }

  .mainContact ::-ms-input-placeholder {
    color: var(--white);
    opacity: 1;
  }


  .mainContact button {
    border: none;
    background-color: var(--blue);
    color: var(--white);
    max-width: 8rem;
    border-bottom-right-radius: var(--borderRadius);
    padding: .6em;
    font-weight: 500;
    font-size: var(--contactButton);
  }



  .mainContact .firstDivItems :nth-child(7) {
    margin-left: 0em;


  }




}