/* Fonts */
:root {
    --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Raleway",  sans-serif;
    --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #000000; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #ff5400; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #003396; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: #ffffff;  /* The default color of the main navmenu links */
    --nav-hover-color: #ff5400; /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #ff5400; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
    --background-color: #f4f5fe;
    --surface-color: #ffffff;
}

.dark-background {
    --background-color: #003396;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #FFF;
    --contrast-color: #003396;
}

/* Smooth scroll */
:root {
    scroll-behavior: smooth;
}

section h2{
    text-align: center;
    font-weight: 800 !important;
}


.header .bloc_texte_1{
    color: var(--accent-color);
    margin-top:24px;
    font-weight: 500;
    font-family: var(--heading-font);
}

.header .bloc_texte_2{
    color: var(--accent-color);

}

#bloc_accroche_partenaire{
    background-color: #fff;
    padding-bottom:0px;
}
#bloc_accroche_partenaire p,#bloc_mejores p{
    color:#000;
}

#bloc_accroche_partenaire h2,#bloc_mejores h2, #bloc_faq h2{
    color: var(--accent-color);
}

#bloc_garantia4 h3{

}

.alt-features .icon-box .icone img {
    width: 50px  !important;
    height: 50px  !important;
    object-fit: contain !important;
    max-width: none;
}

#about-section.about{
    background-color:#F4F5FE
}
#about-section.about .icon-box {
    background-color: var(--surface-color);
    box-shadow: 0px 5px 90px 0px rgba(0, 0, 0, 0.1);
    padding: 50px 30px;
    transition: all ease-in-out 0.4s;
    height: 100%;
}

#about-section.about .icon-box h3{
    color: var(--contrast-color);
    transition: ease-in-out 0.3s;
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 20px;
    text-align: center;
}

#about-section.about .icon-box p{
    color:#000;
}

#bloc_mejores{
        color: #000;
        background-color: #fff;
        padding: 60px 0;
        scroll-margin-top: 100px;
        overflow: clip;
    text-align:justify;
}
#bloc_mejores h2{
    text-align: center;
}

#bloc_mejores ul {
    list-style: none;
    padding-left: 0;
}


#bloc_mejores ul li {
    padding: 24px 20px;
    box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
    height: 100%;
    color: #000;
    margin:15px;
    display: flex;
    align-items: flex-start;
}

#bloc_mejores ul li::before {
    content: "\2714\FE0E";
    background: color-mix(in srgb, #ff5400, transparent 92%);
    color: #ff5400;
    line-height: 1;
    padding: 4px;
    margin-right: 10px;
    font-size: 24px;
    border-radius: 3px;
    transition: 0.3s;
    flex-shrink: 0;
    margin-top: 2px;
}

#bloc_mejores .cta-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 30px;
    align-items: start;
}

#bloc_mejores .cta-text > * {
    grid-column: 1;
}

#bloc_mejores .cta-text > p:has(img) {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
}

@media (max-width: 990px) {
    #bloc_mejores .cta-text {
        grid-template-columns: 1fr;
    }

    #bloc_mejores .cta-text > p:has(img) {
        grid-column: 1 !important;
        grid-row: auto !important;
        text-align: right;
    }
}


#bloc_mejores .cta-text > p:first-child {
    grid-row: 1;
}

#bloc_mejores .cta-text > ul {
    grid-column: 1;
    grid-row: 2;
}

#bloc_mejores .cta-text > p:nth-of-type(2) {
    grid-row: 3;
}

#bloc_mejores .cta-text > p:has(img) {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
}


#bloc_mejores .cta-text > p:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
}

#bloc_mejores .cta-text > ul {
    grid-column: 1;
    grid-row: 2;
}

#bloc_mejores .cta-text > p:nth-of-type(2) {
    grid-row: 3;
}

#bloc_mejores .cta-text > p:has(img) {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: center;
}


#bloc_cubre{
    background-color: #fff;

}
#bloc_cubre h2{
    text-align: center;
    color: var(--accent-color);
}

#bloc_cubre .cta-text{
    color:#000;

}

#bloc_cubre ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
}


#bloc_cubre ul li{
    padding: 24px 20px;
    box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
    height: 100%;
    color: #000;
    margin:15px;
    display: flex;
    align-items: flex-start;
    width: calc(50% - 30px);


}

#bloc_cubre ul li::before {
    content: "\2714\FE0E";
    background: color-mix(in srgb, #ff5400, transparent 92%);
    color: #ff5400;
    line-height: 1;
    padding: 4px;
    margin-right: 10px;
    font-size: 24px;
    border-radius: 3px;
    transition: 0.3s;
    flex-shrink: 0;
    margin-top: 2px;
}




@media (max-width: 990px) {
    #site-header{
      text-align: center;
    }

    .header .bloc_textes {
        float: none;
    }
}

.bloc_form .lead{
    margin-bottom:0px !important;
}

h4.card-title{
    color:#000;
}