* {
    box-sizing: border-box;
}

body {
    background-color: whitesmoke;
    margin: 2rem 5%;
    font-family: sans-serif;
}

h2 {
    color: #26877f;
}

header > img {
    display: block;
    margin: 0 auto;
    height: 10%;
    width: 10%;
}

nav {
    margin: 3% auto;
}

nav ul {
    padding-left: 0; /*remove default ul padding left*/
    list-style: none;  /* to remove bullet points*/
    text-align: center;
}

ul li {
    display: inline-block;
    margin: 3%;
}

nav a {
    text-decoration: none;
    letter-spacing: 0.2rem;
    color: black;
    position: relative; 
}

nav a::before {
    content: "";
    height: 0.1rem;
    width: 0;
    background-color: #26877f;
    display: inline-block;
    position: absolute;
    bottom: -2px;
    left: 0;
    transition: width 0.5s;
}

nav a:hover::before {
    width: 100%;

}

main {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

#first-section {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

#first-section::before {
    content: "";
    background-image: url(https://balconygardenweb.b-cdn.net/wp-content/uploads/2020/01/21-Good-Luck-Plants-that-Can-Make-You-Lucky2.jpg), url("Lucky-Shrub-logos/Asset 3@3x.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -2;
}


#first-section article {
    padding: 5%;
    text-align: start;
    height: 100%;
    width: 100%;  
}

#first-section article > * {
    width: fit-content;
}

#first-section a {
    display: inline-block;
    color: black;
    font-weight: bolder;
}

#second-section {
    display: flex;
    gap: 2rem 2rem;  /*space between items which are inside this parent will have 2rem(row) & 2rem(column) space*/
}


.box {
    border-radius: 0.5rem;
    box-shadow: 0 1px 12px 1px grey;
    text-align: center;
    overflow: hidden;
    display: grid;
    grid-template-rows: 2fr 1fr; 
}

.box .content {
    padding: 5%;
}

.box > div:nth-child(1) {
    overflow: hidden;
}

.box .indoor-plant, .box .outdoor-plant, .box .landscape {
    position: relative;
}

.indoor-plant::before, .outdoor-plant::before, .landscape::before {
    content: "";
    
    position: absolute;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: 0;
    top: 0;
    filter: grayscale(80%);
    transition: transform 0.3s, filter 0.3s;
}

.indoor-plant::before {
    background-image: url(https://scontent.fblr3-2.fna.fbcdn.net/v/t1.6435-9/98052103_112828510431152_7106453897278914560_n.jpg?stp=dst-jpg_p843x403&_nc_cat=107&ccb=1-7&_nc_sid=730e14&_nc_ohc=pluCL5XgiMgAX8K593z&_nc_ht=scontent.fblr3-2.fna&oh=00_AfB_Q8lFxrKlNCdRtTQ4GghzXrN-oh6e0oj8--FGIypM3A&oe=6432DCF8), url("Lucky-Shrub-logos/Asset 3@3x.png");
}

.box .outdoor-plant::before {
    background-image: url(https://scontent.fblr3-2.fna.fbcdn.net/v/t1.6435-9/97455441_110402177340452_6100820028276342784_n.jpg?stp=c0.25.525.274a_dst-jpg_p235x350&_nc_cat=103&ccb=1-7&_nc_sid=e3f864&_nc_ohc=JJnzH6wdzxMAX8OXRyB&_nc_ht=scontent.fblr3-2.fna&oh=00_AfBzthLgLejyQdCW41yZdlTLgkb6WAE1VY4cmBsLmpfddw&oe=6432D619),  url("Lucky-Shrub-logos/Asset 3@3x.png");
}

.box .landscape::before {
    background-image: url(https://images.unsplash.com/photo-1534614310503-71f6d476047d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80), url("Lucky-Shrub-logos/Asset 3@3x.png");
}

.box:hover .indoor-plant::before, .box:hover .outdoor-plant::before, .box:hover .landscape::before {
    transform: scale(1.2);
    filter: grayscale(0);
    z-index: -2;
}

.box:hover h3, #first-section > article * {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1.2rem;

}

footer {
    display: grid;
    grid-template-columns: 60% 40%;
    margin: 2.5rem 2%;
}

footer img {
    display: block;
    width: 2rem;
}

footer div:nth-child(2) {
    text-align: end;
}


@media (width < 1024px) {
    
    section {
      flex-direction: column;  
    }

    header > img {
        width: 20%;
    }

}

/*About page*/

p {
    color: #4d4d4d;
}

p > span {
    color: #26877f;
}