It works for me when I add it to the end of style.css.
/* Spinner */
#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 button */
.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;
}
/* Button styles */
.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 styles */
.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;
}
/* Responsive navbar */
@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 styles */
.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,
.carousel-control-next {
width: 80px;
height: 60px;
position: absolute;
top: 50%;
background: #083be2;
border-radius: 30px;
transition: 0.5s;
opacity: 1;
}
.carousel-control-prev {
left: 0;
border-radius: 0 30px 30px 0;
}
.carousel-control-next {
right: 0;
border-radius: 30px 0 0 30px;
}
/* Carousel indicators */
#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;
}
/* Responsive carousel */
@media (max-width: 768px) {
.carousel-item {
width: 100%;
height: 400px;
}
.carousel-item img {
height: 400px;
}
.carousel-control-next,
.carousel-control-prev {
display: none;
}
}
/* About section */
.about-img {
width: 100%;
height: 70%;
position: relative;
padding: 30px;
overflow: hidden;
}
.about-img::before,
.about-img::after {
content: "";
position: absolute;
left: 0;
width: 100%;
z-index: 1;
border-radius: 10px;
}
.about-img::before {
height: 40%;
top: 0;
background: #2341ec;
}
.about-img::after {
height: 70%;
bottom: 0;
background: #1f5e37;
}
.about-img img {
position: relative;
z-index: 2;
border-radius: 10px;
}
.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;
}
/* Responsive about section */
@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%;
margin-bottom: 20px;
}
}
/* Contact links */
.contact-link a h5,
.contact-link a i {
transition: 0.5s;
}
.contact-link a h5:hover,
.contact-link a i:hover {
color: #083be2 !important;
}
/* Footer styles */
.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;
}
.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;
}
.email-container {
margin-top: 1px;
}
.email-text {
margin-left: 15px;
}
.copyright .text-md-end small {
font-size: 0.6em;
}
/* FontAwesome fonts */
@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;
}
/* Animation */
.animated {
animation-fill-mode: both;
}
/* Bootstrap icons */
.bi {
color: yellow;
font-size: 4em;
}
/* In your css/style.css */
.page-header {
padding: 5rem 0; /* Adjust padding as needed */
text-align: center;
background-color: #343a40; /* Background color */
color: white; /* Text color */
position: relative;
}
.page-header h1 {
font-size: 4rem; /* Adjust font size as needed */
margin-bottom: 1rem;
animation: slideInDown 1s; /* Example animation */
}
@keyframes slideInDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.container-fluid.navbar-bg{
background:orange;/* change to suit*/
}
If it didn’t work for you then either you had a typo or you didn’t clear your cache. CSS files are cached but inline styles won’t be cached.
I’m guessing that your ‘adblock browser’ is blocking one of the scripts and stopping the page from working properly. Unfortunately I know nothing about adblock browsers and I only use the recommended browser on the device I’m using. See if there is a less aggressive option in your setting for the adblock.
Have you tried using the default browser on that device to see if there’s an issue? If there’s no issue in Chrome, Firefox or Safari/IOS then the issue is likely your adblock settings.