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

/* Shared class */

.inter-font {
  font-family: 'Inter', sans-serif;
}

.noto-font {
  font-family: 'Noto Serif', serif;
}

.basic-btn {
  padding: 19px 80px;
  background-color: #e95a08;
  color: white;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.4s;
}

.basic-btn:hover {
  background-color: #d44d00;
}

body {
  font-family: 'Inter', sans-serif;
}

/* Navbar Style */

nav {
  margin: 20px 150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.items {
  display: flex;
  align-items: center;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 3rem;
}

nav li a {
  text-decoration: none;
  color: #8987a1;
  font-weight: bold;
  transition: color 0.4s;
}

nav li a:hover {
  color: #252432;
}

.cart-icon {
  display: flex;
  align-items: center;
  margin-left: 3rem;
  gap: 2px;
  cursor: pointer;
}

/* Responsive Navbar */

@media screen and (max-width: 576px) {
  nav {
    margin: 30px;
  }

  nav ul li {
    display: none;
  }

  .cart-icon {
    margin-left: 0;
  }

  .logo img {
    width: 80px;
    height: 38px;
  }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
  nav {
    margin: 20px 100px;
  }

  .logo img {
    width: 75px;
  }
}

/* Banner Section */

.banner-sec {
  margin: 120px 150px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.banner-txt {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.banner-txt h1 {
  font-size: 4rem;
  font-weight: bold;
}

.banner-txt span {
  color: #e95a08;
}

.banner-txt p {
  font-size: 1.4rem;
  color: rgba(0, 0, 0, 0.5);
  width: 90%;
}

/* Responsive banner */

@media screen and (max-width: 576px) {
  .banner-sec {
    margin: 50px 0px;
    flex-direction: column-reverse;
    gap: 30px;
  }

  .banner-txt {
    margin: 0 20px;
  }

  .banner-txt p {
    font-size: 14px;
    width: 100%;
  }

  .banner-txt h1 {
    font-size: 1.5rem;
  }

  .banner-img img {
    width: 100%;
  }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
  .banner-sec {
    margin: 40px 0px;
    flex-direction: column-reverse;
    gap: 50px;
  }

  .banner-txt {
    margin: 0 50px;
  }

  .banner-img {
    width: 100%;
  }

  .banner-img img {
    width: 100%;
  }
}

/* Plants section style */

.plants-sec {
  margin: 120px 150px 200px 150px;
}

.plants-txt {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  margin-bottom: 50px;
}

.plants-txt h2,
.latest-deal-txt h2 {
  font-size: 3rem;
  font-weight: bold;
}

.plants-txt span,
.latest-deal-txt span {
  color: #e95a08;
}

.plants-txt p,
.latest-deal-txt p {
  font-size: 1.4rem;
  opacity: 0.5;
}

.all-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 30px;
}

.box {
  text-align: center;
}

.box img {
  margin-bottom: 30px;
}

.box h3 {
  font-size: 1.4rem;
  color: #111111;
  font-weight: 500;
  margin-bottom: 10px;
}

.box h4 {
  font-size: 1.4rem;
  color: #111111;
  font-weight: bold;
  margin-bottom: 30px;
}

/* Responsive plants section */

@media screen and (max-width: 576px) {
  .plants-sec {
    margin: 65px 30px 40px 30px;
  }

  .all-boxes {
    grid-template-columns: repeat(2, 50%);
    column-gap: 10px;
  }

  .box img {
    width: 100%;
  }

  .basic-btn {
    padding: 19px 30px;
    font-size: 10px;
  }

  .box h3,
  .box h4 {
    font-size: 1rem;
  }

  .plants-txt h2,
  .latest-deal-txt h2 {
    font-size: 1.5rem;
  }

  .plants-txt p,
  .latest-deal-txt p {
    font-size: 14px;
  }
}

/* Plants lover section */

.plant-lover-sec {
  margin: 210px 150px 130px 150px;
  display: flex;
  align-items: center;
  gap: 60px;
}

.plant-lover-txt {
  padding-left: 60px;
}

.plant-lover-txt h1 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 20px;
  width: 80%;
}

.plant-lover-txt ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.plant-lover-txt li {
  font-size: 1.4rem;
  opacity: 0.5;
  width: 80%;
}

.badge-img {
  position: absolute;
  margin-left: 380px;
  margin-bottom: 500px;

  animation: rotate 5s linear infinite;
}

.badge-img img {
  width: 286px;
  height: 284px;
}

@keyframes rotate{
  from{
    transform: rotate(0);
  }

  to{
    transform: rotate(360deg);
  }
}

/* Responsive plant lover section */

@media screen and (max-width: 576px) {
  .plant-lover-sec {
    margin: 42px 15px 130px 17px;
    flex-direction: column;
  }

  .badge-img {
    display: none;
  }

  .plant-lover-img img {
    width: 100%;
  }

  .plant-lover-txt li,
  .plant-lover-txt h1 {
    width: 100%;
  }

  .plant-lover-txt h1 {
    font-size: 1.5rem;
  }

  .plant-lover-txt li {
    font-size: 14px;
  }

  .plant-lover-txt {
    padding: 20px;
  }
}

/* Latest deal section */

.latest-deal-sec {
  margin: 120px 150px;
}

.latest-deal-txt {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;

  margin-bottom: 100px;
}

.latest-deal-images {
  display: grid;
  grid-template-areas:
    'bloom zabo zabo'
    'ana zabo zabo';
  gap: 30px;
}

.bloom-plant,
.ana-plant,
.zabo-plant {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  color: white;
  border-radius: 14px;
}

.bloom-plant p,
.ana-plant p,
.zabo-plant p {
  color: white;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid white;
}

.bloom-plant h2,
.ana-plant h2 {
  font-size: 1.2rem;
  font-weight: bold;
}

.zabo-plant h2 {
  font-size: 2.5rem;
  font-weight: bold;
}

.zabo-plant a {
  font-size: 1.75rem;
  text-decoration: underline;
}
.bloom-plant {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url(./assets/deal-bloom.png);
  background-size: cover;
  padding: 65px 48px;
  grid-area: bloom;
}

.ana-plant {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url(./assets/deal-ana.png);
  background-size: cover;
  padding: 60px 48px;
  grid-area: ana;
}

.zabo-plant {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url(./assets/deal-zabo.png);
  background-size: cover;
  padding: 165px 128px;
  grid-area: zabo;
}

/* Responsive latest deal section */

@media screen and (max-width: 576px) {
  .latest-deal-sec {
    margin: -60px 30px 40px 30px;
  }

  .latest-deal-txt {
    margin-bottom: 50px;
  }

  .latest-deal-images {
    grid-template-areas:
      'bloom'
      'ana'
      'zabo';
    grid-template-columns: 1fr;
  }

  .bloom-plant,
  .ana-plant,
  .zabo-plant {
    padding: 60px 30px;
  }

  .bloom-plant h2 {
    font-size: 1.12rem;
  }

  .zabo-plant h2 {
    font-size: 1.2rem;
  }

  .zabo-plant a {
    font-size: 1rem;
  }
}

/* Join section */

.join-sec {
  padding: 195px 305px;
  background-image: url(./assets/news-letter-bg.png);
  background-size: cover;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
}

.join-sec h1 {
  font-size: 3rem;
  color: white;
}

.input-email {
  display: flex;
  align-items: center;
}

.join-sec input {
  width: 600px;
  height: 50px;

  outline: 0;
  padding-left: 20px;
  border: none;
}

::placeholder {
  opacity: 0.5;
}

.join-sec button {
  height: 50px;
  font-size: 1rem;
}

/* Responsive Join section */

@media screen and (max-width: 576px) {
  .join-sec {
    padding: 100px 20px;
  }
  .join-sec h1 {
    font-size: 1.2rem;
  }

  .join-sec input {
    width: 100%;
  }

  .join-sec button {
    text-align: center;
    font-size: 14px;
    padding: 10px;
  }
}

/* Footer scetion */

.footer-sec {
  margin: 50px 160px;
  display: flex;
  justify-content: space-evenly;
}

.logo-txt {
  margin-bottom: 16px;
  width: 30%;
}

.logo-txt p {
  opacity: 0.5;
  font-size: 1.4rem;
}

.all-nav-items {
  display: flex;
  justify-content: space-between;
}

.footer-sec ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.footer-sec li a {
  color: #6b7280;
  text-decoration: none;
  transition: color 0.4s;
}

.footer-sec li a:hover{
  color: black;
}

.social-links {
  display: flex;
  align-items: flex-start;
  
  cursor: pointer;
}

.links{
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Respomsive footer */

@media screen and (max-width: 576px){
  .footer-sec{
    margin: 50px;
    flex-direction: column;
    gap: 20px;
  }

  .logo-txt {
    width: 100%;
    font-size: 1rem;
  }
}