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

/* VARIABLE=============================== */
:root {
  --backgrounColor: radial-gradient(circle,
      rgba(57, 30, 107, 1) 0%,
      rgba(30, 14, 66, 1) 100%);
}

/* HEADER START======================================================================== */
.mainHeader {

  /* position: relative; */
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    /* box-shadow: 0px 4px 24px 0px #00000040; */
    padding: 0 3rem;
    position: fixed;
    /* position: sticky; */
    top: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    transition: background-color 0.3s ease-in-out;
    z-index: 1000;
background: linear-gradient(76deg, #333, #bbb4b4);
    .navbarSection {
      width: 100%;
    }

    navbar {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      gap: 2rem;
      position: relative;


      a {
        img {
          width: auto;
          height: 50px;
        }
      }

      .navbarMenu {
        /* background-color: #2e2e78; */
        list-style-type: none;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        padding: 1rem 0;
        margin-bottom: 0;
        /* display: none; */

        .menu-items {
          .menu-link {
            color: white;
            text-transform: capitalize;
            text-decoration: none;
            font-size: 18px;
            position: relative;
            font-family: "Nunito Sans", sans-serif;
            font-weight: 400;
            transition: all 0.3s ease-in-out;

            /* font-style: italic; */
            &:hover {
              color: white;
            }

            &::after {
              content: "";
              position: absolute;
              left: 50%;
              bottom: 0;
              width: 0;
              height: 2px;
              background: #ffa500;
              transition: all 0.3s ease-in-out;
              transform: translateX(-50%);
            }

            &:hover::after {
              width: 100%;
            }
          }

          &:hover .submenu-items {
            display: block;
            opacity: 1;
          }
        }



      }

      /* compnay_details */
      .compnay_details {
        display: flex;
        align-items: center;
        gap: 3rem;

        .company_header_socialMenu {
          display: flex;
          align-items: center;
          gap: 1rem;

          a {
            text-decoration: none;
            color: white;
            font-size: large;
            /* background-color: #0d0d0d; */
            /* color: white; */
            border: 1px solid white;
            border-radius: 50%;
            padding: 3px 10px;
            transition: all ease-in-out;

            &:hover {
              background-color: rgb(129, 128, 128);
              color: white;
            }

          }
        }

        .company_contact_details {
          display: none;
        }
      }
    }

    /* Full-Screen Submenu */
    .submenu-container {
      position: absolute;
      top: -1px;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.9);
      /* padding: 30px; */
      display: none;
      opacity: 0;
      /* opacity: 1;
      display: block; */
      z-index: -40;
    }

    .submenu-content {
      display: none;
      /* display: block; */
      color: white;
      padding: 10rem 0;
      width: 60vw;
      /* float: left; */
    }

    .blankUnderline {
      background-color: rgb(63, 62, 62);
      height: 0.1px;
      margin-bottom: 20px;
    }

    /* OUR CLIENTS  */


    h4 {
      color: white;
      font-size: 14px;
      font-weight: 300;
      font-family: "Nunito Sans", sans-serif;
      text-transform: capitalize;
      margin-top: 3rem;
    }

    .submenu-content h2 {
      font-size: 22px;
      color: #ffa500;
      text-transform: uppercase;
      font-family: "Nunito Sans", sans-serif;
      font-weight: 600;
    }

    .submenu-links {
      /* list-style: none; */
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;

      a {
        position: relative;
        text-decoration: none;
        color: rgb(160, 156, 156);
        text-transform: capitalize;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 400;
        transition: all 0.3s ease-in-out;

        &:hover {
          color: white;
        }

        &::after {
          content: "";
          position: absolute;
          left: 50%;
          bottom: 0;
          width: 0;
          height: 1px;
          background: #ffa500;
          transition: all 0.3s ease-in-out;
          transform: translateX(-50%);
        }

        &:hover::after {
          width: 100%;
        }
      }
    }

    .submenu-links li {
      font-size: 16px;
      color: white;
      transition: color 0.3s;
      cursor: pointer;
    }

    .submenu-links li:hover {
      color: #ffa500;
    }




    .toggleMenu {
      display: none;
    }
  }

  .header.scrolled {
    background-color: black;

    navbar {
      .navbarMenu {
        .menu-items {
          .menu-link {
            color: white;
          }
        }
      }

      .compnay_details {
        .company_header_socialMenu {
          a {
            color: white;
          }
        }

        .company_contact_details {
          a {
            color: white;
            transition: color 0.2s ease;

            &:hover {
              color: gray;
            }
          }
        }
      }
    }
  }

  /* SLIDER  */
  .swiper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .swiper-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
  }

  .swiper-slide {
    min-width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 50px;
    color: white;
    position: relative;
    box-sizing: border-box;
  }

  .tag {
    background: navy;
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    display: inline-block;
  }

  .title {
    font-size: 40px;
    font-weight: bold;
    margin-top: 10px;
  }

  .desc {
    font-size: 20px;
    margin-top: 10px;
    max-width: 839px;
    position: relative;
    padding-left: 20px;

  }

  .desc::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3px;
    height: 0;
    background: orange;
    /* animation: lineGrow 1s forwards ease-in-out 0.5s; */
    transition: height 1s ease-in-out;
  }

  .swiper-slide-active .desc::before {
    height: 100%;
  }

  .btn {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 20px;
    background: orange;
    color: black;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    position: relative;
    border-radius: initial;
  }

  .btn:hover {
    background: darkorange;
    color: black;
  }

  .btn::after {
    content: '→';
    display: inline-block;
    margin-left: 5px;
    transition: transform 0.3s ease-in-out;
  }

  .btn:hover::after {
    transform: translateX(5px);
  }


  .swiper-slide .content {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  }

  /* When the slide becomes active */
  .swiper-slide-active .content {
    opacity: 1;
    transform: translateY(0);
  }

}


