/* ---------------------------------- */
/*   VARIABLES                        */
/* ---------------------------------- */


/* === COLORS === */

:root {
  --dark-green: #022213;
  --medium-green: #01AF35;
  --neon-green: #01FF48;
  --faded-green: #e8efe8;
  --light-gray: #F7F8F9;
  --blue-gray: #A0ABBB;

}

/* === TYPOGRAPHY === */

:root {
  --font-h1: clamp(2.5rem, 5vw + 1rem, 3.75rem);     /* ~40px to 60px */
  --font-h2: clamp(2rem, 4vw + 0.5rem, 2.5rem);      /* ~32px to 40px */
  --font-h3: clamp(1.75rem, 3vw + 0.25rem, 2rem);    /* ~28px to 32px */
  --font-h4: clamp(1.5rem, 2.5vw + 0.2rem, 1.5rem);  /* ~24px */
  --font-h5: clamp(1.25rem, 2vw + 0.2rem, 1.25rem);  /* ~20px */
  --font-p: 16px;       /* ~16px */
}

/* === OTHER === */

:root {
  --right-border: 7px solid var(--neon-green);
  --border-radius: 12px;

}



/* ---------------------------------- */
/*   GENERAL                          */
/* ---------------------------------- */

body.testpage #page-wrapper {
padding-top: 0px;
}

/*** GENERAL ***/
.content-block .row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.content-block .row .col {
  flex-basis: auto;
  flex-grow: unset;
}

.content-block .btn2.outlined {
  background: white;
}

.content-block .btn2 {
  padding: 16px 80px;
}


.content-block .cards-row {
  row-gap: 30px;
}

.content-block .row:after {
  height: 0;
}



/* ---------------------------------- */
/*   FONTS                            */
/* ---------------------------------- */

.content-block h1, .content-block h2, .content-block h3, .content-block h4, .content-block h5 {
  color: black;
  margin: 0;
  line-height: 120%;
}

.content-block h1 {
  font-size: var(--font-h1);
}

.content-block h2 {
  font-size: var(--font-h2);
}

.content-block h3 {
  font-size: var(--font-h3);
}

.content-block h4 {
  font-size: var(--font-h4);
}

.content-block h5 {
  font-size: var(--font-h5);
}

.content-block p {
  font-size: var(--font-p);
  margin-top: 0;
  line-height: 22.4px;
  padding-bottom: 15px;
  color: black;
}

