/* Global 
=======================================*/
:root {
    --bs-section: #F3F4F6;
}

*, *::before, *::after {
    box-sizing: border-box;
    scroll-behavior: smooth;
    transition: all .3s ease-in-out !important;
}

html, body{
    overflow-x: hidden;
}

.icon {
    font-size: 1.25rem;
    padding: 10px 15px;
}

.custom-align-center {
    align-items: center !important;
}


::-webkit-scrollbar {
    width: 13px;
    background: var(--bs-dark) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--bs-secondary);
    border-radius: 100px;
    border: 3px solid var(--bs-dark);
}

.custom-shadow-1 {
    box-shadow: 0px 3px 20px rgb(0, 0, 0, 0.09) !important;
}

.custom-shadow-2 {
    box-shadow: 0px 3px 20px rgb(0, 0, 0, 0.1) !important;
}

.custom-shadow-3 {
    box-shadow: 0px 3px 25px rgb(0, 0, 0, 0.15) !important;
}

.custom-hover:hover,
.custom-shadow-1:hover,
.custom-shadow-2:hover,
.custom-shadow-3:hover {
    box-shadow: 0px 3px 10px rgb(0, 0, 0, 0.03) !important;
}

#backup {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 80px;
    z-index: 1000;
}

#backup.backup {
    display: block;
}

/* Global End
=============================================*/

/* Navbar Section 
===============================================*/
.top-section a {
    font-size: .8rem;
}

.navbar-toggler {
    padding: 0.25rem 0.45rem !important;
    border: none !important;
}

.navbar-brand {
    width: 60% !important;
    left: 0;
    height: 100%;
    padding: 35px 0px;
    background: url('../img/Brand-x.png') no-repeat left center/contain;
}

.navbar-brand img {
    width: 100% !important;
}


.nav-link:hover,
.nav-link:focus {
    color: var(--bs-secondary) !important;
}

.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--bs-secondary);
}


/* Sticky Navbar 
---------------------------------------*/
#navbar.sticky-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

#navbar.sticky-nav .navbar-brand {
    left: 0;
    width: 30% !important;
    height: 100%;
    padding: 30px 50px;
    background: url('../img/fuc-logo.png') no-repeat left center/contain;
}

/* Sticky Navbar End 
--------------------------------------*/
#navbar .contact {
    background: var(--bs-section);
}

#navbar .contact a:hover,
header .top-section a:hover {
    color: var(--bs-secondary) !important;
}

header .top-section a:hover.icon {
    color: var(--bs-primary) !important;
    background: var(--bs-light) !important;
}


.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    color: var(--bs-light);
    background-color: var(--bs-secondary);
}

/* Navbar Section End 
================================================*/



/* Main Section 
=================================================*/

/* Hero Secion
------------------------------------------ */
main #hero .carousel-item:nth-child(1) .bd-carousel-img,
main #hero .carousel-item:nth-child(2) .bd-carousel-img,
main #hero .carousel-item:nth-child(3) .bd-carousel-img,
main #lamss .carousel-item:nth-child(1) .bd-carousel-img,
main #lamss .carousel-item:nth-child(2) .bd-carousel-img,
main #lamss .carousel-item:nth-child(3) .bd-carousel-img {
    width: 100% !important;
    height: 100vh !important;
}

main #hero .carousel-item:nth-child(1) .bd-carousel-img {
    background: url('../img/fuc-img/banner1.jpg') no-repeat top center/cover !important;
}

main #hero .carousel-item:nth-child(2) .bd-carousel-img {
    background: url('../img/fuc-img/banner2.jpg') no-repeat top center/cover !important;
}

main #hero .carousel-item:nth-child(3) .bd-carousel-img {
    background: url('../img/fuc-img/banner3.jpg') no-repeat top center/cover !important;
}


/* Light Academy Model School System Hero Background Set up */
main #lamss .carousel-item:nth-child(1) .bd-carousel-img{
    background: url('../img/lamss-img/banner1.jpg') no-repeat top center/cover !important;
}
main #lamss .carousel-item:nth-child(2) .bd-carousel-img{
    background: url('../img/lamss-img/banner2.jpg') no-repeat top center/cover !important;
}
main #lamss .carousel-item:nth-child(3) .bd-carousel-img{
    background: url('../img/lamss-img/banner3.jpg') no-repeat top center/cover !important;
}

.section-overlay {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
}

