/* 0-640 xs --> xs mobile  */
@media screen and (max-width: 640px) {
  html {
    font-size: 14px;
  }
  .container {
    width: 100%;
    margin: 0 auto;
  }
  #mark span{
    padding-left: 10px;
  }
  /* start nav */
  nav .container {
    padding: 1.25rem 0;
    top: 0;
  }
  nav .container li {
    display: block;
    margin: 0.625rem;
  }
  /* end nav */

  /* start section header */
  header {
    padding-block: 100px;
    margin-top: 95px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 120vh;
  }
  header#home .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    text-align: center;
  }
  .contant-head {
    width: 100%;
  }

  header picture {
    width: 100%;
  }
  header picture img {
    width: 90%;
  }

  .contant-head .head-title h1 {
    width: 70%;
    margin: auto;
  }
  .head-botton {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
  }
  .head-botton .a-button1 {
    border-radius: 3.125rem 3.125rem 3.125rem;
    margin-bottom: 1.25rem;
  }
  /* <!-- end section header --> */
  #chefs .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .person {
    width: 90%;
    margin: auto;
    margin-bottom: 20px;
  }
  /* <!-- start section CHEFS --> */

  /* start section gallary */
  .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
    gap: 20px;
  }
  .row picture {
    width: 100%;
  }
  #gallery .container .row .pizza{
    -webkit-box-ordinal-group:2;
        -ms-flex-order:1 ;
            order:1 ;
   }
   #gallery .container .row .Levitation-pizza{
    -webkit-box-ordinal-group:4;
        -ms-flex-order:3 ;
            order:3 ;
   }
   #gallery .container .row .Beef-steaks{
    -webkit-box-ordinal-group:6;
        -ms-flex-order:5 ;
            order:5 ;
   }
   #gallery .container .row .Frittata{
    -webkit-box-ordinal-group:5;
        -ms-flex-order:4 ;
            order:4 ;
   }
   #gallery .container .row .Burger{
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
   }
   #gallery .container .row .Fried-Chicken{
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
   }
   #gallery .container .row .Lyulya-kebab{
    -webkit-box-ordinal-group:8;
        -ms-flex-order:7 ;
            order:7 ;
   }
   

  /* end section gallary */

  /* start section contact */
  .contact-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .contact-info .item {
    width: 100%;
    margin: auto;
  }
  .marginleft {
    margin-left: 0;
  }
  #contact form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  #contact form :nth-child(2),
  form :nth-child(1) {
    width: 100%;
  }
  #contact form :nth-child(2) {
    padding-left: 0;
  }

  .input-button {
    width: 30%;
    margin: auto;
  }
  /* end section contact */

  /* start section footer */
  #footer .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .social {
    width: 100%;
  }
  .subscribe {
    width: 100%;
  }
  .get-in {
    width: 100%;
  }

  #footer .marked #mark span {
    vertical-align: -2rem;
  }
  .social-media span::after {
    width: 500%;
    bottom: -0.9375rem;
    left: -200%;
  }
  .email-add form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  #footer .email-add button {
    width: 100%;
    text-align: center;
  }
  #footer .email-add span {
    padding-right: 0;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    text-align: center;
    position: relative;
    right: 38%;
  }
  .get-in ul li.spach {
    display: block;
    margin-top: 20px;
  }

  #footer span.span-footer {
    display: block;
    margin-top: 20px;
  }

   #footer .subscribe{
    width: 90%;
    margin: auto;
  }

}


/* 641-768 xs --> ms big mobile & small tablet  */
@media screen and (min-width: 641px) and (max-width: 768px){
  html {
    font-size: 15px;
  }
  .container {
    width: 70%;
    margin: 0 auto;
  }
  #mark span{
    padding-left: 3.75rem;
  }
  /* start nav */
  nav .container {
    padding: 1.25rem 0;
    top: 0;
  }
  nav .container li {
    display: block;
    margin: 0.625rem;
  }
  /* end nav */

  /* start section header */
  header {
    padding-block: 100px;
    margin-top: 95px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 120vh;
  }
  header#home .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    text-align: center;
  }
  .contant-head {
    width: 100%;
  }

  header picture {
    width: 100%;
  }
  header picture img {
    width: 90%;
  }

  .contant-head .head-title h1 {
    width: 100%;
  }
  .head-botton {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
     -webkit-box-align: baseline;
         -ms-flex-align: baseline;
             align-items: baseline;
     justify-content: center;
  }
  .head-botton .a-button1 {
    border-radius: 3.125rem 3.125rem 3.125rem;
    margin-bottom: 1.25rem;
  }
  /* <!-- end section header --> */
  #chefs .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .person {
    width: 90%;
    margin: auto;
    margin-bottom: 20px;
  }
  /* <!-- start section CHEFS --> */

  /* start section gallary */
  .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
    gap: 20px;
  }
  .row picture {
    width: 100%;
  }
  #gallery .container .row .pizza{
    -webkit-box-ordinal-group:2;
        -ms-flex-order:1 ;
            order:1 ;
   }
   #gallery .container .row .Levitation-pizza{
    -webkit-box-ordinal-group:4;
        -ms-flex-order:3 ;
            order:3 ;
   }
   #gallery .container .row .Beef-steaks{
    -webkit-box-ordinal-group:6;
        -ms-flex-order:5 ;
            order:5 ;
   }
   #gallery .container .row .Frittata{
    -webkit-box-ordinal-group:5;
        -ms-flex-order:4 ;
            order:4 ;
   }
   #gallery .container .row .Burger{
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
   }
   #gallery .container .row .Fried-Chicken{
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
   }
   #gallery .container .row .Lyulya-kebab{
    -webkit-box-ordinal-group:8;
        -ms-flex-order:7 ;
            order:7 ;
   }
   

  /* end section gallary */

  /* start section contact */
  .contact-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .contact-info .item {
    width: 100%;
    margin: auto;
  }
  .marginleft {
    margin-left: 0;
  }
  #contact form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  #contact form :nth-child(2),
  form :nth-child(1) {
    width: 100%;
  }
  #contact form :nth-child(2) {
    padding-left: 0;
  }

  .input-button {
    width: 30%;
    margin: auto;
  }
  /* end section contact */

  /* start section footer */
  #footer .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .social {
    width: 100%;
  }
  .subscribe {
    width: 100%;
  }
  .get-in {
    width: 100%;
  }

  #footer .marked #mark span {
    vertical-align: -2rem;
  }
  .social-media span::after {
    width: 500%;
    bottom: -0.9375rem;
    left: -200%;
  }
  .email-add form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  #footer .email-add button {
    width: 100%;
    text-align: center;
  }
  #footer .email-add span {
    padding-right: 0;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    text-align: center;
    position: relative;
    right: 38%;
  }
  .get-in ul li.spach {
    display: block;
    margin-top: 20px;
  }

  #footer span.span-footer {
    display: block;
    margin-top: 20px;
  }

   #footer .subscribe{
    width: 90%;
    margin: auto;
  }
  .social-media span::after{
     width: 100%;
     left:0;
  }

}




