/* --- MAIN CONTENT LAYOUT --- */

.content-sections {
    /* Mimics the Column widget structure */
    display: flex;
    flex-direction: column;
    width: 100%;
}


/* Example CTA styling */
.cta-background {
    background-color: #f0f8ff; 
    text-align: center;
    /* 🔑 FLUID PADDING: 50px 20px -> 3.125rem 1.25rem */
    padding: 3.125rem 1.25rem;
}

.cta-button {
    display: inline-block;
    /* 🔑 FLUID PADDING: 10px 20px -> 0.625rem 1.25rem */
    padding: 0.625rem 1.25rem;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    /* 🔑 FLUID MARGIN: 15px -> 0.9375rem */
    margin-top: 0.9375rem;
}

/* --- FLOATING ACTION BUTTONS (FABS) --- */

/* Base positioning, using REM for proportional distance from edges */
#contact-fab-container {
    position: fixed; /* Crucial for FAB behavior */
    /* 🔑 FLUID POSITIONING: 20px -> 1.25rem */
    right: 1.25rem; 
    bottom: 1.25rem; 
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 🔑 FLUID GAP: 12px -> 0.75rem */
    gap: 0.75rem;
    z-index: 1000;
}


/* Base style for all FABs (mini: true) */
.fab {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 🔑 FLUID SIZE: 40px -> 2.5rem */
    width: 2.5rem; 
    height: 2.5rem;
    border-radius: 50%; /* Circle shape */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.fab:hover {
    transform: scale(1.1);
}

/* Styling for the icons and images inside the FABs */
.fab img {
    /* 🔑 FLUID SIZE: 20px -> 1.25rem */
    width: 1.25rem;
    height: 1.25rem;
}

.fab i.material-icons {
    color: white;
    /* 🔑 FLUID FONT SIZE: 20px -> 1.25rem */
    font-size: 1.25rem;
}

/* Specific FAB colors (Unchanged) */
.whatsapp-fab { 
    background-color: #25D366; 
} 
.instagram-fab { 
    background-color: #C13584; 
} 
.facebook-fab { 
    background-color: #1877F2; 
}
.call-fab { 
    background-color: #007bff; 
}


/* --- Responsive Media Queries for FABs --- */

/* 🔑 Mobile Optimization: Make FABs slightly smaller and closer to the corner (PORTRAIT) */
@media (max-width: 500px) {
    #contact-fab-container {
        /* Reduce gap */
        gap: 0.625rem; /* 10px */
        /* Move closer to the edge */
        right: 0.75rem; /* 12px */
        bottom: 0.75rem; /* 12px */
    }

    .fab {
        /* Reduce FAB size slightly on very small screens */
        width: 2.25rem; /* 36px */
        height: 2.25rem; /* 36px */
    }
    
    .fab img,
    .fab i.material-icons {
        /* Reduce icon size proportionally */
        width: 1rem; /* 16px */
        height: 1rem; /* 16px */
        font-size: 1rem; /* 16px */
    }
}

/* 🔑 MOBILE LANDSCAPE FIX: Adjust FAB positioning for rotated phones */
/* Targets small screens (up to 900px) in landscape orientation. */
@media (max-width: 900px) and (orientation: landscape) {
    #contact-fab-container {
        /* Push the container closer to the edge and slightly smaller 
           to minimize vertical screen space usage */
        right: 0.5rem; /* 8px */
        bottom: 0.5rem; /* 8px */
        gap: 0.5rem; /* 8px */
    }

    .fab {
        /* Keep the slightly smaller size from the mobile optimization */
        width: 2.25rem; 
        height: 2.25rem;
    }
}