.content-block p:last-child {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.content-block .dark-green p {
  color: white;
}
.content-block.dark-bg h1, .content-block.dark-bg h2, .content-block.dark-bg h3, .content-block.dark-bg h4, .content-block.dark-bg h5, .content-block.dark-bg p {
  color: white;
}

.content-block .dark-bg h1, .content-block .dark-bg h2, .content-block .dark-bg h3, .content-block .dark-bg h4, .content-block .dark-bg h5, .content-block .dark-bg p {
  color: white;
}


/* ---------------------------------- */
/*   HERO                             */
/* ---------------------------------- */


.content-block.hero .row {
  position: relative;
  /* align-items: center; */
}
.content-block.hero .hero-heading h1 {
  color: #01FF48;
  margin: 0;
}
/* .content-block.hero .hero-desc {
  margin: 40px 0px;
} */
.content-block.hero .btn2 {
  margin-top: 24px;
}
.content-block.hero h2 {
  margin-top: 0;
}

.content-block.hero img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.content-block.hero .media-col {
  position: relative;
  margin-top: 40px;
}

.content-block.hero  video {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  height: 100%;
}

.content-block.hero .heading-border hr {
  margin: 24px 0px;
  width: 100%;
}

@media only screen and (min-width: 992px) {
  .content-block.hero .media-col {
    margin-top: 0px;
  }
}

@media only screen and (max-width: 992px) {
  .content-block.hero {
    text-align: center;
  }
}




/* ---------------------------------- */
/*   BLOCKS                           */
/* ---------------------------------- */


/*** --- BLOCKS SETUP --- ***/

.content-block {
  padding: 120px 0px;
}
.content-block.no-bg + .content-block.no-bg {
  padding-top: 0px;
}
.content-block.no-bg + .content-block.no-bg {
  padding-top: 0px;
}

.content-block .container {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}

.content-block.no-bg {
  background-color: var(--faded-green);
}

.content-block.dark-bg {
  background-color: var(--dark-green);
}
.content-block .content-wrapper {
  background: white;
  border-radius: 12px;
  height: 100%;
}

.content-block .content-wrapper.dark {
  background: #022213;
  color: white;
}

.content-block .content-wrapper.dark h2, .content-block .content-wrapper.dark h3, .content-block .content-wrapper.dark h4, .content-block .content-wrapper.dark h5, .content-block .content-wrapper.dark h6, .content-block .content-wrapper.dark p {
  color: white;
}


.content-block img {
  width: 100%;
}

.content-block .btn-container {
  display: flex;
  column-gap: 10px;
  row-gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}

.content-block .centered {
  text-align: center;
  justify-content: center;
  align-items: center;
}

.content-block .introduction-row .col {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}
.content-block .grid-one, .content-block .grid-two, .content-block .grid-three {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 30px;
}

@media only screen and (max-width: 768px) {
  .heading-border hr {
    left: 0 !important;
  }
}

@media only screen and (max-width: 601px) {
  .content-block {
    padding: 80px 0px;
  }
}

@media only screen and (min-width: 992px) {
  .content-block .grid-three {
    grid-template-columns: repeat(3, 1fr);
  }
}


/*** --- GLOBAL BLOCK ELEMENTS --- ***/


.card-element {
  background: var(--dark-green);
  border-radius: var(--border-radius);
  color: white;
  border-right: var(--right-border);
}

.card-element .card-content {
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
}


.card-element .card-content a:not(.btn2) {
  color: var(--neon-green);
  font-weight: 600;
}





/*** --- LARGE SMALL TEXTBOX --- ***/

.content-block.large_small_textbox .container {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}
.content-block .content-wrapper.large-wrapper {
  padding: 40px;
}
.content-block .content-wrapper.small-wrapper {
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.list-grid, .image-btn-wrapper {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.list-grid {
  row-gap: 40px;
}

.list-content a {
  color: var(--neon-green);
}

.list-content h3, .list-content h4, .list-content h5, .list-content h6 {
  margin-bottom: 8px;
}

.image-btn-wrapper {
  align-items: center;
  row-gap: 24px;
}

@media only screen and (min-width: 992px) {
  .list-grid {
    margin-bottom: 0px;
  }
  .image-btn-wrapper, .list-grid, .content-block .content-wrapper.large-wrapper  {
    padding: 58px;
  }
}



/*** IMAGE & TEXT ***/

.image_and_text .content-wrapper {
  background: white;
  border-radius: var(--border-radius);
  justify-content: space-between;
  padding: 30px 35px;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.image_and_text .content-wrapper .content {
  max-width: 53%;
}

.image_and_text img {
  width: 100%;
  max-width: 367px;
}
.image_and_text .content-wrapper.image-left {
  flex-direction: row-reverse;
}

/* .image_and_text .row {
  align-items: center;
  padding: 30px 100px;
} */

.content-col {
  padding: 0px 96px !important;
}

.image_and_text .btn-container {
  margin-top: 40px;
}

@media only screen and (max-width: 991px) {
  .image_and_text .content-wrapper {
    padding: 30px;
    flex-direction: column-reverse !important;
  }
  .image_and_text .content-wrapper .content {
    max-width: none;
  }
}


/*** --- YOUTUBE VIDEO --- ***/


.content-block.youtube_video iframe {
  width: 100%;
  border-radius: var(--border-radius);
}




/*** APP SECTION ***/

.content-block.app_section {
  padding-top: 100px;
  padding-bottom: 0px;
}

.content-block.app_section .row {
  position: relative;
}

.content-block.app_section .img-container {
  display: flex;
  align-items: flex-end;
}

.content-block.app_section img.app-img {
  position: relative;
  object-fit: contain;
}

.app-content {
  padding-bottom: 100px;
}

.apps-wrapper {
  display: flex;
  grid-gap: 16px;
  margin: 40px 0px;
}


.apps-wrapper img {
  max-width: 200px;
}
.heading-border {
  height: 50px;
  width: 100%;
}

.heading-border hr {
  height: 2px;
  background-color: #01FF48;
  border: 0;
  position: absolute;
  margin: 24px 0px;
  width:100%;
}

@media only screen and (max-width: 768px) {
  .heading-border hr {
    left: 0 !important;
  }
}

@media only screen and (min-width: 992px) {
  .content-block.app_section .heading-border hr {
    width: calc(100% + 50px);
  }
}




/*** --- ICON CARDS --- ***/



.icon-card .card-content {
  grid-gap: 24px;
}

.icon-card .btn2 {
  text-align: center;
  margin-top: auto;
}

.icon-card img {
  max-height: 32px;
  width: fit-content;
}

/*** --- IMAGE CARDS --- ***/



.image-card .card-content {
  grid-gap: 16px;
  text-align: center;
  height: 100%;
}

.image-card .card-content * {
  margin-bottom: 0;
}

.image-card .btn2 {
  margin-top: auto;
}

/*** --- ICON LIST & IMAGE --- ***/

.content-block.icon_list_and_image .container {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}

.icon-list-item {
  display: flex;
  align-items: center;
  grid-gap: 24px;
}

.icon-list-item img {
  max-width: 32px;
}

.list-grid, .image-btn-wrapper {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.list-grid {
  row-gap: 40px;
}

.image-btn-wrapper {
  align-items: center;
  row-gap: 24px;

}

@media only screen and (min-width: 992px) {
  .list-grid {
    margin-bottom: 0px;
  }
  .image-btn-wrapper, .list-grid {
    padding: 58px;
  }
  .icon-list-item img {
    max-width: 80px;
  }
}


/*** --- PRICING CARDS --- ***/


.content-block.pricing_cards .pricing-heading {
  font-weight: 700;
}

.content-block.pricing_cards .pricing-heading span {
  color: var(--neon-green);
  font-size: 56px;
}

.content-block.pricing_cards .product-title {
  border: 1px solid var(--neon-green);
  border-inline: none;
  font-weight: 700;
  padding: 8px 0px;
  width: 100%;
  margin-bottom: 15px;
}

.content-block.pricing_cards li.feature {
  background: url(/static/common/images/no-nonsense-waf/chk.png) no-repeat left top 4px;
  display: inline-block;
  padding: 0 32px;
  background-size: 17px;
  color: white;
  margin: 5px 0 14px;
  font-size: 18px;
}

.content-block.pricing_cards .pricing-card {
  position: relative;
}

.content-block.pricing_cards .pricing-card .btn2 {
  position: absolute;
  bottom: -30px;
}

.content-block.pricing_cards .grid-one {
  row-gap: 60px;
}



.content-block.pricing_cards .pricing-card .card-content {
  padding: 50px 30px 73px;
  max-width: 740px;
  margin: 0px auto;
}


/*** --- CARD CAROUSEL --- ***/



.content-block.card_carousel .item {
  background-color: white;
  border-right: var(--right-border);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 40px;
  row-gap: 24px;
}

.content-block.card_carousel .item h4 {
  color: black;
  margin: 0;
}

.content-block.card_carousel .item img {
  width: 170px;
}


/*** --- LOGO CAROUSEL --- ***/




.owl-carousel {
  position: relative;
}

.content-block.logo_carousel .item {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: end;
  padding: 0px 20px;
}
.content-block .owl-carousel {
  padding: 0px 50px;
}
.content-block .owl-carousel .owl-nav button {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  background-color: var(--neon-green) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--neon-green) !important;
  transition: background-color 0.3s ease-in-out;
}

.content-block .owl-carousel .owl-nav button:hover {
  background-color: white !important;
}

.content-block .owl-carousel .owl-nav button span {
  font-size: 0px;
  width: 10.5px;
  height: 13.5px;
  display: block;
  background-size: 7px 14px;
  background-repeat: no-repeat;
}


.content-block .owl-carousel .owl-nav button.owl-next {
  right: 0px;
}

.content-block .owl-carousel .owl-nav button.owl-next span {
  background-image: url(../img/blocks/black-arrow-right.svg);
  width: 6.5px;
}

.content-block .owl-carousel .owl-nav button.owl-prev {
  left: 0px;
}

.content-block .owl-carousel .owl-nav button.owl-prev span {
  background-image: url(../img/blocks/black-arrow.svg);
}





/*** --- ACCORDION / FAQ --- ***/


.content-block .faqin {
  width: 100%;
  margin-top: 0;
}

.content-block .faqin .card-header {
  padding: 20px 32px;
  transition: .2s ease;
}

.content-block .faqin .card .card-body {
  padding: 0px 32px 32px 32px;
}

.content-block .faqin .card button {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 2px 16px 2px 0;
    margin-left: 0;
    font-weight: 700;
    font-size: 20px;
    color: #333;
    background-image: url(../../../../static/common/images/faqonarw.png) !important;
    text-transform: none;
    white-space: normal;
    background-position: center right !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
}

.content-block .faqin .card button.collapsed {
  background-image: url(../../../../static/common/images/faqoffarw.png) !important;
  background-position: center right !important;
  background-color: transparent !important;

}


.content-block .faqin .card {
    width: 100%;
    background: #fafbfb;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 9px;
    border: 2px solid #f2f7fa;
    transition: 0.5s all ease-in-out;
}

.content-block .faqin .card.active-card {
  background-color: #F2F2F2;
  border: 1px solid rgba(0, 0, 0, .15) !important;
}

.content-block .faqin .card.active-card .card-header  {
  background-color: #F2F2F2;
}

/* .content-block .faqin .card button.collapsed {
    background: url(../../../../static/common/images/faqoffarw.png) no-repeat top 10px right !important;
} */

.content-block .faqin .card-body a {
  color: var(--medium-green);
}


.content-block .faqin .collapse.show {
    display: block;
    height: 100%;
}


.content-block .faqin .collapse {
    display: none;
}

.content-block .faqin .collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;

}

@media only screen and (max-width: 768px) {
  .content-block .faqin .card button {
    font-size: 16px;
  }
}

/*** --- CONTACT COLUMNS --- ***/

.content-block.contact_columns .container {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}

.contact-content h3, .contact-content h4, .contact-content h5, .contact-content h6 {
  margin-bottom: 8px;
}

.content-block.contact_columns .small-wrapper {
  align-items: flex-start;
  justify-content: center;
  row-gap: 24px;
  padding: 56px;
}

.content-block.contact_columns .large-wrapper {
  padding: 0;
  min-height: 650px;
  overflow: hidden;
}

.content-block.contact_columns .formSection {
  padding: 56px;
}

.formSection, .mapSection {
  height: 100%;
}

.formSection form {
  padding: 0;
}

.mapSection iframe {
  width: 100%;
  height: 100%;
}

.contact-options {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}

.contact-options .contact-item {
  display: flex;
  align-items: center;
  grid-gap: 8px;
}

.contact-item img {
  width: 24px;
}

.contact-item a {
  color: black;
}

.social-links {
  display: flex;
  align-items: center;
  grid-gap: 16px;
}

.social-links p {
  padding-bottom: 0;
}

.social-links img {
  width: 20px;
  height: 20px;
}


.social-links p {
  margin-bottom: 0;
}



/*** --- PRICE TABLE --- ***/

.content-block.price_table .labels {
  display: flex;
  grid-gap: 24px;
  row-gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}


.content-block.price_table .pricing-wrapper h4 {
  font-weight: 700;
  font-size: var(--font-h3);
}
.pricing-label {
  display: flex;
  grid-gap: 8px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  background-color: white;
  padding: 8px 12px;
  align-items: center;
  color: black;
  line-height: normal;
}

.pricing-label img {
  width: 20px;
}




.pricing-toggle {
  display: flex;
  justify-content: space-between;
  background: white;
  padding: 12px;
  border-radius: var(--border-radius);
  gap: 0.5rem;
  max-width: 600px;
  width: 100%;
  margin: 24px auto 50px auto;
}

.toggle-option {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px 16px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 8px;
  color: var(--dark-green);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: normal;
  row-gap: 4px;
}

.toggle-option:focus {
  background-color: var(--medium-green);
}

.toggle-option small {
  display: block;
  font-weight: normal;
  color: #6b8b7c;
  line-height: normal;
}

.toggle-option.active {
  background: var(--dark-green);
  color: white;
}

.toggle-option.active small {
  color: white;
  opacity: .7;
}


.pricing-plans {
  display: none;
}

.plan-card {
  background-color: white;
  padding: 32px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0, 0.05);
  height: 100%;
}

.plan-card p {
  padding-bottom: 0;
  min-height: 45px;
}

.plan-content {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}

.plan-card hr {
  border: none;
  height: 1px;
  margin: 0px;
  background-color: var(--faded-green);
}

.pricing-plans:not(.hidden) {
  display: block;
}

.plan-features, .plan-specs {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
.plan-features .feature, .plan-specs .spec {
  display: flex;
  grid-gap: 16px;
  align-items: center;
  color: var(--dark-green);
  font-weight: 500;
}

.plan-specs .spec {
  font-weight: 600;
}

.plan-specs .spec .spec-icon {
  width: 32px;
  height: 32px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.price-wrapper {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  justify-content: space-between;
  align-items: flex-end;
  padding: 20px 0px;
}

.plan-card .btn2 {
  margin: 20px 0px 40px 0px;
  width: 100%;
  text-align: center;
}

.price-label {
  background-color: var(--faded-green);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 8px;
  grid-gap: 8px;
  font-size: 14px;
  width: fit-content;
  color: black;
  font-weight: 600;
  line-height: normal;
}

.price-label img {
  width: 20px;
}

.card-price h5 {
  font-size: var(--font-h2);
  font-weight: 600;
  font-family: 'Poppins', 'sans-serif';
  line-height: 1;
}

.card-price span {
  font-size: 12px;
  color: black;
  font-weight: 400;
}

.plan-features .feature-icon {
  width: 32px;
  height: 32px;
  background-color: var(--faded-green);
  color: var(--dark-green);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.plan-features .feature.not-included {
  color: var(--blue-gray);
}

.plan-features .feature.not-included .feature-icon {
  background-color: var(--light-gray);
}

.content-block.price_table .owl-carousel {
  padding: 0px 24px;
  display: flex !important;
  flex-direction: row;
  justify-content: center;
}

.content-block.price_table .owl-carousel .owl-stage {
  display: flex;
}

.content-block.price_table .owl-carousel .owl-nav button {
  background-color: white !important;
  border-radius: 6px;
  border: 1px solid var(--dark-green) !important;
  height: 48px;
  width: 48px;
}

.content-block.price_table .owl-carousel .owl-nav button.disabled {
  background-color: #e6e6e6 !important;
  border-color: #cccccc !important;
}

.content-block.price_table .owl-carousel .owl-nav button.owl-prev.disabled span {
  background-image: url(../img/blocks/gray-arrow.svg);

}

.content-block.price_table .owl-carousel .owl-nav button.owl-next.disabled span {
  background-image: url(../img/blocks/gray-arrow-right.svg);
}

@media only screen and (min-width: 992px) {
  .content-block.price_table .owl-carousel:not(.carousel-desktop) {
    padding: 0px;
  }
}

@media only screen and (max-width: 601px) {
  .pricing-toggle .toggle-option {
    padding: 12px 8px;
    font-size: 14px;
  }
  .content-block.price_table .labels {
    grid-gap: 12px;
  }

  .content-block.contact_columns .formSection, .content-block.contact_columns .small-wrapper {
    padding: 30px;
  }
}