*{
    margin: 0;
    padding: 0;
    font-family: 'Kaushan Script', cursive;
font-family: 'Poppins', sans-serif;
}
.h1{
    color: var(--dark);
}
:root{
    --dark:#98d0de;
    --white:#fff;
    --light:#88d7d2;


}

#banner{
    background-image:linear-gradient(rgba(0,0,0,0.2), #98d0de),url(/images/360_F_59874477_8Znck93Em3CMIxwNqsTFImfNI9Xx65p4.jpg);
    background-size: cover;
     background-position: center;
     height: 100vh;
 }


   
 .banner-text{
    text-align: center;
    color: #fff;
    padding-top: 180px;
}
.banner-text h1{
    font-size: 130px;
    font-family: 'Kaushan Script', cursive;

}
.banner-text p{
    font-size: 20px;
    font-style: italic;
}

.banner-btn{

    margin:70px auto 0
}
.banner-btn a{
    width: 150px;
    text-decoration: none;
    display: inline-block;
    margin: 0 10px;
    padding: 12px;
    color: #fff;
    border: .5px solid #fff;
    position: relative;
    z-index: 1;
    transition: color 0.5s;
    border-radius: 30px;
}

.banner-btn a span{
width: 0%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: var(--dark);
border-radius: 30px;
z-index: -1;
transition: 0.5s;
}

.banner-btn a:hover span{
width: 100%;

}
.banner-btn a:hover {
color: black;
}

#sidenav{
    width: 250px;
    height: 100vh;
    position: fixed;
    right: -250px;
    top: 0;
    background: linear-gradient(to bottom, #98d0de, white);
    z-index: 2;
    transition: 0.5s;

}
nav ul li{
    list-style: none;
    margin: 50px 20px;
}
nav ul li a{
    text-decoration: none;
    color: #fff;
}
#menubtn{
    width: 50px;
    height: 50px;
    background: var(--dark);
    text-align: center;
    position: fixed;
    right: 30px;
    top: 20px;
    border-radius: 3px;
    z-index: 3;
    cursor: pointer;
}
#menubtn img{
    width: 20px;
    margin-top: 15px;
}
@media screen and (max-width: 770px) {
    .banner-text h1{
        font-size: 44px;
    }
    .banner-btn a{
        display: block;
        margin: 20px auto ;
    }
}


/*underline*/
.h1 {
    text-decoration: none;
    position: relative;
}

.h1::after {
    content: '';
    display: block;
    width: 17%;
    height: 4px;
    background-color: var(--dark); /* Change the color as desired */
    position: absolute;
    bottom: -2px;
    left: 43%; /* Adjust based on your desired center alignment */
}

/* features */
#features{
    width: 100%;
    padding: 70px 0;
}
.title-text {
    text-align: center;
    padding-bottom: 70px;

}
.title-text p{
    margin: auto;
    font-size: 20px;
    color: var(--dark);
    font-weight: bold;
    position: relative ;
    z-index: 1;
    display: inline-block;
}
.title-text h1{
    font-size: 50px;
}

/* all of this designed tghe leafy thing on top of features
 */.title-text p::after{
    content: '' ;
    width: 50px;
    height: 35px;
    background: linear-gradient(var(--dark));
    position: absolute;
    top: -20px;
    left: 0;
    z-index: -1;
    transform: rotate(10deg); 
    border-top-left-radius: 35px;
    border-bottom-right-radius: 35px;
}
.featurebox{
    width: 80%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
}
.featuress{
    flex-basis: 50%;
}
.featuresimg{
    flex-basis: 50%;
    margin: auto;

}
.featuresimg img{
    width: 70%;
    border-radius: 10px;
}
.featuress h1{
    text-align: left;
    margin-bottom:10px;
    font-weight: 100;
    color: var(--dark);
}
.featuresdesc{
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
.featureicon .fa{
    width: 50px;
    height: 50px;
    font-size: 30px;
    line-height: 50px;
    border: 1px solid;
    border-radius: 8px;
    color: var(--dark);

}


.featuretext p{
    padding: 0 20px;
    text-align: initial;
}
@media screen and (max-width: 770px) {
.title-text h1{
    font-size: 35px;
}
.featuress{
    flex-basis: 100%;
}
.featuresimg{
    flex-basis: 100%;
}
.featuresimg img{
    width: 100%;
}
}



#products{
    width: 100%;
    padding: 70px 0;
    
}
/* products */
.product-container {
    display: flex;
  flex-direction: row;
 justify-content: center;
  flex-wrap: wrap;
  gap: 2.6rem;
}

