* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "PlayFair Display";
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

/* 全站的「變數倉庫」 */
:root {
  --main-color: #a8dba8;
  --main-light: #79bd9a;
  --main-dark: #3b8686;
  --product-bg-color: #cff08e;
}

/* Main */
#main {
  min-height: 100vh; /* 高度至少等於一個視窗高（vh=視窗高度單位） */
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* header */

/*這裡非常重要 固定header */
header.header-fix {
  background-color: #ffffff;
  position: fixed; /*top 屬性只有在position!=static 時才有效 */
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 101;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.05);
  animation: navanimation 0.7s;
  /*animation: navanimation 0.6s;分解為
    animation-name: navanimation;和
    animation-duration: 0.6s; */
}
.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  width: 90%;
  margin: auto;
  padding: 30px 0px;
}

/*這裡非常重要 固定header */
header.header-fix .navigation {
  padding: 15px 0px;
}

/*這裡非常重要 滾輪上滑時header會慢慢滑上去  */
@keyframes navanimation {
  0% {
    /*元素一開始在畫面上方外面，
    -100% 代表「整個 header 高度在畫面外」 */
    top: -100%;
  }
  100% {
    /* header 回到畫面最上方、正常位置*/
    top: 0%;
  }
}

.menu-icon svg {
  /* (--main-color)，表示顏色由其他地方統一定義 */
  fill: var(--main-dark);
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.logo {
  max-width: 180px;
  height: 65px;
  display: flex;
}

.logo img {
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: contain;
  max-height: 65px;
}

.nav-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 25px;
}

.nav-btns a svg {
  fill: #3f3f3f;
  width: 20px;
  height: 18px;
}
.nav-cart {
  position: relative;
}

.nav-cart span {
  position: absolute;
  right: -8px;
  top: -12px;
  color: #ffffff;
  background-color: var(--main-dark);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 600;
  padding-bottom: 2px;
}

.side-menu {
  position: fixed;
  left: -100%;
  top: 0px;
  width: 100%;
  max-width: 300px;
  height: 100%;
  overflow-y: auto;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.06);
  z-index: 110;
  transition: all ease 0.5s;
}

/*雙冒號 :: 是用來選擇「偽元素」語法，它的作用是：
可以對元素內的特定虛擬部分加樣式，不需要真的在 HTML 寫出那個部分-->
而以下的用途是在 .side-menu 打開時，
整個畫面加上一層 半透明黑色背景遮罩（通常用在側邊選單或彈出視窗時的背景效果）
*/
/*懶人:這是一個 偽元素 pseudo-element，
會在 .side-menu 元素的最前面產生一個透明的遮罩層

>產生一個全畫面的半透明黑色背景
>用來在 menu 打開時，讓畫面變暗。
>預設 display:none; → 先不顯示。
>為什麼用 z-index:-1？
因為它要放在 .side-menu 的後面，不擋住 menu 本體
*/

.side-menu::before {
  content: "";
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  display: none;
}

/* ~ 是「一般兄弟選擇器（general sibling combinator）」
語法：
A ~ B { ... }
意思：
選取 同一父元素下，A 之後所有的 B 元素*/

#menu-btn:checked ~ .side-menu {
  left: 0%;
}

#menu-btn:checked ~ .side-menu::before {
  display: block;
}

#menu-btn {
  display: none;
}

.menu-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: #ffffff;
}

.side-menu strong {
  display: block;
  font-weight: 600;
  margin: 10px;
  padding: 5px 20px;
  background-color: var(--main-dark);
  border-radius: 20px;
  font-size: 0.9rem;
  color: #ffffff;
}

.close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-weight: 800;
}

.menu {
  display: block;
  width: 100%;
}

.menu li a {
  padding: 20px;
  display: flex;
  margin: 0px;
  width: 100%;
  color: #383838;
  font-weight: 500;
  border-bottom: 1px solid #f3f3f3;
  transition: all ease 0.5s; /* a 這個anchor樣式改變時，平滑的動畫在0.3s變化 */
}

.menu li a:hover {
  color: #181818;
}

