@media (min-width:1400px) and (max-width:1600px) {}

@media (min-width:1200px) and (max-width:1400px) {


    #heroBanner{        

        img{
            margin-bottom: 60px !important;
        }

    }


    .pattern3{
        margin-bottom: 100px !important;

    }

    .menu{

        ul{
            gap: 15px;
        }
        
    }


    .benifitsConceptsWrapper {
        padding: 100px 0 200px 0;

    }

    

}

@media (min-width:1024px) and (max-width:1200px) {


    #heroBanner{        

        img{
            margin-bottom: 60px !important;
        }

    }


    .pattern3{
        margin-bottom: 100px !important;

    }

    .menu{

        ul{
            gap: 15px;
        }
        
    }


    .benifitsConceptsWrapper {
        padding: 100px 0 200px 0;

    }


    #atp{
        .row{

            .col-md-3{
                width: 50%;
            }
        }
    }


    #feature{
        .row{

            .col-md-4{
                width: 50%;
            }
        }
    }


    #pct{
        .row{

            .col-md-3{
                width: 50%;
            }
        }
    }


    #testiominals{
        .row{

            .col-md-4{
                width: 50%;
            }
        }
    }


    #stic{
        .row{

            .col-md-3{
                width: 50%;
            }
        }
    }


    #keym{
        .row{

            .col-md-4{
                width: 100%;
            }
        }
    }

}

@media (min-width:768px) and (max-width:1024px) {


    header {


        .menu {
            display: none;
        }



        .mobile-navigation {
            display: flex !important;


            .offcanvas-header {
                padding: 2rem;
            }


            .reponsive-btn {
                width: 60px;
                height: 60px;
                border-radius: 4px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                cursor: pointer;


                img {
                    width: 100%;
                }
            }


            .menu-mobile {
                display: flex;
                flex-direction: column;

                ul {
                    display: flex;
                    flex-direction: column;
                    list-style: none;

                    li {
                        font-size: 1rem;
                        line-height: 2.2rem;


                        a {
                            text-decoration: none;
                            color: var(--ctm-text-dark);
                        }


                        a:hover {
                            color: var(--ctm-text-secondary);
                        }
                    }
                }
            }


        }

    }


    #heroBanner{
        justify-content: center;

        .row{
            gap:2rem;

            .col-md-6{
                width: 100%;
                text-align: center;
            }
        }

        h1{
            font-size: 2.5rem;
            line-height: 3rem !important;
            text-align: center;


            span{
                font-size: 2rem;
            }
        }

        p{
            text-align: center;
        }


        img{
            margin-bottom: 60px !important;
        }


    }



    .border-end{

        .row{

            .col-md-4, .col-md-8{
                width: 100%;
            }
        }
    }


    .what_offer{

        .row{

            .col-md-4{
                width: 50%;
            }
        }

    }

    .pb-200p{
        padding-bottom: 0;
    }


    .how_it_works_wrapper{

        img{
            margin-top: 0  !important;
        }


        .row{

            .col-md-4{
                width: 100%;
                margin-bottom: 1.5rem;
            }
        }

    }


    .benefit{

        .row{

            .col-md-4{
                width: 100%;
                margin-bottom: 1.5rem;
            }
        }

    }


    .success-story{

        .row{

            .col-md-4, .col-md-8{
                width: 100%;
            }
        }
    }


    .pattern3{
        margin-bottom: 100px !important;

        .row{

            .col-md-4{
                width: 100%;
            }
        }

    }


    .benifitsConceptsWrapper {
        padding: 100px 0;

        .row{

            .col-md-4{
                width: 100%;
                margin-bottom: 90px;
            }
        }

    }


    .letsConnect{


        .row{
            

            .col-md-7, .col-md-5{
                width: 100%;
            }
        }

    }


    #atp{
        .row{

            .col-md-3{
                width: 50%;
            }
        }
    }


    #feature{
        .row{

            .col-md-4{
                width: 50%;
            }
        }
    }


    #pct{
        .row{

            .col-md-3{
                width: 50%;
            }
        }
    }


    #testiominals{
        .row{

            .col-md-4{
                width: 100%;
            }
        }
    }


    #stic{
        .row{

            .col-md-3{
                width: 50%;
            }
        }
    }


    #keym{
        .row{

            .col-md-4{
                width: 100%;
            }
        }
    }


    #cash-sec-1{
        .row{

            .col-md-3{
                width: 50%;
            }
        }
    }


    #cash-sec-2{
        .row{

            .col-md-4{
                width: 100%;
            }
        }
    }


    #disbursement-sec-1{
        .row{

            .col-md-6{
                width: 100%;
            }
        }
    }


}

@media (max-width:768px) {
    


    header {


        .menu {
            display: none;
        }



        .mobile-navigation {
            display: flex !important;


            .offcanvas-header {
                padding: 2rem;
            }


            .reponsive-btn {
                width: 60px;
                height: 60px;
                border-radius: 4px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                cursor: pointer;


                img {
                    width: 100%;
                }
            }


            .menu-mobile {
                display: flex;
                flex-direction: column;

                ul {
                    display: flex;
                    flex-direction: column;
                    list-style: none;

                    li {
                        font-size: 1rem;
                        line-height: 2.2rem;


                        a {
                            text-decoration: none;
                            color: var(--ctm-text-dark);
                        }


                        a:hover {
                            color: var(--ctm-text-secondary);
                        }
                    }
                }
            }


        }

    }



    #heroBanner{

        .row{
            gap:2rem;
        }

        h1{
            font-size: 2rem;
            line-height: 2.7rem !important;


            span{
                font-size: 2rem;
            }
        }


        img{
            margin-bottom: 60px !important;
        }


    }


    .howItWorkBox{
        margin-bottom: 2rem;
    }


    .benefit {


        .col-sm-12{
            margin-bottom: 2rem;
        }

    }


    .pattern3{
        margin-bottom: 0 !important;
    }

    .benifitsConceptsWrapper{
        padding: 100px 25px;
        margin-bottom: 0 !important;


        .col-sm-12{
            margin-bottom: 7rem;
        }
    }


    .bg3{
        flex-direction: column;
        justify-content: center;
    }


    .letsConnect {
        margin-top: 0px;
        margin-bottom: 0px;
        overflow: hidden;
    }


    .footer{
        padding: 100px 25px;

        .row{
            gap: 25px;
        }
    }


    .success-story{
        overflow: hidden;
    }

}

@media (max-width:540px) {


    #pageBanner {
        padding: 4rem 0;


        h1{
            font-size: 1.75rem;
        }
    }

    

    .container {
        padding-left: 25px;
        padding-right: 25px;
    }



    .fs-35, .fs-32{
        font-size: 1.75rem;

        br{
            display: none;
        }
    }





}