* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  transition: all 300ms ease;
}

*::selection {
  background: #0d3356;
  color: #fff;
}

*:focus {
  outline: none;
}

*:focus-visible {
  box-shadow: 0 0 0 4px #0d3356;
}

::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-track {
  background: #bdbdbd;
}

::-webkit-scrollbar-thumb {
  background: #0d3356;
  border-radius: 2px;
}

body {
  font-family: "Inter", sans-serif;
  min-height: 100dvh;
  background-color: #fff;
  color: #0d3356;
  font-weight: 400;
  font-size: 14px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: solid 2px #e4e4e4;
  padding: 20px 80px;
  position: sticky;
  top: 0;
  background-color: #fff;

  nav {
    display: flex;
    align-items: center;
    gap: 60px;

    img {
      width: 232px;
    }

    .a {
      display: flex;
      align-items: center;
      gap: 40px;

      a:link {
        text-decoration: none;
        color: #0d3356;
        font-size: 16px;
        font-weight: 500;
        padding: 10px 12px;
        border-radius: 10px;
      }

      a:link:hover {
        background-color: rgba(13, 51, 86, 0.1);
      }

      a:visited {
        color: #0d3356;
      }
    }
  }

  .header-right-div {
    display: flex;
    align-items: center;
    gap: 16px;

    button {
      border-radius: 99px;
      height: 48px;
      width: 48px;
      border: none;
      cursor: pointer;

      img {
        width: 22px;
        height: 22px;
        cursor: pointer;
      }
    }

    .shopping-cart {
      background-color: rgba(104, 62, 0, 0.1);
      position: relative;

      span {
        position: absolute;
        background-color: #0d3356;
        color: #fff;
        border-radius: 99px;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        top: -3px;
        right: -3px;
        border: solid 1px #fff;
      }
    }

    .shopping-cart:hover {
      background-color: rgba(104, 62, 0, 0.2);
    }

    .notification {
      background-color: rgba(13, 51, 86, 0.1);
    }

    .notification:hover {
      background-color: rgba(13, 51, 86, 0.2);
    }

    .user-1-div {
      display: grid;
      align-items: center;
      grid-template-columns: auto 1fr;
      column-gap: 12px;

      img {
        grid-row: span 2;
        width: 48px;
        height: 48px;
        border-radius: 99px;
        object-fit: cover;
        object-position: center;
        cursor: pointer;
      }
      .good-morning {
        font-size: 12px;
        color: #b9bbbf;
      }
      .scarlet-johnson {
        font-size: 16px;
        font-weight: 600;
      }
    }
  }
}