/*main-content */
.main-content {
  display: grid;
  grid-template-columns: 1fr 0.5fr;
  width: 90%;
  max-width: 1100px;
  margin: auto;
  align-items: center;
}

.main-content-img {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.main-content-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.main-content-text {
  display: flex;
  flex-direction: column;
}

.main-content-text strong {
  color: var(--main-dark);
  text-transform: uppercase;
  letter-spacing: 10px;
  font-weight: 600;
}

.main-content-text h1 {
  font-size: 4rem;
  color: #313131;
  line-height: 4.7rem;
  font-weight: 600;
}

.main-content-text p {
  color: #8a8a8a;
  margin: 30px 0px;
  font-size: 1.1rem;
  letter-spacing: 0.2px;
  max-width: 300px;
}

.main-content-text a {
  color: #000000;
  background-color: var(--main-color);
  max-width: 150px;
  height: 50px;
  display: flex;
  justify-content: center; /* 水平置中內容（如 SVG 或文字）*/
  align-items: center;
  font-size: 0.9rem;
  transition: all ease 0.4s;
}

.main-content-text span {
  color: #252525;
  font-size: 3rem;
  margin-bottom: 20px;
}

.main-content-text a:hover {
  /* opacity: 0.7; 不透明度來變淡，這裡我想用深一點 */
  filter: brightness(75%); /* 亮度，直接用百分比控制深淺 */
}

/* 22:55*/
/* 24:14*/

/* search */
.search-bar {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 40vh;
  background-color: #ffffffbb;
  backdrop-filter: blur(30px);
  display: none;
  justify-content: center;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.05);
  z-index: 101; /* 數字越大越前面*/
}

.search-input {
  width: 90%;
  border-bottom: 1px solid #d4d4d4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  margin-top: 20px;
}

.search-input input {
  width: 100%;
  border: none;
  outline: none;
  background-color: transparent; /* 完全透明*/
  font-size: 1.8rem;
  margin: 0px;
}

.search-cancel {
  fill: var(--main-dark);
  font-size: 2rem;
  padding-right: 40px; /* 內容與右邊框之間的空白*/
  transition: all ease 0.3s;
}

.search-cancel:hover {
  opacity: 0.8;
}

.search-bar-active {
  display: flex;
  animation: searchanimation 0.4s;
}

@keyframes searchanimation {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: 0%;
  }
}

/*login sign up*/
.form {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 102;
  display: none; /* ⭐ 預設隱藏 */
  text-align: center;
}

.login-form,
.sign-up-form {
  width: 100%;
  max-width: 420px;
  padding: 20px 10px;
  background-color: #ffffff;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  position: relative;
}

.form-cancel {
  position: absolute;
  right: 20px;
  top: 10px;
  fill: #868686;
}

.login-form strong .sign-up-form strong {
  color: #272727;
  font-size: 2rem;
  margin: 2px 7px 7px 7px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.login-form form .sign-up-form form {
  display: flex;
  flex-direction: column; /*flex-direction一定要搭配display:flex才會生效*/
  justify-content: center;
  align-items: center;
  width: 100%;
}

.login-form input,
.sign-up-form input {
  width: 90%;
  height: 45px;
  margin: 6px 0px;
  padding: 0px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  outline: none;
  border-radius: 6px;
}

.login-form input::placeholder .sign-up-form ::placeholder {
  color: rgba(0, 0, 0, 0.05);
}

.login-form input[type="submit"] .sign-up-form input[type="submit"] {
  background-color: var(--main-color);
  color: #000000;
  border: none;
  outline: none;
  text-transform: uppercase;
  margin-top: 10px;
  border-radius: 3px;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.form-btns {
  width: 90%;
  display: flex;
  justify-content: space-between; /*左右兩端貼齊邊邊，中間的空間平均分配*/
  align-items: center;
  flex-wrap: wrap;
  grid-gap: 10px;
  margin-top: 10px;
}

.form-btns a {
  color: #4d4d4d;
  font-size: 0.9rem;
}

.form-btns a:hover {
  color: var(--main-color);
  text-decoration: underline;
}

/* 當form容器有login-active或sign-up-active時 會顯示 */
.login-form,
.sign-up-form {
  display: none;
}

/* 顯示登入用 */
.login-active,
.sign-up-active {
  display: flex;
}

/* 顯示註冊用 */
/*
第一段：讓整個彈窗容器出現
第二段：在彈窗裡選哪一個表單要出現
*/
.login-active .login-form,
.sign-up-active .sign-up-form {
  display: flex;
  animation: fade 0.4s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* *Popular*/
#popular {
  max-width: 1200px;
  width: 90%;
  margin: 50px auto;
  margin-top: 10px;
}

#popular h2 {
  color: #333333;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.popular-container {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-gap: 50px;
  margin-top: 20px;
  align-items: flex-start;
}

.popular-product-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* 建立一個三欄的網格，寬度等分 */
  grid-gap: 40px;
}

