/*CSS for All Custom Modules*/
.custom-modules--wrapper {
    position: relative;
    margin: 32px 0px; /* Adjust spacing above and below the module as needed */
}

.custom-modules--wrapper + .custom-modules--wrapper {
    margin-top: 0px;
}

.custom-modules-content {
    position: relative;
    z-index: 2;
}

/* Style 1: Background Image with content on top */

/*Mobile*/

.custom-modules--wrapper.style-1 .custom-modules-content h2,
.custom-modules--wrapper.style-1 .custom-modules-content h3,
.custom-modules--wrapper.style-1 .custom-modules-content p {
    color: #2D3956; /* Adjust font color to match the site. Add additional font styles if needed */
}

.custom-modules--wrapper.style-1 .custom-modules-content h2 {
    text-align: center;
}

.custom-modules-content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.foreground-img {
    margin-bottom: 30px;
}

.button.cta-blog-button {
    padding: 12px 28px;
    /* background-color: white; */
    background-color: #2d3956;
    color: #f7f2ee;
    border-radius: 100px;
    /* box-shadow: 0px 3px 20px 0px rgba(107, 153, 203, 0.6); */
    font-size: 18px;
    display: flex;
    align-items: center;
    width: max-content;
    flex-direction: row;
    justify-content: center;
}

.button.cta-blog-button:hover {
    background-color: #6b99ca;
}

.button-arrow {
    width: 20px;
    /* filter: brightness(0) saturate(100%) invert(19%) sepia(14%) saturate(1818%) hue-rotate(184deg) brightness(95%) contrast(87%); */
    filter: brightness(1.6) saturate(90%) invert(100%) sepia(15%) saturate(120%) hue-rotate(35deg) contrast(85%);
    margin-left:5px;
}

.custom-modules--wrapper.style-1 {
    background-color: #E8E8E8;
    border-radius: 15px;
    padding: 30px;
}

.custom-modules--wrapper.style-1 .icon {
    width: 30px;
    display: block;
}

.sub-text {
    text-transform: capitalize;
    font-size: 18px;
    text-align: center;
}

.icon-feature:last-child .sub-text {
    padding-bottom: 0px;
}

.icon-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.custom-modules--wrapper.style-1:before {
    content: '';
    background: url(https://blog.cefaly.com/wp-content/uploads/2025/03/Mask-group-mobile.png) no-repeat center center;
    opacity: .9;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-size: cover;
}

.custom-modules--wrapper.style-1 .bkg-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

.custom-modules--wrapper.style-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}


/*Tablet Up*/
@media(min-width:500px){
    .icon-feature {
        width: 33%;
       }
    
       .icon-features {
        display: flex;
        flex-direction: row;
    }
    
    .sub-text {
        line-height: 25px;
        margin-top: 9px;
    }

    .custom-modules-content {
        align-items: flex-start;
        width: 59%;
        padding-top: 30px;
        padding-left: 30px;
    }

    .custom-modules--wrapper.style-1 .custom-modules-content h2 {
        text-align: left;
    }

    .custom-modules--wrapper.style-1 {
        flex-direction: row;
        flex-wrap: wrap;
        padding:0px;
    }

    .foreground-img {
        margin-bottom: 0px;
        width: 37%;
        padding-top: 30px;
        padding-right: 30px;
    }

    .icon-features {
        width: 100%;
        margin-top: 20px;
        background-color: #d8d8d8;
        padding: 20px;
        border-radius: 0px 0px 15px 15px;
    }

    .sub-text {
        padding-bottom: 0px;
    }

    .custom-modules--wrapper.style-1:before {
        display:none;
    }

}

/*Small Laptops Up*/
@media(min-width:1230px){

    .custom-modules--wrapper.style-1:before {
        content: '';
        background: url(https://blog.cefaly.com/wp-content/uploads/2025/03/Mask-group.png) no-repeat center center;
        opacity: .9;
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        background-size: cover;
    }

    .custom-modules--wrapper.style-1 {
        padding: 20px 50px;
        flex-wrap: nowrap;
    }

    .custom-modules--wrapper.style-1 .custom-modules-content {
        width: 33%;
    }
    
    .custom-modules--wrapper.style-1 .foreground-img {
        width: 24%;
    }
    
    .custom-modules--wrapper.style-1 {
        flex-direction: row;
    }
    
    .custom-modules--wrapper.style-1 .custom-modules-content h2 {
        font-size: 32px;
    }

    .icon-features {
        background-color: transparent;
        padding: 0px;
        border-radius: 0px;
        flex-direction: column;
        width: 30%;
    }

    .icon-feature {
        flex-direction: row;
        width: auto;
    }

    .sub-text {
        font-size: 22px;
        text-align: left;
        margin-left:10px;
        padding-bottom: 25px;
    }

    .custom-modules-content {
        padding: 0px;
        margin-bottom:0px;
    }

    .foreground-img {
        padding: 0px;
    }

    
  
}




/* Style 2: Icon List Layout */

.custom-module--icon-list {
    display: flex;
    flex-wrap: wrap;
}

.custom-module--icon-list .list-item {
    display: flex;
    align-items: center;
    width: calc(50% - 8px);
    margin-bottom: 10px;
}

.custom-module--icon-list .list-item .icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2d3956;
    padding: 10px;
    margin-right: 18px;
}

.custom-module--icon-list .list-item .icon img {
    height: auto;
}

.custom-modules--wrapper.style-2 {
    margin: 0;
}

.custom-module--icon-list .list-item p {
    margin: 0;
    padding: 0 !important;
}


@media(min-width:768px){
    .custom-modules--wrapper.style-2{
        display: flex;
        flex-direction: row-reverse; /*Change to row if you want the image on the left */
        align-items: center;
    }

    /*If you want a different ratio for the image and content, adjust the width percentage */
    .custom-modules--wrapper.style-2 .custom-modules-content,
    .custom-modules--wrapper.style-2 .image-wrapper {
        width: 50%;
    }

    .custom-modules--wrapper.style-2 .image-wrapper {
        height: auto;
        min-height: 250px;/* Adjust height as needed for your project */
    }
}

/* Style 3: Background color with Text No Image */

.custom-modules--wrapper.style-3 {
    background: linear-gradient(15deg, #142850, #14365f, #13476f, #125d80, #107792, #0d96a5, #09b8b4, #04ccb1); /* Change to desired gradient or solid color */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);/* Add shadow effect */
}

.custom-modules--wrapper.style-3 .custom-modules-content {
    padding: 32px;/* Adjust padding as needed for your project */
    text-align: center;/* Adjust text alignment as needed for your project */

}

.custom-modules--wrapper.style-3 .custom-modules-content h2,
.custom-modules--wrapper.style-3 .custom-modules-content h3,
.custom-modules--wrapper.style-3 .custom-modules-content p {
    color: #fff; /* Adjust font color to match the site. Add additional font styles if needed */
}