/*Womenjobs 2.0 CSS3 style sheet*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  position: relative;
}

:root {
  --base-bg: #fff;
  --base-color: #873a70;
  --primary-bg: #ffdce0;
  --primary-color: #691136;
  --secondary-bg: #691136;
  --secondary-color: #fff;
  --tertiary-bg: #d9530f;
  --alt-tertiary-bg: #d9530f;
  --tertiary-color: #fff;
  --dark-bg: #211d21;
  --dark-color: #fff;
  --accent-bg: #e0125f;
  --accent-color: #ffdce0;
  --off-color: #ffdce0;
  --trans-bg: linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.75));
  --secondary-fade-bg: linear-gradient(
    rgba(255, 255, 255, 0.26) 0.84%,
    rgba(211, 217, 255, 0.45) 31.09%,
    rgba(31, 149, 245, 0.78) 75.21%,
    rgb(34, 93, 231)
  );
  --primary-fade-bg: linear-gradient(
    rgba(3, 0, 0, 0.53),
    rgba(162, 162, 162, 0.85) 45.38%,
    rgba(255, 255, 255, 0.87) 75.21%,
    rgb(255, 255, 255) 99.58%
  );
  --dark-fade-bg: linear-gradient(
    rgba(3, 0, 0, 0.34),
    rgba(71, 71, 71, 0.56) 47.48%,
    rgba(0, 0, 0, 0.7) 80.25%,
    rgb(0, 0, 0) 96%
  );
  --accent-fade-bg: linear-gradient(
    rgba(3, 0, 0, 0.53),
    rgba(162, 162, 162, 0.85) 45.38%,
    rgba(255, 255, 255, 0.87) 75.21%,
    rgb(255, 255, 255) 99.58%
  );
  --base-shadow-fade: linear-gradient(
    rgba(3, 0, 0, 0),
    rgba(71, 71, 71, 0.29) 47.48%,
    rgba(0, 0, 0, 0.7) 80.25%,
    rgb(0, 0, 0) 96%
  );

  --primary-gradient: linear-gradient(
      rgba(255, 220, 224, 0.65),
      #ffdce0 38.66%,
      rgba(251, 178, 186, 0.79) 80.25%
    ),
    linear-gradient(
      231deg,
      rgb(252, 9, 94) 1.68%,
      #c33747 20.59%,
      #ffdce0 44.54%,
      #54020b 94.54%
    );

  --primary-gradient-alt: radial-gradient(
    #f2f2f2 28.99%,
    rgb(191, 203, 214),
    #eee
  );

  --secondary-gradient: radial-gradient(
      rgba(255, 203, 225, 0.42),
      rgba(105, 1, 44, 0.72) 97.9%
    ),
    linear-gradient(97deg, #ffffff, #ff99a4 49.16%, #ffffff);
  --tertiary-gradient: linear-gradient(
      130deg,
      #c704d9,
      rgba(35, 10, 175, 0.9) 24.37%,
      rgba(0, 206, 252, 0.69) 75.63%,
      rgba(11, 195, 248, 0)
    ),
    linear-gradient(206deg, #0043fc, rgb(120, 151, 250) 43.28%, #0029b7 98.32%);
  --tertiary-gradient-alt: radial-gradient(#e3faff, #333 57.14%);
  --substitute-gradient: linear-gradient(
      130deg,
      rgba(121, 9, 190, 0.92),
      rgba(35, 10, 175, 0.9) 24.37%,
      rgba(11, 194, 247, 0.21) 82.77%,
      rgba(11, 195, 248, 0)
    ),
    linear-gradient(
      303deg,
      #007af4,
      #09e0f0 29.83%,
      rgb(4, 212, 242) 60.5%,
      #007af4 98.32%
    );
  --substitute-gradient-alt: radial-gradient(
    #7909be,
    #230aaf 52.1%,
    rgb(11, 194, 247) 98.74%
  );
  --accent-gradient: linear-gradient(
      21deg,
      rgba(237, 16, 97, 0.82),
      rgba(245, 0, 78, 0.6) 49.58%,
      rgba(255, 0, 220, 0.31) 96.22%
    ),
    linear-gradient(
      143deg,
      #7019f1,
      rgba(197, 60, 192, 0.8) 26.47%,
      rgba(237, 74, 173, 0.51) 47.06%,
      rgba(233, 68, 181, 0.68) 70.59%,
      #c50af7
    );
  --accent-gradient-alt: radial-gradient(
    #ffffff 36.55%,
    rgb(239, 216, 20) 41.18%,
    rgb(255, 255, 255) 58.82%,
    #fec50a 69.33%
  );
  --secondary-gradient-bg: linear-gradient(215deg, #f2f2f2, #f1f1f1);
  --grey-bg: linear-gradient(215deg, #f2f2f2, #f1f1f1);
  --grey-color: #232c34;
  --sm-font: 15px;
  --reg-font: 18px;
  --md-font: 20px;
  --lg-font: 24px;
  --x-lg-font: 26px;
  --ui-maxi-spacing: 1.2rem;
  --ui-spacing: 0.75rem;
  --ui-half-spacing: 0.5rem;
  --radius: 1.2rem;
  --full-radius: 2rem;
  --x-sm-card-height: 100px;
  --sm-card-height: 220px;
  --sm-card-height-2: 320px;
  --reg-card-height: 450px;
  --reg-card-height-2: 550px;
  --md-card-height: 650px;
  --lg-card-height: 720px;
  --x-lg-card-height: 900px;
  --h-100: 100%;
  --h-95: 95%;
  --h-90: 90%;
  --h-85: 85%;
  --h-80: 80%;
  --h-75: 75%;
  --h-70: 70%;
  --h-65: 65%;
  --h-60: 60%;
  --h-55: 55%;
  --h-50: 50%;
  --h-45: 45%;
  --h-40: 40%;
  --h-35: 35%;
  --h-30: 30%;
  --h-25: 25%;
  --h-20: 20%;
  --h-15: 15%;
  --h-10: 10%;
  --h-5: 5%;
  --card-2-by-2: 49.75%;
  --card-3-by-3: 32.75%;
  --card-4-by-4: 24.5%;
  --header-height: 70px;
  --bring-forward: 100;
  --send-backward: 0;
  --bring-to-top: 999;
}

html,
body {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  background: var(--primary-bg);
  color: var(--primary-color);
  -webkit-font-smoothing: antialiased;
  position: relative;
  font-family: "Nunito Sans", sans-serif;
  line-height: 1.3;
  z-index: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
}

body * {
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
}

a:hover {
  color: inherit;
  font-weight: 700;
}

.call-to-action {
  padding: var(--ui-spacing) var(--ui-maxi-spacing);
  border-radius: var(--full-radius);
  justify-content: center;
  align-items: center;
}

form {
  margin-top: var(--ui-maxi-spacing);
  margin-bottom: var(--ui-maxi-spacing);
}

form label {
  font-weight: 600;
}

.form-login-icon,
i.bi.form-login-icon {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100%;
  font-size: 100px;
  padding: 10px;
}

.form-control,
form .form-control {
  background: transparent;
  background-color: transparent;
  height: 45px;
  margin: 0.25rem 0;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid;
  border-radius: var(--radius);
  color: inherit;
}

form input.form-control::placeholder {
  color: inherit;
  opacity: 0.75;
  font-weight: 300;
}

form .tab-page input.form-control {
  color: inherit;
}

form .tab-page input.form-control::placeholder {
  color: inherit;
}

.form-control:focus,
form .form-control:focus {
  color: inherit;
  background-color: transparent;
  border-color: var(--dark-bg);
  outline: 0;
  box-shadow: none;
}

.form-control.prodQty {
  width: 60px;
  background: var(--primary-bg);
  margin-right: 10px;
}

/* form assets */
form.spForm input,
form.spForm select,
form.spForm textarea,
form.spForm radio {
  display: none;
}

