Hi everybody! Using HTML, CSS, and JavaScript, you will learn

how to create a responsive website sports website design using HTML CSS, And JAVASCRIPT in this Blog.

Using standard JavaScript, users can use the navigation buttons on the web design moving car animation website design to navigate through each slide. The clip-path property is utilized for the transition on the slide. I hope that when you design a website with online moving car animation , this video will be helpful.

You can download all of the source files and codes from this location. The code from the text editors must be copied and pasted. Try it out first by watching the video tutorial. It will assist you in comprehending everything. After that, if your code isn’t working right, look at the source codes provided and compare them to your own. It will assist you in comprehending everything, including your errors.

Index.html

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complete resposive sport design dailywebdesign</title>

    
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

    
    <link rel="stylesheet" href="style.css">
</head>
<body>



<header class="header">
    <a href="#" class="logo"> <i class="fa-solid fa-baseball-bat-ball"></i> sporteyz </a>

    <nav class="navbar">
        <a href="#">Home</a>
        <a href="#">Shop</a>
        <a href="#">About</a>
        <a href="#">Review</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
    </nav>

    <div class="icons">
        <div id="menu-btn" class="fas fa-bars"></div>
        <div id="search-btn" class="fas fa-search"></div>
    </div>

</header>



<section class="home" id="home">
    <div class="slides-container">

        <div class="slide active">
            <div class="content">
                <span>Never Stop</span>
                <h3>upto 50% off</h3>
                <a href="#" class="btn">Shop Now</a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/cricket_img0.png">
            </div>
        </div>


        <div class="slide">
            <div class="content">
                <span>Never Stop</span>
                <h3>upto 50% off</h3>
                <a href="#" class="btn">Shop Now</a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/cricket_img2.png">
            </div>
        </div>

    </div>
    <div id="next-slide" class="fas fa-angle-right" onclick="next()"></div>
    <div id="prev-slide" class="fas fa-angle-left" onclick="next()"></div>
</section>


<section class="banner-container">

<div class="banner">
    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/ne1.jpeg" alt="">
    <div class="content">
    <span>limited sales</span>
    <h3>upto 50% off</h3>
    <a href="#" class="btn">Shop Now</a>
</div>
</div>

<div class="banner">
    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/ne2.jpeg" alt="">
    <div class="content">
    <span>limited sales</span>
    <h3>upto 50% off</h3>
    <a href="#" class="btn">Shop Now</a>
</div>
</div>

<div class="banner">
    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/ne3.jpeg" alt="">
    <div class="content">
    <span>limited sales</span>
    <h3>upto 50% off</h3>
    <a href="#" class="btn">Shop Now</a>
</div>
</div>

</section>



<div class="heading">
    <h1>Our Shop</h1>
</div>

<section class="category">
    <br>
    <h1 class="title"> our <span>category</span> <a href="#"> view all >> </a> </h1>

    <div class="box-container">

        <a href="#" class="box">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/bx1.jpeg" alt="">
            <h3>night stadium</h3>
        </a>

        <a href="#" class="box">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/home-bg.jpg" alt="">
            <h3>day stadium</h3>
        </a>

        <a href="#" class="box">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/home-bg2.jpg" alt="">
            <h3>day stadium</h3>
        </a>

        <a href="#" class="box">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic7.jpeg" alt="">
            <h3>day stadium</h3>
        </a>

        <a href="#" class="box">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/upmatch.jpeg" alt="">
            <h3>evening stadium</h3>
        </a>

    </div>
</section>





