This is the css - #spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-out, visibility 0s linear 0.5s;
    z-index: 99999;
}
#spinner.show {
    transition: opacity 0.8s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}
.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    z-index: 99;
    background-color: #a50808;
    color: #fff;
    transition: background-color 0.5s, color 0.5s;
}
.back-to-top:hover {
    background-color: #0056b3;
    color: #fff;
}
.btn {
    text-transform: uppercase;
    font-weight: 500;
    transition: 0.5s;
}
.btn.btn-primary {
    box-shadow: inset 0 0 0 0 #083be2;
}
.btn.btn-primary:hover {
    box-shadow: inset 200px 0 0 0 #083be2 !important;
    color: #fff !important;
}
.btn.btn-dark {
    box-shadow: inset 0 0 0 0 #083be2;
}
.btn.btn-dark:hover {
    box-shadow: inset 200px 0 0 0 #025e33;
    color: #225202 !important;
}
.navbar .navbar-nav {
    padding: 15px 0;
}
.navbar .navbar-nav .nav-link {
    padding: 15px;
    color: var(--bs-white);
    font-weight: 500;
    font-size: 20px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    outline: 0;
    transition: 0.5s;
}
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:hover {
    color: #0f4aee;
    transition: 0.5s;
}
@media (max-width: 768px) {
    .navbar-brand img {
        width: 75px;
        height: 75px;
    }
}
.navbar-toggler {
    background: var(--bs-secondary);
    color: var(--bs-light) !important;
    padding: 5px 12px;
    border: 2px solid #083be2 !important;
}
.carousel-item {
    position: relative;
}
.carousel-item::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.377);
}
.carousel-caption {
    height: 100%;
    display: flex;
    align-items: center;
    text-align: start;
    z-index: 1;
}
.carousel-control-prev {
    width: 80px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 0;
    background: #083be2;
    border-radius: 0 30px 30px 0;
    transition: 0.5s;
    opacity: 1;
}
.carousel-control-next {
    width: 80px;
    height: 60px;
    position: absolute;
    top: 50%;
    right: 0;
    background: #083be2;
    border-radius: 30px 0 0 30px;
    transition: 0.5s;
    opacity: 1;
}
#carouselId .carousel-indicators li {
    width: 24px;
    height: 24px;
    background: var(--bs-dark);
    border: 2px solid #083be2;
    border-radius: 24px;
    margin: 0 10px 30px 10px;
}
#carouselId .carousel-indicators li.active {
    background: #04ff64 !important;
}
@media (max-width: 768px) {
    .carousel-item {
        width: 100%;
        height: 400px;
    }
    .carousel-item img {
        height: 400px;
    }
    .carousel-control-next,
    .carousel-control-prev {
        display: none;
    }
}
.about-img {
    width: 100%;
    height: 70%;
    position: relative;
    padding: 30px;
    overflow: hidden;
}
.about-img::before {
    content: "";
    width: 100%;
    height: 40%;
    background: #2341ec;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 10px;
}
.about-img::after {
    content: "";
    width: 100%;
    height: 70%;
    background: #1f5e37;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    border-radius: 10px;
}
.about-img img {
    position: relative;
    z-index: 2;
    border-radius: 10px;
}
@keyframes mymove {
    from {
        top: -202px;
    }
    to {
        top: 102%;
    }
}
.about-item h5 {
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: #f8f9fa;
    border-radius: 5px;
    display: inline-block;
}
.about-item h1 {
    margin-bottom: 20px;
}
.about-item p {
    margin-bottom: 20px;
    line-height: 1.6;
}
.about-item .row {
    margin-top: 30px;
}
@media (max-width: 768px) {
    .about-img,
    .about-item {
        text-align: center;
    }
    .about-img img {
        width: 100%;
        height: auto;
    }
    .row {
        display: flex;
        flex-wrap: wrap;
    }
    .row .col-3 {
        flex: 1 1 45%; /* Ajuste a largura conforme necessário */
        margin-bottom: 20px;
    }
}
.contact-link a h5,
.contact-link a i,
.contact-link a.h5 {
    transition: 0.5s;
}
.contact-link a h5:hover,
.contact-link a i:hover,
.contact-link a.h5:hover {
    color: #083be2 !important;
}

