/* ========== 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 <<<<<<-------- ========= */
/* ========= ---------------->>>>>> PRIMARY <<<<<<----------------- ========= */
/* ========= ---------------->>>>>> ACCENT <<<<<<----------------- ========= */
/* ========= ---------------->>>>>> NEUTRAL <<<<<<----------------- ========= */
/**/
/* ------------------ 

   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');
*/
@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Readex+Pro:wght@160..700&display=swap");
@font-face {
  font-family: "BPU";
  src: url("../fonts/Brilliant-Personal-Use.ttf") format("truetype");
}
/**/
/* ------------------ 

   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, .packages-sec .container .sec-body .packages-slider .slider-item .pkg-header .image-wrapper img, .hts-sec .container .steps-container .row .sec-imagery .img-wrap 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 */
/* end */
/**/
/* ------------------ 

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

------------------ */
/* =========> responsive font sizes */
.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;
  }
}

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

/* =========> common font size */
.xinput {
  font-size: 14px;
}
@media (min-width: 451px) {
  .xinput {
    font-size: 15px;
  }
}
@media (min-width: 540px) {
  .xinput {
    font-size: 15.5px;
  }
}
@media (min-width: 600px) {
  .xinput {
    font-size: 17px;
  }
}
@media (min-width: 1200px) {
  .xinput {
    font-size: 16px;
  }
}

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

/* =========> section image style */
/* =========> image base style */
.gallery-sec .sec-imagery .gallery-slider .slider-item .sec-image-wrapper .sec-image {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  image-rendering: -webkit-optimize-contrast;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
}

/* =========> input padding */
.xinput {
  padding: 10px 15px;
}
@media (min-width: 600px) {
  .xinput {
    padding: 12px 15px;
  }
}
@media (min-width: 1200px) {
  .xinput {
    padding: 12px 20px;
  }
}

/* =========> heading style base */
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-name h3, .packages-sec .container .sec-header h2, .written-reviews-sec .sec-body .reviews-slider .slider-item .card h3, .written-reviews-sec .sec-header h2, .vid-reviews-sec .sec-header h2, .cta-sec .container h2, .gallery-sec .sec-text h2, .faq-sec .container .sec-header h2, .promovideo-sec .container .sec-video-desc .row .text-block h3, .promovideo-sec .container .sec-header h2, .hts-sec .container .steps-container a, .hts-sec .container .sec-header h2, .services-sec .container .row .card-wrap .card h3, .services-sec .container .sec-header h2, .about-me-sec .container .row .sec-text .sec-text-container a, .about-me-sec .container .row .sec-imagery .sec-imagery-container h2, .hero-sec .container h1, .homehero-sec .content-wrapper .sec-text h1, footer .footer-container .container .mid-part h3 {
  font-family: "Public Sans", sans-serif;
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 20px 0;
}

/* =========> heading size 1 */
.written-reviews-sec .sec-body .reviews-slider .slider-item .card h3, .written-reviews-sec .sec-header h2, .vid-reviews-sec .sec-header h2, .cta-sec .container h2, .gallery-sec .sec-text h2, .faq-sec .container .sec-header h2, .promovideo-sec .container .sec-header h2, .hts-sec .container .sec-header h2, .services-sec .container .sec-header h2, .about-me-sec .container .row .sec-imagery .sec-imagery-container h2, .hero-sec .container h1, .homehero-sec .content-wrapper .sec-text h1, footer .footer-container .container .mid-part h3 {
  font-size: 20px;
}
@media (min-width: 325px) {
  .written-reviews-sec .sec-body .reviews-slider .slider-item .card h3, .written-reviews-sec .sec-header h2, .vid-reviews-sec .sec-header h2, .cta-sec .container h2, .gallery-sec .sec-text h2, .faq-sec .container .sec-header h2, .promovideo-sec .container .sec-header h2, .hts-sec .container .sec-header h2, .services-sec .container .sec-header h2, .about-me-sec .container .row .sec-imagery .sec-imagery-container h2, .hero-sec .container h1, .homehero-sec .content-wrapper .sec-text h1, footer .footer-container .container .mid-part h3 {
    font-size: 25px;
  }
}
@media (min-width: 700px) {
  .written-reviews-sec .sec-body .reviews-slider .slider-item .card h3, .written-reviews-sec .sec-header h2, .vid-reviews-sec .sec-header h2, .cta-sec .container h2, .gallery-sec .sec-text h2, .faq-sec .container .sec-header h2, .promovideo-sec .container .sec-header h2, .hts-sec .container .sec-header h2, .services-sec .container .sec-header h2, .about-me-sec .container .row .sec-imagery .sec-imagery-container h2, .hero-sec .container h1, .homehero-sec .content-wrapper .sec-text h1, footer .footer-container .container .mid-part h3 {
    font-size: 30px;
  }
}
@media (min-width: 992px) {
  .written-reviews-sec .sec-body .reviews-slider .slider-item .card h3, .written-reviews-sec .sec-header h2, .vid-reviews-sec .sec-header h2, .cta-sec .container h2, .gallery-sec .sec-text h2, .faq-sec .container .sec-header h2, .promovideo-sec .container .sec-header h2, .hts-sec .container .sec-header h2, .services-sec .container .sec-header h2, .about-me-sec .container .row .sec-imagery .sec-imagery-container h2, .hero-sec .container h1, .homehero-sec .content-wrapper .sec-text h1, footer .footer-container .container .mid-part h3 {
    font-size: 35px;
  }
}
@media (min-width: 1200px) {
  .written-reviews-sec .sec-body .reviews-slider .slider-item .card h3, .written-reviews-sec .sec-header h2, .vid-reviews-sec .sec-header h2, .cta-sec .container h2, .gallery-sec .sec-text h2, .faq-sec .container .sec-header h2, .promovideo-sec .container .sec-header h2, .hts-sec .container .sec-header h2, .services-sec .container .sec-header h2, .about-me-sec .container .row .sec-imagery .sec-imagery-container h2, .hero-sec .container h1, .homehero-sec .content-wrapper .sec-text h1, footer .footer-container .container .mid-part h3 {
    font-size: 40px;
  }
}

/* =========> border radius */
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-container, .written-reviews-sec .sec-body, .written-reviews-sec .sec-header, .vid-reviews-sec .sec-body .caro-vids .slider-item .video, .gallery-sec .sec-imagery .gallery-slider .slider-item .sec-image-wrapper .sec-image, .promovideo-sec .container .sec-body .video, .hts-sec .container .steps-container, .services-sec .container .row .card-wrap .card, .about-me-sec .container .row .sec-text .sec-text-container, .about-me-sec .container .row .sec-imagery .sec-imagery-container, .hero-sec .content-container, .homehero-sec .content-wrapper, footer .footer-container {
  border-radius: 20px;
}
@media (min-width: 992px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-container, .written-reviews-sec .sec-body, .written-reviews-sec .sec-header, .vid-reviews-sec .sec-body .caro-vids .slider-item .video, .gallery-sec .sec-imagery .gallery-slider .slider-item .sec-image-wrapper .sec-image, .promovideo-sec .container .sec-body .video, .hts-sec .container .steps-container, .services-sec .container .row .card-wrap .card, .about-me-sec .container .row .sec-text .sec-text-container, .about-me-sec .container .row .sec-imagery .sec-imagery-container, .hero-sec .content-container, .homehero-sec .content-wrapper, footer .footer-container {
    border-radius: 27px;
  }
}

/* =========> border radius 2 */
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-header .image-wrapper {
  border-radius: 15px;
}
@media (min-width: 992px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-header .image-wrapper {
    border-radius: 24px;
  }
}

