@layer reset, base, theme, components, utils;

@layer reset {
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    margin: 0;
    font-size: inherit;
    font-weight: normal;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
}

@layer base {
  body {
    margin: 0;
    font-size: 1.125rem;
    background: var(--bg-color);
    color: var(--foreground-color);

    @media (max-width: 800px) {
      font-size: 1rem;
    }
  }
}

@layer theme {
  :root {
    --bg-color: #ffffff;
    --foreground-color: #ffffff;
    --accent-color-blue: #2c519d;
    --accent-color-text: #082663;
    --gradient-color: linear-gradient(90deg, #2c519d, #3a5a9d82 51%);
    --form-color: #3a3a3a;
    --form-color-input: #94a3b8;
    --form-color-header: #20292e;
    --form-bg: #f5f6fa;
  }
}

/* header style */
@layer components {
  .main-header {
    background: var(--gradient-color), url(./img/header\ bg.png);
    height: 883px;
    width: 100%;
    background-size: cover;
  }

  .main-header-top-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    padding-block: 2rem;
    padding-inline-start: 2rem;
    font-weight: 700;

    @media (max-width: 1200px) {
      grid-template-columns: 1fr auto;
    }

    @media (max-width: 500px) {
      align-items: start;
      padding-inline-start: 0;
      padding-block-end: 0;
    }

    @media (max-width: 350px) {
      padding-inline-start: 0;
    }
  }

  .main-header-nav {
    display: flex;
    gap: 2rem;
    padding-inline-end: 2rem;

    @media (max-width: 768px) {
      flex-direction: column;
    }

    @media (max-width: 350px) {
      padding-inline-end: 0;
    }
  }

  .main-header-content {
    /* padding-inline: 2rem; */
    margin-inline: auto;
    max-width: 1750px;
  }

  .main-header-contents {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    align-items: center;
    padding-inline: 4rem;

    @media (max-width: 955px) {
      padding-block-start: 8rem;
      align-self: flex-start;
      padding-inline: 2rem;
    }

    & a {
      background: #007aff;
      max-width: 240px;
      padding-inline: 1rem;
      padding-block: 1.25rem;
      border-radius: 0.5rem;
      border: none;
      color: var(--foreground-color);
      font-weight: 400;
      cursor: pointer;
      text-align: center;
      text-decoration: none;

      @media (max-width: 1200px) {
        max-width: 140px;
      }
    }
  }

  .main-header-texts {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    h1 {
      font-weight: 700;
      font-size: 4rem;
      max-width: 670px;

      @media (max-width: 1200px) {
        font-size: 2rem;
        font-weight: 600;
        max-width: 300px;
        text-wrap: balance;
      }
    }

    p {
      font-weight: 600;
      max-width: 603px;
      line-height: 33px;
    }
  }

  .header-image {
    width: 600px;
    height: 748px;

    @media (max-width: 955px) {
      display: none;
    }
  }
}