/* HEADER END======================================================================== */

/* MAIN SECTION ======================================================= */





section {

  .main_body {
    margin-top: 6rem;
    margin-bottom: 6rem;
    display: flex;
    flex-direction: column;
    /*gap: 4rem;*/

    /* ABOUT COMPANY */
    .abt_company {
      display: flex;
      gap: 6rem;

      .left_section {
        h2 {
          font-family: "Nunito Sans", sans-serif;
          font-weight: 700;
          font-style: normal;
          color: #c29621;
        }

        p {
          font-size: larger;
          font-family: "Nunito Sans", sans-serif;
          font-weight: 400;
          font-size: 16px;
          font-style: normal;
          color: rgb(153, 151, 151);
          text-transform: capitalize;
          /* letter-spacing: 2px; */
          margin: 3rem 0;
        }

        button {
          padding: 10px 30px;
          border-radius: 25px;
          transition: all;
          background-color: #084399;

          a {
            text-decoration: none;
            text-transform: capitalize;
            font-family: "Noto Serif Todhri", serif;
            font-weight: 600;
            font-style: normal;
            font-size: 1.3rem;
            color: #bbb4b4;

            &:hover {
              color: white;
            }
          }

        }
      }

      .right_section {
        img {
          width: auto;
        }
      }
    }

    /* company's names */
    .companyList {
      background-color: #084399;
      padding: 2rem 0;

      .comapanyNames {
        /* background-color: #084399; */
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 5rem;

        .ashmaCompany {
          display: flex;
          gap: 20px;
          padding: 15px;
          transition: all 0.2s ease;

          &:hover {
            box-shadow: 0px 2px 5px #888888;
            /* border: 1px solid gray; */
            border-bottom: 2px solid white;
            cursor: pointer;
          }
        }

        h3 {
          color: white;
          text-transform: capitalize;
          font-size: 16px;
          font-family: "Nunito Sans", sans-serif;
          font-weight: 800;
          /* color: #bbb4b4; */
        }

        p {
          font-size: 14px;
          font-weight: 400;
          color: #bbb4b4;
          text-align: justify;
        }

        a {
          text-transform: capitalize;
          text-decoration: none;
          color: white;

          &:hover {
            color: gray;
          }
        }
      }
    }

    /* OUR GROUP OF COMPANIES */
    .companyGroup {
      display: grid;
      grid-template-columns: auto auto auto;

      .companyName {

        /* border: 1px solid green; */
        img {
          width: 462px;
          height: 460px;
          border-radius: 10px;
          transition: all 0.2s ease-in-out;

          &:hover {
            transform: scale(1.1);
            cursor: grab;
          }
        }

        h4 {
          display: flex;
          justify-content: center;
          text-transform: capitalize;
          font-family: "Nunito Sans", sans-serif;
          font-weight: 700;
          font-style: normal;
        }
      }
    }

    /* OUR PRODUCTS  */
    .product_body {
      padding: 0 10rem;
      background-color: #f3f3f3;

      h2 {
        text-align: center;
        text-transform: uppercase;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal;
      }

      .ourProduct {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 3rem;
        padding: 2rem 0;

        .product_card {
          display: flex;
          gap: 2rem;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
          border-radius: 10px;
          padding: 1rem;
          background-color: #084399;

          img {
            width: 240px;
            /* width: auto; */
            height: auto;
            transition: all 0.2s ease-in-out;

            &:hover {
              transform: scale(1.2);
              cursor: grab;
            }
          }

          .product_details {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-evenly;

            h2 {
              text-transform: uppercase;
              font-family: "Nunito Sans", sans-serif;
              font-weight: 700;
              font-style: normal;
              font-size: x-large;
              color: white;
            }

            p {
              font-family: "Nunito Sans", sans-serif;
              font-weight: 500;
              font-style: normal;
              color: #bbb4b4;
              font-size: 15px;
              transition: all 0.3s ease-in;

              &:hover {
                color: white;
              }
            }

            a {
              text-decoration: none;
              text-transform: capitalize;

              &:hover {
                color: white;

              }

              i {
                margin-left: 10px;
                line-height: 0;
              }
            }
          }
        }
      }

      button {
        /* border: none; */
        padding: 10px 22px;
        /* border-radius: 25px; */
        color: white;
        transition: all ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px;
        margin: 0 auto;
        background-color: #084399;

        &:hover {
          /* background-color: #48181a; */
          border: 1px solid white;
          color: #bbb4b4;
        }

        a {
          text-decoration: none;
          text-transform: capitalize;
          font-family: "Merriweather", serif;
          font-weight: 600;
          font-style: normal;
          color: #bbb4b4;

          &:hover {
            color: white;
          }

        }
      }
    }

    /* our clinets  */
    .clinets_section {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #f8f8f8;

      h2 {
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal;
        text-transform: uppercase;
      }

      .slider-container {
        position: relative;
        width: 800PX;
        overflow: hidden;
      }

      .slider {
        display: flex;
        transition: transform 0.5s ease-in-out;
      }

      .slide {
        min-width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .slide img {
        max-width: 14%;
        height: auto;
      }

      .prev,
      .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
      }

      .prev {
        left: 10px;
      }

      .next {
        right: 10px;
      }
    }

    /* career section  */
    .careerSection {

      .careerLeft {

        a {
          text-decoration: none;
        }

        .card {
          width: 350px;
          height: 73.3vh;
          background: white;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          overflow: hidden;
          position: relative;
          transition: transform 0.3s ease-in-out;
        }

        .card:hover {
          /* transform: translateY(-5px); */
        }

        .card img {
          width: 100%;
          height: auto;
          display: block;
        }

        .card-content {
          padding: 117px 20px;
          position: relative;
        }

        .category {
          color: blue;
          font-size: 12px;
          font-weight: bold;
          text-transform: uppercase;
        }

        .title {
          font-size: 18px;
          font-weight: bold;
          margin-top: 10px;
        }

        .description {
          font-size: 14px;
          color: #666;
          margin-top: 5px;
          /* border-left: 3px solid orange; */
          padding-left: 10px;
          position: relative;
        }

        .description::before {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 3px;
          height: 0;
          background: orange;
          transition: height 0.4s ease-in-out;
        }

        .card:hover .description::before {
          height: 100%;
        }

        .arrow {
          display: flex;
          justify-content: flex-end;
          margin-top: 10px;
          color: orange;
          font-size: 20px;
          transition: transform 0.3s ease-in-out;
          cursor: pointer;
        }

        .arrow:hover {
          transform: translateX(6px);
        }
      }

      .rightSection {
        row-gap: 15px;

        .careerJob {
          margin-top: 24px;
          column-gap: 24px;
        }

        img {
          width: auto;
        }

        .card_1 {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 2rem;
          background-color: rgb(42, 77, 110);
          color: white;
          text-transform: capitalize;
          transition: all 0.2s ease;

          &:hover {
            transform: scale(1.1);
            cursor: pointer;
          }

          .number {
            font-size: 2.5rem;
          }
        }

        .card_2 {
          background: #347aeb;
          color: white;
          width: 360px;
          padding: 20px;
          border-radius: 10px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
          text-align: left;
        }

        h2 {
          margin-bottom: 15px;
        }

        .job {
          margin: 10px 0;
          border-left: 3px solid white;
          padding-left: 10px;
        }

        .job-title {
          font-weight: bold;
        }

        .company {
          font-style: italic;
          font-size: 14px;
        }

        .arrow {
          display: inline-block;
          margin-top: 20px;
          font-size: 20px;
          cursor: pointer;
          transition: transform 0.3s ease-in-out;
        }

        .arrow:hover {
          transform: translateX(5px);
        }
      }
    }

    /* CONTACT  */
    .company_contact {

      /* margin-top: 5rem;
      margin-bottom: 5rem; */
      h1 {
        text-transform: uppercase;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal;
        text-align: center;
      }

      .form_location {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1rem;

        h1 {
          text-transform: uppercase;
        }

        .form_div {
          /* border: 1px solid; */
          /* width: 32vw; */

          form {
            .input-group {
              margin-bottom: 15px;
            }

            .input-group input,
            .input-group textarea {
              width: 100%;
              text-transform: uppercase;
              padding: 30px 40px;
              font-size: 14px;
              border: none;
              /* border: 1px solid #ccc; */
              border-radius: 5px;
              background-color: #f4f4f4;
              font-family: "Nunito Sans", sans-serif;
              font-weight: 500;
              font-style: normal;
            }

            .input-group input:focus {
              /* border: 1px ; */
              border-color: #ff6600;
              outline: none;
            }

            .marge_input {
              display: grid;
              grid-template-columns: auto auto;
              gap: 1rem;
            }

            button {
              font-size: 1.4rem;
              font-weight: 600;
              padding: 10px 30px;
              background-color: #084399;
              color: #bbb4b4;
              border: none;
              transition: background-color 0.2s ease-in-out;

              &:hover {
                /* background-color: white; */
                color: white;
                border: 3px solid blue;
              }
            }
          }
        }

        .location_div {

          /* border: 1px solid green; */
          /* width: 34vw; */
          h4 {
            font-size: 20px;
          }
        }
      }
    }
  }
}