/* =========> heading being in center */
.promovideo-sec .container .sec-header h2, .services-sec .container .sec-header h2 {
  color: #000000;
  text-align: center;
  margin-bottom: 45px;
}
@media (min-width: 700px) {
  .promovideo-sec .container .sec-header h2, .services-sec .container .sec-header h2 {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 65px;
  }
}
@media (min-width: 1200px) {
  .promovideo-sec .container .sec-header h2, .services-sec .container .sec-header h2 {
    width: 50%;
  }
}

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

   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 {
  font-family: "Inclusive Sans", sans-serif;
  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 {
  background-color: #fff;
}

/* ========= --------->>>>>> paragraph tag */
p {
  font-size: 13px;
  color: #424242;
  font-weight: 400;
}
@media (min-width: 700px) {
  p {
    font-size: 14px;
  }
}
@media (min-width: 992px) {
  p {
    font-size: 15px;
  }
}

/* ========= --------->>>>>> 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 ========== */
/**/
/**/
/* =========> xbtn */
.xbtn {
  position: relative;
  padding: 11px 22px;
  background: linear-gradient(90deg, #0d3de8 0%, #7593ff 100%);
  font-weight: 600;
  color: #ffffff;
  outline: none;
  border: 0;
  margin: 10px 0;
  border-radius: 30px;
  font-size: 12px;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 1200px) {
  .xbtn {
    font-size: 15px;
    padding: 13px 30px;
  }
}
.xbtn {
  /*
  @include mf-responsive(big-phone-screen){}
  @include mf-responsive(verybig-phone-screen){}
  @include mf-responsive(tablet-screen){}
  @include mf-responsive(medium-screen){}  
  @include mf-responsive(large-screen){}
  */
}
.xbtn:hover {
  background: linear-gradient(90deg, #000000 0%, #373737 100%);
  color: #ffffff;
  text-decoration: none;
}
.xbtn-style2 {
  background: linear-gradient(90deg, #ffffff 0%, #c6c6c6 100%);
  color: #000000;
}
.xbtn-style3:hover {
  background: linear-gradient(90deg, #ffffff 0%, #c6c6c6 100%);
  color: #000000;
}

/**/
/* =========> 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;
  margin-top: 14px;
  padding: 10px 0;
  z-index: 7;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 700px) {
  .mobile-navbar {
    margin-top: 20px;
  }
}
@media (min-width: 1200px) {
  .mobile-navbar {
    margin-top: 50px;
  }
}
.mobile-navbar.scrolled {
  margin-top: 0;
  box-shadow: 0 2px 13px -4px #111111;
  background: linear-gradient(90deg, #000000 0%, #373737 100%);
}
.mobile-navbar .container {
  position: relative;
  display: flex;
}
.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: 40px;
  height: auto;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 700px) {
  .mobile-navbar .container .part .logo {
    width: 45px;
  }
}
.mobile-navbar .container .part .brand-name {
  display: none;
}
@media (min-width: 700px) {
  .mobile-navbar .container .part .brand-name {
    display: block;
    margin-left: 8px;
    font-size: 16px;
    text-decoration: none;
    color: #ffffff;
    font-family: "Inclusive Sans", sans-serif;
    font-weight: 600;
  }
}
.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: "Readex Pro", 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: linear-gradient(90deg, #0d3de8 0%, #7593ff 100%);
  padding: 120px 30px 30px 30px;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
}
@media (min-width: 700px) {
  .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: linear-gradient(90deg, #000000 0%, #373737 100%);
  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(90deg, #0d3de8 0%, #7593ff 100%);
  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: 700px) {
  .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 {
  position: relative;
  padding: 100px 5px 5px 5px;
  z-index: 5;
  overflow-x: hidden;
}
footer .footer-container {
  position: relative;
  background: linear-gradient(90deg, #000000 0%, #373737 100%);
  padding: 30px 0;
}
footer .footer-container .container .top-part {
  position: relative;
}
footer .footer-container .container .top-part h2 {
  position: relative;
  font-family: "Public Sans", sans-serif;
  font-weight: 900;
  font-size: 40px;
  color: #ffffff;
  text-align: center;
  margin: 0;
  z-index: 1;
}
@media (min-width: 325px) {
  footer .footer-container .container .top-part h2 {
    font-size: 50px;
  }
}
@media (min-width: 451px) {
  footer .footer-container .container .top-part h2 {
    font-size: 60px;
  }
}
@media (min-width: 540px) {
  footer .footer-container .container .top-part h2 {
    font-size: 70px;
  }
}
@media (min-width: 600px) {
  footer .footer-container .container .top-part h2 {
    font-size: 80px;
  }
}
@media (min-width: 700px) {
  footer .footer-container .container .top-part h2 {
    font-size: 99px;
  }
}
@media (min-width: 992px) {
  footer .footer-container .container .top-part h2 {
    font-size: 140px;
  }
}
@media (min-width: 1200px) {
  footer .footer-container .container .top-part h2 {
    font-size: 170px;
  }
}
footer .footer-container .container .top-part h2::after {
  position: absolute;
  content: "";
  width: 70px;
  height: 70px;
  background-image: url(../images/blue-dumbell.png);
  background-size: cover;
  right: -20px;
  top: -38px;
  transform: rotate(7deg);
}
@media (min-width: 325px) {
  footer .footer-container .container .top-part h2::after {
    width: 90px;
    height: 90px;
    top: -60px;
  }
}
@media (min-width: 540px) {
  footer .footer-container .container .top-part h2::after {
    width: 110px;
    height: 110px;
  }
}
@media (min-width: 700px) {
  footer .footer-container .container .top-part h2::after {
    width: 120px;
    height: 120px;
  }
}
@media (min-width: 992px) {
  footer .footer-container .container .top-part h2::after {
    width: 170px;
    height: 170px;
    top: -78px;
    right: -64px;
  }
}
@media (min-width: 1200px) {
  footer .footer-container .container .top-part h2::after {
    width: 200px;
    height: 200px;
    right: -66px;
  }
}
footer .footer-container .container .top-part h2::before {
  position: absolute;
  content: "";
  width: 70px;
  height: 70px;
  background-image: url(../images/blue-dumbell.png);
  background-size: cover;
  left: -21px;
  bottom: 7px;
  transform: rotate(84deg);
  z-index: -1;
}
@media (min-width: 325px) {
  footer .footer-container .container .top-part h2::before {
    width: 90px;
    height: 90px;
    left: -24px;
  }
}
@media (min-width: 540px) {
  footer .footer-container .container .top-part h2::before {
    width: 110px;
    height: 110px;
  }
}
@media (min-width: 700px) {
  footer .footer-container .container .top-part h2::before {
    width: 120px;
    height: 120px;
    bottom: 11px;
    left: -30px;
  }
}
@media (min-width: 992px) {
  footer .footer-container .container .top-part h2::before {
    width: 170px;
    height: 170px;
    bottom: -9px;
    left: -75px;
  }
}
@media (min-width: 1200px) {
  footer .footer-container .container .top-part h2::before {
    width: 200px;
    height: 200px;
    bottom: -5px;
    left: -93px;
  }
}
footer .footer-container .container .mid-part {
  position: relative;
  margin-top: 50px;
}
@media (min-width: 700px) {
  footer .footer-container .container .mid-part {
    margin-top: 30px;
  }
}
@media (min-width: 992px) {
  footer .footer-container .container .mid-part {
    margin-top: 0;
  }
}
footer .footer-container .container .mid-part h3 {
  position: relative;
  color: #ffffff;
}
footer .footer-container .container .mid-part .other-pages li a {
  text-decoration: none;
  color: #ebebeb;
  font-size: 13px;
  font-weight: 400;
}
@media (min-width: 700px) {
  footer .footer-container .container .mid-part .other-pages li a {
    font-size: 14px;
  }
}
@media (min-width: 992px) {
  footer .footer-container .container .mid-part .other-pages li a {
    font-size: 15px;
  }
}
footer .footer-container .container .mid-part .other-pages li a:hover {
  color: #0d3de8;
}
footer .footer-container .container .mid-part .socials {
  display: flex;
  gap: 10px;
}
footer .footer-container .container .mid-part .socials li a {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(90deg, #0d3de8 0%, #7593ff 100%);
  font-size: 13px;
  border-radius: 50%;
}
@media (min-width: 700px) {
  footer .footer-container .container .mid-part .socials li a {
    font-size: 14px;
  }
}
@media (min-width: 992px) {
  footer .footer-container .container .mid-part .socials li a {
    font-size: 15px;
  }
}
footer .footer-container .container .mid-part .socials li a:hover {
  background: linear-gradient(90deg, #000000 0%, #373737 100%);
}
footer .footer-container .container .mid-part p a {
  color: #ebebeb;
}
@media (min-width: 700px) {
  footer .footer-container .container .mid-part .row {
    justify-content: flex-end;
  }
}
footer .footer-container .container .mid-part .ablock {
  position: relative;
  padding: 0 15px;
  width: 100%;
}
@media (min-width: 700px) {
  footer .footer-container .container .mid-part .ablock:nth-child(1) {
    width: 30%;
  }
}
@media (min-width: 700px) {
  footer .footer-container .container .mid-part .ablock:nth-child(2) {
    width: 50%;
  }
}
@media (min-width: 992px) {
  footer .footer-container .container .mid-part .ablock:nth-child(2) {
    width: 40%;
  }
}
@media (min-width: 1200px) {
  footer .footer-container .container .mid-part .ablock:nth-child(2) {
    width: 33%;
  }
}
footer .footer-container .container .mid-part .ablock .other-pages-block {
  position: relative;
  margin-bottom: 20px;
}
footer .footer-container .container .mid-part .ablock .socials-block {
  position: relative;
  margin-bottom: 20px;
}
@media (min-width: 700px) {
  footer .footer-container .container .mid-part .ablock .socials-block {
    display: flex;
    gap: 35px;
    margin-bottom: 0;
  }
}
footer .footer-container .container .mid-part .ablock .email-block {
  position: relative;
  margin-bottom: 20px;
}
@media (min-width: 700px) {
  footer .footer-container .container .mid-part .ablock .email-block {
    display: flex;
    gap: 35px;
    margin-bottom: 0;
    align-items: center;
  }
}
footer .footer-container .container .bot-part {
  position: relative;
  margin-top: 50px;
}
footer .footer-container .container .bot-part .trusted-by-list {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  flex-wrap: wrap;
}
@media (min-width: 700px) {
  footer .footer-container .container .bot-part .trusted-by-list {
    width: 45%;
  }
}
@media (min-width: 992px) {
  footer .footer-container .container .bot-part .trusted-by-list {
    width: 35%;
  }
}
footer .footer-container .container .bot-part .trusted-by-list li img {
  height: 30px;
  width: auto;
}
footer .footer-container .container .bot-part p {
  color: #ffffff;
  margin: 50px 0 0 0;
}

/* end */
/**/
/* ========= --------->>>>>> home hero sec */
.homehero-sec {
  position: relative;
  padding: 5px;
  overflow-x: hidden;
}
.homehero-sec .content-wrapper {
  position: relative;
  height: 750px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
@media (min-width: 700px) {
  .homehero-sec .content-wrapper {
    height: 850px;
  }
}
@media (min-width: 1200px) {
  .homehero-sec .content-wrapper {
    height: 99vh;
  }
}
.homehero-sec .content-wrapper::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 56%;
  bottom: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 85%, rgba(55, 55, 55, 0));
  z-index: 1;
}
@media (min-width: 700px) {
  .homehero-sec .content-wrapper::before {
    width: 56%;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.5) 85%, rgba(55, 55, 55, 0));
  }
}
.homehero-sec .content-wrapper .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  pointer-events: none;
}
.homehero-sec .content-wrapper .container {
  z-index: 1;
}
@media (min-width: 700px) {
  .homehero-sec .content-wrapper .container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
  }
}
.homehero-sec .content-wrapper .sec-text {
  position: relative;
  padding: 45px 0;
}
@media (min-width: 700px) {
  .homehero-sec .content-wrapper .sec-text {
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .homehero-sec .content-wrapper .sec-text {
    width: 45%;
    padding-top: 80px;
  }
}
.homehero-sec .content-wrapper .sec-text .heading-eyebrow {
  display: block;
  font-size: 14px;
  color: #e6cba8;
  margin-bottom: 10px;
  line-height: 1.2;
  font-weight: 500;
}
.homehero-sec .content-wrapper .sec-text h1 {
  color: #ffffff;
}
.homehero-sec .content-wrapper .sec-text p {
  color: #ebebeb;
  margin-bottom: 40px;
}
.homehero-sec .content-wrapper .sec-text .xbtn {
  z-index: 1;
}
.homehero-sec .content-wrapper .insta-box {
  position: absolute;
  top: -101px;
  left: 15px;
  display: flex;
  gap: 10px;
  background-color: #ffffff;
  border-radius: 13px;
  padding: 3px;
  width: 280px;
}
@media (min-width: 700px) {
  .homehero-sec .content-wrapper .insta-box {
    top: auto;
    bottom: 52px;
  }
}
@media (min-width: 1200px) {
  .homehero-sec .content-wrapper .insta-box {
    width: 340px;
  }
}
.homehero-sec .content-wrapper .insta-box .insta-image {
  width: 25%;
}
.homehero-sec .content-wrapper .insta-box .insta-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.homehero-sec .content-wrapper .insta-box .insta-text {
  position: relative; /* Context anchor for absolute icons */
  padding: 10px 10px 10px 0;
  width: 75%;
}
@media (min-width: 1200px) {
  .homehero-sec .content-wrapper .insta-box .insta-text {
    padding: 13px 10px 13px 0;
  }
}
.homehero-sec .content-wrapper .insta-box .insta-text h3 {
  font-family: "Public Sans", sans-serif;
  font-size: 17px;
  font-weight: 900;
  margin: 0 0 4px 0;
  color: #000000;
}
@media (min-width: 1200px) {
  .homehero-sec .content-wrapper .insta-box .insta-text h3 {
    font-size: 20px;
  }
}
.homehero-sec .content-wrapper .insta-box .insta-text p {
  font-family: "Public Sans", sans-serif;
  font-size: 11px;
  color: #424242;
  margin: 0 0 6px 0;
}
@media (min-width: 1200px) {
  .homehero-sec .content-wrapper .insta-box .insta-text p {
    font-size: 13px;
  }
}
.homehero-sec .content-wrapper .insta-box .insta-text .insta-details {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  font-family: "Public Sans", sans-serif;
  font-size: 10px;
  color: #000000;
}
@media (min-width: 1200px) {
  .homehero-sec .content-wrapper .insta-box .insta-text .insta-details {
    font-size: 11px;
  }
}
.homehero-sec .content-wrapper .insta-box .insta-text .insta-details li {
  display: flex;
  gap: 3px;
}
.homehero-sec .content-wrapper .insta-box .insta-text .insta-details li span {
  font-weight: 500;
}
.homehero-sec .content-wrapper .insta-box .insta-text .insta-details li span:first-child {
  font-weight: 900;
}
.homehero-sec .content-wrapper .insta-box .insta-text {
  /* CTA Link */
}
.homehero-sec .content-wrapper .insta-box .insta-text a {
  font-family: "Inclusive Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #000000;
  text-decoration: none;
  align-self: flex-start; /* Prevents the link hit-box from expanding full width */
}
.homehero-sec .content-wrapper .insta-box .insta-text {
  /* Absolute Positioned Icons */
}
.homehero-sec .content-wrapper .insta-box .insta-text .insta-icon {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: auto;
}
@media (min-width: 700px) {
  .homehero-sec .content-wrapper .insta-box .insta-text .insta-icon {
    top: 8px;
    right: 7px;
  }
}
.homehero-sec .content-wrapper .insta-box .insta-text .cta-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36px;
  height: auto;
}
.homehero-sec .content-wrapper .insta-box .pointing-arrow {
  position: absolute;
  bottom: -175px;
  right: -12px;
  width: 76px;
  height: auto;
  transform: rotate(180deg);
}
@media (min-width: 325px) {
  .homehero-sec .content-wrapper .insta-box .pointing-arrow {
    bottom: -26px;
    right: -66px;
    width: 56px;
    transform: rotate(159deg);
  }
}
@media (min-width: 700px) {
  .homehero-sec .content-wrapper .insta-box .pointing-arrow {
    bottom: 170px;
    right: 100px;
    width: 90px;
    transform: rotate(-2deg);
  }
}

