* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "League Spartan", sans-serif;
}

:root {
  /*---font Size---------*/
  --font-s: 16px;
  --font-m: 18px;
  --font-l: 22px;
  --font-xl: 26px;

  /*---Text-color---------*/
  --primary-clr: black;
  --secondary-clr: rgb(161, 151, 151);
  --accend-clr: #088177;
}

body {
  width: 100%;
}
#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 4% 25px;
  box-shadow: 0 5px 15px rgb(0, 0, 0, 0.06);
  z-index: 999;
  position: sticky;
  top: 0;
  left: 0;
  background-color: #e3e6f3;
}
.logo img {
  width: 45px;
  height: auto;
  border-radius: 8px;
  margin-right: 8px;
  vertical-align: middle;
}
.logo span {
  font-size: var(--font-xl);
  font-weight: 700;
  display: inline-block;
  vertical-align: middle;
}

#navbar ul {
  display: flex;
  gap: 35px;
  list-style: none;
}
#navbar li {
  position: relative;
}
#navbar li a {
  text-decoration: none;
  font-size: var(--font-m);
  color: rgb(51, 50, 50);
  transition: 0.3 ease;
}
#navbar li a:hover {
  color: var(--accend-clr);
}
#navbar li a.active::after,
#navbar li a:hover::after {
  content: "";
  width: 45%;
  height: 3px;
  background: var(--accend-clr);
  position: absolute;
  bottom: -4px;
  left: 1px;
}
#navbar li a:hover,
#navbar li a.active {
  color: var(--accend-clr);
}
#mobile {
  display: none;
}

/*--------Home------*/

#hero {
  height: calc(100vh - 90px);
  width: 100%;
  background-color: #e3e6f3; /*need to correction background image*/
  background-image: url(image/home.bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right -90px center;
  background-size: 55% 110%;
  padding: 0 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
#hero h4 {
  color: black;
  font-size: 20px;
  line-height: 45px;
}
#hero h2 {
  color: black;
  font-size: 46px;
  font-weight: 600;
}
#hero h1 {
  color: var(--accend-clr);
  font-size: 50px;
  font-weight: 500;
}
#hero p {
  color: var(--secondary-clr);
  font-size: 16px;
  line-height: 40px;
}
#hero button {
  color: var(--accend-clr);
  background-image: url(image/button.png);
  background-color: transparent;
  border: none;
  padding: 14px 80px 14px 65px;
  background-repeat: no-repeat;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}
#feature {
  margin: 50px 110px;
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: nowrap;
}
#feature .fe-box {
  flex: 1 1 calc(100% - (20px * 5) / 6);
  text-align: center;
  border: 1px solid #cce7d0;
  border-radius: 4px;
  padding: 25px 15px;
  box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.06);
  margin: 15px 0;
}

#feature .fe-box:hover {
  box-shadow: 10px 10px 54px rgba(70, 62, 221, 0.01);
  cursor: pointer;
}

#feature .fe-box img {
  width: 100%;
}
#feature .fe-box h6 {
  margin-top: 20px;
  color: #719a76;
  background-color: rgb(245, 221, 190);
  padding: 9px 9px 6px 9px;
  font-size: 13px;
  display: inline-block;
  line-height: 1;
  border-radius: 4px;
}
#feature .fe-box:nth-child(2) h6 {
  background-color: rgb(184, 245, 224);
}
#feature .fe-box:nth-child(3) h6 {
  background-color: rgb(219, 219, 248);
}
#feature .fe-box:nth-child(4) h6 {
  background-color: rgb(230, 248, 191);
}
#feature .fe-box:nth-child(5) h6 {
  background-color: rgb(246, 243, 161);
}
#feature .fe-box:nth-child(6) h6 {
  background-color: rgb(248, 218, 238);
}