main {
  width: 1440px;
  margin: 0 auto;

  .hero-section {
    padding: 40px 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;

    .hero-img-div {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
      column-gap: 20px;
      row-gap: 32px;

      img {
        width: 135px;
        height: 135px;
        object-fit: cover;
        object-position: center;
        border-radius: 14px;
      }

      .product-1 {
        grid-column: span 4;
        width: 600px;
        height: 705px;
        object-position: top;
        border-radius: 16px;
        border: solid 1px #e4e4e4;
      }
    }

    .hero-nav {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 12px;
      background-color: rgba(58, 73, 128, 0.1);
      border-radius: 8px;
      width: 456px;

      span {
        color: rgba(58, 73, 128, 0.5);
        cursor: pointer;
        font-size: 14px;
      }

      span:hover {
        color: #3a4980;
      }

      span:first-child {
        margin-left: 0px;
      }

      span:last-child {
        margin-right: 0px;
      }

      img {
        width: 16px;
        height: 16px;
      }

      .coast {
        color: #3a4980;
        font-weight: 600;
      }
    }

    .hero-text {
      .hero-text-1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 65px;
        border-bottom: solid 1px #e4e4e4;
        padding: 32px 0;

        .h1-div {
          display: flex;
          align-items: flex-start;
          gap: 143px;

          .h1-div-2 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 10px;

            h1 {
              color: #1d2939;
              font-size: 28px;
              font-weight: 600;
            }

            p {
              color: #b9bbbf;
              font-size: 16px;
            }
          }

          .h1-buttons {
            display: flex;
            align-items: center;
            gap: 12px;

            .h1-button {
              padding: 8px;
              border: none;
              border-radius: 10px;
              cursor: pointer;
              background-color: rgba(58, 73, 128, 0.1);
              height: 36px;
              width: 36px;
            }

            .h1-button:hover {
              background-color: rgba(58, 73, 128, 0.2);
            }

            .like-button {
              display: flex;
              align-items: center;
              gap: 8px;
              padding: 8px 12px;
              background-color: rgba(215, 89, 81, 0.1);
              width: 81px;

              span {
                color: #d75951;
                font-size: 16px;
                font-weight: 600;
              }
            }
            .like-button:hover {
              background-color: rgba(215, 90, 81, 0.2);
            }
          }
        }
      }

      .hero-text-2 {
        padding: 32px 0;
        border-bottom: solid 1px #e4e4e4;
        display: flex;
        align-items: center;
        gap: 40px;

        .price {
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 6px;

          .new-price {
            color: #3a4980;
            font-size: 32px;
            font-weight: 700;
          }

          .old-price {
            text-decoration: line-through;
            color: #b9bbbf;
            font-size: 20px;
          }
        }

        .rating {
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 12px;

          .rating-buttons {
            display: flex;
            align-items: center;
            gap: 12px;

            .star {
              display: flex;
              align-items: center;
              gap: 8px;
              background-color: rgba(220, 161, 29, 0.1);
              padding: 8px 12px;
              border: none;
              border-radius: 99px;
              cursor: pointer;

              span {
                font-weight: 600;
                color: #dca11d;
              }
            }

            .star:hover {
              background-color: rgba(220, 161, 29, 0.2);
            }

            .reviews {
              display: flex;
              align-items: center;
              gap: 8px;
              background-color: rgba(58, 73, 128, 0.1);
              padding: 8px 12px;
              border: none;
              border-radius: 99px;
              cursor: pointer;

              span {
                font-weight: 600;
                color: #3a4980;
              }
            }
            .reviews:hover {
              background-color: rgba(58, 73, 128, 0.2);
            }
          }

          .recommend {
            color: #b9bbbf;

            .ninty-three {
              color: #1c623a;
              font-weight: 600;
            }
          }
        }
      }

      .hero-text-3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 14px;
        padding: 32px 0;
        border-bottom: solid 1px #e4e4e4;

        span {
          font-size: 16px;
          font-weight: 500;
          color: #b9bbbf;
        }

        .colors {
          display: flex;
          align-items: center;
          gap: 12px;

          .color {
            width: 64px;
            height: 64px;
            border-radius: 99px;
            cursor: pointer;
            border: 3px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;

            .check {
              opacity: 0;
              width: 26px;
              height: 26px;
            }
          }

          .color:hover {
            .check {
              opacity: 1;
            }
          }
        }

        .cream {
          background-color: #ecdecc;
        }

        .cream:hover {
          box-shadow: 0 0 0 3px #ecdecc;
        }

        .light-green {
          background-color: #bbd278;
        }

        .light-green:hover {
          box-shadow: 0 0 0 3px #bbd278;
        }

        .lavender {
          background-color: #bbc1f8;
        }

        .lavender:hover {
          box-shadow: 0 0 0 3px #bbc1f8;
        }

        .pink {
          background-color: #ffaad9;
        }

        .pink:hover {
          box-shadow: 0 0 0 3px #ffaad9;
        }

        .green {
          background-color: #98c185;
        }

        .green:hover {
          box-shadow: 0 0 0 3px #98c185;
        }

        .peach {
          background-color: #ffb6b6;
        }

        .peach:hover {
          box-shadow: 0 0 0 3px #ffb6b6;
        }
      }

      .hero-text-4 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 14px;
        padding: 32px 0;
        border-bottom: solid 1px #e4e4e4;

        span {
          font-size: 16px;
          color: #b9bbbf;
          font-weight: 500;
        }

        .hero-text-4-buttons {
          display: flex;
          align-items: center;
          gap: 12px;

          button {
            padding: 10px 12px;
            border-radius: 8px;
            border: none;
            background-color: rgba(111, 119, 136, 0.1);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;

            .circle {
              width: 12px;
              height: 12px;
              border: solid 1.5px #fff;
              box-shadow: 0 0 0 1px #6f7788;
              border-radius: 99px;
            }

            span {
              font-size: 14px;
              color: #6f7788;
              font-weight: 500;
            }
          }

          button:hover {
            background-color: rgba(58, 73, 128, 0.2);

            span {
              color: #3a4980;
            }

            .circle {
              background-color: #3a4980;
              box-shadow: 0 0 0 1px #3a4980;
            }
          }
        }
      }

      .hero-text-5 {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 32px 0;

        button {
          border: none;
          font-size: 18px;
          border-radius: 99px;
          cursor: pointer;
        }

        div {
          display: flex;
          align-items: center;
          gap: 0;

          button {
            background-color: rgba(58, 73, 128, 0.1);
            padding: 18px;
            width: 54px;
            height: 54px;
            border-radius: 0 99px 99px 0;
          }
          .minus {
            border-radius: 99px 0 0 99px;
          }
          button:hover {
            background-color: rgba(58, 73, 128, 0.2);
          }
          span {
            padding: 16px;
            background-color: rgba(58, 73, 128, 0.1);
            color: #3a4980;
            font-size: 18px;
            font-weight: 700;
          }
        }

        .add-cart {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          background-color: #3a4980;
          padding: 16px 28px;

          img {
            height: 22px;
            width: 22px;
          }

          span {
            color: #fff;
            font-weight: 500;
          }
        }

        .add-cart:hover {
          background-color: rgba(58, 73, 128, 0.95);
        }
      }
      .info-boxes {
        padding: 16px;
        border: solid 1px #e4e4e4;
        border-radius: 14px;

        .info-box {
          display: flex;
          align-items: flex-start;
          gap: 14px;

          .info-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;

            .info-title {
              color: #0d3356;
              font-size: 18px;
              font-weight: 700;
            }

            .info-caption {
              color: #6f7788;

              a:link {
                color: #6f7788;
              }

              a:visited {
                color: #6f7788;
              }
            }
          }
        }

        .info-box-1 {
          padding-bottom: 20px;
          border-bottom: solid 1px #e4e4e4;
        }

        .info-box-2 {
          padding-top: 20px;
        }
      }
    }
  }

  .reviews-section {
    padding: 40px 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;

    h2 {
      font-size: 28px;
      font-weight: 600;
      color: #1d2939;
    }

    .review-div {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      width: 836px;

      .users {
        width: 48px;
        height: 48px;
        border-radius: 99px;
        object-fit: cover;
        object-position: center;
        cursor: pointer;
      }

      .reviews-texts {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;

        .reviewer-status {
          display: grid;
          grid-template-columns: 116px 64px;
          align-items: center;
          gap: 4px;

          .reviewer-name {
            font-size: 16px;
            font-weight: 500;
            color: #1d2939;
          }

          .reviewer-lastseen {
            font-size: 12px;
            color: #6f7788;
          }

          .reviewer-stars {
            cursor: pointer;

            img {
              width: 12px;
              height: 12px;
            }
            img:hover {
              transform: rotateY(180deg);
              cursor: pointer;
              transition: all 0.6s ease;
            }
          }
        }

        .reviews-text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 4px;

          span {
            color: #3a4980;
          }

          p {
            font-size: 15px;
            color: #6f7788;
            line-height: 24px;
          }
        }

        .reviews-button {
          display: flex;
          align-items: center;
          gap: 18px;

          button {
            padding: 4px 6px;
            color: #d75951;
            background-color: rgba(215, 89, 81, 0);
            border: none;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
          }

          button:hover {
            background-color: rgba(215, 89, 81, 0.25);
          }

          .like-button {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #6f7788;
            background-color: rgba(111, 119, 136, 0);
          }

          .like-button:hover {
            background-color: rgba(111, 119, 136, 0.25);
          }
        }
      }
    }

    .reviews-border {
      background-color: #efefef;
      width: 1280px;
      padding: 1px 0;
      margin: 32px 0;
    }
  }

  .wreview-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 40px 80px;

    h2 {
      font-size: 28px;
      font-weight: 600;
      color: #1d2939;
    }

    .wreview-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 24px;

      .wreview-title-div {
        width: 840px;

        label {
          font-size: 16px;
          font-weight: 500;
          color: #1d2939;
        }

        input {
          width: 100%;
          padding: 16px 24px;
          font-size: 14px;
          border: 1px solid #e4e4e4;
          border-radius: 14px;
          margin-top: 8px;
        }
      }

      .wreview-content-div {
        width: 840px;

        label {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 8px;
          color: #1d2939;
        }

        textarea {
          font-family: "Inter", sans-serif;
          width: 100%;
          padding: 16px 24px;
          font-size: 14px;
          border: 1px solid #e4e4e4;
          border-radius: 14px;
          margin-top: 8px;
          line-height: 24px;
        }
      }
      .submit-btn {
        width: 185px;
        padding: 16px 28px;
        background-color: #3a4980;
        color: #fff;
        border: none;
        border-radius: 99px;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
      }

      .submit-btn:hover {
        background-color: rgba(58, 73, 128, 0.95);
      }
    }
  }

  .products-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 40px 80px;
    position: relative;

    h2 {
      font-size: 28px;
      font-weight: 600;
      color: #1d2939;
    }

    .products-container {
      display: flex;
      align-items: center;
      gap: 20px;
      position: relative;

      .product-container {
        width: 240px;
        border-radius: 16px;
        background-color: #f1f6fd;
        cursor: pointer;
        position: relative;

        .product-img {
          img {
            object-fit: cover;
            object-position: center;
            height: 240px;
            width: 100%;
            border-radius: 16px 16px 0 0;
          }
        }

        .product-like-btn {
          background-color: rgb(255, 255, 255, 0.6);
          border-radius: 99px;
          width: 32px;
          height: 32px;
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          top: 12px;
          right: 12px;
          cursor: pointer;

          img {
            width: 16px;
            height: 16px;
          }
        }

        .product-like-btn:hover {
          background-color: rgb(255, 255, 255, 1);
        }

        .product-text {
          margin: 16px 0 16px 16px;

          .product-name {
            font-size: 16px;
            font-weight: 500;
            color: #6f7788;
            margin-bottom: 6px;
          }

          .product-price {
            font-size: 18px;
            font-weight: 700;
            color: #3a4980;
            margin-bottom: 12px;
          }

          .product-availablity {
            color: #b9bbbf;
            margin-bottom: 16px;
          }

          .product-stars {
            cursor: pointer;
            img:hover {
              transform: rotateY(180deg);
              cursor: pointer;
              transition: all 0.6s ease;
            }
          }

          .product-rate {
            color: #b9bbbf;
          }
        }
      }

      .product-container:hover {
        background-color: #eaf1fc;
      }
    }

    .arrow-left,
    .arrow-right {
      background-color: rgb(255, 255, 255, 0.6);
      width: 36px;
      height: 36px;
      border: solid 1px #e4e4e4;
      border-radius: 99px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      cursor: pointer;
      top: 100px;
    }

    .arrow-left {
      left: -18px;
    }

    .arrow-right {
      right: -18px;
    }

    .arrow-left:hover,
    .arrow-right:hover {
      background-color: rgb(255, 255, 255, 1);
    }
  }
}