/* ========== summoning the libraries ========== */
/**/
@import '../css/bootstrap.css';
/**/
@import '../css/fontawesome-all.min.css';
/**/
@import '../css/owl.carousel.min.css';
/**/
@import '../css/owl.theme.default.min.css';
/**/
@import '../css/jquery.fancybox.min.css';
/**/
@import '../css/hover-min.css';
/**/
@import '../css/animate.min.css';
/**/
@import '../css/justlazy.css';
/* ========== have been summoned ========== */
/* ========== summoning the assets ========== */
/**/
/* ------------------ 

   Here exists the color scheme 1

------------------ */
/* ========= ---------------->>>>>> LIGHT COLORS <<<<<<----------------- ========= */
/* ========= ---------------->>>>>> DARK COLORS <<<<<<----------------- ========= */
/* ========= --------->>>>>> alert colors <<<<<<-------- ========= */
/* ========= --------->>>>>> brands colors <<<<<<-------- ========= */
/**/
/* ------------------ 

   Here exists the font sizes variables

------------------ */
/* ========= ------->>>>>> goz size fonts <<<<<<------- ========= */
/* ========= ------->>>>>> mon size fonts <<<<<<------- ========= */
/* ========= ------->>>>>> ult size fonts <<<<<<------- ========= */
/* ========= ------->>>>>> big size fonts <<<<<<------- ========= */
/* ========= ------->>>>>> mid size fonts <<<<<<------- ========= */
/* ========= ------->>>>>> sml size fonts <<<<<<------- ========= */
/**/
/* ------------------ 

   Here exists the font imports variables

------------------ */
/* ========= --------->>>>>> font styles <<<<<<-------- ========= */
/* 
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*/
/*
for font-face 
put the fonts folder in the public folder
*/
@import url("https://fonts.googleapis.com/css2?family=Changa:wght@200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
@font-face {
  font-family: "Gotham";
  src: url("../fonts/Gotham-Light.otf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "Gotham";
  src: url("../fonts/Gotham-Medium.otf") format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "Gotham";
  src: url("../fonts/GOTHAM-BOLD.TTF") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "Permanent marker";
  src: url("../fonts/PermanentMarker.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-BoldItalic.otf") format("truetype");
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}
/**/
/* ------------------ 

   Here exists the other web variables

------------------ */
/* ========= ------->>>>>> section background <<<<<<------- ========= */
/* ========= ------->>>>>> border radius <<<<<<------- ========= */
/**/
/* ------------------ 

   Here exists the mixins 

------------------ */
/* ========= ------->>>>>> placeholder mixin <<<<<<------ ========= */
/* end */
/* ========= ------->>>>>> responsive mixin <<<<<<------ ========= */
/* end */
/* ========= ------->>>>>> mobile first responsive mixin <<<<<<------ ========= */
/* end */
/* ========= ------->>>>>> scrollbar style mixin <<<<<<------ ========= */
/* end */
/* ========= ------->>>>>> scrollbar style mixin <<<<<<------ ========= */
/* end */
/**/
/* ------------------ 

   Here exists the mixins for website

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

   Here exists the placeholders 
   (a place holder is a group of style features shared among many classes)

------------------ */
/* =========> overlay layout on anything you want */
/* end */
/* =========> the img tag style */
.loading-sec2 .layers .layer0 .logo img, .mobile-navbar .container .part .logo img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  image-rendering: -webkit-optimize-contrast;
  object-fit: cover;
} /* end */
/* =========> for video box style */
/* end */
/* =========> svg style shape */
/* end */
/* =========> hero section slider style version 1 put this placeholder in the div that has the owl-carousel class */
/* end */
/* =========> Absolute center 1 */
/* end */
/* =========> Absolute center 2 */
/* end */
/* =========> Absolute center 3 */
/* end */
/* =========> continue the paragraph style 1 lines max */
/* end */
/* =========> continue the paragraph style 2 lines max */
/* end */
/* =========> continue the paragraph style 3 lines max */
/* end */
/* =========> continue the paragraph style 4 lines max */
/* end */
/* =========> continue the paragraph style 5 lines max */
.reviews-sec .sec-body .reviews-slider .slider-item .card .card-body p {
  display: flex;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
} /* end */
/**/
/* ------------------ 

   Here exists the website personlized placeholders
   (a place holder is a group of style features shared among many classes)

------------------ */
/* =========> responsive font sizes */
.loading-sec2 .layers .layer0 .slogan {
  font-size: 18px;
}
@media (min-width: 451px) {
  .loading-sec2 .layers .layer0 .slogan {
    font-size: 20px;
  }
}
@media (min-width: 600px) {
  .loading-sec2 .layers .layer0 .slogan {
    font-size: 20px;
  }
}
@media (min-width: 992px) {
  .loading-sec2 .layers .layer0 .slogan {
    font-size: 35px;
  }
}
@media (min-width: 1200px) {
  .loading-sec2 .layers .layer0 .slogan {
    font-size: 40px;
  }
}

.motiv-notif .text-wrap p {
  font-size: 11px;
}
@media (min-width: 451px) {
  .motiv-notif .text-wrap p {
    font-size: 12.5px;
  }
}
@media (min-width: 600px) {
  .motiv-notif .text-wrap p {
    font-size: 13px;
  }
}
@media (min-width: 992px) {
  .motiv-notif .text-wrap p {
    font-size: 14px;
  }
}
@media (min-width: 1200px) {
  .motiv-notif .text-wrap p {
    font-size: 14px;
  }
}

.sps-sec .container .row .card-wrap .card .heading, .hts-sec .container .row .card-wrap .card .heading, .services-sec .container .row .card-wrap .card .heading {
  font-size: 18px;
}
@media (min-width: 451px) {
  .sps-sec .container .row .card-wrap .card .heading, .hts-sec .container .row .card-wrap .card .heading, .services-sec .container .row .card-wrap .card .heading {
    font-size: 20px;
  }
}
@media (min-width: 600px) {
  .sps-sec .container .row .card-wrap .card .heading, .hts-sec .container .row .card-wrap .card .heading, .services-sec .container .row .card-wrap .card .heading {
    font-size: 20px;
  }
}
@media (min-width: 992px) {
  .sps-sec .container .row .card-wrap .card .heading, .hts-sec .container .row .card-wrap .card .heading, .services-sec .container .row .card-wrap .card .heading {
    font-size: 27px;
  }
}
@media (min-width: 1200px) {
  .sps-sec .container .row .card-wrap .card .heading, .hts-sec .container .row .card-wrap .card .heading, .services-sec .container .row .card-wrap .card .heading {
    font-size: 30px;
  }
}

/* =========> general section style */
.law-sec, .checkout-form, .calorie-calc-sec, .packages-sec, .contact-sec, .reviews-sec, .gallery-sec, .faq-sec, .promovideo-sec, .sps-sec, .hts-sec, .services-sec, .common-sec, footer {
  position: relative;
  padding: 50px 0;
  background: transparent;
}
@media (min-width: 715px) {
  .law-sec, .checkout-form, .calorie-calc-sec, .packages-sec, .contact-sec, .reviews-sec, .gallery-sec, .faq-sec, .promovideo-sec, .sps-sec, .hts-sec, .services-sec, .common-sec, footer {
    padding: 70px 0;
  }
}

/* =========> common font size */
.faq-sec .container .sec-body .faq-outer .faq-card .faq-question, footer .footer-upper .row .g-of-links .links li a, .xinput {
  font-size: 14px;
}
@media (min-width: 451px) {
  .faq-sec .container .sec-body .faq-outer .faq-card .faq-question, footer .footer-upper .row .g-of-links .links li a, .xinput {
    font-size: 15px;
  }
}
@media (min-width: 540px) {
  .faq-sec .container .sec-body .faq-outer .faq-card .faq-question, footer .footer-upper .row .g-of-links .links li a, .xinput {
    font-size: 15.5px;
  }
}
@media (min-width: 600px) {
  .faq-sec .container .sec-body .faq-outer .faq-card .faq-question, footer .footer-upper .row .g-of-links .links li a, .xinput {
    font-size: 17px;
  }
}
@media (min-width: 1200px) {
  .faq-sec .container .sec-body .faq-outer .faq-card .faq-question, footer .footer-upper .row .g-of-links .links li a, .xinput {
    font-size: 16px;
  }
}

/* =========> section header center style */
.calorie-calc-sec .sec-header, .packages-sec .container .sec-header, .contact-sec .container .sec-header, .reviews-sec .sec-header, .gallery-sec .sec-header, .promovideo-sec .container .sec-header, .sps-sec .container .sec-header, .hts-sec .container .sec-header, .services-sec .container .sec-header {
  position: relative;
  text-align: center;
  margin-bottom: 40px;
}
@media (min-width: 600px) {
  .calorie-calc-sec .sec-header, .packages-sec .container .sec-header, .contact-sec .container .sec-header, .reviews-sec .sec-header, .gallery-sec .sec-header, .promovideo-sec .container .sec-header, .sps-sec .container .sec-header, .hts-sec .container .sec-header, .services-sec .container .sec-header {
    width: 85%;
    margin: 0 auto 60px auto;
  }
}
@media (min-width: 992px) {
  .calorie-calc-sec .sec-header, .packages-sec .container .sec-header, .contact-sec .container .sec-header, .reviews-sec .sec-header, .gallery-sec .sec-header, .promovideo-sec .container .sec-header, .sps-sec .container .sec-header, .hts-sec .container .sec-header, .services-sec .container .sec-header {
    width: 70%;
  }
}
@media (min-width: 1200px) {
  .calorie-calc-sec .sec-header, .packages-sec .container .sec-header, .contact-sec .container .sec-header, .reviews-sec .sec-header, .gallery-sec .sec-header, .promovideo-sec .container .sec-header, .sps-sec .container .sec-header, .hts-sec .container .sec-header, .services-sec .container .sec-header {
    width: 60%;
  }
}
.calorie-calc-sec .sec-header, .packages-sec .container .sec-header, .contact-sec .container .sec-header, .reviews-sec .sec-header, .gallery-sec .sec-header, .promovideo-sec .container .sec-header, .sps-sec .container .sec-header, .hts-sec .container .sec-header, .services-sec .container .sec-header {
  z-index: 2;
}

/* =========> section image style */
.packages-sec .container .sec-body .packages-slider .slider-item .item-header .sec-image-wrapper, .gallery-sec .sec-body .gallery-slider .slider-item .sec-image-wrapper, .common-sec .container .row .sec-graphic .sec-image-wrapper, .homehero-sec .container .row .sec-graphic .sec-image-wrapper {
  position: relative;
}
.packages-sec .container .sec-body .packages-slider .slider-item .item-header .sec-image-wrapper .sec-image, .gallery-sec .sec-body .gallery-slider .slider-item .sec-image-wrapper .sec-image, .common-sec .container .row .sec-graphic .sec-image-wrapper .sec-image, .homehero-sec .container .row .sec-graphic .sec-image-wrapper .sec-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  image-rendering: -webkit-optimize-contrast;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 7px;
  -o-object-position: top;
  object-position: top;
}

/* =========> input padding */
.faq-sec .container .sec-body .faq-outer .faq-card .faq-question, .xinput {
  padding: 10px 15px;
}
@media (min-width: 600px) {
  .faq-sec .container .sec-body .faq-outer .faq-card .faq-question, .xinput {
    padding: 12px 15px;
  }
}
@media (min-width: 1200px) {
  .faq-sec .container .sec-body .faq-outer .faq-card .faq-question, .xinput {
    padding: 12px 20px;
  }
}

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

   Here exists the global style for some tags & classes

------------------ */
/* ========= --------->>>>>> universal selector */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
} /* end */
/* ========= --------->>>>>> html & body tags */
html, body {
  width: 100%;
  height: 100%;
} /* end */
/* ========= --------->>>>>> body tag */
body {
  overflow-x: hidden;
}
body.hidescroll {
  overflow: hidden;
}

/* end */
/* ========= --------->>>>>> ul tag */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
} /* end */
/* ========= --------->>>>>> ol tag */
ol {
  margin: 0;
  padding: 0;
} /* end */
/* ========= --------->>>>>> container class */
.container {
  position: relative;
}

/* ========= --------->>>>>> row class */
.row {
  display: flex;
  flex-wrap: wrap;
}
.row-nm {
  margin-left: 0;
  margin-right: 0;
}