.footer {
    background: linear-gradient(rgba(3, 67, 110, 0.945), rgba(0, 14, 8, 0.7)), url(https://zedacalmacalçadas.pt/img/fotoprincipal.webp) center center no-repeat;
    background-size: cover;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 6rem;
}


.footer-item,
.footer-item a {
    color: rgba(255, 255, 255, 0.7);
    text-transform: capitalize;
}
.copyright .copyright-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}
.copyright .copyright-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.whatsapp-icon {
    background-color: #25d366;
    color: #fff;
}
.whatsapp-icon:hover {
    background-color: #0b682d;
    color: #fff;
}
.email-icon {
    color: #007bff;
    background-color: transparent;
}
.email-icon:hover {
    color: #0056b3;
}
.back-to-top {
    background-color: #a50808;
    color: #fff;
}
.back-to-top:hover {
    background-color: #0056b3;
    color: #fff;
}
.navbar-bg {
    background-color: #a76e58;
}
.email-icon {
    font-size: 1.5em;
    background-color: transparent;
}
.email-container {
    margin-top: 1px;
}
.email-text {
    margin-left: 15px;
}
.copyright .text-md-end small {
    font-size: 0.6em;
}
.about-item h5 {
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: #f8f9fa;
    border-radius: 5px;
    display: inline-block;
}
.about-item h1 {
    margin-bottom: 20px;
}
.about-item p {
    margin-bottom: 20px;
    line-height: 1.6;
}
.about-item .row {
    margin-top: 30px;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-solid-900.woff2') format('woff2'),
       url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-solid-900.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'FontAwesomeBrands';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-brands-400.woff2') format('woff2'),
       url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-brands-400.woff') format('woff');
  font-display: swap;
}

.animated {
    animation-fill-mode: both;
}

.footer {
    position: relative;
    z-index: 1;
}

One of the pages html - <!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="utf-8">
    <title>x</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="keywords" content="x">
    <meta name="description" content="x">
    <link rel="canonical" href="https://x" />
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="x">
    <meta property="og:type" content="website">
    <meta property="og:image" content="x/img/logotipofinalv2.png">
    <meta property="og:url" content="x/index.html">
    <meta property="og:description" content="x">
    
    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Icon Font Stylesheet -->
    <link rel="stylesheet" href="css/all.min.css">
    <link rel="stylesheet" href="css/bootstrap-icons.min.css">
    
    <!-- Libraries Stylesheet -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet">

    <!-- Customized Bootstrap Stylesheet -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Template Stylesheet -->
    <link href="css/style.css" rel="stylesheet">
    
    <!-- Schema.org JSON-LD -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "LocalBusiness",
      "name": "x",
      "image": "https://x/img/logotipofinalv2.png",
      "@id": "https://x/index.html",
      "url": "https://x",
      "telephone": "+x",
      "description": "x"
    }
    </script>
    
       <style>
        .navbar-brand img {
            width: 75px;
            height: auto;
        }

        @media (max-width: 768px) {
            .navbar-brand img {
                width: 75px;
                height: auto;
            }
        }

         .footer-item img {
            width: 175px;
            height: auto;
        }

        @media (max-width: 768px) {
            .footer-item img {
                width: 100%;
                height: auto;
            }
        }
        
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
    </head>

    <body>
        <!-- Spinner Start -->
        <div id="spinner" class="show w-100 vh-100 bg-white position-fixed translate-middle top-50 start-50 d-flex align-items-center justify-content-center">
            <div class="spinner-grow text-primary" role="status"></div>
        </div>
        <!-- Spinner End -->


