.header {
  position: relative;
  z-index: 99;
  .top-header {
    display: flex;

    height: 3.75rem;
    padding: 1rem 0rem;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(170, 170, 170, 0.5);
    background: var(--primary_color);

    .holder {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .social {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      transition: 0.3s ease-out;
      li {
        &:hover {
          a {
            transition: 0.3s ease-out;
            color: black;
          }
        }
      }
      font-size: 1.3rem;
      a {
        transition: 0.3s ease-out;

        color: white;
      }
    }
    .contacts {
      ul {
        display: flex;
        align-items: center;
        gap: 1rem;
        li {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          color: #fff;
          font-family: Archivo;
          font-size: 1rem;
          font-style: normal;
          font-weight: 300;
          line-height: 100%; /* 1rem */
        }
      }
    }
  }
  .head-lower {
    padding: 1rem 0rem;
    border-bottom: 1px solid rgba(185, 185, 185, 0.7);
    background-color: transparent !important;

    position: absolute;
    width: 100%;
    .dropdown {
      > a {
        color: white;
      }
    }

    .search-btn {
      height: 2.5rem;
      width: 2.5rem;
      display: flex;
      padding: 0.6875rem;
      align-items: center;
      justify-content: center;
      gap: 0.625rem;
      border-radius: 9.375rem;
      background: var(--primary_color);
      flex-shrink: 0;
      color: white;
    }
  }
}
/* banner */
.parent-banner {
  position: relative;
  height: 100dvh;
  background-size: cover !important;

  &::before {
    position: absolute;
    content: "";
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
  }
  align-content: center;

  .triangle {
    position: absolute;
    inset-inline-end: 0.4375rem;
    bottom: 1.8125rem;
  }
  .circle-two {
    width: 10.4375rem;
    height: 10.4375rem;
    border-radius: 50%;
    position: absolute;
    inset-inline-end: 0.125rem;
    bottom: 1.0625rem;
    border: 3px solid var(--primary_color);
    z-index: 2;
  }
  .shaps {
    position: absolute;
    inset-inline-end: 7.5rem;
    top: 50%;
    transform: translateY(-50%);
  }
  .circle-one {
    width: 13.625rem;
    height: 13.625rem;
    position: absolute;
    inset-inline-start: 5rem;
    border-radius: 50%;
    z-index: 1;
    top: 11rem;
    z-index: 1;
    /* background: linear-gradient(180deg, var(--primary_color) 0%, #1a2b84 100%); */
    background: linear-gradient(180deg, var(--secondary_color) 0%, color-mix(in srgb, var(--secondary_color), transparent 50%) 100%);
  }
  .z-3 {
    position: relative;
    z-index: 3;
  }
  .title {
    color: var(--primary_color);
    font-family: Exo;
    font-size: 6rem;
    font-style: normal;
    font-weight: 700;
    line-height: 6.6rem;
    letter-spacing: -0.006rem;
    margin: 1rem 0 3rem;
    max-width: 50rem;
    span {
      color: #fff;
      font-family: Exo;
      font-size: 6rem;
      font-style: normal;
      font-weight: 700;
      line-height: 6.6rem; /* 110% */
      letter-spacing: -0.006rem;
    }
  }
  p {
    color: var(--primary_color);
    font-family: Archivo;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem; /* 187.5% */
    letter-spacing: 0.1rem;
    text-transform: uppercase;
  }
  .theme-btn {
    background-color: var(--secondary_color);
  }
}
.outer-box {
  gap: 1rem;
  display: flex;
  align-items: center;
}
/* start about banner */
.about {
height: 29rem;
.dott {
    inset-inline-end: 2rem;
  }

  .crumb {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    i,
    a {
      color: white;
      &.active {
        color: var(--primary_color);
      }
    }
  }
}

/* footer */
.parent-footer {
  .r-1 {
    padding: 1.875rem 0;
    align-items: center;
  }
  .r-2 {
    padding: 3.75rem 0;
  }
  .logo {
    width: 10.1875rem;
    height: 3.875rem;
    flex-shrink: 0;
    aspect-ratio: 163/62;
  }
  .contact {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
    font-family: Archivo;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 100%; /* 1rem */
    i {
      font-size: 1.5rem;
    }
  }
  .cont-2 {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    a {
      display: flex;
      padding: 0.625rem 1.6875rem;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      border: 1px solid #fff;
      color: #fff;
      font-family: Archivo;
      font-size: 1rem;
      font-style: normal;
      font-weight: 400;
      line-height: 100%; /* 1rem */
      transition: 0.3s ease-out;
      &:hover {
        background-color: white;
        color: var(--primary_color);
      }
    }
  }
  h4,
  h5 {
    color: #fff;
    font-family: Exo;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.75rem; /* 140% */
    margin-bottom: 1.25rem;
  }
  .info {
    display: flex;
    gap: 1.25rem;
    flex-direction: column;

    p {
      color: #aaa;
      font-family: Archivo;
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.4rem; /* 160% */
    }
    .theme-btn {
      background-color: var(--secondary_color) !important;
      display: flex;
      align-items: center;
      gap: 0.2rem;
      span {
        color: #fff;
        font-family: Archivo;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 300;
        line-height: 100%; /* 0.875rem */
        display: block;
        margin-bottom: 0.6rem;
      }
      i {
        font-size: 1.5rem;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .links {
    li {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: Archivo;
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: 100%; /* 0.875rem */
      margin-bottom: 1.25rem;
      transition: 0.3s ease-out;
      cursor: pointer;
      color: #fff;
      a {
        color: #fff;
      }
      &:hover {
        color: #2d4a8a;
        a {
          transition: 0.3s ease-out;
          color: #2d4a8a;
        }
      }
      img {
        width: 3.875rem;
        height: 3.875rem;
        aspect-ratio: 1/1;
        padding: 0.2rem;
        border: 1px solid var(--primary_color);
      }
      .desc {
        p {
          color: #fff;
          font-family: Archivo;
          font-size: 0.875rem;
          font-style: normal;
          font-weight: 400;
          line-height: 1.25rem; /* 142.857% */
          margin-bottom: 0.25rem;
        }
        .date {
          color: #aaa;
          font-family: Archivo;
          font-size: 0.75rem;
          font-style: normal;
          font-weight: 400;
          line-height: 1.25rem; /* 166.667% */
        }
      }
    }
    .title {
      color: #aaa;
      font-family: Archivo;
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.3125rem; /* 150% */
      margin-bottom: 1.2rem;
    }
    .field {
      display: flex;
      align-items: center;
      border: 1px solid #fff;
      position: relative;
      margin-bottom: 1.2rem;
      input {
        color: #fff;
        font-family: Archivo;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding: 0.94rem 0 0.94rem 2.8rem;
        flex: 1;
        background-color: transparent;
      }
      .fa-envelope {
        position: absolute;
        font-size: 0.8rem;
        inset-inline-start: 1.2rem;
        top: 50%;
        transform: translateY(-50%);
        color: white;
      }
      button {
        flex-shrink: 0;
        width: 2.8125rem;
        height: 2.75rem;
        background: linear-gradient(90deg, var(--secondary_color) 0%, var(--secondary_color) 100%), var(--secondary_color);
        display: flex;
        align-items: center;
        justify-content: center;
        i {
          color: white;
        }
      }
    }
  }
  .social {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    span {
      font-size: 1.2rem;
    }
  }
  .end {
    background: var(--primary_color);
    padding: 1.25rem 0;
    span {
      color: #fff;
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      align-content: center;
    }
    ul {
      display: flex;
      align-items: center;
      li {
        transition: 0.3s;
        &:not(:last-child) {
          border-inline-end: 1px solid white;
          margin-inline-end: 0.5rem;
          padding-inline-end: 0.5rem;
        }
        &:hover {
          a {
            color: var(--secondary_color);
          }
        }
        a {
          color: #fff;
          font-size: 0.875rem;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }
      }
    }
  }
}