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


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

h1{
    font-family: "Noto Serif", serif;
    font-style: normal; 
    color: #000000;  
}

a{
    text-decoration: none;
}



body {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: black;
    font-family: "Inter", sans-serif;
    font-style: normal;
}

.main-div{
    width: 90rem;
    height: auto;
    background: #F5F8FF;
}

/* header section start */

/* hero section start */
.header{
    width: 100%;
    height: auto;
    padding: 2rem 9.375rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header > img{
    width: 8rem;
    height: auto;
}

.header nav ul{ 
    list-style: none;
    display: flex;
    align-items: center;
    gap: 3rem;    
}

.header nav ul li a{ 
    color: black;
}

.card{
    color: #000000;
    display: flex;
    align-items: center;
}

.header nav ul a img{ 
    margin-right: 0.5rem;
    width: 1.3rem;
}
/* hero section end */

/* Banner section start */
.Banner{
    width: 100%;
    height: auto;
    padding: 2rem 9.375rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.Banner > img{
    width: auto;
}

.Banner > div h1{
    font-size: 3.5rem;
    color: #000000;
    margin-bottom: 2rem;
}

.Banner > div h1 span{
    color: #E95A08;
}

.Banner > div p{
    color: #00000075;
}
/* header section end */
/* Banner section end */

/* main section start */
/* Plants Section start */

.button{
    width: 100%;
    background: #E95A08;
    padding: 0.7rem;
    border: none;
    color: white;
    font-size: large;
    cursor: pointer;
    transition: 1s;
}

.button:hover{
    border-radius: 1rem;
    background: white;
    color: #E95A08;
    border: 1px solid black;
    box-shadow: 1px 1px 9px black;
}

.Plants{
    width: 100%;
    height: auto;
    padding: 2rem 9.375rem;
}

.Our-Plants{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 4rem 0rem;
}

.Our-Plants > h1{
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.Our-Plants > h1 span{
    color: #E95A08;
}

.Our-Plants > p{
    font-size: 1.3rem;
    color: #00000075;
}

.Our-Plants-card{
    display: grid;
    grid-template-columns: repeat(4, 16.875rem);
    grid-template-rows: repeat(2, 30.25rem);
    grid-template-areas: 
    "box-1 box-2 box-3 box-4"
    "box-5 box-6 box-7 box-8";
    gap: 1.22rem;
}

.box-1{
    grid-area: box-1;
}

.box-2{
    grid-area: box-2;
}

.box-3{
    grid-area: box-3;
}

.box-4{
    grid-area: box-4;
}

.box-5{
    grid-area: box-5;
}

.box-6{
    grid-area: box-6;
}

.box-7{
    grid-area: box-7;
}

.box-8{
    grid-area: box-8;
}

.box{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    gap: 1.4rem;
}

.box img{
    width: 100%;
    height: auto;
}
/* Plants Section end */

/* Plants Lover Section start */
.Plants-Lover-Section{
    padding: 12rem 9.375rem 8rem 9.375rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5rem;
    position: relative;
}

.Plants-Lover-Section > img{
    width: 40rem;
}

.Plants-Lover-Section > div img{
    position: absolute;
    top: 4.5rem;
    left: 30rem;
}

.Plants-Lover-Section > div h1{
    font-size: 3rem;
}

.Plants-Lover-Section > div ul{
    padding-left: 2rem;
    color: #00000075;
}

.Plants-Lover-Section > div ul li p{
    font-size: 1.4rem;
    color: #00000075;
    margin: 1rem 0rem;
}
/* Plants Lover Section end */
/* Latest Deals section start */
.Latest-Deals{
    width: 100%;
    padding: 2rem 9.375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.Latest-Deals-title h1{
    font-size: 3vw;
    margin-bottom: 1rem;
}

.Latest-Deals-title h1 span{
    color: #E95A08;
}

.Latest-Deals-title p{
    color: #00000075;
    width: 40rem;
    margin-bottom: 3rem;
}

.Latest-Deals-image div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.Latest-Deals-image div h1{
    color: white;
}
.Latest-Deals-image div a{
    color: white;
    border-bottom: 1px solid white;
    padding-top: 0.8rem;
}

.Latest-Deals-image{
    display: grid;
    grid-template-columns: repeat(3, 24rem);
    grid-template-rows: repeat(2, 12rem);
    grid-template-areas: 
    "img-1 img-3 img-3"
    "img-2 img-3 img-3";
    gap: 1rem;
}

.img-1{
    background: rgba(0,0,0,0.4)url(../assets/deal-ana.png);
    background-size: cover;
    background-blend-mode: darken;
    grid-area: img-1;
    border-radius: 1rem;
}

.img-2{ 
    background: rgba(0,0,0,0.4)url(../assets/deal-bloom.png);
    background-size: cover;
    background-blend-mode: darken;
    grid-area: img-2;
    border-radius: 1rem;
}

.img-3{
    background: rgba(0,0,0,0.4)url(../assets/deal-zabo.png);
    background-size: cover;
    background-blend-mode: darken;
    grid-area: img-3;
    border-radius: 1rem;
}

/* Latest Deals section end */

/* Join Section start */
.Join-Section{
    width: 100%;
    height: 33.313rem;
    background: url(../assets/news-letter-bg.png);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.Join-Section > h1{
    font-size: 3rem;
    color: white;
}

.Join-Section > div{
    display: flex;
    align-items: center;
}

.Join-Section > div > input{
    width: 42rem;
    height: 3rem;
    padding: 0.8rem 1rem;
    border: none;
}

.Join-Section > div > button{
    width: 12rem;
    height: 3rem;
}
/* Join Section end */

/* mian section end */

/* footer section start */
footer{
    width: 100%;
    height: auto;
    padding: 3.125rem 10rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

footer a{
    color: #00000075;
}

.Website-logo-div-1 > p{
    width: 22.438rem;
    font-size: 1.4rem;
    color: #00000075;
    margin-top: 1rem;
}

.Website-logo-div-1 > img{
    width: 8rem;
    height: auto;
}

.Website-logo-div-2,
.Website-logo-div-3{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.Website-logo-div-4{
    display: flex;
    align-items: center;
    gap: 1.9rem;
}

/* footer section end */