.product-box {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.product-box-img {
  width: 100%;
  max-height: 100%;
  height: 100%;
  /* background-color: var(--product-bg-color); */
  background-color: transparent;
  padding: 20px;
  border-radius: 5px;
  position: relative;
  transition: all ease 0.3s;
}

.product-box-img:hover {
  opacity: 0.8;
}

.product-box-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.product-box-img span {
  position: absolute;
  color: #ffffff;
  background-color: var(--main-dark);
  right: 5px;
  top: 5px;
  letter-spacing: 2px;
  border-radius: 3px;
  font-weight: 500;
  font-size: 0.8rem;
  padding: 2px 10px;
}

.product-box-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.product-box-text .product-text-title {
  color: #2b2b2b;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 10px;
  letter-spacing: 1px;
}

.product-box-text span {
  color: var(--main-dark);
  font-size: 0.9rem;
  font-weight: 500;
  margin: 5px;
}

.product-box-text span del {
  color: #696969;
}

/* 46:41 */

.product-box-text .product-cart-btn {
  border-top: 1px solid #e9e9e9;
  width: 100%;
  padding: 10px;
  color: #1d1d1d;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all ease 0.3s;
}

.product-box-text .product-cart-btn svg {
  margin-right: 5px;
}

.product-box-text .product-cart-btn:hover {
  background-color: var(--main-dark);
  fill: #ffffff;
  color: #ffffff;
  border-top: 1px solid transparent;
}

.popular-banner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 40px 30px;
  text-align: center;
  background-color: #f2f2f2;
  min-height: 500px;
  width: 100%;
  /* 50*/
}

.popular-banner-img {
  width: 100%;
  height: 100%;
  margin-top: 30px;
}

.popular-banner-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.popular-banner-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.popular-banner-text h3 {
  color: #1d1d1d;
  font-weight: 500;
  font-size: 1.6rem;
}

.popular-banner-text a {
  color: var(--main-dark);
  font-weight: 500;
  margin-top: 10px;
}

/*shopping-banner */
#shopping-banner {
  max-width: 1200px;
  width: 90%;
  margin: 50px auto;
  background-color: #f2f2f2;
  padding: 30px;
  border-radius: 10px;
}

.shopping-banner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 900px;
  margin: auto;
}

.shopping-banner-img {
  height: 300px;
  display: flex;
  justify-content: center;
}

.shopping-banner-img img {
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.shopping-banner-text {
  display: flex;
  flex-direction: column;
  max-width: 400px;
}

.shopping-banner-text strong {
  color: var(--main-dark);
  text-transform: uppercase;
  letter-spacing: 10px;
  font-weight: 500;
}

.shopping-banner-text h3 {
  color: #202020;
  font-size: 1.8rem;
  letter-spacing: 2px;
}

.shopping-banner-text p {
  color: #686868;
  margin: 10px 0px;
}

.shopping-banner-text a {
  color: #ffffff;
  background-color: var(--main-dark);
  max-width: 160px;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 1px;
  transition: all ease 0.3s;
}

.shopping-banner-text a:hover {
  opacity: 0.7;
}

/* recent-product*/
#recent-product {
  max-width: 1200px;
  width: 90%;
  margin: 50px auto;
}

.recent-product-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 40px;
  margin-top: 20px;
}

/* partner */
#partner {
  max-width: 1200px;
  width: 90%;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 40px;
  grid-gap: 15px;
}

