MSV FM

Path : /hermes/bosweb/b1705/skillupexecutivelearning.com/assets/scss/sections/

File Upload :

Current < : /hermes/bosweb/b1705/skillupexecutivelearning.com/assets/scss/sections/_contact.scss

// main: ../main.scss
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
  padding-top: 8px;
  padding-bottom: 40px;

  .info-item {
    &+.info-item {
      margin-top: 40px;
    }

    i {
      color: var(--contrast-color);
      background: var(--accent-color);
      font-size: 20px;
      width: 48px;
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
      margin-right: 15px;
    }

    h3 {
      padding: 0;
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 5px;
    }

    p {
      padding: 0;
      margin-bottom: 0;
      font-size: 14px;
    }
  }

  .php-email-form {
    height: 100%;

    .error-message {
      display: none;
      background: #df1529;
      color: #ffffff;
      text-align: left;
      padding: 15px;
      margin-bottom: 24px;
      font-weight: 600;
    }

    .sent-message {
      display: none;
      color: #ffffff;
      background: #059652;
      text-align: center;
      padding: 15px;
      margin-bottom: 24px;
      font-weight: 600;
    }

    .loading {
      display: none;
      background: var(--background-color);
      text-align: center;
      padding: 15px;
      margin-bottom: 24px;

      &:before {
        content: "";
        display: inline-block;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        margin: 0 10px -6px 0;
        border: 3px solid var(--accent-color);
        border-top-color: var(--background-color);
        animation: animate-loading 1s linear infinite;
      }
    }

    input[type=text],
    input[type=email],
    textarea {
      font-size: 14px;
      padding: 10px 15px;
      box-shadow: none;
      border-radius: 0;
      color: var(--default-color);
      background-color: rgba(var(--background-color-rgb), .5);
      border-color: rgba(var(--default-color-rgb), .2);

      &:focus {
        border-color: var(--accent-color);
      }

      &::placeholder {
        color: rgba(var(--default-color-rgb), .3);
      }
    }

    button[type="submit"] {
      color: var(--contrast-color);
      background: var(--accent-color);
      border: 0;
      padding: 10px 30px 12px 30px;
      transition: 0.4s;
      border-radius: 50px;

      &:hover {
        background: rgba(var(--accent-color-rgb), .8);
      }
    }
  }

  @keyframes animate-loading {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
}