/* MAIN SECTION END======================================================= */

/* FOOTER START ================================================ */
.footer {
  background-size: cover;
background: linear-gradient(178deg, #333, #007bff);

  .footer_innerSection {
    padding-top: 6rem;
    /* padding-bottom: 6rem; */

    .footer_product_details {
      display: flex;
      justify-content: space-evenly;
      /* gap: 3rem; */

      .product_section {
        h3 {
          color: white;
          /* color: #43d1c8; */
          text-transform: capitalize;
          font-size: 18px;
          font-family: "Nunito Sans", sans-serif;
          font-weight: 600;

          /* text-decoration: underline; */
          /* text-decoration-thickness: 1px; */
          a {
            text-decoration: none;
            color: white;

            &:hover {
              text-decoration: underline;
              text-decoration-thickness: 1px;
            }
          }
        }

        .footer_eRikshaw {
          padding-left: 1px;
          list-style-type: none;

          li {
            margin: 1.3rem 0;

            a {
              text-decoration: none;
              color: #ffc107;
              font-size: 16px;
              font-family: "Nunito Sans", sans-serif;
              font-weight: 600;
              text-transform: capitalize;

              &:hover {
                color: white;
                text-decoration: underline;
                text-decoration-thickness: 1px;
              }
            }
          }
        }

        .footer_eRikshaw .item::before {
          content: "•";
          color: #aba7a7;
          display: inline-block;
          width: 10px;
          margin-right: 10px;
        }
      }

      .footer_usefulLinks {
        display: flex;
        /* align-items: center; */
        /* gap: 5rem; */
      }
    }

    .footer_company_info {
      /*background: linear-gradient(178deg, #333, #007bff);*/
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .comapny_contact {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 3rem;

        .footerContact {
          border-right: 1px solid #0dcaf0;
          padding-right: 27px;

          h4 {
            color: white;
            text-transform: capitalize;
          }

          a {
            text-decoration: none;
            color: #fbfafa;

            &:hover {
              color: white;
              text-decoration: underline;
              text-decoration-thickness: 1px;
            }
          }
        }
      }

      .footerSocialConnect {
        h4 {
          color: white;
          text-transform: capitalize;
        }

        .company_footer_socialMenu {
          display: flex;
          align-items: center;
          gap: 1rem;
          justify-content: center; /* add this */


          a {
            text-decoration: none;
            color: black;
            font-size: large;
            /* background-color: #0d0d0d; */
            border: 1px solid;
            color: #a7efa6;
            border-radius: 50%;
            padding: 3px 10px;
            transition: all ease-in-out;

            &:hover {
              background-color: #473de3;
            }

          }
        }
      }
    }

    .footerBranding {
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin: 0 auto;
      font-size: 18px;

      p {
        color: white;
        text-transform: capitalize;
        border-right: 1px solid gray;
        padding-right: 7px;
        margin-bottom: 0;
      }

      a {
        text-decoration: none;
        color: white;
        text-transform: capitalize;
        border-right: 1px solid gray;
        padding-right: 7px;

        &:hover {
          color: gray;
        }
      }
    }
  }
}

/* FOOTER END================================================ */

/* MODAL START ====================================== */
.productModal {
  text-align: center;
  background-color: #f4f4f4;

  .container {
    margin: 20px;
  }

  /* .button {
    background: maroon;
    color: white;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    transition: 0.3s;
    margin-top: 10px;
  }

  .button:hover {
    background: darkred;
  } */

  /* Modal Styling */
  .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .modal-content {
    background: white;
    width: 50%;
    margin: 3% auto;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    transform: translateY(-20px);
    animation: slideUp 0.3s ease-in-out forwards;

    h2 {
      text-transform: uppercase;
    }

    p {
      text-align: justify;
    }

    a {
      margin-top: 20px;
      text-decoration: none;
      text-transform: capitalize;
      background-color: #084399;
      padding: 10px 15px;
      color: #fff;
      font-weight: 500;

      &:hover {
        color: #bbb4b4;
      }
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(-20px);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
  }

  .spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
  }

  .spec-table th,
  .spec-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
  }

  .spec-table th {
    background-color: maroon;
    color: white;
  }
}

