@import "tailwindcss";

/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap");

@layer utilities {
  .font-inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
  }
  .font-noto-serif {
    font-family: "Noto Serif", serif;
  }
  .bg-clr {
    background-color: #f5f8ff;
  }
  .bg-img-style {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-size: cover;
  }
  .cta-bg {
    background-image: url(../assets/cta/news-letter-bg.png);
  }
}

@layer component {
  .btn {
    font-weight: 600;
    width: 100%;
    height: 50px;
    background-color: #e95a08;
    color: #ffffff;
  }
  .btn, .ctabtn {
    transition: background-color 0.33s linear;
  }
  .btn:hover, .ctabtn:hover {
    background-color: #000000;
    cursor: pointer;
  }
}

/* *COMMON STYLE START */
header,
.hero-contents,
.ourplants,
.trustedseller,
.latestdeals,
.footer {
  padding: 0 16px;
}
@media (min-width: 640px) {
  header,
  .hero-contents,
  .ourplants,
  .trustedseller,
  .latestdeals,
  .footer {
    padding: 0;
  }
}
@media (min-width: 768px) {
  .hero-contents {
    padding: 0;
  }
}
.containers {
  margin: 0 auto;
  width: 100%;
  max-width: 1140px;
  /* border: 1px solid; */
}

img {
  width: 100%;
  /* display: block; */
}

.active {
  font-weight: 400;
  color: #252432;
}

h1,
h2,
span {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  color: #000000;
}
.cta-h2 {
  color: #ffffff;
}
h3 {
  font-weight: 500;
  color: #000000;
}
p {
  color: #00000080;
}
.text-p-black {
  color: rgba(0, 0, 0) !important;
}
a {
  color: #6b7280;
  transition: color 0.33s linear, font-weight 0.23s linear;
}
a:hover {
  font-weight: 700;
  color: #252432;
}
span {
  color: #e95a08;
}
/* *COMMON STYLE END */

/* *HEADER START */
header .navbar .cart {
  width: 20px;
  height: 22px;
}
.shopping-cart a {
  color: #000000;
}
/* *HEADER END */

/* *TRUSTED SELLER START */
.trusted-image .badge {
  width: 150px;
  height: 150px;
}
@media (min-width: 1280px) {
  .trusted-image .badge {
    width: 200px;
    height: 200px;
  }
}
/* *TRUSTED SELLER END */

/* *FOOTER START */
.footer-logo {
  width: 180px;
  height: 109px;
}
/* *FOOTER END */