body {
  text-rendering: optimizeLegibility;
  background: #f3f3f5;
}
.body-fixed {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: auto;
  left: auto;
}
body,
html {
  overflow-x: hidden;
}

/* scrollbar disign */
::-webkit-scrollbar{
    width: 5px;
}
::-webkit-scrollbar-track{
    background-color: #bfbfbf;
}
::-webkit-scrollbar-thumb{
    background-color: orange;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover{
    background-color: rgb(253, 186, 63);
}
/* end scrollbar disign */
/* ------------------------------------------------------------------------------------------------------------ */
/* intro  */
@keyframes fade-in-down{
    from{
        opacity: 0;
        transform: translate3d(0, -100%, 0);
        visibility: hidden;
    }
    to{
        opacity: 1;
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }
}
.fade-in-down{
    animation: fade-in-down 1s ease 1 alternate;

}

@keyframes blur-in{
    from{
        opacity: 0;
        filter: blur(7px);
    }
    to{
        opacity: 1;
        filter: blur(0);
    }
}
.blur-in{
    animation:  blur-in 2s linear ;

}


.wheel-in-right {
    animation: wheel-out-left 5s  linear ;

    animation-direction: reverse;
  }

  @keyframes wheel-out-left {
    0% {
      clip-path: polygon(
        50% 50%,
        50% -100%,
        -100% 50%,
        50% 200%,
        200% 50%,
        50% -100%
      );
    }
    12.5% {
      clip-path: polygon(
        50% 50%,
        -50% -50%,
        -100% 50%,
        50% 200%,
        200% 50%,
        50% -100%
      );
    }
    25% {
      clip-path: polygon(
        50% 50%,
        -100% 50%,
        -100% 50%,
        50% 200%,
        200% 50%,
        50% -100%
      );
    }
    37.5% {
      clip-path: polygon(
        50% 50%,
        -50% 150%,
        -100% 50%,
        50% 200%,
        200% 50%,
        50% -100%
      );
    }
    50% {
      clip-path: polygon(
        50% 50%,
        50% 200%,
        -100% 200%,
        50% 200%,
        200% 50%,
        50% -100%
      );
    }
    62.5% {
      clip-path: polygon(
        50% 50%,
        150% 150%,
        150% 150%,
        50% 150%,
        200% 50%,
        50% -100%
      );
    }
    75% {
      clip-path: polygon(
        50% 50%,
        200% 50%,
        200% 50%,
        200% 50%,
        200% 50%,
        50% -100%
      );
    }
    87.5% {
      clip-path: polygon(
        50% 50%,
        150% -50%,
        150% -50%,
        150% -50%,
        150% -50%,
        50% -100%
      );
    }
    100% {
      clip-path: polygon(
        50% 50%,
        50% -100%,
        50% -100%,
        50% -100%,
        50% -100%,
        50% -100%
      );
    }
  }
  .back-vid{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    height: 864px;
    width: 100%;
    filter: brightness(0.7);
  }
.p-int{
color: orange;
font-size: 50px;    
}
.intro-div{
margin: 90px 400px !important;
}
.pi-2{
    padding-left: 180px;
}
.pi-3{
padding-left: 200px;
}

#intro{
transition: 0.5s;
z-index: 99;
position: fixed;
height: 100vh;
width: 100%;
}
/* end intro  */




/* nav */
img {
  max-width: 100%;
}
.hover:hover {
  color: orange;
  box-shadow: inset 10px 10px 14px #e2e2e2, inset -10px -10px 14px #ffffff;
  border-radius: 41%;
}
.btn-style {
  color: orange;
  border-radius: 50px;
  box-shadow: inset 10px 10px 14px #e2e2e2, inset -10px -10px 14px #ffffff;
}

h1 {
  font-size: 100px;
}
.chbtn-style {
  border-radius: 50px;
  box-shadow: 10px 10px 14px rgb(213, 213, 213), -10px -10px 14px rgb(239, 239, 239);
  font-size: 25px;
  padding: 12px;
  background: #f3f3f5 !important;
}

.nb.sticky_head {
    opacity: 80%;
}
.nb{
transition: 0.5s;
background-color: #f3f3f5 !important;
z-index: 98;
}
/* end nav */
/* --------------------------------------------------------------------------------------------------------------------- */

