@import url("./components/common.css");
@import url("./components/footer.css");
@import url("./components/navbar.css");
@import url("./components/social.css");
@import url("./all.css");

.contact {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    background-image: url("../img/s1.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  .con{
    background-color:#2b3462c4;
  }
  .contactWrapper {
    position: relative;
    z-index: 1;
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
   
    margin-top: 20px;
    border-radius: 10px;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
  
  }
  
  .contactLeft {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    min-width: 300px;
    
  }

  .contactPhone {
    padding: 10px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    z-index: 1;
    top: -142%;
    transition: none 1.4s;
    animation-name: callDown;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
  }
  
  @keyframes callDown {
    form {
      top: -142%;
    }
  
    to {
      top: -11px;
    }
  }
  
  .contactBg {
    background-color: var(--background-1);
    padding: 10px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: -11px;
  }
  
  .call {
    color: var(--font-1);
    font-size: 24px;
    font-weight: 600;
  }
  
  .shakeCall {
    animation-name: shake;
    animation-duration: 0.5s;
    animation-delay: 2s;
    animation-iteration-count: 15;
    display: flex;
  }
  
  @keyframes shake {
    0% {
      transform: rotate(30deg);
      transform: translateX(2px);
    }
  
    25% {
      transform: rotate(90deg);
      transform: translateX(0px);
    }
  
    50% {
      transform: rotate(120deg);
      transform: translateX(2px);
    }
  
    75% {
      transform: rotate(360deg);
      transform: translateX(0px);
    }
  
    90% {
      transform: rotate(120deg);
      transform: translateX(1px);
    }
  
    100% {
      transform: rotate(0deg);
      transform: translateX(0px);
    }
  }
  
  .callus {
    font-size: 14px;
  }
  
  .mail {
    color: var(--font-1);
    font-size: 24px;
  }
  
  .otherContact {
    border-radius: 10px;
    max-width: 300px;
    margin-top: 40px;
  }
  
  .other {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    justify-content: center;
  
  }
  
  .other p {
    letter-spacing: 1.4px;
    color: var(--font-1);
    text-align: center;
  }
  
  .other:first-child {
    margin-top: 40px;
  }
  
  .other:last-child {
    margin-bottom: 20px;
  }
  
  .otherTitle {
    color: ghostwhite;
    letter-spacing: 1.4px;
    font-weight: 900;
  }
  
  .contactRight {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 450px;
  }
  
  .contactForm {
    width: 90%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
  }
  
  .contactForm .title {
    color: var(--font-1);
    font-weight: 600;
    margin: 20px 0px;
    text-align: center;
  }
  
  .contactForm {
    width: 75%;
    margin: auto;
    transition: all 2s ease-in-out;
  
    border-radius: 10px;
  }
  
  
  #contactForm {
    width: 60%;
    margin: auto;
  }
  
  .formElement {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  
  .contactLabel {
    color: ghostwhite;
    align-self: flex-start;
    padding: 10px 0px;
    font-weight: 700;
  }
  
  .inputElement {
    padding: 10px;
    border: none;
    border-radius: 5px;
    width: 100%;
    margin-left: 10px;
    outline-color: #0abdd1;
  }
  
  .formElement textarea {
    letter-spacing: 1.3px;
    font-weight: 600;
    resize: none;
    min-height: 50px;
  }
  
  .formElement textarea::-webkit-scrollbar {
    width: 6px;
  }
  
  .formElement textarea::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(15, 74, 133, 0.3);
  }
  
  .formElement textarea::-webkit-scrollbar-thumb {
    background-color: rgb(33, 129, 167);
    outline: 1px solid rgb(29, 96, 163);
  }
  
  .contactBtn {
    margin: 10px 0px;
    border: 1px solid ghostwhite;
    font-size: 14px;
    font-weight: 600;
  }
  
  .contactBtn:hover {
    background-color: ghostwhite;
    color: var(--btn);
  }
  
  .map {
    width: 100%;
  }
  
  .mapWrapper {
    width: 100%;
    border-radius: 10px;
  
  }
  
  @media only screen and (max-width:872px) {
    .contactLeft {
      width: 100%;
  
    }
  
    .otherContact {
      min-width: 450px;
          
    }
  
    .contactForm {
      min-width: 100%;
  
    }
  
    .mapWrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
    }
  
    .contactWrapper {
      flex-direction: column;
      background: none;
    }
  
    .formElement {
      width: 100%;
    }
  }
  
  @media only screen and (max-width:520px) {
    .contactLeft {
      min-width: unset;
    }
  
    .contactRight {
      min-width: 100%;
    }
  
    .mapWrapper {
      width: unset;
    }
    .otherContact{
      min-width: 100%;
    }
    .contactWrapper {
      flex-direction: column;
      padding: 0px;
    }
  
    .formElement {
      width: 100%;
    }
  }