<!-- Navbar Start -->
<div class="container-fluid navbar-bg">
    <div class="container">
        <nav class="navbar navbar-dark navbar-expand-lg py-lg-0">
            <a href="index.html" class="navbar-brand">
              <img 
    src="img/logotipofinalv2.webp" alt="Logotipo da Empresa" width="75" height="75"  style="height: auto;" srcset="img/logotipofinalv2.webp 1x, img/[email protected] 2x, img/[email protected] 3x">
            </a>  
           
            <button class="navbar-toggler bg-primary" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-label="Toggle navigation">
                <span class="fa fa-bars text-dark"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <div class="navbar-nav mx-auto">
                    <a href="index.html" class="nav-item nav-link">Home</a>
                    <a href="about.html" class="nav-item nav-link">Acerca</a>
                    <a href="service.html" class="nav-item nav-link">Serviços</a>
                    <a href="contact.html" class="nav-item nav-link">Contatos</a>
                </div>
            </div>
        </nav>
    </div>
</div>
<!-- Navbar End -->

        <!-- Carousel Start -->
<div class="container-fluid carousel px-0 mb-5 pb-5">
        <div id="carouselId" class="carousel slide" data-bs-ride="carousel">
            <ol class="carousel-indicators">
                <li data-bs-target="#carouselId" data-bs-slide-to="0" class="active" aria-current="true" aria-label="First slide"></li>
                <li data-bs-target="#carouselId" data-bs-slide-to="1" aria-label="Second slide"></li>
                <li data-bs-target="#carouselId" data-bs-slide-to="2" aria-label="Third slide"></li>

            </ol>
            <div class="carousel-inner" role="region" aria-label="Carrossel de Imagens">
                <div class="carousel-item active">
                    <img src="img/fotos33.webp" class="img-fluid w-100 lozad" alt="First slide" width="719" height="512" loading="lazy" >
                    <div class="carousel-caption">
                        <div class="container carousel-content">
                            <h1 class="text-white display-1 mb-4 animated slideInDown">Transformando ruas em passarelas</h1>
                            <a href="service.html" class="me-2"><button type="button" class="px-5 py-3 btn btn-primary border-2 rounded-pill animated slideInDown">Saiba mais..</button></a>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img/foto21.webp" class="img-fluid w-100 lozad" alt="Second slide" width="719" height="512" loading="lazy">
                    <div class="carousel-caption">
                        <div class="container carousel-content">
                            <h2 class="text-white mb-4 animated slideInDown">x</h2>
                            <h3 class="text-white display-1 mb-4 animated slideInDown">Porque até o chão merece um upgrade!</h3>
                            <a href="service.html" class="me-2"><button type="button" class="px-5 py-3 btn btn-primary border-2 rounded-pill animated slideInDown">Saiba mais..</button></a>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img/fotos44.webp" class="img-fluid w-100 lozad" alt="Third slide" width="719" height="512" loading="lazy">
                    <div class="carousel-caption">
                        <div class="container carousel-content">
                            <h2 class="text-white mb-4 animated slideInDown">x</h2>
                            <h3 class="text-white display-1 mb-4 animated slideInDown">x</h3>
                            <a href="service.html" class="me-2"><button type="button" class="px-5 py-3 btn btn-primary border-2 rounded-pill animated slideInDown">Saiba mais..</button></a>
                        </div>
                    </div>
                </div>
               
        </div>
        <button class="carousel-control-prev btn border border-2 border-start-0" type="button" data-bs-target="#carouselId" data-bs-slide="prev" aria-label="Previous Slide">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next btn border border-2 border-end-0" type="button" data-bs-target="#carouselId" data-bs-slide="next" aria-label="Next Slide">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>
        <!-- Carousel End -->

    <div id="error-message" style="display: none;"></div>
   <!-- Footer Start -->
<div class="container-fluid footer py-5">
    <div class="container py-5">
        <div class="row g-4 footer-inner justify-content-center text-center">
            <div class="col-lg-3 col-md-6">
                <div class="footer-item">
                    <a href="index.html">
                        
