@media screen and (max-width:576px) {
    /* Small phone  */

/* ===**** .header_menu_small_phone ==== */
    #header{
        width: 100%;
        position: relative;
    }
    .header_banner_waper{
        width: 100%;
    }
    #Toggle{
        width: 35px;
        height: 35px;
        border:1px solid var(--darkblue);
        border-radius:2px;
        cursor: pointer;
        display: flex;
        flex-wrap:wrap;
        justify-content: center;
        align-content: center;
    }

    .header_menu_log>img{
        width: 70px;
        height:70px;
    }
    #Toggle>span{
        display: flex;
        width: 80%;
        height: 0;
        border:2px solid var(--darkblue);
        margin-top:4px;
        border-radius:7px;
    }


    .header_menu_NavLinks{
        width:100%;
        height: 110vh;
        position: fixed;
        top: 0;left: 0;
        z-index:1000;
        overflow-y: scroll;
    }
    .header_menu_NavLinks::-webkit-scrollbar{
        width: 5px;
    }
    .header_menu_NavLinks::-webkit-scrollbar-thumb{
        background-color:var(--darkblue);
    }
    
    .header_logo{
        height: 70px;
    }

    .header_menu_NavLinks_Item{
        width: 90%;
        min-height:300px;
        background-color:#333;
        margin:0 auto;
        overflow:hidden;
        transition:.2s;
    }
    .header_menu_NavLinks_Item>section{
        width: 100%;
        height: 50px;
    }


    .navigationBar>li{
        height: 40px;
        color:var(--white);
        font-size:17px;
        overflow: hidden;
        transition:.4s;
    }
    .navigationBar>li>a{
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        text-transform: capitalize;
        color:var(--white);
        padding-left:10px;
    }

    .DropMenu{
        min-height:230px;
    }
    .DropMenu_item{
        margin-top:8px;
    }
    .DropMenu_item>li{
        width: 100%;
        height: 40px;
    }
    .DropMenu_item>li>a{
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        padding-left:25px;
        text-transform: capitalize;
        color:var(--white);
        font-size:14px;
    }


/* ===****end of  .header_menu_small_phone ==== */





    /* <!-- ============== HEADER_BANNER ============ --> */
    #header_banner .row{
        display: flex;
        justify-content: center;
    }
    .header_banner_content{
        height: 330px;
        transform:translateY(80%);
    }   
    .header_banner_cards{
        transform:translateY(88%);
    }
    .header_banner_cards>section{
        width: 100%;
        margin-top:15px;
    }
    /* <!-- ==============END OF HEADER_BANNER ============ --> */


    /* // <!-- ======================**** section_Design_graphics *****==================== --> */
    .section_Design_graphics{
        margin-top:950px;
    }
/* // <!-- ======================**** section_Design_graphics *****==================== --> */













/* <!-- ======================****section_Footer *****==================== --> */
.section_footer_content h5{
    font-size:20px;
}
/* <!-- ======================****end of section_Footer *****==================== --> */




.header_menu_small_phone,
.header_banner_waper>.row,
.header_banner_content,
.header_banner_cards,
.section_product_cards,
.section_total_view_cards,
.section_about_makro_cards,
.section_footer_cards{
    width: 90%;
    margin:0 auto;
}
    

}




@media screen and (min-width:576px) {
    /* Large Phone  */



/* ===**** .header_menu_small_phone ==== */
    #header{
        position: relative;
    }
    .header_menu_small_phone{
        width: 530px;
    }
    
    #Toggle{
        width: 35px;
        height: 35px;
        border:1px solid var(--darkblue);
        border-radius:2px;
        cursor: pointer;
        display: flex;
        flex-wrap:wrap;
        justify-content: center;
        align-content: center;
    }

    .header_menu_log>img{
        width: 70px;
        height:70px;
    }
    #Toggle>span{
        display: flex;
        width: 80%;
        height: 0;
        border:2px solid var(--darkblue);
        margin-top:4px;
        border-radius:7px;
    }


    .header_menu_NavLinks{
        width: 330px;
        height: 110vh;
        position: fixed;
        top: 0;left:0;
        z-index:1000;
        overflow-y: scroll;
    }
    .header_menu_NavLinks::-webkit-scrollbar{
        width: 5px;
    }
    .header_menu_NavLinks::-webkit-scrollbar-thumb{
        background-color:var(--darkblue);
    }
    .header_logo{
        height: 70px;
    }

    .header_menu_NavLinks_Item{
        width: 90%;
        min-height:300px;
        background-color:var(--darkblue);
        margin:0 auto;
        border-radius:5px;
        transition:.4s;
        
    }



    .navigationBar>li{
        height: 40px;
        color:var(--white);
        font-size:17px;
        overflow: hidden;
        transition:.4s;
    }
    .navigationBar>li>a{
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        text-transform: capitalize;
        color:var(--white);
        padding-left:15px;
    }

    .DropMenu{
        min-height:230px;
    }
    .DropMenu_item{
        margin-top:8px;
    }
    .DropMenu_item>li{
        width: 100%;
        height: 40px;
    }
    .DropMenu_item>li>a{
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        padding-left:15px;
        text-transform: capitalize;
        color:var(--white);
        font-size:14px;
    }
/* ===****end of  .header_menu_small_phone ==== */



    /* <!-- ============== HEADER_BANNER ============ --> */
    #header_banner .row{
        display: flex;
        justify-content: center;
    }
    .header_banner_content{
        width: 530px;
        height: 360px;
        transform:translateY(50%);
    }
    .header_banner_cards{
        transform:translateY(80%);
    }
    .header_banner_cards>section{
        width: 45%;
        margin-top:15px;
    }
    .header_banner_cards>section:nth-of-type(5){
        width: 100%;
    }
 /* <!-- ==============END OF HEADER_BANNER ============ --> */

