/* RESET START */
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
}
ul {
    list-style: none;
}
button{
    background-color: transparent;
    border: none;
}
a {
    text-decoration: none;
}

/* RESET END */

@font-face {
    font-family: "chillax-medium";
    src: url(../fonts/Chillax-Variable.ttf);
    font-weight: 500;
}
@font-face {
    font-family: "steppe-regular";
    src: url(../fonts/Chillax-Variable.ttf);
    font-weight: 400;
}


:root {
    --main-color:  #004F44;
    --main-color-light: #F3FFFC;
    --secondary-color: #EFF7F5;
    --white-color: #fff;
    --ball-black: #39362E;
    --ball-pink: #F3A195;
    --ball-late: #EFEAE6;
    --ball-brown: #C38364;
}



.container {
    max-width: 1157px;
    width: 90%;
    margin: 0 auto;
}

.relative {
    position: relative;
}

.flex {
    display: flex;
}
.justify-between {
    justify-content: space-between;
}
.align-center {
    align-items: center;
}
.border {
    border: 1px solid var(--main-color);
}
.positioned-button {
    position: absolute;
    top: 12px;
    left: 15px;
    background-color: var(--main-color);
    color: var(--white-color);
    padding: 7px 15px;
    font-size: 12px;
    font-family: "steppe-regular";
    text-transform: capitalize;
}

.nav-link {
    color: var(--white-color);
    text-transform: capitalize;
    font-family: "steppe-regular";
    
}
.mb-3 {
    margin-bottom: 3px;
}

header {
     background-color: var(--main-color);
    & .header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;

        & ul {
            gap: 40px;
            display: flex;
            align-items: center;
        }
        & .cta-wrapper {
            display: flex;
            gap: 20px;
        }
    }
    & .welcome-wrapper {
        display: flex;
        justify-content: space-between;

        & .content-wrapper {
            margin-top: 40px;
            color: var(--white-color);
            font-family: "chillax-medium";
            & h1 {
                font-size: 64px;
                line-height: 72px;
                letter-spacing: 1.5px;
                margin-bottom:32px;
            }
            & p {
                letter-spacing: .3px;
                line-height: 28px;
                margin-bottom:32px;
            }
            & button {
                padding: 20px 40px;
                color: var(--white-color);
                letter-spacing: .2px;
                &:first-child {
                    background-color: var(--secondary-color);
                    color: var(--main-color);
                }
            }
        }
        & .images-wrapper {
            display: flex;
            gap: 3px;
            margin-bottom:94px;
            margin-left: 134px;
            & img {
                display: block;
            }
            & .text-content {
                position: absolute;
                left: 50%;
                bottom: 0px;
                transform: translateX(-50%);
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                width: 100%;
                height: 318px;
                padding-inline: 25px;
                font-family: "steppe-regular";
                background: #2E403D;
                background: linear-gradient(180deg, rgba(46, 64, 61, 0) 24%, rgba(35, 74, 69, 1) 93%);
               
                & h2 {
                    font-size: 28px;
                    color: var(--white-color);
                    margin-bottom: 6px;
                }
                & p {
                    color: var(--white-color);
                    font-size: 14px;
                    margin-bottom: 18px;
                }
                & .read-more {
                    background-color: var(--white-color);
                    color: var(--main-color);
                    padding: 17px 114px;
                    font-size: 12px;
                    text-transform: uppercase;
                    letter-spacing: 3px;
                    margin-bottom: 25px;
                }
            }
        }
    }
}


/* general classes  start*/
.g-5 {
    gap: 5px;
}
.g-15 {
    gap: 15px;
}
.g-24 {
    gap: 24px;
}
.g-28 {
    gap: 28px;
}
.mt-20 {
    margin-top: 20px;
}
.mb-28 {
    margin-bottom: 28px;
}
.ml-28{
    margin-left: 28px;
}
/* general classes  end*/

.title-view-all-wrapper {
    margin-bottom: 48px;
    color: var(--main-color);
    letter-spacing: .5px;
    & h2 {
        font-size: 40px;
        text-transform: capitalize;
    }
    & a {
        font-size: 24px;
        color: inherit;
    }
}

