.contact{
  background-color:  rgb(255, 135, 55, .9);
  width: 100%;
  height: 20vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  margin: 0;
  gap: 2rem;
}


.contact__left-side h2{
font-weight: 900;
color: white;
margin-bottom: .25rem;
font-size: var(--size-sm);
}

.contact__left-side p span{
  color: white;
  font-weight: 900;
  font-size: var(--size-xs);
}

.contact__right-side{
  display: flex;
}

.contact__right-side input{
  border-right: none;
  border: 1px solid lightgray;
  border-radius: 3px;
  width: 100px;
}
.contact__right-side input::placeholder{
  padding-left:  .7rem;
}

.contact__right-side .btn{
  border-left: 0;
  border: 1px solid rgb(50,50, 50);
  border-radius: 3px;
}


.contact__right-side .btn:active{
  opacity: 1;
  font-weight: 400;
}



/* xs */
@media (min-width: 475px) {
   .contact__left-side h2{
    font-size: var(--size-md);
    }

    .contact__left-side p{
      font-size: var(--size-xs);
    }

    .contact__right-side input{
      width: 125px;
    }
}

/* sm */
@media (min-width: 640px) {
  .contact{
    background-color:  rgb(255, 135, 55, .9);
    width: 100%;
    height: 20vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    margin: 0;
    gap: 2rem;
  }
  
  
  .contact__left-side h2{
  font-weight: 900;
  color: white;
  margin-bottom: .25rem;
  }
  
  .contact__left-side p span{
    color: white;
    font-weight: 900;
  }
  
  .contact__right-side{
    display: flex;
  }
  
  .contact__right-side input{
    border-right: none;
    border: 1px solid lightgray;
    border-radius: 3px;
  }
  .contact__right-side input::placeholder{
    padding-left:  .7rem;
  }
  
  .contact__right-side .btn{
    border-left: 0;
    border: 1px solid rgb(50,50, 50);
    border-radius: 3px;
  }
  
  
  .contact__right-side .btn:active{
    opacity: 1;
    font-weight: 400;
  }
  
}

/* md */
/* @media (min-width: 768px) {} */

/* Lg */
/* @media (min-width: 1024px) {} */

/* xL */
/* @media (min-width: 1288px) {} */

/* 2xL */
/* @media (min-width: 1536px) {}   */