@charset "UTF-8";
/*colors*/
/*gradients*/
/*fonts*/
/*screen sizes*/
.alignwide {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

a.black {
  color: #222;
  font-family: "Ubuntu", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.28px;
  text-decoration: none;
}

.oc-btn {
  display: inline-block;
  border-radius: 90px;
  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}

.btn-sm {
  padding: 11px 22px;
}

.btn-lg {
  padding: 24px 36px;
}

.primary-btn {
  background-color: #F9F9FB;
  color: #222;
  text-decoration: none !important;
}
.primary-btn:hover {
  filter: brightness(0.9);
  color: #222;
}

.secondary-btn {
  background-color: #222;
  color: #F9F9FB;
  text-decoration: none !important;
}
.secondary-btn:hover {
  filter: brightness(0.9);
  color: #F9F9FB;
}

.outline-btn {
  color: #F9F9FB;
  text-decoration: none !important;
  background: transparent;
  border: 0.5px solid #F9F9FB;
}
.outline-btn:hover {
  background: #222;
  color: #F9F9FB;
}

.link-btn {
  color: #F9F9FB;
  text-decoration-line: underline;
}

.icon-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  width: 65px;
  height: 65px;
  background-color: #F9F9FB;
  color: #222;
  text-decoration: none !important;
  cursor: pointer;
}
.icon-btn:hover {
  filter: brightness(0.9);
  color: #222;
}

h1,
h2,
h3,
h4,
h5,
h6,
.eyebrow,
.label,
p {
  font-family: "Ubuntu", sans-serif;
  font-style: normal;
}

h1,
h2,
.eyebrow,
.label {
  line-height: 100%;
}

h1 {
  font-weight: 500;
  letter-spacing: -1.8px;
}

h2 {
  font-weight: 500;
  letter-spacing: -1.12px;
}

h3 {
  font-weight: 500;
  line-height: 120%;
}

h4 {
  font-weight: 500;
  line-height: 120%;
}

.eyebrow {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.label {
  font-size: 14px;
  font-weight: 400;
}

p.xl {
  font-size: 46px;
  line-height: 115%;
  letter-spacing: -0.92px;
}
p.lg {
  font-size: 21px;
  line-height: 130%;
  letter-spacing: -0.42px;
}
p.md {
  font-size: 18px;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.36px;
}
p.base {
  font-size: 17px;
  line-height: 140%;
  letter-spacing: -0.34px;
}
p.sm {
  font-size: 15px;
  line-height: 130%;
  letter-spacing: -0.3px;
}

@media (min-width: 200px) {
  h1 {
    font-size: 41px;
  }
  h2 {
    font-size: 37px;
  }
  h3 {
    font-size: 31px;
  }
  h4 {
    font-size: 26px;
  }
}
@media (min-width: 1024px) {
  h1 {
    font-size: 90px;
  }
  h2 {
    font-size: 56px;
  }
  h3 {
    font-size: 37px;
  }
  h4 {
    font-size: 26px;
  }
}
h1, .h1 {
  font-size: 41px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
@media (min-width: 769px) {
  h1, .h1 {
    font-size: 70px;
  }
}

h2, .h2 {
  font-family: Ubuntu;
  font-size: 41px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
}
@media (min-width: 769px) {
  h2, .h2 {
    font-size: 56px;
  }
}

h3, .h3 {
  font-size: 37px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
}
@media (min-width: 769px) {
  h3, .h3 {
    font-size: 37px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
  }
}

p {
  font-size: 17px;
}
@media (min-width: 769px) {
  p {
    font-size: 22px;
  }
}

p.xl {
  font-family: Ubuntu;
  font-style: normal;
  font-weight: 400;
  font-size: 21px;
  line-height: 27.3px;
  letter-spacing: -0.42px;
}
@media (min-width: 769px) {
  p.xl {
    font-size: 46px;
    line-height: 52.9px;
    letter-spacing: -0.92px;
  }
}

p.small {
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.5px;
  letter-spacing: -0.3px;
}

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

a.btn {
  padding: 24px 36px;
}

body.page-template-page-faq #breadbox {
  padding-top: 60px;
}
body.page-template-page-faq #breadbox ul.breadcrumb {
  display: none;
}
body.page-template-page-faq #breadbox .col-12.dd-breadcrumb {
  justify-content: end;
}

.oceanic-site-footer {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  color: var(--color-primary-oceanic-white, #F9F9FB);
}
.oceanic-site-footer a:not(.oc-btn) {
  color: var(--color-primary-oceanic-white, #F9F9FB);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.footer-top,
.footer-bottom {
  display: grid;
  justify-content: space-between;
  align-items: start;
}

.footer-top {
  margin-bottom: 60px;
}

.footer-col-1 p {
  color: #F9F9FB;
}

/*gravity form styles


.gform_fields {
    position: relative;
}

.email-form input[type=email] {
    border-radius: 90px;
    border: 1px solid rgba(255, 255, 255, 0.50);
    background: $oceanic-white-15;
    padding: 16px 12px;
    color: $color-primary-oceanic-white;
    max-width: 445px !important;


    &::placeholder,
    &:active,
    &:focus {
        color: $color-primary-oceanic-white;
        font-family: $font;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        border-color: $color-primary-oceanic-white
    }

}

.email-form .gform-button {
    position: absolute;
    top: 38%;
}
*/
.footer-form-holder .gform-body,
.footer-form-holder .gform_body {
  position: relative;
  margin: 24px 0 26px 0 !important;
}

.footer-form-holder .gform-field-label {
  display: none;
}

.footer-form-holder .gform-body .gfield--type-email input,
.footer-form-holder .gform_body .gfield--type-email input {
  border: 1px solid #FFF;
  border-radius: 50px;
  color: #FFF;
  background-color: rgba(255, 255, 255, 0.3);
}

.footer-form-holder .gform-body .gfield--type-email input::-moz-placeholder,
.footer-form-holder .gform_body .gfield--type-email input::-moz-placeholder {
  color: #FFF;
}

.footer-form-holder .gform-body .gfield--type-email input::-moz-placeholder, .footer-form-holder .gform_body .gfield--type-email input::-moz-placeholder {
  color: #FFF;
}

.footer-form-holder .gform-body .gfield--type-email input::placeholder,
.footer-form-holder .gform_body .gfield--type-email input::placeholder {
  color: #FFF;
}

.footer-form-holder .gform-body #field_submit,
.footer-form-holder .gform_body #field_submit {
  position: absolute;
  right: 0;
  top: 8px;
  padding: 0 10px;
}

.footer-form-holder .gform-body #field_submit .gform-button,
.footer-form-holder .gform_body #field_submit .gform-button {
  background-color: transparent;
  color: transparent;
  border: none;
  height: 100%;
  top: 7px;
  position: relative;
  z-index: 5;
}

.footer-form-holder .gform_fields {
  position: relative;
  display: inline-block !important;
  width: 100%;
  max-width: 380px;
}

.social {
  display: flex;
  align-items: center;
  gap: 16px;
}
.social p {
  font-size: 16px;
  padding: 0;
}

.footer-col-2 {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 58px;
}

.footer-btn-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.footer-nav-menu .menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  padding: 0;
}

footer .site-navigation ul.menu a {
  padding: 0 !important;
}

