@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

.noto-serif-font{
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

body{
    background-color: rgb(245, 248, 255);
}

/* Navbar styles */

nav{
    align-items: center;
}
.navbar{
    justify-content: space-between;
    margin: 0 150px;
    margin-top: 30px;
    margin-bottom: 120px;
}
.nav-item{
    color: rgba(137, 135, 161, 1);
} 
.nav-links{
    gap: 40px;
}
.brand{
    font-size: 3rem;
    font-weight: 600;
    color: rgba(233, 90, 8, 1);
}
.website-name{
    color: rgba(134, 168, 202, 0.725);
    font-size: 3rem;
}
.cart-icon{
    display: flex;
    gap: 10px;
    align-items: center;
}


/* responsive */

@media only screen and (max-width: 576px) {

.navbar
    .nav-item{
        display: none;
    }
  nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .navbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 30px 20px 60px;
    gap: 20px;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .nav-item {
    /* text-align: center; */
    font-size: 1rem;
  }

  .brand,
  .website-name {
    font-size: 2rem;
    /* text-align: center; */
  }

  .cart-icon {
    justify-content: space-between;
  }
}


/* shared style */

.display-flex{
    display: flex;
}
.color-orange{
    color: rgba(233, 90, 8, 1);
}
.color-gray{
    color: rgba(137, 135, 161, 1);
}

/* banner styles */

.banner{
    display: flex;
    margin: 0 150px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 120px;
}
.banner-title{
    font-size: 3rem;
    margin-bottom: 13px;
}
.banner-subtitle{
    max-width: 600px;
}


/* responsive */


@media only screen and (max-width: 576px) {
  .banner {
    flex-direction: column-reverse;
    margin: 0 20px 60px;
    align-items: flex-start;
    gap: 20px;
  }

  .banner-title {
    font-size: 2rem;
    margin-bottom: 10px;
    text-align: left;
    width: 100%;
  }

  .banner-subtitle {
    max-width: 100%;
    font-size: 1rem;
    text-align: left;
  }
}


/* Our plants */

.our-plants{
    text-align: center;
}
.our-plants-title{
    font-size: 2rem;
}
.our-plants-subtitle{
    margin-bottom: 49px;
    max-width: 570px;
    margin: 0 auto 49px;
}

.cart{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-left: 150px;
    margin-right: 150px;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}
.btn-primary{
    background-color: rgba(233, 90, 8, 1);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    width: 90%;
    margin-top: 10px;
}
.cart-title{
    font-size: 1.2rem;
    margin-top: 10px;
    text-align: center;
    font-weight: 500;
}
.cart-price{
    font-size: 1.1rem;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
    margin-bottom: auto;
}


/* responsive */

@media screen and (max-width: 576px) {
        .cart{
            grid-template-columns: repeat(2, 1fr);
            max-width: 100%;
            margin: 0 14px;
        }
}
.our-plants-subtitle{
    padding-left: 14px;
    padding-right: 14px;
}


/* Flower lover styles */

.Flower-Lover{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 180px 150px;
    margin-bottom: 120px;
    gap: 60px;
}
.Flower-Lover-title{
    font-size: 2.5rem;
    margin-bottom: 20px;
}
.Flower-Lover-subtitle{
    text-align: justify;
    max-width: 600px;
    font-size: 1.1rem;
    margin-bottom: 20px;
    list-style: disc;
}
.trusted-badge{
   margin-left: 560px;
   margin-bottom: -400px;
   position: absolute;
}


/* responsive */

@media screen and (max-width: 576px) {
  .Flower-Lover {
    flex-direction: column;
    align-items: center;
    margin: 60px 20px;
    gap: 30px;
    text-align: center;
  }
  .Flower-Lover-title {
    font-size: 2rem;
  }
  .Flower-Lover-subtitle {
    max-width: 100%;
    font-size: 1rem;
    text-align: justify;
    padding: 0 10px;
    margin: 0 20px;
  }
  .trusted-badge {
   display: none;
  }
}


/* Latest deals styles */

.latest-deals{
    text-align: center;
    margin: 0 150px;
    margin-bottom: 70px;
}
.latest-deals-title{
    font-size: 2rem;
    margin-bottom: 10px;
}
.latest-deals-subtitle{
    max-width: 600px;
    margin: 0 auto 0;
}
.three-photo{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 10px;
    margin-bottom: 120px;
}
.collage-1{
    border-radius: 20px;
    background-image: url(../assets/deal-bloom.png);
    height: 201px;
    width: 367px;
    margin-bottom: 20px;
}
.collage-1-title{
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
    color: white;
    padding-top: 80px;
}
.collage-1-subtitle{
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: white;
    margin-left: 140px;
}

.collage-2{
    border-radius: 20px;
    background-image: url(../assets/deal-ana.png);
    height: 201px;
    width: 367px;
}
.collage-2-title{
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
    color: white;
    padding: 70px 0 0;
}
.collage-2-subtitle{
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: white;
    margin-left: 140px;
}
.collage-3{
    border-radius: 20px;
    background-image: url(../assets/deal-zabo.png);
    height: 423px;
    width: 753px;
}
.collage-3-title{
    text-align: center;
    margin-top: 180px;
    font-size: 2rem;
    font-weight: 600;
    color: white;
}
.collage-3-subtitle{
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    color: white;
    margin-left: 300px;
}


/* responsive */

@media screen and (max-width: 576px) {
  .latest-deals {
    margin: 0 20px 40px;
    text-align: center;
  }

  .latest-deals-title {
    font-size: 1.5rem;
    margin-bottom: 8px;
  }

  .latest-deals-subtitle {
    max-width: 100%;
    padding: 0 10px;
    font-size: 0.95rem;
  }

  .three-photo {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 60px;
  }

  .collage-1,
  .collage-2 {
    width: 400px;
    height: 300px;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .collage-1-title,
  .collage-2-title {
    padding-top: 130px;
    font-size: 1.5rem;
  }
  .collage-1-subtitle,
  .collage-2-subtitle {
    margin-left: 160px;
    font-size: 1rem;
  }

  .collage-3 {
    width: 400px;
    height: 300px;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    margin: 0 auto;
    margin-top: 0;
  }
  .collage-3-title {
    margin-top: 130px;
    font-size: 1.5rem;
  }
  .collage-3-subtitle {
    margin-left: 160px;
    font-size: 1rem;
  }
}


/* colorful bunch styles */

.colorful-bunch{
    display: grid;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 120px;
    background-image: url(../assets/news-letter-bg.png);
    height: 533px;
}
.colorful-bunch-title{
    font-size: 2rem;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 0;
    padding: 0;
    margin-top: 200px;
    margin-bottom: 0;
}
.colorful-bunch-form{
    margin-top: 0;
    margin-bottom: 150px;
    gap: 0;
}
.btn-subscribe{
    background-color: rgba(233, 90, 8, 1);
    color: white;
    padding: 10px 20px;
    border-radius: 2px;
    border: none;
    cursor: pointer;
    margin-top: 10px;
    width: 200px;
}
input[type="email"]{
    padding: 10px;
    border-radius: 2px;
    border: 1px solid rgba(137, 135, 161, 1);
    width: 400px;
    margin-right: 10px;
    background-color: white;
}


/* responsive */

@media screen and (max-width: 576px) {
  .colorful-bunch {
    padding: 20px;
    background-size: cover;
    background-position: center;
    height: auto;
    margin-bottom: 60px;
  }

  .colorful-bunch-title {
    font-size: 1.5rem;
    margin-top: 100px;
    margin-bottom: 20px;
    line-height: 1.2;
  }

  .colorful-bunch-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-bottom: 60px;
  }

  input[type="email"] {
    width: 100%;
    max-width: 300px;
    margin-right: 0;
  }

  .btn-subscribe {
    width: 100%;
    max-width: 300px;
  }
}


/* footer styles */

.footer{
    display: flex;
    gap: 50px;
    margin-bottom: 50px;
    margin-right: 150px;
    margin-left: 150px;
}
.footer-1{
    width: 40%;
}
.footer-2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 30%;
    row-gap: 30px;
}
.footer-item{
}
.footer-3{
    display: flex;
    gap: 24px;
    width: 10%;
    justify-content: flex-start;
}
.footer-icon{
    height: 40px;
    width: 40px;
}

/* responsive */

@media screen and (max-width: 576px) {
  .footer {
    flex-direction: column;
    gap: 30px;
    margin: 0 20px 40px;
    align-items: center;
    text-align: center;
  }

  .footer-1,
  .footer-2,
  .footer-3 {
    width: 100%;
    justify-content: center;
  }

  .footer-2 {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .footer-3 {
    justify-content: center;
    gap: 15px;
  }

  .footer-icon {
    height: 36px;
    width: 36px;
  }
}