<section class="products">
    <h1 class="title"> our <span>product</span> <a href="#">view all >></a></h1>
    <div class="box-container">

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/prod1.png" alt="">
            </div>
            <div class="content">
                <h3>Bag</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half"></i>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/prod2.png" alt="">
            </div>
            <div class="content">
                <h3>Cap</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half"></i>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/prod3.png" alt="">
            </div>
            <div class="content">
                <h3>Shose</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half"></i>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/prod4.png" alt="">
            </div>
            <div class="content">
                <h3>T-shirt</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half"></i>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/prod5.png" alt="">
            </div>
            <div class="content">
                <h3>Foot Ball</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half"></i>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/prod6.png" alt="">
            </div>
            <div class="content">
                <h3>Bat</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half"></i>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/prod7.png" alt="">
            </div>
            <div class="content">
                <h3>Ball</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half"></i>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/prod8.png" alt="">
            </div>
            <div class="content">
                <h3>Base Ball</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half"></i>
                </div>
            </div>
        </div>

    </div>
</section>




<div class="heading">
    <h1>About Us</h1>
</div>

<section class="about">
    <div class="img">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/foter_bg.jpeg" alt="">
    </div>

    <div class="content">
        <span>Welcome to our Products</span>
        <h3>sporteyz</h3>
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore farhan aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
            in voluptate </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
             farhan aliqua. Ut enim ad minim veniam, quis</p>
             <a href="#" class="btn">read more</a>
    </div>
</section>





<div class="heading">
    <h1>Client's review</h1>
</div>

<section class="info-container">

    <div class="info">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/icon-1.png" alt="">
        <div class="content">
            <h3>fast delivery</h3>
            <span>within 30 minutes</span>
        </div>
    </div>

    <div class="info">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/icon-2.png" alt="">
        <div class="content">
            <h3>24/7 available</h3>
            <span>within 30 minutes</span>
        </div>
    </div>

    <div class="info">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/icon-3.png" alt="">
        <div class="content">
            <h3>easy payments</h3>
            <span>within 30 minutes</span>
        </div>
    </div>
</section>




<section class="review">

    <div class="box">
        <div class="user">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-1.png" alt="">
            <div class="info">
                <h3>edward bey</h3>
                <span>happy client</span>
            </div>
        </div>
        <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
    </div>

    <div class="box">
        <div class="user">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-2.png" alt="">
            <div class="info">
                <h3>jenna bey</h3>
                <span>happy client</span>
            </div>
        </div>
        <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
    </div>

    <div class="box">
        <div class="user">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-3.png" alt="">
            <div class="info">
                <h3>jhon bey</h3>
                <span>happy client</span>
            </div>
        </div>
        <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
    </div>

    <div class="box">
        <div class="user">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-4.png" alt="">
            <div class="info">
                <h3>linda bey</h3>
                <span>happy client</span>
            </div>
        </div>
        <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
    </div>

    <div class="box">
        <div class="user">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-5.png" alt="">
            <div class="info">
                <h3>kennay bey</h3>
                <span>happy client</span>
            </div>
        </div>
        <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
    </div>

    <div class="box">
        <div class="user">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-6.png" alt="">
            <div class="info">
                <h3>lalisa bey</h3>
                <span>happy client</span>
            </div>
        </div>
        <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
    </div>
</section>




<div class="heading">
    <h1>our blog</h1>
</div>

