/* Force the body to take up the full height of the screen */
html, body {
	height: 100%;
	margin: 0;
	scroll-behavior: smooth;
}
body {
	display: flex;
	flex-direction: column;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* This tells the main content area to grow and fill all available space, pushing the footer down */
main {
	flex: 1 0 auto;
}
/* Ensure the footer doesn't shrink */
footer {
	flex-shrink: 0;
}	
footer .text-lightgrey {
	color: lightgrey;
}
footer .text-decoration-none:hover, .text-yellow {
	color: #FFDE00;
}
.navbar-dark {
	background-color: #000000 !important;
}
.navbar-dark .logo-text {
	color: #FFDE00;
	font-size: clamp(1.5rem, 6vw, 1.75rem);
}
/* Active link text color */
.navbar-dark .navbar-nav .nav-link.active {
    color: #FFDE00 !important;
    font-weight: 600;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: darkgrey; 
    color: #FFDE00 !important;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: #000 !important;
    color: #FFDE00 !important;
    font-weight: bold;
}
div.pre-footer {
	background-color: #FFDE00;
}
div.pre-footer h5 {
	font-size: clamp(1rem, 4vw, 1.3rem);
}
div.text-justify {
  text-align: justify;
  text-justify: inter-word; /* This helps distribute space more naturally between words */
}
#btn-back-to-top {
    transition: transform 0.2s ease-in-out, opacity 0.2s;
}
#btn-back-to-top:hover {
    transform: scale(1.1); /* Slight grow on desktop */
}
#btn-back-to-top:active {
    transform: scale(0.9); /* Haptic feel on mobile click */
}
.btn-whatsapp {
    background-color: #25D366 !important;
    border-color: #25D366 !important;
    color: white !important;
    font-weight: 600;
}
.btn-whatsapp:hover {
    background-color: #128C7E !important; /* A slightly darker WhatsApp green */
}
/* Elements will start invisible and 20px lower */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}
/* This class will be added by JavaScript when the user scrolls */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.google-gradient-icon {
    background: linear-gradient(45deg, #4285F4, #34A853, #FBBC05, #EA4335);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.2rem; 
	margin-left: 0.5rem;
}

/* Mobile Height (Phones) */
@media (max-width: 768px) {
	.carousel-item img {
		height: auto !important;
		aspect-ratio: 16 / 9 !important; /* Stays perfectly proportional on all phones */
	}
	footer .list-unstyled {
		padding-left: clamp(1rem, 4vw, 1.25rem);
	}			
}