@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');


* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: "Inter", sans-serif;
  background:#fff;
  color:#333;
}

.hidden { display:none; }

/* LOADER */
#loader {
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

#loader img {
  width:120px;
  animation:bob 1.5s ease-in-out infinite;
}

@keyframes bob {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-15px); }
}

/* LAYOUT */
.container {
  max-width:1100px;
  margin:auto;
  padding:2rem 4rem;
}

.hero {
  text-align:center;
}

.hero-img {
  width:100%;
  max-height:300px;
  object-fit:cover;
  margin-bottom:1rem;
}

.logo {
  width:100px;
  margin-bottom:1rem;
}

.subtitle {
  color:#500977;
  font-weight:bold;
  padding: 10px 20px;
  border: 0.5px solid #333;
}

.about p 
{
    margin: 0rem 2rem;
}

.about, .social, .contact {
  margin-top:2.5rem;
  text-align:center;
  
  /* NORMAL */
      --fc-normal-filed-bg-color: #F7F9FC;
      --fc-border-color: #ECEFF9;
      --fc-normal-text-color: #0E0B3D;
      --fc-normal-placeholder-color: #B3B8D0;

      /* PRIMARY COLOR | HSL FORMAT*/
      --fc-primary-color-hue: 264;
      --fc-error-color-hue: 356;
      --fc-primary-hsl: var(--fc-primary-color-hue), 100%, 54%;
      --fc-error-hsl: var(--fc-error-color-hue), 100%, 54%;

      /* HOVER */
      --fc-field-hover-bg-color: #FFFFFF;
      --fc-border-hover-color: #DDE0EE;
      --fc-field-hover-text-color: #B3B8D0;

      --fc-border-active-color: #1463FF;
}



button {
  background:#500977;
  color:#ffffff;
  border:none;
  padding:0.7rem;
  font-weight:bold;
  cursor:pointer;
}

footer {
  margin-top:3rem;
  text-align:center;
  opacity:0.7;
}
 
    /*=============================================
    =            Fields           =
    =============================================*/
    
    .social input,
    .social textarea,
    .social select {
      margin-top: 4px;
      width: 100%;
      height: 42px;
      border: 1px solid var(--fc-border-color);
      box-shadow: 0 1px 2px var(--fc-border-color);
      color: var(--fc-normal-text-color);
      background-color: var(--fc-normal-filed-bg-color);
      border-radius: 10px;
      padding: 8px 12px;
      
      font-family: "Inter", sans-serif;
      font-size:14px;
      transition: 125ms background, 125ms color, 125ms box-shadow;
    }

    .social textarea{
      min-height: 188px;
      max-width: 100%;
      padding-top: 12px;
    }

    .social input::placeholder,
    .social textarea::placeholder,
    .social select::placeholder {
      color: var(--fc-normal-placeholder-color);
    }

    .social input:hover,
    .social textarea:hover,
    .social select:hover {
      border-color: var(--fc-border-hover-color);
      background-color: var(--fc-field-hover-bg-color);
    }

    .social input:hover::placeholder,
    .social textarea:hover::placeholder,
    .social select:hover::placeholder {
      color: var(--fc-field-hover-text-color);
    }

    .social input:focus,
    .social textarea:focus,
    .social select:focus {
      background-color: #fff;
      border: 2px solid hsl(var(--fc-primary-hsl));
      box-shadow: 0px 1px 6px hsla(var(--fc-primary-hsl), 17%), 0px 2px 0px hsla(var(--fc-primary-hsl), 14%);
      outline: none;
    }

    .social input:focus,
    .social select:focus {
      padding: 8px 11px;
    }

    .social textarea:focus {
      padding: 11px;
    }

    .formcarry-container select {
      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9997 14.5001L8.46387 10.9642L9.64303 9.78589L11.9997 12.1434L14.3564 9.78589L15.5355 10.9642L11.9997 14.5001Z' fill='%236C6F93'/%3E%3C/svg%3E%0A");
      background-size: 24px 24px;
      background-position: 98%;
      background-repeat: no-repeat;
      appearance: none;
      -webkit-appearance: none;
    }

    .social button {
      font-family: "Inter", sans-serif;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: -0.02em;
      height: 40px;
      line-height: 24px;
      width: 100%;
      border: 0;
      border-radius: 10px;
      box-sizing: border-box;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%), hsla(var(--fc-primary-hsl));
      color: #fff;
      cursor: pointer;
      box-shadow: 0px 2px 4px -2px hsla(var(--fc-primary-hsl), 64%), inset 0px -2px 4px rgba(255, 255, 255, 0.16);
      
      transition: 125ms all;
    }
    
    .social button:hover {
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), hsla(var(--fc-primary-hsl));
    }
    
    .social button:focus {
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), hsla(var(--fc-primary-hsl));
      border-inline: 1px solid inline rgba(255, 255, 255, 0.6);
      box-shadow: 0px 0px 0px 3px rgba(var(--fc-primary-hsl), 12%);
    }

    .social button:active {
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), hsla(var(--fc-primary-hsl));
    }

    .social button:disabled {
      background-color: hsla(var(--fc-primary-hsl), 40%);
      cursor: not-allowed;
    }

    .social input:focus:required:invalid,
    .social input:focus:invalid, 
    .social select:focus:required:invalid,
    .social select:focus:invalid
    {
      color: hsl(var(--fc-error-hsl)); 
      border-color: hsl(var(--fc-error-hsl));
      box-shadow: 0px 1px 6px hsla(var(--fc-error-hsl), 17%), 0px 2px 0px hsla(var(--fc-error-hsl), 14%);
    }

    /*=====  End of Fields  ======*/


@media(max-width:600px){
  .hero-img { max-height:200px; }
}