/* ============================================================
   GRID
============================================================ */

#contact-page-form {
     display: grid;
     grid-template-columns: 1fr 1fr;
     padding-top: var(--g80);
     padding-bottom: var(--g32);
     gap: var(--g52);
     
     .sub {
          font-size: 13px;
          color: var(--text);
          line-height: 1.9;
     }

     .sha {
          align-self: start;
          justify-self: start;
     }

     .grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          width: 100%;
          gap: var(--g28);
          row-gap: var(--g36);

          h3 {
               font-size: 12.5px;
               font-weight: 450;
               color: var(--heading);
          }

          a {
               font-size: 12.5px;
               color: var(--text);
               line-height: 1.9;
               align-self: start;



               &:Hover {
                    color: var(--heading);
                    text-decoration: underline;
               }
          }
     }

     form {
          padding: var(--g20);
          background-color: #F7F7F7;
          align-self: flex-start;

          div {
               flex: 1;
          }

          label {
               font-size: 12px;
               font-weight: 440;
               color: var(--subheading);
          }

          input, textarea {
               background-color: white;
               border: 1px solid hsl(0, 0%, 0%, .06);
               border-radius: 2px;
                    outline: none;
               height: 33px;
               font-size: 12px;
               font-weight: 450;
               padding: 12px;

               &:hover {
                    border-color: hsl(0, 0%, 0%, .2);
               }
               &:focus {
                    border-color: hsl(0, 0%, 0%, .3);
                    outline: none;
               }
          }

          textarea {
               height: 120px;
          }

          .form-status {
               color: var(--red);
               font-size: 11.5px;
               line-height: 1.5;
          }

          button:disabled {
               opacity: .6;
               pointer-events: none;
          }
     }
}

#contact-page-form .contact-form-wrap {
     position: relative;
     align-self: start;
     overflow: hidden;
     background-color: #F7F7F7;

     form,
     .contact-success {
          transition: opacity .35s ease, transform .35s ease;
     }

     .contact-success {
          position: absolute;
          inset: 0;
          padding: var(--g52) var(--g32);
          text-align: center;
          opacity: 0;
          pointer-events: none;
          transform: translateY(8px);

          .success-icon {
               width: 38px;
               height: 38px;
               margin-bottom: var(--g20);
               border-radius: 50%;
               color: var(--heading);
               background-color: white;
               border: 1px solid var(--stroke);

               svg {
                    width: 12px;
               }
          }

          h2 {
               margin-bottom: var(--g12);
          }

          p {
               max-width: 340px;
               margin-bottom: var(--g24);
               color: var(--text);
               font-size: 12px;
               line-height: 1.5;
          }
     }

     &.success {
          form {
               opacity: 0;
               pointer-events: none;
               transform: translateY(-8px);
          }

          .contact-success {
               opacity: 1;
               pointer-events: auto;
               transform: translateY(0);
          }
     }
}

@media (max-width: 1580px) {
     #contact-page-form {
     .sub {
          font-size: 12.5px;
     }

     .grid {
          h3 {
               font-size: 12px;
          }

          a {
               font-size: 12px;

          }
     }

     form {
          label {
               font-size: 11.5px;
          }

          input, textarea {
               height: 31px;
               font-weight: 450;
               padding: 11px;
          }

          textarea {
               height: 120px;
          }
     }
}

}

#specialist {
     .specialist-card {
          background-color: #F7F7F7;
          padding: var(--g20);
          flex: 1;
          h3 {
               font-size: 12.5px;
               font-weight: 440;
               color: var(--heading);
          }

          .pos {
               font-size: 12.5px;
               color: var(--text);
          }

          .con {
               flex: 1;
               gap: var(--g10);
               display: flex;
               flex-direction: column;
               .head {
                    font-size: 12px;
                    font-weight: 430;
                    color: var(--subheading-main);
               }

               a {
                    font-size: 12px;
                    font-weight: 430;
                    color: var(--text);

                    &:hover {
                         color: var(--heading);
                         text-decoration: underline;
                    }
               }
          }
     }
}

@media (max-width: 1200px) {
     
}

@media (max-width: 1080px) {
     #contact-page-form {
          grid-template-columns: 1fr;

          .fc.g60 {
               grid-row: 3 / 4;
          }
     }

     .wrap {
               flex-direction: column;
          }

     #specialist {
     .specialist-card {
          width: 100%;
          h3 {
               font-size: 12px;
          }

          .pos {
               font-size: 11px;
          }

          

          .con {
               .head {
                    font-size: 11px;
               }

               a {
                    font-size: 11px;
                    font-weight: 430;
               }
          }
     }
}
}

@media (max-width: 770px) {
     #contact-page-form {
     .sub {
          font-size: 12px;
     }

     .grid {
          h3 {
               font-size: 11.5px;
          }

          a {
               font-size: 11.5px;

          }
     }

     form {
          label {
               font-size: 10.5px;
               margin-bottom: 2px;
          }

          input, textarea {
               height: 29px;
               font-weight: 450;
               padding: 11px;
          }

          .fr.g14 {
               flex-direction: column;
               flex: 1;
               align-items: stretch;
               gap: var(--g28);
          }

          textarea {
               height: 120px;
          }
     }
}
}

@media (max-width: 540px) {
   
}

.g32 {
     gap: var(--g32);
}