/* CSS starts */
:root{
    --primary-headline-color: #000;
    --primary-text-color: #000;
    --primary-border-color: #E0E7F0;
    --primary-headline-font: ;
    --white: #fff;
}
/*Hero Section*/
#home-copy .cmp-text > .heading{
    font-size: 55px;
    font-weight: 400;
    letter-spacing: 3px;;
    line-height: 60px;
    margin-left: 1%;
    margin-right: 1%;
    padding-top: 2%;;
}
#home-copy .text.aem-GridColumn > #title{ 
    background-color: var(--white);   
    border-radius: 0 0 20px 20px;
    margin-top: -62px;
}
#home-copy .cmp-text > .after-heading{
    font-size: 18px;
    line-height: 30px;
    margin: 0 8px;
}
#home-copy #main-section .aem-Grid.aem-Grid--12.aem-Grid--default--12{
    .container.responsivegrid:first-child{
        #hero-section > .aem-Grid.aem-Grid--12.aem-Grid--default--12{
            padding: 0 4%;
        }
    }
    .container.responsivegrid:nth-child(2){
        padding: 0 8px;
    }
}
#home-copy #hero-section{
    background-image: url('/content/dam/intelligentcontent/unbranded/ic-lbp/us/en/images/test/mobile/Rectangle.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
    display: flex;
    gap: 0;
}
#home-copy #hero-section::before{
    background: linear-gradient(to right,#BFB79E,#FBCEA8,#C5CB96,#6CC08E,#E1D1D7,#B5CEC9);
    content: "";
    height: 10px;
    left: 0;
    position: absolute;
    width: 100%;
}
#home-copy .cmp-image{
    position: relative;
    z-index: 2;
}
#home-copy .cmp-image__image.cmp-image--mobile{
    position: relative;
    z-index: 2;
}
#home-copy .cmp-image__image.cmp-image--desktop{
    position: relative;
    z-index: 2;
}
/*
.image.aem-GridColumn .cmp-image::before{
    border: 2px solid #ED9499;
    border-radius: 208px 208px 20px 20px;
    content: '';
    height: 100%;
    pointer-events: none;
    position: absolute;
    right: 8px;
    top: 9px;
    width: 100%;
    z-index: 1;   
}
    */
/* Main Body / Resources Items */
#home-copy .cmp-text > .subtitle{
    font-size: 42px;
    font-weight: 400;
    letter-spacing: 3px;
    line-height: 55px;
    margin: 0 auto;
    text-align: center;
}
#home-copy .aem-Grid.aem-Grid--12.aem-Grid--default--12{
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0 auto;      
}
#home-copy #item-wrapper{
    border: 4px solid var(--primary-border-color);
    border-radius: 40px;
    height: 100%;
}
#home-copy .cmp-text > .item-heading{
    font-size: 45px;
    font-weight: 400;
    letter-spacing: 3px;
    line-height: 55px;
    margin-top: 0;
    text-align: center;
}
#home-copy .cmp-text > .item-copy{
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 30px;
    margin: 0 7px;
    text-align: center;
}
/* Pink Gradient Buttons*/
#home-copy .aem-Grid.aem-Grid--12 > .button.pink-gradient{
    border-radius: 30px;
    height: 40px;
    margin: 0 auto;
    max-width: 50%;
}
#home-copy .button.pink-gradient > .cmp-button{
    background-color: transparent;
    display: block;
    font-size: 18px;
    padding: 10px 6px;
    width: 100%;
}
/*Desktop -- 992px*/
@media (min-width: 992px){
    /*Hero Section General*/
    #home-copy #hero-section > .aem-Grid.aem-Grid--12.aem-Grid--default--12{
        flex-direction: row-reverse;
        gap: 0;
        margin: 34px 0;
    }
    /*Heading*/
    #home-copy .text.aem-GridColumn > #title{
        border-radius: 20px 0 0 20px;
        display: flex;
        flex-direction: column;
        height: 99%;
        justify-content: center;
        margin-right: -50%;
        margin-top: 0;
    }  
    /*After heading */
    #home-copy .cmp-text > .after-heading{
        max-width: 60%;
    }
    #main-wrapper > .aem-Grid.aem-Grid--12.aem-Grid--default--12{
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 5%;
    }
    /*Main Section General*/
    #home-copy #main-wrapper > .aem-Grid.aem-Grid--12.aem-Grid--default--12 {
        .container.responsivegrid{
            max-width: 45%;
        }
        .container.responsivegrid:last-child{
            max-width: 100%;
            padding: 0 4%;
            .button.pink-gradient{
                max-width: 20%;
            }
            #item-wrapper .aem-Grid.aem-Grid--12.aem-Grid--default--12 {
                padding: 0 3%;
            }
        }
    }
    /*Pink Gradient Buttons*/
    #home-copy .aem-Grid.aem-Grid--12 > .button.pink-gradient{
        max-width: 30%;
    }
    #home-copy #button-wrapper .aem-Grid.aem-Grid--12.aem-Grid--default--12{
        flex-direction: row;

        .button.pink-gradient{
            max-width: 15%;
        }
    }  
}