@media only screen and (max-width:1024px) {
 .site-input_holder { flex: 100%; }
.off-canvas-menu .cta_main { display: block; position: absolute; bottom: 0; width: 100%; padding: 0px; }
.header a.cta { width: 100%; padding: clamp(15px, 1.4vw, 17px) clamp(15px, 1.8vw, 23px); border-radius: 0px; }
.header .menu-toggle,.off-canvas-menu { display: block; }
.header .menu-toggle { background: #0000004f;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    backdrop-filter: blur(20px);
    color: #fff;
    font-size: 24px;
    line-height: 1; }
.off-canvas-menu { position: fixed; top: 0; right: 0; height: 100dvh; width: 100%; background: #000; color: white; transform: translateY(-200%); transition: transform 0.5s linear; z-index: 1000; display: flex; flex-direction: column; }
.off-canvas-menu::after { content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100dvh; background: rgba(0,0,0,0.5); z-index: -1; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.off-canvas-menu .cta_main { background-color: transparent; }
.craft { flex-direction: column; }
.craft .craft-right { margin-right: 0; padding:  0px; }
.site_title--container { flex-wrap: wrap; row-gap: 20px; }
.skills_icon--area { column-gap: clamp(30px, 7vw, 150px); }
.site_footer { overflow: hidden; }
.site_footer-left { position: absolute; left: 0; z-index: -1; opacity: .5; height: 114%; top: 50%; transform: translate(-38%, -50%); ; }
.site_footer-left img { max-width:100%; width:100%; height: 100%; }
.site_footer-container { position: relative; }
.site_footer-container .site_navigation--item { flex: 100%; width: 100%; }
.contact--page_inner .contact--page__right { display:none; }
.site_form--container { column-gap: 100px; row-gap: 40px; }
.selection_btn { padding:13px 11px; }
.site_selection--area { column-gap:5px; }
.craft .craft-right .right-inner .right-box { padding: 20px 0; }
.site_footer-nav--links.contact-section { max-width: 100%; }

.header .header_inner .header_content .header_navigations_links{width: auto;}
.header.scrolled .header_brand_logo img { max-width:100px;}

#projects{margin: 50px 0;}
#projects::before{height: 100%; scale: 1; border-radius: 15px;}
.projects_container--main.site_content-container {
  padding-top: 20px;
  padding-bottom: 20px;
}
 }