/* header, common elements are styled in style-services.css file */

.hero-section::after{
    content: "43 PREMIUM";
}

/* styling individual sections */
.section-description{
    padding: 10px 0px 40px 100px;
}
.premium-section > .wrapper-leaf:nth-child(1){
    width: 30%;
    transform: rotate(50deg);
    top: 10%;
    right: -15%;
}
.premium-section > .wrapper-leaf:nth-child(2){
    width: 20%;
    bottom: 0;
    left: -12%;
}
.superior-section > .wrapper-leaf:nth-child(1){
    width: 30%;
    transform: rotateX(180deg) rotateY(180deg) rotateZ(-15deg);
    top: 5%;
    left: -20%;
}
.superior-section > .wrapper-leaf:nth-child(2){
    width: 20%;
    bottom: 0;
    right: -13.5%;
}
.suite-section > .wrapper-leaf{
    width: 20%;
    transform: rotate(45deg);
    top: 40%;
    left: -11%;
}

/* media queries */
/* mobile - 0px to 768px */ 
@media screen and (max-width: 768px) {
    
    /* styling individual sections */
    .section-description{
        padding: 0px;
        padding-bottom: 40px;
    }
    .premium-section > .wrapper-leaf:nth-child(1){
        width: 40%;
        top: 5%;
        right: -18%;
    }
    .premium-section > .wrapper-leaf:nth-child(2){
        width: 30%;
        bottom: 3%;
        left: -16%;
    }
    .superior-section > .wrapper-leaf:nth-child(1){
        width: 40%;
        transform: rotateX(-180deg);
        top: 0;
        left: unset;
        right: -15%;
    }
    .superior-section > .wrapper-leaf:nth-child(2){
        width: 30%;
        right: -15%;
    }
    .suite-section > .wrapper-leaf{
        width: 30%;
        top: 9%;
        left: -15%;
    }
}