#product-1 h2 {
  margin-top: 100px;
  text-align: center;
  font-size: 45px;
  font-weight: 500;
}
#product-1 p {
  text-align: center;
  margin: 10px 0;
  color: rgb(135, 125, 125);
  font-size: 17px;
}
.pro-container {
  margin: 50px 110px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2%;
}
.pro {
  border: 1px solid rgb(224, 221, 221);
  width: 23%;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 20px 20px 30px rgba(26, 25, 25, 0.02);
  transition: 0.2s ease;
  position: relative;
  margin-bottom: 28px;
}
.pro:hover {
  box-shadow: 17px 15px 20px rgba(26, 25, 25, 0.07);
}
.pro img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}

.pro .des span {
  display: inline-block;
  color: rgb(135, 125, 125);
  font-size: 15px;
  margin-bottom: 7px;
}
.pro .des h5 {
  font-size: 13px;
}
.pro .des .star {
  color: #ffc107;
  font-size: 13px;
  margin-top: 4px;
  margin-bottom: 8px;
}
.pro .des h4 {
  font-size: 15px;
  color: rgb(9, 103, 9);
  margin-bottom: 10px;
}
.pro .cart {
  color: rgb(9, 103, 9);
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: rgb(230, 227, 227);
  font-weight: 500;
  text-align: center;
  border-radius: 50px;
  position: absolute;
  right: 11px;
  bottom: 20px;
}
.pro .cart:hover {
  background-color: rgb(30, 80, 30);
  color: white;
}
#banner {
  margin: 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)),
    url(image/banner.webp);
  background-position: top 10%;
  height: 235px;
  color: white;
  background-size: cover;
}
#banner h4 {
  line-height: 42px;
}
#banner h2 {
  font-size: 30px;
  font-weight: 600px;
}
#banner h2 span {
  color: rgba(247, 6, 6, 0.977);
}
#banner button {
  font-size: 15px;
  margin-top: 15px;
  padding: 9px 20px;
  border-radius: 3px;
  border: none;
  background-color: white;
  font-weight: 600;
  transition: 0.5s ease;
}
#banner button:hover {
  background-color: #088177;
  color: white;
  cursor: pointer;
}
#more-collection {
  margin: 50px 110px;
}
#more-collection .col-box-up {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  width: 100%;
}
#more-collection .col-box-up .col-box {
  flex: 1 1 calc(50% - 20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-image: url(image/collection/c1.jpg);
  width: 100%;
  height: 50vh;
  background-size: cover;
  background-position: center;
  padding: 30px;
}
#more-collection .col-box-up .col-box:nth-child(2) {
  background-image: url(image/collection/c2.jpg);
}

#more-collection .col-box-up .col-box h3 {
  font-size: 22px;
  font-weight: 400;
  color: rgb(244, 237, 237);
}

#more-collection .col-box-up .col-box h2 {
  font-size: 28px;
  line-height: 44px;
  color: white;
}
#more-collection .col-box-up .col-box p {
  color: rgb(244, 237, 237);
}

#more-collection .col-box-up .col-box button {
  color: rgb(244, 237, 237);
  background-color: transparent;
  font-size: 16px;
  border: none;
  margin-top: 14px;
  padding: 5px 12px;
  border: 1px solid white;
  transition: 0.2s ease;
}
#more-collection .col-box-up .col-box button:hover {
  background-color: #719a76;
}
#more-collection .col-box-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
  width: 100%;
}
#more-collection .col-box-bottom .col-box {
  flex: 1 1 calc(33.33% - 20px * 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-image: url(image/collection/c3.jpg);
  width: 100%;
  height: 40vh;
  background-size: cover;
  background-position: center;
  padding: 30px;
}
#more-collection .col-box-bottom .col-box:nth-child(2) {
  background-image: url(image/collection/c4.jpg);
}
#more-collection .col-box-bottom .col-box:nth-child(3) {
  background-image: url(image/collection/c5.jpg);
}