<section class="blog">
    <h1 class="title"> our <span>blog</span><a href="#">view all>></a></h1>

    <div class="box-container">

        <div class="box">
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/blog1.jpeg" alt="">
            </div>
            <div class="content">
                <div class="icons">
                    <a href="#"> <i class="fsa fa-clender"></i> 12 jan, 2023 </a>
                    <a href="#"> <i class="fsa fa-user"></i> by administrator</a>
                </div>
                <h3>blog title page</h3>
                <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
                <a  href="#" class="btn">read more...</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/blog2.jpeg" alt="">
            </div>
            <div class="content">
                <div class="icons">
                    <a href="#"> <i class="fsa fa-clender"></i> 12 jan, 2023 </a>
                    <a href="#"> <i class="fsa fa-user"></i> by administrator</a>
                </div>
                <h3>blog title page</h3>
                <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
                <a  href="#" class="btn">read more...</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/blog3.jpeg" alt="">
            </div>
            <div class="content">
                <div class="icons">
                    <a href="#"> <i class="fsa fa-clender"></i> 12 jan, 2023 </a>
                    <a href="#"> <i class="fsa fa-user"></i> by administrator</a>
                </div>
                <h3>blog title page</h3>
                <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
                <a  href="#" class="btn">read more...</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/blog4.jpeg" alt="">
            </div>
            <div class="content">
                <div class="icons">
                    <a href="#"> <i class="fsa fa-clender"></i> 12 jan, 2023 </a>
                    <a href="#"> <i class="fsa fa-user"></i> by administrator</a>
                </div>
                <h3>blog title page</h3>
                <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
                <a  href="#" class="btn">read more...</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/blog5.jpeg" alt="">
            </div>
            <div class="content">
                <div class="icons">
                    <a href="#"> <i class="fsa fa-clender"></i> 12 jan, 2023 </a>
                    <a href="#"> <i class="fsa fa-user"></i> by administrator</a>
                </div>
                <h3>blog title page</h3>
                <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
                <a  href="#" class="btn">read more...</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/blog6.jpeg" alt="">
            </div>
            <div class="content">
                <div class="icons">
                    <a href="#"> <i class="fsa fa-clender"></i> 12 jan, 2023 </a>
                    <a href="#"> <i class="fsa fa-user"></i> by administrator</a>
                </div>
                <h3>blog title page</h3>
                <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
                <a  href="#" class="btn">read more...</a>
            </div>
        </div>




    </div>
</section>




<div class="heading">
    <h1>Contact us</h1>
</div>

<section class="contact">
    <div class="icons-container">

        <div class="icons">
            <i class="fas fa-phone"></i>
            <h3>our number</h3>
            <p>+111-222-3333</p>
            <p>+456-786-7890</p>
        </div>

        <div class="icons">
            <i class="fas fa-envelope"></i>
            <h3>our email</h3>
            <p>shaikhfarhan@gmail.com</p>
            <p>xyzemail@gmail.com</p>
        </div>

        <div class="icons">
            <i class="fas fa-map-marker-alt"></i>
            <h3>our address</h3>
            <p>mumbai, india - 401203</p>
        </div>

    </div>
    </section>



    <section class="footer">
        <div class="box-container">
            <div class="box">
                <h3>quick links</h3>
                <a href="#"><i class="fas fa-arrow-right"></i>Home</a>
                <a href="#"><i class="fas fa-arrow-right"></i>Shop</a>
                <a href="#"><i class="fas fa-arrow-right"></i>About</a>
                <a href="#"><i class="fas fa-arrow-right"></i>Review</a>
                <a href="#"><i class="fas fa-arrow-right"></i>Blog</a>
                <a href="#"><i class="fas fa-arrow-right"></i>Contact</a>
            </div>

            <div class="box">
                <h3>extra links</h3>
                <a href="#"><i class="fas fa-arrow-right"></i>my order</a>
                <a href="#"><i class="fas fa-arrow-right"></i>my favorite</a>
                <a href="#"><i class="fas fa-arrow-right"></i>my wishlist</a>
                <a href="#"><i class="fas fa-arrow-right"></i>my account</a>
                <a href="#"><i class="fas fa-arrow-right"></i>terms or use</a>
            </div>

            <div class="box">
                <h3>follow us</h3>
                <a href="#"> <i class="fab fa-facebook-f"></i> facebook </a>
                <a href="#"> <i class="fab fa-twitter"></i> twitter </a>
                <a href="#"> <i class="fab fa-instagram"></i> instagram </a>
                <a href="#"> <i class="fab fa-linkedin"></i> linkedin </a>
                <a href="#"> <i class="fab fa-pinterest"></i> pinterest </a>
            </div>

            <div class="box">
                <h3>newsletter</h3>
                <p>subscribe for lastest update</p>
                <form action="">
                    <input type="email" placeholder="enter your email address">
                    <input type="submit" value="subscribe" class="btn">
                </form>
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/payment.png" class="payments" alt="">
            </div>
        </div>
    </section>

