/*-- -------------------------- -->
<---          Landing           -->
<--- -------------------------- -*/

.white-space {
    height: 80px; /* Specify the height of the block */
}

#landing {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#landing picture {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#landing img {
    width: 100%;
    height: 100%;
}

#landing .content {
    position: relative;
    text-align: center;
    color: white;
    max-width: 550px;
    margin: auto;
    z-index: 2;
}

#landing .cs-title{
    margin: 25px;
    color: #fff;
}


@media screen and (min-width: 1024px) {

    .white-space {
        height: 140px; /* Specify the height of the block */
    }

    #landing img {
        width: 100%;
        height: 100%;
    }
    
}
/*-- -------------------------- -->
<---        Forms                -->
<--- -------------------------- -*/
#forms {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center; /* center align text on mobile */
}

.forms-container .cs-picture {
    flex: 1;
}

.forms-container .forms-content{
    flex: 1.75;
}


#forms .cs-picture img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

.forms-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    margin-top: 2rem;
    gap: 2rem;
}

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

#forms .underline .cs-text{
    text-decoration: underline;
}

#forms #blue-rectangle{
    position: absolute;
    left: -45px;
}

#forms #blue-trinagle{
    position: absolute;
    top: -20px;
    left: 20%;
}

#forms #purple-circle{
    position: absolute;
    bottom: 15px;
    right: 7%;
}

@media screen and (min-width: 1024px) {

    #forms ul.forms-list {
        list-style: disc;
        padding-left: 1em;
    }

    #forms {
        text-align: left; 
    }

    #forms .cs-container {
        max-width: 1200px;
    }

    .forms-container {
        flex-direction: row;
    }
    .forms-container .cs-picture {
        align-self: flex-start;
    }

    #forms .cs-text,
    #forms .underline .cs-text{
        text-decoration: none;
    }
}

/* <!-- ============================================ -->
<!--                 CTA                       -->
<!-- ============================================ --> */

#cta {
    width: 100%;
    background-color: var(--primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

#cta .cs-title{
    text-align: center;
    color: #FFF;
    margin-bottom: 0;
}

#cta .cta-content {
    width: 90%; /* Adjust width as per your needs */
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 1024px) {
    #cta {
        height: 155px;
    }

    #cta .cta-content {
        flex-direction: row;
        justify-content: space-between;
    }
}