.featured {
    padding-block: 70px;
    & .featured-cards-wrapper {
    max-width: 280px;
    & .image-wrapper {
        display: block;
    }
    & .content-wrapper {
        font-family: "steppe-regular";

        & h3 {
            font-size: 20px;
            color: var(--main-color);
            letter-spacing: .3px;
        }
        & .price {
            font-size: 20px;
            color: var(--main-color);
        }
        & .color-picker {
            & span {
                display: inline-block;
                color: #9EA9A7;
                margin-bottom: 8px;
            }
            & .ball {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                cursor: pointer;
            }
            & .black {
                background-color: var(--ball-black);
            }
            & .pink {
                background-color: var(--ball-pink);
            }
            & .late {
                background-color: var(--ball-late);
            }
            & .brown {
                background-color: var(--ball-brown);
            }
        }
        & button {
            font-family: "steppe-regular";
            color: var(--main-color);
            padding: 8px 24px;
            transition-duration: .3s;
            text-transform: capitalize;
            cursor: pointer;
            &:hover {
                background-color: var(--main-color);
                color: var(--white-color);

            }
        }
    }
}
}



/* search section start */

.search {
    background-color: var(--main-color-light);
    padding-block: 85px;

    & .filter {
        cursor: pointer;
        padding: 8px;

    }
    & input[type="search"] {
        flex-grow: 1;
        letter-spacing: .3px;
        padding: 22px 28px;

    }
    & input::placeholder {
        color: var(--main-color);
    }
    & .search-submmit {
        background-color: var(--main-color);
        cursor: pointer;
        padding: 16px;
    }

}


/* new arrivals section start */

.new-arrivals {
    padding-block: 96px;
    & .new-arrivals-wrapper {
        & .new-arrival-card:nth-child(1) {
            background-image: url(../img/blue-lily.jpg);

        }
        & .new-arrival-card:nth-child(2) {
            background-image: url(../img/white-iris.jpg);

        }
        & .new-arrival-card:nth-child(3) {
            background-image: url(../img/purple-flowers.jpg);

        }
        & .new-arrival-card:nth-child(4) {
            background-image: url(../img/red-flower.jpg);

        }

        & .new-arrival-card {
            display: grid;
            place-items: center;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 404px;
            width: 268px;
            font-family: "steppe-regular";
            letter-spacing: .3px;
            color: var(--white-color);
            cursor: pointer;
            &::before {
                content: '';
                background-color: rgba(1, 44, 38, .71);
                position: absolute;
                inset: 0;
                visibility: hidden;
                opacity: 0;
                transition: .3s;
            }
            & > div  {
                position: absolute;
                z-index: 1;
                visibility: hidden;
                opacity: 0;
                transition: .3s;
            }
            & h3 {
                font-size: 29px;
                text-transform: capitalize;
            }
            & a {
                text-transform: lowercase;
                color: inherit;
            }
            &:hover {
                &::before {
                    visibility: visible;
                    opacity: 1;
                }
                & > div {
                    visibility: visible;
                    opacity: 1;
                }
            }
        }
    }
}
 

/* Plant Stands Section */
.plant-stands {
    padding: 80px 0;
    background-color: #F3FFFC;

    & .plant-stands-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;

        & h2 {
            font-family: "steppe-regular";
            font-size: 36px;
            color: var(--main-color);
            margin: 0;
        }
    }

    & .plant-stands-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); 
        gap: 30px;

        & .stand-card {
            height: 473px;
            width: 371px;

            & a.more-link {
                
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100%; 
                width: 100%; 
                color:var(--main-color)
            }

            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}
/* penultimate section */
  .service {
    position: relative;
    margin-top: 100px;
    


.text-overlay {
    position: absolute;
    bottom: 20px;        
    left: 20px;        
     color: #9C6955;
    z-index: 2;}


.text-overlay h3 {
    font-size: 44px;
    margin: 0 0 10px 0;
}
.text-overlay h4{
   
    margin-bottom:64px;
}
.text-overlay .bottom{


    font-size: 17px;
    margin-bottom: 98px;
    
   
}  
.text-overlay .phone-number{
    display:flex;
    gap:13px;
}
 .text-overlay .email-address{
    display:flex;
    gap:13px;
 }
}

.map{
 & .container{
    margin-top:130px;
    margin-bottom:130px;
 }
    
   
    & .text{
        position:absolute;
        width:515px;
        height:231px;
        size:16px;
         top: 20px;      
        left: 20px;
        bottom:20px;
        line-height:26px;
        
        background-color: #fff;
         color:#666666;
        & h2 {
            font-size:24px;
            margin-bottom: 10px;
            color:black;
            font-family: "steppe-regular";
        }
        & a{ 
            text-decoration: underline;
            color:black;
        }
        & button{
            position:absolute;
            top:0px;
            left:314px;
            background-color: var(--main-color);
            width:201px;
            height:46px;
            color:var(--white-color);
        }
    }
}