/* main css  */

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Nunito';
  font-weight: normal;
}

/* 3. Fonts */

/* @font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito-Variable/Nunito-ExtraLightItalic.woff2') format('woff2'),
        url('../fonts/Nunito-Variable/Nunito-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
} */

/* @font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito-Variable/Nunito-VariableFont.woff2') format('woff2'),
    font-weight: 200;
    font-style: normal;
    font-display: swap;
} */

@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito/Nunito-Bold.woff2') format('woff2'),
        url('../fonts/Nunito/Nunito-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito/Nunito-Regular.woff2') format('woff2'),
        url('../fonts/Nunito/Nunito-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito/Nunito-Italic.woff2') format('woff2'),
        url('../fonts/Nunito/Nunito-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito/Nunito-SemiBold.woff2') format('woff2'),
        url('../fonts/Nunito/Nunito-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('../fonts/Nunito/NunitoSans-Bold.woff2') format('woff2'),
        url('../fonts/Nunito/NunitoSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('../fonts/Nunito/NunitoSans-Regular.woff2') format('woff2'),
        url('../fonts/Nunito/NunitoSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('../fonts/Nunito/NunitoSans-Medium.woff2') format('woff2'),
        url('../fonts/Nunito/NunitoSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('../fonts/Nunito/NunitoSans-MediumItalic.woff2') format('woff2'),
        url('../fonts/Nunito/NunitoSans-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('../fonts/Nunito/NunitoSans-SemiBold.woff2') format('woff2'),
        url('../fonts/Nunito/NunitoSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('../fonts/Nunito/NunitoSans-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/Nunito/NunitoSans-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

body {
  font-family: inherit;
  background-color: var(--ms-body-bg);
  color: var(--main-grey);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: "Nunito";
}

body.no-scroll { overflow: hidden; }

html {
  font-size: 1vw;
  /*font-size: 18px;*/
  font-family: "Nunito";
  font-weight: 400;
  scroll-behavior: smooth;
}

@media(max-width: 575.98px) {
  html {
    font-size: 3.488vw;
    font-size: 0.888rem;
  }
}

@media(min-width: 576px) {
  html {
    font-size: 1.688vw;
  }
}

@media(min-width: 768px) {
  html {
    font-size: 1.588vw;
  }
}

@media(min-width: 992px) {
  html {
    font-size: 1.488vw;
  }
}

@media(min-width: 1200px) {
  html {
    font-size: 1.388vw;
  }
}

@media(min-width: 1400px) {
  html {
    font-size: 1.088vw;
  }
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
/*   text-wrap: balance; */
  word-break: break-word;
  margin-bottom: .5rem;
}
h1, h2, h3, h4, h5, h6 {
/*   text-wrap: balance; */
  word-break: break-word;
}

/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}


/* 10. Remove the arrow and cross that appears for TextField Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

:root {
  --main-grey: #23282E;
  --dark-grey: #121416;
  --medium-grey: #97A0AD;
  --light-grey: #F5F6F7;
  --grey: #E7EAEC;
  --blue: #0053CF;
  --red: #C32030;
  --white: #FFFFFF;
  --orange: #EEB558;
  --green: #38A538;
  --bg-light-blue: rgba(231, 237, 250, 1);

  --border-dark: 1px solid var(--medium-grey);
  --border-light: 1px solid rgba(0, 83, 207, 0.1);
  --shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;

  --block-color-red: 195, 32, 48;
  /*--block-color-yellow: #EFB963;*/
  --block-color-yellow: 239, 185, 99;
  /*--block-color-blue: #0053CF;*/
  --block-color-blue: 0, 83, 207;
  /*--block-color-green: #38A538;*/
  --block-color-green: 56, 165, 56;
  /*--block-color-orange: #F68A41;*/
  --block-color-orange: 246, 138, 65;
  /*--block-color-grey: #F5F6F7;*/
  --block-color-grey: 151, 160, 173;
  --block-color-light-grey: 245, 246, 247;

  --bg-icon-grey: #3F4752;

  --ms-border-radius: .5rem;

  --ms-body-font-size: 1rem;
  --ms-body-font-weight: normal;
  --ms-body-line-height: 1;
  --ms-body-font-family: 'Nunito';
  --ms-body-bg: #FFFFFF;
  --ff-main: var(--ms-body-font-family);
  --ff-headings: 'Nunito Sans';

  --offset: 1.777rem;

}

/*// X-Small devices (portrait phones, less than 576px)*/
/*// No media query for `xs` since this is the default in Bootstrap*/

/*// X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) { ... }

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { ... }

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { ... }

/*// Large devices (desktops, 992px and up)*/
@media (min-width: var(--bs-breakpoint-lg)) { ... }

/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { ... }

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) { ... }

.ff-main {
  font-family: var(--ff-main);
}

.ff-headings {
  font-family: var(--ff-headings);
}

section {
  position: relative;
  /*padding: 0 3.333rem;*/
}

a {
  color: var(--blue);
  cursor: pointer;
}

a:hover {
  text-decoration: none;
  color: var(--blue);
}

button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: inherit;
}

/* ================           Settings           ================ */


.no-phone {
  user-select: none;
  font-weight: 600;
}

/* Styles for formatting sub-ordered-list-items with 1.1., 1.1.1., etc.)*/

ul.text-list-style {
  counter-reset: item;
  padding-left: 10px;
}

ul.text-list-style>li {
  display: block;
}

ul.text-list-style>li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}

ul li ol li {
  list-style-type: unset;
}

ul ul, ol ul {
  list-style-type: disc;
}

ol ol, ol ul, ul ol, ul ul {
  margin: 8px 0 18px 8px;
  padding: 0 0 0 18px;
}

ol ol li p{
  padding: 0;
}

ul ul li {
  list-style-type: none;
}

ul ul li, ol ol li, ul ol li, ol ul li {
  margin-left: 0;
}

ul.bullet-arrow {
  list-style-type: none;
}

ul.bullet-arrow li:before {
  background-image: url("../images/list-chck-icon.svg");
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  background-size: 10px;
  background-repeat: no-repeat;
  margin: 0 5px 0 -20px;
}

.list-none {
  list-style-type: none;
}

/* Main page title */

.title {
  display: block;
  text-decoration: none;
  font-family: var(--ff-headings);
  font-size: 2.222rem;
  line-height: 2.666rem;
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .title {
    font-size: 1.488rem;
    line-height: normal;
  }
}

.features .title, .main-blog-post .title {
  color: var(--blue);
}

.media .title, .review .title {
  color: var(--white);
}

.sub-title {
  font-family: var(--ff-headings);
  font-size: 1.555rem;
  font-weight: 700;
  line-height: 2rem;
  margin-bottom: calc(.5*var(--offset));
}

/* Block color */

.bg-block {
  position: relative;
  padding: var(--offset);
  border-radius: calc(3*var(--ms-border-radius));
}

.bg-clear {
  background-color: transparent;
}

.bg-opacity-red {
  background-color: rgba(var(--block-color-red), 0.1);
}

.bg-opacity-yellow {
  background-color: rgba(var(--block-color-yellow), 0.1);
}

.bg-opacity-blue {
  background-color: rgba(var(--block-color-blue), 0.1);
}

.bg-opacity-green {
  background-color: rgba(var(--block-color-green), 0.1);
}

.bg-opacity-orange {
  background-color: rgba(var(--block-color-orange), 0.1);
}

.bg-opacity-grey {
  background-color: rgba(var(--block-color-grey), 0.1);
}

.bg-red {
  background-color: rgba(var(--block-color-red));
}

.bg-yellow {
  background-color: rgba(var(--block-color-yellow));
}

.bg-blue {
  background-color: rgba(var(--block-color-blue));
}

.bg-green {
  background-color: rgba(var(--block-color-green));
}

.bg-orange {
  background-color: rgba(var(--block-color-orange));
}

.bg-grey {
  background-color: rgba(var(--block-color-grey));
}

.bg-light-grey {
  background-color: rgba(var(--block-color-light-grey));
}

.bg-light-blue {
 background-color: rgba(231, 237, 250, 1);
}

.bg-grad {
  background: -moz-linear-gradient(180deg, rgba(245,246,247,0) 10%, rgba(245,246,247,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(245,246,247,0) 10%, rgba(245,246,247,1) 100%);
  background: linear-gradient(180deg, rgba(245,246,247,0) 10%, rgba(245,246,247,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f5f6f7",endColorstr="#f5f6f7",GradientType=1);
}

.text-grey {
  color: var(--dark-grey);
}

.text-blue {
  color: var(--blue);
}

.text-red {
  color: var(--red);
}

.text-green {
  color: var(--green);
}

.text-orange {
  color: var(--orange);
}


/* Notifications */

.note {
  padding: .5rem 1rem;
  border-radius: .5rem;
}


.wrapper {
  overflow: hidden;
  margin-top: 6.888rem;
}

/* Offset for Section */

@media (max-width: 575.98px) {
  .hero {
    padding: 0 1rem;
  }
}

/*@media(min-width: 576px) {
  .hero {
    padding: 0 4.888rem;
  }
}*/

@media(min-width: 576px) {
  .hero {
    padding: 0 10%;
  }
}

@media(min-width: 1399.98px) {
  .hero {
    padding: 0 15%;
  }
}

.review {
  background-color: var(--blue);
}

@media (max-width: 575.98px) {
  .content-wrapper, .media, .review, .features, .support {
    padding: 3rem 1rem;
  }
}

@media(min-width: 576px) {
  .content-wrapper, .media, .review, .features, .support {
    padding: 4.888rem 10%;
  }
}

@media(min-width: 1399.98px) {
  .content-wrapper, .media, .review, .features, .support {
    padding: 4.888rem 15%;
  }
}

@media (max-width: 575.98px) {
  .header.second-page {
    padding: 0 1rem;
  }
}

@media(min-width: 576px) {
  .header.second-page {
    padding: 0 10%;
  }
}

@media(min-width: 1399.98px) {
  .header.second-page {
    padding: 0 15%;
  }
}

@media (max-width: 575.98px) {
  .blog-post, .post-categories, .breadcrumbs-wrap {
    padding: 0 1rem 3rem;
/*  padding: 0 15%; */
/*  padding: calc(.25*var(--offset)) 15%; */
  }
}

@media(min-width: 576px) {
  .blog-post, .post-categories, .breadcrumbs-wrap {
/*     padding: 2.888rem 4.888rem 0; */
  padding: calc(.25*var(--offset)) 10%;
  }
}

@media(min-width: 1399.98px) {
  .blog-post, .post-categories, .breadcrumbs-wrap {
/*  padding: 0 15%; */
  padding: calc(.25*var(--offset)) 15%;
  }
}

@media (max-width: 575.98px) {
  .blog-single-post {
    padding: 0 1rem 3rem;
/*  padding: 0 15%; */
/*  padding: calc(.25*var(--offset)) 15%; */
  }
}

@media(min-width: 576px) {
  .blog-single-post {
/*     padding: 2.888rem 4.888rem 0; */
  padding: calc(.25*var(--offset)) 10%;
  }
}

@media(min-width: 1399.98px) {
  .blog-single-post {
/*  padding: 0 15%; */
  padding: calc(.25*var(--offset)) 15%;
  }
}

/* @media (max-width: 575.98px) {
  .blog-single-post {
    padding: 0 1rem 3rem;
  }
}

@media(min-width: 576px) {
  .blog-single-post {
    padding: 0 4.888rem;
  }
}

@media (max-width: 575.98px) {
  .main-blog-post {
    padding: 0 1rem 1rem;
  }
} */

/*@media(min-width: 576px) {
  .main-blog-post {
    padding: 0 4.888rem 4.888rem;
  }
}*/

@media(min-width: 576px) {
  .main-blog-post {
    padding: 0 10% 4.888rem;
  }
}

@media(min-width: 1399.98px) {
  .main-blog-post {
    padding: 0 15% 4.888rem;
  }
}

/* End Offset for Section */


.menu-btn .icon {
  padding: .5rem;
  background-color: var(--light-grey);
  border-radius: var(--ms-border-radius);
}

.content-header {
  gap: 1rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /*padding-bottom: var(--offset);*/
}

.block-title {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.label {
  display: flex;
  width: fit-content;
  color: var(--blue);
  padding: .2rem 1rem;
  border: var(--border-dark);
  border-radius: 999em;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: normal;
  text-align: center;
}

@media(max-width: 575.98px)  {
  .label {
    border: 1px solid transparent;
    text-wrap-style: balance;
    word-break: break-word;
    padding: unset;
  }
}

/* Buttons settings */

a.cl-btn:hover, button.cl-btn:hover {
  background:var(--color-secondary)
}

a.m-btn, button.m-btn, a.nav-btn, button.nav-btn {
  display: block;
/*   background-color: var(--blue); */
  color: var(--white);
  text-align: center;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  height: fit-content;
  padding: .5rem 1rem;
  padding: .2rem .5rem;
  border-radius: .5rem;
}

a.m-btn:hover, button.m-btn:hover, a.nav-btn:hover, button.nav-btn:hover {
  background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
  color: var(--white);
}

a.nav-btn.red, button.nav-btn.red {
  background-color: var(--red);
}

/* a.nav-btn.sqr, button.nav-btn.sqr {
  border-radius: 0;
} */

.nav-buttons-wrapper {
  display: flex;
  gap: .5rem;
  white-space: nowrap;
}

.default-btn {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  border-radius: var(--ms-border-radius);
  background-color: rgba(var(--block-color-blue), 0.1);
  padding: .5rem 1rem;
  white-space: nowrap;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  position: relative;
  text-decoration: none;
}

.default-btn img {
/*   margin-left: .5rem; */
  height: 1.222rem;
  width: 1.222rem;
}

.default-btn:hover {
  background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
}

.lblue-btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--ms-border-radius);
  background-color: rgb(231, 237, 250);
  padding: .5rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  position: relative;
  text-decoration: none;
}

.lblue-btn:hover {
  background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
}

.blue-btn {
  color: var(--white);
  background-color: var(--blue);
  text-decoration: none;
}

.blue-btn:hover {
  color: var(--white);
  background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
}

.red-btn {
  color: var(--white);
  background-color: var(--red);
  text-decoration: none;
}

.red-btn:hover {
  color: var(--white);
  background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
}

.white-btn {
  color: var(--blue);
  background-color: var(--white);
  text-decoration: none;
}

.white-btn:hover {
  color: var(--blue);
  background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
}

.cta-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  height: 2.688rem;
  width: 2.688rem;
  background-color: transparent;
  border: var(--border-light);
  border-radius: var(--ms-border-radius);
  border-radius: .5rem;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}

.cta-btn:hover {
  background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
  border: 1px solid transparent;
}

.cta-btn img {
  height: 1.222rem;
  width: 1.222rem;
}

/* Square icons */

.block-icon {
  /*border-radius: calc(2*var(--ms-border-radius));*/
  border-radius: .888rem;
  min-height: 3.388rem;
  min-width: 3.388rem;
  max-height: 3.388rem;
  max-width: 3.388rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  float: left;
}

.block-icon img {
  height: 1.222rem;
  width: 1.222rem;
}

.pricing .block-icon {
  background-color: var(--bg-icon-grey);
}

.features .block-icon, .search-bar .block-icon {
  background-color: var(--white);
}

.header .content-header .block-icon, .blog-posts .block-icon, .contacts .block-icon {
  background-color: var(--light-grey);
}

/* Scroll top button */

a.scroll-top {
  background-color: var(--orange);
  display: flex;
  justify-content: center;
  align-content: center;
  position: fixed;
  z-index: 99;
  right: 1rem;
  bottom: 1rem;
  border-radius: 1rem;
  height: 3.388rem;
  width: 3.388rem;
  padding: .888rem;
}
.scroll-top img {
  transform: rotate(-90deg);
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6, h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
  font-family: var(--ff-headings);
}

h1 {
  font-size: 2rem;
  line-height: normal;
}

h2 {
  font-size: 1.35rem;
  line-height: normal;
}

h3, h4, h5, h6 {
  font-size: 1.2rem;
  line-height: normal;
}

h1 strong {
  font-weight: 500;
  line-height: normal;
}

h2 strong {
  font-weight: 500;
  line-height: normal;
}

h3 strong, h4 strong, h5 strong, h6 strong {
  font-weight: 500;
  line-height: normal;
}

h1 italic {
  font-weight: 500;
  font-style: italic;
  line-height: normal;
}

h2 italic {
  font-weight: 500;
  font-style: italic;
  line-height: normal;
}

h3 italic, h4 italic, h5 italic, h6 italic {
  font-weight: 500;
  font-style: italic;
  line-height: normal;
}

h2 {
  margin: 1rem 0rem;
}

dfn,
cite,
em, em a,
i {
  font-style: italic;
}

/*--------------------------------------------------------------
Alignments
--------------------------------------------------------------*/
.alignleft {
  float: left;
  margin-right: 1.5em;

}

.alignright {
  float: right;
  margin-left: 1.5em;
}

.aligncenter {
  display: block;
  clear: both;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.has-text-align-center {
    text-align:center
}

.has-text-align-left {
    text-align:left
}

.has-text-align-right {
    text-align:right
}

/*--------------------------------------------------------------
Clearings
--------------------------------------------------------------*/
.clearfix:before,
.clearfix:after,
.post-navigation .nav-links:before,
.post-navigation .nav-links:after,
.comment-navigation:before,
.comment-navigation:after {
  display: table;
  content: "";
}

.clearfix:after,
.post-navigation .nav-links:after,
.comment-navigation:after {
  clear: both;
}

/*--------------------------------------------------------------
Comments
--------------------------------------------------------------*/
.comments-area {
  margin: 0 0 2.5em;
}

/* Comment Header */
.comments-header,
.comment-reply-title {
  margin: 0 0 1.25em 0;
  font-size: 16px;
  font-size: 1rem;
  border-left: 6px solid;
  border-color: #111133;
  border-color: var(--widget-title-border-color);
}

.comments-header .comments-title,
.comment-reply-title span {
  display: inline-block;
  margin: 0;
  padding: 0 0 0 0.8em;
  color: #111133;
  color: var(--widget-title-color);
  font-size: 16px;
  font-size: 1rem;
  font-family: "Roboto Slab", arial, helvetica, sans-serif;
  font-family: var(--widget-title-font);
  font-weight: bold;
  font-weight: var(--widget-title-font-weight);
  text-transform: uppercase;
  text-transform: var(--widget-title-text-transform);
  line-height: 1.6;
  line-height: var(--title-line-height);
}

/* Comment List */
.comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment {
  margin: 0 0 1.5em;
  padding: 0 0 1.5em;
  border-bottom: 2px solid #eee;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

.comment-meta {
  float: left;
  padding: 0;
  width: 100%;
}

.comment-meta .comment-author img {
  float: left;
  margin-right: 1em;
}

.bypostauthor {
  display: block;
}

.comment-meta .comment-metadata {
  margin-top: 0.3em;
  font-size: 14px;
  font-size: 0.875rem;
}

.comment-meta .comment-metadata a {
  margin-right: 1em;
}

.comment-content {
  clear: left;
  padding: 0.2em 0 0;
}

.comment-content a {
  word-wrap: break-word;
}

.comment ol.children {
  list-style: none;
}

.comment ol.children .comment {
  margin: 1.5em 0 0;
  padding: 1.5em 0 0;
  border-top: 2px solid #eee;
  border-bottom: none;
}

.comment .comment-respond {
  margin-top: 2em;
}

/* Comment Pagination */
.comment-navigation {
  margin: 0 0 1.5em;
  padding: 0.5em 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  font-size: 0.875rem;
}

.comment-navigation .nav-previous {
  float: left;
}

.comment-navigation .nav-next {
  float: right;
}

.comment-navigation .nav-previous a::before {
  margin-right: 3px;
  content: "\00AB";
}

.comment-navigation .nav-next a::after {
  margin-left: 4px;
  content: "\00BB";
}

.reply .comment-reply-link {
  display: inline-block;
  margin: 0;
  padding: 0.2em 0.6em;
  background-color: #111133;
  background-color: var(--button-color);
  color: #fff;
  color: var(--button-text-color);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 13px;
  font-size: 0.8125rem;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.reply .comment-reply-link:link,
.reply .comment-reply-link:visited {
  color: #fff;
  color: var(--button-text-color);
}

.reply .comment-reply-link:hover,
.reply .comment-reply-link:active {
  background-color: #4477aa;
  background-color: var(--button-hover-color);
  color: #fff;
  color: var(--button-hover-text-color);
}

/* Comment Form */
.comment-form {
  padding: 0;
}

.comment-form label {
  display: inline-block;
  min-width: 150px;
  font-weight: bold;
}

.comment-form textarea {
  margin-top: 0.4em;
}

.comment-form .submit {
  padding: 1em 1.6em;
}

.comment-form input[type="checkbox"] + label {
  display: inline;
  padding-left: 0.5em;
  font-weight: normal;
}

.comment-reply-title small a {
  margin-left: 1em;
  text-decoration: underline;
  font-weight: normal;
  font-size: 14px;
  font-size: 0.875rem;
}

/*--------------------------------------------------------------
Blockquote
--------------------------------------------------------------*/
blockquote {
  margin: 1.5em 0;
  padding-left: 1.25em;
  border-left: 4px solid;
  border-color: #222;
  border-color: var(--dark-border-color);
  color: #666;
  color: var(--medium-text-color);
  font-style: normal;
  font-size: 18px;
  font-size: 1.125rem;
}

blockquote cite,
blockquote small {
  display: block;
  margin-top: 1em;
  color: #222;
  color: var(--text-color);
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.75;
}

blockquote cite::before,
blockquote small::before {
  content: "\2014\00a0";
}

blockquote em,
blockquote i,
blockquote cite {
  font-style: normal;
}

blockquote > :last-child {
  margin-bottom: 0.5em;
}

/*--------------------------------------------------------------
Table style
--------------------------------------------------------------*/
table {
  width:100%;
  border-collapse:collapse;
}

table th {
  background: #f0f0f0;
  color: var(--dark-grey);
  font-weight: bold;
  text-align: center;
  vertical-align: initial;
}

table td {
  text-align:left;
  background: var(--white);
  color: var(--dark-grey);
  vertical-align: initial;
}

table, th, td {
  border: 1px solid var(--dark-grey);
}

th, td {
  padding: 6px 12px;
}

/*--------------------------------------------------------------
Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border: none;
}

/* Make sure embeds and iframes fit their containers. */
embed,
object,
figure,
img,
picture {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}


/*--------------------------------------------------------------
Captions
--------------------------------------------------------------*/
figcaption,
.wp-caption,
.wp-block-embed figcaption,
.wp-block-image figcaption,
.wp-block-audio figcaption,
.wp-block-table figcaption {
  font-size: 0.888rem;
  color: #666;
  color: var(--medium-grey);
}

.wp-block-embed figcaption,
.wp-block-image figcaption,
.wp-block-audio figcaption,
.wp-block-table figcaption,
.wp-block-gallery > figcaption {
  margin: 0.5rem 0 1.5rem;
  max-width: 100%;
  width: auto !important;
  text-align: center;
}

.wp-block-table figcaption {
  margin-bottom: 0;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin: 0 auto;
}

.wp-caption .wp-caption-text {
  margin: 0.5em 0;
}

/*--------------------------------------------------------------
Galleries
--------------------------------------------------------------*/
.gallery {
  margin-bottom: 1.5em;
}

.gallery-item {
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 1em 1.5em 0 0;
  width: 100%;
  vertical-align: top;
  text-align: center;
}

.gallery-columns-2 .gallery-item {
  max-width: 50%;
}

.gallery-columns-3 .gallery-item {
  max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
  max-width: 25%;
}

.gallery-columns-5 .gallery-item {
  max-width: 20%;
}

.gallery-columns-6 .gallery-item {
  max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
  max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
  max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
  max-width: 11.11%;
}

.gallery-caption {
  display: block;
  font-size: 15px;
  font-size: 0.9375rem;
  color: #666;
  color: var(--medium-text-color);
}


/* ================            Header            ================ */


.m-navbar {
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 0.5rem calc(2.5*var(--offset));
  position: fixed;
  background-color: var(--white);
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  transition: box-shadow 0.3s ease-in-out;
}

@media(max-width: 575.98px) {
  .m-navbar {
    padding: calc(0.5*var(--offset));
  }
}

@media (min-width: 576px) {
  .m-navbar {
    padding: calc(.25*var(--offset)) 10%;
  }
}

@media(min-width: 1399.98px) {
  .m-navbar {
    padding: calc(.25*var(--offset)) 15%;
  }
}

/*@media (min-width: 576px) and (max-width: 767.98px) {
  .m-navbar {
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: box-shadow 0.3s ease-in-out;
  }
}*/

.m-navbar.scrolled {
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, 0.1);
  background-color: var(--white);
}

.logo {
  width: 5.333rem;
  transition: all .3s ease-in-out;
}

@media (max-width: 575.98px) {
  .footer .logo {
    width: unset;
    padding-bottom: 1rem;
  }
}

.nav-menu {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

@media(max-width: 575.98px) {
  .nav-menu {
    display: none;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .nav-menu {
    display: none;
    flex-direction: column;
    width: 50vw;
    background: var(--white);
    position: absolute;
    top: 62px;
    right: 0;
    height: 100vh;
    padding: 20px;
  }
}
@media (min-width: 992px) {
  .nav-menu {
    display: flex;
    justify-content: center;
    background: var(--white);
  }
}
/*@media(min-width: 991.98px) {
  .nav-menu {
    position: relative;
    list-style: none;
    align-content: center;
    display: flex;
    flex-direction: row;
    width: unset;
    height: unset;
    padding: 0;
    margin: 0;
    top: unset;
  }
}*/

@media(max-width: 991.98px) {
  .nav-menu.active {
    position: absolute;
    display: flex;
    flex-direction: column;
    /*height: calc(100vh - 3.8888rem);*/
    height: calc(100dvh - 3.888rem);
    width: 100vw;
    top: 3.666rem;
    right: 0;
    padding: 1rem 10% 2rem;
    overflow-y: auto;
    /*font-size: 1.9rem;*/
    font-size: 1.188rem;
    background: var(--white);
  }
}

/*@media(max-width: 575.98px) {
  .nav-menu.active {
    position: absolute;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    top: 4.9rem;
    right: 0;
    padding: calc(0.5*var(--offset));
    overflow-y: auto;
    background: var(--white);
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .nav-menu.active {
    display: flex;
    flex-direction: column;
    width: 50vw;
    top: 5rem;
    padding: 2rem;
  }
}*/

/*@media (min-width: 576px) and (max-width: 767.98px) {
  .nav-menu.active {
    display: flex;
    width: 100vw;
    top: 5rem;
    padding: 2rem;
  }
}*/
/*@media (max-width: 768px) {
  .nav-menu.active {
    display: flex;
    width: 50vw;
  }
}*/

.nav-menu li {
  position: relative;
}

@media(max-width: 991.98px) {
  /*.nav-menu li:nth-last-child(2) {
    margin-bottom: 3rem;
  }*/
  
  .nav-menu li {
    border-bottom: var(--border-light);
  }
}

.nav-menu a {
  text-decoration: none;
  color: var(--dark-grey);
  font-weight: 600;
  padding: .5rem .5rem;
  display: flex;
}

@media(max-width: 991.98px) {
  .nav-menu a {
    align-items: center;
    padding: .688rem .7rem;
  }

  .nav-menu .dropbtn {
    justify-content: space-between;
  }

  .nav-menu a .nav-btn {
    color: var(--white);
    width: 100%;
    display: block;
  }
}

@media(min-width: 1199.98px) {
  .nav-menu a {
    padding: .5rem .5rem;
  }
}

@media(min-width: 1399.98px) {
  .nav-menu a {
    padding: .5rem 1rem;
  }
}

.nav-menu a:hover {
  color: var(--blue);
  transition: .5s;
}

.dropdown-icon {
  width: .6666rem;
  margin: 0 auto 0 .5rem;
}

@media(max-width: 767.98px) {
  .dropdown-icon {
    width: .922rem;
    height: auto;
    margin: unset;
  }
}

.dropdown-icon.active {
  transform: rotate(180deg);
}

.dropdown-content {
  display: none;
  position: absolute;
  background: var(--white);
  list-style: none;
  padding: 0;
  margin: 0;
  width: 440px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: var(--ms-border-radius);
  /*border-radius: 8px;*/
}

@media (min-width: 768px) {
  .dropdown-content {
    position: absolute;
    background: var(--white);
    list-style: none;
    padding: 0;
    margin: 0;
    width: 420px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: var(--ms-border-radius);
    /*border-radius: 8px;*/
  }
}

.dropdown-content.active {
  display: flex;
  flex-direction: column;
  background: var(--white);
  /*padding: 1rem;*/
}

@media(max-width: 991.98px) {
  .dropdown-content.active {
    position: relative;
    width: 100%;
    box-shadow: unset;
  }
}

/*@media(min-width: 576px) and (max-width: 767.98px) {
  .dropdown-content.active{
    position: relative;
    width: 100%;
    box-shadow: unset;
  }
}*/

@media(min-width: 992px) {
  .dropdown-content.active {
    padding: .5rem;
    top: 3.666rem;
  }
}

.dropdown-content li a {
  display: flex;
  gap: 1rem;
  padding: .5rem;
  margin: .5rem;
}

.dropdown-content li a:hover {
  background-color: var(--light-grey);
  border-radius: .5rem;
}

.dropdown-link-title {
  font-weight: 600;
}

.dropdown-link-text {
  font-size: .78rem;
}

.dropdown-content li a p {
  margin-bottom: unset;
}

.nav-button {
  display: flex;
  grid-gap: .5rem;
}

@media (min-width: 1198.99px) {
  .nav-button {
    grid-gap: .5rem;
  
  }
}

@media(max-width: 419.98px) {
  .nav-button.mobile {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    grid-gap: .9rem;
    margin-top: auto;
  }

  .nav-button.desktop {
    display: none;
  }

  .nav-button.mobile .nav-btn {
    justify-content: center;
    color: var(--white);
    width: 100%;
  }

  .nav-button.mobile .contact-info, .phone-info {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
  }
  
  .phone-info 

  .nav-button.mobile .link-item {
    color: var(--blue);
    text-decoration: none;
  }

  .nav-button.mobile .contact-info .title, .phone-info .title {
    font-size: 1.188rem;
  }
}

@media(min-width: 420px) {
  .nav-button.mobile {
    display: none;
  }

  .nav-button.desktop {
    display: flex;
  }
}

@media(min-width: 576px) and (max-width: 991.98px) {
  .nav-button {
    display: flex;
    flex-wrap: wrap;
    grid-gap: .9rem;
    /*margin-top: auto;*/
  }
}

.nav-button.m-btn.red {
 background-color: var(--red);
}

.nav-button .link-item {
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
}

.nav-button .link-item:hover {
  text-decoration: unset;
}

/*.menu-dynamic-info {
  min-height: 2.874rem;
  min-width: 7.664rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}*/

.menu-dynamic-info {
  /*min-height: 4.468rem;*/
  min-width: 6.888rem;
/* width: 5.888rem; */
/*   width: 5.888rem; */
  /*min-width: 13.666rem; */
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: end;
  margin: auto;
  text-align: center;
  overflow: hidden;
}

@media(max-width: 575.98px)  {
  .menu-dynamic-info {
    display: none;
  }
}

.contact-info, .phone-info {
  float: left;
  display: flex;
  align-content: center;
  flex-direction: column;
}

.contact-info .title, .phone-info .title {
  display: inline-flex;
  color: var(--dark-grey);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  font-family: inherit;
  line-height: normal;
}

.contact-info .link-item, .phone-info .link-item {
  font-weight: 600;
  text-decoration: none;
}

.menu-img {
  background-color: var(--light-grey);
  border-radius: 8px;
  padding: .7rem;
  height: fit-content;
}

.menu-img img {
  max-width: unset;
}

.menu-btn {
  display: none;
  font-size: 1.5em;
  cursor: pointer;
}

@media (max-width: 991.98px) {
  .menu-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 1.5em;
    font-weight: 700;
    column-gap: .5rem;
    color: var(--color);
    cursor: pointer
  }
}

.menu-btn:hover .icon:before {
  opacity: .5
}

.menu-btn.active .ic-2 {
  opacity: 0
}

.menu-btn.active .ic-1 {
  transform: rotate(-45deg) translate(-.25rem,.33rem)
}

.menu-btn.active .ic-3 {
  transform: rotate(45deg) translate(-.3rem,-.4rem)
}

.menu-btn .icon {
  width: 2.9rem;
  height: 2.9rem;
  padding: .8rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: .3s
}

.menu-btn .icon:before {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color);
  opacity: .2;
  transition: .3s
}

.menu-btn .icon div {
  width: 100%;
  border-radius: .15rem;
  height: 2px;
  background: var(--dark-grey);
  position: relative;
  z-index: 2;
  transition: .3s
}

.menu-btn .icon div:not(:last-of-type) {
  margin-bottom: .3rem
}


/* ==================        End Header        ================== */

/* ================        Hero container        ================ */


.hero:before {
  content: url(../images/dots-g-vert.svg);
  position: absolute;
  z-index: -1;
  bottom: 6rem;
  left: 50%;
  width: 8.222rem;
  height: 14.055rem;
}

.hero:after {
  content: url(../images/dots-gr-hor.svg);
  position: absolute;
  bottom: 3.44rem;
  right: 0;
  left: 12.444rem;
  margin: 0 auto;
  width: auto;
  height: auto;
  z-index: -1;
}

@media(max-width: 991.98px) {
  .hero:before {
    display: none;
  }
  .hero:after {
    display: none;
  }
}

.hero .content-block {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.hero .content-header {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  /*row-gap: 2rem;*/
}

.hero .content-header p {
  font-size: 1rem;
  line-height: normal;
}

@media(max-width: 575.98px) {
  .hero .content-header p {
    font-size: inherit;
  }
}

.hero .content-bottom {
  display: flex;
  justify-content: space-between;
}

.social {
  float: left;
  display: flex;
  align-content: center;
  gap: 1rem;
}

.social .info {
  display: flex;
  align-self: center;
  color: var(--dark-grey);
  text-decoration: none;
  font-weight: 600;
  font-size: inherit;
  font-family: inherit;
}

.social .info a {
  width: 3.488rem;
  height: 3.488rem;
  background-color: var(--dark-grey);
  border-radius: 9999px;
  padding: .688rem;
}

.social .info a:hover {
  border: 1px solid transparent;
  background-color: var(--light-grey);
  transition: .3s;
}

.pricing-info {
  font-family: var(--ff-headings);
  font-size: 1.088rem;
  font-weight: 700;
  text-wrap-style: balance;
  word-break: break-word;
}

.pricing-info__price {
  font-family: var(--ff-headings);
  color: var(--green);
  font-weight: 900;
}

.pricing-info__text {
  font-family: var(--ff-headings);
  color: var(--main-grey);
}

/*.contact-block a {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background-color: rgba(var(--block-color-blue), 0.1);
  color: var(--primary-color);
  color: var(--blue);
  padding: .5rem 1.5rem;
  height: 3.4888rem;
  width: fit-content;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap
}

.contact-block a:hover {
  text-decoration: underline;
  background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
  color: var(--primary-color);
  color: var(--blue);
  transition: .3s;
  text-decoration: none;
}*/

.hero .social a {
  width: 3rem;
  height: 3rem;
  background-color: var(--dark-grey);
  border-radius: 999px;
  padding: .6rem;
}

.hero .social a:hover {
  border: 1px solid transparent;
  background-color: var(--light-grey);
  transition: .3s;
}

.hero .social a:hover img {
  -webkit-filter: invert(0);
  filter: invert(0);
}

.hero .social img {
  width: 100%;
  height: auto;
  -webkit-filter: invert();
  filter: invert();
}

/*@media(min-width: 576px) and (max-width: 991.98px) {
  .contact-block .phone-info, .contact-block .contact-info, .contact-block .social  {
    display: inline-flex;
    align-content: center;
    flex-direction: unset;
    gap: 1rem;
  }
}*/

.hero .title {
  color: var(--blue);
  /*font-size: 2.666rem;
  line-height: 3.555rem;*/
  text-align: center;
}

/*@media(min-width: 576px) {
  .main-title {
    font-size: 4.625rem;
    line-height: 5.425rem;
  }
}

@media(min-width: 768px) {
  .main-title {
    font-size: 3.625rem;
    line-height: 4.425rem;
  }
}

@media(min-width: 992px) {
  .main-title {
    font-size: 2.666rem;
    line-height: 3.555rem;
  }
}*/

/*    font-size: 4.625rem;
    line-height: 6.563rem;*/

/*@media (min-width: 992px) { 
  .main-title {
    font-size: 3.625rem;
    line-height: 5.563rem;
  }
}*/

/*.hb-pic {
  border-radius: calc(3*var(--ms-border-radius));
  transition: 0.3s;
}*/

.pic-block {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  /*aspect-ratio: 1 / 1;*/
  transition: 0.3s;
}

.pic-block-img {
  min-width: 100%;
}

/*@media (max-width: 767.98px) {
  .pic-block {
    aspect-ratio: unset;
  }
}*/

.hb-pic-main {
  height: 100%;
}

/*@media (max-width: 767.98px) {
  .hb-pic-main {
    aspect-ratio: 1 / 1;
  }
}*/

.hb-pic-main img {
  position: relative;
  object-fit: cover;
  object-position: left bottom;
  width: 100%;
  height: 100%;
}

.play-btn {
  position: absolute;
/*  height: 7.777rem;
  width: 7.777rem;*/
  bottom: 1.5rem;
  right: 1rem;
  margin: auto;
}

@media(max-width: 991.98px) {
  .play-btn {
    right: 50%;
    /* margin: 0 auto; */
    left: 50%;
    transform: translate(-50%, 0);
    width: fit-content;
  }
}

/*.play-btn {
  content: "";
  background-image: url("../images/hero-play-btn.svg");
  position: absolute;
  height: 7.777rem;
  width: 7.777rem;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  -webkit-animation-name: myAnim;
  animation-name: myAnim;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  transition: all 5ms linear;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@-webkit-keyframes myAnim {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes myAnim {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}*/


/* ==============        End Hero container        ============== */

/* ===============        Media  container        =============== */


.media {
  background-color: var(--dark-grey);
}

.media .label {
  color: var(--white);
}

.media .content-block {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  gap: 1rem;
}

.media .content-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: var(--offset);
}

.media .button {
  display: flex;
  align-content: end;
  align-items: flex-end;
  height: 100%;
}

.swiper-media .swiper-slide {
  border: none;
  max-width: 32rem;
  height: auto;
}

.media .swiper-nav-wrapper .swiper-nav-buttons div {
  transition: .3s;
  margin: 0;
  background-repeat: no-repeat;
  background-position:center
}

.media .swiper-nav-wrapper .swiper-nav-buttons {
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  column-gap: .5rem;
  z-index: 10;
  padding-top: 1rem;
}

.media .swiper-nav-wrapper .swiper-pagination .swiper-pagination-bullet {
  width: 1rem;
  height: .2rem;
  border-radius: .2rem;
  background: var(--white);
  /*opacity: .2;*/
}

.media .swiper-nav-wrapper .swiper-pagination {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  width: auto;
  min-height: 100%;
  align-content: center;
  padding: 0 1rem;
}

.media .swiper-nav-wrapper .swiper-button-next {
  right: 0;
  background-image: url("../images/slider-right-w-arrow.svg");
  background-size: contain;
}

.media .swiper-nav-wrapper .swiper-button-prev {
  left: 0;
  background-image: url("../images/slider-left-w-arrow.svg");
  background-size: contain;
}

/*.yt-placeholder {
  position: relative;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  height: 268px;
  width: auto;
  overflow: hidden;
  border-radius: calc(2* var(--ms-border-radius));
  background-color: unset;
}*/

.yt-placeholder {
  position: relative;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  height: auto;
  width: 100%;
  overflow: hidden;
  border-radius: calc(2* var(--ms-border-radius));
}

.yt-placeholder img {
  max-height: 100%;
  margin: auto;
  display: block;
  position: relative;
  width: fit-content;
}

.yt-play-btn {
  display: none;
}

/*img:hover + .yt-play-btn, .button:hover {
  display: inline-block;
  position: absolute;
  width: 6rem;
  height: 6rem;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}*/

.yt-placeholder:hover .yt-play-btn {
  display: inline-block;
  position: absolute;
  width: 6rem;
  height: 6rem;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/*.yt-placeholder>.yt-play-btn:hover {
  display: block;
  position: absolute;
  width: 6rem;
  height: 6rem;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}*/

.video-h-popup, .video-popup {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 101;
}

.video-h-container, .video-container {
  position: relative;
  display: flex;
  width: 80%;
  /*height: 80%;*/
  /*padding: calc(2* var(--offset));*/
  background: black;
  justify-content: center;
  align-items: center;
}

.video-wrapper, .video-h-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;

}

.video-wrapper iframe, .video-h-wrapper iframe  {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.close-video, .close-h-video {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -4rem;
  right: 0;
  height: 2.888rem;
  width: 2.888rem;
  background: var(--white);
  padding: .5rem;
  border-radius: 1rem;
  cursor: pointer;
  z-index: 102;
}

.video-h-popup, .video-popup {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 101;
}

.play-btn span {
    margin-left: 10px;
}


/* =============         End Media container        ============= */

/* ==============        Features container        ============== */


@media (max-width: 575.98px) {
  .features .bg-block {
    gap: 1rem;
    padding: 0;
  }
}

@media (max-width: 767.98px) {
  .features .bg-block {
    gap: 0;
    padding: 0
  }
}

/* @media (max-width: 991.98px) {
  .features .bg-block {
    gap: 1rem;
    padding: 0
  }
} */

.features .content-block {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0 calc(2*var(--offset));
}

@media (max-width: 575.98px) {
  .features .content-block {
    padding: 1rem;
  }
}

@media (max-width: 991.98px) {
  .features .content-block {
    padding: 1rem
  }
}

.features .content-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.features .label {
  margin: auto;
}

.features .sub-title {
  color: var(--blue);
}


/* ============        End Features container        ============ */

/* ===============        Review container        =============== */


.slider {
  position: relative;
}

.swiper-slide {
  border-right: 1px solid #1070FF;
  height: auto;
}

.review .review-block {
  padding: var(--offset);
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 1rem;
  height: 100%;
  color: var(--white);
  background-color: var(--blue);
}

.review-block img {
  margin: auto;
}

.swiper-nav-wrapper .swiper-nav-buttons {
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .5rem;
  z-index: 10;
  padding-top: 1rem;
}

.swiper-nav-wrapper .swiper-nav-buttons div {
  transition: .3s;
  width: 2rem;
  height: 2rem;
  margin: 0;
  background-repeat: no-repeat;
  background-position:center
}

.swiper-nav-wrapper .swiper-nav-buttons div:after {
  display:none
}

.slider .relative-block {
  position: relative;
  left: initial;
  top: initial;
  bottom: initial;
  right: initial;
}

.swiper-button-prev, .swiper-button-next {
  position: initial;
}

.swiper-nav-wrapper .swiper-button-next {
  right: 0;
  background-image: url("../images/slider-right-w-arrow.svg");
  background-size: contain;
}

.swiper-nav-wrapper .swiper-button-prev {
  left: 0;
  background-image: url("../images/slider-left-w-arrow.svg");
  background-size: contain;
}


/* =============        End Review container        ============= */

/* ==============        Support  container        ============== */


.support .support-block {
  position: relative;
  border-radius: calc(3* var(--ms-border-radius));
  overflow: hidden;
  text-align: center;
  background-color: var(--dark-grey);
  color: var(--white);
}

.support .support-block:after {
  content: url(../images/support-block-bg.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  width: auto;
  height: auto;
  z-index: 0;
}

.support .support-block .bg-block {
  z-index: 1;
  padding: calc(2*var(--offset));
}

@media (max-width: 575.98px) {
  .support .support-block .bg-block {
    gap: 3.111rem;
    padding: var(--offset);
  }
}

.support .cta-sub-title {
  color: var(--white);
}


/* ============         End Support container        ============ */

/* ================        Blog container        ================ */


.main-blog-post .content-top {
  display: flex;
  flex-wrap: wrap;
}

.main-blog-post .button {
  display: flex;
  justify-content: flex-end;
  align-content: end;
  align-items: flex-end;
}

.blog-post .blog-posts-wrapper {
  gap: calc(2*var(--offset-x));  
}

.num-post-count {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 2.888rem;
  height: 2.888rem;
  background-color: var(--light-grey);
  border-radius: var(--ms-border-radius);
}

.main-blog-post .post-wrapper {
  position: relative;
  gap: 1rem;
  margin: 0;
  padding: calc(.5*var(--offset));
  margin-bottom: .5rem;
}

@media (max-width: 575.98px) {
  .main-blog-post .post-wrapper {
    padding: 0 0 1rem;
  }
}

.main-blog-post .post-wrapper:hover .post-item {
  /*background-image: linear-gradient(rgb(0 0 0/10%) 0 0);*/
  /*background: rgb(0,0,0);
  background: -moz-linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
  background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);*/
  /* color: var(--primary-color); */
  color: var(--blue);
}


/*.post-wrapper .content-top .post-title {  
  font-family: var(--ff-headings);
  font-size: 1.0888rem;
  font-weight: 700;
}*/

/*new*/
.post-title {
  font-family: var(--ff-headings);
  font-size: 1.088rem;
  font-weight: 700;
  text-wrap-style: balance;
  word-break: break-word;
  /*line-height: 2.2222rem;*/
}

@media(max-width: 575.98px)  {
  .post-title {
    font-size: 1.288rem;
  }
}

.post-wrapper .content-bottom {
  display: flex;
  justify-content: space-between;
/*  gap: 1rem;
  padding-bottom: var(--offset);*/
}

/*.content-bottom .post-tags-wrapper {
  display: flex;
  align-content: center;
}*/

.post-item-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*new*/
.post-tags-wrapper {
  display: flex;
  align-content: center;
  padding-top: 1rem;
}

.post-wrapper .post-tags {
  display: flex;
  flex-wrap: wrap;
  grid-gap: .188rem;
  align-content: center;
}

.post-wrapper .post-tags a {
  font-size: .688rem;
  font-weight: 700;
  background-color: var(--light-grey);
  border-radius: var(--ms-border-radius);
  /*padding: .2rem .5rem;*/
  padding: .444rem;
  white-space: nowrap;
  text-decoration: none;
}

.post-wrapper .post-tags a:hover {
  background-image: linear-gradient(rgb(0 0 0/6%) 0 0);
  transition: all .3s ease-in-out;
}

.post-item .text p {
  margin-bottom: unset;
  font-size: 1rem;
  line-height: 1.333rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.post-item.short-item .text p {
  -webkit-line-clamp: 2;
}

@media (max-width: 575.98px) {
  .main-posts .post-item:nth-child(n+4):nth-child(-n+5) {
    display: none;
  }

  .main-posts .post-item .post-small {
    margin-bottom: unset;
    font-size: 1rem;
    line-height: 1.333rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .post-item.short-item .text p {
    -webkit-line-clamp: 3;
  }
}

@media(min-width: 576px) {
  .main-posts .post-item .post-small {
    margin-bottom: unset;
    font-size: 1rem;
    line-height: 1.333rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/*  Blog Pagination */

/* .hidden-pagination {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
} */

.pagination-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.pagination-next-link,
.pagination-prev-link {
  display: flex;
  text-decoration: none;
  font-weight: 600;
}

.pagination-link.dots:hover {
  background: unset;
  filter: unset;
  border-radius: .666rem;
}

.pagination-link:hover {
  background: rgb(0,0,0);
  background: -moz-linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
  background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
  border-radius: .666rem;
}

.pagination-prev-link img, .pagination-next-link img {
  vertical-align: middle;
  margin-right: 8px;
}

.pagination-next-link img {
  margin-left: 8px;
  margin-right: 0;
}

.pagination-prev-link img {
  transform: rotate(180deg);
}

/*.pagination-prev,
.pagination-next {
  font-weight: 600;
}*/

.pagination-prev {
  text-align: left;
}

.pagination-next {
  text-align: right;
}

.pagination-numbers {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 2;
  color: var(--blue);
}

.pagination-item, .pagination-item.active {
  border-radius: .666rem;
  min-width: 2.666rem;
  font-weight: 600;
  font-size: 1rem;
}

/*.pagination-item:hover {
  background: rgb(0,0,0);
  background: -moz-linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
  background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
  transition: .3s;
  border-radius: .666rem;
}*/

.pagination-item a,
.pagination-item span {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}

.pagination-item.active {
  background-color: var(--blue);
  color: var(--white);
}

.pagination-prev-link.disabled, .pagination-next-link.disabled {
  color: var(--blue);
  opacity: 0.3;
}

/*add 4.08*/
.next-arrow-icon {
  width: 1.333rem;
  height: auto;
}


/* =============         End  Blog container        ============= */

/* ===============        Footer container        =============== */


.footer {
  background-color: var(--dark-grey);
  color: var(--white);
}

@media (max-width: 575.98px) {
  .footer {
    padding: 3rem 1rem;
  }
}

@media(min-width: 576px) {
  .footer {
    padding: 4.222rem 10%;
  }
}

@media(min-width: 1399.98px) {
  .footer {
    padding: 4.222rem 15%;
  }
}

.f-label {
  font-size: .666rem;
  color: #818C99;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
}

.footer .f-social {
  display: flex;
}

.footer .f-social a {
  width: 3rem;
  height: 3rem;
  border: var(--border-dark);
  border-radius: 9999px;
  padding: .6rem;
  text-decoration: none;
}

.footer .f-social a:hover {
  border: 1px solid transparent;
  background-color: var(--light-grey);
  transition: .3s;
}

.footer .f-social a:hover img {
  -webkit-filter: invert(0);
  filter: invert(0);
}

.footer .f-social img {
  width: 100%;
  height: auto;
  -webkit-filter: invert();
  filter: invert();
}

.footer .f-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 1rem;
  list-style: none;
}

@media(min-width: 576px) {
  .footer .f-menu {
    gap: .5rem;

  }
}

.footer .f-menu li a {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.footer .f-menu li a:hover {
  color: var(--medium-grey);
  color: #818C99;
  font-weight: 600;
  text-decoration: none;
}

.footer ul {
  padding: 0;
  list-style: none;
}

.footer .copyright {
  font-size: .777rem;
  color: #818C99;
  padding-bottom: 0.5rem;
}


/* ============         End  Footer container        ============ */



/*                        Mojo Dialer Page                        */
/* ===============        Header container        =============== */


/*.header {
  background: -moz-linear-gradient(180deg, rgba(245,246,247,0) 50%, rgba(245,246,247,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(245,246,247,0) 50%, rgba(245,246,247,1) 100%);
  background: linear-gradient(180deg, rgba(245,246,247,0) 50%, rgba(245,246,247,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f5f6f7",endColorstr="#f5f6f7",GradientType=1);
}*/

@media (max-width: 575.98px) {
  .header {
    padding: 0 1rem;
  }
}

@media(min-width: 576px) {
  .header {
    /*padding: 4.888rem var(--offset) 0;*/
    padding: 0 var(--offset);
  }
}

.header .content-block {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  /*gap: 1rem;*/
  padding-bottom: 2.222rem;
}

/*@media(min-width: 576px) {
  .header .content-block {
    padding-bottom: 2.222rem;
  }
}*/

.header .content-top {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding-top: 1rem;
}

.header .title {
  color: var(--blue);
  font-size: 2.222rem;
  line-height: 2.666rem;
  margin: 0 0 0 1rem;
  text-align: center;
  word-wrap: break-word;
}

@media (max-width: 575.98px) {
  .header .title {
    font-size: 1.488rem;
    line-height: normal;
  }
}

.block-image {
  display: flex;
  background-color: var(--light-grey);
  border-radius: calc(2* var(--ms-border-radius));
  height: 3.388rem;
  width: 3.388rem;
  padding: .888rem;
}

.block-image img {
  margin: auto;
}

.block-checklist-wrapper {
  padding-bottom: 1rem;
}

.block-checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}

.block-checklist-col {
  display: grid;
  /*grid-template-columns: repeat(2, 1fr);*/
  grid-gap: .444rem;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}

.block-checklist li, .block-checklist-col li {
/*   display: flex; */
  background-image: url("../images/check-icon.svg");
  background-position: 0%;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  margin: auto 0;
  padding-left: 1.5rem;
  align-items: center;
  text-align: left;
  font-weight: 600;
  line-height: normal;
}

.features.product-block .pic-block {
  background-color: var(--light-grey);
  border-radius: 1.288rem;
  display: flex;
  align-items: center;
}


/* ===============           CTA blocks           =============== */

.content-block.cta-block {
  display: block;
  position: relative;
  flex-direction: column;
  border-radius: calc(2*var(--ms-border-radius));
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .content-block.cta-block {
    padding: 0;
  }
}

@media (min-width: 768px) {
  .content-block.cta-block {
    margin: 0 calc(2*var(--offset));
    padding: 0;
  }
}

.cta-block, .cta-block-v1, .cta-block-v2 {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
}

.cta-block.home-cta-clear {
  background-color: transparent;
  padding: 0;
}

.cta-block .cta-pic-wrap {
  position: relative;
  object-fit: cover;
}

.cta-pic {
  position: absolute;
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.cta-pic.left {
  object-position: right top;
  right: 0;
}

.cta-pic.right {
  object-position: left top;
  left: 0;
}

.cta-block .cta-content {
  padding: var(--offset);
}

.cta-block-v1 .cta-content, .cta-block-v2 .cta-content {
  padding: var(--offset);
}

.cta-sub-title {
  color: var(--dark-grey);
  font-size: 1.555rem;
  font-size: 1.688rem;
  line-height: 2rem;
  font-family: var(--ff-headings);
  font-weight: 700;
  margin-bottom: calc(.5*var(--offset));
}

.cta-pic-block {
  display: block;
  position: relative;
  overflow: visible;
  z-index: 1;
}

.home-cta-clear .cta-pic-block picture {
  height: 100%;
}

.home-cta-clear .cta-pic {
  position: relative;
}

@media (max-width: 575.98px) {
  .home-cta-clear .cta-pic.right {
    width: 12rem;
    float: right;
  }
}

@media (max-width: 575.98px) {
  .home-cta-clear .cta-pic.left {
    width: 12rem;
  }
}

@media (max-width: 575.98px) {
  .cta-block-v2 .cta-content {
    padding: 0;
  }
}

.cta-block-v2 .cta-pic.right {
  position: relative;
  right: -2rem;
  top: -4rem;
  transform: rotate(35deg);
}

@media (max-width: 575.98px) {
  .cta-block-v2 .cta-pic.right {
    width: 6rem;
    float: right;
    left: unset;
    right: -1rem;
    top: -1rem;
    bottom: unset;
    transform: rotate(-35deg);
  }
}

.cta-block-v2 .cta-pic.left {
  position: relative;
  left: -2rem;
  bottom: -4rem;
  transform: rotate(35deg);
}

@media (max-width: 575.98px) {
  .cta-block-v2 .cta-pic.left {
    width: 6rem;
    float: left;
    left: -1rem;
    right: unset;
    top: unset;
    bottom: -1rem;
    transform: rotate(-35deg);
  }
}

.cta-block-v2 .cta-content {
  padding: 0;
}

@media (max-width: 575.98px) {
  .cta-block-v2 .cta-content {
    padding: 0;
  }
}

.cta-block-v1 .cta-pic.right {
  position: absolute;
  width: 10rem;
  object-fit: contain;
  object-position: left bottom;
  bottom: 0;
  z-index: -1;
}

.cta-block-v1 .cta-pic.left {
  position: absolute;
  width: 17rem;
  object-fit: contain;
  object-position: left top;
  top: 0;
  z-index: -1;
}

.product-block .bg-block {
  padding: 0;
}


/*                            FAQ Page                            */
/* ===============        Header container        =============== */

/*.header.second-page {
  padding: 6.222rem var(--offset) 2.222rem;
}*/

/*@media (max-width: 575.98px) {
  .header.second-page {
    padding: 5.2222rem var(--offset) 2.2222rem;
  }
}

@media(min-width: 576px) {
  .header.second-page {
    padding: 4.2222rem var(--offset) 2.2222rem;
  }
}
*/
.header.second-page .phone-info, .header.second-page .contact-info {
  align-items: center;
  flex-direction: unset;
  display: inline-flex;
  gap: 1rem;

/*  float: unset;
  align-content: unset;
  flex-direction: unset;*/
}

.header.second-page .contact-info .link-title, .header.second-page .phone-info .link-title {
  display: block;
  color: var(--dark-grey);
  text-decoration: none;
  font-weight: 600;
  font-size: inherit;
  font-family: inherit;
}


/* ================        FAQ  container        ================ */


.faq-accordion {
  background-color: var(--light-grey);
  border-radius: calc(2*var(--ms-border-radius));
  padding: 1rem;
}

.faq-accordion .btn {
  text-align: left;
  margin: 0;
  padding-right: 3.222rem;
  font-size: 1.2rem;
  line-height: normal;
  position: relative;
  border: 0;
  min-height: 4.888rem;
}

.faq-accordion .btn:before {
  position: absolute;
  content: '';
  right: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.8rem;
  height: 1.8rem;
  background: url(../images/faq-collapse-icon.svg) no-repeat center / contain;
  /*transition: .3s;*/
}

.faq-accordion .btn.collapsed:before {
  position: absolute;
  content: '';
  right: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.8rem;
  height: 1.8rem;
  background: url(../images/faq-expand-icon.svg) no-repeat center / contain;
  /*transition: .3s;*/
}

.faq-accordion .card {
  border-radius: 0;
  border: 0;
  padding: 0;
  background: transparent;
}

.faq-accordion .card:not(:last-of-type) {
  /*margin-bottom: .7rem;*/
  border-bottom: 1px solid var(--medium-grey);
}

.faq-accordion .card-body {
  margin: 0;
  /*padding: var(--offset) 0;*/
  padding: 1.288rem .888rem 0 .888rem;
  border-top: 1px solid var(--medium-grey);
}

.card-body .accordion.faq-accordion {
  background-color: transparent;
  border-radius: calc(2*var(--ms-border-radius));
  padding: 0;
}


/*                     Mojo Integrations Page                     */
/* ===============        Header container        =============== */


.integrations-card-header .section-subtitle {
  color: var(--dark-grey);
  font-size: 1.555rem;
  line-height: 2rem;
  font-family: var(--ff-headings);
  font-weight: 700;
  margin-bottom: calc(.5*var(--offset));
}

.integrations-card-header .section-subtitle-sec {
  color: var(--dark-grey);
  font-size: 1.555rem;
  line-height: 2rem;
  font-family: var(--ff-headings);
  font-weight: 400;
  margin-bottom: calc(.5*var(--offset));
}

.integrations-accordion .card {
  border: none;
  padding: .888rem;
  margin: 0;
}

.integrations-accordion .integration-item {
  background-color: unset;
  border: 1px solid var(--medium-grey);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.integrations-accordion .integration-item .integration-pic img {
  height: 3rem;
  width: auto;
  margin: auto;
  object-fit: contain;
  float: left;
}

@media (max-width: 575.98px) {
  .integrations-accordion .integration-item .integration-pic img {
    height: 2rem;
  }
}

.integrations-accordion .card-body {
  margin: 0;
  padding: 0;
}

.integrations-accordion .card-body p {
  margin: 0;
  padding: 0;
}


/*                       Mojo Contacts Page                       */


.info-card {
  /*width: 100%;*/
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
}

.info-card .text p{
  padding-bottom: unset;
  margin-bottom: unset;
}

.info-card .info-item {
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.info-card .text a:hover {
  text-decoration: underline;
}


/*                       Mojo  Pricing Page                       */

/*.pricing {
  padding: 4.2222rem var(--offset);
  background-color: hsla(98, 0%, 100%, 1);
  background-image: radial-gradient(circle at 45% 36%, hsla(36.85714285714286, 81%, 66%, 0.2) 3.9968025579536373%, transparent 45.81023223413457%), radial-gradient(circle at 62% 60%, hsla(98.69822485207101, 89%, 36%, 0.2) 3.9968025579536373%, transparent 41.73612036304592%), radial-gradient(circle at 30% 67%, hsla(215.94202898550725, 100%, 40%, 0.2) 3.9968025579536373%, transparent 38.045013354550726%);
  background-blend-mode: normal, normal, normal;
}*/

.price-content-wrapper {
  overflow: visible;
}

.pricing.content-wrapper {
  padding-top: 0;
  overflow: visible;
}

.pricing {
  background: url("../images/pricing-blur-bg.svg") top center/cover no-repeat,50%/cover no-repeat,50%/cover no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center -2rem;
  height: 100%;
  overflow: hidden;
}

/* Включає липкість всередині секції */
.summary-sticky-wrapper {
/*   position: sticky; */
  bottom: 0;
  background-color: #fff;
/*   background-color: rgba(231, 237, 250, 1); */
  z-index: 10;
  padding: .5rem 1rem;
  border-radius: 0 0 .5rem .5rem;
/*   box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);*/
/*   margin-top: 16rem !important; */
}

.sticky {
  position: relative;
  position: -webkit-sticky;
  position: sticky;
}
@supports (position: sticky) or (position: -webkit-sticky) {
  .summary-sticky-wrapper {
    top: 30px;
  }
}

.text-danger {
  font-size: .888rem;
  padding: .222rem;
  width: fit-content; 
}

/* Щоб секція мала достатню висоту для прокрутки */
.pricing.content-wrapper {
  position: relative;
  z-index: 1;
/*   background-color: rgba(231, 237, 250, 1); */
/*   background-color: #f8f9fa; */
}

.summary-box {
  background-color: rgba(231, 237, 250, 1);
}

.price-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.tab-price-wrapper .tab-price-heading .tab-price-list {
  float: left;
  cursor: pointer;
}

.price-tabs {
  display: inline-flex;
  justify-content: center;
  border: 1px solid var(--medium-grey);
  border-radius: 9999px;
  background-color: var(--white);
  padding: 2px;
  margin-bottom: var(--offset);
}

@media (max-width: 575.98px) {
  .price-tabs {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .price-item {
    display: flex;
    width: 100%;
    align-content: center;
  }
}

.nav-link.active {
  display: flex;
  color: var(--white);  
  border: none;
  background-color: var(--blue);
}

.nav-link {
  display: flex;
  justify-content: center;
  /*display: inline-block;*/
  color: var(--blue);
  font-weight: 700;
  border: none;
  border-radius: 9999px;
  background-color: var(--white);
  padding: .5rem;
  min-width: 12vw;
  /*min-height: 20px;*/
}

@media (max-width: 575.98px) {
  .nav-link {
    display: flex;
    width: 100%;
    padding: .5rem 1rem;
  }
}

.price-block-label {
  text-align: center;
  font-weight: 600;
  padding: .5rem 0;
  background-color: var(--white);
  border-radius: var(--ms-border-radius);
}

.start-label {
  background-color: var(--blue);
  color: var(--white);
}

/* Price table */

.price-grid-wrap {
  background-color: var(--white);
  box-shadow: 0px .5rem 2rem rgba(63, 71, 82, 0.08);
  border-radius: 1rem;
}

.pricing-header-info {
  width: fit-content;
  margin: auto;
}

.pricing-header {
  color: var(--dark-grey);
  font-size: 1.555rem;
  line-height: 2rem;
  font-family: var(--ff-headings);
  font-weight: 700;
  border-radius: .5rem;
}

.pricing-header-title {
  font-size: 1.555rem;
}

.pricing-table {
  border-spacing: .5rem;
  border-collapse: separate;
}

.pricing-badge {
  border-radius: 1rem;
  font-size: .875rem;
  font-weight: 600;
  width: fit-content;
  padding: 0 .444rem;
  margin: 0 .5rem;
  white-space: nowrap;
}

.header-pricing-badge {
  display: flex;
  border-radius: 999px;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  width: fit-content;
  padding: 0 .444rem;
  white-space: nowrap;
}

.header-badge-icon {
  width: 26px;
  height: 26px;
}

/* Price plan */

.item-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--grey);
  border-radius: 4px;
  overflow: hidden;  
}

.qty-btn {
  width: 2rem;
  background: var(--light-grey);
  border: none;
  padding: 5px 8px;
  cursor: pointer;
}

.qty-input {
  width: 3rem;
  text-align: center;
  border: none;
  padding: 5px 0;
}

.total-cost {
  font-size: 1.25rem;
}

.remove-btn {
  background: transparent;
  color: var(--red);
  border: none;
  margin-left: 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
}
.remove-btn:hover {
  color: var(--red);
}



/* Main Component Styles */
.checkbox {
  position: relative;
}
.checkbox .check-icon {
  position: relative;
  display: inline-flex;
  height: 20px;
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  border: solid 1px var(--medium-grey);
  background-color: var(--light-grey);
  border-radius: .222rem;
  transition: 0.2s all ease-in-out;
}
.checkbox .check-icon:before {
  content: "";
  position: absolute;
  inset: 0;
  transition: 0.2s all ease-in-out;
  background-image: url("../images/chk-arrow.svg");
  background-repeat: no-repeat;
  background-position: center center;
  transform: scale(1.3);
  opacity: 0;
}

.checkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
}

.checkbox input[type=checkbox]:checked {
/*   border-color: var(--blue);
  background: var(--blue); */
}

.checkbox input[type=checkbox]:checked + .check-icon {
  border-color: var(--blue);
  background: var(--blue);
}
.checkbox input[type=checkbox]:checked + .check-icon:before {
  transform: scale(1);
  opacity: 1;
}
.checkbox input[type=checkbox]:disabled:checked + .check-icon {
  border: 1px solid var(--blue);
  opacity: .2;
}
.checkbox input[type=checkbox]:disabled:checked + .check-icon:before {
/*   background-image: url("../images/chk-arrow-disable.svg"); */
  background-image: url("../images/chk-arrow.svg");
  transform: scale(1);
  opacity: 1;
}

.checkbox input[type=checkbox]:focus ~ .check-icon {
  box-shadow: 0 0 0 4px rgba(47, 86, 212, 0.1);
}
.checkbox > div:first-child {
  display: flex;
  align-items: center;
  float: left;
  text-align: left;
  align-items: flex-start;
}
/*.checkbox.has-label {
  display: flex;
  grid-gap: 1rem;
  align-items: center;
}*/

.radio {
  position: relative;
}
.radio .radio-icon {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  border: solid 1px var(--medium-grey);
  background-color: var(--light-grey);
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}
.radio .radio-icon:before {
  content: "";
  position: absolute;
  inset: 0;
  transition: all 0.2s ease-in-out;
  background-image: url("../images/radio-active.svg");
  /*background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='circle' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='svg-inline--fa fa-circle fa-w-16'%3e%3cpath fill='%23fff' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z' class=''%3e%3c/path%3e%3c/svg%3e");*/
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  opacity: 0;
}
.radio input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.radio input[type=radio]:checked + .radio-icon {
  border-color: var(--blue);
  background: var(--blue);
}
.radio input[type=radio]:checked + .radio-icon:before {
  opacity: 1;
}
.radio input[type=radio]:disabled:checked + .radio-icon {
  border: 1px solid var(--blue);
  background: var(--blue);
  opacity: .2;
}
.radio input[type=radio]:disabled:checked + .radio-icon:before {
  background-image: url("../images/radio-active.svg");
  transform: scale(1);
  opacity: 1;
}
.radio input[type=radio]:focus ~ .radio-icon {
  box-shadow: 0 0 0 4px rgba(47, 86, 212, 0.1);
}
.radio > div:first-child {
  display: inline-flex;
}
/*.radio.has-label {
  display: flex;
  grid-gap: 1rem;
  align-items: center;
}*/


/* Disabled checkbox */
/*label.checkbox input[type="checkbox"]:disabled:not(:checked) + .check-icon,
label.checkbox input[type="checkbox"]:disabled:checked + .check-icon:before {
  border-color: var(--blue);
  background-image: url("../images/chk-arrow-disable.svg");
  opacity: .5;
}

[type="checkbox"]:disabled:checked + .check-icon:before {
  color: #777;
}

[type="checkbox"]:disabled + .check-icon:before {
  color: #aaa;
}*/

.plan-item-description {
  line-height: normal;
}

.plan-item-price {
  white-space: nowrap;
}

@media(max-width: 576px) {
  .plan-item-price {
  width: 45%;
  }
}

/*price blocks*/

.example-card {
  background-color: var(--white);
  box-shadow: 0px .5rem 2rem rgba(63, 71, 82, 0.08);
  border-radius: 1rem;
}

.example-header {
  font-size: 1.066rem;
  line-height: normal;
}

.example-item {
  padding: .222rem 0;
}

.price-grid__column {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  box-shadow: 0px .5rem 2rem rgba(63, 71, 82, 0.08);
  border-radius: 1rem;
  padding: 1rem;
  gap: 1rem;
}

 .start-block {
  border: 1px solid var(--blue);
 }

.price-grid__column_item {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.price-grid__column_icon {
  width: 2rem;
  height: 2rem;
}

.price-grid__heading {
  font-weight: 700;
  margin: .444rem 0;
}

.price-grid__pricing {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.price-grid__text-label {
  background-color: rgba(var(--block-color-blue), 0.1);
  border-radius: 8px;
  padding: 2px 8px 4px;
}

.price-grid__text-color_green {
  font-size: 2rem;
  font-family: var(--ff-headings);
  font-weight: 900;
  color: var(--green);
}

.price-grid__column_description {
  background-color: var(--light-grey);
  border-radius: .5rem;
  padding: 1rem;
  text-align: left;
}

.price-grid__column_content li {
  background: url("../images/price-check-icon.svg") 0 3px no-repeat;
  background-size: 1rem;
  list-style-type: none;
  padding: 0 0 .488rem 1.488rem;
}

.pricing .section-subtitle {
  color: var(--dark-grey);
  font-size: 1.555rem;
  line-height: 2rem;
  font-family: var(--ff-headings);
  font-weight: 700;
  margin-bottom: calc(.5*var(--offset));
}

/* ==============        Pricing info        ============== */



/*.support .content-block {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  gap: 1rem;
}*/

.pricing-info-block .pricing-block {
  position: relative;
  border-radius: calc(3* var(--ms-border-radius));
  overflow: hidden;
  text-align: center;
  background-color: var(--main-grey);
  color: var(--white);
}

.pricing-info-block .pricing-block:after {
  content: url(../images/pricing-bg-img.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  width: auto;
  height: 100%;
  min-height: 100%;
}

.pricing-info-block .pricing-block .bg-block {
  z-index: 1;
  padding: calc(2*var(--offset));
}


@media (max-width: 575.98px) {
  .pricing-info-block .pricing-block .bg-block {
    gap: 3.111rem;
  }
}

.pricing-info-block .cta-sub-title {
  color: var(--white);
}

/*                         Main Blog Page                         */

/* ===============        Blog Search Bar        =============== */

.search-bar {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  padding: .5rem;
  background-color: var(--white);
  border-radius: .888rem;
}

.search-input {
  width: 100%;
  border: 0;
  color: var(--medium-grey);
  font-size: 1.222rem;
  border-radius: unset;
  outline: none;
  background-color: transparent;
}

.search-input:focus {
  color: var(--main-grey);
}

.search-bar .block-icon {
  min-height: 2.555rem;
  min-width: 2.555rem;
  background-color: var(--blue);
}

.search-bar .block-icon img {
  height: 1.222rem;
  width: 1.222rem;
}

/* ===============         Main Blog Page        =============== */

#breadcrumbs {
  font-size: .888rem;
}

.blog-sub-title {
  font-family: var(--ff-headings);
  font-size: 1.222rem;
  font-weight: 500;
  line-height: normal;
  margin-bottom: calc(.5*var(--offset));
}

.wp-block-image {
  border-radius: 1rem;
  overflow: hidden;
  margin: 1rem 0 2rem;
  align-self: center;
}

button.block-icon:hover {
  background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
}

.blog-post .post-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.category-item .btn {
  font-size: .666rem;
  font-weight: 700;
  color: var(--blue);
  padding: .222rem .444rem;
  background-color: var(--bg-light-blue);
  border-radius: .5rem;
  text-decoration: none;
  text-transform: capitalize;
}

.category-item .btn {
  font-size: .888rem;
  font-weight: 600;
}

.category-item .btn:hover {
  background-image: linear-gradient(rgb(0 0 0/6%) 0 0);
  transition: all .3s ease-in-out;
}

.post-entry {
  /*padding: 1.222rem;*/
  border: 1px solid var(--grey);
  border-radius: 1.288rem;
  overflow: hidden;
}

.post-entry:hover {
  background: rgb(0,0,0);
  background: -moz-linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
  background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}

.post-thumb {
  position: relative;
  height: 15.555rem;
  width: 100%;
  flex-shrink: 0;
  border-radius: 1rem;
  overflow: hidden;
}

.post-thumb.like-post-thumb {
  height: 10.888rem;
}

.post-thumb img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s;
}

.post-entry:hover .post-thumb img {
  transform: scale(1.1);
}

.post-content a {
  text-decoration: unset;
  color: var(--main-grey);
}

.post-content a:hover {
  text-decoration: unset;
  color: var(--blue);
}

.post-entry .post-title {
  font-family: var(--ff-headings);
  font-size: 1.288rem;
  font-weight: 700;
  line-height: normal;
  color: inherit;
}

@media (max-width: 575.98px) {
  .post-entry .post-title {
    font-size: 1.288rem;
    line-height: normal;
  }
}

.post-excerpt {
  font-size: 1rem;
  line-height: 1.333rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.post-read-time {
  color: var(--medium-grey);
}

.post-more a {
  text-decoration: underline;
  color: var(--blue);
}

.post-more-icon {
  width: 1.333rem;
  height: auto;
}

.tags-item, .category-item {
  display: flex;
  flex-wrap: wrap;
  gap: .222rem;
}

.tags-item a, .category-item a {
  font-size: .666rem;
  font-weight: 700;
  color: var(--blue);
  padding: .222rem .444rem;
  background-color: var(--bg-light-blue);
  border-radius: .222rem;
  text-decoration: none;
  text-transform: capitalize;
  white-space: nowrap;
}

.tags-item a:hover, .category-item a:hover {
  background-image: linear-gradient(rgb(0 0 0/6%) 0 0);
  /*transition: .3s;*/
  transition: all .3s ease-in-out;
}

.category-item .btn.active {
  color: var(--white);
  background-color: var(--blue);
  border-color: unset;
}

.title.post-title {
  color: var(--main-grey);
}

.post-entry .cta-btn:hover {
  background-image: unset;
  background-color: var(--white);
  border: 1px solid transparent;
}

@media (max-width: 575.98px) {
  .post-single-inner .tags-entry {
    padding-bottom: 1.5rem;
  }
}

@media(min-width: 576px) {
  .post-single-inner .tags-entry {
    padding-bottom: 2.111rem;
  }
}

.post-single-entry {
  margin: 0 0 2.5em;
  height: fit-content;
}

.post-single-entry img {
  border-radius: 1rem;
  overflow: hidden;
}

.single-prev-next-post, .single-prev-next-post {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 2rem 1rem;
  flex-wrap: nowrap;
  gap: 2rem;
  border-top: 1px solid var(--grey);
  color: var(--main-grey);
}

.single-prev-btn-wrap  {
  display: flex;
  align-items: flex-start;
}

.single-next-btn-wrap  {
  display: flex;
  align-items: flex-end;
  margin-left: auto;
}

.single-prev-btn-wrap .prev-btn, .single-prev-btn-wrap .next-btn {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--main-grey);
}

.single-prev-btn-wrap .sub-title {
  text-align: left;
}

.single-next-btn-wrap .sub-title {
  text-align: right;
}

.single-prev-btn, .single-next-btn {
  display: flex;
  gap: 1rem;
  font-family: var(--ff-main);
  align-items: center;
}

@media (max-width: 575.98px) {
  .single-prev-btn {
    flex-direction: column;
    align-items: flex-start;
  }
  .single-next-btn {
    flex-direction: column;
    align-items: flex-end;
    flex-direction: column-reverse;
  }
}

.prev-btn.cta-btn img {
  transform: rotate(180deg);
}

.single-prev-btn-wrap, .single-next-btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
}

.single-prev-btn-wrap .sub-title, .single-next-btn-wrap .sub-title {
  color: var(--main-grey);
  font-size: 1rem;
  font-family: var(--ff-headings);
  font-weight: 600;
  line-height: normal;
}

.post-entry-subtitle h3 {
  font-weight: 600;
}

.single-post.post-title {
  font-size: 1rem;
  line-height: normal;
}

.single-post.post-title a {
  font-family: var(--ff-headings);
  font-weight: 700;
}

.post-loader {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  position: relative;
  animation: loader10-uba7e1836 0.9s ease alternate infinite;
  animation-delay: 0.36s;
  top: 50%;
  margin: -1.666rem auto 0; }
  .post-loader::after, .post-loader::before {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    animation: loader10-uba7e1836 0.9s ease alternate infinite; }
  .post-loader::before {
    left: -1.666rem;
    animation-delay: 0.18s; }
  .post-loader::after {
    right: -1.666rem;
    animation-delay: 0.54s; }

@keyframes loader10-uba7e1836 {
  0% {
    box-shadow: 0 1rem 0 -1rem #0052ec; }
  100% {
    box-shadow: 0 1rem 0 #0052ec; } }

/*.single-next-btn.cta-btn img {
  transform: rotate(180deg);
}*/

/*Sidebar widget*/

/*.sidebar-widget {
  overflow-x: hidden;
  position: sticky;
  top: 200px;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-left: 2rem;
  padding-bottom: 10rem;
  z-index: 30;
}

@media (max-width: 575.98px) {
  .sidebar-widget {
    position: relative;
    flex-direction: row;
    flex-wrap: nowrap;
    top: 0;
    padding: 1rem 0 2rem;
  }
}

.sidebar-widget .btn-widget {
  display: flex;
}

.sidebar-widget .btn-widget {
  width: 2.666rem;
  height: 2.666rem;
  border: 1px solid var(--grey);
  border-radius: 1rem;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.sidebar-widget .btn-widget:hover {
  background-image: unset;
  background-color: var(--white);
  border: 1px solid transparent;
  background-image: linear-gradient(rgb(0 0 0/6%) 0 0);
  transition: all .3s ease-in-out;
}

.sidebar-widget .btn-widget img {
  height: 1.222rem;
  width: 1.222rem;
}*/


/* ===============            404 Page           =============== */

/*.page-404 {
  position: relative;
}*/

.page-404::before {
  content: "404";
  font-family: var(--ff-headings);
  font-size: 4rem;
  font-weight: 700;
  color: var(--grey);
  /*position: absolute;*/
  /*height: 1em;*/
  display: block;
  text-align: center;
  /*width: 0.5em;*/
}


/* ==============            Form style           ============== */


.form-wrapper {
  background-color: var(--light-grey);
  border-radius: calc(2*var(--ms-border-radius));
  padding: var(--offset);
}

.form-wrapper form {
  gap: .5rem;
}

.form-label {
  font-weight: 600;
  color: var(--dark-grey);
}

.form-check-label {
  font-weight: 600;
  color: var(--dark-grey);
}

.form-inline {
  display: flex;
  gap: 2rem;
}

.form-control {
  display: block;
  width: auto;
  padding: .888rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark-grey);
  background-color: var(--white);
  background-clip: padding-box;
  border: 1px solid transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: var(--ms-border-radius);
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control:focus {
  color: var(--dark-grey);
  background-color: var(--white);
  border-color: transparent;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(var(--block-color-blue), 0.1);
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-radius: var(--ms-border-radius);
  border: transparent;
  /*color: var(--light-grey);*/
  font-weight: 600;
}


/*.form-control {
  width: 100%;
  padding: 10px 0 10px 18px;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: bold;
}

.form-control label {
  color: var(--dark-grey);
  display: block;
  margin-bottom: 5px; 
}
 
.form-control input {
  border: 1px solid var(--border);
  border-radius: 4px;
  display: block;
  padding: 10px;
}

.form-control::placeholder {
  color: var(--placeholder); 
}*/

.form-control input:focus {
  outline: 0;
  border-color: var(--dark-grey);
}

.form-control:focus {
  color: var(--dark-grey);
  border-color: var(--dark-grey);
  outline: 0;
  box-shadow: 0 0 0 0.25rem #2c344025;
}

.form-check-label {
  font-weight: 600;
  padding-right: 24px;
  color: var(--dark-grey);
}

.form-check-input {
  border-color: var(--dark-grey);
}

.form-control.error small {
    visibility: visible;
}

.form-radio input {
  width: auto;
}

.form-check-label:hover, .form-check-input:hover {
  cursor: pointer;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-radius: .5rem;
  /*width: 100%;*/
}

.form-control.is-invalid, .was-validated .form-control:invalid, .form-control.is-valid, .was-validated .form-control:valid {
  background-image: none;
}

.select-dropdown,
.select-dropdown * {
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}

.select-dropdown {
  position: relative;
  /*background-color: #E6E6E6;*/
  border-radius: 4px;
}

.select-dropdown select {
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
  padding: .888rem;
  border-radius: .5rem;
  border: 1px solid var(--border-light);
  background-color: var(--white);
    -webkit-appearance: none;
    -moz-appearance: none;
  appearance: none;
}

.select-dropdown select > option{
  color: #555;
  background-color: aqua;
  background-image: none;
  font-size: 18px;
  height: 50px;
  padding: 15px;
  border: 1px solid rgb(41, 18, 18);
}

.select-dropdown:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-top: 5px solid var(--dark-grey);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

#fullnameError, #firstnameError, #lastnameError, #phoneError, #emailError, #radioError, #addressError, #cityError, #stateError, #zipcodeError, #noteError, #messageError, .phoneError {
  display: flex;
  height: 22px;
  font-size: 14px;
  padding: 0;
}

.btn-del-input {
  margin-left: 18px;
  color: var(--red);
}

.form-del-btn {
  margin-left: 1rem;
  color: var(--red);
}

.form-button {
  /*font-family: var(--ff-headings);*/
  font-style: normal;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 6px 16px;
  border-radius: 24px;
  display: inline-block;
  cursor: pointer;
}

.add-form-button {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  padding: 6px 16px;
  border-radius: 6px;
  display: inline-block;
  cursor: pointer;
}


/* ============            End Form style           ============ */


/* ===========            Popup Form style           =========== */

.info_popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index:110;
}

#cForm_popup, #rForm_popup, #success_popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: none;
  z-index:110;
}

#cForm_popup.show, #rForm_popup.show, #success_popup.show {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.popup-wrap {
  position: absolute;
  background: #ffffff;
/*   width: 400px; */
  width: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 30px;
  border-radius: 1rem;
}

@media (max-width: 575.98px) {
  .popup-wrap {
    width: auto;
    left: 5%;
    top: 5%;
    transform: translate(-5%, -5%);
    padding: 16px 16px;
    border-radius: .5rem;
  }
}

.popup-content {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.popup-title {
  font-family: var(--ff-headings);
  font-size: 1.666rem;
  font-weight: 600;
  color: var(--main-grey);
  margin: 1rem 0;
}

.popup-close {
  float: right;
  cursor: pointer;
}
.close-popup {
  width: 1.666rem;
  height: auto;
}

/*.popup-hidden {
  display: none;
}*/
.popup-invisible {
  display: none;
}


/* =========            End Popup Form style           ========= */