@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

*
{
    margin: 0;
    padding : 0;
    box-sizing: border-box;
}

body
{
    overflow-x: hidden;
    width: 100%;
}

.about-banner
{   
    max-width: 100%;
    height: 30vh;
    background-image: url('/images/img/banner/b1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title1
{
    color: #fff;
    font-size: 2rem;
    font-weight: 400;
    font-family: 'Dancing Script', cursive;
    letter-spacing: 4px;
    cursor: default;
}

.banner-1
{   
    display: flex;
    align-items: center;
    justify-content: center;
    gap:2rem;
}

.banner-1 img
{
    height: 500px;
    width: 600px;
    margin-left: 5rem;
}

.banner-1-info
{   
    display: flex;
    flex-direction: column;
    gap:1rem;
    cursor: default;
}

.banner-1-info h2
{
    font-size: 2.5rem;
    color: #222;
}

.banner-1-info h4
{   
    font-size: 1.2rem;
    width: 80%;
    font-weight: 300;
}

.about-app
{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:2rem;
    margin-top: 4rem;
}

.about-app h2
{
    font-size: 2rem;
    font-family: Roboto, sans-serif;
    cursor: default;
}

.about-app h2 a
{
    color: rgb(255, 72, 0);
}

.about-video
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-video video
{
    max-height: 450px;
    max-width: 800px;
    box-shadow: 5px 5px 5px 5px gray;
}


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



}

@media screen and (max-width: 1024px){
    .banner-1-info h4
    {
        width: 90%;
    }
}

@media screen and (max-width: 768px){
    
.banner-1
{       
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:2rem;
}

.banner-1 img
{
    height: 300px;
    width: 400px;
    margin:0;
}

.banner-1-info
{   
    display: flex;
    flex-direction: column;
    gap:1rem;
}

.banner-1-info h2
{
    font-size: 2rem;
    color: #222;
}

.banner-1-info h4
{   
    font-size: 1rem;
    width: 90%;
    font-weight: 300;
}

}

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

.banner-1
{   
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: 2rem;
}

.banner-1 img
{
    height: 250px;
    width: 260px;
    object-fit: contain;
}

.banner-1-info
{   
    display: flex;
    flex-direction: column;
    gap:1rem;
    margin: 0;
}

.banner-1-info h2
{
    font-size: 20px;
    color: #222;
}

.banner-1-info h4
{   
    font-size: 15px;
    width: 90%;
    font-weight: 300;
}

.feature
{   
    min-height: 100vh;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20rem;
}

.newsletter
{
    margin-top: 14rem;
}

}

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


    .title1
    {
        color: #fff;
        font-size: 1.5rem;
        font-weight: 400;
        font-family: 'Dancing Script', cursive;
        letter-spacing: 4px;
        cursor: default;
    }

    
.banner-1
{   
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap:2rem;
}

.banner-1 img
{
    height: 250px;
    width: 260px;
    object-fit: contain;
    margin: 0;
}

.banner-1-info
{   
    display: flex;
    flex-direction: column;
    gap:0.5rem;
}

.banner-1-info h2
{
    font-size: 20px;
    color: #222;
}

.banner-1-info h4
{   
    font-size: 15px;
    width: 90%;
    font-weight: 300;
}

}

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


    .title1
    {
        color: #fff;
        font-size: 1.5rem;
        font-weight: 400;
        font-family: 'Dancing Script', cursive;
        letter-spacing: 4px;
        cursor: default;
    }

.banner-1
{   
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap:1rem;
}

.banner-1 img
{
    height: 250px;
    width: 260px;
    object-fit: contain;
    margin: 0;
}

.banner-1-info
{   
    display: flex;
    flex-direction: column;
    gap:0.5rem;
}

.banner-1-info h2
{
    font-size: 20px;
    color: #222;
}

.banner-1-info h4
{   
    font-size: 15px;
    width: 90%;
    font-weight: 300;
}


    

}