/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/



.flipCardSectionFlipped .dnd-column {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.16);
}

@media screen and (max-width: 1024px) {
    .heroSection {
        background-image: none !important;
        background-color: #1B1E20;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .heroSection h1 {
        font-size: 55px !important;
        line-height: 60px !important;
    }
}
}

@media screen and (max-width: 768px) {
    .heroSection {
        background-image: none !important;
        background-color: #1B1E20;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .heroSection h1 {
        font-size: 45px !important;
        line-height: 50px !important;
    }
}


/* Fix for full-width sections in HubSpot template */

/* Target the body container to remove any max-width constraints */
.body-container-wrapper {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
    /* Prevents horizontal scrollbar */
}

/* Remove container-fluid padding */
.body-container.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Override max-width-section-centering to be truly full width */
.body_section-row-0-max-width-section-centering,
.body_section-row-1-max-width-section-centering,
[class*="body_section-row-"][class*="-max-width-section-centering"] {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Make dnd-section full width */
.dnd-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* Add proper content padding inside the sections */
.dnd-section>.row-fluid {
    max-width: 1200px;
    /* Or whatever your content max-width should be */
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Special handling for hero section that needs full bleed */
.heroSection {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 0 !important;
}

/* Hero section content padding */
.heroSection>.row-fluid {
    max-width: 1170px;
    margin: 0 auto;
    padding: 120px 15px;
}

/* Ensure nested rows don't have extra padding */
.dnd-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
}