#more-collection .col-box-bottom .col-box h2 {
  font-size: 28px;
  line-height: 44px;
  color: white;
}
#more-collection .col-box-bottom .col-box p {
  color: rgb(249, 27, 27);
  font-family: 16px;
  font-weight: 600;
}
#newsletters {
  padding: 45px 100px;
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(11, 11, 61);
  color: white;
}
#newsletters .newsletters-text h3 {
  line-height: 35px;
  font-size: 24px;
}
#newsletters .newsletters-text p {
  font-size: 16px;
  color: rgb(161, 161, 234);
}
#newsletters .newsletters-text p span {
  color: rgb(252, 225, 89);
}
#newsletters .form {
  display: flex;
  width: 28%;
}
#newsletters .form input {
  height: 34px;
  width: 100%;
  padding: 0 15px;
  border: 1px solid transparent;
  color: #eff0f4;
  font-size: 16px;
  border-radius: 4px 0 0 4px;
  outline: none;
}
#newsletters .form button {
  background-color: #0f655e;
  color: white;
  font-weight: 400;
  padding: 0 22px;
  border: none;
  border-radius: 0 4px 4px 0;
  white-space: nowrap;
  font-size: 16px;
}
.footer-up {
  display: flex;
  justify-content: space-between;
  margin: 50px 90px 80px 110px;
}
.footer-up .logo img {
  width: 40px;
  height: auto;
  margin-top: 70px;
}
.footer-up .logo span {
  margin-top: 27px;
  font-size: 30px;
}

.footer-up .footer-col h3 {
  margin-top: 30px;
  margin-bottom: 18px;
  font-size: 22px;
}
.footer-up .footer-col p {
  color: gray;
  margin-bottom: 11px;
  font-size: 18px;
  font-style: normal;
}
.footer-up .footer-col p strong {
  color: black;
}
.footer-up .footer-col .follow .icon {
  color: rgb(105, 103, 103);
  font-size: 17px;
  margin-top: -5px;
}
.footer-up .footer-col a {
  display: block;
  text-decoration: none;
  color: gray;
  margin-bottom: 9px;
  font-size: 18px;
}
.footer-up .footer-col i:hover,
.footer-up .footer-col a:hover {
  color: #088178;
}
.footer-up .footer-col .downlord-link {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  margin-bottom: 15px;
}
.footer-up .footer-col .downlord-link img {
  border: 1.75px solid #088178;
  border-radius: 6px;
}
.footer-up .footer-col img {
  margin-top: 10px;
}
#footer .footer-bottom p {
  text-align: center;
  margin-bottom: 30px;
  color: rgb(74, 73, 73);
}
/*-------For Medium device------*/
@media (max-width: 768px) {
  #navbar ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 18px;
    position: fixed;
    top: 0;
    height: 100vh;
    width: 300px;
    right: -300px;
    background-color: #e3e6f3;
    box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
    padding: 80px 0 0 15px;
  }
  #mobile {
    display: flex;
    align-items: center;
  }
}
#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 4% 25px;

  box-shadow: 0 5px 15px rgb(0, 0, 0, 0.06);
  z-index: 999;
  position: sticky;
  top: 0;
  left: 0;
  background-color: #e3e6f3;
}
.logo img {
  width: 45px;
  height: auto;
  border-radius: 8px;
  margin-right: 8px;
  vertical-align: middle;
}
.logo span {
  font-size: var(--font-xl);
  font-weight: 700;
  display: inline-block;
  vertical-align: middle;
}

#navbar li {
  position: relative;
}
#navbar li a {
  text-decoration: none;
  font-size: var(--font-m);
  color: rgb(51, 50, 50);
  transition: 0.3 ease;
}
#navbar li a:hover {
  color: var(--accend-clr);
}
#navbar li a.active::after,
#navbar li a:hover::after {
  content: "";
  width: 45%;
  height: 3px;
  background: var(--accend-clr);
  position: absolute;
  bottom: -4px;
  left: 1px;
}
#navbar li a:hover,
#navbar li a.active {
  color: var(--accend-clr);
}

/*-------For Small device------*/
@media (max-width: 600px) {
}