<div class="credit">created by dailywebdesign || all right reserved</div>
















     <script type="litespeed/javascript" data-src="main.js"></script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://dailywebdesigns.com/wp-content/litespeed/js/1b3f96ee2c4d7c42a4b314914800caf2.js?ver=5a62f"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>

style.css

				
					@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

:root{
    --yellow:#FFEF2B;
}

*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-transform: capitalize;
    text-decoration: none;
    transition: .2s linear;
}
body{
    background:#FFEF2B;
}

.btn{
    margin-top: 1rem;
    display: inline-block;
    padding: .8rem 3rem;
    background: var(--yellow);
    color: #01411C;
    font-size: 1.7rem;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}
.btn:hover{
    background: #01411C;
    color: #FFEF2B;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

section{
    padding: 3rem 9%;
}

.heading{
    background: url(img/foter_bg.jpeg) no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 12rem;
    padding-bottom: 8rem;
    position: relative;
    text-align: center;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}

.heading h1{
    color:#FFEF2B;
    font-size: 5rem;
   font-weight: bold;
   
}

.title{
    display: flex;
    align-items: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    padding: 1.2rem 0;

    border-bottom:0.1rem solid rgba(0,0,0,0.7);
}

.title span{
    color: #01411C;
    padding-left:  .7rem;
}

.title a{
    margin-left: auto;
    color: #01411C;
    font-size: 1.5rem;
}

.header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 9%;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.header .logo{
    font-size: 2.5rem;
    font-weight: bolder;
    color: #01411C;
}

.header .logo i{
    color: #01411C;
    padding-right: .5rem;
}

.header .navbar a{
    font-size: 1.7rem;
    color: #01411C;
    margin: 0 1rem;
    font-weight: bold;
}

.header .navbar a:hover{
    color: #01411C;
}

.header .icons div{
    font-size: 2.5rem;
    margin-left: 1.7rem;
    cursor: pointer;
    color: #01411C;
}

.header .icons div:hover{
    color: #01411C;
}

#menu-btn{
    display: none;
}

@keyframes fadeLeft{
    0% {
        opacity: 0;
        transform: translateX(-5rem);
    }
}

@keyframes fadeup {
    0%{
        opacity: 0;
        transform:  scale(0.5);
    }
}

.home{
    padding-top: 14rem;
    background: url(img/home-bg2.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

.home .slides-container .slide{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    display: none;
}
.home .slides-container .slide.active{
    display: flex;
}

.home .slides-container .slide .content{
    flex: 1 1 40rem;
    animation: fadeLeft .4s linear .4s backwards;
}

.home .slides-container .slide .content span{
    color: #FFEF2B;
    font-size: 3rem;
    font-weight: bolder;
}

.home .slides-container .slide .content h3{
    font-size: 6rem;
    color: #FFEF2B;
    padding:  .5rem 0;
}

.home .slides-container .slide .img{
    flex: 1 1 40rem;
    margin: 3rem 0;
}

.home .slides-container .slide .img img{
    width: 100%;
    animation: fadeup .4s linear;
}

.home #next-slide,
.home #prev-slide{
    position: absolute;
    top: 50%;
    transform: translateY(-50);
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    text-align: center;
    background: #FFEF2B;
    font-size: 2rem;
    color: #01411C;
    cursor: pointer;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}

.home #next-slide:hover,
.home #prev-slide:hover{
    background: #01411C;
    color: #FFEF2B;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

.home #prev-slide{
    left: 2rem;
}

.home #next-slide{
    right: 2rem;
}

.banner-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    gap: 1.5rem;
}

.banner-container .banner{
    position: relative;
    height: 25rem;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}

.banner-container .banner img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.banner-container .banner .content{
    position: absolute;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
}

.banner-container .banner .content span{
    color: #FFEF2B;
    font-size: 1.5rem;
}

.banner-container .banner .content h3{
    font-size: 2rem;
    padding-top: .5rem;
    color: #FFEF2B;
}

.banner-container .banner .content .btn{
    padding: .8rem 2.5rem;
}

