.composition2-container{
    padding-top: 3em;
    padding-bottom: 3em;

    padding-left: 10.5%;
    padding-right: 10.5%;  
    display: flex;
    flex-direction: column;
    gap: 2em;

}
.composition2-container *{
    text-transform: uppercase;
}
.composition2-container .row1{
    display: flex;
    flex-direction: row;
    gap:3em
}
.composition2-container-right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.composition2-container-right-text{
    /*padding-left:3em;
    padding-right:9.6em;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap:1.5em;
    width: 73%;
    margin-left: 10%;
}
.composition2-container-right-text p{
    font-family: 'brother-xs', sans-serif !important;
    font-size: 1.7rem;
    font-weight: 300;
}


.composition2-container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.composition2-container-bttns {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    padding-left: 3em;
}
.row1-col2{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.row1-col2 div:first-child,.row2 div:first-child{
    /*padding-left: 3em;*/
    /*padding-right: 10em; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 40%;
        
}
.homepage .row1-col2 div:first-child{
    gap:2em
}


/* the home page we need to display different  */
.homepage .row1-col2 div:first-child,.homepage.homepage .row2 div:first-child {
    justify-content: center;
    /*height: 100%;*/
    height: unset;
}
.row1-col2 div:first-child{
    height: unset;
    gap:6.1em
}

.homepage .row1-col2 div:first-child{
    height: 100%;
}

.astounding .row2 div:first-child {
    /*width: 37.4em;*/
    width:100%;
    height: unset;
}

.row1-col2 div:first-child h2{
    text-transform: capitalize;
    width: 90%;
    margin-left: 10%;
}
.row1-col2 div:last-child, .row2 div{
    height: 26.4em;
}

.row1-col2 div:first-child p, .row2 p, .row2 h3{
    text-transform: uppercase;
    font-family: 'brother-xs', sans-serif !important;
    font-size: 1.67rem;
    font-weight: 300 !important;
    letter-spacing: 0.055em;
    width: 88%;
    margin-left: 7%;
    font-weight: 300;
    font-style: normal;
}

.row2 div:first-child{
    width: 100%;
    height: unset;
}

.aboutUsContainer .row1-col2  .mpercent  p, .aboutUsContainer .row2  .col  p {
    text-transform: initial !important;
    font-family: 'futura-pt', sans-serif !important;
    font-size: 1rem;
    width: 80%;
}

.seculed .composition2-container{
    background-color: #F7F7F7;
}
.seculed h2{
    font-size: 3.3rem !important;
    text-transform: capitalize;
}
.seculed .composition2-container-right-text{
    justify-content: space-between;
    height: 40%;
}
.seculed .composition2-container-bttns{
    padding-left: 0;
}

.composition3-container-text {
    justify-content: center !important;
}
.perfectbackdrops .composition2-container-bttns{
    padding-left: 0;
}
.composition2-text-button-container{
    display: flex;
    flex-direction: column;
    gap:2em;
}

@media only screen and (max-width: 1200px) {
    .composition2-container{
        padding-bottom: 2.5em;
    }
    .composition2-container-bttns {
        display: flex;
        flex-direction: column;
    }
    .row1-col2 div:last-child, .row2 div{
        height: unset;
    }
    .composition1-container-bttns{
        display: flex;
        flex-direction: column;        
    }
    .bttn{
        width: unset;
    }
    .composition2-container-right{
        gap:2em
    }
    .composition2-container{
        padding-top:0;
    }
    .perfectbackdrops .composition2-container-right-text{
        margin-left:0;
       margin-right: 0;
       width: 100%;
    }
    
    .row1-col2 div:first-child {
        gap:1em
    }

    .seculed .composition2-container {
        padding-top: 5.5%;
    }
    .seculed .composition2-container h2{
        padding-top: 10.5%;
    }
    .seculed .composition2-container-right-text {
        width: 100%;
        margin-left: unset;
        gap:.6em;
    }
    .seculed .composition3-container .row2 {
        flex-direction: column;
    }
    .seculed .composition2-container img {
        display: none;
    }

}