/* global styling */
:root {
  --main-color: #ff6900;
}
.main-color {
  color: #ff6900;
}

body {
  padding: 0;
  margin: 0;
  line-height: 1.3;
}
/* ----------------- */
/* navbar */
nav {
  border: 0.125rem #ffedd4 solid;
  .container {
    .collapse {
      .fa-utensils {
        padding: 0.9375rem;
        background-image: linear-gradient(
          135deg,
          rgba(255, 94, 0, 1) 34%,
          rgba(254, 68, 38, 1) 82%
        );
      }
      .nav-icons {
        i {
          font-size: 1.25rem;
          cursor: pointer;
          transition: all 0.3s;
          &:hover {
            color: #f54900;
          }
        }
        .w-40 {
          width: 2.5rem;
        }
        img {
          border: 0.125rem #ffb86a solid;
        }
      }
    }
  }
}
/* ------------------- */
/* header */
main {
  background-color: #fff8ec;
  header {
    .w-75 {
      .row {
        .col-md-4 {
          picture {
            img {
              min-height: 690px;
              width: 470px;
              display: block;
              object-fit: cover;
              border-top-left-radius: 1.25rem;
              border-bottom-left-radius: 1.25rem;
            }
            .layer1 {
              top: 1.25rem;
              left: 1.25rem;
            }
            .layer2 {
              width: 25rem;
              bottom: 1.25rem;
              left: 50%;
              transform: translateX(-36%);
              border-radius: 1.25rem;
            }
          }
        }
        .col-md-8 {
          overflow-y: auto;
          height: 43.125rem;
          scrollbar-color: #ffdbd2;
          .content {
            padding-left: 5.625rem;
            .nav-tabs .nav-item.show .nav-link,
            .nav-tabs .nav-link.active {
              border-color: transparent transparent transparent;
            }
            .nav-tabs .nav-link:focus,
            .nav-tabs .nav-link:hover {
              border-color: transparent transparent transparent;
              isolation: isolate;
            }
            .nav-tabs {
              border-bottom: 0rem solid #dee2e6;
              .nav-item {
                .nav-link {
                  color: #6a7282;
                  &:hover {
                    color: #364153;
                  }
                }
                .nav-link.active {
                  color: var(--main-color);
                  border-bottom: 0.125rem solid var(--main-color);
                }
              }
            }

            .title {
              .title-icons {
                display: flex;
                align-items: center;
                justify-content: center;
                i {
                  cursor: pointer;
                  color: #f54900;
                  font-size: 1rem;
                  background-color: #ffedd4;
                  padding: 1.0625rem;
                  border-radius: 0.625rem;
                  transition: all 0.2s;
                  &:hover {
                    background-color: #ffd6a7;
                  }
                }
              }
            }

            .tab-content {
              .ingredients {
                height: 21.875rem;
                overflow-y: auto;
                scrollbar-color: #ffdbd2;
              }
              .nutrition {
                .row {
                  .col-md-6 {
                    .cards {
                      .card1,
                      .card3,
                      .card5,
                      .card2,
                      .card4,
                      .card6 {
                        .card1-icon,
                        .card3-icon,
                        .card5-icon,
                        .card2-icon,
                        .card4-icon,
                        .card6-icon {
                          i {
                            width: fit-content;
                            height: fit-content;
                            padding: 0.75rem;
                          }
                        }
                      }
                    }
                  }
                }
              }
              .Chefstips {
                .items {
                  .item {
                    border-left: 0.25rem solid #ffb900;
                    border-radius: 0.75rem;
                  }
                }
              }
            }
            button.btn {
              background: linear-gradient(
                90deg,
                rgba(255, 99, 0, 1) 0%,
                rgba(251, 47, 52, 1) 100%
              );
              transition: all 0.3;
              &:hover {
                background: linear-gradient(
                  90deg,
                  rgba(244, 70, 0, 1) 0%,
                  rgba(231, 0, 9, 1) 100%
                );
                transform: scale(1.075);
              }
            }
            .warning-div {
              border-left: 0.25rem solid red;
            }
          }
        }
      }
    }
  }
}

/* ------------------- */

.color-9f0712 {
  color: #9f0712;
}
.bg-fef2f2 {
  background-color: #fef2f2;
}
.rounded-10 {
  border-radius: 0.625rem;
}
.w-90 {
  width: 90%;
}
.bg-fffbeb {
  background-color: #fffbeb;
}
.bg-fce7f3 {
  background-color: #fce7f3;
}
.bg-ffe2e2 {
  background-color: #ffe2e2;
}
.bg-dbeafe {
  background-color: #dbeafe;
}
.bg-dbfce7 {
  background-color: #dbfce7;
}
.bg-fef9c2 {
  background-color: #fef9c2;
}
.bg-f9fafb {
  background-color: #f9fafb;
}
.bg-fff9ec {
  background-color: #fff9ec;
}
.bg-ffedd4 {
  background-color: #ffedd4;
}
.rounded-15 {
  border-radius: 0.9375rem;
}
.color-364153 {
  color: #364153;
}
.rounded-20 {
  border-radius: 1.25rem;
}
.w-fit-content {
  width: fit-content;
}
.bg-main-color {
  background-color: #ff6900;
}
.fw-700 {
  font-weight: 700;
}
.fs-36 {
  font-size: 2.25rem;
}
.bg-dbfce7 {
  background-color: #dbfce7;
}
.bg-dbeafe {
  background-color: #dbeafe;
}
.fs-12 {
  font-size: 0.75rem;
}
.fs-24 {
  font-size: 1.5rem;
}
.fs-20 {
  font-size: 1.25rem;
}
p {
  margin-block-start: 0;
  margin-block-end: 0;
}
.color-6a7282 {
  color: #6a7282;
}
.fs-14 {
  font-size: 0.875rem;
}
.color-4a5565 {
  color: #4a5565;
}
.fs-16 {
  font-size: 1rem;
}
.fs-18 {
  font-size: 1.125rem;
}
.fw-500 {
  font-weight: 500;
}
.color-101828 {
  color: #101828;
}
.fw-600 {
  font-weight: 600;
}