.footer-nav-menu p {
  color: var(--color-primary-oceanic-white, #F9F9FB);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.col-1-btm p {
  color: var(--color-primary-oceanic-white, #F9F9FB);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.col-1-btm a {
  text-decoration: underline;
}

.col-1-btm img {
  max-width: 245px;
}

.col-2-btm,
.footer-col-2 {
  align-self: end;
  justify-self: end;
}

.partner-logos {
  display: flex;
  gap: 16px;
}

.partner-logos img {
  max-width: 80px;
}

@media (min-width: 200px) {
  .oceanic-site-footer {
    padding: 31px 20px;
  }
  .footer-top,
  .footer-bottom {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    row-gap: 50px;
  }
  .footer-col-2,
  .col-2-btm,
  .partner-logos {
    flex-wrap: wrap;
  }
  .footer-col-1 p {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  .footer-col-2 {
    margin-top: 50px;
  }
  .footer-col-2,
  .col-2-btm {
    justify-self: start;
  }
}
@media (min-width: 1024px) {
  .oceanic-site-footer {
    padding: 45px 35px;
  }
  .footer-top,
  .footer-bottom {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-bottom {
    row-gap: 0;
  }
  .footer-col-2,
  .col-2-btm,
  .partner-logos {
    flex-wrap: nowrap;
  }
  .footer-col-1 p {
    max-width: 445px;
  }
  .footer-col-2 {
    margin-top: 0;
    align-self: start;
  }
  .footer-col-2,
  .col-2-btm {
    justify-self: end;
  }
}
section.oceanic-anchor-link {
  text-align: center;
  border-top: 1px solid rgba(162, 162, 162, 0.35);
  border-bottom: 1px solid rgba(162, 162, 162, 0.35);
  padding-top: 12px;
  padding-bottom: 12px;
  position: fixed;
  left: 0;
  top: 71px;
  width: 100%;
  z-index: 4;
  background-color: #FFF;
}
@media (min-width: 769px) {
  section.oceanic-anchor-link {
    top: 110px;
  }
}
section.oceanic-anchor-link ul {
  display: flex;
  align-items: center;
  justify-content: start;
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  white-space: nowrap;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 769px) {
  section.oceanic-anchor-link ul {
    justify-content: center;
  }
}
section.oceanic-anchor-link ul li {
  color: #A2A2A2;
  font-family: Ubuntu;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  margin-right: 16px;
}
section.oceanic-anchor-link ul li:last-child {
  margin-right: 0;
}
section.oceanic-anchor-link ul li a {
  color: #222;
  font-family: Ubuntu;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: none;
  transition: color 0.5s;
}
@media (min-width: 769px) {
  section.oceanic-anchor-link ul li a {
    font-size: 16px;
  }
}
section.oceanic-anchor-link ul li a:hover {
  color: #0075FF;
}
section.oceanic-anchor-link ul::-webkit-scrollbar {
  display: none;
  /* Hides the scrollbar */
}
section.oceanic-anchor-link::after {
  content: "";
  /* No content for the pseudo-element */
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  /* Width of the gradient area */
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
  /* Gradient from transparent to white */
  pointer-events: none;
}

section.subscription-hero {
  background: linear-gradient(180deg, #FFF 0%, #DFDFDF 100%), linear-gradient(336deg, #000 15.29%, #001D3E 84.71%);
  padding-top: 47px;
}
@media (min-width: 769px) {
  section.subscription-hero {
    padding-top: 83px;
  }
}
section.subscription-hero .ql-block {
  font-family: Ubuntu;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  margin-bottom: 16px;
}
@media (min-width: 769px) {
  section.subscription-hero .ql-block {
    letter-spacing: -0.34px;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 16px;
  }
}
section.subscription-hero ul, section.subscription-hero ol {
  margin-top: 22px;
}
section.subscription-hero ul li, section.subscription-hero ol li {
  font-family: Ubuntu;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  margin-bottom: 14px;
}
@media (min-width: 769px) {
  section.subscription-hero ul li, section.subscription-hero ol li {
    letter-spacing: -0.34px;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 14px;
  }
}
section.subscription-hero h1 span.blue, section.subscription-hero h2 span.blue {
  color: #0075ff;
}
section.subscription-hero h2, section.subscription-hero p {
  color: #222;
}
section.subscription-hero a.btn {
  background-color: transparent;
  color: #222;
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  border: none;
  margin-left: 0;
  padding-left: 0 !important;
}
@media (min-width: 769px) {
  section.subscription-hero a.btn {
    background-color: #222;
    color: #FFF;
    text-decoration: none;
    padding-left: 36px !important;
  }
}
section.subscription-hero .left-side {
  padding-bottom: 45px;
}
@media (min-width: 769px) {
  section.subscription-hero .left-side {
    padding-bottom: 102px;
  }
}
section.subscription-hero .left-image {
  max-height: 164px;
  height: 164px;
  display: inline-block;
}
section.subscription-hero .mobile-link img {
  height: 50px;
  width: auto;
}
section.subscription-hero .right-image {
  width: auto;
  display: inline-block;
}
section.comps {
  background: #F9F9FB;
  padding-top: 60px;
  padding-bottom: 50px;
}
@media (min-width: 769px) {
  section.comps {
    padding-top: 177px;
  }
}
section.comps .comps-holder {
  background: var(--bg-dark-gradient, linear-gradient(336deg, #000 15.29%, #001D3E 84.71%));
}
@media (min-width: 769px) {
  section.comps .comps-holder {
    background: #FFF;
  }
}
section.comps .comps-holder .top-row > div {
  padding-top: 86px;
  border-right: 1px solid rgba(162, 162, 162, 0.15);
  padding-bottom: 12px;
}
section.comps .comps-holder .top-row > div p {
  font-size: 17px;
  color: #222;
}
section.comps .comps-holder .top-row > div h3, section.comps .comps-holder .top-row > div .h3 {
  margin-bottom: 10px;
}
section.comps .comps-holder .top-row > div h3 span, section.comps .comps-holder .top-row > div .h3 span {
  color: #222;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 16px;
}
section.comps .comps-holder .top-row > div .best-value {
  position: absolute;
  top: 23px;
  left: 11px;
}
section.comps .comps-holder .top-row > div .best-value span {
  color: #F9F9FB;
  font-size: 14px;
  font-weight: 500;
  position: relative;
}
section.comps .comps-holder .top-row > div .best-value span::after {
  content: "";
  background: var(--Bright-Gradient, linear-gradient(90deg, #B8FF81 0%, #0075FF 73%, #002856 100%));
  border-radius: 90px;
  width: 100%;
  height: 5px;
  display: block;
  top: 26px;
  position: absolute;
}
section.comps .comps-holder .top-row > div span {
  color: #909090;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}
section.comps .comps-holder .top-row > div span.premium {
  color: #A2A2A2;
}
section.comps .comps-holder .top-row > div .select-wrapper {
  position: relative;
}
section.comps .comps-holder .top-row > div .select-wrapper::after {
  content: "⌄";
  position: absolute;
  right: 20px;
  top: 38%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #FFF;
  z-index: 1;
  pointer-events: none;
  padding: 5px;
}
section.comps .comps-holder .top-row > div .select-wrapper #cost-selector {
  background-color: #0075FF;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -moz-text-align-last: center;
       text-align-last: center;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible !important;
  position: relative;
}
section.comps .comps-holder .row-headline {
  background-color: #F1F1F1;
  padding: 10px;
}
section.comps .comps-holder .row-headline h5 {
  color: #222;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0;
}
section.comps .comps-holder .feature-row > div {
  border-right: 1px solid rgba(162, 162, 162, 0.15);
  border-bottom: 1px solid rgba(162, 162, 162, 0.15);
}
section.comps .comps-holder .feature-row > div span {
  color: #F9F9FB;
  font-size: 16px;
  line-height: 16px;
  border-bottom: 1px solid rgba(162, 162, 162, 0.15);
}
@media (min-width: 769px) {
  section.comps .comps-holder .feature-row > div span {
    color: #222;
  }
}
section.comps .comps-holder .feature-row > div.premium-col {
  border-bottom: 1px solid rgba(162, 162, 162, 0.15);
}
@media (min-width: 769px) {
  section.comps .comps-holder .feature-row > div.premium-col {
    border-bottom: 1px solid #A2A2A2;
  }
}
section.comps .comps-holder .feature-row .circle-container {
  display: inline-flex;
  align-items: center;
  position: relative;
  justify-content: center;
  transform: translateY(-50%);
  top: 50%;
}
section.comps .comps-holder .feature-row .circle {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
  position: relative;
}
section.comps .comps-holder .feature-row .circle.filled {
  background-color: #0075FF;
  border: none;
}
section.comps .comps-holder .feature-row .circle.empty {
  background-color: transparent;
  border: 2px solid #A2A2A2;
}
section.comps .comps-holder .feature-row .circle.empty::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 50%;
  border: 2px solid #A2A2A2;
  background-color: #A2A2A2;
}
section.comps .comps-holder .col-name .tippy {
  position: absolute;
  width: 100%;
  z-index: 3;
  text-decoration: none;
  border: none;
}
section.comps .comps-holder .col-name .tippy svg {
  margin-left: 8px;
}
section.comps .comps-holder .col-name .tippy svg path {
  fill: #0075FF;
}
@media (min-width: 769px) {
  section.comps .comps-holder .col-name .tippy svg path {
    fill: #002856;
  }
}
section.comps .comps-holder .col-name .tippy .tooltip-text {
  position: absolute;
  border: 1px solid #000;
  padding: 17px;
  top: -40px;
  background-color: #FFF;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
  display: none;
  color: #000;
}
section.comps .comps-holder .col-name span.with-tool {
  cursor: pointer;
}
section.comps .comps-holder .col-name span.with-tool:hover .tooltip-text {
  display: block;
}
@media (min-width: 769px) {
  section.comps .comps-holder .premium-col {
    background-color: #001D3E;
  }
}
section.comps .comps-holder .premium-col h2, section.comps .comps-holder .premium-col h3, section.comps .comps-holder .premium-col h4, section.comps .comps-holder .premium-col p, section.comps .comps-holder .premium-col span {
  color: #F9F9FB !important;
}
section.comps .mobile-card {
  border: 1px rgba(162, 162, 162, 0.35);
  background: var(--color-primary-oceanic-white, #F9F9FB);
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.15);
}
section.comps .mobile-card .pricing h4 {
  font-size: 28px;
  font-weight: 500;
  color: #0075FF;
  margin-bottom: 7px;
}
section.comps .mobile-card .pricing h4 span {
  color: #222;
  font-size: 28px;
}
section.comps .mobile-card .pricing h4.free {
  color: #222;
}
section.comps .mobile-card .pricing span {
  color: #909090;
  font-size: 12px;
  font-weight: 400;
}
section.comps .mobile-card .one-feature {
  padding-top: 8px;
  margin-top: 12px;
  border-top: 1px solid rgba(162, 162, 162, 0.15);
  display: flex;
  justify-content: space-between;
  width: 100%;
}
section.comps .btn.btn-primary {
  background-color: #222;
}
section.comps .wpml-ls-statics-shortcode_actions {
  display: block;
  width: 100%;
}
section.comps button.show-more {
  border: none;
  background-color: transparent;
  text-decoration: underline;
  font-size: 14px;
  padding-left: 0;
  padding-right: 0;
}

section.accordion-list {
  padding-top: 45px;
  padding-bottom: 45px;
  background-color: #F9F9FB;
}
section.accordion-list h2 {
  color: #222;
}
section.accordion-list p.title {
  font-size: 21px;
  font-weight: 400;
  line-height: 27.3px;
  letter-spacing: -0.42px;
  cursor: pointer;
  position: relative;
}
section.accordion-list p.title::after {
  content: "";
  display: inline-block;
  height: 24px;
  width: 24px;
  background-size: cover;
  background-position: center;
  position: absolute;
  right: 0;
  background-image: url("/wp-content/themes/Oceanic_2022/images/icons/arrow-right.svg");
  transform: rotate(0deg);
  transition: transform 0.3s;
}
section.accordion-list p.title.active::after {
  transform: rotate(45deg);
}
section.accordion-list .inner-row:nth-child(odd) {
  background: rgba(162, 162, 162, 0.15);
}
section.accordion-list .inner-row:first-child {
  margin-top: 50px;
}
section.accordion-list .accordion-row {
  margin-bottom: 30px;
  border-bottom: 1px solid #DCDCDC;
  padding-bottom: 12px;
}
section.accordion-list .the-rows {
  display: none;
}
section.accordion-list .the-rows p {
  font-size: 16px;
}
@media (min-width: 769px) {
  section.accordion-list .the-rows p {
    font-size: 18px;
  }
}
section.accordion-list .the-rows ul li {
  font-size: 16px;
  font-family: "Ubuntu", sans-serif;
  font-style: normal;
}
@media (min-width: 769px) {
  section.accordion-list .the-rows ul li {
    font-size: 18px;
  }
}
section.accordion-list .inner-row .left-content p {
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 23.8px;
  letter-spacing: -0.34px;
  margin-bottom: 0;
}
section.accordion-list .inner-row .right-content p {
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.5px;
  margin-bottom: 0;
}
section.accordion-list .inner-row.row-1 {
  margin-top: 30px;
}
section.accordion-list .btn-primary {
  background-color: #222;
  font-size: 14px;
  margin-left: 4px;
  margin-right: 4px;
  padding: 6px 14px;
  transition: background-color 0.3s;
}
section.accordion-list .btn-primary:hover {
  background-color: #0075FF;
}

#accordion .card h4.panel-title button {
  text-align: left;
}

section.paragraph-text {
  padding: 45px 0;
  background-color: #F1F1F1;
}
@media (min-width: 769px) {
  section.paragraph-text {
    padding: 52px 0;
  }
}
section.paragraph-text p {
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.5px;
  letter-spacing: -0.3px;
}
section.paragraph-text * {
  color: #222;
}

section.testimonial-picker {
  padding: 45px 0;
}
@media (min-width: 769px) {
  section.testimonial-picker {
    padding: 90px 0;
  }
}
section.testimonial-picker .one-testy {
  margin-bottom: 16px;
}
@media (min-width: 769px) {
  section.testimonial-picker .one-testy {
    margin-bottom: 37px;
  }
}
section.testimonial-picker .one-testy .inner {
  background: var(--bg-dark-gradient, linear-gradient(336deg, #000 15.29%, #001D3E 84.71%));
  border-radius: 12px;
  height: 100%;
}
section.testimonial-picker .one-testy P {
  color: #F9F9FB;
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 23.8px;
  letter-spacing: -0.34px;
}
section.testimonial-picker .one-testy span.name {
  color: #A2A2A2;
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 23.8px;
  letter-spacing: -0.34px;
}
section.testimonial-picker .one-testy span.type {
  color: #A2A2A2;
  font-size: 15px;
  font-style: normal;
  font-weight: 300;
  line-height: 19.5px;
  letter-spacing: -0.3px;
}

section.package-hero {
  margin-top: 110px;
  padding-top: 4px;
  margin-left: -15px;
  margin-right: -15px;
  background-size: 360%;
  background-repeat: no-repeat;
  background-position: bottom;
}
@media (min-width: 769px) {
  section.package-hero {
    padding-top: 64px;
  }
}
section.package-hero .woocommerce-Price-amount bdi {
  display: block;
  margin-top: 10px;
}
section.package-hero .review-count {
  font-size: 14px;
  color: #002856;
  font-weight: 300;
  display: flex;
  align-items: center;
}
section.package-hero .review-count img {
  margin-left: 4px;
  margin-right: 4px;
}
section.package-hero .review-count span {
  color: #002856;
  font-size: 16px;
  font-weight: 500;
}
section.package-hero h3 {
  color: #A2A2A2;
  font-size: 42px;
  font-style: italic;
  font-weight: 500;
  line-height: 50.4px;
}
section.package-hero h3 del {
  display: block;
  font-size: 14px;
  line-height: 1;
}
section.package-hero h3 ins {
  font-size: 26px;
  text-decoration: none;
}
section.package-hero .the-image {
  height: auto;
  max-width: 100%;
  max-height: 455px;
  width: auto;
}
section.package-hero .included p {
  color: #222;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.34px;
  margin-bottom: 5px;
}
section.package-hero .included ul li {
  color: #222;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.34px;
}
section.package-hero .btn {
  background-color: #222;
  color: #FFF;
  width: 100%;
  opacity: 1;
  transition: background-color 0.3s ease;
}
section.package-hero .btn:hover {
  background: var(--color-secondary-bright-blue, #0075FF);
}

.single-product .float-button {
  position: fixed;
  right: 70px;
  bottom: 30px;
  background-color: #222;
  color: #FFF;
  width: auto;
  opacity: 1;
  z-index: 999;
  display: none;
  transition: background-color 0.3s ease;
}
.single-product .float-button:hover {
  background: var(--color-secondary-bright-blue, #0075FF);
}

section.related-products {
  background-color: #F8F8FA;
  margin-left: -15px;
  margin-right: -15px;
}
section.related-products .the-products .slick-slide {
  padding: 10px;
}
section.related-products .the-products .slick-track {
  width: 100%;
}
section.related-products .the-products .one-card {
  width: auto;
}
section.related-products .the-products .one-card .inner {
  background: radial-gradient(50% 50% at 50% 50%, #F1F1F1 0%, #EFEFEF 100%);
  height: 100%;
}
section.related-products .the-products .one-card .inner .image-holder {
  position: relative;
  height: 240px;
  overflow: hidden;
}
@media (min-width: 767px) {
  section.related-products .the-products .one-card .inner .image-holder {
    height: 285px;
  }
}
section.related-products .the-products .one-card .inner .image-holder img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
section.related-products .the-products .one-card .inner .content .title {
  color: #222;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}
section.related-products .the-products .one-card .inner .content .price {
  font-size: 28px;
  font-weight: 700;
  color: #222;
}
section.related-products .the-products .one-card .inner .content .btn {
  background-color: #222;
  color: #fff;
  transition: opacity 0.3s;
}
@media (min-width: 767px) {
  section.related-products .the-products .one-card .inner .content .btn {
    opacity: 0;
  }
}
section.related-products .the-products .one-card .inner .content .btn:hover {
  background-color: #0075FF;
}
section.related-products .the-products .one-card:hover .btn {
  opacity: 1 !important;
}
section.related-products .slick-dots {
  display: flex !important;
  justify-content: flex-start;
  padding-left: 0;
  width: 100%;
  height: 6px;
  position: relative;
}
section.related-products .slick-dots li {
  display: block;
  /* Ensure li takes up full height */
  width: auto;
  /* Remove fixed width for each dot */
  flex-grow: 1;
  /* Let dots grow to fill the available space */
  margin: 0;
  height: 2px;
  background: var(--oceanic-black-15, rgba(34, 34, 34, 0.15));
}
section.related-products .slick-dots li.slick-active {
  background-color: #222;
}
section.related-products .slick-dots li button {
  display: none;
}
section.related-products .slick-track,
section.related-products .slick-slide,
section.related-products .one-card {
  box-sizing: border-box;
}

section.related-products .slick-slide {
  width: 33.3333333333%;
  /* For 4 slides visible */
  display: inline-block;
}
section.related-products .slick-slide:hover .btn {
  opacity: 1;
}

section.related-products .slick-track {
  display: flex !important;
  /* Ensures slides line up */
}

section.related-products .slick-list {
  overflow: hidden;
  width: 100%;
  /* Ensure full width for the slider container */
}

section.product-category-slider {
  padding-top: 20px;
  padding-bottom: 46px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  section.product-category-slider {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
section.product-category-slider .the-pills button {
  border-radius: 90px;
  border: none;
  background-color: #EDEDED;
  padding: 2px 10px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -0.28px;
}
section.product-category-slider .the-pills button.active {
  background-color: #0075FF;
  color: #F9F9FB;
}
@media (min-width: 768px) {
  section.product-category-slider .product-slider {
    right: -18px;
    position: relative;
    overflow: hidden;
  }
}
section.product-category-slider .product-slider .slick-slide {
  display: block;
  float: left;
  height: auto;
  /* Set flex-basis to 75vw (75% of viewport width) */
}
section.product-category-slider .product-slider .slick-track {
  display: flex;
}
section.product-category-slider .product-slider .product-slide {
  position: relative;
  height: 352px;
  display: flex;
  /* Use flexbox for the main card */
  flex-direction: column;
  /* Stack children vertically */
  justify-content: center;
  /* Center items vertically within the card */
  align-items: center;
  /* Center items horizontally in the card */
  padding: 0;
  /* Add padding to the card */
  background: radial-gradient(50% 50% at 50% 50%, #F1F1F1 0%, #EFEFEF 100%);
  margin: 5px;
  box-sizing: border-box;
  border-right: 14px solid #FFF;
}
@media (min-width: 768px) {
  section.product-category-slider .product-slider .product-slide {
    width: 335px;
    height: 402px;
  }
}
@media (min-width: 768px) {
  section.product-category-slider .product-slider .product-slide {
    border-right: 10px solid #fff;
    padding: 28px 18px;
  }
}
section.product-category-slider .product-slider .product-slide .inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Keep content at the top */
  align-items: center;
  /* Center content horizontally */
  flex: 1;
  background: radial-gradient(50% 50% at 50% 50%, #F1F1F1 0%, #EFEFEF 100%);
  height: 100%;
  padding: 28px 18px;
}
@media (min-width: 768px) {
  section.product-category-slider .product-slider .product-slide .inner {
    padding: 0;
  }
}
section.product-category-slider .product-slider .product-slide img {
  height: auto;
  width: 240px;
  margin-bottom: 10px;
  /* Add space between image and text */
  align-self: center;
  /* Center image horizontally */
}
section.product-category-slider .product-slider .product-slide .product-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: auto;
  padding-bottom: 40px;
}
@media (min-width: 768px) {
  section.product-category-slider .product-slider .product-slide .product-info {
    padding-bottom: 0;
  }
}
section.product-category-slider .product-slider .product-slide .product-name {
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
  margin: 0;
  color: #222;
}
@media (min-width: 768px) {
  section.product-category-slider .product-slider .product-slide .product-name {
    font-size: 16px;
    font-weight: 500;
  }
}
section.product-category-slider .product-slider .product-slide .product-price {
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.28px;
  margin: 0;
  color: #222;
  /* Remove default margin */
}
@media (min-width: 768px) {
  section.product-category-slider .product-slider .product-slide .product-price {
    font-size: 28px;
  }
}
section.product-category-slider .product-slider .product-slide div.buy-button {
  width: 100%;
  position: absolute;
  left: 0;
  background-color: #FFF;
  padding-top: 14px;
  bottom: 0;
}
section.product-category-slider .product-slider .product-slide div.buy-button a {
  background-color: #222;
  width: 100%;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.14px;
  padding-top: 10px;
  padding-bottom: 10px;
}
@media (min-width: 768px) {
  section.product-category-slider .product-slider .product-slide div.buy-button {
    display: none;
  }
}
section.product-category-slider .slider-buttons {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: none;
}
@media (min-width: 768px) {
  section.product-category-slider .slider-buttons {
    display: block;
  }
}
section.product-category-slider .slider-buttons button.next,
section.product-category-slider .slider-buttons button.prev {
  align-self: flex-end;
  border-radius: 90px;
  border: none;
  background-color: #222222;
  height: 60px;
  width: 60px;
  opacity: 1;
  transition: opacity 0.5s;
  position: absolute;
}
section.product-category-slider .slider-buttons button.next:hover,
section.product-category-slider .slider-buttons button.prev:hover {
  opacity: 0.8;
}
section.product-category-slider .slider-buttons button.next {
  right: 75px;
}
section.product-category-slider .slider-buttons button.prev {
  left: -6px;
  transform: rotate(180deg);
}
section.product-category-slider ul.slick-dots {
  position: absolute;
  bottom: -36px;
  left: 0;
  width: 100%;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
  padding-left: 10px;
  padding-right: 10px;
}
section.product-category-slider ul.slick-dots li {
  flex: 1;
  list-style: none;
  text-align: center;
}
section.product-category-slider ul.slick-dots li button {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  border: none;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s;
  overflow: hidden;
}
section.product-category-slider ul.slick-dots li.slick-active button {
  background-color: #002856;
}
@media (min-width: 768px) {
  section.product-category-slider ul.slick-dots {
    display: none !important;
  }
}

section.product-slider-with-background {
  padding-top: 100px;
  padding-bottom: 100px;
}
@media (min-width: 992px) {
  section.product-slider-with-background {
    padding-left: 45px;
    padding-right: 45px;
  }
}
section.product-slider-with-background h2 {
  color: #F9F9FB;
}
section.product-slider-with-background .the-pills button {
  border-radius: 90px;
  border: none;
  background-color: #EDEDED;
  padding: 2px 10px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -0.28px;
}
section.product-slider-with-background .the-pills button.active {
  background-color: #0075FF;
  color: #F9F9FB;
}
section.product-slider-with-background .slick-list {
  height: 100%;
}
section.product-slider-with-background .slick-slide {
  display: block;
  float: left;
  height: auto;
  height: 100%;
  /* Set flex-basis to 75vw (75% of viewport width) */
}
section.product-slider-with-background .slick-slide div {
  height: 100%;
}
section.product-slider-with-background .slick-track {
  display: flex;
  height: 100%;
}
section.product-slider-with-background .text-slides {
  width: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}
section.product-slider-with-background .text-slides .the-text p {
  color: #F9F9FB;
}
section.product-slider-with-background .text-slides .the-text .top-text {
  margin-top: 27px;
}
section.product-slider-with-background .text-slides .the-text .top-text p {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 21.6px;
  letter-spacing: -0.36px;
}
section.product-slider-with-background .text-slides .the-text .bottom-text {
  margin-top: 50px;
  padding: 12px 20px;
  border-radius: 12px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(34, 34, 34, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
}
@media (min-width: 992px) {
  section.product-slider-with-background .text-slides .the-text .bottom-text {
    margin-top: 100px;
  }
}
section.product-slider-with-background .text-slides .the-text .bottom-text p {
  font-size: 15px;
  font-style: normal;
  line-height: 19.5px;
  letter-spacing: -0.3px;
}
section.product-slider-with-background .text-slides.slick-initialized {
  opacity: 1;
  visibility: visible;
}
section.product-slider-with-background .the-product-slider {
  overflow: hidden;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}
section.product-slider-with-background .the-product-slider .product-slide {
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: radial-gradient(50% 50% at 50% 50%, rgba(34, 34, 34, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
}
section.product-slider-with-background .the-product-slider .product-slide .inner {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  /* Centers the image and div horizontally */
  justify-content: flex-start;
  /* Keeps the image and div stacked */
  position: relative;
}
section.product-slider-with-background .the-product-slider .product-slide .inner .image-holder {
  position: relative;
  padding: 20px;
  height: 131px;
  margin-bottom: 14px;
  width: 100%;
}
@media (min-width: 992px) {
  section.product-slider-with-background .the-product-slider .product-slide .inner .image-holder {
    height: 300px;
  }
}
section.product-slider-with-background .the-product-slider .product-slide .inner .image-holder img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
section.product-slider-with-background .the-product-slider .product-slide .inner .product-info {
  margin-top: auto;
  height: auto;
}
section.product-slider-with-background .the-product-slider .product-slide .inner .product-name {
  color: #F9F9FB;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: block;
}
section.product-slider-with-background .the-product-slider .product-slide .inner .product-price {
  color: #F9F9FB;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.28px;
  display: block;
}
section.product-slider-with-background .the-product-slider.slick-initialized {
  opacity: 1;
  visibility: visible;
}
section.product-slider-with-background .slider-buttons {
  position: absolute;
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 992px) {
  section.product-slider-with-background .slider-buttons {
    left: -70px;
    bottom: 60px;
    top: auto;
    transform: none;
    width: auto;
  }
}
section.product-slider-with-background .slider-buttons button.next,
section.product-slider-with-background .slider-buttons button.prev {
  align-self: flex-end;
  border-radius: 90px;
  border: none;
  background-color: #222222;
  height: 60px;
  width: 60px;
  opacity: 1;
  transition: opacity 0.5s;
  position: absolute;
}
section.product-slider-with-background .slider-buttons button.next:hover,
section.product-slider-with-background .slider-buttons button.prev:hover {
  opacity: 0.8;
}
section.product-slider-with-background .slider-buttons button.next {
  right: 30px;
}
@media (min-width: 992px) {
  section.product-slider-with-background .slider-buttons button.next {
    right: auto;
    left: 0px;
  }
}
section.product-slider-with-background .slider-buttons button.prev {
  left: 30px;
  transform: rotate(180deg);
}
@media (min-width: 992px) {
  section.product-slider-with-background .slider-buttons button.prev {
    left: -70px;
  }
}

section.simple-hero {
  padding-top: 85px;
  padding-bottom: 85px;
  margin-left: -15px;
  margin-right: -15px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
}
section.simple-hero h1 {
  color: #002856;
}
section.simple-hero .overlay {
  position: absolute;
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  height: 100%;
  top: 0;
  left: 0;
  /* Adjust the height as needed */
  width: 100%;
  /* Full width */
}
section.simple-hero.top-margin {
  margin-top: 80px;
}

section.customize-product {
  background: var(--color-primary-oceanic-white, #F9F9FB);
  padding-top: 50px;
  padding-bottom: 50px;
  margin-left: -15px;
  margin-right: -15px;
}
section.customize-product .one-bundle.row {
  /* Optional: Change the appearance of the select box */
}
section.customize-product .one-bundle.row .image-holder {
  position: relative;
  height: 110px;
  width: 100%;
  background-color: #Efefef;
}
section.customize-product .one-bundle.row .image-holder img {
  position: absolute;
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
section.customize-product .one-bundle.row .the-name h3 a {
  font-size: 26px;
  color: #000;
  font-weight: 500;
  line-height: 33.8px;
}
section.customize-product .one-bundle.row .the-variants select {
  font-size: 12px;
  /* Adjust this value to change font size */
  height: 32px;
  /* Adjust this value to change height */
  padding: 8px;
  /* Optional: add padding for better spacing */
  border-radius: 4px;
  /* Optional: rounded corners */
  border: 1px solid #ccc;
  /* Optional: border styling */
}
section.customize-product .one-bundle.row .the-variants label {
  font-size: 12px;
}
section.customize-product .one-bundle.row .the-variants select:focus {
  border-color: #007bff;
  /* Change border color on focus */
  outline: none;
  /* Remove default outline */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  /* Optional: add shadow on focus */
}
section.customize-product button {
  background: var(--color-primary-oceanic-black, #222);
  color: #FFF;
}
section.customize-product button:hover {
  color: #FFF;
}
section.customize-product .wc_bis_form_title {
  font-size: 16px;
}

section.costumer-reviews {
  padding-top: 90px;
  padding-bottom: 90px;
}
section.costumer-reviews .top-stars span.count-number {
  font-size: 37px;
  font-weight: 500;
}
section.costumer-reviews .top-stars span.from {
  font-size: 16px;
  font-weight: 300;
  color: #002856;
}
section.costumer-reviews .top-stars img.the-star {
  height: 32px;
  width: 32px;
}
section.costumer-reviews .leave-review a.btn {
  background-color: #222;
  color: #FFF;
  font-size: 100%;
  margin: 0;
  line-height: 1;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  overflow: visible;
  padding: 16px 3em;
  font-weight: 700;
  border-radius: 3px;
  left: auto;
  color: #e9ecef;
  /* background-color: #012556; */
  border: 0;
  display: inline-block;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
  border-radius: 50px;
}
section.costumer-reviews .one-review {
  padding-bottom: 40px;
  padding-top: 40px;
  border-bottom: 1px solid var(--color-grey, #A2A2A2);
}
section.costumer-reviews .one-review .user-info .name {
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 23.8px */
  letter-spacing: -0.34px;
}
section.costumer-reviews .one-review .user-info .date {
  color: var(--color-grey, #A2A2A2);
  font-family: Ubuntu;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}
section.costumer-reviews .one-review .review-content .star-rating {
  float: none;
  color: #0075FF;
}
section.costumer-reviews .leave-a-review label {
  display: block;
}
section.costumer-reviews .leave-a-review input#submit {
  background-color: #222 !important;
  color: #FFF !important;
  border-radius: 50px !important;
}

section.simple-product {
  background-size: cover;
  /* For Chrome, Safari, Edge, Opera */
  /* For Firefox */
  /* Optionally, set a max width if you want to limit the size */
}
section.simple-product h3 {
  font-style: normal;
}
section.simple-product .quantity-input::-webkit-outer-spin-button,
section.simple-product .quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
section.simple-product .quantity-input[type=number] {
  -moz-appearance: textfield;
}
section.simple-product .product-gallery {
  overflow: hidden;
  display: none;
}
section.simple-product .slick-slider {
  width: 100%;
}
section.simple-product .slick-slide {
  float: left;
  /* Allow slides to float next to each other */
  height: auto;
  /* Ensure height adjusts based on content */
  width: 100%;
  /* Make each slide take full width */
}
section.simple-product .slick-slide {
  max-width: 100%;
  /* Ensures no overflow */
}
section.simple-product .image-holder {
  position: relative;
  height: 240px;
  overflow: hidden;
}
@media (min-width: 767px) {
  section.simple-product .image-holder {
    height: 285px;
  }
}
section.simple-product .image-holder img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
section.simple-product .slick-dots {
  display: none !important;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin-top: 20px;
  bottom: 0;
  left: 0;
  width: 100%;
}
@media (min-width: 768px) {
  section.simple-product .slick-dots {
    display: flex !important;
  }
}
section.simple-product .slick-dots li {
  margin: 0 5px;
}
section.simple-product .slick-dots li button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ddd;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0;
}
section.simple-product .slick-dots li button::before {
  display: none;
}
section.simple-product .slick-dots li.slick-active button {
  background-color: #000;
}
section.simple-product .add-to-cart-form {
  display: flex;
  align-items: center;
  gap: 10px;
}
section.simple-product .quantity-add-to-cart {
  display: flex;
  align-items: center;
}
section.simple-product .quantity-add-to-cart .btn {
  margin-left: 14px;
}
section.simple-product .quantity-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
section.simple-product .quantity-btn {
  border: none;
  cursor: pointer;
  height: 18px;
  width: 18px;
  position: relative;
  border-radius: 50px;
  padding: 13px;
}
section.simple-product .quantity-btn img {
  height: 18px;
  width: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
section.simple-product .quantity-btn:hover {
  background-color: #DADADA;
}
section.simple-product .the-arrows {
  width: 100%;
  left: 0;
  display: flex;
  gap: 10px;
  justify-content: center;
}
section.simple-product .the-arrows button {
  background-color: #222;
  height: 62px;
  width: 62px;
  border-radius: 50px;
  border: none;
  margin: 5px;
  opacity: 1;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: none;
  cursor: pointer;
}
section.simple-product .the-arrows button:hover {
  opacity: 0.8;
}
section.simple-product .the-arrows button.prev {
  transform: rotate(180deg);
}
section.simple-product .quantity-input {
  width: 60px;
  text-align: center;
  font-size: 16px;
  margin: 0 5px;
  border: 1px solid #ddd;
  padding: 5px;
}
section.simple-product .scroll-to-specs, section.simple-product .size-chart-link {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 18.2px */
  letter-spacing: -0.28px;
  color: #222;
  border-radius: 90px;
  background: var(--light-grey, #EDEDED);
  padding: 2px 10px;
}
section.simple-product .scroll-to-specs.hiding, section.simple-product .size-chart-link.hiding {
  display: none !important;
}
section.simple-product .cross-sell-section {
  margin-top: 50px;
}
@media (min-width: 767px) {
  section.simple-product .cross-sell-section {
    margin-top: 100px;
  }
}
section.simple-product .cross-sell-section .cross-sell-card {
  display: flex;
  border: 1px solid #EBEBF4;
  background: var(--color-true-white, #FFF);
  padding: 8px;
}
section.simple-product .cross-sell-section .cross-sell-card .image-holder {
  flex-shrink: 0;
  /* Prevents the image from shrinking */
  width: 140px;
  height: 140px;
  overflow: hidden;
  position: relative;
}
section.simple-product .cross-sell-section .cross-sell-card .image-holder img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
section.simple-product .cross-sell-section .cross-sell-card .right-side {
  flex: 1;
}
section.simple-product .cross-sell-section .cross-sell-card .right-side span {
  color: #A2A2A2;
  font-size: 15px;
}
section.simple-product .cross-sell-section .cross-sell-card .right-side p {
  font-size: 17px;
}
section.simple-product .cross-sell-section .cross-sell-card .right-side a.btn {
  font-size: 16px;
  padding: 10px 32px;
  width: 100%;
}
@media (min-width: 767px) {
  section.simple-product .cross-sell-section .cross-sell-card .right-side a.btn {
    flex-shrink: 0;
    width: auto;
  }
}
section.simple-product .button.wc_bis_send_form {
  background-color: #222 !important;
  color: #fff !important;
  border-radius: 90px !important;
  padding: 10px 32px !important;
  font-size: 16px !important;
}
section.simple-product .button.wc_bis_send_form:hover {
  background-color: #0075FF !important;
}

section.variable-hero {
  padding-top: 100px;
}
@media (max-width: 768px) {
  section.variable-hero {
    padding-top: 50px;
  }
}
section.variable-hero .disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
section.variable-hero #wc_bis_product_form,
section.variable-hero #bis-success-message {
  display: none;
}
section.variable-hero .the-variants {
  margin-bottom: 2rem;
}
section.variable-hero .the-variants .variant-group {
  margin-bottom: 1.5rem;
  width: 100%;
}
section.variable-hero .the-variants .variant-group label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
}
section.variable-hero .the-variants .variant-group label .text-muted {
  font-weight: normal;
}
section.variable-hero .form-check {
  display: inline-block;
  padding-left: 0;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
section.variable-hero .form-check input[type=radio] {
  display: none;
}
section.variable-hero .form-check input[type=radio] + label {
  background-color: rgba(34, 34, 34, 0.08);
  color: #222;
  border-radius: 90px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
section.variable-hero .form-check input[type=radio] + label:hover {
  background-color: #0075FF;
  color: #FFF;
}
section.variable-hero .form-check input[type=radio]:checked + label {
  background-color: #0075FF;
  border-color: #0075FF;
  color: white;
}
section.variable-hero .form-check input[type=radio]:disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
}
section.variable-hero .form-check .form-check-label {
  text-transform: capitalize;
}
section.variable-hero .quantity-container {
  display: inline-flex;
  align-items: center;
  margin-right: 1rem;
}
section.variable-hero .quantity-container input[type=number] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
  width: 2.5em;
  text-align: center;
  padding: 0.5rem;
  border: none;
  background-color: transparent;
}
section.variable-hero .quantity-container input[type=number]::-webkit-outer-spin-button, section.variable-hero .quantity-container input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
section.variable-hero .quantity-container .quantity-btn {
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
section.variable-hero .quantity-container .quantity-btn img {
  width: 16px;
  height: 16px;
}
section.variable-hero .single_add_to_cart_button {
  display: inline-flex;
  vertical-align: middle;
}
section.variable-hero .cart-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
section.variable-hero form.cart {
  display: block;
}
section.variable-hero button.add-to-cart {
  background-color: #222 !important;
  border-radius: 90px;
  text-align: center;
  padding: 24px 36px !important;
  display: inline-block;
  transition: all 0.2s ease;
}
section.variable-hero button.add-to-cart:hover {
  background-color: #0075FF !important;
  color: #FFF;
}

section.centered-slider {
  background-color: #F8F8FA;
  padding-top: 50px;
  padding-bottom: 50px;
}
section.centered-slider a.pill {
  font-size: 14px;
  font-weight: 500px;
  color: #222;
  background: rgba(34, 34, 34, 0.08);
  border: 1px solid rgba(34, 34, 34, 0.25);
  border-radius: 90px;
  padding: 4px 10px;
}
section.centered-slider a.pill.active {
  color: #FFF;
  background: var(--color-secondary-bright-blue, #0075FF);
  border: 1px solid transparent;
}
section.centered-slider .the-images .slide {
  height: 400px;
  position: relative;
  width: auto;
}
section.centered-slider .the-images .slide img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

section.oceanic-video {
  padding-top: 50px;
  padding-bottom: 50px;
}
section.oceanic-video .video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* Aspect ratio for 16:9 */
  overflow: hidden;
}
section.oceanic-video .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Optional: removes the iframe border */
}
section.oceanic-video .video-container .video-placeholder {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
section.oceanic-video .video-container .video-placeholder img.bg-img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.oceanic-video .video-container .video-placeholder img.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 60px;
  width: 60px;
  cursor: pointer;
}
section.oceanic-video .video-container-hosted {
  width: 100%;
  max-width: 100%;
}
section.oceanic-video .video-container-hosted video {
  width: 100%;
  height: auto;
}
section.oceanic-video .video-container-hosted .video-placeholder {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
section.oceanic-video .video-container-hosted .video-placeholder img.bg-img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.oceanic-video .video-container-hosted .video-placeholder img.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 60px;
  width: 60px;
  cursor: pointer;
}

/*homepage components*/
.color-green {
  color: #B8FF81;
}

.color-white {
  color: #F9F9FB;
}

.color-blue {
  color: #00d2d8;
}

.hp-featured-product {
  min-height: 680px;
  background-position: 65%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .hp-featured-product {
    justify-content: center;
    background-position: center;
  }
}

.fp-content {
  font-family: "Ubuntu", sans-serif;
  color: #F9F9FB;
  font-style: normal;
}
.fp-content .prefix {
  font-size: 16px;
  font-weight: 700;
  line-height: 105%;
  text-transform: uppercase;
}
.fp-content h2 {
  margin-top: 16px;
  margin-bottom: 27px;
}
.fp-content p {
  max-width: 480px;
}

.fp-btn-group {
  display: flex;
  -moz-column-gap: 16px;
       column-gap: 16px;
  justify-content: start;
  margin-top: 27px;
  flex-wrap: nowrap;
  align-items: center;
}

@media (min-width: 200px) {
  .hp-featured-product {
    padding: 40px 20px;
  }
  .fp-content {
    padding: 0;
  }
}
@media (min-width: 1024px) {
  .hp-featured-product {
    padding: 80px 45px;
  }
  .fp-content {
    padding: 50px 0;
  }
}
.single-product .hp-featured-product {
  margin-left: -15px;
  margin-right: -15px;
}

.hp-featured-product a.link-btn {
  transition: color 0.3s ease-in-out;
}
.hp-featured-product a.link-btn:hover {
  color: #DADADA;
}

.hp-fp-slider {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.hp-fp-slider .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
@media (min-width: 1024px) {
  .hp-fp-slider .wrapper {
    align-items: center;
  }
}
.hp-fp-slider .wrapper-text {
  font-family: "Ubuntu", sans-serif;
  font-style: normal;
  font-weight: 500;
}
.hp-fp-slider .wrapper-text h2 {
  color: #F9F9FB;
}
.hp-fp-slider .wrapper-text h3 {
  color: #222;
}
.hp-fp-slider .cat-description {
  margin: 16px 0;
  font-family: "Ubuntu", sans-serif;
  font-style: normal;
  font-weight: 400;
}
.hp-fp-slider .cat-description.layout1 p {
  color: #F9F9FB;
  font-size: 18px;
  line-height: 120%;
  letter-spacing: -0.36px;
  max-width: 480px;
}
.hp-fp-slider .cat-description.layout2 p {
  color: #222;
  font-size: 17px;
  line-height: 140%;
  letter-spacing: -0.34px;
  max-width: 330px;
}
.hp-fp-slider .product-descript {
  padding: 12px 20px;
  border-radius: 12px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(34, 34, 34, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.hp-fp-slider .product-descript p {
  color: #F9F9FB;
  padding: 0;
}
.hp-fp-slider .product-descript p strong {
  font-weight: 700;
}
.hp-fp-slider .toggle-button {
  padding: 2px 10px;
  border-radius: 90px;
  background: #EDEDED;
  border: none;
  margin-right: 12px;
  margin-bottom: 12px;
  opacity: 1;
  transition: opacity 0.5s;
}
.hp-fp-slider .toggle-button:hover:not(.btn-active) {
  opacity: 0.8;
}
.hp-fp-slider .btn-active {
  border-radius: 90px;
  border: 0.5px solid rgba(249, 249, 251, 0.15);
  background: #0075FF;
}
.hp-fp-slider .btn-active a {
  color: #F9F9FB;
}
.hp-fp-slider .btn-active:active {
  background: rgba(0, 117, 255, 0.8);
}
.hp-fp-slider .btn-active:active a {
  color: #F9F9FB;
}
.hp-fp-slider .product-slider-container.layout2 {
  position: relative;
}
.hp-fp-slider .product-slider {
  display: flex;
}
.hp-fp-slider .product-slide {
  padding: 28px 18px;
  margin: 0 12px;
  text-align: left;
  flex: 0 0 auto;
  position: relative;
  margin: 20px;
}
.hp-fp-slider .product-slide.layout1 {
  border: 1px rgba(255, 255, 255, 0.15);
  background: radial-gradient(50% 50% at 50% 50%, rgba(34, 34, 34, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.hp-fp-slider .product-slide.layout1 img {
  margin-bottom: 53px;
}
.hp-fp-slider .product-slide.layout2 {
  background: radial-gradient(50% 50% at 50% 50%, #F1F1F1 0%, #EFEFEF 100%);
}
.hp-fp-slider .product-slide.layout2 img {
  margin-bottom: 26px;
}
.hp-fp-slider .product-slide img {
  width: 240px;
  position: relative;
  right: -12px;
}
.hp-fp-slider .slider-prod-name {
  color: #222;
  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.hp-fp-slider .slider-prod-name.layout1 {
  color: #F9F9FB;
}
.hp-fp-slider .slider-prod-price {
  color: #222;
  font-family: "Ubuntu", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.28px;
}
.hp-fp-slider .slider-prod-price.layout1 {
  color: #F9F9FB;
}
.hp-fp-slider .product-next,
.hp-fp-slider .product-prev {
  background: #222;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 61px;
  height: 61px;
  cursor: pointer;
  display: flex;
  margin-left: 6px;
  margin-right: 6px;
  opacity: 1;
  transition: opacity 0.5s;
}
.hp-fp-slider .product-next:hover,
.hp-fp-slider .product-prev:hover {
  opacity: 0.8;
}
.hp-fp-slider .product-prev svg {
  transform: rotate(-180deg);
}
.hp-fp-slider .product-prev.layout2 {
  position: absolute;
  top: 40%;
  left: -10px;
}
.hp-fp-slider .product-next.layout2 {
  position: absolute;
  top: 40%;
  right: 0;
}
.hp-fp-slider .fp-slide-progress-bar {
  position: relative;
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  padding-top: 20px;
  width: 100%;
}
.hp-fp-slider .fp-slide-progress-bar li {
  flex: 1;
  height: 1px;
  margin: 0;
  background-color: #ccc;
  transition: background-color 0.3s;
}
.hp-fp-slider .fp-slide-progress-bar li.active {
  background-color: #222;
}

@media (min-width: 200px) {
  .hp-fp-slider {
    padding: 50px 20px;
  }
  /*styles for the layout of the layout 1 mobile*/
  /*styles for the layout of the layout 2 mobile*/
}
@media (min-width: 200px) and (max-width: 768px) {
  .hp-fp-slider .slick-list .slick-slide {
    transition: opacity 0.5s;
  }
}
@media (min-width: 200px) and (max-width: 768px) and (min-width: 1024px) {
  .hp-fp-slider .slick-list .slick-slide {
    opacity: 0;
  }
}
@media (min-width: 200px) and (max-width: 768px) {
  .hp-fp-slider .slick-list .slick-slide.slick-active {
    opacity: 1;
  }
}
@media (min-width: 200px) {
  .wrapper {
    flex-wrap: wrap;
  }
  .wrapper-content {
    width: 100%;
  }
  .pill-btns p.base {
    width: 100%;
  }
  .product-slide.layout2 {
    width: 200px !important;
  }
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }
  .mobile-bg {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: radial-gradient(50% 50% at 50% 50%, rgba(34, 34, 34, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%);
    padding: 12px;
    margin-top: 100px;
    max-width: 100%;
  }
  .mobile-bg .product-descript {
    margin-top: 0;
    margin-bottom: 29px;
  }
  .mobile-bg .product-descript.mobile {
    border-radius: 6px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(34, 34, 34, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
  }
  .mobile-bg .product-slider-container {
    display: flex;
  }
  .mobile-bg .product-slider {
    display: block;
    width: 63%;
  }
  .mobile-bg .product-slider .slick-list {
    padding: 0;
  }
  .mobile-bg .product-slide {
    background: transparent;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
  }
  .mobile-bg .product-slide img {
    margin-bottom: 29px;
  }
  .mobile-bg .product-prev,
  .mobile-bg .product-next {
    align-self: flex-end;
    border-radius: 90px;
    border: 0.5px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 44px;
    flex-shrink: 0;
  }
  .mobile-bg .product-next {
    margin-left: -25px;
  }
  .product-slider-container.mobile-only.layout2 {
    margin: 16px 0;
    width: 100%;
  }
  .product-slider-container.mobile-only.layout2 .slick-list {
    padding: 0 20% 0 0;
  }
  .product-slide.mobile-only {
    padding: 0;
    margin: 0;
  }
  .product-slide.mobile-only .gray-bg-mobile {
    background: radial-gradient(50% 50% at 50% 50%, #F1F1F1 0%, #EFEFEF 100%);
    padding: 12px;
    margin-right: 16px;
  }
  .product-slide.mobile-only .gray-bg-mobile img {
    margin-bottom: 20px !important;
  }
  .product-slide.mobile-only .buy-now {
    margin-top: 8px;
    margin-right: 16px;
  }
  .product-slide.mobile-only .buy-now a {
    width: 100% !important;
  }
}
@media (min-width: 1024px) {
  .hp-fp-slider {
    padding: 80px 45px;
  }
  .wrapper {
    flex-wrap: nowrap;
  }
  .wrapper-content {
    width: 50%;
  }
  .product-descript {
    margin-top: 105px;
    max-width: 490px;
  }
  .product-slider-container.layout1 {
    width: 30%;
  }
  .product-slider-container.layout2 {
    width: 60%;
  }
  .product-slider-container.layout2 .slick-slide {
    max-width: 335px;
    margin: 0 12px;
  }
  .product-slide.layout1 {
    width: 460px !important;
  }
  .product-slide.layout2 {
    width: 335px !important;
  }
  .arrows-container.layout1 {
    position: relative;
    align-self: flex-end;
    display: flex;
    justify-content: end;
    align-items: end;
    width: 20%;
    margin-right: 16px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  .arrows-container.layout1 {
    top: -20px;
  }
}
@media (min-width: 1024px) {
  .slick-list {
    padding: 0;
  }
  .desktop-only {
    display: block;
  }
  .mobile-only {
    display: none;
  }
}
.fifty-fifty-wrapper {
  padding: 60px 30px;
}
.fifty-fifty-wrapper > .acf-innerblocks-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 200px) {
  .fifty-fifty-wrapper {
    padding: 40px 8px;
  }
  .fifty-fifty-wrapper > .acf-innerblocks-container {
    row-gap: 12px;
    flex-wrap: wrap;
  }
}
@media (min-width: 768px) {
  .fifty-fifty-wrapper > .acf-innerblocks-container {
    row-gap: 0px;
    -moz-column-gap: 32px;
         column-gap: 32px;
  }
}
@media (min-width: 1024px) {
  .fifty-fifty-wrapper {
    padding: 60px 30px;
  }
  .fifty-fifty-wrapper > .acf-innerblocks-container {
    row-gap: 12px;
    flex-wrap: nowrap;
  }
}
#gradient-canvas {
  --gradient-color-1: #080617;
  --gradient-color-2: #00d2d8;
  --gradient-color-3: #062c72;
  --gradient-color-4: #0752bb;
  width: 100%;
  opacity: 0.4;
  height: 100%;
  position: absolute;
  z-index: 1;
}

.hp-hero {
  position: relative;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: 50% !important;
}
.hp-hero .hide-this {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(100%);
  border: 0;
}
.hp-hero video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hp-hero .hero-description * {
  color: white;
}
.hp-hero .hero-description a {
  font-weight: 600;
  text-decoration: underline;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1;
}

.content {
  position: inherit;
  color: #F9F9FB;
  font-style: normal;
  z-index: 2;
}

.hero-top-content {
  text-align: center;
}
.hero-top-content .eyebrow {
  margin-bottom: 24px;
}

.hero-bottom-content {
  display: grid;
  position: relative;
}
.hero-bottom-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #000 100%);
  z-index: -1;
}

@media (min-width: 200px) {
  .hero-top-content {
    padding: 100px 20px 44px 20px;
    max-width: 100%;
  }
  .hero-bottom-content {
    grid-template-columns: 1fr;
    padding: 0 20px;
    min-height: 300px;
    justify-content: start;
    align-items: start;
  }
  .hero-bottom-content p {
    max-width: 100%;
    margin-top: 16px;
  }
  .descrip {
    text-align: center;
  }
  .hero-btm-btn {
    justify-self: center;
    margin-top: -40px;
  }
}
@media (min-width: 1024px) {
  .hero-top-content {
    margin: 78px auto 0 auto;
    max-width: 990px;
    padding: 200px 45px 170px 45px;
  }
  .hero-bottom-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 45px 70px 45px;
    justify-content: center;
    align-items: center;
  }
  .hero-bottom-content div.hero-description {
    max-width: 260px;
  }
  .descrip {
    text-align: left;
  }
  .hero-btm-btn {
    justify-self: self-end;
    margin-top: 0;
  }
}
.oc-image-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin: auto;
}
.oc-image-wrap:hover .description_layer {
  opacity: 1;
  height: auto;
  transition: opacity 0.35s, height 0.35s, transform 0.35s 0.05s;
  transform: translate3d(0, 0, 0);
}
.oc-image-wrap:hover .title_layer {
  transform: translate3d(0, 0, 0);
  transition: transform 0.35s;
}
.oc-image-wrap:hover .oc-image-text-content {
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  transition: transform 0.35s;
}

.oc-inner-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
  overflow: hidden;
}
.oc-inner-content .title_layer {
  margin-bottom: 1rem;
}
.oc-inner-content img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}

.oc-image-text-content {
  position: absolute;
  bottom: 0;
  padding: 2em;
  width: 100%;
  text-align: center;
  font-family: "Ubuntu", sans-serif;
  color: #F9F9FB;
}
.oc-image-text-content p {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  text-transform: uppercase;
}
.oc-image-text-content .title_layer,
.oc-image-text-content .description_layer {
  transform: translate3d(0, 40px, 0);
}
.oc-image-text-content .title_layer {
  transition: transform 0.35s;
}
.oc-image-text-content .description_layer {
  transition: opacity 0.2s, transform 0.35s;
  height: 2rem;
}

@media (min-width: 200px) {
  .oc-image-wrap {
    height: 500px;
    width: 100%;
  }
  .oc-image-wrap img {
    width: 100%;
  }
  .oc-inner-content {
    min-height: 360px;
  }
  .description_layer {
    opacity: 1;
  }
}
@media (max-width: 1023px) {
  .oc-image-wrap {
    display: block;
  }
  .oc-image-wrap .oc-image-text-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .oc-image-wrap .description_layer {
    opacity: 1;
    height: auto;
    transition: opacity 0.35s, height 0.35s, transform 0.35s 0.05s;
    transform: translate3d(0, 0, 0);
  }
  .oc-image-wrap .oc-inner-content {
    height: 100%;
  }
  .oc-image-wrap .title_layer {
    transform: translate3d(0, 0, 0);
    transition: transform 0.35s;
  }
  .oc-image-wrap .oc-image-text-content {
    background: rgba(0, 0, 0, 0.4);
    transition: transform 0.35s;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}
@media (min-width: 1024px) {
  .oc-image-wrap {
    width: 675px;
    height: 670px;
  }
  .oc-image-wrap img {
    width: 675px;
  }
  .oc-inner-content {
    min-height: 670px;
  }
  .oc-image-text-content {
    height: 30%;
  }
  .description_layer {
    opacity: 0;
  }
}
.lf-bottom-content {
  display: grid;
  justify-content: center;
  align-items: center;
  color: #F9F9FB;
  font-family: "Ubuntu", sans-serif;
  font-style: normal;
}

.lf-descrip {
  text-align: left;
}

@media (min-width: 200px) {
  .lf-bottom-content {
    grid-template-columns: 1fr;
    padding: 40px 20px 0 20px;
  }
  .lf-bottom-content h3 {
    max-width: 100%;
    margin-top: 18px;
  }
  .lf-btm-btn {
    justify-self: start;
    margin-top: 20px;
    margin-bottom: 40px;
  }
}
@media (min-width: 1024px) {
  .lf-bottom-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 60px 45px;
  }
  .lf-bottom-content h3 {
    max-width: 684px;
    margin-top: 24px;
  }
  .lf-btm-btn {
    justify-self: self-end;
    margin-top: 0px;
    margin-bottom: 0;
  }
}
.hp-overview {
  text-align: center;
  background: linear-gradient(180deg, #000 0%, #002856 22%, #003E85 44.5%, #0075FF 100%), linear-gradient(180deg, #000 0%, #002146 0.01%, #0075FF 100%);
}

.overview-content p.xl {
  color: #F9F9FB;
}

.logo-img-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  align-self: stretch;
  flex-wrap: wrap;
  max-width: 900px;
  margin: auto;
}
.logo-img-wrapper img {
  max-width: 160px;
  margin: auto;
  opacity: 0.4;
}
@media (min-width: 200px) {
  .logo-img-wrapper img {
    width: 104px;
  }
}
@media (max-width: 768px) {
  .logo-img-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    justify-items: center;
    align-items: center;
  }
}

@media (min-width: 200px) {
  .hp-overview {
    padding: 60px 20px;
  }
  .overview-content p.xl {
    margin-bottom: 30px;
  }
  .logo-img-wrapper {
    gap: 20px;
  }
}
@media (min-width: 1024px) {
  .hp-overview {
    padding: 160px 80px;
  }
  .overview-content p.xl {
    margin-bottom: 60px;
  }
  .logo-img-wrapper {
    gap: 45px;
  }
}
.single-product .hp-overview {
  margin-left: -15px;
  margin-right: -15px;
}

.section-break img {
  width: 100vw;
}

@media (min-width: 200px) {
  .section-break {
    margin-top: -20px;
  }
}
@media (min-width: 768px) {
  .section-break {
    margin-top: -50px;
  }
}
@media (min-width: 1024px) {
  .section-break {
    margin-top: -120px;
  }
}
.single-product .section-break {
  margin-left: -15px;
  margin-right: -15px;
}

.hp-simple-cta {
  background-repeat: no-repeat !important;
  background-position: bottom center;
}
.hp-simple-cta .cta-inner-wrap {
  text-align: center;
  font-family: "Ubuntu", sans-serif;
  color: #222;
}
.hp-simple-cta .cta-inner-wrap p.base {
  font-weight: 400;
}
@media (min-width: 200px) {
  .hp-simple-cta .cta-inner-wrap {
    padding: 40px 20px;
  }
  .hp-simple-cta .cta-inner-wrap h2 {
    margin-top: 12px;
  }
  .hp-simple-cta .cta-inner-wrap p.base {
    max-width: 100%;
    margin: 16px auto;
  }
}
@media (min-width: 1024px) {
  .hp-simple-cta .cta-inner-wrap {
    padding: 60px 45px;
  }
  .hp-simple-cta .cta-inner-wrap h2 {
    margin-top: 24px;
  }
  .hp-simple-cta .cta-inner-wrap p.base {
    max-width: 385px;
  }
}
.hp-simple-cta .image-holder {
  height: 230px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .hp-simple-cta .image-holder {
    height: 330px;
    position: relative;
  }
}
.hp-simple-cta .image-holder img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

section.social-media {
  padding-top: 45px;
  padding-bottom: 45px;
}
section.social-media a.instagram-link {
  color: var(--color-true-black, #000);
  text-align: right;
  font-family: Ubuntu;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}
section.social-media .crt-logo.crt-tag {
  display: none;
}
section.social-media .crt-feed {
  position: relative;
}
section.social-media .crt-panel-next,
section.social-media .crt-panel-prev {
  background-color: #222;
  opacity: 1;
  transition: opacity 0.3s;
}
section.social-media .crt-panel-next:hover,
section.social-media .crt-panel-prev:hover {
  opacity: 0.8;
}

/*tutorial video grid page*/
.tutorial-hero {
  text-align: center;
}
.tutorial-hero h1 {
  margin-bottom: 1rem;
}

@media (min-width: 200px) {
  .tutorial-hero {
    padding: 70px 20px;
  }
  .tutorial-hero p {
    max-width: 100%;
  }
}
@media (min-width: 1024px) {
  .tutorial-hero {
    padding: 100px 0 130px 0;
  }
  .tutorial-hero p {
    max-width: 550px;
    margin: auto;
  }
}
.hp-tutorial-grid .cat-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 16px;
       column-gap: 16px;
  margin-bottom: 32px;
}
.hp-tutorial-grid .cat-btns button {
  border-radius: 90px;
  border: none;
  background-color: #EDEDED;
  padding: 2px 10px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -0.28px;
  opacity: 1;
  transition: opacity 0.5s;
}
.hp-tutorial-grid .cat-btns button.btn-active {
  background-color: #0075FF;
  color: #F9F9FB !important;
}
.hp-tutorial-grid .cat-btns button.btn-active a {
  color: #F9F9FB !important;
}
.hp-tutorial-grid .cat-btns button:hover:not(.btn-active) {
  opacity: 0.8;
}
.hp-tutorial-grid .video-grid {
  display: grid;
  gap: 16px;
  justify-content: center;
  align-items: center;
  place-items: center;
}
.hp-tutorial-grid .video-grid h3 {
  color: #F9F9FB;
  transition: color 0.5s;
  position: relative;
}
.hp-tutorial-grid .tut-card {
  position: relative;
}
.hp-tutorial-grid .tut-card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 51%;
  background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0));
  pointer-events: none;
  opacity: 0;
}
.hp-tutorial-grid .tut-card .watch-time {
  color: #A2A2A2;
  font-family: "Ubuntu", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  position: absolute;
  bottom: 0;
  right: 20px;
}
.hp-tutorial-grid .tut-card .watch-me {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  position: absolute;
  bottom: 14px;
  left: 20px;
  background-color: #222;
  padding: 12px;
  border-radius: 90px;
  color: #FFF;
  opacity: 0;
  transition: background-color 0.5s;
}
.hp-tutorial-grid .tut-card .watch-me:hover {
  background-color: #0075FF;
}
.hp-tutorial-grid .tut-card:hover h3 {
  color: #000;
}
.hp-tutorial-grid .tut-card:hover .overlay {
  opacity: 1;
  transition: opacity 0.5s;
}
.hp-tutorial-grid .tut-card:hover .watch-me {
  opacity: 1;
  transition: opacity 0.5s;
}
.hp-tutorial-grid .tut-arrow-sect {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 45px 0;
}
.hp-tutorial-grid .tut-arrow-sect .page-number {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  opacity: 0.6;
  color: #222;
  font-family: "Ubuntu", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.3px;
}
.hp-tutorial-grid .tut-arrow-sect .page-number.active {
  opacity: 1;
}
.hp-tutorial-grid .tut-arrow-sect .page-number:not(:last-child) {
  margin-right: 12px;
}
.hp-tutorial-grid .tut-next,
.hp-tutorial-grid .tut-prev {
  background: #222;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 61px;
  height: 61px;
  cursor: pointer;
  display: flex;
  opacity: 1;
  transition: opacity 0.5s;
}
.hp-tutorial-grid .tut-next:hover,
.hp-tutorial-grid .tut-prev:hover {
  opacity: 0.8;
}
.hp-tutorial-grid .tut-prev {
  transform: rotate(-180deg);
}

@media (min-width: 200px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
  .video-grid .tut-card {
    width: 100%;
    height: 300px;
    padding: 32px 16px;
  }
}
@media (min-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .video-grid .tut-card {
    height: 475px;
    padding: 20px 25px;
  }
}
@media (min-width: 1440px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/*single product page*/
.faq-title {
  color: #F9F9FB;
  font-family: "Ubuntu", sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}

.faq-wrapper {
  padding-top: 40px;
  padding-bottom: 40px;
}
.faq-wrapper p.faq-answer {
  font-size: 16px !important;
  font-weight: 300 !important;
}
.faq-wrapper p {
  color: #F9F9FB;
}
.faq-wrapper .faq-block {
  display: flex;
  color: #F9F9FB;
  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  font-style: normal;
  line-height: normal;
  margin-top: 34px;
}
.faq-wrapper .faq-block p {
  color: #F9F9FB;
}
.faq-wrapper .faq-block .faq-question {
  font-weight: 500;
  width: 100%;
  font-size: 17px;
  color: #F9F9FB;
}
.faq-wrapper .faq-block .faq-answer {
  font-weight: 300;
  font-size: 16px !important;
  color: #F9F9FB;
}
.faq-wrapper .btn-lg {
  transition: background-color 0.3s;
}
.faq-wrapper .btn-lg:hover {
  background-color: #0075FF;
  color: #FFF;
  opacity: 1;
}

@media (min-width: 200px) {
  .faq-section {
    padding: 45px 20px;
  }
  .faq-section .faq-title,
  .faq-section .faq-wrapper {
    max-width: 100%;
    margin: auto;
  }
  .faq-section .faq-block {
    flex-wrap: wrap;
    gap: 0;
  }
  .faq-section .mobile-btn-wrapper {
    margin: 34px auto 0 auto;
    display: block;
  }
}
@media (min-width: 1024px) {
  .faq-section {
    padding: 60px 100px;
  }
  .faq-section .faq-block {
    flex-wrap: nowrap;
    gap: 64px;
  }
}
.single-product .faq-section {
  margin-left: -15px;
  margin-right: -15px;
}

.product-video-tutorial .content-wrapper {
  text-align: center;
}
.product-video-tutorial .video-wrapper {
  position: relative;
  text-align: center;
}
.product-video-tutorial video {
  -o-object-fit: cover;
     object-fit: cover;
}
.product-video-tutorial .video-controls a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (min-width: 200px) {
  .product-video-tutorial {
    padding: 60px 30px;
  }
  .product-video-tutorial .content-wrapper p {
    max-width: 100%;
    margin: auto;
  }
  .product-video-tutorial .video-wrapper {
    margin: 16px auto 0 auto;
  }
  .product-video-tutorial .video-wrapper video {
    max-width: 250px;
  }
}
@media (min-width: 768px) {
  .product-video-tutorial .video-wrapper video {
    max-width: 600px;
    margin: auto;
  }
}
@media (min-width: 1024px) {
  .product-video-tutorial {
    padding: 40px 8px;
  }
  .product-video-tutorial .content-wrapper p {
    max-width: 400px;
    margin: auto;
  }
  .product-video-tutorial .video-wrapper {
    margin: 32px auto 0 auto;
  }
}
@media (min-width: 1440px) {
  .product-video-tutorial .video-wrapper video {
    max-width: 800px;
    margin: auto;
  }
}
.product-cta {
  color: #F9F9FB;
}
.product-cta .cta-content-wrapper p {
  margin: 24px 0;
}
.product-cta .cta-content-wrapper ul {
  margin: 0;
  padding: 0 0 0 20px;
}
.product-cta .cta-content-wrapper li {
  margin-top: 8px;
  color: #F9F9FB;
  font-family: "Ubuntu", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.3px;
}

.product-cta {
  padding-top: 40px;
  padding-bottom: 170px;
  padding-left: 20px;
  padding-right: 20px;
}

.cta-content-wrapper p {
  max-width: 100%;
}

@media (min-width: 1024px) {
  .product-cta {
    padding-top: 120px;
    padding-bottom: 200px;
  }
  .cta-content-wrapper p {
    max-width: 480px;
  }
}