/* MODAL END ====================================== */

/* GOOGLE FONTS  */

.merriweather-bold {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: normal;
}

.merriweather-bold-italic {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: italic;
}

.merriweather-regular {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: normal;
      color: #ddc093;
}

.noto-serif-todhri-regular {
  font-family: "Noto Serif Todhri", serif;
  font-weight: 400;
  font-style: normal;
}


/* RESPONSIVE  */
@media(min-width: 1400px) {
  .container {
    max-width: 1500px;
  }

  .careerSection {
    max-width: 1152px;
  }
}


@media (max-width: 425px) {
  .mainHeader {
    header {
      position: fixed;
        top: 0;
        left: 0;
        justify-content: space-evenly;
        padding: 0;
        z-index: 1000;
                            background-color: black ;

      .navbarSection {
        display: none;
      }

      .toggleMenu {
        display: block;

        img {
          width: 50vw;
          margin-right: 3rem;
        }

        ul {
          list-style-type: none;
        }

        .responsive_socialMenu {
          display: flex;
        }

        .sidebar {
          position: fixed;
          z-index: 30;
          left: -500px;
          top: 8vh;
          width: 100vw;
          height: 100%;
          background-color: #333;
          padding-top: 20px;
          transition: left 0.3s ease-in-out;
        }

        .sidebar.show {
          left: 0;
          top: 8vh;
        }

        .sidebar a {
          display: block;
          color: white;
          padding: 15px;
          text-decoration: none;
          transition: 0.3s;
        }

        .sidebar a:hover {
          background-color: #575757;
        }

        .menu-items {
          position: relative;
        }

        .submenu {
          display: none;
          background-color: #444;
          transition: all 0.3s ease-in-out;

          li {
            transition: all 0.3s ease-in-out;

            a {
              font-family: "Noto Serif Todhri", serif;
              font-weight: 400;
              font-style: normal;
            }
          }
        }

        .menu-items a {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-family: "Merriweather", serif;
          font-weight: 700;
          font-style: normal;
          text-transform: capitalize;
        }

        .menu-items .submenu a {
          padding-left: 30px;
        }

        .toggleMenu_icons {
          display: flex;
          align-items: center;
        }

        .menu-btn {
          font-size: 30px;
          cursor: pointer;
          /* position: fixed; */
          left: 10px;
          top: 10px;
          background: none;
          border: none;
          color: white;
          padding: 10px;
          z-index: 1000;
        }

        .menu-btn1 {
          font-size: 30px;
          cursor: pointer;
          /* position: fixed; */
          left: 10px;
          top: 10px;
          background: none;
          border: none;
          color: black;
          padding: 10px;
          z-index: 1000;
          transition: all 0.2s ease-in-out;
        }

        .menu-btn1 {
          display: none;
          color: red;
        }

        .menu-btn1.active {
          display: block;
          color: red;
          transition: all 0.2s ease-in-out;
        }
      }
    }





    .header.scrolled {
      background-color: black;

      .toggleMenu {
        .menu-btn {
          font-size: 30px;
          cursor: pointer;
          /* position: fixed; */
          left: 10px;
          top: 10px;
          background: none;
          border: none;
          color: white;
          padding: 10px;
          z-index: 1000;
        }
      }
    }
  }

  /* MAIN ================ */
  section {
    .main_body {
      margin-top: 2rem;
      margin-bottom: 2rem;
      gap: 2rem;

      .abt_company {
        flex-direction: column;
        gap: 1rem;

        .left_section {
          h2 {
            font-size: 15px;
          }

          p {
            font-size: 12px;
            letter-spacing: 0;
            margin: 20px 0;
            text-align: justify;
          }

          button {
            margin: 0 auto;
            display: flex;
            padding: 5px 10px;

            a {
              font-size: 1rem;
              font-weight: 200;
            }
          }
        }

        .right_section {
          img {
            width: 93vw;
          }
        }
      }

      /* company's names  */
      .companyList {
        .comapanyNames {
          grid-template-columns: auto;
          gap: 1rem;

          p {
            font-size: 12px;
          }

          .ashmaCompany {
            box-shadow: 0px 2px 5px #888888;
            border: 1px solid gray;
            border-bottom: 2px solid blue;
            cursor: pointer;
          }
        }
      }

      /* OUR GROUP OF COMPANIES */
      .companyGroup {
        grid-template-columns: auto;

        .companyName {
          img {
            width: 300px;
            height: 300px;
          }
        }
      }

      /* OUR PRODUCTS */
      .product_body {
        padding: 0;

        h2 {
          font-size: large;
        }

        .ourProduct {
          grid-template-columns: auto;
          gap: 2rem;
          padding: 1rem 0;

          .product_card {
            flex-direction: column;
            gap: 1rem;
            width: 96vw;

            img {
              width: auto;
              height: auto;
              /* width: 84vw;
              height: 24vh; */
            }

            .product_details {
              h2 {
                font-size: large;
              }

              p {
                font-size: small;
              }
            }
          }
        }

        button {
          padding: 6px 17px;

          a {
            font-size: medium;
          }
        }
      }

      /* OUR CLIENTS */
      .clinets_section {
        h2 {
          font-size: large;
        }

        .slider-container {
          width: 97vw;
        }
      }

      /* Career section */
      .careerSection {
        .careerLeft {
          margin: 1rem 0;

          .card {
            width: auto;
            height: auto;
          }

          .card img {
            height: 23vh;
          }

          .card-content {
            padding: 20px 10px;
            position: relative;
          }

          .description {
            margin-left: 0;
          }
        }

        .rightSection {
          .careerJob {
            margin-top: 1rem;
          }

          img {
            width: 100vw;
          }

          .card_1 {
            gap: 15px;
            margin-bottom: 1rem;

            .number {
              font-size: 25px;
            }

            .arrow {
              margin-top: 0;
            }
          }

          .card_2 {
            font-size: 11px;
            width: 376px;

            h4 {
              font-size: 12px;
            }

            h2 {
              font-size: 12px;
            }
          }
        }
      }

      /* CONTACT US */
      .company_contact {
        h1 {
          font-size: large;
        }

        .form_location {
          grid-template-columns: auto;

          .form_div {
            & form {

              .input-group input,
              .input-group textarea {
                padding: 17px 12px;

              }
            }
          }

          .location_div {

            h4 {
              font-size: 1rem;
            }
          }
        }
      }
    }
  }

  /* FOOTER  */
  .footer {
/*    background: url("./../images/footer_mobile_5.jpg") no-repeat;
    background-size: cover;*/
background: url("./../images/ashma_grp_footer.jpg") no-repeat;

    background-size: cover;
background-position: center;


    .footer_innerSection {
      padding-top: 8rem;

      .footerBranding {
        font-size: 7px;
      }

      .footer_product_details {
        flex-direction: column;
        gap: 3rem;


        .footer_usefulLinks {
          flex-direction: column;
          gap: 2px;
        }
      }

      .footer_company_info {
        flex-direction: column;
        align-items: flex-start;

        .comapny_contact {
          flex-direction: column;
/*          align-items: flex-start;*/
          gap: 5px;

          .footerContact {
            border: none;
            padding: 0;

            h4 {
              font-size: 16px;
            }
          }
        }
      }
    }
  }

  /* MODAL  */
  .productModal {
    .modal-content {
      width: auto;

      h2 {
        font-size: 1rem;
      }
    }
  }
}

