Paintra

<!-- HERO SECTION (Paintra Custom) --> <section class="d-flex flex-column justify-content-center align-items-center position-relative overflow-hidden" style="min-height: 85vh;"><!-- Ambient Glow Background --> <div class="position-absolute top-50 start-50 translate-middle rounded-circle" style="width: 800px; height: 800px; background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(0,0,0,0) 70%); z-index: 0; filter: blur(60px);">&nbsp;</div> <div class="container position-relative z-10 text-center" data-aos="zoom-in"> <div class="mb-5"><span class="badge bg-black border border-secondary text-uppercase tracking-widest px-4 py-2 me-2 rounded-pill">Action Platformer</span> <span class="badge bg-primary bg-opacity-75 text-white text-uppercase tracking-widest px-4 py-2 rounded-pill border border-primary shadow-lg">Coming Late 2026</span></div> <img style="max-width: 500px; width: 100%; filter: drop-shadow(0 0 40px rgba(99,102,241,0.4)); margin-bottom: 2rem;" src="https://i.ibb.co/gTjQVZm/Paintra-Logo-Site.png" alt="Paintra Logo"> <h3 class="text-white fw-light mb-5 tracking-widest opacity-75">REIMAGINED FOR PC</h3> <div class="d-flex gap-3 justify-content-center"><button class="btn btn-outline-light btn-lg d-flex align-items-center gap-3 disabled rounded-pill px-5 py-3 border-opacity-25" style="opacity: 0.7;"> Coming to Steam </button></div> </div> </section> <!-- MAIN CONTENT --> <div class="container position-relative z-10" style="margin-top: -5rem; margin-bottom: 5rem;"><!-- Active Development Banner --> <div class="row justify-content-center mb-5" data-aos="fade-up"> <div class="col-lg-10"> <div class="p-4 border-start border-4 border-primary bg-black bg-opacity-75 rounded-end-4 shadow-lg backdrop-blur"> <div class="d-flex align-items-center"> <div class="flex-shrink-0 me-3 text-primary">&nbsp;</div> <div class="flex-grow-1"> <h5 class="fw-bold text-white mb-1">Active Development Update</h5> <p class="text-white-50 mb-0 small">Production has officially begun on the full release. Paintra is currently being rebuilt from the ground up in <strong>GameMaker Studio 2</strong> to ensure a fluid, high-performance experience.</p> </div> </div> </div> </div> </div> <!-- The Next Chapter --> <div class="row justify-content-center mb-5" data-aos="fade-up"> <div class="col-lg-10"> <div class="p-5 border border-secondary bg-black bg-opacity-50 rounded-4 shadow-lg"> <div class="row align-items-center"> <div class="col-md-7"> <h2 class="fw-bold mb-4 text-white">The Next Chapter</h2> <p class="text-white-50 lead mb-4">Paintra is a 2D platformer blending classic precision mechanics with modern, fluid combat.</p> <p class="text-white-50 mb-4">We are targeting a <strong>Late 2026</strong> release on Steam. The game features a stunning hand-crafted art style, an original immersive soundtrack, and tight boomerang-based combat mechanics.</p> <div class="d-flex flex-wrap gap-2 mb-5"><span class="badge bg-white bg-opacity-10 border border-secondary text-white px-3 py-2 rounded-pill">Precision Platforming</span> <span class="badge bg-white bg-opacity-10 border border-secondary text-white px-3 py-2 rounded-pill">Metroidvania Elements</span> <span class="badge bg-white bg-opacity-10 border border-secondary text-white px-3 py-2 rounded-pill">Boss Battles</span></div> <div class="p-3 border border-secondary bg-white bg-opacity-05 rounded-3 d-inline-block"> <p class="small text-white-50 mb-2 fw-bold text-uppercase">Legacy Prototype</p> <a class="btn btn-sm btn-outline-light rounded-pill px-4" href="https://gamejolt.com/games/Paintra/779892" target="_blank" rel="noopener"> Play on GameJolt </a></div> </div> <div class="col-md-5 mt-5 mt-md-0"> <div id="paintraCarousel" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner shadow-lg rounded-4 border border-secondary"> <div class="carousel-item active"><img class="d-block w-100" style="height: 300px; object-fit: cover;" src="https://i.ibb.co/Kwz7yGk/Screenshot-2023-03-15-214859.png" alt="Watercolor Hills"> <div class="carousel-caption d-none d-md-block p-2 bg-black bg-opacity-75 rounded-3 mb-3"><small class="text-white fw-bold">Vibrant Environments</small></div> </div> <div class="carousel-item"><img class="d-block w-100" style="height: 300px; object-fit: cover;" src="https://i.ibb.co/jG3FMYd/paintrascreenshot.png" alt="Countryside Lane"></div> <div class="carousel-item"><img class="d-block w-100" style="height: 300px; object-fit: cover;" src="https://i.ibb.co/Jyq6Hhp/paintraweb2.png" alt="Unexplored Cavern"></div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#paintraCarousel" data-bs-slide="prev"> </button> <button class="carousel-control-next" type="button" data-bs-target="#paintraCarousel" data-bs-slide="next"> </button></div> </div> </div> </div> </div> </div> <!-- Tech Stack Grid --> <div class="row mb-5"> <div class="col-12 text-center mb-5" data-aos="fade-up"> <h2 class="fw-bold display-6 text-white">Powered By</h2> <div class="mx-auto mt-3" style="width: 60px; height: 3px; background: linear-gradient(90deg, #6366f1, #a855f7);">&nbsp;</div> </div> <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="100"> <div class="p-4 h-100 border border-secondary bg-white bg-opacity-05 rounded-4 d-flex flex-column hover-lift transition-all"> <div class="d-flex align-items-center mb-4"><!-- UPDATED GAMEMAKER LOGO --> <img style="width: 48px; height: 48px; border-radius: 12px; margin-right: 1rem; object-fit: contain;" src="https://user-images.githubusercontent.com/60024796/170530530-b17fc2f4-91ad-4b2b-ad58-d6d4b3ed9aac.png" alt="GameMaker"> <div> <h5 class="fw-bold text-white mb-0">GameMaker</h5> <small class="text-success fw-bold">Current Engine</small></div> </div> <p class="text-white-50 small flex-grow-1">Migrated to GameMaker Studio 2 to support advanced shaders, better performance, and seamless Steamworks integration for the 2026 release.</p> </div> </div> <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="200"> <div class="p-4 h-100 border border-secondary bg-white bg-opacity-05 rounded-4 d-flex flex-column hover-lift transition-all"> <div class="d-flex align-items-center mb-4"><!-- FIXED VALID LOGIC PRO LOGO --> <img style="width: 48px; height: 48px; border-radius: 12px; margin-right: 1rem; object-fit: cover;" src="https://help.apple.com/assets/674E320B0F925B1B7F0F0F3F/674E320F1010EB954D087457/en_US/8d5d570f325182c1130d501e5c9e54aa.png" alt="Logic Pro X"> <h5 class="fw-bold text-white mb-0">Logic Pro X</h5> </div> <p class="text-white-50 small flex-grow-1">Professional DAW used for composing the original immersive soundtrack and designing crisp sound effects.</p> </div> </div> <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="300"> <div class="p-4 h-100 border border-secondary bg-white bg-opacity-05 rounded-4 d-flex flex-column hover-lift transition-all"> <div class="d-flex align-items-center mb-4"><!-- LDTK LOGO --> <img style="width: 48px; height: 48px; border-radius: 12px; margin-right: 1rem; object-fit: contain; background: white; padding: 4px;" src="https://api.nuget.org/v3-flatcontainer/monogame-ldtk-importer/2.0.3/icon" alt="LDtk"> <h5 class="fw-bold text-white mb-0">LDtk</h5> </div> <p class="text-white-50 small flex-grow-1">Our level design pipeline utilizes LDtk for rapid iteration, allowing us to build complex worlds/biomes that import directly into the engine.</p> </div> </div> </div> <!-- Development Archive (Videos) --> <div class="row"> <div class="col-12 text-center mb-5" data-aos="fade-up"> <h2 class="fw-bold text-white">Development Archive</h2> <p class="text-white-50">A look back at early prototypes and progress.</p> </div> <!-- Video 1 --> <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="100"> <div class="p-3 h-100 border border-secondary bg-black bg-opacity-50 rounded-4 shadow-lg group"> <div class="ratio ratio-16x9 rounded-3 overflow-hidden mb-3 border border-secondary position-relative group-hover-scale transition-all" style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#videoModal1"><img class="w-100 h-100 object-fit-cover opacity-75 group-hover-opacity-100" src="https://i.ytimg.com/vi/RzR0yEqd67g/maxresdefault.jpg" alt="Trailer"> <div class="position-absolute top-50 start-50 translate-middle">&nbsp;</div> </div> <h5 class="fw-bold text-white fs-6">Announcement Trailer</h5> <small class="text-white-50">The initial reveal of the Paintra universe.</small></div> </div> <!-- Video 2 --> <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="200"> <div class="p-3 h-100 border border-secondary bg-black bg-opacity-50 rounded-4 shadow-lg group"> <div class="ratio ratio-16x9 rounded-3 overflow-hidden mb-3 border border-secondary position-relative group-hover-scale transition-all" style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#videoModal2"><img class="w-100 h-100 object-fit-cover opacity-75 group-hover-opacity-100" src="https://i.ytimg.com/vi/Kg-TedO_zJ8/maxresdefault.jpg" alt="Gameplay"> <div class="position-absolute top-50 start-50 translate-middle">&nbsp;</div> </div> <h5 class="fw-bold text-white fs-6">Watercolor Hills</h5> <small class="text-white-50">Early footage of the first biome.</small></div> </div> <!-- Video 3 --> <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="300"> <div class="p-3 h-100 border border-secondary bg-black bg-opacity-50 rounded-4 shadow-lg group"> <div class="ratio ratio-16x9 rounded-3 overflow-hidden mb-3 border border-secondary position-relative group-hover-scale transition-all" style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#videoModal3"><img class="w-100 h-100 object-fit-cover opacity-75 group-hover-opacity-100" src="https://i.ytimg.com/vi/Q88sMv8D2ts/maxresdefault.jpg" alt="Showcase"> <div class="position-absolute top-50 start-50 translate-middle">&nbsp;</div> </div> <h5 class="fw-bold text-white fs-6">Dev Showcase</h5> <small class="text-white-50">Retrospective on the prototyping phase.</small></div> </div> </div> </div> <!-- Modals --> <div id="videoModal1" class="modal fade" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content bg-transparent border-0"> <div class="modal-body p-0"> <div class="ratio ratio-16x9 rounded-4 shadow-lg border border-secondary"><iframe src="https://www.youtube.com/embed/RzR0yEqd67g" allowfullscreen="allowfullscreen"></iframe></div> </div> </div> </div> </div> <div id="videoModal2" class="modal fade" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content bg-transparent border-0"> <div class="modal-body p-0"> <div class="ratio ratio-16x9 rounded-4 shadow-lg border border-secondary"><iframe src="https://www.youtube.com/embed/Kg-TedO_zJ8" allowfullscreen="allowfullscreen"></iframe></div> </div> </div> </div> </div> <div id="videoModal3" class="modal fade" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content bg-transparent border-0"> <div class="modal-body p-0"> <div class="ratio ratio-16x9 rounded-4 shadow-lg border border-secondary"><iframe src="https://www.youtube.com/embed/Q88sMv8D2ts" allowfullscreen="allowfullscreen"></iframe></div> </div> </div> </div> </div>