/*  <!-- ======================****section_Design_graphics *****==================== --> */
    .section_Design_graphics{
        margin-top:600px;
    }
/* <!-- ======================****section_Design_graphics *****==================== --> */


/* // <!-- ======================**** section_Get_quote *****==================== --> */
.section_Get_quote_form>input{
    width: 48%;
}
/* // <!-- ======================****end of section_Get_quote *****==================== --> */


/* // <!-- ======================****section_Footer *****=========================== --> */
.section_footer_content h5{
    font-size:20px;
}
/* // <!-- ======================****End of section_Footer *****==================== --> */

/* **********************  This is width of MD ********** */
.header_banner_cards,
.section_product_cards,
.section_total_view_cards,
.section_about_makro_cards,
.section_footer_cards{
    width: 520px;
}

}









@media screen and (min-width:768px) {
    /* MD  */
   /* ===**** .header_menu_small_phone ==== */
   .header_menu_small_phone{
    width: 650px;
}
/* ===****end of  .header_menu_small_phone ==== */




      /* <!-- ============== HEADER_BANNER ============ --> */
    .header_banner_content{
        width: 650px;
        padding:45px 50px 60px;
        margin-top:70px;
    }
    /* <!-- ==============END OF HEADER_BANNER ============ --> */





/*  <!-- ======================**** section_Design_graphics *****==================== --> */
    .section_Design_graphics{
        margin-top:550px;
    }
/*  <!-- ======================**** section_Design_graphics *****==================== --> */




.header_banner_cards,
.section_product_cards,
.section_total_view_cards,
.section_about_makro_cards,
.section_footer_cards{
    width: 750px;
    }
}



@media screen and (min-width:992px) {
    /* LG  */
   /* ===**** .header_menu_small_phone ==== */
 */
/* ===****end of  .header_menu_small_phone ==== */




    /* =================***** HEADER *****=============== */
    .header_waper{
        width: 95%;
    }
    #header .row{
        position: relative;
    }
    
    #header_navbar_megaMenu{
        width: 98%;
        min-height:200px;
        /* background-color:#ffffff80; */
        background-color:var(--white);
        position: absolute;
        top: 100px;
        left: 2%;
        z-index:9;
        transform:translateY(25px);
        transition:.6s;
        opacity: 0;
        visibility:hidden;
        border-top:1px solid var(--darkblue);
    }
    .header_navbar>ul>li:hover>#header_navbar_megaMenu{
        transform:translateY(0);
        opacity: 1;
        visibility:visible;
    }
    .header_navbar_title{
        font-size:0.9rem;
    }
    .header_navbar_item>li{
        height:30px;
    }
    .header_navbar_item>li:hover::marker{
        content:'👉';
        padding-right:10px;
    }
    .header_navbar_item>li>a{
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        color:var(--blue);
        text-transform: capitalize;
        font-weight:normal;
    }
    .header_navbar_item>li>a:hover{
        color:var(--darkblue);
    }



    #header_navbar_Dropmenu{
        width: 170px;
        background-color:var(--darkblue);
        position: absolute;
        top: 100%;
        z-index:3;
        transform:translateY(30px);
        transition:.2s;
        opacity: 0;
        visibility:hidden;
    }
    #header_navbar_Dropmenu > li a{
        display: flex;
        width: 100%;
        font-size:14px;
        color:var(--white);
        text-transform: capitalize;
        font-weight:400;
        padding:6px 20px;
    }
    .header_navbar>ul>li:hover>#header_navbar_Dropmenu{
        transform:translateY(0);
        opacity: 1;
        visibility:visible;
    }
    /* =================***** END OF HEADER *****=============== */


    /* <!-- ============== HEADER_BANNER ============ --> */
    #header_banner .row{
        justify-content: flex-start;
    }
    .header_banner_cards{
        width:100%;
        transform:translateY(50%);
    }
    .header_banner_cards>section{
        width: 19%;
        margin-top:0;
    }
    .header_banner_cards>section:nth-of-type(5){
        width: 19%;
    }
    /* <!-- ==============END OF HEADER_BANNER ============ --> */

/*  <!-- ======================**** section_Design_graphics *****==================== --> */
    .section_Design_graphics{
        margin-top:200px;
    }
/*  <!-- ======================**** section_Design_graphics *****==================== --> */


/* // <!-- ======================**** section_total_view *****==================== --> */
    #section_total_view{
        min-height: 370px;
    }
/* // <!-- ======================****end of section_total_view *****==================== --> */



.header_waper,
.header_menu_small_phone,
.header_banner_waper,
.section_product_cards,
.section_total_view_cards,
.section_about_makro_cards,
.section_footer_cards{
    width:90%;
}
}


@media screen and (min-width:1200px) {
    /* XL  */
}


@media screen and (min-width:1400px) {
    /* XXL  */
.header_waper,
.header_banner_waper,
.section_product_cards,
.section_total_view_cards,
.section_about_makro_cards,
.section_footer_cards{
    width:85%;
}
}



 /* ****===== BtnBackTbn **** ====   */
 #BtnBack{
    display: flex;
    width: 40px;
    position: absolute;
    right: 10px;
    top: 60px;
    margin-block:5px;
    font-size:18px;
    cursor: pointer;
 }
 /* ****=====end of BtnBackTbn **** ====   */