/* MEDIUM DEVICE  */
@media (min-width: 426px) and (max-width: 768px) {
  .mainHeader {
    header {
      position: sticky;
      top: 0;
      left: 0;
      z-index: 30;
      justify-content: space-evenly;
      padding: 0;

      .navbarSection {
        display: none;
      }


      .toggleMenu {
        display: block;

        img {
          width: 28vw;
          margin-right: 7rem;
        }

        ul {
          list-style-type: none;
        }

        .responsive_socialMenu {
          display: flex;
        }

        .sidebar {
          position: fixed;
          z-index: 30;
          left: -100vw;
          top: 8vh;
          width: 100vw;
          height: 100%;
          background-color: #333;
          padding-top: 20px;
          transition: left 0.3s ease-in-out;
        }

        .sidebar.show {
          left: 0;
          top: 8vh;
        }

        .sidebar a {
          display: block;
          color: white;
          padding: 15px;
          text-decoration: none;
          transition: 0.3s;
        }

        .sidebar a:hover {
          background-color: #575757;
        }

        .menu-items {
          position: relative;
        }

        .submenu {
          display: none;
          background-color: #444;
          transition: all 0.3s ease-in-out;

          li {
            transition: all 0.3s ease-in-out;

            a {
              font-family: "Noto Serif Todhri", serif;
              font-weight: 400;
              font-style: normal;
            }
          }
        }

        .menu-items a {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-family: "Merriweather", serif;
          font-weight: 700;
          font-style: normal;
          text-transform: capitalize;
        }

        .menu-items .submenu a {
          padding-left: 30px;
        }

        .toggleMenu_icons {
          display: flex;
          align-items: center;
        }

        .menu-btn {
          font-size: 30px;
          cursor: pointer;
          /* position: fixed; */
          left: 10px;
          top: 10px;
          background: none;
          border: none;
          color: black;
          padding: 10px;
          z-index: 1000;
          transition: all 0.2s ease-in-out;
        }

        .menu-btn1 {
          font-size: 30px;
          cursor: pointer;
          /* position: fixed; */
          left: 10px;
          top: 10px;
          background: none;
          border: none;
          color: black;
          padding: 10px;
          z-index: 1000;
        }

        .menu-btn1 {
          display: none;
          color: red;
          transition: all 0.2s ease-in-out;
        }

        .menu-btn1.active {
          display: block;
          color: red;
          transition: all 0.2s ease-in-out;
        }
      }
    }
  }

  /* MAIN  */
  section {
    .main_body {
      margin-top: 3rem;
      margin-bottom: 3rem;
      gap: 2rem;

      .abt_company {
        flex-direction: column;
        gap: 1rem;

        .left_section {
          display: flex;
          flex-direction: column;
          align-items: center;

          h2 {
            font-size: larger;
          }

          p {
            font-size: 14px;
            text-align: justify;
            letter-spacing: 0;
            margin: 20px 0;
          }

          button {
            padding: 5px 20px;

            a {
              font-weight: 400;
              font-size: 1.1rem;
            }
          }
        }

        .right_section {
          img {
            width: 90vw;
            height: 64vh;
          }
        }
      }

      /* company's names  */
      .companyList {
        .comapanyNames {
          grid-template-columns: auto;
          gap: 1rem;

          .ashmaCompany {
            box-shadow: 0px 2px 5px #888888;
            /* border: 1px solid gray; */
            border-bottom: 2px solid blue;
            cursor: pointer;
          }
        }
      }

      /* OUR GROUP OF COMPANIES */
      .companyGroup {
        grid-template-columns: auto auto;
        gap: 1.5rem;

        .companyName {
          img {
            width: 350px;
            height: 300px;
          }
        }
      }

      /* OUR PRODUCTS */
      .product_body {
        padding: 0;

        h2 {
          font-size: large;
        }

        .ourProduct {
          grid-template-columns: auto;
          gap: 2rem;
          padding: 1rem 0;

          .product_card {
            /* flex-direction: column; */
            gap: 1rem;
            width: 96vw;

            /* img {
              width: 50vw;
              height: 30vh;
            } */

            .product_details {
              align-items: center;

              h2 {
                font-size: large;
              }

              p {
                font-size: small;
                text-align: justify;
              }
            }
          }
        }

        button {
          padding: 6px 17px;

          a {
            font-size: medium;
          }
        }
      }

      /* OUR CLIENTS */
      .clinets_section {
        h2 {
          font-size: large;
        }

        .slider-container {
          width: 90vw;
        }
      }

      /* Career section */
      .careerSection {
        .careerLeft {
          margin: 1rem 0;

          .card {
            width: auto;
            height: auto;
          }

          .card img {
            height: 36vh;
          }

          .card-content {
            padding: 20px 10px;
            position: relative;
          }

          .description {
            margin-left: 0;
          }
        }

        .rightSection {
          .careerJob {
            margin-top: 1rem;
          }

          img {
            width: 94vw;
          }

          .card_1 {
            gap: 15px;
            margin-bottom: 1rem;

            .number {
              font-size: 25px;
            }

            .arrow {
              margin-top: 0;
            }
          }

          .card_2 {
            font-size: 11px;
            width: 376px;

            h4 {
              font-size: 12px;
            }

            h2 {
              font-size: 12px;
            }
          }
        }
      }

      /* CONTACT US */
      .company_contact {
        h1 {
          font-size: large;
        }

        .form_location {
          grid-template-columns: auto;

          .form_div {
            & form {

              .input-group input,
              .input-group textarea {
                padding: 17px;

              }
            }
          }

          .location_div {

            h4 {
              font-size: 1rem;
            }
          }
        }
      }
    }
  }

  /* FOOTER  */
  .footer {
    .footer_innerSection {
      .footer_product_details {
        .footer_usefulLinks {
          gap: 20px;
        }

      }

      .footer_company_info {
        .comapny_contact {
          gap: 1rem;

          .footerContact {
            padding-right: 8px;
          }
        }
      }
    }
  }
}

