@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css);

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

:root {
  --white--color: #f3f4f6;
  --red--color: #f72330;
  --alt--red-color: #c50007;
  --blue--color: #2171ff;
  --green--color: #00ba48;
  --footer-back-color: #1e2939;
}

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

:root {
  --nav-background: #E7000B;
  --active-link-style: #64000575;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

body {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

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

:root {
  --footer-back-color: #1E2939;
  --footer-color: #99A1AF;
}

ul {
  list-style: none;
}

footer {
  width: 100%;
  background-color: var(--footer-back-color);
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

  .container {
    padding: 10px 0;
    width: 85%;
    margin: auto;
    /* border: solid; */

    .top {
      display: flex;
      /* flex-wrap: wrap; */
      justify-content: space-between;

      .logo {
        /* border: solid; */
        width: 30%;

        .heading {
          display: flex;
          align-items: center;
          margin: 20px 0;

          h2 {
            padding: 0 5px;
            font-size: 20px;
            color: white;
          }

          i {
            color: red;
            font-size: 15px;
          }
        }

        .para {
          p {
            line-height: 1.5;
            /* padding: 10px; */
            color: var(--footer-color);
            font-size: 15px;
          }
        }

      }

      .links {
        /* border: solid; */
        width: 60%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        .link-col {
          /* border: solid; */
          width: 200px;

          .heading-col {
            h3 {
              margin: 20px 0;
              color: white;
            }
          }

          .innerLinks {
            ul {
              li {
                margin: 10px 0;

                a {
                  color: var(--footer-color);
                  font-size: 13px;

                  &:hover {
                    color: white;
                  }
                }
              }

              li:nth-child(4) {
                color: #FF645A;
                font-size: 13px;
              }

              .contactLastchild {
                a {
                  font-size: 20px;
                  color: red;
                }
              }
            }

            i {
              font-size: 15px;
            }

            i,
            span {
              color: var(--footer-color);
              margin: 0 3px;
            }

            span {
              font-size: 14px;
            }
          }
        }
      }
    }

    .bottom {
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.137);
      text-align: center;

      p {
        margin: 6px 0;
        color: var(--footer-color);
        font-size: 14px;

        a {
          color: rgb(255, 109, 109);

          /* font-family: Arial, Helvetica, sans-serif; */
          &:hover {
            color: rgb(151, 151, 255);
          }
        }
      }
    }
  }
}

/* ===============================
   Responsive Footer
   ================================*/
@media screen and (max-width: 1500px) {
  footer {
    .links {
      gap: 30px;
      justify-content: start !important;

      .contactChild {
        .contactLastchild {
          a {
            font-size: 18px !important;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 848px) {
  footer {

    .top {
      flex-wrap: nowrap;

      .logo {
        width: 200px !important;
      }

      /* width: 300px; */
      .links {
        justify-content: flex-start !important;

        .contactChild {
          .contactLastchild {
            a {
              font-size: 16px !important;
            }
          }
        }
      }
    }

    .bottom {
      p {
        font-size: 12px !important;
      }
    }
  }
}

@media screen and (max-width: 754px) {
  footer {
    .top {
      .links {
        justify-content: start !important;

        .link-col {
          width: 170px !important;

        }

        .contactChild {
          li {
            span {
              font-size: 11px !important;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 648px) {
  footer {
    .top {
      .links {
        gap: 5px;
      }
    }
  }
}

@media screen and (max-width: 570px) {
  footer {
    .top {
      flex-direction: column !important;
    }
  }
}

@media screen and (max-width: 476px) {
  footer {
    .top {
      justify-content: space-between !important;

      .links {
        justify-content: flex-start !important;
      }
    }
  }
}

@media screen and (max-width:340px) {
  footer {
    .top {
      flex-direction: column !important;
      flex-wrap: wrap;
      justify-content: start !important;

      .logo {
        width: 100% !important;
      }

      .links {
        justify-content: flex-start !important;
      }
    }
  }
}

nav {
  position: fixed;
  top: 0;
  z-index: 999999;
  background-color: var(--nav-background);
  width: 100%;
  height: 8vh;
  /* border: solid; */
  box-shadow: 0 0 5px 5px rgb(0 0 0 / 0.1);

  .container {
    width: 85%;
    height: 100%;
    margin: auto;
    /* background-color: #00BA48; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;

    .logo {
      /* width: 20%; */
      height: 100%;
      /* border: solid; */
      display: flex;
      align-items: center;
      /* padding: 0 15px; */
      padding-left: 0;

      .headingLogo {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      i {
        font-size: 15px;
        padding: 0 5px;
      }

      h1 {
        font-size: 20px;
        padding: 0 5px;
      }

      .burgerMenue {
        i {
          display: none;
          font-size: 20px;
        }
      }
    }

    .links {
      /* width: 70%; */
      /* height: 100%; */
      /* border: solid; */
      display: flex;
      align-items: center;

      ul {
        /* border: solid; */
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        li {
          height: 100%;
          /* border: solid; */

          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 5px;

          a {
            text-align: center;
            display: inline-block;
            /* border: solid; */
            font-size: 14px;
            width: 100%;
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            transition: 0.3s ease;

            &.activeLink {
              background-color: var(--active-link-style);
            }

            &:hover {
              background-color: var(--active-link-style);
            }
          }
        }

        li:first-child {
          a {
            /* background-color: var(--active-link-style); */
          }
        }

        li:last-child {
          a {
            background-color: #F3F4F6;
            color: red;
            box-shadow: 0 5px 5px rgb(0 0 0 / 0.1);

            &:hover {
              transform: translateY(-3px);
            }
          }
        }
      }
    }

    .burgerMenue {
      i {
        display: none;
      }
    }
  }
}

/* Responsive */
@media screen and (max-width: 1112px) {
  nav {
    height: auto;

    .container {
      padding: 10px;
      flex-direction: column;

      .logo {
        width: 100%;
        display: flex;
        justify-content: center;
      }

      .links {
        margin-top: 20px;
        width: 100%;
      }
    }
  }
}

@media screen and (max-width: 732px) {
  nav {
    padding: 10px 0;

    .container {
      width: 92%;

      .logo {
        justify-content: space-between;

        .burgerMenue {
          cursor: pointer;

          i {
            display: block;
            transition: 0.5s ease;
          }
        }

        .burgerMenue.scale {
          transform: scale(1.1);
          transition: 0.5s ease;
        }
      }

      .links {
        display: none;

        ul {
          /* border: solid; */
          flex-direction: column;
          align-items: center;

          li {
            width: 100%;
            pointer-events: none;
            padding: 10px 0;

            a:hover {
              background-color: #64000575;
            }

            a:last-child:hover {
              color: white;
            }

            a {
              transform: translateX(-500px);
              border: 1px solid;
            }
          }
        }
      }
    }
  }
}

.container.active .links {
  display: flex;
  animation: navAnimate 1s ease forwards;
}

.container.active .link1 {
  animation: nvLinksAnimate .5s ease forwards 1s;
}

.container.active .link2 {
  animation: nvLinksAnimate .5s ease forwards 1.2s;
}

.container.active .link3 {
  animation: nvLinksAnimate .5s ease forwards 1.4s;
}

.container.active .link4 {
  animation: nvLinksAnimate .5s ease forwards 1.6s;
}

.container.active .link5 {
  animation: nvLinksAnimate .5s ease forwards 1.8s;
}

.container.active .link6 {
  animation: nvLinksAnimate .5s ease forwards 2s;
}

.container.active .link7 {
  animation: nvLinksAnimate .5s ease forwards 2.2s;
}

@keyframes navAnimate {
  from {
    height: 0;
    opacity: 0;
  }

  to {
    height: 62vh;
    opacity: 1;
  }
}

@keyframes nvLinksAnimate {
  50% {
    transform: translateX(-500px);
  }

  100% {
    transform: translateX(0px);
  }
}

/* Header */
/* Laptop screen */
header {
  width: 100%;
  height: auto;
  padding: 60px 0 50px 0;
  background: linear-gradient(to right, #e4000b, #c70008);
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    margin-top: 50px;
    height: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;

    h1 {
      width: 50%;
      color: white;
      font-size: 3.8rem;
      font-weight: bold;
    }

    p {
      width: 50%;
      font-size: 1.4rem;
      font-weight: 300;
      color: white;
      line-height: 1.5;
      margin-bottom: 15px;
    }

    .buttons {
      width: 50%;

      button {
        border: none;
        border-radius: 10px;
        width: 220px;
        height: 63px;
        /* padding:20px 40px; */
        font-size: 17px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2.3px solid white;

        &#donorRegistration {
          color: #e2000a;
          transform: translateX(-10px);
          background-color: white;

          &:hover {
            background-color: rgb(246, 239, 239);
          }
        }

        &#requestBlood {
          color: white;
          background-color: #9f0712;

          &:hover {
            background-color: #82181a;
          }
        }

        i {
          padding: 0 8px;
        }
      }
    }
  }
}

/* Responsive */
/* tablate screen */
@media screen and (max-width: 1112px) {
  header {
    height: 80vh;

    .content {
      margin-top: 90px;
      padding: 10px;

      h1 {
        width: 100%;
        text-wrap: none;
      }

      p {
        width: 100%;
      }

      .buttons {
        width: 100%;
      }
    }
  }
}

/* Mobile screen */
@media screen and (max-width: 732px) {
  header {
    height: auto;
    padding: 35px 0;

    .content {
      margin-top: 55px;
      width: 93%;

      h1 {
        font-size: 2.89rem;
        width: 100%;
      }

      p {
        width: 100%;
        font-size: 1.19rem;
      }

      .buttons {
        width: 100%;

        a {
          width: 100%;

          button {
            width: 100%;
            font-size: 0.98rem;
            height: 55px;

            &#donorRegistration {
              transform: translateX(0px);
            }

            &#requestBlood {
              transform: translateY(10px);
            }
          }
        }
      }
    }
  }
}

/* End Header */
/* #################### 
/* Start Main */
/* ******************* */
/* start our impact */
.ourImpact {
  width: 100%;
  height: 368px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;

  h2 {
    font-size: 2.25rem;
    font-weight: bolder;
    text-align: center;
    color: #1e2939;
  }

  .content {
    width: 85%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    gap: 2%;

    .item {
      /* width:100%; */
      padding: 20px 22px 13px 22px;
      border-radius: 15px;
      box-shadow: 0px 10px 15px #dedede;
      color: white;
      transition: all 0.3s ease;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 1fr);
      align-items: center;

      .icon {
        grid-column: 1/2;
        grid-row: 1/3;
        font-size: 2.29rem;
      }

      #counter {
        text-align: end;
        grid-column: 2/3;
        grid-row: 1/2;
        font-size: 2.2rem;
        font-weight: 700;
        transform: translateY(10px);
      }

      h4 {
        font-size: 0.9rem;
        text-align: right;
        grid-column: 2/3;
        grid-row: 2/3;
        color: #dbeafe;
      }

      input {
        position: relative;
        grid-column: 1/3;
        grid-row: 3/4;
        appearance: none;
        -webkit-appearance: none;
        height: 8px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.4);
        outline: none;

        &::-webkit-slider-thumb {
          appearance: none;
          -webkit-appearance: none;
          width: 0;
          height: 0;
        }

        &::before {
          position: absolute;
          content: '';
          width: 60%;
          height: 100%;
          background-color: white;
          border-radius: 10px;
        }
      }

      &:hover {
        transform: scale(1.059);
      }

      &:nth-child(1) {
        background-color: var(--blue--color);

        input::before {
          width: 79%;
        }
      }

      &:nth-child(2) {
        background-color: var(--red--color);

        input::before {
          width: 55%;
        }
      }

      &:nth-child(3) {
        background-color: var(--green--color);

        input::before {
          width: 86%;
        }
      }
    }
  }
}

/* >>>>>>>>>>>>>>>>>>>>> */
/* Responsive */
/* tablate screen */
@media screen and (max-width: 1112px) {
  .ourImpact {
    .content {
      padding: 10px;

      .item {
        padding: 15px;

        h4 {
          font-size: 0.9rem;
          white-space: nowrap;
        }
      }
    }
  }
}

/* Mobile screen */
@media screen and (max-width: 732px) {
  .ourImpact {
    height: auto;
    padding: 35px 0;

    h2 {
      font-size: 1.88rem;
      transform: translateY(-50%);
    }

    .content {
      width: 93%;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, 1fr);
      gap: 5%;
      margin-bottom: 5%;

      .item {
        padding: 1% 5%;
        box-shadow: 0px 5px 8px #dedede;

        #counter {
          font-size: 2.25rem;
        }

        &:nth-child(1) {
          grid-column: 1/2;
          grid-row: 1/2;
        }

        &:nth-child(2) {
          grid-column: 1/2;
          grid-row: 2/3;
        }

        &:nth-child(3) {
          grid-column: 1/2;
          grid-row: 3/4;
        }
      }
    }
  }
}

/* End our Impact Section  */
/* #################### */
/* start Why we donate blood  */
.donateBlood {
  width: 100%;
  height: 55vh;
  background-color: var(--white--color);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;

  h2 {
    font-size: 2.25rem;
    font-weight: bolder;
    color: #1e2939;
  }

  .content {
    width: 85%;
    height: 25vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    gap: 2%;

    .item {
      width: 100%;
      height: 100%;
      position: relative;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
      padding: 20px 0;
      border-bottom: 6px solid #E7000B;
      transition: all 0.44s ease;

      span {
        width: 55px;
        height: 55px;
        background-color: #E7000B;
        border-radius: 50%;
        font-size: 1.5rem;
        color: white;
        /* border:1px solid #9f0712; */
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        position: relative;
      }

      h3 {
        font-size: 1.125rem;
        font-weight: 900;
        z-index: 1;
        position: relative;
      }

      p {
        color: #4a5565;
        font-weight: 400;
        font-size: 0.86rem;
        line-height: 1.5;
        z-index: 1;
        position: relative;
      }

      &::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #e4000b;
        border-radius: 10px;
        transition: all 0.44s ease;
        transform: translateY(10px);
        z-index: -1;
      }

      &:hover::before {
        top: 100%;
      }
    }
  }
}

/*  Responsive */
/* Tablate screen */
@media screen and (max-width: 1112px) {
  .donateBlood {
    height: auto;
    padding: 50px 0;

    h2 {
      transform: translateY(-50%);
    }

    .content {
      padding: 10px;
      height: 60vh;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      row-gap: 20px;

      .item {
        gap: 10px;

        span {
          width: 70px;
          height: 70px;
          font-size: 1.6rem;
        }

        &:nth-child(1) {
          grid-column: 1/2;
          grid-row: 1/2;
        }

        &:nth-child(2) {
          grid-column: 2/3;
          grid-row: 1/2;
        }

        &:nth-child(3) {
          grid-column: 1/2;
          grid-row: 2/3;
        }

        &:nth-child(4) {
          grid-column: 2/3;
          grid-row: 2/3;
        }
      }
    }
  }
}

/* mobile screen */
@media screen and (max-width:732px) {
  .donateBlood {
    height: auto;
    padding: 35px 0;

    /* justify-content: space-between; */
    h2 {
      text-align: center;
      font-size: 1.6rem;
      transform: translateY(-50%);
    }

    .content {
      width: 93%;
      height: auto;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(4, 1fr);

      .item {
        gap: 10px;
        padding: 24px;

        &:nth-child(1) {
          grid-column: 1/2;
          grid-row: 1/2;
        }

        &:nth-child(2) {
          grid-column: 1/2;
          grid-row: 2/3;
        }

        &:nth-child(3) {
          grid-column: 1/2;
          grid-row: 3/4;
        }

        &:nth-child(4) {
          grid-column: 1/2;
          grid-row: 4/5;
        }
      }
    }
  }
}

/* ################## */
/* Make a Difference  */
.makeAdifference {
  width: 100%;
  height: auto;
  padding: 40px 0;
  background: #E7000B;

  .content {
    width: 95%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    h2 {
      width: 100%;
      font-size: 2.35rem;
      font-weight: 700;
      color: white;
      margin-bottom: 30px;
    }

    p {
      width: 50%;
      color: white;
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 30px;
      line-height: 1.5;
    }

    .buttons {
      width: 50%;
      transform: translateY(-5%);

      button {
        border: none;
        border-radius: 10px;
        width: 220px;
        height: 58px;
        font-size: 17px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2.3px solid white;

        &#donorRegistration {
          color: #e2000a;
          transform: translateX(-10px);
          background-color: white;

          &:hover {
            background-color: rgb(246, 239, 239);
          }
        }

        &#bloodStock {
          color: white;
          background-color: transparent;

          &:hover {
            background-color: #d42326;
          }
        }

        i {
          padding: 0 8px;
        }
      }
    }
  }
}

/* Responsive */
/* Tablate Screen */
@media screen and (max-width:1112px) {
  .makeAdifference {
    height: auto;
    padding: 40px 0;

    .content {

      /* padding:10px; */
      h2 {
        width: 100%;
        font-size: 2.25rem;
        margin-bottom: 25px;
      }

      p {
        width: 80%;
        font-size: 1.19rem;
        margin-bottom: 25px;
      }

      .buttons {
        width: 100%;

      }
    }
  }
}

/* Mobile Screen */
@media screen and (max-width: 732px) {
  .makeAdifference {
    height: auto;
    padding: 38px 0;

    .content {
      width: 93%;

      h2 {
        font-size: 2rem;
        width: 100%;
        white-space: none;
      }

      p {
        width: 90%;
        font-size: 1rem;
        white-space: none;
        line-height: 1.3;
      }

      .buttons {
        width: 97%;

        a {
          width: 100%;

          button {
            width: 100%;
            font-size: 0.98rem;
            height: 53px;

            &#donorRegistration {
              transform: translateX(0px);
            }

            &#bloodStock {
              transform: translateY(15px);
            }
          }
        }
      }
    }
  }
}