:root {
    --primary-color: #6478D3;
    --secondary-color: #5268CA;
    --background-color: #22242A;
    --accent-color: #F7B579;
    --text-color: #FFFFFF;
    --transparent-color: #FFFFFF00;
    --light-background-color: #F1F3F8;
    --highlight-color: #FFFFFFD1;
    --shadow-color: #22283170;
    --border-color: #E0E0E6;
    --extra-color: #F1F8FC;
    --primary-font: "Kumbh Sans", sans-serif;
}
@media (max-width: 575.98px) { 
    
}

@media (max-width: 767.98px) { 
    h1{
        font-size: 48px;
    }
    h2{
        font-size: 38px;
    }
    p{
        font-size: 16px;
    }
    header.desktop{
        display: none;
    }
    header.mobile{
        display: block;
    }
    #toggle{
        display: flex;
        justify-content: flex-end;
    } 
    #toggle a i{
        font-size: 26px;
    }
    .menu-toggle{
        position:fixed;
        width: 75%;
        height: 100%;
        left: -100%;
        top: 0;
        background-color: var(--background-color);
        transition: all 1s ease;
        z-index: 999;
        /* display: none; */
    }
    .menu-overlay{
        position: fixed;
        width: 100%;
        height: 100%;
        left: -100%;
        top: 0;
        background-color: var(--background-color);
        opacity: 0.5;
        transition: all 0.5s ease;
        z-index: 998;
    }
    .menu-overlay.active{
        left: 0;
    }

    .menu-toggle.active{
        left: 0;
    }
    .menu-toggle .logo{
        padding: 16px;
    }
    nav ul li a span{
        color: var(--text-color);
        text-align: center;
        font-size: 18px;
    }
    footer nav ul li a span{
        color: var(--background-color);
        text-align: center;
        font-size: 16px;
    }
    .banner{
        padding: 36px  0px 0px;
    }
    .banner .text p{
        font-size: 20px;
    }
    .btn-img{
        width: 150px;
    }
    .banner img{
        width: 100%;
        margin: 0;
        margin-top: 26px;
    }


    /* app-features */
    .app-features{
        padding-top: 60px;
    }
    .app-features .card{
        margin-left:26px;
        margin-right:26px;
    }
    .card-title{
        font-size: 22px;
    }
    .connections{
        margin-top: 26px;
    }
    .connections , .connections-main{
        flex-direction: column;
    }


    .short-title{
        margin-bottom: 16px;
    }



    .inclusive-community .section-title{
        padding: 30px;
    }

    .main-div {
        flex-direction: column;
    }
    .main-div img{
        width: 100%;
    }

    .do-it-now .section-title{
        padding:46px 16px;
    }
    .do-it-now .section-title h2{
        width: 100%;
        font-size: 32px;
        margin-bottom: 16px;
    }
    .appstore{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    } 
    .f-logo ,  .social-media{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    a:has(.f-logo){
        display: flex;
        align-items: center;
        justify-content: center;

    }
    .f-logo {
        flex-direction: column;
        margin: 0 auto;
    }
    footer .f-logo p{
        display: block;
        text-align: center;
    }

 }


@media (max-width: 991.98px) {
    
    h1{
        font-size: 48px;
    }
    h2{
        font-size: 42px;
    }
    p{
        font-size: 16px;
    }

    .banner img{
        width: 100%;
        margin: 0;
        margin-top: 26px;
    }
    .banner .text p{
     font-size: 18px;
    }
    .banner .text .btn{
        padding: 8px 20px;
    }


    .connections{
        margin-top: 26px;
    }
    .inclusive-community .section-title{
        padding: 26px;
    }
    .inclusive-community .main-div img{
        width: 100%;
    }
    .inclusive-community .card{
        padding:8px;
    }

    .do-it-now .section-title{
        padding: 60px 26px;
    }
    .do-it-now .section-title h2{
        width: 100%;
    }
}


@media (max-width: 1199.98px) {
    .btn-img{
        width: 200px;
    }
    .banner img{
        width: 100%;
    }
    .connections {
        margin-top: 26px;
    }
 
}


@media (max-width: 1399.98px) { 

    .connections-one img, .connections-two img{
        width: 100%;
    }
    .inclusive-community .main-div img{
        width: 100%;
    }
 }