/* Branding Variables - Sales Advogados */
:root {
    --sales-navy: #0F1F3D;
    --sales-gold: #E0C985;
    --sales-gold-accent: #C6A953;
    --sales-white: #ffffff;
    --sales-font-serif: 'Playfair Display', serif;
    --sales-font-sans: 'Montserrat', sans-serif; /* Common for modern law firms */
}

/* Main Section Wrapper */
.sales-hero-section {
    background-color: var(--sales-navy);
    padding: 100px 10% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 400px;
}

/* Label: "PROFISSIONAIS" */
.sales-pre-title h5{
    color: var(--sales-gold-accent) !important;
    font-family: var(--sales-font-sans);
    font-size: 13px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: -10px !important;
    padding-bottom: 0 !important; /* Space between label and main title */
}

/* Heading: "Nossa Equipe" */
.sales-main-title h1{
    color: var(--sales-gold) !important;
    font-family: var(--sales-font-serif);
    font-size: clamp(32px, 5vw, 64px) !important; /* Smooth scaling font */
    font-weight: 600;
    margin-bottom: 24px !important;
    line-height: 1.1;
    margin-top: 0 !important;
}

/* Paragraph Text */
.sales-description {
    color: var(--sales-gold) !important;
    font-family: var(--sales-font-sans);
    font-size: 18px !important;
    max-width: 550px;
    line-height: 1.7;
    opacity: 0.85;
}

/* Responsive adjustments for Tablets/Mobile */
@media (max-width: 768px) {
    .sales-hero-section {
        padding: 60px 5% !important;
        text-align: left;
    }
}

/* --- Updated Grid Wrapper (now using Flex for centering) --- */
.sales-team-grid {
    display: flex;
    flex-wrap: wrap; /* Allows cards to drop to the next line */
    justify-content: center; /* This is what centers the last odd card! */
    gap: 30px;
    padding: 80px 10%;
    max-width: 1200px; /* Adjust based on your design */
    margin: 0 auto; /* Centers the whole container on the page */
}

/* --- The Card Adjustment --- */
.sales-lawyer-card {
    /* This tells the card: 
       - Grow if needed (1)
       - Shrink if needed (1)
       - Target a base width of 400px (adjust this to fit your image size) */
    flex: 0 1 400px; 
    
    background-color: #ffffff;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    overflow: -moz-hidden-unscrollable;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}


/* Mobile Tweak: Ensure cards take full width on small screens */
@media (max-width: 767px) {
    .sales-lawyer-card {
        flex: 1 1 100%;
    }
}
/* --- Fix: The Image (Removed nesting error) --- */
.sales-lawyer-photo {
    width: 100%;
    margin-bottom: 15px !important; /* Space between photo and Name */
}

.sales-lawyer-photo img {
    width: 100%;
    object-fit: cover;
    object-position: top; 
    margin: 0 !important; 
    padding: 0 !important;
}

/* --- Global Reset for Elementor Widgets inside the card --- */
/* This removes the default bottom margin Elementor adds to every widget */
.sales-lawyer-card .elementor-widget h3 {
    margin-bottom: 0 !important;
}

/* --- Typography: Tightened Spacing --- */
.sales-lawyer-name {
    color: var(--sales-navy) !important;
    font-family: var(--sales-font-serif);
    font-size: 22px !important;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* Very tight to the role */
    line-height: 1.2 !important;
    padding-bottom: 12px !important; /* Remove any default padding */
}

.sales-lawyer-role {
    color: var(--sales-gold) !important;
    font-family: var(--sales-font-sans);
    font-size: 13px !important;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0 !important; /* Tight to the OAB */
    margin-top: 0px !important;
}

.sales-lawyer-oab {
    color: #8898aa !important;
    font-family: var(--sales-font-sans);
    font-size: 11px !important;
    display: block;
    margin-bottom: 12px !important; /* Small gap before the bio starts */
}

/* Update your selector to target the text inside the widget wrapper */
/* 1. Add horizontal padding to the outer widget wrapper */
.sales-lawyer-bio {
    padding: 0 30px !important;
    width: 100%;
    margin-bottom: 25px !important; /* This creates the space at the bottom of the card */
}

/* 2. Target the actual text inside the widget */
.sales-lawyer-bio .elementor-text-editor,
.sales-lawyer-bio p {
    color: #525f7f !important;
    font-family: var(--sales-font-sans) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important; /* Prevents double-spacing at the bottom */
}
/* ================================================================ */
/* The Background Container */
.sales-cta-section {
    background-color: var(--sales-navy);
    padding: 80px 20px !important;
    text-align: center;
}

/* The Main Gold Title */
.sales-cta-title h2{
    color: var(--sales-gold) !important;
    font-family: var(--sales-font-serif);
    font-size: clamp(28px, 4vw, 36px) !important; /* Responsive scaling */
    font-weight: 600;
    margin-bottom: 15px !important;
}

/* The Subtitle Text */
.sales-cta-subtitle {
    color: var(--sales-gold) !important;
    font-family: var(--sales-font-sans);
    font-size: 16px !important;
    font-weight: 400;
    margin-bottom: 0 !important;
    opacity: 0.9; /* Slightly softens the color to match your design */
}

/* The Button Styling */
.sales-cta-button .elementor-button {
    background-color: var(--sales-gold-accent) !important;
    color: var(--sales-navy) !important;
    font-family: var(--sales-font-sans);
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 15px 32px !important;
    border-radius: 5px !important;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px; /* Space between the icon and text */
}

/* Button Hover Effect */
.sales-cta-button .elementor-button:hover {
    background-color: #ffffff !important; /* Changes to white on hover */
    color: var(--sales-navy) !important;
    transform: translateY(-2px); /* Slight lift effect */
}

/* Make sure the icon matches the text color */
.sales-cta-button .elementor-button-icon,
.sales-cta-button .elementor-button-icon svg {
    fill: var(--sales-navy) !important;
}