/*CSS for All Custom Modules*/
.custom-modules--wrapper {
    position: relative;
    margin: 60px 0px;
}

.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 {
    height: 500px;
    background-color: #26316A;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
}

.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: #fff; /* Adjust font color to match the site. Add additional font styles if needed */
}

.custom-modules--wrapper {
    position: relative;
    margin: 60px 0px;
}

.custom-modules-content {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-modules--wrapper.style-1 .custom-modules-content h2 {
    text-align: center;
    margin-bottom: 5px;
    text-transform: uppercase;
    margin-top: 0px;
}

.custom-modules--wrapper.style-1 .custom-modules-content p {
    margin-bottom: 14px;
    line-height: 23px;
    text-align: center;
}

.custom-modules-content .button {
    background-color: white;
    color: #e21f26;
}

.custom-modules--wrapper.style-1 .bkg-image {
    height: 26%;
    position: absolute;
    bottom: -38px;
    right: -2px;
    z-index: 2;
    border: solid 3px #fff;
    box-shadow: 0px 0px 20px #00000033;
}

.second-image {
    height: auto;
    width: 92%;
    position: absolute;
    right: 13px;
    bottom: 25px;
    flex: 0 0 50%;
    border: solid 3px #fff;
    box-shadow: 0px 0px 20px #00000033;
    transform: scaleX(-1);
}

@media(min-width:580px){
    .second-image {
        width: 74%;
        right: 149px;
        bottom: 20px;
    }

    .custom-modules--wrapper.style-1 .bkg-image {
        height: 36%;
        bottom: -18px;
        right: 16px;
    }

}

/*Tablet*/
@media(min-width:768px){
    .custom-modules--wrapper.style-1 .bkg-image {
        right: -12px;
    }

    .custom-modules--wrapper.style-1 .bkg-image {
        height: 26%;
        bottom: -38px;
        right: -2px;
    }
    
    .second-image {
        width: 92%;
        right: 13px;
        bottom: 25px;
    }

}

@media(min-width:1025px){
    .custom-modules--wrapper.style-1 {
        height: 600px;
    }
}

/*Laptop*/
@media(min-width:1200px){
    .custom-modules--wrapper.style-1 {
        height: auto;
        flex-direction: row;
    }

    .custom-modules-content {
        align-items: flex-start;
    }

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

    .custom-modules--wrapper.style-1 .bkg-image {
        height: 54%;
        bottom: -34px;
        right: -15px;
    }

    .second-image {
        width: 51%;
        right: 32px;
        bottom: 54px;
    }

}


/* Style 2: 50/50 Layout */
.custom-modules--wrapper.style-2 {
    background: #fff; /* Change to desired background color */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Add shadow effect */
}

.custom-modules--wrapper.style-2 .image-wrapper {
    position: relative;
    height: 200px; /* Adjust height as needed for your project */
    overflow: hidden;

}

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

.custom-modules--wrapper.style-2 .custom-modules-content {
    padding: 32px; /* Adjust padding as needed for your project */
}

@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 */
}