.section-overlay::before {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bs-dark);
    position: absolute;
    opacity: .5;
    z-index: -1;
}

.section-overlay::after {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bs-primary);
    position: absolute;
    opacity: .5;
    z-index: -3;
}



/* End Hero Section
--------------------------------------- */


/* About Section
------------------------------------*/
/* #about .img {
    width: 100%;
    height: 100%;
    padding: 100px;
    background: url('../img/fuc-img/pas-garley.jpg')no-repeat top center/cover;
} */

/* End About Section
------------------------------ */

/* Program Section
------------------------------------------ */
.programs {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0px;
    background: url('../img/fuc-img/program-section.jpg') no-repeat center center/cover;
    position: fixed;
    /* padding: 100px; */
    z-index: -20;
}
/* 
#programs {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
} */

.programs::after {
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: var(--bs-primary);
    opacity: .8;
    z-index: -9;
}

/* End Program Section
------------------------------------- */

/* Why Us Section
------------------------------------*/
#why-us .img {
    width: 100%;
    height: 100vh;
    /* padding: 100px; */
    background: url('../img/fuc-img/why-us.jpg')no-repeat top center/cover;
}

/* End Why US Section
------------------------------ */

/* Testimonial 
    ------------------------------------- */
#testimonial .testi-card:nth-child(1) .card-img {
    width: 100% !important;
    height: 100% !important;
    background: url('../img/fuc-img/student1.jpg') no-repeat top center/cover !important;
    padding: 30px !important;
}

#testimonial .testi-card:nth-child(2) .card-img {
    width: 100% !important;
    height: 100% !important;
    background: url('../img/fuc-img/student2.jpg') no-repeat top center/cover !important;
    padding: 30px !important;
}

/* End Testimonial 
    ------------------------------------- */

/* Message Section 
    ------------------------------------- */
#footer-message {
    width: 100%;
    height: 100%;
    left: 0px;
    bottom: 0px;
    background: url('../img/fuc-img/message-bg.jpg') no-repeat center center/cover;
    z-index: 1;
    position: relative;
}

#footer-message::after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    background: var(--bs-success);
    opacity: .7;
    z-index: -1;
}

#footer-message::before {
    content: '';
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    background: var(--bs-dark);
    opacity: .3;
    z-index: -1;
}

/* End Message Section 
    ------------------------------------- */

/* Main Section End
==========================================*/


.offcanvas{
    height: 100vh !important;
}
.carousel{
    z-index: 0 !important;
}





/* =========================================
    @media Queries 
==============================================*/
/* @width - 400px 
=============================================*/
@media screen and (min-width: 480px) {
    #navbar.sticky-nav .navbar-brand {
        left: 0;
        width: 60% !important;
        height: 100%;
        padding: 30px 0px;
        background: url('../img/Brand-x.png') no-repeat left center/contain;
    }

}

/* End 
==============*/

/* @Width - 756px 
=======================================*/
@media screen and (min-width: 756px) {
    .navbar-brand {
        left: 0;
        width: 30% !important;
        height: 100%;
        padding: 40px 0px;
        background: url('../img/Brand-x.png') no-repeat left center/contain;
    }

    #navbar.sticky-nav .navbar-brand {
        left: 0;
        width: 35% !important;
        height: 100%;
        padding: 30px 0px;
        background: url('../img/Brand-x.png') no-repeat left center/contain;
    }

    /* Main Section
    ====================================== */

    /* Hero Section 
    ---------------------*/
    main #hero .carousel-item:nth-child(1) .bd-carousel-img {
        width: 100% !important;
        height: 80vh !important;
    }

    main #hero .carousel-item:nth-child(2) .bd-carousel-img {
        width: 100% !important;
        height: 80vh !important;
    }

    main #hero .carousel-item:nth-child(3) .bd-carousel-img {
        width: 100% !important;
        height: 80vh !important;
    }

    /* Hero Section End 
    ------------------------------*/

    /* Main Section End 
    ============================ */
}

/* End 
====================*/

/* @Width - 980px 
====================================*/
@media Screen and (min-width: 980px) {
    .navbar-brand {
        width: 35% !important;
        left: 0;
        height: 100%;
        padding: 35px 0px;
        background: url('../img/Brand-x.png') no-repeat left center/contain;
    }
    .offcanvas{
        height: fit-content !important;
    }
    
}

/* End 
=========================*/