* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --green: #51D871;
    --blue: #4D74F2;
    --purple: #C245E8;
}
body{
    overflow-x: hidden;
}
.d-f{
    display: flex;
}
.c-p{
    cursor: pointer;
}
.b-n{
   border: none;
}
.jc-sb{
    justify-content: space-between;
}
.p-a{
    position: absolute;
}
.p-r{
    position:relative;
}
.fd-c{
    flex-direction: column;
}
.ai-c{
    align-items: center;
}
.col-b{
    color: #000000;
}
.navigation_content {
    height: 87px;
    padding: 0px 25px;
    border-radius: 60px;
}
.pages ul{
    gap: 30px;
    list-style: none;
}
.click_buttom button {
    padding: 10px 20px;
    border-radius: 20px;
    background-color: #4D74F2;
    color: white;
    font-size: 15px;
    font-weight: 600;
}
.link:before {
    content: "";
    background-color: black;
    position: absolute;
    left: auto;
    bottom: 0;
    right: 0;
    height: 1%;
    width: 0%;
    transition-property: width;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-duration: .9s;
}
.link:active::before,
.link:hover:before {
    left: 0;
    right: auto;
    width: 100%;
}
.video {
    padding: 20px 40px;
    height: 530px;
}
video {
    width: 100%;
    height: 95%;
    object-fit: fill;
    border-radius: 20px;
}
.vedio_text {
    top: 15%;
    left: 2.6%;
    filter: url(#goo);
}
#goo {
    --paper-color: blue;
}
.span_filter span{ 
    background-color: rgb(255, 255, 255);
    font-size: 55px;
    font-weight: 900;
    padding: 1px 20px;
    width: fit-content;
    display: block;
}
.vedio_text h4 {
    background-color: white;
    width: fit-content;
    padding: 5px 10px 0px 10px;
    margin-bottom: -2px;

}
.button_filter #work_button{
    padding: 7px 30px;
    border-radius: 20px;
    background-color: #4D74F2;
    color: white;
    font-size: 15px;
    font-weight: 550;
}
.button_filter{
    background-color: white;
    width: fit-content;
    padding: 10px 12px;
}
.button_filter button{
    border: 2px solid rgb(255, 255, 255);
    font-size: 15px;
    padding: 5px 10px;
    color: black;
    border-radius: 5px;
    background-color: white;
}
.button_filter button:hover {
    border: 2px solid black;
}
.second_section_part_second h3 {
    color: rgb(0, 0, 0);
}
.hidden {
    visibility: hidden;
}
.second_section {
    padding: 30px 50px;
}
#space {
    padding-left: 50px;
}
.second_section_part_second {
    width: 600px;
    padding-right: 20px;
}
.svg_container {
    margin: 30px 13px;
    overflow: hidden;
    position:relative;
}

.svg_icon {
    padding: 0px 30px;
}

.svg_icon svg {
    width: 80px;
    height: 60px;
}
    .svg_first_part,.svg_second_part{
     animation: slide_move 30s linear  infinite;
}
.blur_left {
    left: 0px;
}

.blur_right {
    right: 0px;
    top: 0 ;
}
.blur-both{
     backdrop-filter: blur(2px);
    width: 50px;
    height: 70px;
    z-index: 2;
}
@keyframes slide_move {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(-100%);
    }
}
.work_part_one{
    padding: 50px 20px 50px 20px;
}
.pic_salt,.leather_shoes_picture,.grocary ,.construction_picture{
    width: 450px;
    height: 300px;
}
.pic_salt img,.leather_shoes_picture img,.grocary img,.construction_picture img{
    width: 100%;
    height: 100%;
    border-radius:25px;
    cursor: pointer;
}
.salt_date,.leather_date,.grocessy_date,.construction_date{
    gap: 30px;
}
.pic_salt_content,.leather_shoes_content,.grocary_content,.construction_info_content{
    gap:8px;
    margin: 10px 0px;
    padding: 0px 5px;
}
.work_container{
    padding: 20px 90px;
}
.work_part_one{
    padding-right:30px;
}
.work_part_second_content{
    margin:10px  0px 30px 50px;
}
.fifth_section_container{
    background-color:hsla(134, 63%, 58%, 0.608);
    padding: 100px 50px;
    border-radius: 30px;
    margin-top:80px;
}
.first_headline_content{
    color: rgb(0, 0, 0);
    margin-bottom: 100px;
}
.second_headline_content{
    margin-top: 30px;
}
.brand_identity,.seo,.craft_cms,.shopify,.website{
    padding: 30px 20px;
    border-bottom: 1px solid gray;
}
.empety_container{
    width: 500px;
    height: 200px;
    background-color: aliceblue;
}
.services{
    margin-left: 60px;
    font-size: 45px;
}
.digital_agency_content p{
width: 30vw;
}
.left_top svg{
width: 25px;
height:25px;
padding: 5px;
background-color:#d3ddd49b;
border-radius:100%;
}
.left_top,.top_right{
    background-color: white;
}
.end_section_container{
    background-color: rgb(0, 0, 0);
    margin: 30px;
    padding: 50px 0px 20px 150px;
     margin-bottom:0px; 
}
.left_top{
    top: 0;
    left: 0;
    gap: 10px;
    padding:0px 10px 25px 10px;
    border-bottom-right-radius:8px;
}
.top_right{
    top: 0;
    right: 0;
    padding: 10px 10px 10px 25px;
    border-bottom-left-radius:8px;
}
.you_like,.learn,.Explore,.get_in_touch,.crafting_since,.link_copyright{
    color: white;
}
.get_in_touch{
    margin-top: 20px;
}
.end_content{
    gap: 150px;
}
 #ul{
    gap:15px;
}
ul li{
    list-style: none;
}
 #gray{
    color: #8b8080;
}
.crafting_since{
    margin-top: 50px;
}
#large_text{
    font-size: 100px;
}
.link_copyright{
    margin-top: 40px;
    gap: 20px;
}
.link_copyright a,.pages ul li a{
    text-decoration: none;
    color: #8b8080;
}
.empety_container{
    padding: 15px;
    background-color: #4D74F2;
    color: white;
    font-size: 10px;
    border-radius: 10px;
   height: max-content;
   width: 23vw;
   position: sticky;
   top: 8%;
}
.top_right img{
    width: 20px;
    height: 20px;
    border: 2px solid black;
    border-radius:10px;
    margin-left: 5px;
}
.navigation_change{
    z-index: 1;
    position:fixed;
    top: 10px;
    left: 15vw;
    height:12vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 60px;
    background-color:#ffffff;
    opacity:0.9;
    width:70vw;
    padding: 0px 1vw;
    margin: 0px auto;
}
.new_pages_button{
    display: flex;
    align-items: center;
    gap: 10vw;
}
.bar{
    display:none;
}
 #pages_button{
        gap: 26vw;
 }