/* LARGE SCREEN  */
@media (min-width: 769px) and (max-width: 1024px) {
  .mainHeader {
    header {
      /* justify-content: space-evenly; */

      navbar {
        gap: 1rem;
        justify-content: flex-start;
        gap: 8rem;

        a {
          img {
            height: 28px;
          }
        }

        .navbarMenu {
          gap: 12px;

          .menu-items {
            .menu-link {
              font-size: 13px;
            }
          }
        }
      }

      .compnay_details {
        gap: 2rem;

        .company_header_socialMenu {
          a {
            font-size: 15px;
          }
        }
      }
    }
  }

  /* MAIN  */
  section {
    .main_body {
      margin-top: 3rem;
      margin-bottom: 3rem;
      gap: 2rem;

      .abt_company {
        flex-direction: column;
        gap: 1rem;

        .left_section {
          h2 {
            font-size: larger;
          }

          p {
            font-size: 15px;
            letter-spacing: 0;
            margin: 20px 0;
            text-align: justify;
          }

          button {
            padding: 5px 20px;

            a {
              font-weight: 400;
            }
          }
        }

        .right_section {
          img {
            width: 90vw;
            height: 80vh;
          }
        }
      }

      /* company's names */
      .companyList {
        .comapanyNames {
          gap: 12px;


          p {
            font-size: 11px;
          }

          .ashmaCompany {
            box-shadow: 0px 2px 5px #888888;
            /* border: 1px solid gray; */
            border-bottom: 2px solid blue;
            cursor: pointer;
            gap: 13px;
          }
        }
      }

      /* OUR GROUP OF COMPANIES */
      .comapny_heading {
        font-size: large;
      }

      .companyGroup {
        grid-template-columns: auto auto;
        gap: 1rem;
      }

      /* OUR PRODUCTS */
      .product_body {
        padding: 0;

        h2 {
          font-size: large;
        }

        .ourProduct {
          grid-template-columns: auto;
          gap: 2rem;
          padding: 1rem 0;

          .product_card {
            /* flex-direction: column; */
            gap: 1rem;
            width: 96vw;

            /* img {
              width: 42vw;
              height: 34vh;
            } */

            .product_details {
              h2 {
                font-size: large;
              }

              p {
                font-size: small;
              }
            }
          }
        }

        button {
          padding: 6px 17px;

          a {
            font-size: medium;
          }
        }
      }

      /* OUR CLIENTS */
      .clinets_section {
        h2 {
          font-size: large;
        }

        .slider-container {
          width: 90vw;
        }
      }

      /* career section  */
      .careerSection {

        .careerLeft {
          .card {
            width: 293px;
          }
        }

        .rightSection {
          img {
            width: 58vw
          }

          .careerJob {
            flex-wrap: nowrap;

            .card_1,
            .card_2 {
              width: 28vw;
            }
          }
        }
      }

      /* CONTACT US */
      .company_contact {
        h1 {
          font-size: large;
        }

        .form_location {
          grid-template-columns: auto;

          .form_div {
            & form {

              .input-group input,
              .input-group textarea {
                padding: 17px;

              }
            }
          }

          .location_div {

            h4 {
              font-size: 1rem;
            }
          }
        }
      }
    }
  }
}

/* extra large screen  */
@media (min-width: 1025px) and (max-width: 1440px) {
  section {
    .main_body {
      .product_body {
        .ourProduct {

          grid-template-columns: auto auto;

        }
      }

      /* career section  */
      .careerSection {
        .careerLeft {
          .card {
            height: 73.3vh;
          }
        }

        .careerJob {
          flex-wrap: nowrap;
        }
      }
    }
  }
}