/* 769-1024 md --> tablet & small lap */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  html {
    font-size: 16px;
  }
  .container {
    width: 80%;
    margin: 0 auto;
  }

  /* start nav */
  nav .container {
    padding: 1.25rem 0;
    top: 0;
  }
  /* end nav */

  /* start section header */
  header {
    padding-top: 0;
    margin-top: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 120vh;
  }
  header#home .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    text-align: center;
    padding-bottom: 40px;
  }
  .contant-head {
    width: 100%;
  }

  header picture {
    width: 100%;
  }
  header picture img {
    width: 90%;
  }

  .contant-head .head-title h1 {
    width: 60%;
    margin: auto;
  }
  .contant-head .head-title p {
   margin: auto;
   width: 85%;
   padding: 10px;
  }
  .head-botton {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: 20px;
  }
  .head-botton .a-button1 {
    border-radius: 3.125rem 3.125rem 3.125rem;
    margin-bottom: 1.875rem;

  }
  /* <!-- end section header --> */

  /* <!-- start section CHEFS --> */
  #chefs .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .person {
    width: 45%;
    margin-bottom: 20px;
  }
  /* <!-- end section CHEFS --> */

  /* start section gallary */

  .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 1600px;
    gap: 20px;
  }
  .row picture {
    width: 50%;
  }

  #gallery .container .row .pizza{
    -webkit-box-ordinal-group:2;
        -ms-flex-order:1 ;
            order:1 ;
   }
   #gallery .container .row .Levitation-pizza{
    -webkit-box-ordinal-group:4;
        -ms-flex-order:3 ;
            order:3 ;
   }
   #gallery .container .row .Beef-steaks{
    -webkit-box-ordinal-group:6;
        -ms-flex-order:5 ;
            order:5 ;
   }
   #gallery .container .row .Frittata{
    -webkit-box-ordinal-group:5;
        -ms-flex-order:4 ;
            order:4 ;
   }
   #gallery .container .row .Burger{
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
   }
   #gallery .container .row .Fried-Chicken{
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
   }
   #gallery .container .row .Lyulya-kebab{
    -webkit-box-ordinal-group:8;
        -ms-flex-order:7 ;
            order:7 ;
   }
   
  /* end section gallary */

  /* start section contact */
  .contact-info .item {
    width: calc((100% / 2) - 10px);
  }
   .width-res{
    padding-top: 20px;
    padding-bottom: 30px;
   }
   .paddingbottom{
     padding-bottom: 40px;
   }
  .contact-info :nth-child(4) .inner {
    padding: 13px;
  }
  #responsive {
    width: 80%;
  }

  #contact form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  #contact form :nth-child(2),
  form :nth-child(1) {
    width: 100%;
  }
  #contact form :nth-child(2) {
    padding-left: 0;
  }

  .input-button {
    width: 30%;
    margin: auto;
  }
  .div-ifarme iframe {
    width: 100%;
    height: 30vh;
  }
  .information {
    width: 80%;
  }
  .icon-contact {
    width: 10%;
    height: 40px;
  }
  .icon-contact i {
    font-size: 18px;
  }.inner .information span {
    font-size: 18px;
    font-weight: 600;
  }

  /* end section contact */

  /* start section footer */
  #footer .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .social {
    width: 50%;
  }
  .subscribe {
    width: 100%;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  .get-in {
    width: 40%;
  }

  #footer .marked #mark span {
    vertical-align: -1.5rem;
  }
  .social-media span::after {
    width: 100%;
    bottom: -0.9375rem;
    left: 0%;
  }
  .email-add form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  #footer .email-add button {
    width: 20%;
    text-align: center;
  }
  #footer span.span-footer {
    display: block;
    margin-bottom: 10px;
  }
}