/* About us styles  */
@layer components {
  .about-us {
    color: var(--accent-color-text);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    padding-block: 8rem;
    padding-inline: 6.75rem;

    @media (max-width: 1200px) {
      padding-inline: 4.75rem;
      padding-block: 4rem;
    }

    @media (max-width: 800px) {
      padding-inline: 1.75rem;
      padding-block: 2rem;
    }

    h1 {
      font-weight: 800;
      font-size: 2.5rem;
      color: var(--accent-color-blue);
      display: flex;
      flex-direction: column;

      @media (max-width: 1200px) {
        font-weight: 700;
        font-size: 2rem;
      }
      @media (max-width: 800px) {
        font-weight: 500;
        font-size: 1.3rem;
      }
    }

    h1::after {
      content: "";
      display: block;
      width: 152px;
      height: 10px;
      background: linear-gradient(90deg, #ffd601, #edf1fa);

      @media (max-width: 1200px) {
        width: 100px;
        height: 7px;
      }
      @media (max-width: 800px) {
        width: 50px;
        height: 5px;
      }
    }
  }
  .about-texts {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-inline: auto;

    p {
      font-weight: 500;
      font-size: 1.8rem;
      line-height: 100%;

      @media (max-width: 1200px) {
        font-size: 1.3rem;
      }
    }
  }
}

/* our service styles */
@layer components {
  .service-container {
    background: linear-gradient(rgba(44, 81, 157, 0.86)),
      url(./img/services\ bg.png);
    background-size: cover;
    height: 372px;
    border-radius: 0 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    padding-block-start: 3rem;
    position: relative;

    @media (max-width: 450px) {
      border-radius: 0 0 0 0;
      padding-block-start: 5rem;
    }

    h1 {
      font-weight: 800;
      font-size: 4rem;

      @media (max-width: 1200px) {
        font-size: 2rem;
        font-weight: 600;
      }
    }
    p {
      font-weight: 500;
      font-size: 1.6875rem;
      width: 874px;

      @media (max-width: 1200px) {
        width: 400px;
        font-weight: 400;
        font-size: 1.3rem;
      }

      @media (max-width: 420px) {
        width: 200px;
      }
    }
  }

  .service-container::after {
    content: "";
    display: block;
    width: 255px;
    height: 224px;
    border-radius: 300px 0 0 0;
    background: #ffd601;
    position: absolute;
    bottom: 0;
    right: 0;

    @media (max-width: 1200px) {
      display: none;
    }
  }
}

/* servive outline box styles */
@layer components {
  .service-outline {
    position: relative;
    margin-inline: auto;
    height: 823.03px;
    width: 100%;
    margin-block-start: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background-image: url(./img/services\ bg2.png);
    background-repeat: no-repeat;
    /* background-size: 898.97px 652.55px; */
    background-position: center;

    @media (max-width: 1023px) {
      background-image: none;
      height: auto;
      padding-block-end: 2rem;
    }
  }

  .show {
    @media (max-width: 2550px) {
      display: none;
    }
  }
  .one {
    position: absolute;
    top: 0;
    right: 700px;
  }
  .two {
    position: absolute;
    bottom: 60px;
    left: 900px;
  }
  .three {
    position: absolute;
    left: 650px;
    bottom: 240px;
  }
  .four {
    position: absolute;
    top: 20px;
  }
  .five {
    position: absolute;
    right: 700px;
    top: 350px;
  }

  .boxes-one {
    display: flex;
    gap: 1.5rem;

    @media (max-width: 1023px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* flex-direction: column; */
    }

    @media (max-width: 768px) {
      display: flex;
      flex-direction: column;
    }

    .white {
      background-color: var(--bg-color);
      color: var(--accent-color-text);
    }

    div {
      height: 276px;
      width: 301px;
      background: var(--accent-color-blue);
      border-radius: 35px;
      box-shadow: 0px 4px 10px 0px #00000040;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding-inline-start: 1rem;
      justify-content: center;
      font-weight: 700;

      img {
        align-self: flex-start;
      }
    }
  }

  .boxes-two {
    display: flex;
    gap: 1.5rem;

    @media (max-width: 1023px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    @media (max-width: 768px) {
      display: flex;
      flex-direction: column;
    }

    .white {
      background-color: var(--bg-color);
      color: var(--accent-color-text);
    }

    div {
      height: 276px;
      width: 301px;
      background: var(--bg-color);
      color: var(--accent-color-text);
      border-radius: 35px;
      box-shadow: 0px 4px 10px 0px #00000040;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding-inline-start: 1rem;
      justify-content: center;
      font-weight: 700;

      img {
        align-self: flex-start;
      }
    }
  }
}

/* contact us styles */

@layer components {
  .contact {
    background: var(--form-bg);
    height: 798px;
    display: flex;
    justify-content: space-around;
    padding-block-start: 8rem;
    margin-block-start: 3rem;
    width: 100%;
    margin-inline: auto;

    @media (max-width: 1024px) {
      height: 950px;
    }

    @media (max-width: 1024px) {
      flex-direction: column;
      gap: 2rem;
      padding-block-start: 2rem;
      align-items: center;
    }

    @media (max-width: 768px) {
      background: var(--bg-color);
    }
  }

  .contact-container {
    h1 {
      font-weight: 700;
      font-size: 3rem;
      width: 420px;
      color: var(--form-color);

      @media (max-width: 600px) {
        /* font-weight: 500; */
        font-size: 2rem;
        text-align: center;
        width: 100%;
      }
    }
    p {
      font-weight: 400;
      padding-block-start: 1rem;
      color: #1e293b;

      @media (max-width: 600px) {
        /* font-weight: 200; */
        text-align: center;
        width: 100%;
      }
    }
  }

  .form-container {
    width: 696px;
    height: 577px;
    border-radius: 8px;
    background: var(--bg-color);
    padding-block: 3rem;
    display: flex;
    /* background: red; */
    /* align-items: center; */
    justify-content: center;

    @media (max-width: 1024px) {
      height: 550px;
      margin-block-end: 2rem;
    }

    @media (max-width: 768px) {
      width: 100%;
      padding-block-end: 1rem;
    }
  }

  .first-form {
    display: flex;
    gap: 1rem;

    @media (max-width: 768px) {
      flex-direction: column;
      gap: 0;
    }
  }

  .form-one {
    color: var(--form-color-header);
    font-weight: 400;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* padding-block-end: 2rem; */

    input[type="text"] {
      width: 300px;
      height: 56px;
      border-radius: 8px;
      border: 1px solid #dadada;
      padding-inline-start: 0.8rem;
    }

    input:-moz-within {
      border: none;
    }

    input::placeholder {
      font-weight: 300;
      color: #94a3b8;
      /* padding-inline-start: 0.8rem; */
    }
  }

  .second-form {
    display: flex;
    gap: 1rem;

    @media (max-width: 768px) {
      flex-direction: column;
      gap: 0;
    }
  }

  .form-one {
    color: var(--form-color-header);
    font-weight: 400;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-block-end: 2rem;

    input {
      width: 300px;
      height: 56px;
      border-radius: 8px;
      border: 1px solid #dadada;
      /* padding-inline-start: 3px; */
    }

    input::placeholder {
      font-weight: 300;
      color: #94a3b8;
      /* padding-inline-start: 0.8rem; */
    }
  }

  .third-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .message-box {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    font-weight: 400;
    color: #20292e;

    textarea {
      width: 632px;
      height: 142px;
      border-radius: 8px;
      border: 1px solid #dadada;
      font-weight: 300;
      color: #94a3b8;
      resize: none;
      padding-inline-start: 1rem;
      padding-block-start: 1rem;

      @media (max-width: 768px) {
        width: 300px;
      }
    }
  }

  .form-button {
    width: 632px;
    height: 58px;
    border-radius: 8px;
    font-weight: 400;
    color: #fafafa;
    background: #2c519d;
    box-shadow: 0px 1px 2px 0px #1018280d;
    cursor: pointer;
    letter-spacing: 1px;

    @media (max-width: 768px) {
      width: 300px;
    }
  }
}

/* footer styles */

@layer components {
  footer {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: var(--accent-color-blue);
    height: 480px;
    padding-inline-start: 15rem;
    max-width: 100%;
    margin-inline: aut0;

    @media (max-width: 1440px) {
      padding-inline-start: 4rem;
    }

    @media (max-width: 768px) {
      margin-block-start: 12.5rem;
    }
  }

  .footer-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;

    @media (max-width: 768px) {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
  }

  .logo-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    p {
      padding-inline-start: 0.8rem;
      font-weight: 700;
    }
    .icons {
      padding-inline-start: 0.8rem;
      display: flex;
      gap: 1.5rem;
      img {
        cursor: pointer;
      }
    }
  }

  .email-container {
    display: flex;
    flex-direction: column;
    padding-block-start: 0.8rem;
    gap: 1.5rem;

    @media (max-width: 768px) {
      padding-inline-start: 0.8rem;
    }

    h1 {
      font-weight: 700;
    }
    p {
      font-weight: 400;
      line-height: 26px;
      letter-spacing: 0%;
      cursor: pointer;
    }
  }

  .contact-containe {
    display: flex;
    flex-direction: column;
    padding-block-start: 0.8rem;
    gap: 1.5rem;

    @media (max-width: 768px) {
      padding-inline-start: 0.8rem;
    }
    h1 {
      font-weight: 700;
    }
    div {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
  }

  .rights {
    div {
      padding-inline-start: 0.8rem;
      letter-spacing: 0%;
    }
  }
}

@layer utils {
  .font-inter {
    font-family: "Inter", "Times New Roman", serif;
  }

  .font-sora {
    font-family: "Sora", Arial, Helvetica, sans-serif;
  }
}