:root {
    --primary: #E95A08
}

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


.inter-normal {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

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

body {
    background-color: #F5F8FF;
}

header, main {
    max-width: 1280px;
    margin: 0 auto;

}


section {
    margin: 120px 0;
}

button {
    font-size: 18px;
    color: white;
    background-color: var(--primary);
    padding: 20px 7px;
    border: none;
}

h2 {
    font-family: noto-serif;
}
/* nav */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;

}
.logo {
    height: 80px;
    width: 135px;
}

.logo img {
    max-width: 100%;
    height: auto;
}

.nav-links {
    display: flex;
    gap: 48px;
    font-size: 20px;
}

.bold {
    font-weight: 700;
}

.gray {
    color: #8987A1;
}

.cart {
    font-size: 25px;
    display: flex;
    align-items: center;
}

.cart span {
    font-size: 20px;
}

/* hero section */
.hero {
    margin-top: 280px;
    display: flex;
    align-items: end;

}

.left-half h1 {
    font-size: 65px;

}

.left-half p {
    font-size: 25px;
    margin-top: 20px;
}

.left-half span{
    color: var(--primary);

}

/* main */
main {
    text-align: center;
}

.text-content h2 {
    font-size: 50px;
}

.text-content h2 span{
    color: var(--primary);
}

.text-content p {
    font-size: 20px;
    width: 70%;
    margin: auto;
    padding: 20px 0;
}
.cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.card img {
    width: 100%;
}

.card p {
    font-size: 20px;
}
.card button {
    width: 100%;
    margin: 17px 0;
}

/* flower lovers */

.plant-lovers {
    display: flex;
    gap: 70px;
    align-items: center;
}

.left-side {
    position: relative;
}
.left-side .badge{
    position: absolute;
    right: -19%;
    top: -16%;
    width: 250px;
}
.right-side {
    text-align: left;
}

.right-side h2 {
    font-size: 50px;
    width: 70%;
}

.right-side ul { 
    color: #8987A1;
    padding-left: 20px;
    font-size: 22px;
}

.right-side li {
    margin: 20px 0;
}

/* deals */

.text-container h2 {
    font-size: 50px;
}

.text-container h2 span {
    color: var(--primary);
}

.text-container p {
    font-size: 22px;
    color: #8987A1;
    width: 60%;
    margin: 17px auto;
}

.deal-container {
    width: 100%;
    height: 425px;
    margin-top: 100px;

    display: grid;
    gap: 17px;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: repeat(2, 1fr);
}

.deal-container .bloom {
    background: url("./assets/deal-bloom.png") center / cover no-repeat;
    grid-column: 1;
    grid-row: 1/2;

    border-radius: 17px;
}

.deal-container .ana {
    background: url("./assets/deal-ana.png") center / cover no-repeat;
    grid-column: 1;
    grid-row: 2/3;

    border-radius: 17px;
}

.deal-container .zabo {
    background: url("./assets/deal-zabo.png")center / cover no-repeat;
    grid-column: 2;
    grid-row: 1/3;

    border-radius: 17px;
}

.texts {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 17px;
    height: 100%;
    width: 100%;

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

.texts p, .texts a {
    color: white;
}


.bloom .texts p, 
.ana .texts p {
    font-size: 22px;
}

.bloom .texts a, 
.ana .texts a {
    font-size: 18px;
} 

.zabo .texts p {
    font-size: 33px;
}

.zabo .texts a {
    font-size: 22px;
}

/* burnch */

.burnch {
    height: 530px;
    width: 100%;
    background: url("./assets/news-letter-bg.png") center / cover no-repeat;

}

.container {
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.burnch h1 {
    color: white;
    font-size: 50px;
}

.input-container {
    width: 100%;
}

.burnch input {
    height: 50px;
    width: 55%;
    padding: 20px;
    font-size: 18px;
    border: none;
}

.burnch button {
    font-size: 18px;
    height: 50px;
    padding: 15px 55px;

    margin-left: -5px;
}

/* footer */

footer {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 130px;

    padding: 0 100px 70px;
}

footer .links {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

footer .links  a {
    color: #8987A1;
    text-decoration: none;
}

footer .info p {
    font-size: 22px;
    color: #8987A1;
}

footer .icons{
    align-self: self-start;
    display: flex;
    gap: 13px;
    align-items: center;

}

/* footer .icon {
    margin: 0 13px;
} */