/* sec 1 */
.js-parallax-scean {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.banner-img-wp {
    align-items: center;
    margin: auto;
}
.banner-img-wp img{
    animation: binal 4.50s linear infinite alternate;
    box-shadow: 0 0 20px rgb(36, 39, 37,0.3);
    border-radius:48% 52% 57% 43% / 34% 44% 56% 66%;
    width: 90%;
    height:77vh;
}
@keyframes binal{
    25%{
       border-radius: 62% 38% 64% 63% / 34% 55% 45% 66%;
    }
    50%{
        border-radius: 43% 57% 51% 49% / 33% 42% 58% 62%;
    }
    100%{
        border-radius: 40% 60% 43% 57% / 52% 32% 68% 48%;
    }
}
    
.banner-shape-1 img{
    position: absolute;
    left: 90%;
    top: 110px;
    max-width: 150px;
    pointer-events: none; /*cant interact with elem */
    filter: blur(3px);
}
.banner-shape-2 {
top: auto;
bottom:0;
}

.banner-shape-2 img{
    position: absolute;
    top: 270px;
    right: 80% !important;
    max-width: 410px;
    pointer-events: none;
    filter: blur(6px);
}
.sec-wp{
    position: relative;
    z-index: 4;
}
/* end sec 1 */

/* --------------------------------------------------------------------------------------------------------------------- */

/* sec 2 */
.brands-row img:hover{
    filter: brightness(0.3);
    opacity: 0.9;
    
}
/* end sec 2 */

/* --------------------------------------------------------------------------------------------------------------------- */

/* sec 3 */
.about-img{
    position: relative;
    width: 75%;
    height: 55vh;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border-radius: 40px;
}
.aboutbtn-style{
    box-shadow: 10px 10px 14px rgb(213, 213, 213), -10px -10px 14px rgb(239, 239, 239);
    font-size: 50px;
    color: orange;
    width: 90px;
    height: 90px;
}
.about-txt::after{
    content: "Watch The Recipe";
    margin:auto 10px ;
    font-size: 20px;
    font-weight: bold;
    color: #bfbfbf;
}
/* end sec 3 */

/* --------------------------------------------------------------------------------------------------------------------- */

/* sec 3 */

.repeat-img{
    background-size: contain;
    background-repeat: no-repeat;
}
.menu-tap-wp{
    margin-bottom: 80px;
}
.menu-tap ul{
    /* padding: 10px; */
    display: inline-block;
    border-radius: 60px;
    background: linear-gradient(145deg, #ececec,#ffffff);
    box-shadow: 28px 28px 55px #d4d4d4, -28px -28px 55px #ffffff;
    position: relative;
    /* z-index: 2; */
list-style-type: none;
}
.menu-tap ul li, .menu-tap ul{
    display: inline-flex;
    text-transform: capitalize;
    font-size: 18px;
    line-height: normal;
    cursor: pointer;
    padding: 10px 26px;
    border-radius: 30px;
    transition: 0.3s;
    justify-content: center;
    align-items: center;
    transition: 1s;
}
.menu-img {
    border-radius: 30px;
    background: linear-gradient(145deg, #ececec, #ffffff);
    box-shadow: 28px 28px 45px #d4d4d4, -28px -28px 45px #ffffff;
    padding: 0 30px 30px;
    transition: 0.8s cubic-bezier(0.22, 0.78, 0.45, 1.02);
    width: 417px;
    margin-bottom: 15%;
    height: 563px;
}
.menu-img img,.wt-i{
    margin-top: -130px;
    margin-bottom: 30px;
    border-radius: 50%;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    
}
.menu-img:hover {
    width: 432px;
    box-shadow: none;
    height: 578px;
}
.plus-style{
    background-color: orange;
    border-radius: 25%;
    padding: 5px 10px;
}
.bydefult_show{
    margin-top: 15%;
}
 .bgmenu{
    background-color: orange;
 }

/* end sec 3 */

/* ssc 6 */

.bg-shape{
    transform: scale(-1,1);
}

#gallery {
    padding-top: 120px;
}

.book-table-img {
    height: 70vh;
    min-height: 500px;
    border-radius: 30px;
}

.back-img {
    background-position: center;
    background-size: cover;
}

.swiper-button-next::after, .swiper-button-prev::after {
    display: none;
}

.swiper-button-wp {
    position: relative;
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    height: 60px;
    align-items: center;
}

.swiper-button-next, .swiper-button-prev {
    position: unset;
    width: 60px;
    height: 60px;
    display: inline-flex;
    font-size: 30px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0;
    color: #0d0d25;
    background: #ffffff;
    box-shadow: -20px 20px 60px #d4d4d4, 20px -20px 60px #ffffff;
    padding-top: 1px;
    padding-right: 2px;
    transition: 0.3s;
}

.swiper-button-next {
    box-shadow: 20px 20px 60px #d4d4d4, -20px -20px 60px #ffffff;
    padding-left: 3px;
}

.swiper-button-prev:hover {
    box-shadow: inset 5px 5px 20px #d4d4d4, inset -5px -5px 20px #ffffff;
    color: #fcbc30;
}

.swiper-button-next:hover {
    box-shadow: inset -5px 5px 20px #d4d4d4, inset 5px -5px 20px #ffffff;
    color: #fcbc30;
}

.swiper-pagination {
    padding: 10px 20px;
    display: inline-block;
    border-radius: 60px;
    background: linear-gradient(145deg, #ececec, #ffffff);
    box-shadow: 25px 28px 55px #d4d4d4, -28px -28px 55px #ffffff;
    max-width: fit-content;
    left: 50% !important;
    transform: translate(-50%, 0);
    bottom: 0 !important;
    color: #000;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0px 10px !important;
    border-radius: 10px;
    transition: 0.8s cubic-bezier(0.22, 0.78, 0.45, 1.02);
}

.swiper-pagination-bullet-active {
    background: #fcbc30;
    width: 30px;
}

/* end sec 6 */
/* sec 7 */

.team-slider {
    position: relative;
}

.team-box {
    padding: 20px;
    border-radius: 30px;
    background: linear-gradient(145deg, #ececec, #ffffff);
    box-shadow: 28px 28px 45px #e6e6e6, -28px -28px 45px #ffffff;
    transition: 0.8s cubic-bezier(0.22, 0.78, 0.45, 1.02);
}

.team-box:hover {
    transform: scale(1.03);
}

.team-img {
    width: 100%;
    height: 480px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 9px 9px 18px rgb(194 194 194 /0.5), -9px -9px 18px rgb(255 255 255 / 0.5);
}

.team-box .h3-title {
    text-transform: capitalize;
    color: #0d0d25;
    font-weight: 600;
}

.social-icon {
    margin: 15px 0px 10px;
}

.social-icon ul li {
    display: inline-block;
    margin: 0 6px;
}

.social-icon ul li:last-child {
    margin-right: 0;
}

.social-icon ul li:first-child {
    margin-left: 0;
}

.social-icon ul li a {
    width: 50px;
    height: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #e6e6e6, #ffffff);
    box-shadow: 4px 4px 8px #d0d0d0, -4px -4px 8px #ffffff;
    color: #0d0d25;
    font-size: 19px;
}

.social-icon ul li a:hover {
    background: #ff8243;
}

.social-icon ul li a:hover i {
    color: #ffffff !important;
}



/* end sec 7 */

/* sec 8 */
.wts-img{
    width: 376px;
    height: 235px;
    border-radius: 30px;
    background: linear-gradient(145deg, #ececec, #ffffff);
    box-shadow: 28px 28px 45px #d4d4d4, -28px -28px 45px #ffffff;
    padding: 0 30px 30px;
    transition: 0.8s cubic-bezier(0.22, 0.78, 0.45, 1.02);
    margin-bottom: 10%;
    margin-left: 30px;
}
.wt-i{
    margin-top: -60px;
    width: 100px;
    margin-bottom: 30px;
    border-radius: 50%;
    margin-left: 0;
}
.wts-img:hover{
    width: 396px;
    height: 255px;
}




/* end sec 8 */

/* sec 9 */
.FAQS{
    border-radius: 30px;
    background: linear-gradient(145deg, #ececec, #ffffff);
    box-shadow: 28px 28px 45px #d4d4d4, -28px -28px 45px #ffffff;
    transition: 0.8s cubic-bezier(0.22, 0.78, 0.45, 1.02);
    margin: 10px 5px;
    box-sizing: content-box;
}
.FAQS-q1{
    width: 410px;
    height: 190px;
}
.FAQS-q2{
    width: 400px;
    height: 219px;
}
.FAQS-q3{
    width: 395px;
    height: 275px;
}

/* end sec 9 */

/* sec 10 */

.news-div{
width: 81.4%;
margin:auto;
padding: 100px;
overflow: hidden;
/* height: 20%; */
}

.news-div img{
    height: 50vh;
    filter: brightness(0.5);
}
.news-div button{
    background-color: orange !important;
    color: whitesmoke;
    font-size: 20px;
    border-radius: 30px;
}
.news-div button:hover{
    background-color: black !important;
}
.news-div form{
    height: 7vh;
}
/* end sec 10 */

/* sec 11 */
.fot-hover:hover{
    color: orange;
}


@media (max-width: 991px) {
    h1 {
      font-size: 45px !important;
    }
    #js-scroll {
      transform: unset !important;
    }
    #js-scroll div{
        padding: 0 5px ;
        margin: 30px 0 ;
    }
    .all-cl{
        margin: 0 !important;
        padding: 0 !important;
        margin-top: 100px !important;
    }

    .SEC-WP{
        margin: 0 !important;
    }
    .SEC-WP div{
        margin: 0 5px !important;
        padding: 0 !important;
    }
    .tbmc div{
        margin: 20px 0 !important;
        padding: 0 !important;
    }
    .banner-img-wp{
        margin: -5px !important;
        padding: 0 !important;
    }
    .chbtn-style {
      margin-bottom: 40px;
      font-size: 15px;
    }

    .aboutbtn-style{
      font-size: 20px !important;
      width: 50px !important;
      height: 50px !important;
      padding: auto !important;
  }
  .aboutbtn-style i{
      padding: 0 !important;
  }
  .about-txt::after{
      margin:auto 5px !important;
      font-size: 15px !important;
  } 
  .about-img{
    width: 100% !important;
    
  }
  .about-img-par{
    width: 100% !important;
  }
  .menu-tap-wp{
    margin: 0  !important;
  }
  .menu-img {
      width: 70% !important;
      margin-bottom: 15%;
      height: 50% !important;
      margin-top: 25%;
  }
  .menu-img p{
  font-size: 12px !important;
  padding: 0 !important;
  }
  .bydefult_show{
    margin: 100px 10px !important;
  }
  .dish-box-wp img{
    margin-top:-100px  !important;
    /* margin-bottom: 200px !important; */
    padding-top: 50px !important;
  }
  .dish-box-wp div{
    margin: 10px 0 !important;
  }

  .plus-style{
      padding: 2px 4px !important;
  }
.menu-tap ul li, .menu-tap ul{
    font-size: 5px !important;
    padding: 0px 0px !important;
}
.team-box{
    height: 100vh;
}
.team-slider{
    margin: 0px !important;
}
.pisu-ph{
    margin: 0 !important;
    padding: 0 20px !important;
}
.contantdi{
    margin: 50px 0;
    border-top: 1px solid rgb(221, 217, 217);
    border-bottom: 1px solid rgb(221, 217, 217);
    height: 170px   ;
}
.contantdi i::before{
    padding-top: 25px !important;   
}
.i-cont-style{
    width: 20% !important;
    height: 45% !important;
}
.sec-titel{
    margin: 0 !important;
}
.non-class{
    display: none;
}
.wocsau-img{
    margin-bottom: 90px;
    margin-top: -90px;
}
.wts-img div{
    height: 0vh;

}
.wts-img{
    margin-bottom: 100px  !important;
}
.wts-img h6{
    margin-top: -25px;
}
.wts-m{
    margin: 0 !important;
}

.wt-i{
    margin-top: -155px;
    margin-left: 0;
    display: flex;
    margin-bottom:0 !important ;
}
.s4-img img{
margin-top: -80px !important;
}
.FAQS{
    height: 40vh;
}
.FAQS p{
    font-size: 13px !important;
}
.FAQS h6{
    font-size: 20px !important;
}
.FAQS div{
    padding: 20px 8px !important;
    margin: 0 !important;
}
.Faqs-di{
    margin: 0 25px !important;
    padding: 0 !important;
}
.blg-s{
    width: 100% !important;
}
.blog-sec{
    padding: 0 !important;
    margin: 0 !important;
}
.news-div{
    padding: 0 !important;
    margin: 0 !important;
    justify-content: center;
    display: contents;
    }
    .news-div-red{
        height: 40vh !important;
    }
    .news-div button{
        font-size: 10px !important;
    }
    .news-div h5{
        font-size: 20px !important;
    }

    .news-div p{
        font-size: 10px !important;
    }
    .car-txt{
        margin: 40px 10px !important;
        padding: 40px 10px !important;
    }
    .car-txt form{
        height: 20% !important;
    }
.blg-sw{
    width: 100% !important;
    height: 110vh !important;
}
.blg-sw-i{
    margin: 0 !important;
}


.ph-si li{
    margin:10px !important;
}

.back-vid{
    height: 80%;
    width: 780px;
    display: none;
  }
  .intro-div{
    margin: 0px 0px !important;
    padding: 80px 30px !important;
    background-color: orange !important;
    filter: blur(1PX);
    width: 100%;
    height: 100vh;
    
    }
    .intro-div p{
        color: black !important;
    }
    .pi-2{
        padding-left: 0 !important;
    }
    .pi-3{
    padding-left: 0 !important;
    }
    .brands-row img{
        width: 150px !important ;
        height: 150px;
    }
  }
  
  @media screen and(min-width:992px) {
    #viweport {
      overflow: auto;
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }        
    .js-scroll {
      position: absolute;
      overflow: hidden; /*اى حاجه برا حدود البوكس بتاعها بتختفي*/
      width: 100%;
      top: 0;
      left: 0;
    }
    #intro{
        height: 100vh;
    }
  }