.section1 .sec1back{
    display: flex;
    width: 100vw;
    align-items: center;
    justify-content: center;
}
.section1 .sec1back img{
    height: 100vh;
    width: max-content;
}

.section1 .logo{
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    width: 20%;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 2px 2px;
    margin-top: 6vw;
}

.section1{
    position: relative;
    padding-top: 7.7em;
    background: #EC3237;
}

.herotext{
    background: #135C18;
    width: 100%;
    display: flex;
    padding: 0 10%;
    justify-content: center;
    color: #fff;
}

.herotext h1{
    margin-block-start: 0;
    margin-block-end: 0.83em;
    font-size: 3em;
}

.herotext h3{
    font-size: 2em;
    font-weight: 500;
    margin-bottom: 1.5em;
}
.herotext h3 span{
    font-weight: 700;
}

.herotext p{
    font-size: 1.4em;
    line-height: 1.7em;
    color: #fff;
    text-align: justify;
}

.herotext p span{
    font-weight: 700;
}


.sec1bottom{
    display: flex;
    width: 100vw;
    align-items: center;
    justify-content: center;
}

.sec1bottom img{
    height: 20vh;
    width: max-content;
}

.sec2back {
    display: flex;
    width: 100vw;
    align-items: center;
    justify-content: center;
    background: #087F95;
}

.sec2back img{
    width: 100vw;
    position: relative;
}

.sec2text{
    width: 100vw;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background: #087F95;
}

.sec2text p{
    font-size: 1.4em;
    color: #fff;
    padding: 1em 10%;
    text-align: justify;
    line-height: 1.7em;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

.sec2text h1{
    font-size: 3em;
    color: #fff;
    padding: 0 10%;
    text-align: justify;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

.sec2text2 h1{
    font-size: 3em;
    color: #fff;
    padding: 0 10%;
    margin-block-start: 0em;
    margin-block-end: 0em;
}


.sec2text2{
   padding: 2em 0 2em 0;
    background: #135C18;
    width: 100%;
    height: max-content;
}

.sec2text2 p{
    font-size: 1.4em;
    line-height: 1.7em;
    color: #fff;
    padding: 0 10%;
    text-align: justify;
    line-height: 1.7em;
}






.sec3back {
    display: flex;
    width: 100vw;
    align-items: center;
    justify-content: center;
    background: #135C18;
}

.sec3back img{
    width: 100vw;
    position: relative;
}

.section3{
    height: max-content;
    width: max-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}
.section3 .splash{
    position: absolute;
    z-index: 10;
    width: 100%;
}

.slick-slide img{
    width: 80% !important;
}

.section4{
    position: relative;
    background-color: rgba(0,0,0,0);
}

.sec4back{
    width: 100vw;
}
.sec4back img{
    width: 100%;
}

.sec4fr{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3em;
    width: 100vw;
}

.sec4front2 .text{
    margin-bottom: 2em;
}

.awardimage{
    width: 80%;
}

.sec4front3 .image{
    display: flex;
}
.frnchisestamp{
    display: none;
}



.sec4fimage{
    rotate: 7deg;
    position: relative;
    z-index: 1;
}

.sec4fr .text p{
    font-size: 1.4em;
    color: #fff;
    width: 100%;
    line-height: 2em;
    text-align: justify;
}

.sec4fr .text{
    display: flex;
    flex-direction: column;
    width: 50%;
}


.sec4fr .text h1{
    color: #fff;
    font-size: 5em;
    margin-block-start: 0;
    margin-block-end: 0;
}


.se4bk{
    width: 100vw;
}
.se4bk img{
    width: 100%;
}

.sec4front2 {
    flex-direction: column-reverse;
}


.sec4gap1{
    height: 1px;
    background: #66361C;
}
.sec4gap2{
    height: 1px;
    background: #66361C;
}
.sec4gap3{
    height: 1px;
    background: #66361C;
}
.sec4gap{
    height: 1px;
    background: #66361C;
}



footer{
    margin-top: -5em;
    position: relative;
    z-index: 50;
}

.frcbutton{
    background: url(/images/joinbutton.svg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 57px;
    width: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-top: 5%;
    cursor: pointer;
}

@media screen and (max-width : 1700px){

    .sec2text h1{
        font-size: 2.5em;
    }
    .sec2text2 h1{
        font-size: 2.5em;
    }
    .sec2text p{
        font-size: 1.1em;
        line-height: 1.5em;
    }
    .sec2text2 p{
        font-size: 1.1em;
        line-height: 1.5em;
    }

    .herotext p{
        font-size: 1.1em;
        line-height: 1.5em;
    }
    .herotext h1{
        font-size: 2.5em;
    }
    .herotext h3{
        font-size: 1.7em;
    }
    .sec4fr .text h1{
        font-size: 2.2em;
    }


    .sec4fr .text p{
        font-size: 1.1em;
    }

}

@media screen and (max-width : 1500px) {

    .sec2text2 h1{
        font-size: 2.2em;
    }
    .sec2text h1{
        font-size: 2.2em;
    }

    .sec2text p{
        font-size: 1em;
    }
    .sec2text2 p{
        font-size: 1em;
    }

    .herotext p{
        font-size: 1em;
    }
    .herotext h1{
        font-size: 2.2em;
    }
    .herotext h3{
        font-size: 1.5em;
    }
    .sec4fr .text h1{
        font-size: 2em;
    }


    .sec4fr .text p{
        font-size: 1em;
    }
    

}



@media screen and (max-width : 1200px){

    .sec2text h1{
        font-size: 1.3em;
    }

    .sec2text2 h1{
        font-size: 1.3em;
    }

    .sec2text p{
        font-size: 0.8em;
        line-height: 2em;
    }
    .sec2text2 p{
        font-size: 0.8em;
        line-height: 2em;
    }

    .herotext p{
        font-size: 0.8em;
        line-height: 2em;
    }
    .herotext h1{
        font-size: 1.3em;
    }
    .herotext h3{
        font-size: 1em;
    }
    .sec4fr .text h1{
        font-size: 1.3em;
    }


    .sec4fr .text p{
        font-size: 0.8em;
    }

}



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

    .section1 .sec1back img{
        height: max-content;
        width: 100vw;
    }

    .sec1bottom img{
        height: max-content;
        width: 100vw;
    }

    


}






@media screen and (max-width : 880px) {
    
    .section1 .logo{
        margin-top: 5vh;
    }

    .section1 .sec1back{
        overflow: hidden;
        width: 100vw;
    }

    .sec4fr{
        flex-direction: column-reverse;
    }


    .sec4fr .text{
        width: 100%;
        align-items: center;
        justify-content: center;
    }


    .section1 .logo{
        width: 40%;
    }

    #navbar{
        z-index: 60;
    }



}