@import "./fonts.css";

:root {
  --primary-100: #193380;
  --primary-90: #2042A5;
  --primary-70: #446ADB;
  --primary-50: #E8ECFB;
  --secondary-95: #EE8350;
  --tertiary-30: #F7FBFD;
  --neutral-100: #2F2A2A;
  --neutral-70: #8996A1;
  --neutral-55: #D8DEE2;
  --neutral-40: #E7EAEC;
  --neutral-35: #E4E4E4;
  --neutral-white: #FFFFFF;
}

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

body {
  font-family: 'sofiapro-regular', sans-serif;
  font-weight: 400;
}

.font-sofia-regular{
  font-family: 'sofiapro-regular', sans-serif;
  font-weight: 400;
}
.font-poppins-medium {
  font-family: 'poppins-medium', sans-serif;
  font-weight: 500;
}
.font-poppins-semibold {
  font-family: 'poppins-semibold', sans-serif;
  font-weight: 600;
}

.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding-top: 36px;
  padding-bottom: 64px;
  background-image: url("../images/bg-header.png");
  background-size: 100% 40%;
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
}

.content {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  margin-top: 36px;

  > .description {
    display: flex;
    width: 928px;
    padding-left: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;

    h3 {
      color: var(--primary-100);
      font-size: 28px;
      line-height: 40px;
      letter-spacing: 0.56px; 
    }
    hr { 
      width: 100%;
      border: 1px solid var(--neutral-40);
    }
    h5 {
      color: var(--primary-70);
      font-size: 20px;
      font-weight: 400;
      line-height: 32px;
      letter-spacing: 0.4px;
    }
    p {
      color: var(--neutral-70);
      font-size: 16px;
      line-height: 24px;
    }
  }

  .user-container {
    position: relative;
    width: 928px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;

    .user-info {
      width: 100%;
      display: flex;
      padding: 16px;
      align-items: center;
      gap: 36px;
      border-radius: 12px;
      border: 1px solid var(--neutral-35);
      background: var(--tertiary-30);

      .info {
        display: flex;
        align-items: center;
        gap: 20px;

        img {
          border-radius: 8px;
          opacity: 0.8;
        }

        .description {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          p {
            color: var(--primary-70);
            font-size: 16px;
            line-height: 24px;
          }
          h5 {
            color: var(--primary-100);
            font-size: 20px;
            line-height: 32px;
          }
        }
      }

      .divider {
        width: 56px;
        height: 1px;
        transform: rotate(90deg);
        background: var(--neutral-55);
      }

      .contact-links {
        display: flex;
        align-items: flex-start;
        gap: 16px;

        a {
          display: flex;
          padding: 10px 14px;
          flex: none;
          align-items: center;
          text-decoration: none;
          gap: 8px;
          border-color: transparent;
          border-radius: 8px;
          background: var(--primary-70);
          color: var(--neutral-white);
          cursor: pointer;

          span {
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
          }
        }
      }
    }

    > .buttons {
      display: flex;
      align-items: flex-start;
      gap: 16px;

      a {
        text-decoration: none;
        cursor: pointer;
      }
    }
  }
}

@media only screen and (max-width: 930px) and (min-width: 769px) {
  .content {
    align-items: center;
    > .description,
    .user-container,
    .buttons {
      width: 746px;
    }

    > img {
      width: 746px;
      height: auto;
    }

    .user-container {
      .user-info {
        gap: 16px;

        .info {
          width: 100%;
          gap: 16px;
        }

        .contact-links {
          width: 50%;
          justify-content: center;
          a span{
            display: none;
          }
        }
      }
    }	
  }
}

@media only screen and (max-width: 768px) {
  .container {
    background-size: 100% 30%;
  }
  .content {
    align-items: center;
    > .description,
    .user-container,
    .buttons {
      width: 95%;
    }

    > img {
      width: 95%;
      height: auto;
    }

    .user-container {
      .user-info {
        justify-content: center;
        flex-direction: column;
        gap: 16px;

        .info {
          width: 100%;
          justify-content: center;
          gap: 16px;
        }

        .divider {
          width: 90%;
          transform: rotate(0deg);
        }
        .contact-links {
          width: 50%;
          justify-content: center;
        }
      }
    }	

    .buttons {
      width: 100%;
      justify-content: center;
    }
  }
}

@media only screen and (max-width: 540px) {
  .container {
    background-image: url("../images/bg-header-mobile.png");
    background-size: 100% 30%;
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 175px;

    > img {
      display: none;
    }
  }
  .content {
    > .description {
      h3 {
        text-align: center;
        align-self: stretch;
      }
    }
    .user-container {
      .user-info {
        .contact-links {
          a span{
            display: none;
          }
        }
      }
    }	
  }
}