* {
  padding: 0%;
  margin: 0%;
  box-sizing: border-box;
}
body {
  background-color: rgb(4, 16, 38);
}
/* font-family: "Open Sans", sans-serif;
  font-family: "Lato", sans-serif; */
.hero-image {
  width: 100%;
  background: linear-gradient(
      to right,
      rgba(16, 31, 49, 0.776),
      rgba(20, 29, 65, 0.8)
    ),
    url("images/Rectangle 12.png");
  height: 800px;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

  .header-top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-left-side {
      img:hover {
        scale: 1.05;
        transition: 0.5s;
      }
    }

    .header-right-side {
      padding-right: 82px;
      display: flex;
      gap: 16px;
      a {
        text-decoration: none;
        color: white;
        text-transform: uppercase;
        font-size: 14px;
        padding: 8px 18px;
        letter-spacing: 1px;
        border-radius: 8px;
        font-family: "Open Sans", sans-serif;

        &:hover {
          background-color: black;
          scale: 1.05;
          transition: 0.5s;
        }
      }
    }
  }

  .header-content-section {
    width: 50%;
    margin-left: 130px;
    margin-top: 130px;
    h1 {
      font-family: "Lato", sans-serif;
      font-size: 50px;
      color: white;
    }
    p {
      color: rgb(224, 223, 223);
      margin-top: 30px;
      font-size: 25px;
      font-family: sans-serif;
      font-weight: lighter;
      letter-spacing: 1px;
    }

    button {
      margin-top: 80px;
      font-size: 20px;
      font-weight: bolder;
      color: white;
      background-color: transparent;
      border: 0cap;
      border: 2px solid white;
      padding: 20px;
      border-radius: 10px;
      margin-right: 10px;
      letter-spacing: 1px;
      cursor: pointer;

      &:hover {
        background-color: black;
        border-color: black;
        scale: 1.05;
        transition: 0.5s;
      }
    }
  }
  .right-side-icon {
    background-color: rgb(255, 255, 255);
    padding: 20px;
    width: 45px;
    height: 120px;
    position: absolute;
    right: 0%;
    gap: 10px;
    display: flex;
    flex-direction: column;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 10px;
    align-items: center;
    bottom: 22%;

    .fa {
      color: black;
    }
  }
}
.hajj-packages {
  width: 100%;

  .hajj-heading {
    font-family: "Lato", sans-serif;
    font-size: 36px;
    margin-top: 50px;
    text-align: center;
    font-weight: 400;
    h3 {
      color: white;
    }
  }
  .hajj-images {
    width: 82%;
    margin: auto;
    margin-top: 70px;
    gap: 50px;
    display: flex;
    justify-content: center;
  }
}
.umrah-packages {
  width: 100%;

  .umrah-heading {
    font-family: "Lato", sans-serif;
    font-size: 36px;
    margin-top: 50px;
    text-align: center;
    font-weight: 400;
    h3 {
      color: white;
    }
  }
  .umrah-images {
    width: 82%;
    margin: auto;
    margin-top: 50px;
    gap: 37px;
    display: flex;
    justify-content: center;
  }
}
.Domestic-packages {
  width: 100%;

  .Domestic-heading {
    font-family: "Lato", sans-serif;
    font-size: 36px;
    margin-top: 50px;
    text-align: center;
    font-weight: 400;
    h3 {
      color: white;
    }
  }
  .Domestic-images {
    width: 82%;
    margin: auto;
    margin-top: 20px;
    gap: 42px;
    display: flex;
    justify-content: center;
  }
}
.international-tour-section {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("images/image\ \(2\).png");

  width: 100%;
  margin-top: 50px;
  background-repeat: no-repeat;
  padding-top: 20px;
  background-size: cover;
  padding-bottom: 50px;

  .content-section {
    width: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;

    h3 {
      font-family: "Lato", sans-serif;
      color: white;
      font-size: 38px;
      margin-top: 10px;
    }
    p {
      font-family: "Lato", sans-serif;
      color: white;
      text-align: center;
      font-size: 22px;
      font-weight: 400;
      margin-top: 15px;
    }
  }

  .International-images {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 50px;
  }
}
.choose-us-section {
  width: 100%;
  padding-top: 100px;
  position: relative;

  .content {
    text-align: center;
    width: 82%;
    margin: auto;

    h3 {
      font-family: "Lato", sans-serif;
      font-size: 38px;
      color: white;
    }
  }
  .boxes {
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    padding-top: 50px;
    gap: 20px;

    .box {
      width: 31.5%;
      max-width: 400px;
      height: 293px;
      border: 1px solid;
      border-radius: 33px;
      background-color: #3f7ae5;
      border: 0cap;
      display: flex;
      gap: 15px;
      align-items: center;
      flex-direction: column;
      padding: 20px;

      &:hover {
        transition: 0.1s;
        scale: 1.02;
      }

      h4 {
        font-family: "Open Sans", sans-serif;
        color: white;
        font-weight: 400;
        font-size: 22px;
      }
      p {
        font-family: "Open Sans", sans-serif;
        color: white;
        font-weight: 200px;
        font-size: 13px;
        max-width: 200px;
        letter-spacing: 1px;
      }
    }
    .color {
      background-color: #2851a0;
    }
    .color1 {
      background-color: #3669cb;
    }
  }
  .circle {
    position: absolute;
    left: 41.5%;
    top: 20%;
    background-color: #3669cb;
    width: 52px;
    height: 52px;
    border-radius: 50px;
    z-index: -1;
    border: 0cap;

    @media (max-width: 1440px) {
      left: 38.8%;
    }
  }
  .line1 {
    width: 293px;
    height: 31px;
    background-color: #3669cb;
    position: absolute;
    border: 0cap;

    right: 15%;
    top: 5%;
    transform: rotate(-33deg);
    border-radius: 14px;
    z-index: -1;

    @media (max-width: 1440px) {
      right: 5%;
    }
  }
  .line2 {
    width: 253px;
    height: 31px;
    background-color: #4e98fd;
    position: absolute;
    border: 0cap;
    right: 10%;
    top: 1%;
    transform: rotate(-33deg);
    border-radius: 14px;
    z-index: -1;
    @media (max-width: 1440px) {
      right: -2%;
    }
  }
}
.experience-section {
  width: 100%;
  padding-top: 80px;

  .experience-top-section {
    display: flex;
    justify-content: center;
    color: white;
    gap: 20px;
    align-items: center;

    p {
      font-family: "Lato", sans-serif;
      font-size: 18px;
      font-weight: 300;
    }
    .line {
      color: rgb(255, 255, 255);
      width: 15%;
      border-bottom: 2px solid;
    }
  }
  h3 {
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 15px;
    font-family: "Lato", sans-serif;
    font-size: 34px;
  }

  .boxes {
    padding: 20px;
    padding-top: 50px;
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 65px;
    max-width: 1140px;

    .group {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .box {
        border-radius: 15px;
        background-color: #c19a51;
        height: 185px;
        width: 185px;
        color: aliceblue;
        display: flex;
        justify-content: center;
        align-items: center;

        &:hover {
          scale: 1.05;
          transition: 0.2s;
        }
      }
      p {
        font-family: "Lato", sans-serif;
        text-align: center;
        font-size: 22px;
        padding: 10px;
        color: #c19a51;
      }
      .chang {
        color: white;
      }
      .change {
        background-color: #878787;
      }
    }
  }
}
.services-section {
  background: linear-gradient(
      to right,
      rgba(39, 61, 117, 0.4),
      rgba(14, 34, 69, 0.4)
    ),
    url("images/Rectangle\ 68.png");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 30px;
  padding: 50px;
  h3 {
    font-family: "Lato", sans-serif;
    color: white;
    text-align: center;
    font-size: 33px;
  }
  .sub-heading {
    font-family: "Open Sans", sans-serif;
    color: white;
    font-size: 21px;
    text-align: center;
    margin-top: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    max-width: 1250px;
    margin: 15px auto;
  }
  .content {
    margin-top: 40px;
    width: 85%;
    max-width: 1140px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
    justify-content: center;
    align-items: center;
    padding-top: 20px;

    .content-box {
      width: 46%;
      height: 105px;
      background-color: rgb(4, 16, 38);
      border-radius: 20px;
      display: flex;
      justify-content: space-between;

      .logos {
        height: 100%;
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .box-content {
        width: 80%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;

        h5 {
          font-family: "Open Sans", sans-serif;
          color: white;
          font-size: 17px;
        }
        .setting {
          font-family: "Open Sans", sans-serif;
          color: rgb(209, 208, 208);
          font-size: 10px;
          max-width: 300px;
        }
      }
    }
  }
}
.pilgrimage-section {
  width: 100%;
  /* background-color: rgb(80, 136, 136); */
  margin-top: 70px;
  padding: 10px;

  .heading {
    text-align: center;
    font-size: 36px;
    font-family: "Lato", sans-serif;
    color: white;
  }
  .sub-heading {
    text-align: center;
    font-size: 21px;
    font-family: "Lato", sans-serif;
    max-width: 650px;
    margin: auto;
    margin-top: 8px;
    color: white;
    letter-spacing: 1px;
  }
  .describe-section {
    width: 80%;
    max-width: 1300px;
    margin: auto;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 80px;

    .boxes {
      background-color: #1c2a3e;
      border-radius: 10px;

      img {
        width: 100%;
      }
      h5 {
        color: white;
        font-family: "Lato", sans-serif;
        text-align: center;
        padding: 10px;
        font-size: 22px;
        font-weight: 400;
      }
      ul {
        
        list-style-type: none;

        li {
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          gap: 10px;

          span {
            color: white;
            font-family: "Lato", sans-serif;
            font-size: 22px;
          }
          .check{
            width: 25px;
          }
        }
      }
      .description {
        margin: 20px 0px 0px 20px;
      }
    }
  }
}