.placeholder,
span.placeholder,
form.spForm .placeholder {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  font-weight: 500;
  color: inherit;
  background: rgba(0, 0, 0, 0.1);
  line-height: 3rem;
  padding: 0 1.2rem;
  width: 100%;
  border-radius: var(--radius);
  justify-content: space-between;
  align-items: center;
  opacity: 0.75;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  word-spacing: -2px;
  font-size: 0.85rem;
}

.placeholder i,
span.placeholder i,
form.spForm .placeholder i {
  display: flex;
  flex: 0 0 auto;
}

.placeholder:hover,
span.placeholder:hover,
form.spForm .placeholder:hover {
  opacity: 1;
}

.placeholder:hover i,
span.placeholder:hover i,
form.spForm .placeholder:hover i {
  background: var(--dark-bg);
  color: var(--dark-text);
  border-radius: var(--radius);
}
.form-input-option,
div.form-input-option {
  width: 100%;
  line-height: 1.2rem;
  display: flex;
  background: inherit;
  color: inherit;
  border: none;
  position: relative;
}
.input-boxes,
.options,
div.options,
div.input-boxes {
  width: 300px;
  padding: 1.2rem;
  background: var(--primary-bg);
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  cursor: pointer;
  z-index: 100;
  margin-top: 7rem;
  border-radius: 1.2rem;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  position: absolute;
  box-shadow: 0px 2px 15px 10px rgba(0, 0, 0, 0.12);
  max-height: 45vh;
  overflow: auto;
}

.input-boxes.active,
div.input-boxes.active,
.options.active,
div.options.active {
  display: flex;
  margin-top: 3.2rem;
}

