/* -------------------------------------------------------------------------- */
/* 0. Professional Typography */
/* -------------------------------------------------------------------------- */

body {
    font-family: 'Poppins', sans-serif;
    color: #333; /* Darker text for readability */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Slightly bolder headings for visual impact */
}

/* -------------------------------------------------------------------------- */
/* 1. Brand Color & Bootstrap Overrides */
/* -------------------------------------------------------------------------- */

:root {
    --brilho-cyan: #008b8b; /* Your primary brand color */
    --brilho-cyan-dark: #006666; /* Darker shade for hovers/active state */
    --brilho-light-bg: #f8f9fa; /* Light grey background for section separation */
}

/* Override the default Bootstrap 'info' color to match the brand color */
.text-info {
    color: var(--brilho-cyan) !important;
}

/* Style the primary button to use the brand color consistently */
.btn-info {
    background-color: var(--brilho-cyan) !important;
    border-color: var(--brilho-cyan) !important;
    color: white !important; /* Ensure white text on button */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-info:hover {
    background-color: var(--brilho-cyan-dark) !important;
    border-color: var(--brilho-cyan-dark) !important;
}

/* -------------------------------------------------------------------------- */
/* 2. Navigation Styling (Center Alignment & Logo Fix) */
/* -------------------------------------------------------------------------- */

.navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1); 
    background-color: white !important; 
}

/* FIX: Set definite size for the logo */
.navbar-brand img {
    width: 150px; /* Reduced width */
    height: auto; 
    padding-top: 0; 
    padding-bottom: 0;
}

/* FIX: Align the navigation links to the center */
.navbar-collapse {
    justify-content: center;
}

/* FIX: Clear vertical padding from the list item to rely solely on .nav-link padding */
.navbar-nav .nav-item {
    padding-top: 0 !important; 
    padding-bottom: 0 !important;
}

.nav-link {
    font-weight: 500;
    display: block;
    
    /* Set generous, consistent vertical padding for all links */
    padding-top: 10px !important; 
    padding-bottom: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    
    /* Add a transparent border to ALL links to reserve space and prevent jumping */
    border-bottom: 2px solid transparent; 
    
    box-sizing: border-box; 
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--brilho-cyan) !important;
    /* Apply the brand color border only on hover/active */
    border-bottom: 2px solid var(--brilho-cyan); 
}


/* -------------------------------------------------------------------------- */
/* 3. Hero/Carousel Styling (FIXED FOR CLARITY) */
/* -------------------------------------------------------------------------- */

#home {
    min-height: 80vh;
    padding-top: 56px; /* Space for the fixed navbar */
}

/* Set a fixed height for the carousel container to ensure all slides show */
#carouselExampleDark {
    height: 75vh; 
}

/* Ensure the image inside the carousel item takes up the full, consistent height */
.carousel-inner .carousel-item img {
    height: 75vh; /* Match the carousel container height */
    object-fit: cover; 
    /* Increased brightness for better image visibility */
    filter: brightness(0.95); 
}


/* Full-image overlay for maximum text readability */
.carousel-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* INCREASED DARKNESS FOR TEXT CLARITY */
    background: rgba(0, 0, 0, 0.4); 
}

/* Ensure caption text is centered and readable */
.carousel-caption {
    z-index: 10;
    background: none; 
    color: #fff;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8); /* Text shadow for maximum readability */
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
}

.carousel-caption h5 {
    font-size: 2.5rem; 
}


/* -------------------------------------------------------------------------- */
/* 4. General Section and Layout Styling */
/* -------------------------------------------------------------------------- */

/* Use alternating backgrounds for clear section separation */
section:nth-child(even) {
    background-color: var(--brilho-light-bg);
}

/* Consistent, reduced vertical padding for all sections */
section {
    padding-top: 60px !important; 
    padding-bottom: 60px !important;
}

/* -------------------------------------------------------------------------- */
/* 5. Services Card Styling (Professional Look) */
/* -------------------------------------------------------------------------- */

#services .card {
    border: none; /* Remove distracting border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Use a soft shadow instead */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px; /* Subtle rounding */
}

#services .card:hover {
    transform: translateY(-8px); /* More pronounced lift on hover */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); /* Darker shadow on hover */
}

/* -------------------------------------------------------------------------- */
/* 6. Gallery & Image Styling */
/* -------------------------------------------------------------------------- */

.img-fluid,
.card-img-top,
.w-100 {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    object-fit: cover;
    border-radius: 6px; /* Soft rounding for professionalism */
}

#gallery img {
    height: 280px; /* Ensures consistent gallery height */
    width: 100%;
    object-fit: cover;
}

/* -------------------------------------------------------------------------- */
/* 7. Testimonials Styling */
/* -------------------------------------------------------------------------- */

#testimonials blockquote {
    font-size: 1.25rem;
    font-style: italic;
    color: #555;
    padding: 20px;
    border-left: 5px solid var(--brilho-cyan); /* Brand color accent on quotes */
    background-color: #fcfcfc;
    border-radius: 4px;
}