#partner img {
  height: 70px;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: 0.3;
  transition: all ease 0.3s;
}

#partner img:hover {
  opacity: 1;
  filter: grayscale(0);
}

#download-app {
  max-width: 1150px;
  width: 100%;
  background-color: #e9e9e9;
  height: 400px;
  margin: 150px auto;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#download-btns {
  display: flex;
}

.download-btns a {
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.download-btns a img {
  width: 150px;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.download-app-text {
  max-width: 500px;
  display: flex;
  flex-direction: column;
}

.download-app-text strong {
  color: #393939;
  font-size: 1.56rem;
  letter-spacing: 2px;
}

.download-app-text p {
  color: #3b3b3b;
  margin: 20px 0px;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
}

.app-img {
  width: 275px;
  height: 550px;
  background-color: #ffffff;
  border: 4px solid #393939;
  border-radius: 20px;
  overflow: hidden;
}

.app-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/*blog*/
#blog {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 50px;
  max-width: 1200px;
  width: 90%;
  margin: auto;
}

.blog-heading {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.blog-heading h3 {
  font-size: 1.8rem;
  color: #2b2b2b;
  font-weight: 600;
}

.blog-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
  margin: 20px 0px;
}

.blog-box {
  width: 100%;
  background-color: #e9e9e9;
}

.blog-img {
  width: 100%;
  height: 100%;
  max-height: 280px;
}

.blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.blog-text {
  display: flex;
  flex-direction: column;
  padding: 30px;
}

.blog-text span {
  color: var(--main-dark);
  font-size: 0.9rem;
}

.blog-text .blog-title {
  font-size: 1.3rem;
  color: #272727;
  font-weight: 500;
}

.blog-text p {
  color: #5f5f5f;
  font-size: 0.9rem;
  display: -webkit-box; /* 啟用多行裁切模式 */
  -webkit-line-clamp: 3; /* 最多顯示 3 行 */
  -webkit-box-orient: vertical; /* 直向排列 */
  overflow: hidden; /* 超出內容隱藏 */
  text-overflow: ellipsis; /* 嘗試顯示 ... */
  margin: 20px 0px;
}

.blog-text a {
  color: #9b9b9b;
  transition: all ease 0.3s;
}

.blog-text a:hover {
  color: #9b9b9b;
}

/* services*/
.services {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  width: 90%;
  margin: auto;
  grid-gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.service-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(195, 195, 195, 0.55);
  min-width: 250px;
  padding-bottom: 10px;
  flex-grow: 0.7;
}

.service-box svg {
  fill: #000000;
  font-size: 2rem;
  margin: 15px;
}

.service-box span {
  color: #222222;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 1rem;
}

.service-box p {
  color: #878787;
  margin: 0px;
  font-size: 0.9rem;
}

/* footer*/
footer {
  width: 100%;
}

.footer-container {
  max-width: 1200px;
  width: 90%;
  margin: 0px auto;
  padding: 50px 0px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-company-box,
.footer-subscribe {
  max-width: 330px;
}

.footer-company-box {
  max-width: 330px;
}

.footer-company-box .footer-logo {
  color: #333333;
  max-width: 150px;
  display: flex;
  height: 45px;
}

.footer-company-box .footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left;
  max-height: 65px;
}

.footer-company-box p,
.footer-subscribe p {
  color: #585858;
  margin: 5px 0px;
}

.footer-social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.footer-social a {
  margin-top: 10px;
  margin-right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  fill: #333333;
  border: 1px solid #e9e9e9;
  font-size: 0.9rem;
  transition: all ease 0.3s;
}

.footer-social a:hover {
  fill: #ffffff;
  background-color: var(--main-dark);
  border: 1px solid transparent;
}

.footer-social a svg {
  pointer-events: none;
}

.footer-social a:hover svg circle {
  stroke: #ffffff;
  fill: #ffffff;
}

.footer-link-box {
  display: flex;
  flex-direction: column;
}

.footer-link-box strong,
.footer-subscribe strong {
  color: #3b3b3b;
  font-weight: 600;
  font-size: 1.2rem;
}

.footer-link-box ul {
  margin-top: 5px;
}

.footer-link-box ul li a {
  color: #585858;
  margin-bottom: 3px;
  display: flex;
  transition: all ease 0.3s;
}

.footer-link-box ul li a:hover {
  color: var(--main-dark);
  border: 1px;
}

.subscribe-box {
  width: 100%;
  border: 1px solid #dadada;
  display: flex;
  justify-content: center;
  height: 100%;
  margin-top: 10px;
}

.subscribe-box input {
  width: 100%;
  border: none;
  outline: none;
  background-color: transparent;
  padding: 0px 15px;
}

.subscribe-box button {
  color: #ffffff;
  border: none;
  outline: none;
  background-color: var(--main-dark);
  text-transform: uppercase;
  font-weight: 500;
  padding: 0px 20px;
  height: 40px;
  cursor: pointer;
}

.subscribe-box button:hover {
  opacity: 0.8;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  grid-gap: 10px;
  padding: 20px 0px;
  max-width: 1200px;
  margin: auto;
  color: #616161;
  width: 90%;
  border-top: 1px solid #e9e9e9;
}

.footer-bottom span {
  color: #252525;
  font-size: 0.9rem;
}

/*Making Responsive */
@media (max-width: 1200px) {
  .footer-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
  }
  #download-app {
    width: 90%;
  }
}