.banner-container .banner:hover img{
    transform: scale(1.2);
}


.category .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
    padding: 4rem 0;
}

.category .box-container .box{
    text-align: center;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}

.category .box-container .box img{
    width: 100%;
    height: 100%;
    
}

.category .box-container .box:hover img{
    transform: scale(1.2);
}

.category .box-container .box h3{
    font-size: 2rem;
    margin: 1rem 0;
    color: #01411C;
}

.category .box-container .box:hover h3{
     color: #01411C;
}

.products .box-container {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1.5rem;
  }

  

  .products .box-container .box {
    position: relative;
    background: #FFEF2B;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
  }



.products .box-container .box:hover  .icons{
    top: 0;
}

  .products .box-container .box .icons {
   position: absolute;
    top: -105%;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #01411C;
    gap: 1rem;
  }

  

  .products .box-container .box .icons a {
    font-size: 2rem;
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    background: #FFEF2B;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    color: #01411C;
  }

  

.products .box-container .box .icons a:hover{
    background: #01411C;
    color:#FFEF2B;
}  

  

  .products .box-container .box .img {
    overflow: hidden;
  }

  

  .products .box-container .box .img img {
    height:100%;
    width:100%;
    object-fit: cover;
  }

  

  .products .box-container .box .content {
    padding: 1.5rem;
  }

  

  .products .box-container .box .content h3 {
    font-size: 2rem;
    color: #01411C;
  }

  

  .products .box-container .box .content .price {
    font-size: 2rem;
    color: #01411C;
    padding: 1rem 0;
  }

  

  .products .box-container .box .content .stars i {
    font-size: 1.7rem;
    color: #01411C;
  }


.about{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.about img{
    flex: 1 1 40rem;
}

.about .img img{
    width: 545.59px;
    height: 364.39px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}

.about .content{
    flex: 1 1 40rem;
}

.about .content span{
    color: #01411C;
    font-size: 2.5rem;
    font-weight: bold;
}

.about .content h3{
    color: #01411C;
    font-size: 3rem;
    padding-top: .5rem;
    font-weight: bold;
}

.about .content p{
    color: #01411C;
    font-size: 1.4rem;
    line-height: 2;
    padding: 1rem 0;
    font-weight: bold;
}


.info-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
    gap: 1.5rem;
}

.info-container .info{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
    background: #FFEF2B;
    
}

.info-container .info:hover{
    background: #01411C;
    
}

.info-container .info img{
    height: 7rem;
}

.info-container .info .content h3{
    font-size: 2rem;
    color: #01411C;
    padding-bottom: .5rem;
}
.info-container .info .content:hover h3{
    color: #FFEF2B;
}
.info-container .info .content span{
    font-size: 1.5rem;
    color: #01411C;
    font-weight: bold;
}

.info-container .info .content span:hover{
    color: #FFEF2B;
    font-weight: bold;
}


.review{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 1.5rem;
}

.review .box{
    padding: 2rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border: 0.1rem solid rgba(0,0,0,0.7);
}

.review .box .user{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.review .box .user img{
    height: 7rem;
    width: 7rem;
    border-radius: 50%;
}

.review .box .user h3{
    font-size: 2.2rem;
    color: #01411C;
}

.review .box .user span{
    font-size: 1.4rem;
    color: #01411C;
}

.review .box p{
    font-size: 1.4rem;
    color: #01411C;
    line-height: 2;
}


.blog .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 1.5rem;
}

.blog .box-container .box{
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border: 0.1rem solid rgba(0,0,0,0.7);
}


.blog .box-container .box .img:hover img{
    transform: scale(1.2);
}

.blog .box-container .box .img{
    height: 25rem;
    width: 100%;
    overflow: hidden;
}

.blog .box-container .box .img img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}


.blog .box-container .box .content{
    padding: 2rem 1.5rem;
}

