/**** Front Page *****/

.banner{
    height: 45vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: var(--nav-height);
    overflow: hidden;
}

.banner::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: url(/wp-content/themes/nuwmind_template/images/HuguBackground.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.7;
    overflow: hidden;

}

.banner img{
    width: 60%;
}

.banner h1{
    text-align: center;
    margin: var(--spacing1);
    margin-bottom: 0;
    font-size:2rem;
    text-shadow:  2px 2px 8px var(--font-color);
    font-weight: bold;
    color: var(--secondary-color);
}

h2.accent{
    color: var(--green-font);
    font-size: 1.5rem !important;
    margin: 0;
   
}

.fp-s1{
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom right, var(--main-color) 30%, #fff);
}
.fp-s1 div{
    padding: var(--spacing1);
    width: 80%;
}
.fp-s1 div p{
    text-align: left;
    margin: 0;
    font-size: .85rem;
}
.fp-s1 div h1{
    text-align: left;
}

.fp-s1 img{
    margin-top: var(--spacing1);
    width: 40%;
    height: 100%;
}

.banner2{
    background-image: url(/wp-content/themes/nuwmind_template/images/Mango.gif);
    height: 50vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(110%), blur(30%);
}

.fp-s2{
    padding: var(--spacing1);
    display: flex;
    flex-direction: column;
    background: linear-gradient();
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right,#bae6ff ,  var(--main-color) , #bae6ff );

}

.fp-s2 .butn{
    width: 35%;
    margin: 0;
}

.p-heading{
    color: var(--secondary-color);
    font-weight: bold;
    margin: 0;
    text-align: center;
}


.fp-s2 h2{
    font-size: 1.4rem;
    text-align: center;
    margin: 0 auto var(--spacing1) auto;


}
.fp-s2 ul{
    display: flex;
    padding: 0;
}

.fp-s2 li{
    list-style: none;
    width: 33%;
    display: flex;
    flex-direction: column;
}
.fp-s2 li img{
   height: 70px;
   width: 70px;
   margin: 0 auto;
}

.fp-s2 li h3{
    font-size: 1rem;
    font-weight: bold;
    color: var(--green-font);
    text-align: center;
}

.fp-s2 li p{
    font-size: .85rem;
    text-align: center;
}

.fp-s3{
    height: 30vh;
    padding-top: var(--spacing1);
    margin: 0 auto;
    overflow: hidden;
    cursor: pointer;
     
}
.wrapper{
    display: flex;
    padding-block: var(--spacing1);
    gap: var(--spacing2);
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;

    
}
.items{
    list-style: none;
    animation: scrollLeft 30s linear infinite; 
    justify-content: space-between;
    gap: var(--spacing2);
    display: flex;
    flex-shrink: 0;
    min-width: 100%;
    user-select: none;
    -webkit-user-select: none;
}

.items li{
    width: 300px;
}

.fp-s3 :active .items{
animation-play-state: paused;
}

@keyframes scrollLeft{
    
    to{
        transform: translateX(-100%);
    }
}