/********** Front page styles *****************/
.sH2{
    margin: var(--spacing2) auto var(--spacing1) auto;
    width: 85%;
    text-align: center;
    font-size: 2.5rem;
}

.sH3{
    margin: var(--spacing1) auto 0 auto;
    text-align: center;
    font-size: 1.5rem;
}

.hero-section{
    display: flex;
    margin-top: var(--nav-height);
    padding: var(--spacing2) 0 var(--spacing3) 0 ;
    background-color: var(--tertiary-color);
}

.hero{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 85%;
    height: auto;
    margin: 0 auto;
    background: rgba(170, 170, 170, 0.2); 
    backdrop-filter: blur(10px);         
    border: 1px solid rgba(240, 240, 240, 0.226);
    border-radius: 15px;                
    box-shadow: 0 1px 10px rgba(226, 221, 221, 0.384); 
}

.Lhero{
    margin: 0 auto;
    padding: var(--spacing1);
}
.Lhero h1{
    text-align: center;
}

.Rhero {
    position: relative;
    height: 25vh;
    width: 100%;
}

.Rhero video{
    width: 100%;
    height: 100%;
}

#fp-s1{
    background-color: var(--main-color);
}


#fp-s1 p{
    margin: var(--spacing1) auto var(--spacing3) auto;
    width: 80%;
    text-align: center;
    font-size: 1rem;
}

#fp-s1 .cols{
    justify-content: center;
    margin: 0 auto;
}

#fp-s2{
    padding-top: var(--spacing2);
    background-color: var(--Secondary-color);
}

#fp-s2 .svg{
 margin: var(--spacing2);
}

#fp-s2 p{
    margin: var(--spacing1) auto;
    width: 90%;
    text-align: center;
}

.rows.s2r img{
    width: 10%;
    filter: brightness(0) invert(1);
}

.rows.s2r .cols{
    width: 90%;
    margin-top: var(--spacing1);
}

.sImg{
    width: 90%;
    margin: var(--spacing1) auto;
    border: 1px solid rgba(240, 240, 240, 0.226);
    border-radius: 30px;     
}

.svg{
    margin: var(--spacing1) auto 0 auto;
    height: 40px;
    width: 40px !important;
    filter: brightness(0) invert(1);
}

#fp-s3{
    background-color: var(--tertiary-color);
}

#fp-s3 p{
    text-align: center;
}