<img src="img/logotipofinalv2.webp" alt="Logotipo da Empresa"  width="175" height="175" style="height: auto;" srcset="img/logotipofinalv2.webp 1x, img/[email protected] 2x, img/[email protected] 3x">
                    </a>
                    <p></p>
                    <p>Cada pedra é cortada com dedicação e precisão.</p>
                </div>
            </div>
                <div class="col-lg-3 col-md-6">
                    <div class="footer-item">
                        <h4 class="text-white fw-bold mb-4">Links úteis</h4>
                        <div class="d-flex flex-column align-items-center">
                            <a class="btn btn-link ps-0" href="about.html"><i class="fa fa-check me-2"></i>Acerca</a>
                            <a class="btn btn-link ps-0" href="contact.html"><i class="fa fa-check me-2"></i>Contatos</a>
                            <a class="btn btn-link ps-0" href="service.html"><i class="fa fa-check me-2"></i>Serviços</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
    <div class="footer-item">
        <h4 class="text-white fw-bold mb-4">Contate-me</h4>
        <div class="d-flex align-items-center mb-3">
          <a class="btn rounded-circle me-3 whatsapp-icon" href="https://wa.me/11" target="_blank" rel="noopener">
    <i class="fab fa-whatsapp"></i>
        </a>
            <span>+111</span>
        </div>
        <div class="d-flex align-items-center email-container">
        <a href="mailto:11" class="text-white">
            <i class="fa fa-envelope email-icon me-3"></i>
        </a>
        <span class="email-text">x</span>
        </div>
    </div>
</div>
            </div>
        </div>
    </div>
  <!-- Footer end -->
<div class="container-fluid copyright py-3" style="background-color: #D2691E;">
    <div class="container">
        <div class="row">
            <div class="col-md-4 text-center text-md-start mb-3 mb-md-0">
                <a href="#" class="text-white mb-0 display-6">Zé da Calma <i class="fas fa-cube text-white ms-3"></i></a>
            </div>
            <div class="col-md-4 copyright-btn text-center text-md-start mb-3 mb-md-0 flex-shrink-0">
            </div>
            <div class="col-md-4 my-auto text-center text-md-end text-white">
                <small>Designed By <a class="border-bottom" href="https://htmlcodex.com">HTML Codex</a><br>Distributed By <a class="border-bottom" href="https://themewagon.com">ThemeWagon</a></small>
            </div>
        </div>
    </div>
</div>


<!-- Modal HTML -->
<div class="modal fade" id="whatsappModal" tabindex="-1" aria-labelledby="whatsappModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="whatsappModalLabel">WhatsApp Modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Conteúdo do modal.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<!-- Back to Top -->
<a href="#" class="btn rounded-circle border-3 back-to-top"><i class="fa fa-arrow-up"></i></a>
        
        <!-- JavaScript Libraries -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lozad.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" defer></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
        <script src="lib/easing/easing.min.js" defer></script>
        <script src="lib/waypoints/waypoints.min.js" defer></script>
        <script src="lib/owlcarousel/owl.carousel.min.js" defer></script>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lozad.min.js"></script>   
        <!-- Template Javascript -->
<script src="js/main.js"></script>
    </body>

