@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

/* Banner Hero Section Title (Always Size 9) */
h2.text-size9.title[data-editable] {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;  /* Bold */
    font-size: 60px !important;   /* Banner/Main Title Size */
    letter-spacing: -0.5px !important;  /* Slightly tight spacing */
    text-transform: capitalize !important;  /* Title Case */
    line-height: 1.2 !important;  /* Good for large headings */
    margin: 0 !important;  /* Reset default margins */
}

/* Other Titles (Size 7) */
h2.text-size7.title[data-editable] {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;  /* Bold */
    font-size: 42px !important;   /* Smaller Title Size */
    letter-spacing: -0.5px !important;  /* Consistent with banner */
    text-transform: capitalize !important;  /* Title Case */
    line-height: 1.3 !important;  /* Relaxed spacing */
    margin: 0 !important;  /* Reset default margins */
} 

/* Subtitle (Site-wide H3 with text-size3) */
h3.text-size3.sub-title[data-editable] {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;  /* Semi-Bold for subtitle emphasis */
    font-size: 24px !important;   /* Consistent subtitle size */
    letter-spacing: 0px !important;  /* Neutral spacing for clarity */
    text-transform: uppercase !important;  /* Adds emphasis */
    line-height: 1.4 !important;  /* Optimized for readability */
    margin: 0 !important;  /* Reset default margins */
} 


@media (max-width: 768px) {
    h3.text-size3.sub-title[data-editable] {
        font-size: 20px !important;
    }
}


/* Banner Hero Title - Responsive */
@media (max-width: 768px) {
    h2.text-size9.title[data-editable] {
        font-size: 48px !important;  /* Adjusted from 60px */
        line-height: 1.3 !important; /* Slightly more relaxed line height for readability */
    }
}

/* Other Titles - Responsive */
@media (max-width: 768px) {
    h2.text-size7.title[data-editable] {
        font-size: 32px !important;  /* Adjusted from 42px */
        line-height: 1.4 !important; /* Improved readability on smaller screens */
    }
} 
/* Base Button Style */
a.fluid-button.button.default-style.outlined {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;               /* Bold for strong CTA presence */
    letter-spacing: 1px;            /* Clean spacing between letters */
    text-transform: uppercase;      /* Ensures all caps */
    padding: 12px 24px;
    border: 2px solid #00A89B;      /* Teal Green border */
    background-color: transparent;  /* Transparent for outlined look */
    color: #00A89B;                 /* Teal Green text */
    cursor: pointer;
    transition: all 0.4s ease;      /* Smooth transitions for hover effects */
    position: relative;             /* Required for hover overlay animation */
    overflow: hidden;               /* Hide overflow for smooth hover effect */
    display: inline-flex;           /* Aligns the label properly */
    align-items: center;
    justify-content: center;
    text-decoration: none;          /* Removes default link underline */
}

/* Styling for the Label Inside the Button */
a.fluid-button.button.default-style.outlined label {
    pointer-events: none;           /* Prevents label from interfering with click events */
    transition: letter-spacing 0.4s ease;  /* Smooth transition for letter spacing on hover */
}

/* Hover Effect: Black Background with Teal Lettering */
a.fluid-button.button.default-style.outlined:hover {
    background-color: #0D0D0D;      /* Black background on hover */
    color: #FFFFFF;                 /* Teal Green text */
    letter-spacing: 2px;            /* Expands letter spacing on hover */
    transition: all 0.4s ease;      /* Smooth transition */
    border-color: #0D0D0D;          /* Matches the black background */
}

/* Hover Effect on Label */
a.fluid-button.button.default-style.outlined:hover label {
    letter-spacing: 2px;            /* Expands letters slightly */
}

/* Optional: Underline Hover Fill Effect (Now Black to Match Hover State) */
a.fluid-button.button.default-style.outlined::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0;
    background: #0D0D0D;            /* Black fill effect */
    z-index: -1;                    /* Places it behind the button text */
    transition: all 0.4s ease-in-out;
}

/* Trigger Fill Animation on Hover */
a.fluid-button.button.default-style.outlined:hover::after {
    height: 100%;                   /* Creates the “rising” black fill effect */
} 