/* end */
/* ========= --------->>>>>> g-recaptcha class */
.g-recaptcha {
  margin-top: 15px;
}

/* ========= --------->>>>>> stay hidden class */
.stay-hidden {
  display: none !important;
}

/* ========= --------->>>>>> sizer class */
.sizer.with-padding {
  padding: 0 15px;
}

/* end */
/**/
/* ------------------ 

   Here exists the global classes for website

------------------ */
/* ========= --------->>>>>> body tag */
body {
  font-family: "Gotham";
  font-weight: 300;
  background-color: #fff;
  /*
  background-image: url('/storage/web-images/paper-background.jpg');
  background-size: 50%;
  */
  /*
  &::after{
       position: fixed;
       content: "";
       width: 100%;
       height: 100%;
       top: 0;

       background-size: cover;
       opacity: 0.35;
       pointer-events: none;
       z-index: 1;
  }
  */
}

/* ========= --------->>>>>> paragraph tag */
p {
  font-size: 16px;
  color: #000;
}
@media (min-width: 451px) {
  p {
    font-size: 17px;
  }
}
@media (min-width: 540px) {
  p {
    font-size: 18px;
  }
}
@media (min-width: 1200px) {
  p {
    font-size: 16px;
  }
}

@media (min-width: 451px) {
  .container {
    padding: 0 30px;
  }
}