.option,
div.option,
div.options .option {
  display: flex;
  margin: 0.5rem 0;
  flex: 0 0 auto;
  justify-content: flex-start;
  align-items: center;
  line-height: 1.2rem;
  font-weight: 500;
  color: inherit;
  padding: 0;
  cursor: pointer;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
}

.option:hover,
div.option:hover,
div.options .option:hover {
  font-weight: bold;
  padding: 0.5rem 1.2rem;
  background: var(--off-white-bg);
  border-radius: var(--radius);
}
.select-options .placeholder {
  cursor: pointer;
}

form button {
  border: none;
}

/* .input-boxes.active,
div.input-boxes.active {
  margin-top: 0px;
} */

.input-boxes.active input,
div.input-boxes.active input,
form.spForm div.input-boxes.active input,
form div.input-boxes.active input {
  display: flex;
  box-shadow: none;
  border: 1px solid var(--grey-bg);
  line-height: 2.2rem;
  border-radius: var(--radius);
  padding: 0px 5px;
  font-size: 1rem;
  font-weight: 300;
}

.input-boxes.active input:focus,
.input-boxes.active input:focus-visible {
  outline-color: none;
  outline-style: auto;
  outline-width: 0px;
}

.tooltip {
  opacity: 1;
  margin-top: 0px;
  right: 0;
  font-size: 13px;
}

.menu {
  display: none;
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl,
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
  width: 90%;
}

.base,
*.base {
  background: var(--base-bg);
  color: var(--base-color);
}

.primary,
*.primary {
  background: var(--primary-bg);
  color: var(--primary-color);
}

.primary-gradient,
*.primary-gradient {
  background: var(--primary-gradient);
  color: var(--primary-color);
}

.secondary,
*.secondary {
  background: var(--secondary-bg);
  color: var(--secondary-color);
}

.secondary-gradient,
*.secondary-gradient {
  background: var(--secondary-gradient);
  color: var(--secondary-color);
}

.tertiary,
*.tertiary {
  background: var(--tertiary-bg);
  color: var(--tertiary-color);
}

.accent,
*.accent {
  background: var(--accent-bg);
  color: var(--accent-color);
}
.tertiary-gradient,
*.tertiary-gradient {
  background: var(--tertiary-gradient);
  color: var(--tertiary-color);
}

.accent-gradient,
*.accent-gradient {
  background: var(--accent-gradient);
  color: var(--accent-color);
}

.trans-bg,
*.trans-bg {
  background: var(--trans-bg);
  color: var(--dark-color);
}

.grey,
*.grey {
  background: var(--grey-bg);
  color: var(--grey-color);
}

.dark,
*.dark {
  background: var(--dark-bg);
  color: var(--dark-color);
}

.primary-color,
*.primary-color {
  color: var(--primary-bg);
}

.secondary-color,
*.secondary-color {
  color: var(--secondary-bg);
}

.tertiary-color,
*.tertiary-color {
  color: var(--tertiary-bg);
}

.accent-color,
*.accent-color {
  color: var(--accent-bg);
}

.grey-color,
*.grey-color {
  color: var(--grey-color);
}

.dark-color,
*.dark-color {
  color: var(--dark-color);
}

.secondary-fade-bg {
  color: var(--primary-bg);
  background: var(--secondary-fade-bg);
}

.secondary-gradient-bg {
  color: var(--primary-bg);
  background: var(--secondary-gradient-bg);
}

.primary-fade-bg {
  color: inherit;
  background: var(--primary-fade-bg);
}

.dark-fade-bg {
  color: inherit;
  background: var(--dark-fade-bg);
}

.base-shadow-fade {
  color: inherit;
  background: var(--base-shadow-fade);
}

.radius {
  border-radius: var(--radius);
}

.full-radius {
  border-radius: var(--full-radius);
}