.menu{
        width: 70vw;
        background-color: #80e698;
        border-bottom: 1px solid rgb(255, 255, 255);
        font-size:15px;
        padding: 5px;
    }
.menu_open{
      position: fixed;
        top:5px;
        right:5px;
        display: none;
}
 .menu a {
        text-decoration: none;
        color:#000000;
 }
@media (max-width:500px){
    .logo a img{
      width:9vw;
      height:9vh;
    }
    .navigation{
        width: 100vw;
    }
    .navigation_content{
      padding: 0px 10px;
      height: 9vh;
    }
    .pages{
        display: none;
    }
    .click_buttom button{
        padding:5px 7px;
        font-size: 5px;
    }
    .bar{
        display: flex;
    }
    .bar img{
        width:4vw;
        height:4vh;
        position: relative;
        top:2px;
    }
    .bar_page{
        display: flex;
        gap: 5px;
    }
    .video{
        padding: 10px 0px;
        height:50vh;
    }
    .span_filter span{
        font-size:15px;
    padding: 1px 10px;
    }
   .vedio_text h4{
        font-size:10px;
    padding:2px 5px 0px 5px;
   }
.button_filter #work_button{
    padding: 3px 10px;
    font-size: 7px;
}
.button_filter button{
     padding: 3px 10px;
    font-size: 7px;
}
.second_section{
    padding:5px;
}
 .second_section_part_one h3,#space,.second_section_part_second h2{
    font-size: 10px;
    padding: 0px;
 } 
 .second_section_part_second{
    padding: 0px;
    padding-left: 10px;
    border-left: 1px solid gray;
}
 .second_section_part_one{
 align-items: start;
 width:140px;
 }
 .svg_icon svg{
    width: 40px;
    height: 40px;
 }
 .svg_icon{
    padding: 0px 10px;
 }
.svg_container{
    margin: 15px 5px;
}
.blur_left,.blur_right{
    width: 20px;
    height:40px
}
.work_part_one{
    display: none;
}
.work_part_second{
   width: 250px;
}
.work_container{
    padding:0px;
}
.work_part_second_content h1{
    font-size: 20px;
    margin-top:8px;
}
.leather_shoes_picture img,.construction_picture img{
width:100vw;
height:40vh;
}
.leather_content h2,.construction_content h2{
    font-size:15px;
}
.leather_shoes_picture,.construction_picture{
    height: fit-content;
}
.fifth_section_container{
    padding: 50px 25px;
    margin-top: 40px;
}
.next_level h1{
    font-size: 20px;
    margin-top: 10px;
}
.empety_container{
    display: none;
}
.empety_container h2{
    font-size: 10px;
}
.services{
    margin-left:5px;
    font-size: 15px;
}
.brand_identity,.seo,.craft_cms,.shopify,.website{
    padding:15px 5px;
}
.top_right{
    display: none;
}
#large_text{
    font-size: 40px;
}
.you_like h1{
    font-size:22px;
}
.end_content{
    flex-direction: column;
    margin-left: 60px;
    gap: 50px;
}
.end_section_container{
    padding: 30px 0px 10px 10px;
   margin: 0px;
   margin-top: 30px;
}
#end_section_button button{
    font-size:10px;
    font-weight: 600;
    padding: 10px 15px;
}
  #ul li{
padding-left:20px;
font-size: 13px;
}
.link_copyright{
    margin-top: 20px;
    gap: 5px;
    font-size:8px;
}
.navigation_change{
    height: 8vh;

}
.digital_agency_content p{
width:60vw;
}
.second_headline_content{
    margin-top: 0px;
}
.first_headline_content{
    margin-bottom: 20px;
    flex-direction: column;
}
  .you_like {
        width: 100%;
    }
}
@media  (min-width:801px)and(max-width:1024px){
    .navigation_change{
        width: 80vw;
    }
.pic_salt img,.leather_shoes_picture img,.grocary img,.construction_picture img{
    width: 90%;
    height: 90%;
}
.services{
    margin-left: 30px;
}
.empety_container{
    width: 30%;
}
.end_section_container{
 padding-left: 100px;
}
.you_like{
    width:35%;
}
}
@media (min-width:500px) and (max-width:800px){   
.work_part_one{
    display: none;  
}
.leather_shoes_picture img,.construction_picture img{
    width:80vh;
    height:40vh;
}
.Explore{
    display: none;
}
.brand_identity,.seo,.craft_cms,.shopify,.website{
    font-size: 25px;
}
.empety_container{
    width: 35vw;
}
.you_like{
    width:50%;
}
.end_section_container{
 padding-left: 70px;
}
}