/* end */
/* ========= --------->>>>>> hero sec */
.hero-sec {
  position: relative;
  padding: 5px;
  overflow-x: hidden;
}
.hero-sec .content-container {
  position: relative;
  height: 315px;
  background: linear-gradient(90deg, #000000 0%, #373737 100%);
  overflow: hidden;
  padding-top: 110px;
  text-align: center;
}
.hero-sec .container .sec-text {
  width: 90%;
  margin: 0 auto;
}
.hero-sec .container h1 {
  color: #ffffff;
  margin-bottom: 5px;
  text-transform: capitalize;
}
.hero-sec .container span {
  position: relative;
  display: block;
  font-family: "Inclusive Sans", sans-serif;
  color: #0d3de8;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero-sec .container p {
  color: #ebebeb;
}
@media (min-width: 1200px) {
  .hero-sec .container p {
    margin-bottom: 40px;
  }
}

/* end */
/**/
/* =========> a section for one block content like image on left content on right kind of stuff */
.about-me-sec .container .row {
  flex-direction: column;
}
@media (min-width: 700px) {
  .about-me-sec .container .row {
    flex-direction: row-reverse;
    margin-right: -5px;
    margin-left: -5px;
  }
}
.about-me-sec .container .row .sec-imagery {
  position: relative;
  padding: 0px 15px;
  margin-bottom: 20px;
}
@media (min-width: 700px) {
  .about-me-sec .container .row .sec-imagery {
    margin-bottom: 0;
    width: 50%;
    padding: 0 5px;
  }
}
@media (min-width: 992px) {
  .about-me-sec .container .row .sec-imagery {
    width: 55%;
  }
}
@media (min-width: 1200px) {
  .about-me-sec .container .row .sec-imagery {
    width: 60%;
  }
}
.about-me-sec .container .row .sec-imagery .sec-imagery-container {
  position: relative;
  width: 100%;
  height: 500px;
  padding: 60px 25px;
  overflow: hidden;
}
@media (min-width: 700px) {
  .about-me-sec .container .row .sec-imagery .sec-imagery-container {
    height: 100%;
  }
}
@media (min-width: 992px) {
  .about-me-sec .container .row .sec-imagery .sec-imagery-container {
    padding: 60px 35px;
  }
}
@media (min-width: 1200px) {
  .about-me-sec .container .row .sec-imagery .sec-imagery-container {
    padding: 70px 45px;
  }
}
.about-me-sec .container .row .sec-imagery .sec-imagery-container::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 56%;
  top: 0;
  right: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 85%, rgba(55, 55, 55, 0));
  z-index: 1;
}
.about-me-sec .container .row .sec-imagery .sec-imagery-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}
.about-me-sec .container .row .sec-imagery .sec-imagery-container h2 {
  position: relative;
  color: #ffffff;
  z-index: 1;
}
.about-me-sec .container .row .sec-text {
  position: relative;
  padding: 0 15px;
}
@media (min-width: 700px) {
  .about-me-sec .container .row .sec-text {
    margin-bottom: 0;
    width: 50%;
    padding: 0 5px;
  }
}
@media (min-width: 992px) {
  .about-me-sec .container .row .sec-text {
    width: 45%;
  }
}
@media (min-width: 1200px) {
  .about-me-sec .container .row .sec-text {
    width: 40%;
  }
}
.about-me-sec .container .row .sec-text .sec-text-container {
  position: relative;
  width: 100%;
  min-height: 500px;
  padding: 60px 25px 80px 25px;
  background: linear-gradient(90deg, #000000 0%, #373737 100%);
}
@media (min-width: 992px) {
  .about-me-sec .container .row .sec-text .sec-text-container {
    padding: 60px 35px 80px 35px;
  }
}
@media (min-width: 1200px) {
  .about-me-sec .container .row .sec-text .sec-text-container {
    padding: 70px 45px 90px 45px;
  }
}
.about-me-sec .container .row .sec-text .sec-text-container p {
  color: #ebebeb;
  margin-bottom: 25px;
}
.about-me-sec .container .row .sec-text .sec-text-container a {
  color: #ffffff;
  font-size: 20px;
  position: absolute;
  bottom: 5px;
  right: 73px;
  text-decoration: none;
}
.about-me-sec .container .row .sec-text .sec-text-container .cta-icon {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 45px;
  height: auto;
  transform: rotate(105deg);
}

/* end */
/**/
/* =========> a section for one block content like image on left content on right kind of stuff */
.services-sec .container .row {
  flex-direction: column;
}
@media (min-width: 600px) {
  .services-sec .container .row {
    flex-direction: row;
    margin-right: -5px;
    margin-left: -5px;
  }
}
.services-sec .container .row .card-wrap {
  position: relative;
  width: 100%;
  padding: 0 15px;
  margin-bottom: 30px;
}
@media (min-width: 600px) {
  .services-sec .container .row .card-wrap {
    width: 50%;
    padding: 0 5px;
  }
}
@media (min-width: 700px) {
  .services-sec .container .row .card-wrap {
    width: 33.333333%;
  }
}
@media (min-width: 1200px) {
  .services-sec .container .row .card-wrap {
    width: 25%;
  }
}
.services-sec .container .row .card-wrap:nth-child(1) .card {
  background: linear-gradient(90deg, #000000 0%, #373737 100%);
}
.services-sec .container .row .card-wrap:nth-child(1) .card::after {
  background-image: url(../images/blue-dumbell.png);
}
.services-sec .container .row .card-wrap:nth-child(2) .card {
  background: linear-gradient(90deg, #0d3de8 0%, #7593ff 100%);
}
.services-sec .container .row .card-wrap:nth-child(2) .card::after {
  background-image: url(../images/gray-dumbell.png);
}
.services-sec .container .row .card-wrap:nth-child(3) .card {
  background: linear-gradient(90deg, #000000 0%, #373737 100%);
}
.services-sec .container .row .card-wrap:nth-child(3) .card::after {
  background-image: url(../images/blue-dumbell.png);
}
.services-sec .container .row .card-wrap:nth-child(4) .card {
  background: linear-gradient(90deg, #0d3de8 0%, #7593ff 100%);
}
.services-sec .container .row .card-wrap:nth-child(4) .card::after {
  background-image: url(../images/gray-dumbell.png);
}
.services-sec .container .row .card-wrap:nth-child(5) .card {
  background: linear-gradient(90deg, #000000 0%, #373737 100%);
}
.services-sec .container .row .card-wrap:nth-child(5) .card::after {
  background-image: url(../images/blue-dumbell.png);
}
@media (min-width: 1200px) {
  .services-sec .container .row .card-wrap:nth-child(5) .card {
    background: linear-gradient(90deg, #0d3de8 0%, #7593ff 100%);
  }
  .services-sec .container .row .card-wrap:nth-child(5) .card::after {
    background-image: url(../images/gray-dumbell.png);
  }
}
.services-sec .container .row .card-wrap:nth-child(6) .card {
  background: linear-gradient(90deg, #0d3de8 0%, #7593ff 100%);
}
.services-sec .container .row .card-wrap:nth-child(6) .card::after {
  background-image: url(../images/gray-dumbell.png);
}
@media (min-width: 1200px) {
  .services-sec .container .row .card-wrap:nth-child(6) .card {
    background: linear-gradient(90deg, #000000 0%, #373737 100%);
  }
  .services-sec .container .row .card-wrap:nth-child(6) .card::after {
    background-image: url(../images/blue-dumbell.png);
  }
}
.services-sec .container .row .card-wrap:nth-child(7) .card {
  background: linear-gradient(90deg, #000000 0%, #373737 100%);
}
.services-sec .container .row .card-wrap:nth-child(7) .card::after {
  background-image: url(../images/blue-dumbell.png);
}
@media (min-width: 1200px) {
  .services-sec .container .row .card-wrap:nth-child(7) .card {
    background: linear-gradient(90deg, #0d3de8 0%, #7593ff 100%);
  }
  .services-sec .container .row .card-wrap:nth-child(7) .card::after {
    background-image: url(../images/gray-dumbell.png);
  }
}
.services-sec .container .row .card-wrap:nth-child(8) .card {
  background: linear-gradient(90deg, #0d3de8 0%, #7593ff 100%);
}
.services-sec .container .row .card-wrap:nth-child(8) .card::after {
  background-image: url(../images/gray-dumbell.png);
}
@media (min-width: 1200px) {
  .services-sec .container .row .card-wrap:nth-child(8) .card {
    background: linear-gradient(90deg, #000000 0%, #373737 100%);
  }
  .services-sec .container .row .card-wrap:nth-child(8) .card::after {
    background-image: url(../images/blue-dumbell.png);
  }
}
.services-sec .container .row .card-wrap .card {
  padding: 80px 25px 30px 25px;
}
@media (min-width: 600px) {
  .services-sec .container .row .card-wrap .card {
    height: 100%;
  }
}
.services-sec .container .row .card-wrap .card::after {
  content: "";
  position: absolute;
  top: -47px;
  left: 20px;
  width: 100px;
  height: 94px;
  background-size: cover;
  transform: rotate(35deg);
}
.services-sec .container .row .card-wrap .card h3 {
  color: #ffffff;
  font-size: 18px;
}
@media (min-width: 325px) {
  .services-sec .container .row .card-wrap .card h3 {
    font-size: 20px;
  }
}
@media (min-width: 700px) {
  .services-sec .container .row .card-wrap .card h3 {
    font-size: 24px;
  }
}
@media (min-width: 992px) {
  .services-sec .container .row .card-wrap .card h3 {
    font-size: 28px;
  }
}
.services-sec .container .row .card-wrap .card p {
  margin-bottom: 20px;
  color: #ebebeb;
}

/* end */
/**/
/* =========> a section for one block content like image on left content on right kind of stuff */
.hts-sec {
  overflow-x: hidden;
}
.hts-sec .container .sec-header {
  margin-bottom: 45px;
  text-align: center;
}
@media (min-width: 700px) {
  .hts-sec .container .sec-header {
    margin-bottom: 65px;
  }
}
.hts-sec .container .sec-header h2 {
  color: #000000;
}
@media (min-width: 700px) {
  .hts-sec .container .sec-header h2 {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 1200px) {
  .hts-sec .container .sec-header h2 {
    width: 50%;
  }
}
.hts-sec .container .sec-header P {
  color: #424242;
}
@media (min-width: 540px) {
  .hts-sec .container .sec-header P {
    width: 55%;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 700px) {
  .hts-sec .container .sec-header P {
    width: 45%;
  }
}
@media (min-width: 1200px) {
  .hts-sec .container .sec-header P {
    width: 35%;
  }
}
.hts-sec .container .steps-container {
  position: relative;
  padding: 5px;
  background: linear-gradient(90deg, #000000 0%, #373737 100%);
}
.hts-sec .container .steps-container::after {
  position: absolute;
  content: " ";
  top: 199px;
  left: -14px;
  width: 100px;
  height: 100px;
  background-image: url(../images/blue-dumbell.png);
  background-size: cover;
  transform: rotate(33deg);
}
@media (min-width: 700px) {
  .hts-sec .container .steps-container::after {
    top: -54px;
    right: 0px;
    left: auto;
  }
}
@media (min-width: 992px) {
  .hts-sec .container .steps-container::after {
    top: -64px;
    width: 120px;
    height: 120px;
  }
}
@media (min-width: 1200px) {
  .hts-sec .container .steps-container::after {
    top: -82px;
    width: 150px;
    height: 150px;
  }
}
@media (min-width: 700px) {
  .hts-sec .container .steps-container .row {
    margin-left: -5px;
    margin-right: -5px;
  }
}
.hts-sec .container .steps-container .row .sec-imagery {
  position: relative;
  width: 100%;
  padding: 0 15px;
}
@media (min-width: 700px) {
  .hts-sec .container .steps-container .row .sec-imagery {
    width: 40%;
    padding: 0 5px;
  }
}
.hts-sec .container .steps-container .row .sec-imagery .img-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 250px;
  border-radius: 15px;
  overflow: hidden;
}
@media (min-width: 700px) {
  .hts-sec .container .steps-container .row .sec-imagery .img-wrap {
    height: 100%;
  }
}
@media (min-width: 992px) {
  .hts-sec .container .steps-container .row .sec-imagery .img-wrap {
    border-radius: 24px;
  }
}
.hts-sec .container .steps-container .row .sec-imagery .img-wrap img {
  object-position: top;
}
@media (min-width: 700px) {
  .hts-sec .container .steps-container .row .sec-imagery .img-wrap img {
    object-position: 73%;
  }
}
.hts-sec .container .steps-container .row .sec-content {
  position: relative;
  width: 100%;
  padding: 0 15px 60px 15px;
}
@media (min-width: 700px) {
  .hts-sec .container .steps-container .row .sec-content {
    width: 60%;
    padding: 10px 5px 60px 5px;
  }
}
@media (min-width: 992px) {
  .hts-sec .container .steps-container .row .sec-content {
    padding: 10px 10px 60px 15px;
  }
}
.hts-sec .container .steps-container .row .sec-content .card-wrap {
  position: relative;
}
.hts-sec .container .steps-container .row .sec-content .card-wrap::after {
  position: absolute;
  content: " ";
  width: 90%;
  height: 3px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background-image: linear-gradient(to right, #b2b2b2 77%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 30px 3px; /* 30px total width (dash + gap), 4px thickness */
  background-repeat: repeat-x;
}
@media (min-width: 700px) {
  .hts-sec .container .steps-container .row .sec-content .card-wrap::after {
    width: 95%;
  }
}
.hts-sec .container .steps-container .row .sec-content .card-wrap:last-child::after {
  display: none;
}
.hts-sec .container .steps-container .row .sec-content .card-wrap .card {
  position: relative;
  padding: 30px 15px;
}
@media (min-width: 1200px) {
  .hts-sec .container .steps-container .row .sec-content .card-wrap .card {
    display: flex;
    align-items: center;
    padding: 40px 15px;
  }
}
.hts-sec .container .steps-container .row .sec-content .card-wrap .card h3 {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 20px 0;
}
@media (min-width: 1200px) {
  .hts-sec .container .steps-container .row .sec-content .card-wrap .card h3 {
    display: flex;
    margin: 0;
    width: 50%;
    padding-right: 25px;
  }
}
.hts-sec .container .steps-container .row .sec-content .card-wrap .card h3 span {
  display: block;
}
.hts-sec .container .steps-container .row .sec-content .card-wrap .card h3 span:nth-child(1) {
  font-family: "Public Sans", sans-serif;
  font-weight: 900;
  width: 30%;
  font-size: 40px;
  background: linear-gradient(90deg, #0d3de8 0%, #7593ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 325px) {
  .hts-sec .container .steps-container .row .sec-content .card-wrap .card h3 span:nth-child(1) {
    width: 20%;
  }
}
@media (min-width: 540px) {
  .hts-sec .container .steps-container .row .sec-content .card-wrap .card h3 span:nth-child(1) {
    width: 15%;
  }
}
@media (min-width: 700px) {
  .hts-sec .container .steps-container .row .sec-content .card-wrap .card h3 span:nth-child(1) {
    font-size: 45px;
    width: 20%;
  }
}
@media (min-width: 1200px) {
  .hts-sec .container .steps-container .row .sec-content .card-wrap .card h3 span:nth-child(1) {
    width: 25%;
  }
}
.hts-sec .container .steps-container .row .sec-content .card-wrap .card h3 span:nth-child(2) {
  font-family: "Inclusive Sans", sans-serif;
  width: 70%;
  font-weight: 900;
  color: #ffffff;
  font-size: 15px;
}
@media (min-width: 700px) {
  .hts-sec .container .steps-container .row .sec-content .card-wrap .card h3 span:nth-child(2) {
    width: 80%;
    font-size: 20px;
  }
}
@media (min-width: 1200px) {
  .hts-sec .container .steps-container .row .sec-content .card-wrap .card h3 span:nth-child(2) {
    width: 75%;
  }
}
.hts-sec .container .steps-container .row .sec-content .card-wrap .card p {
  color: #ebebeb;
  margin: 0;
}
@media (min-width: 1200px) {
  .hts-sec .container .steps-container .row .sec-content .card-wrap .card p {
    width: 50%;
  }
}
.hts-sec .container .steps-container a {
  color: #ffffff;
  font-size: 20px;
  position: absolute;
  bottom: 5px;
  right: 73px;
  text-decoration: none;
}
.hts-sec .container .steps-container .cta-icon {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 45px;
  height: auto;
  transform: rotate(105deg);
}

/* end */
/**/
/* =========> promo video section */
.promovideo-sec .container .sec-body {
  margin-bottom: 30px;
}
.promovideo-sec .container .sec-body .video {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 175px;
  margin: 0 auto;
  overflow: hidden;
}
@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: 700px) {
  .promovideo-sec .container .sec-body .video {
    height: 405px;
  }
}
@media (min-width: 992px) {
  .promovideo-sec .container .sec-body .video {
    height: 560px;
  }
}
@media (min-width: 1200px) {
  .promovideo-sec .container .sec-body .video {
    height: 650px;
  }
}
.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: top;
}
.promovideo-sec .container .sec-body .video .overlay img {
  width: 35px;
  height: auto;
}
@media (min-width: 992px) {
  .promovideo-sec .container .sec-body .video .overlay img {
    width: 130px;
  }
}
@media (min-width: 1200px) {
  .promovideo-sec .container .sec-video-desc .row {
    margin-right: -45px;
    margin-left: -45px;
  }
}
.promovideo-sec .container .sec-video-desc .row .text-block {
  padding: 0 20px;
}
@media (min-width: 700px) {
  .promovideo-sec .container .sec-video-desc .row .text-block {
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .promovideo-sec .container .sec-video-desc .row .text-block {
    padding: 0 50px;
  }
}
@media (min-width: 700px) {
  .promovideo-sec .container .sec-video-desc .row .text-block:nth-child(1) {
    display: flex;
    flex-direction: column;
  }
}
@media (min-width: 700px) {
  .promovideo-sec .container .sec-video-desc .row .text-block .block-part:nth-child(1) {
    order: 2;
    margin-top: 50px;
  }
}
.promovideo-sec .container .sec-video-desc .row .text-block h3 {
  color: #000000;
  font-size: 20px;
  font-size: 18px;
  font-weight: 600;
}
.promovideo-sec .container .sec-video-desc .row .text-block ul {
  margin-bottom: 50px;
}
.promovideo-sec .container .sec-video-desc .row .text-block ul li {
  font-size: 12px;
  color: #424242;
  font-weight: 500;
  font-family: "Inclusive Sans", sans-serif;
}
@media (min-width: 700px) {
  .promovideo-sec .container .sec-video-desc .row .text-block ul li {
    font-size: 13px;
  }
}
@media (min-width: 992px) {
  .promovideo-sec .container .sec-video-desc .row .text-block ul li {
    font-size: 14px;
  }
}
.promovideo-sec .container .sec-video-desc .row .text-block p {
  margin-bottom: 30px;
  color: #000000;
}
.promovideo-sec .container .sec-video-desc .row .text-block .sign-container {
  text-align: right;
  margin-top: 50px;
}
.promovideo-sec .container .sec-video-desc .row .text-block .sign-container .sign {
  font-size: 40px;
  font-family: "BPU";
  background: linear-gradient(90deg, #0d3de8 0%, #7593ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/**/
/* ========= --------->>>>>> faq section */
@media (min-width: 700px) {
  .faq-sec .container {
    display: flex;
    align-items: flex-start;
  }
}
.faq-sec .container .sec-header {
  position: relative;
  margin-bottom: 45px;
}
@media (min-width: 700px) {
  .faq-sec .container .sec-header {
    width: 30%;
    margin-right: 10%;
    position: sticky;
    top: 110px;
  }
}
@media (min-width: 1200px) {
  .faq-sec .container .sec-header {
    margin-right: 20%;
  }
}
.faq-sec .container .sec-header h2 {
  color: #000000;
}
.faq-sec .container .sec-header p {
  color: #424242;
  margin-bottom: 35px;
}
.faq-sec .container .sec-body {
  position: relative;
  margin-bottom: 40px;
  z-index: 2;
}
@media (min-width: 700px) {
  .faq-sec .container .sec-body {
    width: 60%;
  }
}
@media (min-width: 1200px) {
  .faq-sec .container .sec-body {
    width: 50%;
  }
}
.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;
  font-size: 14px;
  border-radius: 25px;
  background: linear-gradient(90deg, #000000 0%, #373737 100%);
  text-decoration: none;
  color: #ffffff;
  font-weight: 600;
  padding: 15px 20px;
}
.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 {
  overflow-x: hidden;
}
.gallery-sec.style2 {
  padding-top: 0;
}
@media (min-width: 700px) {
  .gallery-sec .container {
    display: flex;
  }
}
.gallery-sec .sec-text {
  position: relative;
}
@media (min-width: 700px) {
  .gallery-sec .sec-text {
    width: 45%;
    margin-right: 5%;
  }
}
@media (min-width: 992px) {
  .gallery-sec .sec-text {
    width: 40%;
    margin-right: 10%;
  }
}
@media (min-width: 1200px) {
  .gallery-sec .sec-text {
    margin-right: 17%;
  }
}
.gallery-sec .sec-text h2 {
  position: relative;
  color: #000000;
}
.gallery-sec .sec-text h2::after {
  content: "";
  position: absolute;
  top: -13px;
  left: 45px;
  width: 84px;
  height: 44px;
  background-image: url("../images/word-marker.png");
  background-size: cover;
}
@media (min-width: 325px) {
  .gallery-sec .sec-text h2::after {
    top: -15px;
    left: 55px;
    width: 105px;
    height: 56px;
  }
}
@media (min-width: 700px) {
  .gallery-sec .sec-text h2::after {
    top: -25px;
    width: 141px;
    height: 77px;
  }
}
@media (min-width: 992px) {
  .gallery-sec .sec-text h2::after {
    top: -26px;
    left: 76px;
    width: 151px;
    height: 82px;
  }
}
@media (min-width: 1200px) {
  .gallery-sec .sec-text h2::after {
    top: -31px;
    left: 76px;
    width: 183px;
    height: 100px;
  }
}
.gallery-sec .sec-text p {
  color: #424242;
}
.gallery-sec .sec-text .social-proof {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  position: relative;
}
.gallery-sec .sec-text .social-proof::after {
  position: absolute;
  background-image: url(../images/pointing-arrow2.png);
  background-size: cover;
  transform: rotate(30deg);
}
@media (min-width: 325px) {
  .gallery-sec .sec-text .social-proof::after {
    content: " ";
    bottom: 29px;
    right: 6px;
    width: 38px;
    height: 76px;
  }
}
@media (min-width: 700px) {
  .gallery-sec .sec-text .social-proof::after {
    bottom: 61px;
    right: -20px;
    height: 76px;
  }
}
@media (min-width: 992px) {
  .gallery-sec .sec-text .social-proof::after {
    bottom: 95px;
    right: -47px;
    height: 128px;
    width: 68px;
  }
}
.gallery-sec .sec-text .social-proof h3 {
  font-size: 15px;
  width: 80px;
  font-family: "Public Sans", sans-serif;
  font-weight: 400;
  color: #000000;
}
@media (min-width: 992px) {
  .gallery-sec .sec-text .social-proof h3 {
    font-size: 20px;
    width: 100px;
  }
}
.gallery-sec .sec-text .social-proof .big-num {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}
.gallery-sec .sec-text .social-proof .big-num span {
  font-family: "Public Sans", sans-serif;
  font-weight: 900;
  color: #000000;
  font-size: 60px;
}
@media (min-width: 992px) {
  .gallery-sec .sec-text .social-proof .big-num span {
    font-size: 85px;
  }
}
.gallery-sec .sec-text .social-proof .big-num span:nth-child(2) {
  background: linear-gradient(90deg, #0d3de8 0%, #7593ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.gallery-sec .sec-imagery {
  position: relative;
}
@media (min-width: 700px) {
  .gallery-sec .sec-imagery {
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .gallery-sec .sec-imagery {
    width: 43%;
  }
}
.gallery-sec .sec-imagery .gallery-slider .slider-item .sec-image-wrapper {
  position: relative;
  margin: 30px auto;
  width: 100%;
  height: auto;
}
@media (min-width: 700px) {
  .gallery-sec .sec-imagery .gallery-slider .slider-item .sec-image-wrapper {
    margin: 0;
  }
}
/* end */
/**/
/* ========= --------->>>>>> cta section */
.cta-sec {
  position: relative;
  padding: 10px 0;
  margin: 50px 0;
  text-align: center;
}
@media (min-width: 451px) {
  .cta-sec {
    margin: 60px 0;
  }
}
@media (min-width: 600px) {
  .cta-sec {
    padding: 40px 0;
  }
}
@media (min-width: 992px) {
  .cta-sec {
    padding: 60px 0;
  }
}
.cta-sec .container h2 {
  color: #000000;
  text-align: center;
}
@media (min-width: 600px) {
  .cta-sec .container h2 {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 700px) {
  .cta-sec .container h2 {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
  }
}
.cta-sec .container P {
  color: #424242;
}
@media (min-width: 540px) {
  .cta-sec .container P {
    width: 55%;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 700px) {
  .cta-sec .container P {
    width: 45%;
  }
}
@media (min-width: 1200px) {
  .cta-sec .container P {
    width: 35%;
  }
}
.cta-sec .container .cta-action {
  position: relative;
  padding: 0 15px;
  width: 100%;
}

/* end */
/**/
/* ========= --------->>>>>> reviews section */
.vid-reviews-sec .sec-header {
  margin-bottom: 25px;
  text-align: center;
}
@media (min-width: 700px) {
  .vid-reviews-sec .sec-header {
    margin-bottom: 35px;
  }
}
.vid-reviews-sec .sec-header h2 {
  color: #000000;
}
@media (min-width: 700px) {
  .vid-reviews-sec .sec-header h2 {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 1200px) {
  .vid-reviews-sec .sec-header h2 {
    width: 50%;
  }
}
.vid-reviews-sec .sec-header P {
  color: #424242;
}
@media (min-width: 540px) {
  .vid-reviews-sec .sec-header P {
    width: 55%;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 700px) {
  .vid-reviews-sec .sec-header P {
    width: 45%;
  }
}
@media (min-width: 1200px) {
  .vid-reviews-sec .sec-header P {
    width: 35%;
  }
}
.vid-reviews-sec .sec-body {
  position: relative;
  z-index: 2;
}
.vid-reviews-sec .sec-body .caro_vids_sliding-btns {
  position: relative;
  display: flex;
  justify-content: space-between;
  transform: translateY(44px);
  z-index: 2;
}
.vid-reviews-sec .sec-body .caro_vids_sliding-btns .xbtn {
  background: linear-gradient(90deg, #000000 0%, #373737 100%);
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 50%;
}
.vid-reviews-sec .sec-body .caro_vids_sliding-btns .xbtn:hover {
  background: linear-gradient(90deg, #e6cba8 0%, #b4b4b4 100%);
  color: #000000;
}
.vid-reviews-sec .sec-body .caro-vids .slider-item {
  position: relative;
  margin: 50px 0 0 0;
  z-index: 2;
}
@media (min-width: 992px) {
  .vid-reviews-sec .sec-body .caro-vids .slider-item {
    margin: 60px 0 0 0;
  }
}
.vid-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;
}
.vid-reviews-sec .sec-body .caro-vids .slider-item .video-overlay img {
  width: 50px;
  height: auto;
}
@media (min-width: 992px) {
  .vid-reviews-sec .sec-body .caro-vids .slider-item .video-overlay img {
    width: 70px;
  }
}
.vid-reviews-sec .sec-body .caro-vids .slider-item .video {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 90vh;
  margin-bottom: 30px;
  overflow: hidden;
}
@media (min-width: 700px) {
  .vid-reviews-sec .sec-body .caro-vids .slider-item .video {
    height: 80vh;
  }
}

/* end */
/* ========= --------->>>>>> written reviews section */
@media (min-width: 700px) {
  .written-reviews-sec .container {
    display: flex;
    gap: 10px;
    padding: 0 5px;
    flex-direction: row-reverse;
  }
}
.written-reviews-sec .sec-header {
  position: relative;
  background: linear-gradient(90deg, #e6cba8 0%, #b4b4b4 100%);
  padding: 50px 30px;
  margin-bottom: 15px;
}
@media (min-width: 325px) {
  .written-reviews-sec .sec-header {
    padding: 60px 30px;
  }
}
@media (min-width: 700px) {
  .written-reviews-sec .sec-header {
    width: 50%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media (min-width: 992px) {
  .written-reviews-sec .sec-header {
    width: 60%;
    padding: 60px 50px;
  }
}
.written-reviews-sec .sec-header img {
  position: relative;
  width: 70%;
  height: auto;
  margin-bottom: 15px;
}
.written-reviews-sec .sec-header h2 {
  color: #000000;
}
.written-reviews-sec .sec-header p {
  color: #424242;
  margin-bottom: 30px;
}
@media (min-width: 700px) {
  .written-reviews-sec .sec-header .xbtn {
    width: fit-content;
  }
}
.written-reviews-sec .sec-body {
  position: relative;
  background: linear-gradient(90deg, #0d3de8 0%, #7593ff 100%);
  padding: 40px 20px;
}
@media (min-width: 700px) {
  .written-reviews-sec .sec-body {
    width: 50%;
    min-width: 0;
    padding: 50px 30px;
  }
}
@media (min-width: 992px) {
  .written-reviews-sec .sec-body {
    width: 40%;
  }
}
@media (min-width: 1200px) {
  .written-reviews-sec .sec-body {
    padding: 90px 50px;
  }
}
.written-reviews-sec .sec-body::after {
  position: absolute;
  content: "";
  top: -10px;
  right: 38px;
  background-image: url("../images/quote-white.png");
  background-size: cover;
  width: 100px;
  height: 100px;
  z-index: 1;
}
@media (min-width: 1200px) {
  .written-reviews-sec .sec-body::after {
    right: 71px;
    width: 150px;
    height: 150px;
    top: 15px;
  }
}
.written-reviews-sec .sec-body::before {
  position: absolute;
  content: "";
  bottom: -10px;
  left: 38px;
  background-image: url("../images/quote-white.png");
  background-size: cover;
  width: 100px;
  height: 100px;
  z-index: 2;
  transform: rotate(180deg);
}
@media (min-width: 1200px) {
  .written-reviews-sec .sec-body::before {
    left: 71px;
    width: 150px;
    height: 150px;
    bottom: 15px;
  }
}
.written-reviews-sec .sec-body .reviews-slider .slider-item {
  position: relative;
}
.written-reviews-sec .sec-body .reviews-slider .slider-item .card {
  position: relative;
  background: linear-gradient(90deg, #000000 0%, #373737 100%);
  border-radius: 14px;
  padding: 50px 30px;
  height: 420px;
}
@media (min-width: 600px) {
  .written-reviews-sec .sec-body .reviews-slider .slider-item .card {
    height: 350px;
  }
}
@media (min-width: 700px) {
  .written-reviews-sec .sec-body .reviews-slider .slider-item .card {
    height: 450px;
  }
}
@media (min-width: 992px) {
  .written-reviews-sec .sec-body .reviews-slider .slider-item .card {
    height: 500px;
  }
}
@media (min-width: 1200px) {
  .written-reviews-sec .sec-body .reviews-slider .slider-item .card {
    height: 550px;
    padding: 60px 40px;
  }
}
.written-reviews-sec .sec-body .reviews-slider .slider-item .card h3 {
  color: #ffffff;
}
.written-reviews-sec .sec-body .reviews-slider .slider-item .card img {
  position: relative;
  width: 100px;
  height: auto;
  margin-bottom: 20px;
}
.written-reviews-sec .sec-body .reviews-slider .slider-item .card p {
  color: #ebebeb;
  margin: 0;
}
.written-reviews-sec .sec-body .reviews-slider .slider-item .card .signature {
  position: absolute;
  bottom: 30px;
  right: 30px;
  font-size: 30px;
  font-family: "BPU";
  background: linear-gradient(90deg, #0d3de8 0%, #7593ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 1200px) {
  .written-reviews-sec .sec-body .reviews-slider .slider-item .card .signature {
    font-size: 35px;
    right: 40px;
  }
}

/* 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: 700px) {
  .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: 700px) {
  .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 {
  overflow-x: hidden;
}
.packages-sec .container .sec-header {
  position: relative;
  margin-bottom: 45px;
}
@media (min-width: 700px) {
  .packages-sec .container .sec-header {
    margin-bottom: 65px;
    display: flex;
  }
}
.packages-sec .container .sec-header .sec-part {
  position: relative;
}
@media (min-width: 700px) {
  .packages-sec .container .sec-header .sec-part:nth-child(1) {
    width: 30%;
    margin-right: 19%;
  }
  .packages-sec .container .sec-header .sec-part:nth-child(2) {
    width: 51%;
    text-align: right;
    padding-top: 10px;
  }
}
.packages-sec .container .sec-header h2 {
  color: #000000;
  font-size: 30px;
}
@media (min-width: 325px) {
  .packages-sec .container .sec-header h2 {
    font-size: 35px;
  }
}
@media (min-width: 700px) {
  .packages-sec .container .sec-header h2 {
    font-size: 40px;
  }
}
@media (min-width: 992px) {
  .packages-sec .container .sec-header h2 {
    font-size: 45px;
  }
}
@media (min-width: 1200px) {
  .packages-sec .container .sec-header h2 {
    font-size: 50px;
  }
}
.packages-sec .container .sec-header p {
  margin: 0;
}
.packages-sec .container .sec-body {
  position: relative;
  z-index: 1;
}
.packages-sec .container .sec-body .packages-slider .row {
  flex-direction: column;
}
@media (min-width: 700px) {
  .packages-sec .container .sec-body .packages-slider .row {
    flex-direction: row;
    margin: 0 -10px;
  }
}
.packages-sec .container .sec-body .packages-slider .slider-item {
  position: relative;
  margin-bottom: 70px;
  text-align: center;
  width: 100%;
  padding: 0 15px;
}
@media (min-width: 700px) {
  .packages-sec .container .sec-body .packages-slider .slider-item {
    width: 50%;
    padding: 0 5px;
  }
}
@media (min-width: 992px) {
  .packages-sec .container .sec-body .packages-slider .slider-item {
    width: 33.33333%;
  }
}
.packages-sec .container .sec-body .packages-slider .slider-item:last-child .pkg-body .pkg-name::after {
  content: "6 months";
}
.packages-sec .container .sec-body .packages-slider .slider-item:nth-child(2)::after {
  position: absolute;
  content: "";
  width: 80px;
  height: 80px;
  right: 0;
  top: -30px;
  background-image: url("../images/blue-dumbell.png");
  background-size: cover;
  transform: rotate(20deg);
}
@media (min-width: 700px) {
  .packages-sec .container .sec-body .packages-slider .slider-item:nth-child(2)::after {
    right: -15px;
  }
}
@media (min-width: 1200px) {
  .packages-sec .container .sec-body .packages-slider .slider-item:nth-child(2)::after {
    width: 100px;
    height: 100px;
  }
}
.packages-sec .container .sec-body .packages-slider .slider-item:nth-child(2)::before {
  position: absolute;
  content: "";
  width: 90px;
  height: 90px;
  left: 0;
  top: 110px;
  background-image: url("../images/blue-dumbell.png");
  background-size: cover;
  transform: rotate(70deg);
  z-index: 1;
}
@media (min-width: 540px) {
  .packages-sec .container .sec-body .packages-slider .slider-item:nth-child(2)::before {
    top: 155px;
  }
}
@media (min-width: 600px) {
  .packages-sec .container .sec-body .packages-slider .slider-item:nth-child(2)::before {
    top: 197px;
  }
}
@media (min-width: 700px) {
  .packages-sec .container .sec-body .packages-slider .slider-item:nth-child(2)::before {
    top: 123px;
    left: -15px;
  }
}
@media (min-width: 1200px) {
  .packages-sec .container .sec-body .packages-slider .slider-item:nth-child(2)::before {
    top: 129px;
    width: 110px;
    height: 110px;
  }
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-container {
  position: relative;
  background: linear-gradient(180deg, #000000 0%, #373737 100%);
  padding: 5px;
}
@media (min-width: 700px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-container {
    height: 100%;
  }
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-header {
  position: relative;
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-header .image-wrapper {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
}
@media (min-width: 451px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-header .image-wrapper {
    height: 210px;
  }
}
@media (min-width: 600px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-header .image-wrapper {
    height: 260px;
  }
}
@media (min-width: 700px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-header .image-wrapper {
    height: 180px;
  }
}
@media (min-width: 1200px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-header .image-wrapper {
    height: 200px;
  }
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body {
  position: relative;
  padding: 20px 10px 50px 10px;
}
@media (min-width: 325px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-body {
    padding: 20px 15px 50px 15px;
  }
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-name {
  position: relative;
  margin-top: 5px;
  margin-bottom: 25px;
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-name::after {
  position: absolute;
  content: "3 months";
  width: auto;
  height: auto;
  background: linear-gradient(90deg, #ffffff 0%, #c6c6c6 100%);
  top: -11px;
  right: 0;
  font-family: "Public Sans", sans-serif;
  font-weight: 800;
  color: #000000;
  padding: 10px 23px;
  border-radius: 30px;
  font-size: 14px;
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-name h3 {
  color: #ffffff;
  text-transform: uppercase;
  text-align: left;
  font-size: 18px;
  margin: 0;
}
@media (min-width: 1200px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-name h3 {
    font-size: 22px;
  }
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-price {
  position: relative;
  display: block;
  color: #ffffff;
  font-size: 40px;
  margin-bottom: 25px;
  font-family: "Public Sans", sans-serif;
}
@media (min-width: 325px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-price {
    font-size: 50px;
  }
}
@media (min-width: 451px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-price {
    font-size: 70px;
  }
}
@media (min-width: 700px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-price {
    font-size: 50px;
  }
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-price span:nth-child(1) {
  font-weight: 800;
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .xbtn {
  display: block;
  margin-bottom: 35px;
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-features {
  position: relative;
  text-align: left;
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-features h4 {
  margin: 0 0 25px 0;
  color: #ffffff;
  font-weight: 900;
  font-size: 13px;
  font-family: "Inclusive Sans", sans-serif;
}
@media (min-width: 700px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-features h4 {
    font-size: 14px;
  }
}
@media (min-width: 992px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-features h4 {
    font-size: 15px;
  }
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-features ul {
  position: relative;
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-features ul li {
  position: relative;
  margin-bottom: 40px;
  color: #ffffff;
  padding: 0 0 0 25px;
  font-weight: 400;
  font-size: 13px;
}
@media (min-width: 325px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-features ul li {
    margin-bottom: 50px;
    padding: 0 0 0 30px;
  }
}
@media (min-width: 700px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-features ul li {
    font-size: 14px;
  }
}
@media (min-width: 992px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-features ul li {
    font-size: 15px;
  }
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-features ul li:last-child {
  margin-bottom: 0;
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-features ul li:last-child::after {
  display: none;
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-features ul li::before {
  position: absolute;
  content: " ";
  width: 20px;
  height: 20px;
  background-image: url(../images/correct-mark.png);
  background-size: cover;
  left: 0;
  top: 0;
}
.packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-features ul li::after {
  position: absolute;
  content: " ";
  width: 100%;
  height: 3px;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  background-image: linear-gradient(to right, #b2b2b2 77%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 30px 3px; /* 30px total width (dash + gap), 4px thickness */
  background-repeat: repeat-x;
}
@media (min-width: 325px) {
  .packages-sec .container .sec-body .packages-slider .slider-item .pkg-body .pkg-features ul li::after {
    bottom: -25px;
  }
}

/* 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: 700px) {
  .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: 700px) {
  .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: 700px) {
  .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: 60px;
  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: 80px;
  }
}
@media (min-width: 992px) {
  .loading-sec2 .layers .layer0 .logo {
    width: 100px;
  }
}
.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 */