/* Match H1 Styling to H2 (Home Page) */
.text-size8.title {
    font-family: 'Montserrat', sans-serif;  /* Assuming Montserrat is the primary font */
    font-weight: bold;                      /* Matches the bold styling of H2 */
    font-size: 60px;                        /* Same size as the H2 (adjust if needed) */
    letter-spacing: -0.5px;                 /* Consistent letter spacing */
    text-transform: titlecase;              /* Consistent text transformation */
    color: var(--g-accent-color);           /* Inherits the global accent color */
    line-height: 1.2;                       /* Balanced spacing for readability */
    margin-bottom: 20px;                    /* Space below for separation from CTAs */
}

/* Responsive Adjustments (Optional for Mobile Consistency) */
@media (max-width: 768px) {
    .text-size8.title {
        font-size: 48px;                    /* Adjust for tablets */
    }
}

@media (max-width: 480px) {
    .text-size8.title {
        font-size: 40px;                    /* Optimized for mobile screens */
    }
} 

/* Match H1 (text-size8 title) to H2 (text-size7 title) */
h1.text-size8.title[data-editable] {
    font-family: 'Montserrat', sans-serif !important;  /* Consistent Font */
    font-weight: 700 !important;                        /* Bold Font Weight */
    font-size: 42px !important;                         /* Match H2 Font Size */
    letter-spacing: -0.5px !important;                  /* Tight Letter Spacing */
    text-transform: capitalize !important;              /* Title Case Formatting */
    line-height: 1.3 !important;                        /* Relaxed Line Spacing */
    margin: 0 !important;                               /* Remove Default Margins */
    color: var(--g-accent-color) !important;            /* Apply Accent Color */
} 

/* Base Button Style */
button.button.btn.submit-button {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;               
    letter-spacing: 1px;            
    text-transform: uppercase;      
    padding: 12px 24px;
    border: 2px solid #00A89B;      
    background-color: transparent;  
    color: #00A89B;                 
    cursor: pointer;
    transition: all 0.4s ease;      
    position: relative;             /* Required for hover overlay animation */
    overflow: hidden;               
    display: inline-flex;           
    align-items: center;
    justify-content: center;
    text-decoration: none;          
    border-radius: 0px;             
    z-index: 1;                     /* Ensures text is above the ::after */
}

/* Styling for the Label Inside the Button */
button.button.btn.submit-button .label {
    pointer-events: none;           
    transition: letter-spacing 0.4s ease;  
    z-index: 2;                     /* Keep label above the hover effect */
    position: relative;             /* Ensure stacking context */
}

/* Hover Effect: Black Background with White Text */
button.button.btn.submit-button:hover {
    background-color: #0D0D0D;      
    color: #FFFFFF;                 /* Changed to white for consistency */
    letter-spacing: 2px;            
    transition: all 0.4s ease;      
    border-color: #0D0D0D;          
}

/* Hover Effect on Label */
button.button.btn.submit-button:hover .label {
    letter-spacing: 2px;            
    color: #FFFFFF;                 /* Ensures label text turns white */
}

/* Underline Hover Fill Effect */
button.button.btn.submit-button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0;
    background: #0D0D0D;            
    z-index: 0;                     /* Ensure it stays behind the text */
    transition: all 0.4s ease-in-out;
}

/* Trigger Fill Animation on Hover */
button.button.btn.submit-button:hover::after {
    height: 100%;                   
}

h1.text-size7.title[data-editable] {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;           /* Bold */
    font-size: 42px !important;              /* Matching text-size7 title size */
    letter-spacing: -0.5px !important;       /* Consistent spacing */
    text-transform: capitalize !important;   /* Title Case */
    line-height: 1.3 !important;             /* Relaxed spacing */
    margin: 0 !important;                    /* Reset margins */
}


h2.text-size3.sub-title[data-editable] {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;           /* Semi-Bold */
    font-size: 24px !important;              /* Consistent subtitle size */
    letter-spacing: 0px !important;          /* Neutral spacing */
    text-transform: uppercase !important;    /* Emphasis */
    line-height: 1.4 !important;             /* Optimized for readability */
    margin: 0 !important;                    /* Reset margins */
}