.blog .box-container .box .content .icons{
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
    padding-bottom: 1.7rem;
    margin-bottom: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog .box-container .box .content .icons a{
    font-size: 1.4rem;
    color: #01411C;
}

.blog .box-container .box .content .icons a:hover{
    color: #FFEF2B;
}

.blog .box-container .box .content .icons a i{
    color: #01411C;
    padding-right: .5rem;
}

.blog .box-container .box .content h3{
    font-size: 2.2rem;
    color: #01411C;
}

.blog .box-container .box .content p{
    font-size: 1.4rem;
    color: #01411C;
    line-height: 2;
    padding: 1rem 0;
}


.contact .icons-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(29rem, 1fr));
    gap: 1.5rem;
}



.contact .icons-container .icons{
    text-align: center;
    border: 0.1rem solid rgba(0,0,0,0.7);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    padding:2rem;
}



.contact .icons-container .icons i{
    height:6rem;
    width:6rem;
    line-height: 6rem;
    font-size: 2.5rem;
    background: var(--yellow);
    color:#01411C;
    border-radius: 50%;
}



.contact .icons-container .icons h3{
    color:#01411C;
    font-size: 2rem;
    padding:1rem 0;
}



.contact .icons-container .icons p{
    color:#01411C;
    font-size: 1.5rem;
    line-height: 2;
}


.footer{
    background: var(--yellow);
}

.footer .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1.5rem;
}

.footer .box-container .box h3{
    font-size: 2.2rem;
    color: #01411C;
    padding: 1rem 0;
}

.footer .box-container .box p{
    font-size: 1.5rem;
    color: #01411C;
    padding-bottom: .5rem;
}

.footer .box-container .box a{
    font-size: 1.4rem;
    color: #01411C;
    padding: 1rem 0;
    display: block;
}

.footer .box-container .box a:hover{
    color: #01411C;
}

.footer .box-container .box a:hover i{
    padding-right: 2rem;
}

.footer .box-container .box a i{
    padding-right: .5rem;
    color: #01411C;
}

.footer .box-container .box form input[type="email"]{
    width: 100%;
    padding: 1rem 1.2rem;
    font-size: 1.6rem;
    color: #01411C;
    margin: 1rem 0;
    text-transform: none;
}

.footer .box-container .box .payments{
    width: 100%;
    margin-top: 2rem;
}

.credit{
    text-align: center;
    background: var(--yellow);
    color: #01411C;
    font-size: 2rem;
}























/* media queries */
@media (max-width: 991px){
    html{
        font-size: 55%;
    }
    .header{
        padding: 2rem;
    }
    section{
        padding: 3rem 2rem;
    }
    .home #next-slide,
    .home #prev-slide{
        transform: translateY(0);
        top: 88%;
    }
    .home #prev-slide{
        left:auto;
        right: 8rem;
    }
}

@media (max-width: 786px){
    #menu-btn{
        display: inline-block;
    }
    .header .navbar{
        position: absolute;
        top: 90%;
        left: 0;
        right: 0;
        background: #01411C;
        border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
        border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    .header .navbar.active{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }

    .header .navbar a{
        margin: 1.5rem;
        padding: 1.5rem;
        background: var(--yellow);
        font-size: 2rem;
        display: block;
        border-radius: .5rem;
    }
}

@media (max-width:450px){
    html{
        font-size: 50%;
    }
    .home .slides-container .slide h3{
        font-size: 4rem;
    }
    .products .box-container .box .img{
        width: 100%;
    }

    .category .box-container .box img{
        width: 100%;
    }
}

main.js

				
					let navbar = document.querySelector('.navbar');



document.querySelector('#menu-btn').onclick = () => {

    navbar.classList.toggle('active');

}


window.onscroll = () => {

    navbar.classList.remove('active');

}


let slides = document.querySelectorAll('.home .slides-container .slide');

let index = 0;


function next(){

    slides[index].classList.remove('active');

    index = (index + 1) % slides.length;

    slides[index].classList.add('active');

}


function prev(){

    slides[index].classList.remove('active');

    index = (index - 1 + slides.length) % slides.length;

    slides[index].classList.add('active');

}