.product {
    width: 300px;
height: 50%;
    
    text-align: center;
}

.product-image {
    width: 100%;
    height: 200px; /* Fixed height for product image */
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.product-image img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Maintain aspect ratio and cover entire container */
}

.product-info {
    padding: 15px;
}

.price {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.order-btn {
    display: block;
    width: 80%;
    margin: 15px auto;
    padding: 10px 20px;
    border: none;
    background-color: var(--dark);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.order-btn:hover {
    background-color: var(--light);
}
.price{
    font-size: 0.8rem;
    margin-top: 5px;
}
.products a{
    text-decoration: none;
    color: black;
}




#testimonials{
    width:100%;
    padding: 70px 0;
    }
    .testimonial-row{
        width: 80%;
        margin: auto;
        display: flex; /* seperates the text into 3 colunms */
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
    
    }
            
     
    .testimonial-col{
        flex-basis: 28%; /* theis flex basisis alitlle unecesary to me but wht it does here is that it basically completes the job of the above css
          cancel every thing below leaving the flex basis and see what it does  */
        padding: 10px;
        margin-bottom: 30px;
        border-radius: 5px;
        box-shadow: 0 10px 20px 3px #00968814;
        cursor: pointer; /* cursor pointer changes the arrow cursor to the hand cursor */
        transition:transform .6s;
    } 
    
    .testimonial-col p{
        font-size: 14px;
    
    }
    .user{
        display: flex;
        align-items: center;
        margin: 20px 0;
    }
    
    .user img{
        width: 40px;
        margin-right: 20px;
        border-radius: 30px; /* ok this cool so as we redius the size of the image we
         need very saml birder radius 
        to make it circle compare to wahen we have a big image pretty cool  */
    
    }
    .user-info .fa{
        margin-left:10px;
        color: #27c0ff;
        font-size: 20px;
    }
    .user-info small{
        color: #009688;
    }
    
    .testimonial-col:hover{
        transform:translateY(-7px)
    }
    @media screen and (max-width: 770px) {
    .testimonial-col{
        flex-basis: 100%;
    }
    
    }




    /* footer */
#footer{
padding: 100px 0 20px;
background: linear-gradient(to bottom, #98d0de, white);
position: relative;
}

.footer-row{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.footer-left, .footer-right{
    flex-basis:45%;
    padding: 10px;
    margin-bottom: 20px;


}

.footer-right{
    text-align: center;
}
.footer-row h1{
    margin: 10px 0;

}

.footer-row p{
    line-height: 35px;
}

.footer-left .fa,.footer-right .fa{
    font-size: 20px;
    color: var(--dark);
    margin: 10px;
}
.footer-img{
    max-width: 370px;
    opacity: 0.1;
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%,-50%);
}
.social-links{
    text-align: center;
}
.social-links .fa{
    height: 40px;
    width: 40px;
    font-size: 20px;
    line-height: 40px;
    border: 1px solid var(--dark);
    margin: 40px 5px 0;
    color: var(--dark);
    cursor: pointer;
    transition: .5s;
}
.social-links .fa:hover{
background: #009688;
color: #fff;
transform: translateX(-7px);
}
.social-links p{
    font-size: 12px;
    margin-top: 20px;
}

@media screen and (max-width: 770px) {
    .footer-left,.footer-right{
        flex-basis: 100%;
        font-size: 14px;
    }
    .footer-img{
        top: 25%;
    }
}