@media (max-width: 768px) {
  
    .body-container {
        padding: 40px 10px;
    }

    .n-container {
        padding: 40px 0px;
    }

    .connect-content {
        border: 1px solid #11D3D3;
        border-radius: 10px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .contact-content {
      display: flex;
      align-items: center;
      text-align: center;
      text-align: center;
    }

    .recipient-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .contact-item {
      justify-content: center;
      align-items: center;
    }

    .contact-item textarea {
      min-width: 100%;
      min-height: 100%;
    }

    .contact-item input {
      text-align: center;
    }
    
    .contact-bottom button {
      margin-top: 16px;
    }

    .locate-bottom {
      flex-direction: column;
    }

    .locate-content {
      text-align: center;
    }
    
    .locate-left {
      max-width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .locate-item {
      align-items: center;
      width: 100%;
      padding: 15px;
      border-radius: 10px;
    }


    /* ............... */

    .connect-left h1 {
        font-size: 2.5em;
    }

    .contact-top h2,
    .locate-top h2,
    .second-locate-left h2 {
        font-size: 1.5em;
    }

    .contact-top p,
    .locate-top p,
    .contact-item,
    .locate-item a,
    .locate-item p,
    .second-locate-left p {
        font-size: 0.9em;
    }

    .contact-bottom button {
      margin-top: 16px;
    }    

    .second-locate-content {
      text-align: center;
      flex-direction: column;
      align-items: center;
    }

    .second-locate-item {
      align-items: center;
      width: 100%;
      padding: 15px;
      border-radius: 10px;
    }

}