</html> and for ending the Javascript - (function ($) {
    "use strict";

    // Spinner
    var spinner = function () {
        setTimeout(function () {
            if ($('#spinner').length > 0) {
                $('#spinner').removeClass('show');
            }
        }, 1);
    };
    spinner();

    // Back to top button
    $(window).scroll(function () {
        if ($(this).scrollTop() > 300) {
            $('.back-to-top').fadeIn('slow');
        } else {
            $('.back-to-top').fadeOut('slow');
        }
    });
    $('.back-to-top').click(function () {
        $('html, body').animate({scrollTop: 0}, 300, 'easeInOutExpo');
        return false;
    });

    new WOW().init();

    // Código adicional
    document.addEventListener('DOMContentLoaded', function() {
        const servicosContainer = document.getElementById('servicos');
        const servicoSelect = document.getElementById('servico-select');
        const tipoMetrosSelect = document.getElementById('tipo-metros');
        const metrosInput = document.getElementById('metros');
        const calcularButton = document.getElementById('calcular');
        const resultado = document.getElementById('resultado');

        if (servicosContainer && servicoSelect && tipoMetrosSelect && metrosInput && calcularButton && resultado) {
            const fatoresDeConversao = {
                'Vidraço 4x4': 17,
                'Vidraço 5x7': 12,
                'Vidraço 10x11': 9 // Adicione o fator de conversão para o novo serviço
            };

            const atualizarServicos = () => {
                servicoSelect.innerHTML = Array.from(servicosContainer.querySelectorAll('.servico'))
                    .map(servico => {
                        const titulo = servico.querySelector('.card-title').textContent;
                        return `<option value="${titulo}">${titulo}</option>`;
                    }).join('');
            };

            const calcularPreco = () => {
                const servicoSelecionado = servicoSelect.value;
                const tipoMetrosSelecionado = tipoMetrosSelect.value;
                const metros = parseFloat(metrosInput.value);
                if (isNaN(metros) || metros <= 0) {
                    resultado.textContent = 'Por favor, insira um valor válido para metros.';
                    return;
                }

                const servico = Array.from(servicosContainer.querySelectorAll('.servico'))
                    .find(servico => servico.querySelector('.card-title').textContent === servicoSelecionado);

                if (servico) {
                    let precoPorMetro = parseFloat(servico.querySelector('.preco').textContent);
                    const unidadePreco = servico.querySelector('.card-text').textContent.includes('m²') ? 'm2' : 'm3';
                    const fatorDeConversao = fatoresDeConversao[servicoSelecionado];
                    let total;

                    if (tipoMetrosSelecionado === 'm3') {
                        if (unidadePreco === 'm2') {
                            precoPorMetro = precoPorMetro * fatorDeConversao;
                        }
                        total = metros * precoPorMetro;
                    } else if (tipoMetrosSelecionado === 'm2') {
                        if (unidadePreco === 'm3') {
                            precoPorMetro = precoPorMetro / fatorDeConversao;
                        }
                        total = metros * precoPorMetro;
                    }

                    resultado.textContent = `Total: ${total.toFixed(2)}€`;
                }
            };

            atualizarServicos();
            calcularButton.addEventListener('click', calcularPreco);
        }

        // Código para exibir a mensagem de erro 404
        if (document.title === '404') {
            var errorMessage = document.getElementById('error-message');
            if (errorMessage) {
                errorMessage.style.display = 'block';
                errorMessage.innerHTML = '<h1>Oops! Página não encontrada.</h1><p>Desculpe, mas a página que você está procurando não existe. <a href="/">Voltar para a página inicial</a></p>';
            }
        }
    });

    const contactForm = document.getElementById('contactForm');
    if (contactForm) {
        contactForm.addEventListener('submit', function(event) {
            event.preventDefault();

            var formData = new FormData(this);

            fetch('contact.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(data => {
                document.getElementById('formMessage').innerHTML = data;
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });
    }

    document.addEventListener('DOMContentLoaded', () => {
        const whatsappLink = document.getElementById('whatsapp-link');
        const whatsappModal = new bootstrap.Modal(document.getElementById('whatsappModal'));

        if (whatsappLink && whatsappModal) {
            whatsappLink.addEventListener('click', (event) => {
                event.preventDefault();
                whatsappModal.show();
            });
        }
    });

    document.addEventListener('DOMContentLoaded', () => {
        try {
            const shareButton = document.querySelector('.tui-image-editor-main-container .tui-image-editor-download-btn');
            if (shareButton) {
                shareButton.addEventListener('click', (event) => {
                    // Código do evento
                });
            } else {
                console.warn('Elemento não encontrado: .tui-image-editor-main-container .tui-image-editor-download-btn');
            }
        } catch (error) {
            console.error('Erro ao adicionar evento:', error);
        }
    });

    document.addEventListener("DOMContentLoaded", function() {
        const observer = lozad(); // lazy loads elements with default selector as '.lozad'
        observer.observe();
    });

})(jQuery);