.contact {
    position: relative;
    /* height: 100vh; */
    display: flex;
    flex-direction: column;
    background: linear-gradient(
      to bottom,
      #fff 0%,
      #dbe2ee 70%
    );
    perspective: 100vh;
  }
  
  .contact .title {
    padding-bottom: 0;
  }

  .contact-form-wrap {
      position: relative;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28vw;
    max-width: 500px;
    min-width: 360px;
    margin: 64px auto 0 auto;
    transform-style: preserve-3d;
    transition: transform 0.5s;
    }
  
  .popup {
      /* z-index: 1;
      position: fixed;
      bottom: 0;
      display: flex;
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-family: "Nw";
      width: 100%;
      height: 100%;
      color: black;
      background: linear-gradient(
        to bottom,
        #dbe2ee 0%,
        #fff 42%,
        #fff 58%,
        #dbe2ee 100%
      ); */
      position: absolute;
      font-size: 24px;
      background: linear-gradient(
        to bottom,
        #fff 0%,
        #dbe2ee 70%
      );
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      transform: rotateX(180deg); 
      border-radius: 24px;
      box-shadow:0 0 16px rgba(43, 90, 149, 0.05);
      display: flex;  
      align-items: center;
      justify-content: center;
    }
  
    #contact-form{
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    #contact-form {
      /* max-width: 500px;
      min-width: 360px; */
      width: 100%;
      display: inline-block;
      text-align: center;
    }
    
    .mail_sent {
      display: flex;
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    .mail_sent span {
      display: block;
      text-align: center;
      margin-bottom: 24px;
    }
    
    .mail_not_sent {
      display: none;
    }
    
    .fill_email {
      cursor: pointer;
      text-decoration: underline;
    }
    
    .btn-close {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 32px;
      height: 32px;
      margin: 0;
      display: inline-block;
      cursor: pointer;
    }
    
    .btn-close span {
      display: block;
      position: absolute;
      top: 12px;
      height: 5px;
      width: 100%;
      background: black;
      border-radius: 5px;
      left: 0;
      transition: 0.25s ease-in-out;
    }
    
    .btn-close span:nth-child(1) {
      transform: rotate(45deg);
    }
    
    .btn-close span:nth-child(2) {
      transform: rotate(-45deg);
    }
    
    .btn-close:hover span,
    .btn-close:hover span {
      background-color: rgb(37, 91, 139);
    }
  
  .form-row {
    margin-bottom: 14px;
  }
  
  .label-contact {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    padding-left: 12px;
    text-align: left;
    font-size: 20px;
  }
  
  .form-row input {
    width: 100%;
    font-family: "Poppins Regular";
    margin: 8px 6px 8px 0;
    padding: 20px 4px 20px 16px;
    height: 36px;
    border: 0;
    box-shadow: 4px 8px 10px 0px #cfdbed;
    font-size: 16px;
    border-radius: 48px;
  }
  
  textarea {
    width: 100%;
    font-family: "Poppins Regular";
    margin: 8px 5px 0 0;
    border: 0;
    resize: none;
    padding: 7px 4px 0 14px;
    box-shadow: 4px 8px 10px 0px #cfdbed;
    font-size: 16px;
    border-radius: 12px;
  }
  
  #name {
    display: none;
    visibility: hidden;
  }
  
  .contact-footer {
    margin-top: 72px;
    width: 100%;
    height: 10vh;
    display: flex;
  }

.social-icon-footer {
    position: relative;
    width: 17%;
    height: 100%;
    margin-right: 1px;
  }
  
  .social-icon-footer:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 30%;
  }
  
  .social-icon-footer:hover:after {
    filter: none;
  }
  
  .social-icon-footer:hover {
    padding-bottom: 50px;
    background-color: #fff;
  }
  
  .social-icon-1-footer {
    background-color: rgba(255, 255, 255, 0.45);
  }
  
  .social-icon-1-footer:after {
    filter: invert(50%) sepia(1) hue-rotate(172deg);
  }
  
  .social-icon-2-footer {
    background-color: rgba(255, 255, 255, 0.4);
  }
  
  .social-icon-2-footer:after {
    filter: invert(50%) sepia(1) hue-rotate(172deg);
  }
  
  .social-icon-3-footer {
    background-color: rgba(255, 255, 255, 0.35);
  }
  
  .social-icon-3-footer:after {
    filter: invert(50%) sepia(1) hue-rotate(172deg);
  }
  
  .social-icon-4-footer {
    background-color: rgba(255, 255, 255, 0.3);
  }
  
  .social-icon-4-footer:after {
    filter: invert(50%) sepia(1) hue-rotate(172deg);
  }
  
  .social-icon-5-footer {
    background-color: rgba(255, 255, 255, 0.25);
  }
  
  .social-icon-5-footer:after {
    filter: invert(50%) sepia(1) hue-rotate(172deg);
  }
  
  .social-icon-6-footer {
    background-color: rgba(255, 255, 255, 0.15);
  }
  
  .social-icon-6-footer:after {
    filter: invert(50%) sepia(1) hue-rotate(172deg);
  }

  .cta-button, #btn-send{
    position: relative;
    font-size: 28px;
    padding: 0 32px; 
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-image: linear-gradient(90deg, #ff0000 0%, #ffb011 100%);
    border-radius: 48px;
    text-decoration:none;
    text-shadow: 1px 1px 0px hsl(0deg 0% 0% / 45%);	
    transform-style: preserve-3d;
    transition: 0.1s all ease;
    color:white;
    cursor: pointer;
  }

  .cta-button:before, #btn-send:before{
    position: absolute;
    content:"";		
    top:7px;
    left: 4px;	
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, #b10000 0%, #ff8800 100%);
    border-radius: 48px;
    box-shadow: 7px 8px 25px rgb(255 106 0 / 60%);
    transition: 0.15s all linear;
    transform: translateZ(-1px);
  }
  
  .cta-button:after, #btn-send:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 1px;
    top: 1px;
    background-color: white;
    border-radius: 48px;
    transform: translateZ(-1px);
    background-image: linear-gradient(90deg, #ff7b48 0%, #ffce00 100%);
  }	
  
 
   .cta-button:hover, #btn-send:hover{
    margin-top: 4px;
  } 
  
  .cta-button:hover:before, #btn-send:hover:before{
    top: 4px;
    left: 2px;
    box-shadow: 3px 2px 20px rgb(255 106 0 / 90%);
  }
  
  .cta-button span, #btn-send span{
    display: block;
    margin-top: 4px;
    font-size: 18px;
  }  
  
  #btn-send{
    display: inline-block;
    font-size: 24px;
    margin: 10px 0;
    padding: 14px 34px 12px 34px;
  }
  
  #btn-send:before{
    box-shadow: 4px 8px 20px rgba(255, 85, 0, 0.5);
  }

  #btn-send:hover{
    margin-top: 12px;
    margin-bottom: 8px;
  }
  
  #btn-send:hover:before{
    box-shadow: 3px 3px 16px rgba(255, 85, 0, 0.85);
  }


/*---------------------------------------------------*/
@media screen and (max-width: 1023px) {
.contact-footer {
    height: 17vw;
    }
}  

/*---------------------------------------------------*/
@media screen and (max-width: 440px) {
    #contact-form {
      width: 100%;
      min-width: auto;
    }
}