.top-radius,
*.top-radius {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.bottom-radius,
*.bottom-radius {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.left-radius,
*.left-radius {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.right-radius,
*.right-radius {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.top-full-radius,
*.top-full-radius {
  border-top-left-radius: var(--full-radius);
  border-top-right-radius: var(--full-radius);
}

.bottom-full-radius,
*.bottom-full-radius {
  border-bottom-left-radius: var(--full-radius);
  border-bottom-right-radius: var(--full-radius);
}

.left-full-radius,
*.left-full-radius {
  border-top-left-radius: var(--full-radius);
  border-bottom-left-radius: var(--full-radius);
}

.right-full-radius,
*.right-full-radius {
  border-top-right-radius: var(--full-radius);
  border-bottom-right-radius: var(--full-radius);
}

.hover-effect {
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
}

.primary-hover:hover,
*.primary-hover:hover {
  background: var(--primary-bg) !important;
  color: var(--primary-color) !important;
}

.secondary-hover:hover,
*.secondary-hover:hover {
  background: var(--secondary-bg) !important;
  color: var(--secondary-color) !important;
}

.tertiary-hover:hover,
*.tertiary-hover:hover {
  background: var(--tertiary-bg) !important;
  color: var(--tertiary-color) !important;
}

.accent-hover:hover,
*.accent-hover:hover {
  background: var(--accent-bg) !important;
  color: var(--accent-color) !important;
}

.dark-hover:hover,
*.dark-hover:hover {
  background: var(--dark-bg) !important;
  color: var(--dark-color) !important;
}

.grey-hover:hover,
*.grey-hover:hover {
  background: var(--grey-bg) !important;
  color: var(--grey-color) !important;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  margin: 0;
}

header {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

header .site-logo {
  display: flex;
  height: 45px;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  flex-direction: row;
  margin: 15px auto;
  margin-left: 0;
}

header .sp-actions-cont {
  background: var(--accent-bg);
  height: var(--header-height);
}

header a,
header li a {
  padding: 0 var(--ui-half-spacing);
  font-weight: 500;
  font-size: var(--sm-font);
}

header a:hover,
header li a:hover {
  color: var(--secondary-bg);
}

header nav li div.nav-dropdown {
  position: absolute;
  width: 650px;
  left: 0%;
  top: 50px;
  transition: all 0.5s;
  -ms-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  display: none;
}
header nav li div.nav-dropdown div.container .row {
  margin-top: 15px;
  border-radius: 15px;
  width: 100%;
  background: var(--off-white-bg);
  transition: all 0.5s;
  -ms-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  height: 0px;
  box-shadow: -1px 1px 30px 4px rgba(0, 0, 0, 0.11);
  overflow: hidden;
}

header nav li div.nav-dropdown div.container div.row .row {
  box-shadow: none;
  background: inherit;
  color: #222;
}

header nav.navbar li div.nav-dropdown div.container img {
  border-radius: 10px;
}

header nav li div.nav-dropdown ul {
  background: transparent;
  border-radius: 10px;
  padding: 0;
  margin: 0;
}

header nav li div.nav-dropdown ul li {
  width: 100%;
}
header nav.navbar li div.nav-dropdown ul li a {
  color: var(--accent-bg);
  text-align: left;
  align-content: flex-start;
  justify-content: flex-start;
  line-height: 1;
  font-size: 12px;
  padding: 0;
}

header nav.navbar li div.nav-dropdown ul li a::after,
header nav.navbar li div.nav-dropdown ul li a.btn-primary::after {
  display: none !important;
}
header nav li div.nav-dropdown ul li a:hover,
header nav.navbar div.nav-dropdown ul li a:hover {
  color: var(--substitute-bg);
}

header nav.navbar ul li:hover div.nav-dropdown,
header nav.navbar ul li:hover div.nav-dropdown .container .row {
  display: inline-flex;
  height: auto;
}

header nav.navbar div.nav-dropdown .container {
  width: 100%;
  margin: 0%;
  padding: 0%;
}

header nav.navbar div.nav-dropdown div.container div.row div p {
  font-size: 12px;
}
header nav.navbar ul li:hover div.nav-dropdown h1,
header nav.navbar ul li:hover div.nav-dropdown h2,
header nav.navbar ul li:hover div.nav-dropdown h3,
header nav.navbar ul li:hover div.nav-dropdown h4,
header nav.navbar ul li:hover div.nav-dropdown h5,
header nav.navbar ul li:hover div.nav-dropdown h6 {
  color: var(--substitute-bg);
  background: transparent;
}

section {
  width: 100%;
}

section.hero {
  height: var(--lg-card-height);
  width: 100%;
}

.hero-img,
img.hero-img,
section.hero img.hero-img {
  width: 100%;
}

.cartImg,
img.cartImg {
  height: 85px;
  display: flex;
  margin: 0 auto;
}

.top-0,
* .top-0 {
  top: 0;
}

.top-1,
* .top-1 {
  top: 1rem;
}

.top-2,
* .top-2 {
  top: 2rem;
}

.top-3,
* .top-3 {
  top: 3rem;
}

.top-4,
* .top-4 {
  top: 4rem;
}

.top-5,
* .top-5 {
  top: 5rem;
}

.left-0,
* .left-0 {
  left: 0;
}

.left-1,
* .left-1 {
  left: 1rem;
}

.left-2,
* .left-2 {
  left: 2rem;
}

.left-3,
* .left-3 {
  left: 3rem;
}

.left-4,
* .left-4 {
  left: 4rem;
}

.left-5,
* .left-5 {
  left: 5rem;
}

.right-0,
* .right-0 {
  right: 0;
}

.right-1,
* .right-1 {
  right: 1rem;
}

.right-2,
* .right-2 {
  right: 2rem;
}

.right-3,
* .right-3 {
  right: 3rem;
}

.right-4,
* .right-4 {
  right: 4rem;
}

.right-5,
* .right-5 {
  right: 5rem;
}

.bottom-0,
* .bottom-0 {
  bottom: 0;
}

.bottom-1,
* .bottom-1 {
  bottom: 1rem;
}

.bottom-2,
* .bottom-2 {
  bottom: 2rem;
}

.bottom-3,
* .bottom-3 {
  bottom: 3rem;
}

.bottom-4,
* .bottom-4 {
  bottom: 4rem;
}

.bottom-5,
* .bottom-5 {
  bottom: 5rem;
}

.bring-forward {
  z-index: var(--bring-forward);
}

.send-backward {
  z-index: var(--send-backward);
}

.bring-to-top {
  z-index: var(--bring-to-top);
}

.hero-title {
  flex-direction: row;
  margin-top: -15rem;
  margin-bottom: 0rem;
  text-align: center;
  justify-content: center;
  align-items: flex-end;
  text-transform: capitalize;
  height: 200px;
  width: 100%;
  padding-bottom: 0rem;
}
.hero-title * {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
}

.hero .shadow-top {
  box-shadow: 0px -100px 50px 70px rgba(0, 0, 0, 0.5);
}

.hero .hero-data {
  margin-top: 1.5rem;
  justify-content: center;
  text-align: center;
}
.carousel-item.active,
.hero .carousel-item-next,
.hero .carousel-item-prev,
.hero .carousel-item.active {
  display: flex;
}
.carousel-control-next,
.carousel-control-prev,
.hero .carousel-control-next,
.hero .carousel-control-prev {
  width: 5%;
}

.carousel.psdPackages .carousel-inner,
.carousel.galleryCarousel .carousel-inner {
  flex-direction: row;
}

.carousel.psdPackages .carousel-indicators [data-bs-target].active {
  background-color: var(--secondary-bg);
}

.carousel-indicators {
  z-index: var(--bring-forward);
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  margin-bottom: -2.5rem;
}

.carousel-indicators span,
.carousel-indicators [data-bs-target] {
  width: 18px;
  height: 18px;
  border-radius: 50px;
  background-clip: none;
  border: none;
  border-top: none;
  border-bottom: none;
  position: relative;
}

.carousel-indicators span.active::after {
  width: 16px;
  height: 16px;
  border-radius: 50px;
  background: var(--primary-bg);
  position: absolute;
  z-index: var(--bring-forward);
  content: "";
  margin: 0.05rem;
  left: auto;
  right: auto;
}
.carousel-indicators span::before {
  width: 10px;
  height: 10px;
  border-radius: 50px;
  background: var(--secondary-bg);
  position: relative;
  z-index: var(--bring-to-top);
  content: "";
  margin: auto;
}

.hero .hero-call-to-action {
  background: var(--secondary-bg);
  color: var(--secondary-color);
  border-radius: var(--full-radius);
  justify-content: center;
  align-items: center;
  margin: var(--ui-spacing) auto;
  font-size: var(--reg-font);
  padding: 1rem 2.75rem;
  font-weight: 700;
}

.wavy-circle {
  --s: 300px; /* adjust to control the size */

  width: var(--s);
  aspect-ratio: 1;
  --g: /calc(var(--s) * 0.201) calc(var(--s) * 0.201) radial-gradient(
      50% 50%,
      #000 99%,
      #0000 101%
    ) no-repeat;
  mask: calc(50% + var(--s) * 0.369) calc(50% + var(--s) * 0) var(--g),
    calc(50% + var(--s) * 0.261) calc(50% + var(--s) * 0.261) var(--g),
    calc(50% + var(--s) * 0) calc(50% + var(--s) * 0.369) var(--g),
    calc(50% + var(--s) * -0.261) calc(50% + var(--s) * 0.261) var(--g),
    calc(50% + var(--s) * -0.369) calc(50% + var(--s) * 0) var(--g),
    calc(50% + var(--s) * -0.261) calc(50% + var(--s) * -0.261) var(--g),
    calc(50% + var(--s) * 0) calc(50% + var(--s) * -0.369) var(--g),
    calc(50% + var(--s) * 0.261) calc(50% + var(--s) * -0.261) var(--g),
    radial-gradient(calc(var(--s) * 0.418), #000 99%, #0000 101%) intersect,
    radial-gradient(#000 0 0) exclude,
    calc(50% + var(--s) * 0.447) calc(50% + var(--s) * 0.185) var(--g),
    calc(50% + var(--s) * 0.185) calc(50% + var(--s) * 0.447) var(--g),
    calc(50% + var(--s) * -0.185) calc(50% + var(--s) * 0.447) var(--g),
    calc(50% + var(--s) * -0.447) calc(50% + var(--s) * 0.185) var(--g),
    calc(50% + var(--s) * -0.447) calc(50% + var(--s) * -0.185) var(--g),
    calc(50% + var(--s) * -0.185) calc(50% + var(--s) * -0.447) var(--g),
    calc(50% + var(--s) * 0.185) calc(50% + var(--s) * -0.447) var(--g),
    calc(50% + var(--s) * 0.447) calc(50% + var(--s) * -0.185) var(--g);
}

.x-sm-card-height {
  height: var(--x-sm-card-height);
}

.sm-card-height {
  height: var(--sm-card-height);
}

.sm-card-height-2 {
  height: var(--sm-card-height-2);
}

.reg-card-height {
  height: var(--reg-card-height);
}

.reg-card-height-2 {
  height: var(--reg-card-height-2);
}

.md-card-height {
  height: var(--md-card-height);
}

.lg-card-height {
  height: var(--lg-card-height);
}

.x-lg-card-height {
  height: var(--x-lg-card-height);
}

.card-2 {
  width: var(--card-2-by-2);
}

.card-3 {
  width: var(--card-3-by-3);
}

.card-4 {
  width: var(--card-4-by-4);
  margin-left: 0.23%;
  margin-right: 0.23%;
}

.sm-font {
  font-size: var(--sm-font) !important;
}

.reg-font {
  font-size: var(--reg-font) !important;
}

.md-font {
  font-size: var(--md-font) !important;
}

.lg-font {
  font-size: var(--lg-font) !important;
}

.x-lg-font {
  font-size: var(--x-lg-font) !important;
}

.display-6 {
  font-size: 2.125rem;
}

.h-100,
* .h-100 {
  height: var(--h-100) !important;
}

.h-95,
*.h-95 {
  height: var(--h-95) !important;
}

.h-90,
*.h-90 {
  height: var(--h-90) !important;
}

.h-85,
*.h-85 {
  height: var(--h-85) !important;
}

.h-80,
*.h-80 {
  height: var(--h-80) !important;
}

.h-75,
*.h-75 {
  height: var(--h-75) !important;
}

.h-70,
*.h-70 {
  height: var(--h-70) !important;
}

.h-65,
*.h-65 {
  height: var(--h-65) !important;
}

.h-60,
*.h-60 {
  height: var(--h-60) !important;
}

.h-55,
*.h-55 {
  height: var(--h-55) !important;
}

.h-50,
*.h-50 {
  height: var(--h-50) !important;
}

.h-45,
*.h-45 {
  height: var(--h-45) !important;
}

.h-40,
*.h-40 {
  height: var(--h-40) !important;
}

.h-35,
*.h-35 {
  height: var(--h-35) !important;
}

.h-30,
*.h-30 {
  height: var(--h-30) !important;
}

.h-25,
*.h-25 {
  height: var(--h-25) !important;
}

.h-20,
*.h-20 {
  height: var(--h-20) !important;
}

.h-15,
*.h-15 {
  height: var(--h-15) !important;
}

.h-10,
*.h-10 {
  height: var(--h-10) !important;
}

.h-5,
*.h-5 {
  height: var(--h-5) !important;
}

.scale img,
* .scale img {
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
}

.scale:hover img {
  transform: scale(1.1);
}

.package-box,
.package-box * {
  cursor: pointer;
  position: relative;
}

.package-box.active,
.border.package-box.active {
  border: 2px solid var(--secondary-bg) !important;
}

.package-box.active::after {
  content: "\F26B";
  display: flex;
  position: absolute;
  font-family: "Bootstrap-icons";
  top: -15px;
  right: -15px;
  width: 35px;
  height: 35px;
  text-align: center;
  justify-content: center;
  align-items: center;
  background: var(--secondary-bg);
  color: var(--primary-bg);
  border-radius: var(--full-radius);
  z-index: 99999;
}

.counter {
  width: 100px;
  height: 100px;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  border-radius: 200px;
  cursor: pointer;
}

.counter * {
  cursor: pointer;
}

span.active,
.counter.active {
  background: var(--secondary-bg);
  color: var(--secondary-color);
}

.calendar_day.disabled,
.calendar .wk_day.disabled,
.calendar .wk-days-grp span.disabled {
  cursor: none;
  color: var(--off-color);
}

.modalPopBg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: var(--bring-to-top);
  display: none;
}

.modalPopBg.active {
  display: flex;
}
.calendar .wk_day,
.calendar .wk-days-grp span {
  width: 14.285%;
  height: 5vh;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.calendar .wk-days-grp span.active {
  background: var(--secondary-bg);
  color: var(--secondary-color);
}

.t-slot,
span.t-slot {
  padding: var(--ui-spacing);
  margin: var(--ui-half-spacing);
  border: 1px solid;
  border-radius: var(--radius);
  cursor: pointer;
}

.t-slot.active,
span.t-slot.active {
  background: var(--secondary-bg);
  color: var(--secondary-color);
}

.cartQty,
span.cartQty {
  position: absolute;
  top: -15px;
  left: 15px;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: var(--secondary-bg);
  color: var(--secondary-color);
  width: 20px;
  height: 20px;
  z-index: var(--bring-forward);
  border-radius: var(--radius);
  font-size: 10px;
}

a.whatsappBtn {
  position: fixed;
  bottom: 20px;
  right: 30px;
  background: #fff;
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  border-radius: 80px;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  z-index: 100;
  justify-content: center;
  align-items: center;
  font-size: var(--x-lg-font);
}

a.whatsappBtn:hover {
  bottom: 40px;
}
iframe {
  width: 100%;
}

.job-box {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: var(--primary-bg);
  color: var(--primary-text);
  width: 100%;
  border-radius: 2rem;
  padding: 0%;
  position: relative;
  margin: 0;
  min-height: 100px;
  overflow: hidden;
}

.job-box p,
div.job-box p {
  height: 10vh;
  max-height: 10vh;
  overflow: hidden;
  background: inherit;
}

.sml-component {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: var(--primary-bg);
  color: var(--primary-text);
  width: 100%;
  border-radius: 2rem;
  padding: 0%;
  position: relative;
  margin: 0;
  height: 55vh;
  overflow: hidden;
}

.sml-component form {
  justify-content: end;
  align-self: end;
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1rem;
}

.list-inline-item,
header .list-inline-item {
  margin-right: 0rem;
  float: left;
}
.pop-container,
.flex-container .pop-container,
.modalPopContainer .notice-box div.pop-container {
  height: auto;
  display: flex;
  flex: 1 1 auto;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
}

div.site-notify {
  position: fixed;
  top: 50px;
  background: #111;
  border-radius: 400px;
  display: none;
  flex: 0 0 auto;
  justify-self: center;
  align-self: center;
  margin: 0 auto;
  z-index: 99999;
  justify-content: space-between;
  align-items: center;
  float: none;
  flex-direction: row;
  padding: 15px 30px;
  width: 30%;
  left: 35%;
}
div.site-notify .alertIcon {
  display: flex;
  flex: 0 0 auto;
  background: #333;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  width: 50px;
  height: 50px;
}

div.site-notify .alertIcon i {
  color: #fff;
}

div.site-notify .alertUser {
  font-size: 15px;
  color: #fff;
  justify-content: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  font-weight: 400;
  align-items: center;
  text-align: center;
  padding: 0px 10px;
}

div.site-notify .alertUser p {
  margin: 0 auto;
  font-weight: 400;
}

div.site-inprogress {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.25);
  position: fixed;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  z-index: 99998;
  display: none;
}

.modalPopBack,
.modalPopContainer {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.modalPopBack {
  z-index: 9999;
  background: rgba(0, 0, 0, 0.45);
}

.modalPopContainer {
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  align-content: center;
  z-index: 10000;
}

.modalPopBack.active,
.modalPopContainer.active {
  display: inline-flex;
}

.modalPopContainer .notice-box {
  height: 400px;
  max-height: 500px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.modalPopContainer .notice-box div {
  position: relative;
  z-index: 100;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 100%;
  font-size: 1.5rem;
  font-weight: 500;
  display: flex;
}

.modalPopContainer a.btn-primary {
  background: var(--substitute-bg);
  color: var(--substitute-text);
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition-delay: 0.5s;
}

.modalPopContainer a.btn-primary:hover {
  background: var(--white-bg);
  color: var(--primary-text);
}

.modalPopContainer i.clsModal {
  position: absolute;
  color: #000;
  top: 25px;
  right: 25px;
  z-index: 100;
  cursor: pointer;
}

.menu-box,
div.menu-box {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: var(--bring-to-top);
  background: var(--dark-bg);
  color: var(--primary-bg);
  justify-content: flex-start;
  align-items: start;
  flex-direction: column;
  padding: 0;
  display: none;
}

.accordion,
.accordion * {
  transition: all ease-in 0.5s;
  -webkit-transition: all ease-in 0.5s;
  -moz-transition: all ease-in 0.5s;
  -o-transition: all ease-in 0.5s;
  -ms-transition: all ease-in 0.5s;
}

.accordionHeader * {
  margin-bottom: 0;
}

.accordion-header.collapse {
  display: block;
}

.accordion-item .accordion-button.collapsed {
  display: flex;
}
.accordion-button::after {
  display: block;
}

.search-box {
  position: fixed;
}

.search-list-container {
  margin-top: 25vh;
  position: relative;
}

.search-list-container .main-list {
  display: flex;
  flex: 0 0 auto;
  width: 75%;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  position: relative;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
}

.search-list-container .data-feed {
  display: flex;
  width: 40%;
  flex: 0 0 auto;
  margin: 0;
  padding: 2rem;
  position: fixed;
  height: 75vh;
  overflow: auto;
  flex-direction: column;
  right: -40%;
  border-left: 1px solid var(--grey-bg);
  background: var(--primary-bg);
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  top: 25%;
}

.search-list-container.feed-active .main-list {
  width: 60%;
}

.search-list-container.feed-active .data-feed {
  right: 0%;
}

.rounded {
  border-radius: 2.25rem !important;
}
.clsBtn,
i.clsBtn,
a.clsBtn,
button.clsBtn {
  display: flex;
  flex: 0 0 auto;
  position: fixed;
  margin: 0;
  margin-top: -25px;
  background: var(--primary-bg);
  z-index: 9999;
  right: 2%;
  font-size: 1.5rem;
  border-radius: var(--radius);
  box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.125);
  padding: 0.45rem;
  cursor: pointer;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
}

.clsBtn:hover {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

.revealPassCont,
span.revealPassCont {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  width: 15%;
  padding-top: 3vh;
}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  display: none;
  margin: 0;
  flex: 0 0 auto;
  justify-content: center;
  align-items: start;
  padding: 0;
}

.modalBackground {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 0;
  background: var(--trans-dark-bg);
  display: flex;
  flex: 0 0 auto;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
}

.modalContainer {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: flex-start;
  z-index: 100;
}

.modalContainer div:first-child {
  display: flex;
  flex-direction: column;
  /* background: var(--primary-bg); */
  color: var(--primary-text);
  border-radius: 2rem;
  padding: 2rem;
  margin: 0;
}

.modal.active {
  display: flex;
}

.modal.active .modalBackground {
  opacity: 1;
}

.pricingBox {
  min-height: 85vh;
}

.menu-box,
div.menu-box {
  top: 0;
  right: -100%;
  background: var(--trans-dark-bg);
  color: var(--primary-text);
  z-index: 9999;
  display: flex;
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  overflow: auto;
  padding: 0;
  margin: 0;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
}

.menu-box .menu-container,
div.menu-box div.menu-container {
  height: 100vh !important;
  position: fixed;
  overflow: auto;
}

.menu-box.active,
div.menu-box.active {
  right: 0;
}

img.logoBrand {
  width: auto;
  height: 100px;
  display: flex;
  flex: 0 0 auto;
  max-width: none;
  margin: 0 auto;
}
img.thumbnail {
  height: 230px;
  width: auto;
  display: flex;
  flex: 0 0 auto;
}

.blogThumbnails,
div.blogThumbnails {
  height: 70vh;
  overflow: hidden;
  flex-direction: column;
}
.blogThumbnails .thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
}
.blogThumbnails .thumbnail img {
  display: flex !important;
  flex: 0 0 auto;
  height: 100%;
  margin: auto;
  width: auto;
}
/*media queries*/
@media (max-width: 640px) {
  :root {
    --sm-font: 16px;
    --reg-font: 17px;
    --md-font: 18px;
    --lg-font: 22px;
    --x-lg-font: 26px;
    --ui-maxi-spacing: 0.8rem;
    --ui-spacing: 0.5rem;
    --ui-half-spacing: 0.25rem;
    --radius: 0.75rem;
    --full-radius: 1.2rem;
    --x-sm-card-height: 100px;
    --sm-card-height: 200px;
    --reg-card-height: 350px;
    --reg-card-height-2: 450px;
    --md-card-height: 550px;
    --lg-card-height: 650px;
    --x-lg-card-height: 720px;
    --h-100: 100%;
    --h-95: 95%;
    --h-90: 90%;
    --h-85: 85%;
    --h-80: 80%;
    --h-75: 75%;
    --h-70: 70%;
    --h-65: 65%;
    --h-60: 60%;
    --h-55: 55%;
    --h-50: 50%;
    --h-45: 45%;
    --h-40: 40%;
    --h-35: 35%;
    --h-30: 30%;
    --h-25: 25%;
    --h-20: 20%;
    --h-15: 15%;
    --h-10: 10%;
    --h-5: 5%;
    --card-2-by-2: 100vw;
    --card-3-by-3: 100vw;
    --card-4-by-4: 100vw;
    --header-height: 55px;
  }

  .container-xxl,
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    width: 98%;
    margin: 0 auto;
  }
  .mb-h-auto {
    height: auto !important;
  }

  section.hero .carousel-item {
    justify-content: center;
    align-items: center;
  }
  .hero-img,
  img.hero-img,
  section.hero img.hero-img {
    height: 100%;
    width: auto;
    max-width: none;
    display: flex;
  }
  .hero-title * {
    font-size: 2rem;
  }
  .menu {
    display: flex;
    cursor: pointer;
  }
  .menu-box.active,
  div.menu-box.active {
    display: flex;
  }
  div.site-notify {
    width: 90%;
    left: 5%;
  }

  .search-list-container .main-list {
    width: 100%;
    z-index: var(--send-backward);
  }
}