@font-face {
  font-family: "Bombay Display";
  src: url("../fonts/BombayDisplay-Regular.otf");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "SapphireSans";
  src: url("../fonts/SapphireSans.ttf") format("truetype"),
    url("../fonts/BombayDisplay-Regular.otf") format("opentype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans He";
  src: url("../fonts/Open\ Sans\ Hebrew\ Regular.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  direction: rtl;
}

img {
  max-width: 100%;
}
/* hero-section */

.hero-video {
  height: 600px;
  position: relative;
}

.hero-video video {
  height: 600px;
  object-fit: cover;
}

.logo {
  margin-top: 21px;
}

.hero-image-mobile {
  height: 473px;
}

/* our brand */

.our-brand-text {
  background-image: url("../images/our-brand-bg.png");
  background-repeat: no-repeat;
  padding-top: 58px;
  padding-right: 135px;
}

.title {
  font-family: "Bombay Display", serif;
  font-size: 80px;
  font-weight: 400;
  line-height: 108px;
  color: #000046;
  margin-bottom: 4px;
}

.our-brand-text p {
  font-family: "Heebo", serif;
  font-size: 24px;
  line-height: 35.25px;
  font-weight: 300;
  color: #000;
}

.our-brand .right-img img {
  height: 600px;
  object-fit: cover;
}

/* Flip */

.flip-card {
  background-color: transparent;
  height: 640px;
  width: 100%;
  /* perspective: 1000px; */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card-back {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* .flip-card-front {
  background-color: #bbb;
} */

.flip-card-front img,
.flip-card-back img {
  height: 100%;
  width: 100%;
}

.flip .row {
  gap: 9px;
}

/* recepies */

.recepies {
  background-color: #bfe1f5;
  background-size: cover;
  position: relative;
}
.recipe {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.recipe img {
  max-width: fit-content;
}

.recepies-text {
  text-align: center;
  margin-right: -16px;
  padding-top: 36px;
}

.title2 {
  font-family: "Bombay Display", serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 54px;
  color: #000046;
  margin-bottom: 19px;
}

.recepies p {
  font-family: "SapphireSans", serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 36.01px;
  color: #000000;
  direction: ltr;
  text-transform: uppercase;
}

.recipe img {
  margin-right: 168px;
  /* margin-top: 5px; */
}

.owl-nav {
  position: relative;
}

.owl-nav button {
  position: absolute;
  bottom: 221px;
}

.owl-nav button.owl-prev {
  right: 29px;
}

.owl-nav button.owl-next {
  left: 63px;
}

.owl-dots {
  display: none;
}
.recipe-left {
  text-align: center;
  margin: 56px 39px;
}

.recipe-left h2 {
  font-family: "Bombay Display", serif;
  font-size: 90px;
  line-height: 121.5px;
  font-weight: 400;
  color: #000046;
}

.recipe-left h2 span {
  font-family: "Bombay Display", serif;
  font-size: 40px;
  line-height: 54px;
  font-weight: 400;
  color: #000046;
  margin-bottom: 15px;
  margin-top: -24px;
}

.recepies .recipe-left h2::before {
  content: "";
  background-image: url("../images/line.svg");
  width: 100%;
  height: 100%;
  position: absolute;
  background-repeat: no-repeat;
  left: 75px;
  top: 31.7%;
  pointer-events: none;
}
.recipe-left p {
  font-family: "Heebo", serif;
  font-size: 24px;
  line-height: 35.25px;
  font-weight: 300;
  color: #000000;
  direction: rtl;
  text-align: right;
}

.btn {
  border: 1px solid #000046;
  font-family: "Open Sans He";
  font-weight: 400;
  font-size: 17px;
  line-height: 23.15px;
  color: #000046;
  padding: 13px 16px 12px 16px;
  border-radius: 0px;
  margin-top: 30px;
  height: 48px;
}

.btn:hover {
  background-color: #000046;
  color: #fff;
}

.footer {
  background-color: #000046;
  height: 608px;
}

.footer-right-img img {
  margin-top: 5px;
}

.title.color-blue {
  color: #b4f4fd;
  margin-bottom: 0px;
  width: 38vw;
  margin-top: -6px;
}

.footer-center-text {
  margin: 28px 20px 0px 63px;
}

.footer-center-text p {
  font-family: "Heebo", serif;
  font-size: 25px;
  line-height: 36.72px;
  color: #fff;
  font-weight: 200;
  margin-bottom: 9px;
}

.footer-left-img {
  margin-top: 28px;
  margin-left: 24px;
}
.time {
  gap: 81px;
}

.time h6 {
  font-family: "Heebo", serif;
  font-size: 35px;
  line-height: 51.45px;
  color: #fff;
  font-weight: 200;
  text-align: right;
}

.btn-outline-white {
  border: 1px solid #fff;
  font-family: "Open Sans He";
  font-weight: 400;
  font-size: 17px;
  line-height: 23.15px;
  color: #fff;
  height: 48px;
  min-width: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
}

.btn-outline-white:hover {
  background-color: rgba(191, 225, 245, 0.5);
}

.btn-outline-white img {
  margin-left: 10px;
}

.btn-outline-white:hover img {
  margin-left: 10px;
}

.btn-outline-white:nth-child(2) img {
  margin-left: 5px;
}

.button-cont {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.video-overlay-img {
  position: absolute;
  width: 100%;
  top: 300px;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 991px) {
  body {
    display: flex;
    flex-direction: column;
  }

  .title {
    font-size: 50px;
    line-height: 67.5px;
    font-weight: 400;
  }

  .our-brand .right-img {
    display: none;
  }

  .our-brand-text p {
    font-size: 17px;
    line-height: 24.97px;
    font-weight: 300;
    margin-bottom: 31px;
  }

  .our-brand-text {
    background-repeat: no-repeat;
    padding-top: 39px;
    padding-right: 14px;
  }

  .title {
    text-align: center;
    margin-bottom: 9.5px;
  }

  .btn-outline-white img {
    margin-left: 4px;
  }

  .our-brand p br {
    display: none;
  }

  .flip {
    order: 3;
    margin-top: 7px;
  }

  .flip .row {
    gap: 5px;
  }

  .recepies {
    order: 4;
    margin-top: 5px;
    padding: 0px 0px 53px 0px;
  }

  .recipe-left h2 span {
    margin-bottom: 10px;
    margin-top: -9px;
    font-size: 20px;
    line-height: 27px;
  }
  .footer {
    order: 2;
  }

  .flip-card-front img,
  .flip-card-back img {
    height: 364px;
    width: 100%;
    object-fit: cover;
  }

  .flip-card {
    background-color: transparent;
    height: 365px;
  }

  .recipe img {
    max-width: 127px;
    margin-right: 0px;
  }

  .recipe {
    margin-right: 21px;
    margin-top: 40px;
  }

  .recipe {
    display: flex;
    justify-content: flex-start;
    align-items: self-start;
  }

  .recipe-left {
    text-align: center;
    margin: 0px 11px;
  }

  .recipe-left p {
    font-size: 17px;
    line-height: 24.97px;
    text-align: center;
    margin-bottom: 0px;
  }

  .btn {
    height: 36px;
    max-width: 170px;
    display: flex;
    align-items: center;
  }

  .btn-con {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .recipe-left p br {
    display: none;
  }

  .recepies .recipe-left h2::before {
    content: "";
    background-image: url("../images/line-mob.svg");
    left: 7.7%;
    top: 58.1%;
    height: 10%;
  }

  .title2 {
    font-size: 25px;
    line-height: 33.75px;
    margin-bottom: 0px;
  }

  .recepies-text p {
    font-size: 16px;
    line-height: 19.2px;
    width: 184px;
    margin-bottom: 0px;
  }

  .owl-nav button {
    position: absolute;
    top: -165px;
    max-width: 59px;
  }

  .owl-nav button.owl-prev {
    right: 0px;
  }

  .owl-nav button.owl-next {
    left: -2px;
  }

  .recipe-left h2 {
    position: relative;
    font-size: 50px;
    line-height: 67.5px;
  }

  .footer {
    position: relative;
    padding: 25px 17px 31px 15px;
    height: auto;
  }

  .button-cont {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
  }

  .btn-outline-white {
    max-width: 170px;
    margin-top: 0px;
    height: 44px;
  }

  .footer .mob-position {
    position: absolute;
    pointer-events: none;
  }

  .title.color-blue {
    width: auto;
    font-size: 80px;
    line-height: 108px;
  }

  .footer-center-text {
    margin: 0px;
    z-index: 999;
    position: relative;
  }

  .footer-center-text p {
    font-size: 17px;
    line-height: 24.97px;
  }

  .time {
    gap: 30px;
    margin-bottom: 28px;
  }

  .time h6 {
    font-size: 25px;
    line-height: 36.72px;
  }
}

@media only screen and (min-width: 1199px) {
  .flip .row {
    flex-wrap: nowrap;
  }
  /* #recepies-carousel {
    min-height: 600px;
    max-height: 600px;
  } */
  .recepies {
    height: 600px;
  }
  html {
    overflow: visible !important;
  }
}

/* 110% */

@media only screen and (min-width: 1600px) and (max-width: 1750px) {
  .recipe-left {
    text-align: center;
    margin: 56px 23px;
  }

  .title {
    font-size: 60px;
    line-height: 88px;
  }

  .footer-center-text p {
    font-family: "Heebo", serif;
    font-size: 22px;
    line-height: 33.72px;
  }

  .time h6 {
    font-size: 30px;
    line-height: 46.41px;
  }

  .footer-right-img img {
    max-width: fit-content;
  }

  .footer-center-text {
    margin: 28px 28px 0px 28px;
  }

  .title.color-blue {
    width: 34vw;
  }

  .footer-left-img {
    margin-left: 15px;
  }

  .owl-nav button.owl-next {
    left: 30px;
  }
}

/* 125% */

@media only screen and (min-width: 1367px) and (max-width: 1600px) {
  .herosect_img {
    max-width: 25% !important;
  }
  .our-brand-text p {
    font-size: 20px;
    line-height: 31.25px;
  }

  .title {
    font-size: 50px;
    line-height: 98px;
  }

  .flip-card {
    background-color: transparent;
    height: 472px;
  }

  .our-brand .right-img img {
    height: 530px;
  }

  .recipe img {
    margin-right: 80px;
  }

  .recipe-left p {
    font-size: 18px;
    line-height: 28.25px;
  }

  .recepies .recipe-left h2::before {
    width: 26%;
    left: 60px;
    background-size: contain;
  }

  .owl-nav img {
    width: 80%;
  }

  .owl-nav button.owl-next {
    left: -13px;
  }

  .footer-center-text p {
    font-size: 18px;
    line-height: 33.72px;
  }

  .footer {
    height: auto;
  }

  .time h6 {
    font-size: 25px;
    line-height: 41.41px;
  }

  .footer-right-img img {
    max-width: 100%;
    height: 548px;
  }

  .footer-center-text {
    margin: 28px 28px 0px 28px;
  }

  .title.color-blue {
    width: auto;
  }

  .footer-left-img {
    margin-left: 15px;
  }

  .footer .col-auto {
    width: 40%;
  }

  .footer .mob-position,
  .footer .last-img {
    width: 30%;
  }

  .btn-outline-white {
    font-size: 15px;
    line-height: 21.15px;
    height: 45px;
    min-width: 155px;
  }
  .video-overlay-img {
    top: 350px !important;
  }
}

/* 150% */

@media only screen and (min-width: 1270px) and (max-width: 1367px) {
  .video-overlay-img {
    top: 400px !important;
  }
  .herosect_img {
    max-width: 25% !important;
  }
  .our-brand-text {
    padding-right: 90px;
  }
  .our-brand-text p {
    font-size: 16px;
    line-height: 31.25px;
  }

  .title {
    font-size: 50px;
    line-height: 84px;
    margin-top: 0px;
  }

  .flip-card {
    background-color: transparent;
    height: 472px;
  }

  .our-brand .right-img img {
    height: 530px;
  }

  .recipe img {
    margin-right: 37px;
    max-width: 32%;
  }

  .title2 {
    font-size: 33px;
    line-height: 43px;
  }

  .owl-nav button {
    bottom: 127px;
  }

  .recipe-left p {
    font-size: 15px !important;
    line-height: 26.25px !important;
    margin-bottom: 0px;
  }

  .recipe-left h2 {
    font-size: 65px;
    line-height: 105.5px;
  }

  .recepies p {
    font-size: 25px;
    line-height: 31.01px;
  }

  .recipe-left {
    margin: 13px 39px 20px 39px;
  }

  .recepies {
    height: auto !important;
  }

  .recepies .recipe-left h2::before {
    width: 26%;
    left: 48px;
    background-size: contain;
  }

  .owl-nav img {
    width: 65%;
  }

  .owl-nav button.owl-prev {
    right: 6px;
  }

  .owl-nav button.owl-next {
    left: -46px;
  }

  .footer-center-text p {
    font-size: 16px;
    line-height: 31.72px;
    margin-bottom: 0px;
  }

  .footer {
    height: auto;
  }

  .time h6 {
    font-size: 20px;
    line-height: 36.41px;
  }

  .footer-right-img img {
    max-width: 100%;
    height: 444px;
  }

  .footer-center-text {
    margin: 10px 28px 0px 28px;
  }

  .title.color-blue {
    width: auto;
  }

  .footer-left-img {
    margin-left: 15px;
    margin-bottom: 24px;
  }

  .footer .col-auto {
    width: 40%;
  }

  .footer .mob-position,
  .footer .last-img {
    width: 30%;
  }

  .btn-outline-white {
    font-size: 13px;
    line-height: 19.15px;
    height: 40px;
    min-width: 145px;
    margin-top: 8px;
  }
}

@media only screen and (min-width: 991px) and (max-width: 1269px) {
  .flip .row {
    gap: 9px;
    flex-wrap: nowrap;
  }

  .our-brand-text {
    padding-right: 90px;
  }
  .our-brand-text p {
    font-size: 12px;
    line-height: 27.25px;
  }

  .title {
    font-size: 45px;
    line-height: 79px;
    margin-top: 0px;
  }

  .flip-card {
    height: 362px;
  }

  .our-brand .right-img img {
    height: 450px;
  }

  .btn-outline {
    height: 34px;
    padding: 5px 16px;
    font-size: 14px;
  }

  .recipe img {
    margin-right: 37px;
    width: 28% !important;
  }

  .recipe-left p {
    font-size: 11px !important;
    line-height: 22.25px !important;
    margin-bottom: 0px;
  }

  .recipe-left h2 {
    font-size: 65px;
    line-height: 80.5px;
  }

  .recipe-left h2 span {
    font-size: 35px;
    line-height: 35px;
    margin-top: 0px;
  }
  .recepies p {
    font-size: 20px;
    line-height: 26.01px;
  }

  .recipe-left {
    margin: 16px 46px 16px 46px;
  }

  .title2 {
    font-size: 30px;
    line-height: 44px;
  }

  .recepies .recipe-left h2::before {
    width: 23%;
    left: 55px;
    background-size: contain;
    top: 33.7%;
  }

  .owl-nav img {
    width: 50%;
  }

  .recepies-text {
    padding-top: 57px;
  }

  .owl-nav button {
    bottom: 109px;
  }

  .owl-nav button.owl-prev {
    right: 6px;
  }

  .owl-nav button.owl-next {
    left: -46px;
  }

  .footer-center-text p {
    font-size: 12px;
    line-height: 27.72px;
    margin-bottom: 0px;
  }

  .footer {
    height: auto;
  }

  .time h6 {
    font-size: 18px;
    line-height: 31.41px;
  }

  .footer-right-img img {
    max-width: 100%;
    height: 444px;
  }

  .footer-left-img img {
    max-width: 100%;
    height: 400px;
  }

  .footer-center-text {
    margin: 10px 28px 0px 28px;
  }

  .title.color-blue {
    width: auto;
  }

  .footer-left-img {
    margin-left: 15px;
    margin-bottom: 24px;
  }

  .footer .col-auto {
    width: 44%;
  }

  .footer .mob-position,
  .footer .last-img {
    width: 28%;
  }

  .btn-outline-white {
    font-size: 10px;
    line-height: 19.15px;
    height: 34px;
    min-width: 123px;
    padding-top: 3px;
  }

  .btn-outline-white img {
    max-width: 11%;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .recipe {
    justify-content: center;
  }

  .recepies-text p {
    width: 100%;
  }

  .our-brand-text {
    padding-bottom: 39px;
  }

  /* .flip-card {
    background-color: transparent;
    height: 500px;
  }

  .flip-card-front img,
  .flip-card-back img {
    /* height: 500px;
  } */

  .footer .row {
    justify-content: center;
  }

  .flip .row {
    flex-wrap: nowrap;
  }

  .recipe-left p {
    font-size: 14px;
  }

  .recepies-text {
    padding-top: 73px;
  }

  .recepies {
    padding: 0px 0px 20px 0px;
  }

  .recipe {
    margin-top: 71px;
  }

  .owl-nav button {
    top: -108px;
  }

  .recepies .recipe-left h2::before {
    left: 0.7%;
    top: 29.1%;
  }

  .recipe {
    display: flex;
    justify-content: center;
  }

  .recepies .recipe-left h2::before {
    left: -3.3%;
    top: 27.1%;
    width: 39%;
  }
}

@media screen and (max-width: 355px) {
  .title.color-blue {
    width: auto;
    font-size: 60px;
    line-height: 82px;
  }

  .time h6 {
    font-size: 18px;
  }
  .recipe img {
    max-width: 90px;
    margin-top: 30px;
  }

  .recipe-left h2 span {
    margin-top: 5px;
  }

  .recepies .recipe-left h2::before {
    left: 1.7%;
    top: 58.1%;
  }
}
@media screen and (min-width: 500px) and (max-width: 560px) {
  .recepies .recipe-left h2::before {
    left: 19%;
    top: 62.1%;
  }

  .recipe {
    display: flex;
    justify-content: center;
  }
}

@media screen and (max-width: 568px) {
  .footer-center-text img[alt="logo"] {
    width: 245px;
  }
  .mute-toggle {
    display: none !important;
  }

  .time h6 {
    text-align: center;
  }

  .recipe-left img {
    max-width: 156px;
  }

  .flip-card.flip-active .flip-card-inner {
    transform: rotateY(180deg);
  }

  .recipe-left {
    padding-top: 20px;
  }
  /* .mob-position {
    position: relative;
  }
*/
  .footer-right-img img {
    margin-top: -20px;
    margin-right: -10px;
  }

  .recepies .recipe-left h2::before {
    content: "";
    background-image: url("../images/line-mob.svg");
    left: 3.7%;
    top: 58.1%;
    height: 10% !important;
  }
}
.mute-toggle {
  position: absolute;
  top: 31px;
  right: 33px;
  background: transparent;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.mute-toggle:hover {
  background: rgba(0, 0, 0, 0.8);
  padding: 10px;
}
/* Hide all native WebKit media controls */
video::-webkit-media-controls {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
video::-webkit-media-controls {
  display: none;
}

video {
  /* display: none; */
  pointer-events: none;
}