/* ========= --------->>>>>> toppings class
must be inside the container div */
.toppings {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* ========= --------->>>>>> splatter icon style */
.splatter {
  position: absolute;
  width: 150px;
  height: auto;
}
@media (min-width: 540px) {
  .splatter {
    width: 165px;
  }
}
@media (min-width: 600px) {
  .splatter {
    width: 170px;
  }
}

/* ========= --------->>>>>> arrows icon style */
.arrows {
  position: absolute;
  width: 40px;
  height: auto;
  z-index: 2;
}
@media (min-width: 540px) {
  .arrows {
    width: 45px;
  }
}
@media (min-width: 992px) {
  .arrows {
    width: 50px;
  }
}

/* ========= --------->>>>>> dots icon style */
.dots {
  position: absolute;
  width: 17px;
  height: auto;
  z-index: 2;
  filter: invert(1);
}
@media (min-width: 540px) {
  .dots {
    width: 20px;
  }
}
@media (min-width: 992px) {
  .dots {
    width: 25px;
  }
}
@media (min-width: 1200px) {
  .dots {
    width: 25px;
  }
}

/* ========= --------->>>>>> xmark icon style */
.xmark {
  position: absolute;
  width: 70px !important;
  height: auto;
}
@media (min-width: 540px) {
  .xmark {
    width: 90px !important;
  }
}
@media (min-width: 600px) {
  .xmark {
    width: 105px !important;
  }
}
@media (min-width: 992px) {
  .xmark {
    width: 100px !important;
  }
}
@media (min-width: 1200px) {
  .xmark {
    width: 105px !important;
  }
}

/* ========= --------->>>>>> bars icon style */
.bars {
  position: absolute;
  width: 57px !important;
  height: auto;
  z-index: 2;
  filter: brightness(0.5);
}
@media (min-width: 540px) {
  .bars {
    width: 75px !important;
  }
}
@media (min-width: 992px) {
  .bars {
    width: 85px !important;
  }
}
@media (min-width: 1200px) {
  .bars {
    width: 85px;
  }
}

/* ========== have been summoned ========== */
/* ========== summoning the website parts ========== */
/**/
/* ==================> the heading */
.the-heading {
  margin: 0 0 15px 0;
}
@media (min-width: 1200px) {
  .the-heading {
    margin: 0 0 25px 0;
  }
}
.the-heading.style1 {
  text-transform: uppercase;
  font-size: 35px;
}
@media (min-width: 451px) {
  .the-heading.style1 {
    font-size: 40px;
  }
}
@media (min-width: 540px) {
  .the-heading.style1 {
    font-size: 45px;
  }
}
@media (min-width: 600px) {
  .the-heading.style1 {
    font-size: 50px;
  }
}
.the-heading.style1 .special {
  display: block;
  position: relative;
  color: #2146c7;
  font-family: "Permanent marker";
  transform: translateY(0);
  z-index: 1;
}
@media (min-width: 600px) {
  .the-heading.style1 .special {
    transform: translateY(0);
  }
}
@media (min-width: 1200px) {
  .the-heading.style1 .special {
    transform: translateY(0);
    font-size: 54px;
  }
}
.the-heading.style1 .normal {
  display: block;
  position: relative;
  color: #000;
  font-family: "Inter";
}
.the-heading {
  /* end style1 */
}
.the-heading.style2 {
  text-transform: uppercase;
  font-size: 33px;
  display: block;
  position: relative;
  color: #000;
  font-family: "Inter";
}
@media (min-width: 451px) {
  .the-heading.style2 {
    font-size: 38px;
  }
}
@media (min-width: 540px) {
  .the-heading.style2 {
    font-size: 45px;
  }
}
@media (min-width: 992px) {
  .the-heading.style2 {
    font-size: 47px;
  }
}
.the-heading {
  /* end style1 */
}
.the-heading.style3 {
  text-transform: uppercase;
  font-size: 25px;
  display: block;
  position: relative;
  color: #000;
  font-family: "Inter";
}
@media (min-width: 451px) {
  .the-heading.style3 {
    font-size: 35px;
  }
}
@media (min-width: 540px) {
  .the-heading.style3 {
    font-size: 45px;
  }
}
@media (min-width: 600px) {
  .the-heading.style3 {
    font-size: 50px;
  }
}
@media (min-width: 992px) {
  .the-heading.style3 {
    font-size: 53px;
  }
}
.the-heading {
  /* end style1 */
} /* end */
/* ==================> regular eyebrow */
/* end */
/**/
/* =========> xbtn */
.xbtn {
  position: relative;
  padding: 9px 22px;
  background-color: #2146c7;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  outline: none;
  border: 0;
  margin: 10px 0;
  border-radius: 5px;
  font-size: 13px;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 451px) {
  .xbtn {
    font-size: 14.5px;
    padding: 10px 25px;
  }
}
@media (min-width: 540px) {
  .xbtn {
    font-size: 15.5px;
  }
}
@media (min-width: 600px) {
  .xbtn {
    font-size: 16px;
  }
}
@media (min-width: 992px) {
  .xbtn {
    font-size: 15px;
    padding: 13px 30px;
  }
}
@media (min-width: 1200px) {
  .xbtn {
    font-size: 14px;
    padding: 14px 40px 11px 40px;
  }
}
.xbtn:hover {
  background-color: #0008c1;
  color: #fff;
  text-decoration: none;
}
.xbtn i {
  margin-right: 5px;
}

/**/
/* =========> card-outer */
.card-outer {
  position: relative;
  padding: 0 15px;
  margin-bottom: 30px;
} /* end */
/* =========> card1 */
/* =========> card2 */
/* =========> card3 */
/**/
/* =========> drop-menu */
.drop-menu {
  position: absolute;
  background-color: #fff;
  width: 200px;
  max-height: 300px;
  z-index: 1;
  overflow-x: hidden;
  padding: 7px 0;
  transition: all 0.3s ease-in-out;
  /* scrollbar width */
}
.drop-menu::-webkit-scrollbar {
  width: 3px;
  position: absolute;
}
.drop-menu {
  /* scrollbar track */
}
.drop-menu::-webkit-scrollbar-track {
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
}
.drop-menu {
  /* scrollbar handle */
}
.drop-menu::-webkit-scrollbar-thumb {
  background-color: #fcf0e0;
  border-radius: 5px;
}
.drop-menu:hover {
  overflow-y: scroll;
}
.drop-menu.drop-left {
  left: 0;
}
.drop-menu.drop-right {
  right: 0;
}
.drop-menu .dlink-outer {
  position: relative;
}
.drop-menu .dlink-outer .dlink-inner {
  position: relative;
  text-decoration: none;
  display: flex;
  color: #000;
  padding: 11.5px 25px;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  hyphens: manual;
}
.drop-menu .dlink-outer .dlink-inner:hover {
  color: #fcf0e0;
}
.drop-menu .dlink-outer .dlink-inner .icon {
  width: 25px;
}
.drop-menu .dlink-outer .dlink-inner span {
  position: relative;
  display: block;
}
.drop-menu .dlink-outer.active .dlink-inner {
  color: #fcf0e0;
}

/* end */
/* =========> xinput */
.xinput {
  width: 100%;
  border-radius: 7px;
  border: 2px solid black;
  background: transparent;
  outline: 0;
}
.xinput:focus {
  border-color: #0008c1;
}

/* end */
/* =========> xinput-error */
.xinput-error {
  color: red;
  margin-bottom: 10px;
} /* end */
/* ========== have been summoned ========== */
/* ========== summoning the website sections ========== */
/**/
/* ========= --------->>>>>> nav menu */
.mobile-navbar {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: transparent;
  z-index: 7;
  transition: all 0.3s ease-in-out;
}
.mobile-navbar::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  background: linear-gradient(to right, #0008c1, #2146c7);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.mobile-navbar.scrolled .container {
  width: 100%;
  box-shadow: 0 2px 13px -4px #111111;
  margin: 0 auto;
  border-radius: 0;
  transition: all 0.3s ease-in-out;
  /*
  @include mf-responsive(medium-phone-screen){width: 95%;height: 55px;}
  @include mf-responsive(big-phone-screen){width: 96%;}
  @include mf-responsive(tablet-screen){height: 60px;}
  @include mf-responsive(big-tablet-screen){height: 65px;}
  */
}
@media (min-width: 600px) {
  .mobile-navbar.scrolled .container {
    height: 60px;
  }
}
@media (min-width: 715px) {
  .mobile-navbar.scrolled .container {
    height: 65px;
  }
}
@media (min-width: 992px) {
  .mobile-navbar.scrolled .container {
    height: 70px;
  }
}
@media (min-width: 1200px) {
  .mobile-navbar.scrolled .container {
    height: 65px;
    width: 1115px;
    border-radius: 7px;
    margin-top: 10px;
  }
}
.mobile-navbar .container {
  position: relative;
  display: flex;
  background-color: #151515;
  width: 90%;
  margin: 20px auto 0 auto;
  height: 42px;
  border-radius: 7px;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 325px) {
  .mobile-navbar .container {
    width: 93%;
    height: 45px;
  }
}
@media (min-width: 451px) {
  .mobile-navbar .container {
    width: 88%;
    height: 50px;
    margin: 30px auto 0 auto;
  }
}
@media (min-width: 540px) {
  .mobile-navbar .container {
    width: 89%;
    height: 55px;
  }
}
@media (min-width: 600px) {
  .mobile-navbar .container {
    width: 91%;
    height: 60px;
  }
}
@media (min-width: 715px) {
  .mobile-navbar .container {
    width: 92%;
    height: 65px;
  }
}
@media (min-width: 992px) {
  .mobile-navbar .container {
    height: 70px;
    width: 912px;
  }
}
@media (min-width: 1200px) {
  .mobile-navbar .container {
    height: 65px;
    width: 1115px;
  }
}
.mobile-navbar .container::after {
  position: absolute;
  content: "";
  width: 44px;
  height: 40px;
  background-image: url("../images/scribbles-icon4.png");
  background-size: cover;
  top: 16px;
  left: 72px;
}
@media (min-width: 325px) {
  .mobile-navbar .container::after {
    top: 19px;
  }
}
@media (min-width: 451px) {
  .mobile-navbar .container::after {
    left: 103px;
  }
}
@media (min-width: 540px) {
  .mobile-navbar .container::after {
    width: 60px;
    height: 60px;
  }
}
@media (min-width: 600px) {
  .mobile-navbar .container::after {
    left: 130px;
  }
}
@media (min-width: 715px) {
  .mobile-navbar .container::after {
    width: 70px;
    height: 70px;
    left: 170px;
  }
}
@media (min-width: 992px) {
  .mobile-navbar .container::after {
    width: 80px;
    height: 80px;
    left: 300px;
  }
}
.mobile-navbar .container {
  /*
  &::before{
      position: absolute;
      content: "";
      width: 118px;
      height: 75px;
      background-image: url('/storage/web-images/scribbles-icon2.png');
      background-size: cover;
      top: -47px;
      left: 166px;
      z-index: -1;
  }
  */
}
.mobile-navbar .container .part {
  position: relative;
  display: flex;
  align-items: center;
  width: 50%;
}
.mobile-navbar .container .part:nth-child(2) {
  justify-content: flex-end;
}
.mobile-navbar .container .part .logo {
  position: relative;
  display: block;
  width: 50px;
  height: auto;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 451px) {
  .mobile-navbar .container .part .logo {
    width: 60px;
  }
}
@media (min-width: 600px) {
  .mobile-navbar .container .part .logo {
    width: 65px;
  }
}
@media (min-width: 715px) {
  .mobile-navbar .container .part .logo {
    width: 70px;
  }
}
.mobile-navbar .container .part .logo img {
  transform: translate(-5px, 0px);
}
.mobile-navbar .container .part .brand-name {
  display: none;
}
@media (min-width: 992px) {
  .mobile-navbar .container .part .brand-name {
    display: flex;
    margin-left: 8px;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    align-items: center;
  }
  .mobile-navbar .container .part .brand-name span {
    margin-right: 5px;
  }
  .mobile-navbar .container .part .brand-name .special {
    font-family: "Permanent marker";
    color: #2146c7;
  }
  .mobile-navbar .container .part .brand-name .normal {
    font-family: "Inter";
  }
}
.mobile-navbar .container .part .change-lang-btn {
  position: relative;
  color: #fff;
  text-decoration: none;
  outline: none;
  border: 0;
  margin-right: 10px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 451px) {
  .mobile-navbar .container .part .change-lang-btn {
    font-size: 14.5px;
  }
}
@media (min-width: 540px) {
  .mobile-navbar .container .part .change-lang-btn {
    font-size: 15.5px;
  }
}
@media (min-width: 600px) {
  .mobile-navbar .container .part .change-lang-btn {
    font-size: 16px;
  }
}
@media (min-width: 992px) {
  .mobile-navbar .container .part .change-lang-btn {
    font-size: 15px;
  }
}
@media (min-width: 1200px) {
  .mobile-navbar .container .part .change-lang-btn {
    font-size: 14px;
  }
}
.mobile-navbar .container .part .change-lang-btn:hover {
  color: #2146c7;
  text-decoration: none;
}
.mobile-navbar .container .part .change-lang-btn.font-changed {
  font-family: "Rubik", sans-serif;
}
.mobile-navbar .container .part .nav-menu-switch {
  position: relative;
  background: none;
  border: 0;
}
.mobile-navbar .container .part .nav-menu-switch span {
  position: relative;
  display: block;
  width: 25px;
  height: 3px;
  margin-bottom: 0;
  transform: rotate(45deg);
}
.mobile-navbar .container .part .nav-menu-switch span:nth-child(2) {
  transform: rotate(-45deg);
}
.mobile-navbar .container .part .nav-menu-switch span {
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.mobile-navbar .container .part .nav-menu-switch.switch-off span {
  margin-bottom: 5px;
  transform: rotate(0deg);
  transition: all 0.3s ease-in-out;
}
.mobile-navbar .container .part .nav-menu-switch.switch-off span:nth-child(2) {
  transform: rotate(0deg);
  margin-bottom: 0;
}
.mobile-navbar .container .part .xbtn {
  margin-bottom: 0;
  padding-top: 1px;
}

/* end */
/* ========= --------->>>>>> nav menu */
.nav-menu {
  position: fixed;
  width: 100%;
  height: 0%;
  top: 0;
  background-color: #2146c7;
  padding: 120px 30px 30px 30px;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
}
@media (min-width: 715px) {
  .nav-menu {
    padding-top: 165px;
  }
}
@media (min-width: 992px) {
  .nav-menu {
    padding-top: 150px;
    padding-left: 50px;
    padding-right: 50px;
  }
}
@media (min-width: 1200px) {
  .nav-menu {
    padding-left: 30px;
    padding-right: 30px;
  }
}
.nav-menu::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  top: 0;
  left: 0;
  background-color: #0008c1;
  transition: all 0.2s ease-in-out;
  z-index: -1;
}
.nav-menu::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  top: 0;
  left: 0;
  background: linear-gradient(to top, #2146c7, #0008c1);
  transition: all 0.2s ease-in-out;
  z-index: -1;
}
.nav-menu.opened {
  opacity: 1;
  height: 100%;
  pointer-events: all;
  transition: all 0.2s ease-in-out;
}
.nav-menu.opened::before {
  height: 100%;
  transition-delay: 0.2s;
}
.nav-menu.opened::after {
  height: 100%;
  transition-delay: 0.4s;
}
.nav-menu.opened .nav-links ul li {
  opacity: 1;
  transition: all 0.3s ease-in-out;
}
.nav-menu.opened .nav-links ul li:nth-child(1) {
  transition-delay: 0.6s;
}
.nav-menu.opened .nav-links ul li:nth-child(2) {
  transition-delay: 0.8s;
}
.nav-menu.opened .nav-links ul li:nth-child(3) {
  transition-delay: 1s;
}
.nav-menu.opened .nav-links ul li:nth-child(4) {
  transition-delay: 1.2s;
}
.nav-menu.opened .nav-links ul li:nth-child(5) {
  transition-delay: 1.4s;
}
.nav-menu.opened .nav-links ul li:nth-child(6) {
  transition-delay: 1.6s;
}
.nav-menu.opened .nav-links ul li a {
  opacity: 1;
}
@media (min-width: 1200px) {
  .nav-menu .nav-links {
    width: 1112px;
    margin: 0 auto;
  }
}
.nav-menu .nav-links ul li {
  display: block;
  margin-bottom: 25px;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.nav-menu .nav-links ul li a {
  display: block;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0;
}
@media (min-width: 715px) {
  .nav-menu .nav-links ul li a {
    font-size: 20px;
  }
}

/* end */
.whatsapp-btn {
  position: fixed;
  bottom: 15px;
  left: 15px;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  background-color: #25D366;
  text-transform: uppercase;
  color: #fff;
  outline: none;
  border: 0;
  border-radius: 5px;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 451px) {
  .whatsapp-btn {
    font-size: 14.5px;
    padding: 10px 18px;
  }
}
@media (min-width: 540px) {
  .whatsapp-btn {
    font-size: 15.5px;
  }
}
@media (min-width: 600px) {
  .whatsapp-btn {
    font-size: 16px;
  }
}
@media (min-width: 992px) {
  .whatsapp-btn {
    font-size: 15px;
    padding: 13px 20px;
  }
}
@media (min-width: 1200px) {
  .whatsapp-btn {
    font-size: 18px;
    padding: 12px 20px 9px 20px;
  }
}
.whatsapp-btn i {
  margin-left: 5px;
}
.whatsapp-btn:hover {
  color: #fff;
  text-decoration: none;
}
.whatsapp-btn.appear {
  opacity: 1;
  pointer-events: all;
  transition: all 0.3s ease-in-out;
}

/**/
/* ========= --------->>>>>> footer */
footer {
  padding-bottom: 0 !important;
  z-index: 5;
}
footer .xmark {
  top: -30px;
  right: 30px;
}
@media (min-width: 600px) {
  footer .xmark {
    top: -134px;
  }
}
footer .footer-upper {
  position: relative;
  background-color: #111111;
  padding: 80px 0 30px 0;
  border-top: 7px solid #2146c7;
}
footer .footer-upper .toppings .splatter {
  top: -163px;
  right: 15px;
}
@media (min-width: 540px) {
  footer .footer-upper .toppings .splatter {
    top: -171px;
  }
}
@media (min-width: 600px) {
  footer .footer-upper .toppings .splatter {
    top: -174px;
  }
}
@media (min-width: 992px) {
  footer .footer-upper .toppings .splatter {
    top: -173px;
  }
}
footer .footer-upper .row .g-of-links {
  position: relative;
  width: 100%;
  padding: 0 15px;
  margin-bottom: 50px;
}
@media (min-width: 600px) {
  footer .footer-upper .row .g-of-links {
    width: 50%;
  }
}
@media (min-width: 992px) {
  footer .footer-upper .row .g-of-links {
    width: 33.33333333%;
  }
}
@media (min-width: 600px) {
  footer .footer-upper .row .g-of-links:last-child {
    width: 100%;
  }
}
@media (min-width: 992px) {
  footer .footer-upper .row .g-of-links:last-child {
    width: 33.33333333%;
  }
}
footer .footer-upper .row .g-of-links .the-heading {
  color: #fff;
}
footer .footer-upper .row .g-of-links .links li {
  margin-bottom: 7px;
}
footer .footer-upper .row .g-of-links .links li:last-child {
  margin-bottom: 0;
}
footer .footer-upper .row .g-of-links .links li a {
  position: relative;
  text-decoration: none;
  color: #fff;
}
@media (min-width: 1200px) {
  footer .footer-upper .row .g-of-links .links li a {
    transition: all 0.3s ease-in-out;
  }
  footer .footer-upper .row .g-of-links .links li a:hover {
    color: #0008c1;
  }
}
footer .footer-upper .row .g-of-links p a {
  text-decoration: none;
  color: #fff;
}
@media (min-width: 1200px) {
  footer .footer-upper .row .g-of-links p a {
    transition: all 0.3s ease-in-out;
  }
  footer .footer-upper .row .g-of-links p a:hover {
    color: #0008c1;
  }
}
footer .footer-upper .row .g-of-links .icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
footer .footer-upper .row .g-of-links .icons li {
  margin-right: 7px;
}
@media (min-width: 715px) {
  footer .footer-upper .row .g-of-links .icons li {
    margin-right: 15px;
  }
}
@media (min-width: 1200px) {
  footer .footer-upper .row .g-of-links .icons li {
    width: 18%;
  }
}
footer .footer-upper .row .g-of-links .icons li img {
  width: 50px;
  height: auto;
}
@media (min-width: 1200px) {
  footer .footer-upper .row .g-of-links .icons li img {
    width: 100%;
  }
}
footer .footer-lower {
  position: relative;
  padding: 30px 0;
  background-color: #111111;
}
footer .footer-lower p {
  text-align: center;
  margin: 0;
  color: #fff;
}
footer .footer-lower p a {
  color: #fff;
}

/* end */
/**/
/* ========= --------->>>>>> home hero sec */
.homehero-sec {
  position: relative;
  padding: 100px 0 80px 0;
  overflow-x: hidden;
  background: transparent;
  padding-bottom: 0 !important;
}
@media (min-width: 325px) {
  .homehero-sec {
    padding: 125px 0 80px 0;
  }
}
@media (min-width: 540px) {
  .homehero-sec {
    padding: 145px 0 80px 0;
  }
}
@media (min-width: 600px) {
  .homehero-sec {
    padding: 185px 0 80px 0;
  }
}
@media (min-width: 715px) {
  .homehero-sec {
    padding: 200px 0 100px 0;
  }
}
@media (min-width: 992px) {
  .homehero-sec {
    padding: 220px 0 50px 0;
  }
}
.homehero-sec .container .toppings .splatter {
  right: 0;
  bottom: 42%;
}
@media (min-width: 992px) {
  .homehero-sec .container .toppings .splatter {
    top: -178px;
    right: -34px;
    z-index: 3;
    bottom: auto;
  }
}
@media (min-width: 1200px) {
  .homehero-sec .container .toppings .splatter {
    right: 0px;
    top: -139px;
    bottom: auto;
  }
}
.homehero-sec .container .row {
  flex-direction: column;
}
@media (min-width: 992px) {
  .homehero-sec .container .row {
    flex-direction: row;
  }
}
.homehero-sec .container .row .sec-text {
  position: relative;
  padding: 0 15px;
  margin-bottom: 50px;
  z-index: 2;
}
@media (min-width: 540px) {
  .homehero-sec .container .row .sec-text {
    margin-bottom: 75px;
  }
}
@media (min-width: 992px) {
  .homehero-sec .container .row .sec-text {
    width: 55%;
    padding-right: 60px;
  }
}
@media (min-width: 1200px) {
  .homehero-sec .container .row .sec-text {
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .homehero-sec .container .row .sec-text p {
    width: 70%;
  }
}
.homehero-sec .container .row .sec-text .xbtn {
  margin-top: 25px;
}
.homehero-sec .container .row .sec-graphic {
  position: relative;
  z-index: 2;
  display: block;
  padding: 0 15px;
}
@media (min-width: 992px) {
  .homehero-sec .container .row .sec-graphic {
    width: 45%;
  }
}
@media (min-width: 1200px) {
  .homehero-sec .container .row .sec-graphic {
    width: 50%;
  }
}
.homehero-sec .container .row .sec-graphic .sec-image-wrapper {
  /*
  width: 225px;
  height: 335px;
  */
  width: 100%;
  height: 380px;
}
@media (min-width: 325px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper {
    width: 100%;
    height: 425px;
  }
}
@media (min-width: 451px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper {
    height: 475px;
  }
}
@media (min-width: 600px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper {
    height: 655px;
  }
}
@media (min-width: 715px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper {
    height: 485px;
  }
}
@media (min-width: 992px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper {
    height: 460px;
    transform: translateY(-45px);
  }
}
@media (min-width: 1200px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper {
    height: 445px;
    transform: translateY(-40px);
  }
}
.homehero-sec .container .row .sec-graphic .sec-image-wrapper {
  /*
  @include mf-responsive(medium-phone-screen){width: 80%;height: 355px;}
  @include mf-responsive(verybig-phone-screen){width: 75%;height: 430px;}
  @include mf-responsive(tablet-screen){height: 500px;}
  @include mf-responsive(big-tablet-screen){width: 65%;}
  @include mf-responsive(medium-screen){width: 330px;height: 460px;transform: translateY(-75px)}
  @include mf-responsive(large-screen){width: 48%;height: 350px;transform: translateY(0px)}
  */
}
.homehero-sec .container .row .sec-graphic .sec-image-wrapper:nth-child(1) {
  z-index: 1;
}
.homehero-sec .container .row .sec-graphic .sec-image-wrapper .xmark {
  left: -33px;
}
@media (min-width: 540px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper .xmark {
    left: -46px;
  }
}
@media (min-width: 600px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper .xmark {
    left: -51px;
  }
}
@media (min-width: 992px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper .xmark {
    left: -51px;
  }
}
@media (min-width: 1200px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper .xmark {
    left: -53px;
  }
}
.homehero-sec .container .row .sec-graphic .sec-image-wrapper .xmark.no1 {
  top: 78px;
}
@media (min-width: 540px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper .xmark.no1 {
    top: 83px;
  }
}
@media (min-width: 600px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper .xmark.no1 {
    top: 98px;
  }
}
@media (min-width: 992px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper .xmark.no1 {
    top: 105px;
  }
}
@media (min-width: 1200px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper .xmark.no1 {
    left: -10%;
    top: 119px;
  }
}
.homehero-sec .container .row .sec-graphic .sec-image-wrapper .xmark.no2 {
  top: 156px;
}
@media (min-width: 540px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper .xmark.no2 {
    top: 184px;
  }
}
@media (min-width: 600px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper .xmark.no2 {
    top: 220px;
  }
}
@media (min-width: 992px) {
  .homehero-sec .container .row .sec-graphic .sec-image-wrapper .xmark.no2 {
    top: 220px;
  }
}
/* end */
/* ========= --------->>>>>> hero sec */
.hero-sec {
  position: relative;
  padding: 150px 0 0 0;
  overflow-x: hidden;
  background: transparent;
}
@media (min-width: 600px) {
  .hero-sec {
    padding: 185px 0 0 0;
  }
}
@media (min-width: 715px) {
  .hero-sec {
    padding: 200px 0 30px 0;
  }
}
@media (min-width: 992px) {
  .hero-sec {
    padding: 220px 0 80px 0;
  }
}
.hero-sec .container .toppings .dots {
  left: 15px;
  top: -10px;
}
@media (min-width: 540px) {
  .hero-sec .container .toppings .dots {
    left: 30px;
    top: -25px;
  }
}
@media (min-width: 992px) {
  .hero-sec .container .toppings .dots {
    top: -55px;
  }
}
.hero-sec .container .toppings .bars {
  bottom: 7px;
  right: 15px;
}
@media (min-width: 540px) {
  .hero-sec .container .toppings .bars {
    right: 30px;
    bottom: -4px;
  }
}
@media (min-width: 715px) {
  .hero-sec .container .toppings .bars {
    bottom: -20px;
  }
}
@media (min-width: 992px) {
  .hero-sec .container .toppings .bars {
    bottom: -55px;
  }
}
.hero-sec .container .sec-text {
  position: relative;
  margin-bottom: 50px;
  z-index: 2;
}
@media (min-width: 1200px) {
  .hero-sec .container .sec-text {
    text-align: center;
  }
}

/* end */
/**/
/* =========> a section for one block content like image on left content on right kind of stuff */
.common-sec.rotate-bg::after {
  transform: rotate(180deg);
}
.common-sec .toppings.distribution1 .splatter {
  right: 0;
  top: 0;
}
@media (min-width: 992px) {
  .common-sec .toppings.distribution1 .splatter {
    right: auto;
    left: -111px;
    top: auto;
    bottom: -60px;
  }
}
.common-sec .toppings.distribution1 .bars {
  bottom: -41px;
  left: 15px;
}
@media (min-width: 451px) {
  .common-sec .toppings.distribution1 .bars {
    left: 30px;
  }
}
@media (min-width: 992px) {
  .common-sec .toppings.distribution1 .bars {
    left: auto;
    right: 345px;
  }
}
@media (min-width: 1200px) {
  .common-sec .toppings.distribution1 .bars {
    display: none;
  }
}
.common-sec .toppings.distribution1 .dots {
  top: 240px;
  left: 18px;
}
@media (min-width: 325px) {
  .common-sec .toppings.distribution1 .dots {
    top: 230px;
  }
}
@media (min-width: 451px) {
  .common-sec .toppings.distribution1 .dots {
    left: 30px;
  }
}
@media (min-width: 992px) {
  .common-sec .toppings.distribution1 .dots {
    top: -27px;
    left: auto;
    right: 428px;
  }
}
.common-sec .toppings.distribution1 .arrows {
  right: 30px;
  top: -30px;
}
@media (min-width: 325px) {
  .common-sec .toppings.distribution1 .arrows {
    right: 30px;
  }
}
@media (min-width: 451px) {
  .common-sec .toppings.distribution1 .arrows {
    right: 50px;
  }
}
@media (min-width: 992px) {
  .common-sec .toppings.distribution1 .arrows {
    right: auto;
    left: 47%;
    top: 150px;
    transform: translateX(-50%) rotate(180deg);
  }
}
.common-sec .toppings.distribution2 .splatter {
  top: 0;
}
@media (min-width: 992px) {
  .common-sec .toppings.distribution2 .splatter {
    right: -111px;
    top: auto;
    bottom: -60px;
  }
}
.common-sec .toppings.distribution2 .bars {
  bottom: -41px;
  left: 15px;
}
@media (min-width: 451px) {
  .common-sec .toppings.distribution2 .bars {
    left: 30px;
  }
}
@media (min-width: 1200px) {
  .common-sec .toppings.distribution2 .bars {
    display: none;
  }
}
.common-sec .toppings.distribution2 .dots {
  top: 240px;
  right: 18px;
}
@media (min-width: 325px) {
  .common-sec .toppings.distribution2 .dots {
    top: 230px;
  }
}
@media (min-width: 451px) {
  .common-sec .toppings.distribution2 .dots {
    right: 30px;
  }
}
@media (min-width: 992px) {
  .common-sec .toppings.distribution2 .dots {
    top: -27px;
    left: 375px;
    right: auto;
  }
}
.common-sec .toppings.distribution2 .arrows {
  left: 15px;
  top: -30px;
  transform: rotate(180deg);
}
@media (min-width: 325px) {
  .common-sec .toppings.distribution2 .arrows {
    left: 30px;
  }
}
@media (min-width: 451px) {
  .common-sec .toppings.distribution2 .arrows {
    left: 50px;
  }
}
@media (min-width: 992px) {
  .common-sec .toppings.distribution2 .arrows {
    left: auto;
    right: 43%;
    top: 150px;
    transform: translateX(-50%) rotate(0deg);
  }
}
.common-sec .container .row {
  flex-direction: column;
}
@media (min-width: 992px) {
  .common-sec .container .row {
    flex-direction: row;
  }
}
.common-sec .container .row .sec-graphic {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 15px;
  margin-bottom: 20px;
}
@media (min-width: 992px) {
  .common-sec .container .row .sec-graphic {
    width: 50%;
    justify-content: flex-start;
  }
}
@media (min-width: 1200px) {
  .common-sec .container .row .sec-graphic {
    display: block;
  }
}
.common-sec .container .row .sec-graphic .sec-image-wrapper {
  position: relative;
  width: 100%;
  height: 380px;
}
@media (min-width: 325px) {
  .common-sec .container .row .sec-graphic .sec-image-wrapper {
    width: 100%;
    height: 425px;
  }
}
@media (min-width: 451px) {
  .common-sec .container .row .sec-graphic .sec-image-wrapper {
    height: 475px;
  }
}
@media (min-width: 600px) {
  .common-sec .container .row .sec-graphic .sec-image-wrapper {
    height: 655px;
  }
}
@media (min-width: 715px) {
  .common-sec .container .row .sec-graphic .sec-image-wrapper {
    height: 485px;
  }
}
@media (min-width: 992px) {
  .common-sec .container .row .sec-graphic .sec-image-wrapper {
    height: 460px;
  }
}
@media (min-width: 1200px) {
  .common-sec .container .row .sec-graphic .sec-image-wrapper {
    height: 445px;
  }
}
.common-sec .container .row .sec-text {
  position: relative;
  width: 100%;
  padding: 0 15px;
  z-index: 2;
}
@media (min-width: 992px) {
  .common-sec .container .row .sec-text {
    width: 50%;
    padding-left: 60px;
  }
}
.common-sec .container .row .sec-text p {
  margin-bottom: 20px;
}
.common-sec .container .row .sec-text ul {
  list-style: disc;
  padding: 0 15px;
  margin-bottom: 20px;
}
.common-sec .container .row .sec-text ul li {
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 16px;
  color: #000;
}
@media (min-width: 451px) {
  .common-sec .container .row .sec-text ul li {
    font-size: 17px;
  }
}
@media (min-width: 540px) {
  .common-sec .container .row .sec-text ul li {
    font-size: 18px;
  }
}
@media (min-width: 1200px) {
  .common-sec .container .row .sec-text ul li {
    font-size: 17px;
  }
}
@media (min-width: 992px) {
  .common-sec.full-height-img .container .row .sec-graphic .sec-image-wrapper {
    height: 100%;
  }
}
@media (min-width: 992px) {
  .common-sec.full-height-img .container .row .sec-graphic .sec-image-wrapper {
    height: 100%;
  }
}
.common-sec {
  /* >>>>>>>>>>>>>>> flip <<<<<<<<<<<<<<<<<<< */
}
@media (min-width: 715px) {
  .common-sec.flip .container .row {
    flex-direction: row-reverse;
  }
}
@media (min-width: 715px) {
  .common-sec.flip .container .row .sec-graphic {
    justify-content: flex-end;
  }
}
@media (min-width: 992px) {
  .common-sec.flip .container .row .sec-graphic {
    justify-content: flex-end;
  }
}
@media (min-width: 1200px) {
  .common-sec.flip .container .row .sec-graphic .sec-image-wrapper {
    float: right;
  }
}
@media (min-width: 715px) {
  .common-sec.flip .container .row .sec-text {
    padding-left: 15px;
    padding-right: 25px;
  }
}
@media (min-width: 992px) {
  .common-sec.flip .container .row .sec-text {
    padding-left: 15px;
    padding-right: 60px;
  }
}

/* end */
/**/
/* =========> a section for one block content like image on left content on right kind of stuff */
.services-sec .container .toppings.distribution1 .splatter {
  right: 0;
  top: 0;
}
@media (min-width: 992px) {
  .services-sec .container .toppings.distribution1 .splatter {
    right: auto;
    left: -111px;
    top: auto;
    bottom: -60px;
  }
}
.services-sec .container .toppings.distribution1 .bars {
  bottom: -41px;
  left: 15px;
}
@media (min-width: 451px) {
  .services-sec .container .toppings.distribution1 .bars {
    left: 30px;
  }
}
@media (min-width: 992px) {
  .services-sec .container .toppings.distribution1 .bars {
    left: auto;
    right: 345px;
  }
}
@media (min-width: 1200px) {
  .services-sec .container .toppings.distribution1 .bars {
    display: none;
  }
}
.services-sec .container .toppings.distribution1 .dots {
  top: 240px;
  left: 18px;
}
@media (min-width: 325px) {
  .services-sec .container .toppings.distribution1 .dots {
    top: 230px;
  }
}
@media (min-width: 451px) {
  .services-sec .container .toppings.distribution1 .dots {
    left: 30px;
  }
}
@media (min-width: 992px) {
  .services-sec .container .toppings.distribution1 .dots {
    top: -27px;
    left: auto;
    right: 428px;
  }
}
.services-sec .container .toppings.distribution1 .arrows {
  right: 30px;
  top: -30px;
}
@media (min-width: 325px) {
  .services-sec .container .toppings.distribution1 .arrows {
    right: 30px;
  }
}
@media (min-width: 451px) {
  .services-sec .container .toppings.distribution1 .arrows {
    right: 50px;
  }
}
@media (min-width: 992px) {
  .services-sec .container .toppings.distribution1 .arrows {
    right: auto;
    left: 47%;
    top: 150px;
    transform: translateX(-50%) rotate(180deg);
  }
}
.services-sec .container .toppings.distribution2 .splatter {
  top: 0;
}
@media (min-width: 992px) {
  .services-sec .container .toppings.distribution2 .splatter {
    right: -111px;
    top: auto;
    bottom: -60px;
  }
}
.services-sec .container .toppings.distribution2 .bars {
  bottom: -41px;
  left: 15px;
}
@media (min-width: 451px) {
  .services-sec .container .toppings.distribution2 .bars {
    left: 30px;
  }
}
@media (min-width: 1200px) {
  .services-sec .container .toppings.distribution2 .bars {
    display: none;
  }
}
.services-sec .container .toppings.distribution2 .dots {
  top: 240px;
  right: 18px;
}
@media (min-width: 325px) {
  .services-sec .container .toppings.distribution2 .dots {
    top: 230px;
  }
}
@media (min-width: 451px) {
  .services-sec .container .toppings.distribution2 .dots {
    right: 30px;
  }
}
@media (min-width: 992px) {
  .services-sec .container .toppings.distribution2 .dots {
    top: -27px;
    left: 375px;
    right: auto;
  }
}
.services-sec .container .toppings.distribution2 .arrows {
  left: 15px;
  top: -30px;
  transform: rotate(180deg);
}
@media (min-width: 325px) {
  .services-sec .container .toppings.distribution2 .arrows {
    left: 30px;
  }
}
@media (min-width: 451px) {
  .services-sec .container .toppings.distribution2 .arrows {
    left: 50px;
  }
}
@media (min-width: 992px) {
  .services-sec .container .toppings.distribution2 .arrows {
    left: auto;
    right: 43%;
    top: 150px;
    transform: translateX(-50%) rotate(0deg);
  }
}
.services-sec .container .row {
  flex-direction: column;
}
@media (min-width: 715px) {
  .services-sec .container .row {
    flex-direction: row;
  }
}
.services-sec .container .row .card-wrap {
  position: relative;
  width: 100%;
  padding: 0 15px;
  margin-bottom: 30px;
}
@media (min-width: 715px) {
  .services-sec .container .row .card-wrap {
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .services-sec .container .row .card-wrap {
    width: 33.3333%;
  }
}
.services-sec .container .row .card-wrap .card {
  background-color: #ebebeb;
  padding: 30px 15px;
  border-radius: 7px;
  text-align: center;
}
@media (min-width: 715px) {
  .services-sec .container .row .card-wrap .card {
    height: 100%;
  }
}
@media (min-width: 992px) {
  .services-sec .container .row .card-wrap .card {
    padding: 30px;
  }
}
.services-sec .container .row .card-wrap .card .heading {
  font-family: "Inter";
  margin-bottom: 20px;
  font-weight: 700;
  color: #151515;
}
.services-sec .container .row .card-wrap .card p {
  margin-bottom: 20px;
}
.services-sec .container .row .card-wrap .card img {
  width: 100px;
}

/* end */
/**/
/* =========> a section for one block content like image on left content on right kind of stuff */
.hts-sec .container .toppings.distribution1 .splatter {
  right: 0;
  top: 0;
}
@media (min-width: 992px) {
  .hts-sec .container .toppings.distribution1 .splatter {
    right: auto;
    left: -111px;
    top: auto;
    bottom: -60px;
  }
}
.hts-sec .container .toppings.distribution1 .bars {
  bottom: -41px;
  left: 15px;
}
@media (min-width: 451px) {
  .hts-sec .container .toppings.distribution1 .bars {
    left: 30px;
  }
}
@media (min-width: 992px) {
  .hts-sec .container .toppings.distribution1 .bars {
    left: auto;
    right: 345px;
  }
}
@media (min-width: 1200px) {
  .hts-sec .container .toppings.distribution1 .bars {
    display: none;
  }
}
.hts-sec .container .toppings.distribution1 .dots {
  top: 240px;
  left: 18px;
}
@media (min-width: 325px) {
  .hts-sec .container .toppings.distribution1 .dots {
    top: 230px;
  }
}
@media (min-width: 451px) {
  .hts-sec .container .toppings.distribution1 .dots {
    left: 30px;
  }
}
@media (min-width: 992px) {
  .hts-sec .container .toppings.distribution1 .dots {
    top: -27px;
    left: auto;
    right: 428px;
  }
}
.hts-sec .container .toppings.distribution1 .arrows {
  right: 30px;
  top: -30px;
}
@media (min-width: 325px) {
  .hts-sec .container .toppings.distribution1 .arrows {
    right: 30px;
  }
}
@media (min-width: 451px) {
  .hts-sec .container .toppings.distribution1 .arrows {
    right: 50px;
  }
}
@media (min-width: 992px) {
  .hts-sec .container .toppings.distribution1 .arrows {
    right: auto;
    left: 47%;
    top: 150px;
    transform: translateX(-50%) rotate(180deg);
  }
}
.hts-sec .container .toppings.distribution2 .splatter {
  top: 0;
}
@media (min-width: 992px) {
  .hts-sec .container .toppings.distribution2 .splatter {
    right: -111px;
    top: auto;
    bottom: -60px;
  }
}
.hts-sec .container .toppings.distribution2 .bars {
  bottom: -41px;
  left: 15px;
}
@media (min-width: 451px) {
  .hts-sec .container .toppings.distribution2 .bars {
    left: 30px;
  }
}
@media (min-width: 1200px) {
  .hts-sec .container .toppings.distribution2 .bars {
    display: none;
  }
}
.hts-sec .container .toppings.distribution2 .dots {
  top: 240px;
  right: 18px;
}
@media (min-width: 325px) {
  .hts-sec .container .toppings.distribution2 .dots {
    top: 230px;
  }
}
@media (min-width: 451px) {
  .hts-sec .container .toppings.distribution2 .dots {
    right: 30px;
  }
}
@media (min-width: 992px) {
  .hts-sec .container .toppings.distribution2 .dots {
    top: -27px;
    left: 375px;
    right: auto;
  }
}
.hts-sec .container .toppings.distribution2 .arrows {
  left: 15px;
  top: -30px;
  transform: rotate(180deg);
}
@media (min-width: 325px) {
  .hts-sec .container .toppings.distribution2 .arrows {
    left: 30px;
  }
}
@media (min-width: 451px) {
  .hts-sec .container .toppings.distribution2 .arrows {
    left: 50px;
  }
}
@media (min-width: 992px) {
  .hts-sec .container .toppings.distribution2 .arrows {
    left: auto;
    right: 43%;
    top: 150px;
    transform: translateX(-50%) rotate(0deg);
  }
}
.hts-sec .container .row {
  flex-direction: column;
}
@media (min-width: 715px) {
  .hts-sec .container .row {
    flex-direction: row;
  }
}
.hts-sec .container .row .card-wrap {
  position: relative;
  width: 100%;
  padding: 0 15px;
  margin-bottom: 30px;
}
@media (min-width: 715px) {
  .hts-sec .container .row .card-wrap {
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .hts-sec .container .row .card-wrap {
    width: 25%;
  }
}
.hts-sec .container .row .card-wrap .card {
  background-color: #ebebeb;
  padding: 30px 15px;
  border-radius: 7px;
  text-align: center;
}
@media (min-width: 715px) {
  .hts-sec .container .row .card-wrap .card {
    height: 100%;
  }
}
@media (min-width: 992px) {
  .hts-sec .container .row .card-wrap .card {
    padding: 30px;
  }
}
.hts-sec .container .row .card-wrap .card img {
  width: 100px;
  margin-bottom: 15px;
  margin-top: 20px;
}
.hts-sec .container .row .card-wrap .card .heading {
  font-family: "Inter";
  margin-bottom: 20px;
  font-weight: 700;
  color: #151515;
}
.hts-sec .container .row .card-wrap .card p {
  margin-bottom: 0px;
}

/* end */
/**/
/* =========> a section for one block content like image on left content on right kind of stuff */
@media (min-width: 715px) {
  .sps-sec.special {
    padding-bottom: 0;
  }
}
@media (min-width: 992px) {
  .sps-sec.special {
    padding-bottom: 40px;
  }
}
.sps-sec .container .toppings.distribution1 .splatter {
  right: 0;
  top: 0;
}
@media (min-width: 992px) {
  .sps-sec .container .toppings.distribution1 .splatter {
    right: auto;
    left: -111px;
    top: auto;
    bottom: -60px;
  }
}
.sps-sec .container .toppings.distribution1 .bars {
  bottom: -41px;
  left: 15px;
}
@media (min-width: 451px) {
  .sps-sec .container .toppings.distribution1 .bars {
    left: 30px;
  }
}
@media (min-width: 992px) {
  .sps-sec .container .toppings.distribution1 .bars {
    left: auto;
    right: 345px;
  }
}
@media (min-width: 1200px) {
  .sps-sec .container .toppings.distribution1 .bars {
    display: none;
  }
}
.sps-sec .container .toppings.distribution1 .dots {
  top: 240px;
  left: 18px;
}
@media (min-width: 325px) {
  .sps-sec .container .toppings.distribution1 .dots {
    top: 230px;
  }
}
@media (min-width: 451px) {
  .sps-sec .container .toppings.distribution1 .dots {
    left: 30px;
  }
}
@media (min-width: 992px) {
  .sps-sec .container .toppings.distribution1 .dots {
    top: -27px;
    left: auto;
    right: 428px;
  }
}
.sps-sec .container .toppings.distribution1 .arrows {
  right: 30px;
  top: -30px;
}
@media (min-width: 325px) {
  .sps-sec .container .toppings.distribution1 .arrows {
    right: 30px;
  }
}
@media (min-width: 451px) {
  .sps-sec .container .toppings.distribution1 .arrows {
    right: 50px;
  }
}
@media (min-width: 992px) {
  .sps-sec .container .toppings.distribution1 .arrows {
    right: auto;
    left: 47%;
    top: 150px;
    transform: translateX(-50%) rotate(180deg);
  }
}
.sps-sec .container .toppings.distribution2 .splatter {
  top: 0;
}
@media (min-width: 992px) {
  .sps-sec .container .toppings.distribution2 .splatter {
    right: -111px;
    top: auto;
    bottom: -60px;
  }
}
.sps-sec .container .toppings.distribution2 .bars {
  bottom: -41px;
  left: 15px;
}
@media (min-width: 451px) {
  .sps-sec .container .toppings.distribution2 .bars {
    left: 30px;
  }
}
@media (min-width: 1200px) {
  .sps-sec .container .toppings.distribution2 .bars {
    display: none;
  }
}
.sps-sec .container .toppings.distribution2 .dots {
  top: 240px;
  right: 18px;
}
@media (min-width: 325px) {
  .sps-sec .container .toppings.distribution2 .dots {
    top: 230px;
  }
}
@media (min-width: 451px) {
  .sps-sec .container .toppings.distribution2 .dots {
    right: 30px;
  }
}
@media (min-width: 992px) {
  .sps-sec .container .toppings.distribution2 .dots {
    top: -27px;
    left: 375px;
    right: auto;
  }
}
.sps-sec .container .toppings.distribution2 .arrows {
  left: 15px;
  top: -30px;
  transform: rotate(180deg);
}
@media (min-width: 325px) {
  .sps-sec .container .toppings.distribution2 .arrows {
    left: 30px;
  }
}
@media (min-width: 451px) {
  .sps-sec .container .toppings.distribution2 .arrows {
    left: 50px;
  }
}
@media (min-width: 992px) {
  .sps-sec .container .toppings.distribution2 .arrows {
    left: auto;
    right: 43%;
    top: 150px;
    transform: translateX(-50%) rotate(0deg);
  }
}
.sps-sec .container .row {
  flex-direction: column;
}
@media (min-width: 715px) {
  .sps-sec .container .row {
    flex-direction: row;
  }
}
.sps-sec .container .row .card-wrap {
  position: relative;
  width: 100%;
  padding: 0 15px;
}
@media (min-width: 715px) {
  .sps-sec .container .row .card-wrap {
    width: 33.3333%;
  }
}
.sps-sec .container .row .card-wrap .card {
  padding: 30px 15px;
  border-radius: 7px;
  text-align: center;
}
@media (min-width: 715px) {
  .sps-sec .container .row .card-wrap .card {
    height: 100%;
  }
}
@media (min-width: 992px) {
  .sps-sec .container .row .card-wrap .card {
    padding: 30px;
  }
}
.sps-sec .container .row .card-wrap .card .the-sum {
  position: relative;
  display: block;
  font-size: 35px;
  color: #0008c1;
  font-family: "Inter";
  font-weight: 700;
}
@media (min-width: 451px) {
  .sps-sec .container .row .card-wrap .card .the-sum {
    font-size: 40px;
  }
}
@media (min-width: 992px) {
  .sps-sec .container .row .card-wrap .card .the-sum {
    font-size: 45px;
  }
}
.sps-sec .container .row .card-wrap .card .heading {
  font-family: "Inter";
  margin: 10px auto;
  font-weight: 700;
  color: #151515;
  width: 80%;
}
@media (min-width: 451px) {
  .sps-sec .container .row .card-wrap .card .heading {
    width: 60%;
  }
}
@media (min-width: 600px) {
  .sps-sec .container .row .card-wrap .card .heading {
    width: 40%;
  }
}
@media (min-width: 715px) {
  .sps-sec .container .row .card-wrap .card .heading {
    width: 100%;
  }
}

/* end */
/**/
/* =========> promo video section */
.promovideo-sec .container {
  z-index: 2;
}
.promovideo-sec .container .sec-body {
  margin-bottom: 50px;
}
@media (min-width: 600px) {
  .promovideo-sec .container .sec-body {
    margin-bottom: 75px;
  }
}
.promovideo-sec .container .sec-body .video {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 175px;
  margin: 0 auto;
}
@media (min-width: 325px) {
  .promovideo-sec .container .sec-body .video {
    height: 245px;
  }
}
@media (min-width: 451px) {
  .promovideo-sec .container .sec-body .video {
    height: 285px;
  }
}
@media (min-width: 540px) {
  .promovideo-sec .container .sec-body .video {
    height: 300px;
  }
}
@media (min-width: 600px) {
  .promovideo-sec .container .sec-body .video {
    height: 385px;
  }
}
@media (min-width: 715px) {
  .promovideo-sec .container .sec-body .video {
    height: 405px;
  }
}
@media (min-width: 992px) {
  .promovideo-sec .container .sec-body .video {
    width: 780px;
    height: 450px;
  }
}
@media (min-width: 1200px) {
  .promovideo-sec .container .sec-body .video {
    width: 920px;
    height: 525px;
  }
}
.promovideo-sec .container .sec-body .video .overlay {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  background-size: cover;
  background-position: center;
}
.promovideo-sec .container .sec-body .video .overlay img {
  width: 70px;
  height: auto;
}
@media (min-width: 992px) {
  .promovideo-sec .container .sec-body .video .overlay img {
    width: 130px;
  }
}
.promovideo-sec .container .sec-body .video .xmark {
  right: 0;
  bottom: -47px;
  z-index: -1;
  transform: rotate(22deg);
}
@media (min-width: 540px) {
  .promovideo-sec .container .sec-body .video .xmark {
    bottom: -61px;
  }
}
@media (min-width: 600px) {
  .promovideo-sec .container .sec-body .video .xmark {
    bottom: -72px;
  }
}
@media (min-width: 1200px) {
  .promovideo-sec .container .sec-body .video .xmark {
    bottom: -65px;
    right: -62px;
    transform: rotate(3deg);
  }
}
.promovideo-sec .container .sec-footer {
  text-align: center;
}
@media (min-width: 600px) {
  .promovideo-sec .container .sec-footer {
    width: 85%;
    margin: 0 auto;
  }
}

/**/
/* ========= --------->>>>>> faq section */
.faq-sec .container .toppings .splatter {
  top: -109px;
  right: 0;
}
.faq-sec .container .toppings .bars {
  left: 15px;
  top: -28px;
}
@media (min-width: 451px) {
  .faq-sec .container .toppings .bars {
    left: 30px;
  }
}
.faq-sec .container .toppings .arrows {
  display: none;
}
@media (min-width: 715px) {
  .faq-sec .container .toppings .arrows {
    display: block;
    right: 16px;
    top: 270px;
    transform: rotate(180deg);
  }
}
@media (min-width: 992px) {
  .faq-sec .container .toppings .arrows {
    right: 129px;
    top: 273px;
  }
}
.faq-sec .container .sec-header {
  position: relative;
  margin-bottom: 40px;
  z-index: 2;
}
@media (min-width: 715px) {
  .faq-sec .container .sec-header {
    width: 85%;
  }
}
@media (min-width: 992px) {
  .faq-sec .container .sec-header {
    width: 70%;
  }
}
.faq-sec .container .sec-body {
  position: relative;
  margin-bottom: 40px;
  z-index: 2;
}
@media (min-width: 715px) {
  .faq-sec .container .sec-body {
    width: 85%;
  }
}
@media (min-width: 992px) {
  .faq-sec .container .sec-body {
    width: 70%;
  }
}
.faq-sec .container .sec-body .faq-outer {
  margin-bottom: 15px;
}
.faq-sec .container .sec-body .faq-outer .faq-card .faq-question {
  position: relative;
  display: block;
  border-radius: 7px;
  background-color: #2146c7;
  text-decoration: none;
  color: #fff;
}
.faq-sec .container .sec-body .faq-outer .faq-card .faq-answer .answer-body {
  padding: 25px 10px;
}
@media (min-width: 992px) {
  .faq-sec .container .sec-body .faq-outer .faq-card .faq-answer .answer-body {
    padding: 25px 20px;
  }
}
.faq-sec .container .sec-body .faq-outer .faq-card .faq-answer .answer-body p {
  margin: 0;
}
.faq-sec .container .sec-footer {
  position: relative;
  z-index: 2;
}
.faq-sec .container .sec-footer .xbtn {
  display: block;
  margin: 0 auto;
}

/* end */
/**/
/* ========= --------->>>>>> gallery section */
.gallery-sec.style2 {
  padding-top: 0;
}
.gallery-sec .toppings .splatter {
  top: -111px;
  left: -31px;
}
.gallery-sec .toppings .bars.no1 {
  right: 19px;
  top: -55px;
}
.gallery-sec .toppings .bars.no2 {
  left: 40px;
  bottom: -37px;
}
@media (min-width: 992px) {
  .gallery-sec .toppings .bars.no2 {
    bottom: -60px;
  }
}
.gallery-sec .toppings .dots {
  right: 39px;
  bottom: -25px;
}
@media (min-width: 992px) {
  .gallery-sec .toppings .dots {
    bottom: -54px;
  }
}
.gallery-sec .sec-body .gallery-slider .slider-item .sec-image-wrapper {
  /*
  width: 240px;
  height: 240px;
  */
  margin: 30px auto;
  width: 100%;
  height: auto;
}
@media (min-width: 1200px) {
  .gallery-sec .sec-body .gallery-slider .slider-item .sec-image-wrapper {
    margin: 40px auto;
  }
}
.gallery-sec .sec-body .gallery-slider .slider-item .sec-image-wrapper {
  /*
  @include mf-responsive(medium-phone-screen){height: 425px;}
  @include mf-responsive(big-phone-screen){height: 475px;}
  @include mf-responsive(verybig-phone-screen){height: 500px;}
  @include mf-responsive(tablet-screen){height: 655px;}
  @include mf-responsive(big-tablet-screen){width: 100%;height: 485px;}
  @include mf-responsive(medium-screen){height: 450px;}
  @include mf-responsive(large-screen){width: 342px;height: 370px;margin: 40px auto;}
  */
  /*
  @include mf-responsive(medium-phone-screen){width: 270px;height: 270px;}
  @include mf-responsive(big-phone-screen){width: 315px;height: 315px;}
  @include mf-responsive(verybig-phone-screen){width: 300px;height: 300px;}
  @include mf-responsive(tablet-screen){width: 430px;height: 430px;}
  @include mf-responsive(medium-screen){width: 400px;height: 400px;}
  @include mf-responsive(large-screen){width: 300px;height: 300px;margin: 40px auto;}
  */
}

/* end */
/**/
/* ========= --------->>>>>> cta section */
.cta-sec {
  position: relative;
  padding: 10px 0;
  margin: 10px 0;
  text-align: center;
}
@media (min-width: 451px) {
  .cta-sec {
    margin: 50px 0;
  }
}
@media (min-width: 600px) {
  .cta-sec {
    padding: 40px 0;
  }
}
@media (min-width: 992px) {
  .cta-sec {
    padding: 60px 0;
  }
}
.cta-sec::before {
  position: absolute;
  content: "";
  width: 180px;
  height: 215px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("../images/scribbles-icon.png");
  background-size: cover;
  opacity: 0.25;
}
@media (min-width: 540px) {
  .cta-sec::before {
    width: 263px;
    height: 305px;
  }
}
.cta-sec .container .row .cta-heading {
  position: relative;
  padding: 0 15px;
  width: 100%;
  z-index: 2;
}
.cta-sec .container .row .cta-heading .the-heading .normal {
  color: #000;
}
.cta-sec .container .row .cta-action {
  position: relative;
  padding: 0 15px;
  width: 100%;
  z-index: 2;
}

/* end */
/**/
/* ========= --------->>>>>> reviews section */
.reviews-sec .toppings .dots.no1 {
  right: 28px;
  top: -49px;
}
@media (min-width: 325px) {
  .reviews-sec .toppings .dots.no1 {
    right: 30px;
  }
}
@media (min-width: 451px) {
  .reviews-sec .toppings .dots.no1 {
    right: 45px;
  }
}
.reviews-sec .toppings .dots.no2 {
  left: 17px;
}
@media (min-width: 325px) {
  .reviews-sec .toppings .dots.no2 {
    left: 30px;
  }
}
@media (min-width: 451px) {
  .reviews-sec .toppings .dots.no2 {
    left: 45px;
  }
}
@media (min-width: 992px) {
  .reviews-sec .toppings .dots.no2 {
    top: 140px;
  }
}
.reviews-sec .sec-body {
  position: relative;
  z-index: 2;
}
.reviews-sec .sec-body .reviews-slider .owl-stage-outer {
  padding-bottom: 40px;
}
.reviews-sec .sec-body .reviews-slider .slider-item {
  position: relative;
  margin: 50px 0 0 0;
  z-index: 2;
}
@media (min-width: 992px) {
  .reviews-sec .sec-body .reviews-slider .slider-item {
    margin: 60px 0 0 0;
  }
}
.reviews-sec .sec-body .reviews-slider .slider-item .card {
  position: relative;
  background-color: #ebebeb;
  border-radius: 7px;
  padding: 40px 30px;
  padding-top: 0;
  height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}
@media (min-width: 540px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card {
    height: 295px;
  }
}
@media (min-width: 600px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card {
    height: 335px;
  }
}
@media (min-width: 715px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card {
    width: 500px;
    margin: 0 auto;
  }
}
@media (min-width: 992px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card {
    width: 420px;
  }
}
@media (min-width: 1200px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card {
    width: 500px;
  }
}
.reviews-sec .sec-body .reviews-slider .slider-item .card .card-header {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.reviews-sec .sec-body .reviews-slider .slider-item .card .card-header .card-image {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  top: -44px;
  image-rendering: -webkit-optimize-contrast;
  object-fit: cover;
  border: 4px solid #ebebeb;
}
@media (min-width: 540px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card .card-header .card-image {
    width: 100px;
    height: 100px;
  }
}
@media (min-width: 600px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card .card-header .card-image {
    width: 110px;
    height: 110px;
  }
}
@media (min-width: 992px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card .card-header .card-image {
    top: -50px;
  }
}
.reviews-sec .sec-body .reviews-slider .slider-item .card .card-header .xmark {
  position: absolute;
  top: -36px;
  left: 15px;
}
@media (min-width: 540px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card .card-header .xmark {
    top: -45px;
  }
}
@media (min-width: 600px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card .card-header .xmark {
    top: -50px;
  }
}
.reviews-sec .sec-body .reviews-slider .slider-item .card .card-body {
  text-align: center;
}
.reviews-sec .sec-body .reviews-slider .slider-item .card .card-body p {
  color: #111111;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
}
.reviews-sec .sec-body .reviews-slider .slider-item .card .card-footer {
  position: absolute;
  width: 100%;
  bottom: 25px;
  padding: 10px 30px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}
.reviews-sec .sec-body .reviews-slider .slider-item .card .card-footer .reviewer-name {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  color: #2146c7;
}
@media (min-width: 451px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card .card-footer .reviewer-name {
    font-size: 15px;
  }
}
@media (min-width: 540px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card .card-footer .reviewer-name {
    font-size: 16.5px;
  }
}
@media (min-width: 600px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card .card-footer .reviewer-name {
    font-size: 18px;
  }
}
.reviews-sec .sec-body .reviews-slider .slider-item .card .card-footer .bars {
  position: relative;
  transform: rotate(180deg);
  filter: brightness(1);
}
@media (min-width: 1200px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card .card-footer .bars {
    display: block !important;
  }
}
.reviews-sec .sec-body .reviews-slider .slider-item .card .card-footer .xmark {
  position: absolute;
  bottom: -54px;
  right: 15px;
  transform: rotate(180deg);
}
@media (min-width: 540px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card .card-footer .xmark {
    bottom: -64px;
  }
}
@media (min-width: 600px) {
  .reviews-sec .sec-body .reviews-slider .slider-item .card .card-footer .xmark {
    bottom: -72px;
  }
}
.reviews-sec .sec-body .caro_vids_sliding-btns {
  position: relative;
  display: flex;
  justify-content: space-between;
  transform: translateY(44px);
  z-index: 2;
}
.reviews-sec .sec-body .caro-vids .slider-item {
  position: relative;
  margin: 50px 0 0 0;
  z-index: 2;
}
@media (min-width: 992px) {
  .reviews-sec .sec-body .caro-vids .slider-item {
    margin: 60px 0 0 0;
  }
}
.reviews-sec .sec-body .caro-vids .slider-item .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.reviews-sec .sec-body .caro-vids .slider-item .video-overlay img {
  width: 50px;
  height: auto;
}
@media (min-width: 992px) {
  .reviews-sec .sec-body .caro-vids .slider-item .video-overlay img {
    width: 70px;
  }
}
.reviews-sec .sec-body .caro-vids .slider-item .video {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 90vh;
  margin-bottom: 30px;
}
@media (min-width: 715px) {
  .reviews-sec .sec-body .caro-vids .slider-item .video {
    height: 80vh;
  }
}

/* end */
/**/
/* ========= --------->>>>>> contact section */
.contact-sec .container .toppings .splatter {
  top: -186px;
  right: 0;
}
@media (min-width: 540px) {
  .contact-sec .container .toppings .splatter {
    top: -160px;
  }
}
@media (min-width: 715px) {
  .contact-sec .container .toppings .splatter {
    top: -255px;
  }
}
@media (min-width: 992px) {
  .contact-sec .container .toppings .splatter {
    top: -112px;
  }
}
.contact-sec .container .toppings .bars {
  left: 15px;
  top: -35px;
}
@media (min-width: 992px) {
  .contact-sec .container .toppings .bars {
    top: -72px;
    left: 30px;
  }
}
.contact-sec .container .sec-body {
  position: relative;
  z-index: 1;
}
.contact-sec .container .sec-body .contact-form {
  position: relative;
  width: 100%;
  padding: 0 15px;
}
@media (min-width: 715px) {
  .contact-sec .container .sec-body .contact-form {
    width: 85%;
    margin: 0 auto;
  }
}
@media (min-width: 1200px) {
  .contact-sec .container .sec-body .contact-form {
    width: 73%;
    padding-right: 110px;
  }
}
.contact-sec .container .sec-body .sec-graphic {
  display: none;
}
@media (min-width: 1200px) {
  .contact-sec .container .sec-body .sec-graphic {
    display: block;
    width: 27%;
    padding: 0 15px;
  }
}
@media (min-width: 1200px) {
  .contact-sec .container .sec-body .sec-graphic .sec-image-wrapper {
    position: relative;
    height: 350px;
  }
  .contact-sec .container .sec-body .sec-graphic .sec-image-wrapper .sec-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    image-rendering: -webkit-optimize-contrast;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 7px;
  }
  .contact-sec .container .sec-body .sec-graphic .sec-image-wrapper .xmark {
    left: -51px;
  }
  .contact-sec .container .sec-body .sec-graphic .sec-image-wrapper .xmark.no1 {
    top: 58px;
  }
  .contact-sec .container .sec-body .sec-graphic .sec-image-wrapper .xmark.no2 {
    top: 175px;
  }
}

/* end */
/**/
/* =========> packages section */
.packages-sec .container .toppings .splatter {
  top: -111px;
  left: -31px;
}
.packages-sec .container .toppings .arrows {
  right: 10px;
  top: -30px;
}
.packages-sec .container .toppings .bars {
  bottom: -30px;
  left: 15px;
}
@media (min-width: 600px) {
  .packages-sec .container .toppings .bars {
    left: 30px;
  }
}
.packages-sec .container .sec-body {
  position: relative;
  z-index: 1;
}
.packages-sec .container .sec-body .packages-slider .row {
  flex-direction: column;
}
@media (min-width: 715px) {
  .packages-sec .container .sec-body .packages-slider .row {
    flex-direction: row;
  }
}
.packages-sec .container .sec-body .packages-slider .slider-item {
  margin: 30px auto 70px auto;
  text-align: center;
  width: 100%;
}
@media (min-width: 325px) {
  .packages-sec .container .sec-body .packages-slider .slider-item {
    padding: 0 15px;
  }
}
@media (min-width: 715px) {
  .packages-sec .container .sec-body .packages-slider .slider-item {
    width: 70%;
    padding: 0 15px;
  }
}
@media (min-width: 1200px) {
  .packages-sec .container .sec-body .packages-slider .slider-item {
    width: 33.33333%;
    margin: 40px auto 80px auto;
  }
}
.packages-sec .container .sec-body .packages-slider .slider-item .item-header .sec-image-wrapper {
  width: 100%;
  height: auto;
}
.packages-sec .container .sec-body .packages-slider .slider-item .item-body {
  position: relative;
  padding: 30px 0 20px 0;
}
.packages-sec .container .sec-body .packages-slider .slider-item .item-body .item-price {
  margin: 0;
  text-transform: uppercase;
  font-size: 38px;
  display: block;
  position: relative;
  color: #000;
  font-family: "Inter";
}
@media (min-width: 451px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .item-body .item-price {
    font-size: 40px;
  }
}
@media (min-width: 540px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .item-body .item-price {
    font-size: 40px;
  }
}
@media (min-width: 600px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .item-body .item-price {
    font-size: 50px;
  }
}
@media (min-width: 992px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .item-body .item-price {
    font-size: 43px;
  }
}
.packages-sec .container .sec-body .packages-slider .slider-item .item-body .item-price a {
  color: #000;
  text-decoration: none;
}
.packages-sec .container .sec-body .packages-slider .slider-item .item-body .item-price a::after {
  position: relative;
  content: "EGP";
  margin-left: 5px;
  font-family: "Gotham";
}
.packages-sec .container .sec-body .packages-slider .slider-item .item-footer {
  position: relative;
}
.packages-sec .container .sec-body .packages-slider .slider-item .item-footer .xbtn {
  width: 100%;
}

/* end */
/**/
/* =========> calorie calculator section */
.calorie-calc-sec .toppings .dots {
  left: 15px;
  top: -45px;
}
@media (min-width: 540px) {
  .calorie-calc-sec .toppings .dots {
    left: 30px;
  }
}
.calorie-calc-sec .sec-body {
  position: relative;
  z-index: 2;
}
.calorie-calc-sec .sec-body .row .calc-inputs {
  position: relative;
  width: 100%;
  padding: 0 15px;
  margin-bottom: 80px;
}
@media (min-width: 715px) {
  .calorie-calc-sec .sec-body .row .calc-inputs {
    margin: 0 auto 80px auto;
  }
}
@media (min-width: 992px) {
  .calorie-calc-sec .sec-body .row .calc-inputs {
    width: 60%;
    padding-right: 110px;
  }
}
@media (min-width: 992px) {
  .calorie-calc-sec .sec-body .row .calc-inputs .xbtn {
    display: none;
  }
}
.calorie-calc-sec .sec-body .row .calc-result {
  position: relative;
  width: 100%;
  padding: 0 15px;
}
@media (min-width: 992px) {
  .calorie-calc-sec .sec-body .row .calc-result {
    display: block;
    width: 40%;
    padding: 0 15px;
  }
}
.calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card {
  position: relative;
  background-color: #2146c7;
  border-radius: 7px;
  padding: 40px 30px;
  height: 375px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}
@media (min-width: 540px) {
  .calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card {
    height: 405px;
  }
}
@media (min-width: 600px) {
  .calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card {
    height: 490px;
  }
}
@media (min-width: 992px) {
  .calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card {
    width: 100%;
    height: 425px;
  }
}
.calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-header {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-header .card-image {
  position: absolute;
  width: 80px;
  height: auto;
  left: 50%;
  transform: translateX(-40%);
  top: -44px;
}
@media (min-width: 540px) {
  .calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-header .card-image {
    width: 100px;
    top: -58px;
  }
}
@media (min-width: 600px) {
  .calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-header .card-image {
    width: 115px;
    top: -63px;
  }
}
@media (min-width: 992px) {
  .calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-header .card-image {
    width: 105px;
    top: -61px;
  }
}
.calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-header .xmark {
  position: absolute;
  top: -36px;
  left: 15px;
  transform: rotate(72deg);
}
@media (min-width: 540px) {
  .calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-header .xmark {
    top: -45px;
  }
}
@media (min-width: 600px) {
  .calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-header .xmark {
    top: -50px;
  }
}
@media (min-width: 992px) {
  .calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-header .xmark {
    left: -47px;
    top: 66px;
  }
}
.calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-body {
  text-align: center;
}
.calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-body p {
  margin-bottom: 25px;
}
.calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-body p:last-child {
  margin-bottom: 0;
}
.calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-body p .result-type {
  display: block;
  color: white;
  margin: 0;
  font-size: 18px;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 500;
}
@media (min-width: 600px) {
  .calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-body p .result-type {
    font-size: 20px;
  }
}
.calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-body p .result-num {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-body p .result-num input {
  position: relative;
  background: transparent;
  border: 0;
  outline: 0;
  text-align: center;
  color: white;
  font-size: 16px;
  font-weight: 300;
  width: 60px;
}
@media (min-width: 600px) {
  .calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-body p .result-num input {
    font-size: 18px;
  }
}
.calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-body p .result-num span {
  display: block;
  color: #fff;
  font-size: 16px;
}
@media (min-width: 600px) {
  .calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-body p .result-num span {
    font-size: 18px;
  }
}
.calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-footer {
  position: absolute;
  width: 100%;
  bottom: 8px;
  padding: 10px 30px;
  left: -13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-footer .bars {
  position: relative;
  filter: brightness(1);
}
@media (min-width: 1200px) {
  .calorie-calc-sec .sec-body .row .calc-result .card-wrapper .card .card-footer .bars {
    display: block !important;
  }
}

/**/
/* ========= --------->>>>>> contact section */
.checkout-form .container .toppings .arrows {
  bottom: -11px;
  right: 15px;
}
.checkout-form .container .toppings .bars {
  top: -34px;
  right: 16px;
}
@media (min-width: 715px) {
  .checkout-form .container .toppings .bars {
    top: 10px;
  }
}
.checkout-form .container .toppings .dots {
  top: -51px;
  left: 35px;
}
@media (min-width: 992px) {
  .checkout-form .container .sec-header {
    margin-bottom: 80px;
  }
}
.checkout-form .container .sec-header .the-heading {
  text-align: center;
}
.checkout-form .container .sec-body {
  position: relative;
  z-index: 1;
  /* old style
  .row{
      @include mf-responsive(medium-screen){flex-direction: row-reverse;}
  } */
}
.checkout-form .container .sec-body .checkout-summary {
  position: relative;
  width: 100%;
  padding: 35px 15px;
  text-align: center;
}
.checkout-form .container .sec-body .checkout-summary .heading {
  position: relative;
  display: block;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}
@media (min-width: 540px) {
  .checkout-form .container .sec-body .checkout-summary .heading {
    font-size: 18px;
  }
}
@media (min-width: 992px) {
  .checkout-form .container .sec-body .checkout-summary .heading {
    font-size: 25px;
  }
}
.checkout-form .container .sec-body .checkout-summary .total-price {
  display: block;
  position: relative;
  font-size: 45px;
}
@media (min-width: 540px) {
  .checkout-form .container .sec-body .checkout-summary .total-price {
    font-size: 40px;
  }
}
@media (min-width: 992px) {
  .checkout-form .container .sec-body .checkout-summary .total-price {
    font-size: 55px;
  }
}
.checkout-form .container .sec-body .checkout-inputs {
  position: relative;
  width: 100%;
  padding: 0 15px;
  text-align: center;
}
@media (min-width: 715px) {
  .checkout-form .container .sec-body .checkout-inputs {
    width: 85%;
    margin: 0 auto;
  }
}
.checkout-form .container .sec-body .checkout-inputs {
  /*
  old stylee
  @include mf-responsive(medium-screen){width: 50%;}
  @include mf-responsive(large-screen){width: 65%;padding-right: 110px;}
  */
}

/* end */
/**/
/* ========= --------->>>>>> loading section */
.loading-sec {
  position: fixed;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  background: rgba(17, 17, 17, 0.8);
  z-index: 9;
}
.loading-sec span {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 4px solid #fff;
  border-left-color: transparent;
  animation: rotation 1s infinite ease-in-out;
}

/* end */
/* ========= --------->>>>>> loading section */
.loading-sec2 {
  position: fixed;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  background: #222;
  z-index: 9;
}
.loading-sec2 .layers {
  position: relative;
  display: block;
  width: 200px;
  height: 200px;
  z-index: 1;
}
@media (min-width: 451px) {
  .loading-sec2 .layers {
    width: 260px;
  }
}
@media (min-width: 992px) {
  .loading-sec2 .layers {
    width: 420px;
  }
}
@media (min-width: 1200px) {
  .loading-sec2 .layers {
    width: 475px;
  }
}
.loading-sec2 .layers .layer0 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.loading-sec2 .layers .layer0 .logo {
  position: relative;
  display: block;
  width: 120px;
  height: auto;
  margin-bottom: 5px;
  opacity: 0;
  animation: fade-in 4s infinite ease-in-out;
}
@media (min-width: 451px) {
  .loading-sec2 .layers .layer0 .logo {
    width: 150px;
  }
}
@media (min-width: 992px) {
  .loading-sec2 .layers .layer0 .logo {
    width: 275px;
  }
}
.loading-sec2 .layers .layer0 .slogan {
  position: relative;
  display: block;
  color: #fff;
  text-transform: uppercase;
  font-family: "Inter";
  text-align: center;
  opacity: 0;
  animation: fade-in2 4s infinite ease-in-out;
}
.loading-sec2 .layers {
  /*
  .layer1{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    top: 0;
    .bar1{
      position: relative;
      display: block;
      width: 100%;
      height: 70px;
      margin-bottom: 5px;
      background-color: $light-color1-v1;
      transform: scaleX(0);
      transform-origin: left;
      animation: shrink 5s infinite ease-in-out;
      @include mf-responsive(big-phone-screen){height: 90px;}
      @include mf-responsive(medium-screen){height: 162px;}
    }
    .bar2{
      position: relative;
      display: block;
      width: 100%;
      height: 30px;
      background-color: $light-color2-v2;
      transform: scaleX(0);
      transform-origin: left;
      animation: shrink2 5s infinite ease-in-out;
      @include mf-responsive(medium-screen){height: 50px;}
      @include mf-responsive(large-screen){height: 60px;}
    }
  } */
}
.loading-sec2 .layers2 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.loading-sec2 .layers2::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #2146c7;
  transform: scaleX(0);
  transform-origin: left;
  animation: shrink 4s infinite ease-in-out;
}
.loading-sec2 .layers2::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #000;
  transform: scaleX(0);
  transform-origin: left;
  animation: shrink2 4s infinite ease-in-out;
}

/* end */
/**/
/* ========= --------->>>>>> response section . the response pages that appear after major actions taken by user */
.response-sec {
  position: relative;
  height: 100vh;
}
.response-sec .container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.response-sec .container .sec-header {
  margin-bottom: 50px;
}
.response-sec .container .sec-header .sec-image {
  position: relative;
  width: 85px;
  height: auto;
}
.response-sec .container .sec-body .the-heading {
  position: relative;
  color: #000;
  margin-bottom: 20px;
}
.response-sec .container .sec-body p {
  position: relative;
  color: #111111;
  margin-bottom: 20px;
}
.response-sec .container .sec-footer {
  position: relative;
  margin-top: 15px;
}
.response-sec {
  /* end container */
} /* end */
/**/
/* ========= --------->>>>>> law sec class */
/* law section for terms and conditions page, privacy and policy page */
.law-sec {
  position: relative;
}
.law-sec p {
  margin-bottom: 25px;
}

/* end */
/**/
/* =========> motivation notification */
.motiv-notif {
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 270px;
  height: auto;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 7px;
  box-shadow: 5px 5px 15px -9px #353535;
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease-in-out;
  display: flex;
}
@media (min-width: 992px) {
  .motiv-notif {
    width: 320px;
    padding: 20px 25px;
  }
}
@media (min-width: 1200px) {
  .motiv-notif {
    width: 380px;
    padding: 20px 30px;
  }
}
.motiv-notif.visible {
  opacity: 1;
  transition: all 0.5s ease-in-out;
}
.motiv-notif .icon-wrap {
  position: relative;
  width: 25%;
  padding-right: 30px;
  display: flex;
  align-items: center;
}
.motiv-notif .icon-wrap img {
  width: 100%;
  height: auto;
  transform: rotate(5deg);
  transform-origin: right;
  animation: nice-rotation 0.5s ease-in-out infinite;
}
.motiv-notif .text-wrap {
  position: relative;
  width: 75%;
}
.motiv-notif .text-wrap p {
  margin: 0;
  font-weight: 400;
}

/* ========== have been summoned ========== */
/* ========== summoning the animations ========== */
/**/
/* ------------------ names of the animations here

   appear-toggle1 (to hide and show)
   move-up-down1 (translating Y animation)
   move-up-down2 (translating Y animation while have translateX(-50%))
   rotation
   pulse1
   (toast group) => toast-fadein, toast-expand, toast-stay, toast-shrink, toast-fadeout

------------------ */
/* -=-=-=-=-=-=-=-=-=-=- start appear toggle animation */
@-webkit-keyframes appear-toggle1 {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
} /* end */
@keyframes appear-toggle1 {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
} /* end */
/* -=-=-=-=-=-=-=-=-=-=- end appear toggle animation */
/* -=-=-=-=-=-=-=-=-=-=- start move up and down animation */
@-webkit-keyframes move-up-down1 {
  0% {
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    -o-transform: translateY(-20%);
    transform: translateY(-20%);
  }
  50% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    transform: translateY(20%);
  }
  100% {
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    -o-transform: translateY(-20%);
    transform: translateY(-20%);
  }
} /* end */
@keyframes move-up-down1 {
  0% {
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    -o-transform: translateY(-20%);
    transform: translateY(-20%);
  }
  50% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    transform: translateY(20%);
  }
  100% {
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    -o-transform: translateY(-20%);
    transform: translateY(-20%);
  }
} /* end */
@-webkit-keyframes move-up-down2 {
  0% {
    -webkit-transform: translateX(-50%) translateY(-20%);
    -moz-transform: translateX(-50%) translateY(-20%);
    -o-transform: translateX(-50%) translateY(-20%);
    transform: translateX(-50%) translateY(-20%);
  }
  50% {
    -webkit-transform: translateX(-50%) translateY(20%);
    -moz-transform: translateX(-50%) translateY(20%);
    -o-transform: translateX(-50%) translateY(20%);
    transform: translateX(-50%) translateY(20%);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-20%);
    -moz-transform: translateX(-50%) translateY(-20%);
    -o-transform: translateX(-50%) translateY(-20%);
    transform: translateX(-50%) translateY(-20%);
  }
} /* end */
@keyframes move-up-down2 {
  0% {
    -webkit-transform: translateX(-50%) translateY(-20%);
    -moz-transform: translateX(-50%) translateY(-20%);
    -o-transform: translateX(-50%) translateY(-20%);
    transform: translateX(-50%) translateY(-20%);
  }
  50% {
    -webkit-transform: translateX(-50%) translateY(20%);
    -moz-transform: translateX(-50%) translateY(20%);
    -o-transform: translateX(-50%) translateY(20%);
    transform: translateX(-50%) translateY(20%);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-20%);
    -moz-transform: translateX(-50%) translateY(-20%);
    -o-transform: translateX(-50%) translateY(-20%);
    transform: translateX(-50%) translateY(-20%);
  }
} /* end */
/* -=-=-=-=-=-=-=-=-=-=- end move up and down animation */
/* -=-=-=-=-=-=-=-=-=-=- start rotation animation */
@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* -=-=-=-=-=-=-=-=-=-=- end rotation animation */
/* -=-=-=-=-=-=-=-=-=-=- start pulse1 animation */
@-webkit-keyframes pulse1 {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.2);
  }
  30% {
    transform: scale(1.2);
  }
  40% {
    transform: scale(1);
  }
  50% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.2);
  }
  70% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(1);
  }
  90% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
} /* end */
@keyframes pulse1 {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.2);
  }
  30% {
    transform: scale(1.2);
  }
  40% {
    transform: scale(1);
  }
  50% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.2);
  }
  70% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(1);
  }
  90% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
} /* end */
/* -=-=-=-=-=-=-=-=-=-=- end appear toggle animation */
/* -=-=-=-=-=-=-=-=-=-=- start toast animations group */
@-webkit-keyframes toast-fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
@keyframes toast-fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
@-webkit-keyframes toast-expand {
  from {
    min-width: 50px;
  }
  to {
    min-width: 270px;
  }
}
@keyframes toast-expand {
  from {
    min-width: 50px;
  }
  to {
    min-width: 270px;
  }
}
@-webkit-keyframes toast-stay {
  from {
    min-width: 270px;
  }
  to {
    min-width: 270px;
  }
}
@keyframes toast-stay {
  from {
    min-width: 270px;
  }
  to {
    min-width: 270px;
  }
}
@-webkit-keyframes toast-shrink {
  from {
    min-width: 270px;
  }
  to {
    min-width: 50px;
  }
}
@keyframes toast-shrink {
  from {
    min-width: 270px;
  }
  to {
    min-width: 50px;
  }
}
@-webkit-keyframes toast-fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 60px;
    opacity: 0;
  }
}
@keyframes toast-fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 60px;
    opacity: 0;
  }
}
/* -=-=-=-=-=-=-=-=-=-=- end rotation animation */
/* -=-=-=-=-=-=-=-=-=-=- start nice rotation animation */
@-webkit-keyframes nice-rotation {
  0% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(5deg);
  }
}
@keyframes nice-rotation {
  0% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(5deg);
  }
}
/* -=-=-=-=-=-=-=-=-=-=- specific animations for this website only !!!~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* -=-=-=-=-=-=-=-=-=-=- start height up and down animation */
@-webkit-keyframes height-upndown {
  0% {
    height: 100%;
  }
  50% {
    height: 110%;
  }
  100% {
    height: 100%;
  }
}
@keyframes height-upndown {
  0% {
    height: 100%;
  }
  50% {
    height: 110%;
  }
  100% {
    height: 100%;
  }
}
/* -=-=-=-=-=-=-=-=-=-=- loading screen stuff */
@keyframes shrink {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  10% {
    transform: scaleX(1);
    transform-origin: left;
  }
  20% {
    transform: scaleX(1);
    transform-origin: right;
  }
  30% {
    transform: scaleX(0);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: left;
  }
}
@keyframes shrink2 {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  30% {
    transform: scaleX(0);
    transform-origin: left;
  }
  40% {
    transform: scaleX(1);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: right;
  }
  60% {
    transform: scaleX(0);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: left;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-in2 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* ========== have been summoned ========== */

/*# sourceMappingURL=web-style.css.map */