/*MEDIA QUERIES*/

@media screen and (max-width: 890px) {
    .main-heading h2 {
      font-size: 1.7rem;
      max-width: 80%;
    }
  
    .logo a {
      font-size: 2rem;
    }
    .fa-xmark {
      font-size: 2.2rem;
    }
    .fa-xmark:hover {
      font-size: 3.2rem;
    }
  
    .row {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 50px auto;
    }
    #name,
    #email {
      width: 595px;
      height: 60px;
      margin: 0;
    }
    #name {
      margin-bottom: 30px;
    }
    .txt-msg {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #msg {
      max-width: 595px;
      margin: 0;
    }
    .submit-btn {
      text-align: center;
      margin: 60px auto; /* optional spacing */
    }
    .btn {
      font-size: 1.2rem;
      width: 220px;
      height: 45px;
      border-radius: 50px;
      margin-bottom: 200px;
    }
  }
  
  @media screen and (max-width: 690px) {
    #name,
    #email {
      width: 495px;
      height: 60px;
      margin: 0;
    }
    #msg {
      max-width: 495px;
      margin: 0;
    }
  }
  
  @media screen and (max-width: 540px) {
    .main-heading h2 {
      font-size: 1.3rem;
      max-width: 80%;
    }
    .fa-xmark {
      display: display;
    }
    h1 {
      margin-right: 90px;
    }
  
    .logo a {
      font-size: 1.8rem;
    }
    .fa-xmark {
      font-size: 2.2rem;
    }
    .fa-xmark:hover {
      font-size: 3.2rem;
    }
    #name,
    #email {
      width: 395px;
      height: 60px;
      margin: 0;
    }
    #msg {
      max-width: 395px;
      margin: 0;
    }
  }
  
  @media screen and (max-width: 430px) {
  .logo {
     
      margin: 0 auto;
    }
  .navbar-contact{
    padding: 77px;
  }
    .main-heading h2 {
      font-size: 1.3rem;
      text-align: center;
      max-width: 80%;
    }
    .row #name{
      margin-bottom: 15px;
    }
  
    .fa-xmark {
      display: display;
    }
  
    .logo a {
      font-size: 2.3rem;
    }
  
  
    .fa-xmark {
      display: none;
    }
    #name,
    #email {
      width: 295px;
      height: 60px;
      margin: 0;
    }
    #msg {
      max-width: 295px;
      margin: 0;
    }
  }
  
  @media screen and (max-width:350px) {
    #name,
    #email {
      width: 240px;
    
    }
    #msg {
      max-width: 240px;
      
    }
  }