<!-- HERO SECTION (Paintra Custom) --> <section class="d-flex flex-column justify-content-center align-items-center position-relative overflow-hidden" style="min-height: 85vh;"><!-- Ambient Glow Background --> <div class="position-absolute top-50 start-50 translate-middle rounded-circle" style="width: 800px; height: 800px; background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(0,0,0,0) 70%); z-index: 0; filter: blur(60px);">&nbsp;</div> <div class="container position-relative z-10 text-center" data-aos="zoom-in"> <div class="mb-5"><span class="badge bg-black border border-secondary text-uppercase tracking-widest px-4 py-2 me-2 rounded-pill">Action Platformer</span> <span class="badge bg-primary bg-opacity-75 text-white text-uppercase tracking-widest px-4 py-2 rounded-pill border border-primary shadow-lg">Coming Late 2026</span></div> <img style="max-width: 500px; width: 100%; filter: drop-shadow(0 0 40px rgba(99,102,241,0.4)); margin-bottom: 2rem;" src="https://i.ibb.co/gTjQVZm/Paintra-Logo-Site.png" alt="Paintra Logo"> <h3 class="text-white fw-light mb-5 tracking-widest opacity-75">REIMAGINED FOR PC</h3> <div class="d-flex gap-3 justify-content-center"><button class="btn btn-outline-light btn-lg d-flex align-items-center gap-3 disabled rounded-pill px-5 py-3 border-opacity-25" style="opacity: 0.7;"> Coming to Steam </button></div> </div> </section> <!-- MAIN CONTENT --> <div class="container position-relative z-10" style="margin-top: -5rem; margin-bottom: 5rem;"><!-- Active Development Banner --> <div class="row justify-content-center mb-5" data-aos="fade-up"> <div class="col-lg-10"> <div class="p-4 border-start border-4 border-primary bg-black bg-opacity-75 rounded-end-4 shadow-lg backdrop-blur"> <div class="d-flex align-items-center"> <div class="flex-shrink-0 me-3 text-primary">&nbsp;</div> <div class="flex-grow-1"> <h5 class="fw-bold text-white mb-1">Active Development Update</h5> <p class="text-white-50 mb-0 small">Production has officially begun on the full release. Paintra is currently being rebuilt from the ground up in <strong>GameMaker Studio 2</strong> to ensure a fluid, high-performance experience.</p> </div> </div> </div> </div> </div> <!-- The Next Chapter --> <div class="row justify-content-center mb-5" data-aos="fade-up"> <div class="col-lg-10"> <div class="p-5 border border-secondary bg-black bg-opacity-50 rounded-4 shadow-lg"> <div class="row align-items-center"> <div class="col-md-7"> <h2 class="fw-bold mb-4 text-white">The Next Chapter</h2> <p class="text-white-50 lead mb-4">Paintra is a 2D platformer blending classic precision mechanics with modern, fluid combat.</p> <p class="text-white-50 mb-4">We are targeting a <strong>Late 2026</strong> release on Steam. The game features a stunning hand-crafted art style, an original immersive soundtrack, and tight boomerang-based combat mechanics.</p> <div class="d-flex flex-wrap gap-2 mb-5"><span class="badge bg-white bg-opacity-10 border border-secondary text-white px-3 py-2 rounded-pill">Precision Platforming</span> <span class="badge bg-white bg-opacity-10 border border-secondary text-white px-3 py-2 rounded-pill">Metroidvania Elements</span> <span class="badge bg-white bg-opacity-10 border border-secondary text-white px-3 py-2 rounded-pill">Boss Battles</span></div> <div class="p-3 border border-secondary bg-white bg-opacity-05 rounded-3 d-inline-block"> <p class="small text-white-50 mb-2 fw-bold text-uppercase">Legacy Prototype</p> <a class="btn btn-sm btn-outline-light rounded-pill px-4" href="https://gamejolt.com/games/Paintra/779892" target="_blank" rel="noopener"> Play on GameJolt </a></div> </div> <div class="col-md-5 mt-5 mt-md-0"> <div id="paintraCarousel" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner shadow-lg rounded-4 border border-secondary"> <div class="carousel-item active"><img class="d-block w-100" style="height: 300px; object-fit: cover;" src="https://i.ibb.co/Kwz7yGk/Screenshot-2023-03-15-214859.png" alt="Watercolor Hills"> <div class="carousel-caption d-none d-md-block p-2 bg-black bg-opacity-75 rounded-3 mb-3"><small class="text-white fw-bold">Vibrant Environments</small></div> </div> <div class="carousel-item"><img class="d-block w-100" style="height: 300px; object-fit: cover;" src="https://i.ibb.co/jG3FMYd/paintrascreenshot.png" alt="Countryside Lane"></div> <div class="carousel-item"><img class="d-block w-100" style="height: 300px; object-fit: cover;" src="https://i.ibb.co/Jyq6Hhp/paintraweb2.png" alt="Unexplored Cavern"></div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#paintraCarousel" data-bs-slide="prev"> </button> <button class="carousel-control-next" type="button" data-bs-target="#paintraCarousel" data-bs-slide="next"> </button></div> </div> </div> </div> </div> </div> <!-- Tech Stack Grid --> <div class="row mb-5"> <div class="col-12 text-center mb-5" data-aos="fade-up"> <h2 class="fw-bold display-6 text-white">Powered By</h2> <div class="mx-auto mt-3" style="width: 60px; height: 3px; background: linear-gradient(90deg, #6366f1, #a855f7);">&nbsp;</div> </div> <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="100"> <div class="p-4 h-100 border border-secondary bg-white bg-opacity-05 rounded-4 d-flex flex-column hover-lift transition-all"> <div class="d-flex align-items-center mb-4"><!-- UPDATED GAMEMAKER LOGO --> <img style="width: 48px; height: 48px; border-radius: 12px; margin-right: 1rem; object-fit: contain;" src="https://user-images.githubusercontent.com/60024796/170530530-b17fc2f4-91ad-4b2b-ad58-d6d4b3ed9aac.png" alt="GameMaker"> <div> <h5 class="fw-bold text-white mb-0">GameMaker</h5> <small class="text-success fw-bold">Current Engine</small></div> </div> <p class="text-white-50 small flex-grow-1">Migrated to GameMaker Studio 2 to support advanced shaders, better performance, and seamless Steamworks integration for the 2026 release.</p> </div> </div> <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="200"> <div class="p-4 h-100 border border-secondary bg-white bg-opacity-05 rounded-4 d-flex flex-column hover-lift transition-all"> <div class="d-flex align-items-center mb-4"><!-- FIXED VALID LOGIC PRO LOGO --> <img style="width: 48px; height: 48px; border-radius: 12px; margin-right: 1rem; object-fit: cover;" src="https://help.apple.com/assets/674E320B0F925B1B7F0F0F3F/674E320F1010EB954D087457/en_US/8d5d570f325182c1130d501e5c9e54aa.png" alt="Logic Pro X"> <h5 class="fw-bold text-white mb-0">Logic Pro X</h5> </div> <p class="text-white-50 small flex-grow-1">Professional DAW used for composing the original immersive soundtrack and designing crisp sound effects.</p> </div> </div> <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="300"> <div class="p-4 h-100 border border-secondary bg-white bg-opacity-05 rounded-4 d-flex flex-column hover-lift transition-all"> <div class="d-flex align-items-center mb-4"><!-- LDTK LOGO --> <img style="width: 48px; height: 48px; border-radius: 12px; margin-right: 1rem; object-fit: contain; background: white; padding: 4px;" src="https://api.nuget.org/v3-flatcontainer/monogame-ldtk-importer/2.0.3/icon" alt="LDtk"> <h5 class="fw-bold text-white mb-0">LDtk</h5> </div> <p class="text-white-50 small flex-grow-1">Our level design pipeline utilizes LDtk for rapid iteration, allowing us to build complex worlds/biomes that import directly into the engine.</p> </div> </div> </div> <!-- Development Archive (Videos) --> <div class="row"> <div class="col-12 text-center mb-5" data-aos="fade-up"> <h2 class="fw-bold text-white">Development Archive</h2> <p class="text-white-50">A look back at early prototypes and progress.</p> </div> <!-- Video 1 --> <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="100"> <div class="p-3 h-100 border border-secondary bg-black bg-opacity-50 rounded-4 shadow-lg group"> <div class="ratio ratio-16x9 rounded-3 overflow-hidden mb-3 border border-secondary position-relative group-hover-scale transition-all" style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#videoModal1"><img class="w-100 h-100 object-fit-cover opacity-75 group-hover-opacity-100" src="https://i.ytimg.com/vi/RzR0yEqd67g/maxresdefault.jpg" alt="Trailer"> <div class="position-absolute top-50 start-50 translate-middle">&nbsp;</div> </div> <h5 class="fw-bold text-white fs-6">Announcement Trailer</h5> <small class="text-white-50">The initial reveal of the Paintra universe.</small></div> </div> <!-- Video 2 --> <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="200"> <div class="p-3 h-100 border border-secondary bg-black bg-opacity-50 rounded-4 shadow-lg group"> <div class="ratio ratio-16x9 rounded-3 overflow-hidden mb-3 border border-secondary position-relative group-hover-scale transition-all" style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#videoModal2"><img class="w-100 h-100 object-fit-cover opacity-75 group-hover-opacity-100" src="https://i.ytimg.com/vi/Kg-TedO_zJ8/maxresdefault.jpg" alt="Gameplay"> <div class="position-absolute top-50 start-50 translate-middle">&nbsp;</div> </div> <h5 class="fw-bold text-white fs-6">Watercolor Hills</h5> <small class="text-white-50">Early footage of the first biome.</small></div> </div> <!-- Video 3 --> <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="300"> <div class="p-3 h-100 border border-secondary bg-black bg-opacity-50 rounded-4 shadow-lg group"> <div class="ratio ratio-16x9 rounded-3 overflow-hidden mb-3 border border-secondary position-relative group-hover-scale transition-all" style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#videoModal3"><img class="w-100 h-100 object-fit-cover opacity-75 group-hover-opacity-100" src="https://i.ytimg.com/vi/Q88sMv8D2ts/maxresdefault.jpg" alt="Showcase"> <div class="position-absolute top-50 start-50 translate-middle">&nbsp;</div> </div> <h5 class="fw-bold text-white fs-6">Dev Showcase</h5> <small class="text-white-50">Retrospective on the prototyping phase.</small></div> </div> </div> </div> <!-- Modals --> <div id="videoModal1" class="modal fade" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content bg-transparent border-0"> <div class="modal-body p-0"> <div class="ratio ratio-16x9 rounded-4 shadow-lg border border-secondary"><iframe src="https://www.youtube.com/embed/RzR0yEqd67g" allowfullscreen="allowfullscreen"></iframe></div> </div> </div> </div> </div> <div id="videoModal2" class="modal fade" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content bg-transparent border-0"> <div class="modal-body p-0"> <div class="ratio ratio-16x9 rounded-4 shadow-lg border border-secondary"><iframe src="https://www.youtube.com/embed/Kg-TedO_zJ8" allowfullscreen="allowfullscreen"></iframe></div> </div> </div> </div> </div> <div id="videoModal3" class="modal fade" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content bg-transparent border-0"> <div class="modal-body p-0"> <div class="ratio ratio-16x9 rounded-4 shadow-lg border border-secondary"><iframe src="https://www.youtube.com/embed/Q88sMv8D2ts" allowfullscreen="allowfullscreen"></iframe></div> </div> </div> </div> </div>