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

@media (max-width: 1395px) {}

@media (max-width: 1300px) {}
@media (max-height: 630px) {

    /* .video-bg .content{
        justify-content: ;
        margin-top: 110px;
    } */
    .video-bg .content h1{
        font-size: 30px;
    }
}

@media (max-width: 1200px) {
    .nav-bar .main-container {
        width: 95%;
    }

    .nav-bar img {
        width: 100px;
        height: auto;
    }

    .change-profile img{
        width: 30px;
        height: 30px;
    }
    /* card article */
    .card-article {
        flex: 0 0 calc(100% / 3);
    }

    /* card article */
}

@media (max-width:1024px) {
    .heading-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    .heading-wrapper .ctm-btn{
       display: none;
    }
    .ctm-btn-wrapper{
        display: flex;
    }



    .footer {
    & .main-container {
        .footer-logo {


            display: block;
            margin-bottom: 20px;
        }

    }

}


    .footer {
    & .main-container {
        & .footer-content {
            grid-template-columns: 1fr 1fr;
            .footer-logo {
                display: none;
            }
        }
    }
}



}

@media (max-width: 992px) {
    .nav-bar {
        height: 75px;
    }
.sub-header,
    .hero{
        margin-top: 75px;
    }

    .video-bg {
        min-height: calc(100vh - 75px);
    }
    .nav-bar .main-container {
        width: 90%;
    }

    .nav-bar .btn-nav-res>a,
    .nav-bar .element {

        display: none;
    }

    .lang-btn,
    .menu-div {
        display: flex !important;
    }





    .video-bg .content {
        width: 85%;
        justify-content: center;
    }


    .video-bg .sec-header {
        padding: 5px;
    }

    .video-bg .sec-header h2 {
        font-size: 12px;

    }

    .video-bg .content h1 {
        font-size: 20px;
    }



    .about-us {

        .about-us-img {
            margin: 0 auto;
        }

    }


    .articles-slider .slider-track .card-article {
        flex: 0 0 calc(100% / 2);
    }

    .contact-info {
        flex-direction: row;
        align-items: start;
        justify-content: center;
        margin-top: 20px;
    }

    .contact-form {
        padding: 30px;
    }

    .end-page {
        text-align: center;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 15px;
    }
}

@media (max-width: 768px) {

    section {
        padding: 20px 0;
    }

    .about-us {

        .about-us-img {
            margin-left: auto;
            margin-right: 0;
        }

    }


    .our-numbers {

        .content {


            width: 95%;

        }


    }

    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-left {
        flex-direction: column;
        gap: 10px;
    }






    /* managers */



    .family-item {
        width: 150px;
        height: 190px;
    }

    .family-item:before {

        width: 160px;
        height: 215px;

    }

    .family-item:after {

        width: 20px;
        height: 20px;

    }


    .association-members-item .img-container {
        width: 120px;
        height: 150px;
    }
}

@media (max-width: 576px) {



    .about-us {
        & .about-us-img {
            & .img-container {
                img {
                    border-radius: 16px;
                    border: 4px solid var(--color-white);
                    width: 280px;
                    height: 320px;
                    object-fit: cover;
                }



                .img-before {
                    top: -100px;

                }
            }



            .text-content {

                width: 49%;
                margin: auto 0;
                padding: 0;



                h2 {
                    font-size: 12px;
                }

                p {
                    font-size: 50px;
                }
            }
        }
    }




    .articles-slider .slider-track .card-article {
        flex: 0 0 100%;
    }


    /*  */

    .manager-item {

        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }

    .manager-item .text-content {
        flex-wrap: wrap;
        gap: 10px;

    }




    .manager-item .text-content .text-item:nth-child(1){
        align-items: center;
        justify-content: center;
        width: 100%;
    }



    .about-seca .row .family-container:first-child{
        align-items: center;
        padding:20px ;

     }
     .about-seca .row .family-container:last-child{
         align-items: center;
         padding:20px  ;

      }

}

    @media (max-width: 450px) {




        .about-us {
            & .about-us-img {
                & .img-container {

                    img {
                        width: 232px;
                        height: 267px;
                    }


                    .img-before {
                        top: -100px;
                        width: 190px;
                        height: 121px;
                    }
                }



                .text-content {

                    width: 42%;
                    margin: auto 0;
                    padding: 0;



                    h2 {
                        font-size: 11px;
                    }

                    p {
                        font-size: 44px;
                    }
                }
            }
        }





        .our-numbers {
            .row {
                flex-direction: column;
            }


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

        }




        /*  */



        .family-item:before {
            width: 143px;
            height: 204px;
        }


        .family-item {
            width: 140px;
            height: 180px;
        }



        .family .items .family-item {


            width: 100px;
            height: 140px;
        }


        .family .items .family-item:after {
            width: 14px;
            height: 14px;
        }

        .family .items .family-item:before {
            width: 100px;
            height: 157px;
        }
    }

    @media (max-width: 375px) {

        .about-us {
            & .about-us-img {
                & .img-container {

                    img {
                        width: 210px;
                        height: 240px;
                    }


                    .img-before {
                        top: -80px;
                        width: 160px;
                        height: 110px;
                    }
                }



                .text-content {

                    width: 45%;
                    margin: auto 0;
                    padding: 0;



                    h2 {
                        font-size: 11px;
                    }

                    p {
                        font-size: 35px;
                    }
                }
            }
        }



    }

    @media (max-width: 450px) {}


    @media (max-width:425px) {
        .sign-hello.register,
        .sign-hello.login,
        .login-logo{
            display: flex;
        }


        .container-login-register form {
            padding: 50px 0px 0px ;
            height: 85%;
            gap: 0px;
        }

        .login-box-content {
            gap: 0px;
            margin-top: 40px;
        }

        .login-box form .form-group, .register-box form .form-group, .forger-pass .forget-pass-card .main-container .form-group{
            margin-top: 20px;
            width: 90%;
        }

        .container-login-register button {
            font-size: 8px;
            padding: 0px;
            margin-top: 30px;
        }

        .container-login-register p,
        .container-login-register a {
            font-size: 12px;
            margin: 10px 0;
        }

        .hello-box-login h2,
        .hello-box-register h2,
        .hello-box-register h2 {
            margin-bottom: 0;
        }

        .hello-box-login,
        .hello-box-register,
        .hello-box-register {
            gap: 0;
        }

        .login-box form .form-group input::placeholder,
        .register-box form .form-group input::placeholder,
        .forger-pass .forget-pass-card .main-container .form-group input::placeholder {
            font-size: 10px;
        }


        .sign-hello {
            display: flex;
            height: 30%;
            text-decoration: underline;
        }


        /* .login-box,
        .register-box,
        .login-box form,
        .register-box form {
            gap: 0px !important;
        } */

        .toggle-container {
            display: none;
        }

        .sign-in,
        .sign-up {
            width: 100%;
        }

        .container-login-register.active .sign-up {
            transform: translateX(0%);
        }
    }