/* 當顯示頁面小於1024px， 會做的事*/
@media (max-width: 1100px) {
  .popular-container {
    grid-template-columns: 1fr;
  }
  .popular-banner-img {
    max-height: 500px;
  }
}

@media (max-width: 1024px) {
  .recent-product-container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
  }
  #download-app {
    flex-direction: column;
    height: 100%;
    background-color: transparent;
    margin: 30px auto;
    max-width: 100%;
  }
  .app-img {
    height: 450px;
    width: 220px;
  }
  .download-app-text {
    max-width: 100%;
    background-color: #dadada;
    padding: 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 20px;
  }
  .main-content {
    display: flex;
    flex-direction: column-reverse;
  }

  .main-content-img {
    max-height: 60vh;
  }

  .main-content-text {
    margin-top: 30px;
    max-width: 100%;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  .main-content-text p {
    max-width: 400px;
    margin: auto;
  }
  .main-content-text h1 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  .main-content-text a {
    padding: 0px 20px;
  }
}

@media (max-width: 850px) {
  .blog-container {
    grid-template-columns: 1fr 1fr;
  }
  .blog-box {
    display: flex;
    flex-direction: column;
  }
  #partner {
    margin-top: 20px;
    justify-content: center;
    grid-gap: 30px;
  }
  #partner img {
    height: 40px;
  }
  #shopping-banner {
    padding: 20px;
  }
  .shopping-banner-container {
    display: flex;
    flex-direction: column-reverse;
  }
  .shopping-banner-img {
    height: auto;
    width: 90%;
  }

  .shopping-banner-img img {
    width: 100%;
  }
  .shopping-banner-text {
    width: 90%;
    margin-top: 30px;
    max-width: 100%;
  }
  .navigation {
    padding: 20px;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    height: 30px;
  }
  .logo img {
    max-height: 30px;
  }
  header.header-fix .navigation {
    padding: 10px 20px;
  }
}

@media (max-width: 724px) {
  .recent-product-container,
  .popular-product-container {
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  }
  .blog-container {
    grid-template-columns: 1fr;
  }
  .login-form,
  .sign-up-form {
    width: 90%;
  }
  .search-input {
    height: 60px;
  }
  .search-input input,
  .search-cancel {
    font-size: 1.4rem;
  }
}

@media (max-width: 550px) {
  .footer-container {
    grid-template-columns: 1fr;
  }
  .services-box {
    width: 100%;
  }
}

@media (max-width: 320px) {
  .recent-product-container,
  .popular-product-container {
    grid-template-columns: 1fr;
  }
  .download-btns {
    flex-direction: column;
  }
  .download-btns a {
    margin: 4px 0px;
    width: 140px;
  }
  .download-btns a img {
    width: 100%;
  }
  .download-app-text strong {
    font-size: 1.3rem;
  }
}