<main>
        <section class="photoFirst">
            <!-- Sekcja pierwszego zestawu zdjęć -->
            <!-- Obrazy i tekst w tej sekcji -->
            <h2 style="display:none;">.</h2>
            <img id="photos1" src="img/mainPage4.webp" alt="Lorem ipsum 1" loading="lazy" width="300" height="300">
            <img id="photos2" src="img/mainPage5.webp" alt="Lorem ipsum 2" loading="lazy" width="300" height="300">
            <img id="photos3" src="img/mainPage6.webp" alt="Lorem ipsum 3" loading="lazy" width="300" height="300">
        </section>
        <input type="checkbox" id="toggleImages">
        <label for="toggleImages" id="showMoreButton" class="buttonFoto">LOAD MORE PHOTO</label>
        <div class="photoSecond">
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-regular.svg" alt="oksy1" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot1" width="140" height="140">
            </div>
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-deal-with-it.svg" alt="oksy2" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot2" width="140" height="140">
            </div>
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-hearts.svg" alt="oksy3" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot3" width="140" height="140">
            </div>
        </div>
        <section class="photoSecond">
            <h2 style="display:none;">.</h2>
            <img class="photosX" src="img/mainPage1.webp" alt="Lorem ipsum 4" loading="lazy" width="300" height="300">
            <img class="photosX" src="img/mainPage2.webp" alt="Lorem ipsum 5" loading="lazy" width="300" height="300">
            <img class="photosX" src="img/mainPage3.webp" alt="Lorem ipsum 6" loading="lazy" width="300" height="300">
        </section>
        <label for="toggleImages" id="showLessButton" class="buttonFoto">LOAD LESS PHOTO</label>
        <div class="product-grid">
            <div class="product-item" style="background-color: #eae9e7;">
                <div class="product-image">
                    <img src="img/gallery1.webp" alt="Gallery 1" loading="lazy" width="300" height="300">
                </div>
                <div class="product-content">
                    <h3>LOREM IPSUM</h3>
                    <a href="./gallery.html" class="details-button">VIEW DETAILS</a>
                </div>
            </div>
            <div id="drugie" class="product-item" style="background-color: #eae9e7">
                <div class="product-image">
                    <img src="img/gallery2.webp" alt="Gallery 2" loading="lazy" width="300" height="300">
                </div>
                <div class="product-content">
                    <h3>LOREM IPSUM</h3>
                    <a href="./gallery.html" class="details-button">VIEW DETAILS</a>
                </div>
            </div>
        </div>
        <section class="section">
            <h2 class="section__heading">Lorem ipsum</h2>
            <div class="about-us__textbox">
                <p class="about-us__text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
                    ac felis mi. Nulla urna risus, malesuada nec blandit at, dictum a
                    est. Integer pulvinar dui elit, vitae vehicula est tempor venenatis.
                    Proin pulvinar pulvinar enim, et vestibulum leo. Vivamus placerat,
                    magna non commodo suscipit, sapien lorem finibus dui, nec interdum
                    lectus ante dictum mi.
                </p>
                <label for="modalCheck" class="button">Lorem ipsum!</label>
                <input type="checkbox" id="modalCheck" style="display: none">
                <div class="modal">
                    <div class="modal-content">
                        <p>Tak dobrze trafiłeś! To lorem ipsum!</p>
                    </div>
                </div>
            </div>
            <div class="product-item4">
                <img src="img/item1.webp" alt="Item" loading="lazy" width="1200" height="700">
                <div class="info-box">
                    <h2>Lorem Ipsum</h2>
                    <p class="price2">$50.00 <span class="old-price">$200.00</span></p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, et do
                        eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </p>
                    <a href="./services.html" class="details-button2">VIEW DETAILS</a>
                </div>
            </div>
            <div class="slider">
                <div class="slides">
                    <div id="slide-1" class="slide">
                        <img src="img/mainPage1.webp" alt="Lorem ipsum 1v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-2" class="slide">
                        <img src="img/mainPage2.webp" alt="Lorem ipsum 2v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-3" class="slide">
                        <img src="img/mainPage10.webp" alt="Lorem ipsum 3v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-4" class="slide">
                        <img src="img/mainPage11.webp" alt="Lorem ipsum 4v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-5" class="slide">
                        <img src="img/mainPage14.webp" alt="Lorem ipsum 5v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-6" class="slide">
                        <img src="img/mainPage13.webp" alt="Lorem ipsum 6v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-7" class="slide">
                        <img src="img/mainPage12.webp" alt="Lorem ipsum 7v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-8" class="slide">
                        <img src="img/mainPage8.webp" alt="Lorem ipsum 8v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-9" class="slide">
                        <img src="img/mainPage9.webp" alt="Lorem ipsum 9v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slider-controls">
                <input type="radio" id="slide-radio-1v2" name="slide" class="slider-radio">
                <label for="slide-radio-1v2" class="slider-label" onclick="window.location.href='#slide-1';"></label>
                <input type="radio" id="slide-radio-2v2" name="slide" class="slider-radio">
                <label for="slide-radio-2v2" class="slider-label" onclick="window.location.href='#slide-2';"></label>
                <input type="radio" id="slide-radio-3v2" name="slide" class="slider-radio">
                <label for="slide-radio-3v2" class="slider-label" onclick="window.location.href='#slide-3';"></label>
                <input type="radio" id="slide-radio-4v2" name="slide" class="slider-radio">
                <label for="slide-radio-4v2" class="slider-label" onclick="window.location.href='#slide-4';"></label>
                <input type="radio" id="slide-radio-5v2" name="slide" class="slider-radio" checked>
                <label for="slide-radio-5v2" class="slider-label" onclick="window.location.href='#slide-5';"></label>
                <input type="radio" id="slide-radio-6v2" name="slide" class="slider-radio">
                <label for="slide-radio-6v2" class="slider-label" onclick="window.location.href='#slide-6';"></label>
                <input type="radio" id="slide-radio-7v2" name="slide" class="slider-radio">
                <label for="slide-radio-7v2" class="slider-label" onclick="window.location.href='#slide-7';"></label>
                <input type="radio" id="slide-radio-8v2" name="slide" class="slider-radio">
                <label for="slide-radio-8v2" class="slider-label" onclick="window.location.href='#slide-8';"></label>
                <input type="radio" id="slide-radio-9v2" name="slide" class="slider-radio">
                <label for="slide-radio-9v2" class="slider-label" onclick="window.location.href='#slide-9';"></label>
            </div>
        </section>
            <div class="product-grid1">
                <div class="product-item1">
                    <img src="img/gallery9.webp" alt="LoremIpsum" loading="lazy" width="200" height="200">
                    <div class="overlay">
                        <div class="text">
                            <h3>Lorem</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit...
                            </p>
                            <a href="./ourProducts.html" class="details-button-x">VIEW ALL</a>
                        </div>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/gallery12.webp" alt="Loremer" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja1" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja2" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja3" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja4" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja5" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/gallery11.webp" alt="Loremer2" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja6" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja7" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja8" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja9" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja10" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/gallery10.webp" alt="Loremer3" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja11" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja12" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja13" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja14" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja15" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
            </div>
            <div class="product-grid2">
                <div class="product-item1">
                    <img src="img/abootUs4.webp" alt="Loremer4" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja16" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja17" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja18" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja19" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja20" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/abootUs3.webp" alt="Loremer5" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja21" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja22" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja23" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja24" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja25" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/abootUs2.webp" alt="Loremer6" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja26" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja27" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja28" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja29" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja30" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/abootUs1.webp" alt="Loremer7" loading="lazy" width="200" height="200">
                    <div class="overlay">
                        <div class="text">
                            <h3>Lorem</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit...
                            </p>
                            <a href="./ourProducts.html" class="details-button-x">VIEW ALL</a>
                        </div>
                    </div>
                </div>
            </div>
        <section class="collection">
            <div class="collection__men">
                <h3 class="collection__heading">Product 1 Collection</h3>
                <div class="collection__shadow">
                    <img src="img/product1.webp" alt="product 1" class="collection__img" loading="lazy" width="150" height="150">
                </div>
                <a class="collection__btn" href="./ourProducts.html">explore more</a>
            </div>
            <div class="collection__women">
                <h3 class="collection__heading">Product 2 Collection</h3>
                <div class="collection__shadow">
                    <img src="img/product7.webp" alt="product 2" class="collection__img" loading="lazy" width="150" height="150">
                </div>
                <a class="collection__btn" href="./ourProducts.html">explore more</a>
            </div>
            <div class="collection__kids">
                <h3 class="collection__heading">Product 3 Collection</h3>
                <div class="collection__shadow">
                    <img src="img/product3.webp" alt="product 3" class="collection__img" loading="lazy" width="150" height="150">
                </div>
                <a class="collection__btn" href="./ourProducts.html">explore more</a>
            </div>
        </section>
        <section class="offer">
            <h2 style="display:none;">.</h2>
            <div class="offer__body">
                <img src="img/logo1transparent.webp" alt="LOGOv2" class="offer__img" loading="lazy" width="300" height="300">
                <div class="offer__content container">
                    <p class="offer__heading">SPECIAL OFFER</p>
                    <p class="offer__title">UPTO 70% OFF</p>
                    <p class="offer__text">
                        Upgrade your footwear collection with our 70% off special deal!
                        LOREM IPSUM!
                    </p>
                    <a href="./ourProducts.html" class="details-button">VIEW ALL</a>
                </div>
            </div>
        </section>
        <section class="service">
            <div class="service__content container">
                <div class="service__box">
                    <img src="img/pay1.webp" alt="pay1" loading="lazy" width="150" height="150">
                    <div class="service__text">
                        <h4 class="service__title">FREE SHIPING</h4>
                        <p class="service__describe">All Lorem ipsum $150</p>
                    </div>
                </div>
                <div class="service__box">
                    <img src="img/pay2.webp" alt="pay2" loading="lazy" width="150" height="150">
                    <div class="service__text">
                        <h4 class="service__title">QUICK PAYMENT</h4>
                        <p class="service__describe">100% Lorem ipsum </p>
                    </div>
                </div>
                <div class="service__box">
                    <img src="img/pay1.webp" alt="pay3" loading="lazy" width="150" height="150">
                    <div class="service__text">
                        <h4 class="service__title">FREE RETURNS</h4>
                        <p class="service__describe">Lorem ipsum 30 days</p>
                    </div>
                </div>
            </div>
        </section>
        <div class="load-more-container">
            <a href="./gallery.html" class="load-more-btn">LOAD MORE PRODUCTS</a>
        </div>
        <div class="newsletter-signup-section">
            <div class="newsletter-signup-container">
                <div class="newsletter-content">
                    <h2 class="newsletter-title">SIGN UP FOR THE NEWSLETTER</h2>
                    <p class="newsletter-description">Subscribe for the latest stories and promotions</p>
                </div>
                <form class="newsletter-form">
                    <input type="email" class="newsletter-input" placeholder="Enter your email address" required>
                    <button type="submit" class="newsletter-submit-btn">
                        <img src="img/phone.svg" alt="Send" loading="lazy" width="30" height="30">
                    </button>
                </form>
            </div>
        </div>
    </main>