@media only screen and (max-width: 1400px) { 



 }

@media only screen and (max-width: 1200px) {

    .info_about{
        padding-right: 2rem;
    }


 }




 @media only screen and (min-width: 993px) {
    .gallary_projects{
        
        grid-template-rows: 200px 200px;
        grid-template-areas: "a b b" "a c d";
        
     
     }

     .project{
        height: 100%;
     }

     .project_img{
        height: 100%;
     }

     .project-1{
        grid-area: a;
     }
     .project-2{
        grid-area: b;
     }
     .project-3{
        grid-area: c;
     }
     .project-4{
        grid-area: d;
     }
  }





  
@media only screen and (max-width: 992px) { 

    .right_header{
        padding-left: 5rem;
    }

    .text_services h4 {
        font-size: 1.2rem;
    }

    .text_services p {
        font-size: 0.8rem;
    }

    .gallary_projects{ 
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        
    }

 }




@media only screen and (max-width: 768px) { 

    .header_contenet {
        display: grid;
        grid-template-columns: 1fr;
    }

    .right_header {
        padding-left: 0;
    }

    .left_header{
        display: none;
    }

    .info_about {
        grid-template-columns: 1fr;
        padding-right: 0;
        row-gap: 2rem;
    }

    .img_about {
        margin-bottom: 1.5rem;
    }

    .img_about::before{
        display: none;
    }


      /*
===================
  responsive-Menu
===================
 */
    .nav_links {
        display: none;
    }

    .menu_btn {
        background-color: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        justify-self: end;
        padding-bottom: 5px;
        z-index: 5;
    }

    .menu_btn svg  {
        width: 48px;
        height: 48px;
    }

    .line {
        fill: none;
        stroke: var(--clr-primary-3);
        stroke-width: 5;
        transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
      }

    .line1 {
        stroke-dasharray: 60 207;
        stroke-width: 5;
      }

    .line2 {
        stroke-dasharray: 60 60;
        stroke-width: 5;
      }

    .line3 {
        stroke-dasharray: 60 207;
        stroke-width: 5;
      }
    .opened .line1 {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
        stroke-width: 5;
      }
    .opened .line2 {
        stroke-dasharray: 1 60;
        stroke-dashoffset: -30;
        stroke-width: 5;
      }
    .opened .line3 {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
        stroke-width: 5;
      }

    .menu_btn[aria-expanded='true'] + .nav_menu2 {
    
      visibility:visible;
    }

    .menu_btn[aria-expanded='true'] + .nav_menu2 .nav_overlay {
      transform: scale(1);
      transition-duration: var(--menu-speed);
    }

    .menu_btn[aria-expanded='true'] + .nav_menu2 .nav_overlay div {
      opacity: 1;
      transition:  opacity 0.4s ease 0.4s;
      -webkit-transition:  opacity 0.4s ease 0.4s;
      -moz-transition:  opacity 0.4s ease 0.4s;
      -ms-transition:  opacity 0.4s ease 0.4s;
      -o-transition:  opacity 0.4s ease 0.4s;
}

    .info_services {
         grid-template-columns: 1fr;
    }

    .text_services h4 {
        font-size: 1.5rem;
    }

    .text_services p {
        font-size: 1rem;
    }
}



@media only screen and (max-width: 576px) { 
    .text_about h3 {
        font-size: 1.5rem;
    }

    .text_about p {
        font-size: 0.9rem;
    }

    .text_services h4 {
        font-size: 1.1rem;
    }

    .text_services p {
        font-size: 0.9rem;
    }

    .icon_services {
        width: 40px;
        height: 40px;
    }

    .skill_container{
        grid-template-columns: auto;
        
     }

     .skills h3 {
        text-align: center;
    }

    .social_icons_footer{ 
        gap: 1.5rem;
        
      }
     
      .social_icon_footer{
        font-size: 1.5rem;
      }

      .text_footer{
        font-size: 0.8rem;
      }
 }


@media only screen and (max-width: 380px) { 

    .right_header {
        align-items: center;
    }

    .right_header h1 {
        font-size: 2.4rem;
    }

    .text_services h4 {
        font-size: 0.9rem;
    }

    .text_services p {
        font-size: 0.8rem;
    }

 }