style.scss

nav{
    display: flex;
    justify-content: space-evenly !important;
    flex-wrap: nowrap;
    font-size: 1.2rem;
    .navbar-brand{
        font-size: 2rem;
        color: #00b4d8;
        transition: 0.2s;
    }
    .navbar-brand:hover{
        color: #00b4d8;
        transform: scale(1.1);
    }
    .nav-link{
        color: #00b4d8;
        transition: 0.2s;
    }
    .nav-link:hover{
        color: #00b4d8;
        transform: scale(1.1);
    }
    #navbarNav{
        margin-left: 5vw;
        justify-content: space-between;
    }
}

#CalltoAction {
    height: 100vh;
    width: 100vw;
    position: relative; /* 添加相对定位 */
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(./pics/Pic-2.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    // z-index: -1; /* 将此元素放在底层 */
    .Description{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 20vh;
        @media (max-width: 768px){
            height: 10vh;
        }
        .h1{
            font-size: 5rem;
            color: white;
            margin: 0;
            @media (max-width: 768px){
                font-size: 3rem;
            }
        }
    }
}
.Title {
    display: flex;
    flex-direction: column;
    align-items: start;
    z-index: 1;
    margin-left: 10vw;
    .h1{
        font-size: 7rem;
        color: white;
        margin: 0;
    }
    p{
        font-size: 2rem;
        color: white;
        margin: 0;
    }
}
#FullPageSlogan{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(./pics/Pic-1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    .h1{
        color: white;
        font-size: 7rem;
        @media (max-width: 992px){
            font-size: 6rem;
        }
        @media(max-width: 768px){
            font-size: 6rem;
        }
        @media (max-width: 576px){
            font-size: 2rem;
        }
    }
}
#Slogan{
    margin-top: 10vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    background:linear-gradient(115deg, #F00 50%, url(./pics/PlaneIntro.jpg) 50%);;
    .row{
        margin: 2rem 0;
    };
    .Description{
        @media (max-width: 992px){
            margin-top: 2rem;
        }
        display: flex;
        flex-direction: column;
        align-self: center;
    }
}
#OurGoal{
    margin-top: 10vh;
    .Description{
        animation: fly-in 1s ease-in;
    }
    @keyframes fly-in {
        from {
            opacity: 0;
            transform: translateX(-100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .container{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        img{
            width: 30vw;
        }
        .Description{
            width: 40vw;
        }
    }
}
#Product{
    margin-top: 2rem;
    .container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .Items{
            margin-top: 2rem;
            display: flex;
            flex-direction: row;
            // justify-content: space-around;
            align-items: stretch;
            .card{
                margin-top: 2rem;
                height: 100%;
                border-radius: 20px;
                img{
                    padding: 2rem;
                }
            }
        }
    }
    
}
#Goal{
    margin-top: 10vh;
    margin-bottom: 10vh;
    width: 100vw;
    .Img{
        display: flex;
        align-self: center;
        
    }
    .Description{
        display: flex;
        flex-direction: column;
        align-self: center;
    }
}

#About{
    height: 100vh;
    background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.7)), url(./pics/Pic-4.jpg);
    @media screen and (max-width: 992px){
        background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,1)), url(./pics/Pic-4.jpg);
    }
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    z-index: 0;
    .Description{
        color: white;
        margin-left: 10vw;
        margin-right: 10vw;
        .h1{
            font-size: 5rem;
            @media screen and (max-width: 992px){
                font-size: 3rem;
            }
        }
        .normal{
            font-size: 1.3rem;
            @media screen and (max-width: 992px){
                font-size: 1rem;
                line-height: 2rem;
            }
        }
        z-index: 1;
        line-height: 2rem;
    }

}
img{
    border-radius: 20px;
}