@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --color-gray: #2a3b4d;
  --color-pink: #ff7481;
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  background-color: var(--color-gray);
  font-family: "Montserrat", sans-serif;
  color: #1d1d1b;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('assets/hero.jpg');
  background-size: cover;
  background-position: center top;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(42,59,77,1) 10%, rgba(255,255,255,0) 35%);
  }
}

ul li {
  margin-left: 1rem;
  margin-bottom: .5rem;
}

table {
  width: 100%;
  color: #fff;
  tr:nth-of-type(2n) { background-color: #556271; }
  th { background-color: var(--color-pink); font-weight: 400; padding: 0.5rem 1rem; text-align: left; }
  td { padding: 0.5rem 1rem; }
}

.contact {
  padding: 3rem 0;
  background-color: var(--color-pink);
  h2 { text-transform: none; }

  input {
    width: 100%;
    background: transparent;
    padding: .5rem 1rem;
    border: 1px solid var(--color-gray);
    &::placeholder {
      color: var(--color-gray);
      opacity: 1; /* Firefox */
    }
    &::-ms-input-placeholder { /* Edge 12 -18 */
      color: var(--color-gray);
    }
  }
}

#contact-form {
  position: relative;
  &.sent {
    * {pointer-events: none; opacity: 0.5;}
    &::after {
      content: attr(data-sent);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 700;
    }
  }
}

button:not(.fancybox-button) {
  padding: .5rem 1rem !important;
  background-color: #fff !important;
  color: var(--color-pink) !important;
  font-weight: 700 !important;
  transition: .3s ease-out;
  &:hover { background-color: var(--color-gray) !important; }
}

h1 {
  font-size: 3rem !important;
  font-weight: 900 !important;
  line-height: 3.5rem;
  color: #fff;
  text-transform: uppercase;
}

h2 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  line-height: 2rem;
  color: var(--color-pink);
  text-transform: uppercase;
  margin-bottom: 1rem !important;
}

p { margin-bottom: 1rem !important; }

.container { padding-left: 15px; padding-right: 15px; }

* { outline: none !important; }

/***** MIN-WIDTH *****/
@media (min-width: 1536px) { .container { max-width: 1280px !important; } }
@media (min-width: 1280px) { .container { max-width: 1280px !important; } }

/***** MAX-WIDTH *****/
@media (max-width: 1536px) {

}

@media (max-width: 1280px) {
  .hero { height: 90vh; }
}

@media (max-width: 1024px) {

}

@media (max-width: 768px) {
  .hero { height: 70vh; }
  
  table { font-size: .9rem; }
  
  h1 { font-size: 2rem !important; line-height: 2.5rem !important; }
  h2 { font-size: 1.25rem !important; line-height: 1.75rem !important; }
}

@media (max-width: 640px) {

}