/* 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 !important;
}
footer .text-decoration-none:hover, .text-yellow {
	color: #FFDE00 !important;
}
.navbar-dark {
	background-color: #000000 !important;
}
.navbar-dark .nav-link {
	color: rgba(255, 255, 255, 0.55);
}
.navbar-dark .nav-link:hover {
	color: rgba(255, 255, 255, 0.75) !important;
}
.dropdown .dropdown-item {
	color: rgba(255, 255, 255, 0.55);
}
.navbar-dark .logo-text {
	color: #FFDE00 !important;
	font-size: clamp(1.5rem, 6vw, 1.75rem) !important;
}
/* 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 */
}
footer a.btn-outline-primary:hover {
	color: #fff !important;
}
.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;
}

/* 1. Global Dialog Container (The Modal Box) */
.new-theme .ui-dialog {
    border: 2px solid #FFDE00 !important; /* Yellow Border */
    padding: 0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

/* 2. The Header (Titlebar) */
.new-theme .ui-dialog-titlebar {
    background: #000000 !important;
    color: #FFDE00 !important; /* Yellow Text */
    border: none !important;
    border-bottom: 1px solid #333 !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 1rem;
    border-radius: 0;
}

/* 3. The Close Button (X) */
.new-theme .ui-dialog-titlebar-close {
    border: none !important;
    background: #FFDE00 !important;
}

/* 4. The Body (Content Area) */
.new-theme .ui-dialog-content {
    color: #ffffff !important;
    padding: 1.5rem !important;
}

/* 5. The Footer (Button Area) */
.new-theme .ui-dialog-buttonpane {
    border-top: 1px solid #333 !important;
    margin-top: 0 !important;
    padding: 0.25rem 0.75rem !important;
	font-size: 0.9rem !important;
}

/* 7. The Dark Overlay (Dimming the background) */
.new-theme .ui-widget-overlay {
    background: #000000 !important;
    opacity: 0.85 !important;
}

/* Style for inputs inside the login box */
.new-theme .login-box input.text {
    padding: 5px 8px !important;
    margin-bottom: 10px;
    border-radius: 4px;
	height: 30px !important;
	width: 225px !important;
}

/* 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);
	}			
}