/*
Theme Name: DMN WP STARTER
Description: DMN WP STARTER Child theme for customizations.
Author: DMN Creative
Author URI: mailto:dev@dmncreative.com
Template: oceanwp
Text Domain:  dmnwpstarter
Version: 2.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

/* Importing fonts */
/* @import "assets/fonts/fonts.css"; */

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Importing fonts end */

/* Helpers and Init Styles */

:root {
    --site-headings-font: "Montserrat";
    --site-body-font: "Montserrat";
    --site-main-blue: #151542;
    --site-main-light-blue: #33B0B9;
    --site-main-orange: #F26924;
    --site-main-white: #ffffff;
    --site-main-black: #000000;

    --site-body-size: clamp(16px, 0.139vw + 15.33px, 18px);

    --site-h1-size: clamp(40px, 1.389vw + 33.33px, 60px);
    --site-h2-size: clamp(34px, 1.111vw + 28.67px, 50px);
    --site-h3-size: clamp(28px, 0.833vw + 24px, 40px);
    --site-h4-size: clamp(24px, 0.764vw + 20.33px, 35px);
    --site-h5-size: clamp(20px, 0.694vw + 16.67px, 30px);
    --site-h6-size: clamp(18px, 0.278vw + 16.67px, 22px);

    --site-218-size: clamp(120px, 6.806vw + 87.33px, 218px);
    --site-110-size: clamp(48px, 2.917vw + 34px, 76px);
    --site-80-size: clamp(40px, 2.778vw + 26.67px, 80px);
    --site-20-size: clamp(14px, 0.417vw + 12px, 20px);
}

@media (min-width: 1441px) {
    :root {
        --site-110-size: clamp(76px, 7.083vw - 26px, 110px);
    }
}

a:focus {
    outline: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0px;
}

.site-content p,
.site-content span:not(.xpro-title-focus),
.archive .site p,
.archive .site span:not(.xpro-title-focus),
.elementor-widget-heading p,
.elementor-widget-text-editor p,
#footer-bottom.no-footer-nav #copyright {
    font-size: var(--site-body-size);
}

.site-content h1,
.archive .site h1 {
    font-size: var(--site-h1-size);
}

.site-content h2,
.archive .site h2 {
    font-size: var(--site-h2-size);
}

.site-content h3,
.archive .site h3 {
    font-size: var(--site-h3-size);
}

.site-content h4,
.archive .site h4 {
    font-size: var(--site-h4-size);
}

.site-content h5,
.archive .site h5 {
    font-size: var(--site-h5-size);
}

.site-content h6,
.site-content h6 a,
.archive .site h6 {
    font-size: var(--site-h6-size);
}

.font-20 p {
    font-size: var(--site-20-size);
}

.font-80 h1 {
    font-size: var(--site-80-size);
}

.font-110 h1 {
    font-size: var(--site-110-size);
}

.font-218 h1 {
    font-size: var(--site-218-size);
}

.site-content .elementor-widget-button .elementor-button-wrapper .elementor-button-text,
.site-content a {
    font-size: var(--site-body-size);
}

.oceanwp-pagination .page-numbers a.page-numbers,
.oceanwp-pagination .page-numbers span.page-numbers {
    font-size: var(--site-body-size);
}

.cust-boxed-container-left>.e-con-inner {
    margin: 0px 0px 0px auto;
}

.cust-boxed-container-right>.e-con-inner {
    margin: 0px auto 0px 0px;
}

.container {
    max-width: 1650px;
    width: 100% !important;
}

sup {
    top: -0.3em;
}

/* Helpers End */

/* Header */

#site-header.transparent-header {
    left: 0;
    width: 100%;
    padding: 20px clamp(16px, 2vw, 35px) 0;
    background-color: transparent;
    border-bottom: none;
}

#site-header.transparent-header #site-header-inner {
    --menu-link-padding: 18px;
    display: flex;
    align-items: center;
    gap: 30px;
    height: 100px;
    max-width: 1650px;
    padding: 0 clamp(24px, 3vw, 60px);
    overflow: visible;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}

#site-header.transparent-header #site-logo,
#site-header.transparent-header #site-logo-inner {
    display: flex;
    align-items: center;
    height: auto;
}

#site-header.transparent-header #site-navigation-wrap {
    float: none;
    width: auto;
    margin-left: auto;
    left: auto;
    right: calc(var(--menu-link-padding) * -1);
}

#site-header.transparent-header .dropdown-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media only screen and (min-width: 960px) {

    #site-header.transparent-header .oceanwp-mobile-menu-icon {
        display: none;
    }
}

#site-header.transparent-header .dropdown-menu>li>a.menu-link {
    display: flex;
    align-items: center;
    height: 100px;
    padding: 0 var(--menu-link-padding);
    font-size: var(--site-body-size);
    line-height: 1;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--site-main-white);
}

#site-header.transparent-header .dropdown-menu>li>a.menu-link .text-wrap {
    display: inline-flex;
    align-items: center;
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease-in-out;
}

#site-header.transparent-header .dropdown-menu>li>a.menu-link:hover .text-wrap,
#site-header.transparent-header .dropdown-menu>li.current-menu-item>a.menu-link .text-wrap,
#site-header.transparent-header .dropdown-menu>li.current-menu-ancestor>a.menu-link .text-wrap {
    border-bottom-color: var(--site-main-orange);
}

#site-header.transparent-header .dropdown-menu>li>a.menu-link .nav-arrow {
    padding-left: 6px;
}

#site-header.transparent-header .oceanwp-mobile-menu-icon {
    margin-left: auto;
}

#site-header.transparent-header .oceanwp-mobile-menu-icon a.mobile-menu {
    display: flex;
    align-items: center;
    padding: 0;
    line-height: 1;
    color: var(--site-main-white);
}

#site-header.transparent-header .oceanwp-mobile-menu-icon .hamburger-box {
    width: 26px;
    height: 18px;
}

#site-header.transparent-header .oceanwp-mobile-menu-icon .hamburger-inner,
#site-header.transparent-header .oceanwp-mobile-menu-icon .hamburger-inner::before,
#site-header.transparent-header .oceanwp-mobile-menu-icon .hamburger-inner::after {
    width: 26px;
    background-color: var(--site-main-white);
}

#site-header.transparent-header .oceanwp-mobile-menu-icon .hamburger-inner::before {
    top: -8px;
}

#site-header.transparent-header .oceanwp-mobile-menu-icon .hamburger-inner::after {
    bottom: -8px;
}

.has-transparent-header .is-sticky #site-header.transparent-header {
    background-color: transparent;
}

.has-transparent-header .is-sticky #site-header.transparent-header #site-header-inner {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Header end */

/* Footer */

#footer .sf-menu li.menu-item {
    display: block;
}

#footer .sf-menu a.menu-link {
    font-size: var(--site-body-size);
    padding: 0 0 10px;
    letter-spacing: 0;
    text-decoration: underline;
    line-height: 1.3;
}

#footer .elementor-icon-list-text {
    font-size: var(--site-body-size);
    text-decoration: underline;
}

/* Footer end */

/* Button */

.my-btn a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    font-family: "proxima-nova", sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: center;

    border-radius: 50px;
    border: 1px solid transparent;

    background: transparent !important;

    cursor: pointer;
    z-index: 1;

    transition: all 0.3s ease-in-out;
}

.my-btn a .elementor-button-content-wrapper {
    position: relative;
    z-index: 5;
}

.my-btn a .elementor-button-text {
    position: relative;
    z-index: 5;
}

.my-btn.white a {
    color: var(--site-main-white) !important;
    border-color: var(--site-main-white);
}

.my-btn.white a:hover {
    color: var(--site-main-blue) !important;
    border-color: var(--site-main-white);
}

.my-btn.white a::before {
    content: '';
    width: 0%;
    height: 110%;

    display: block;
    position: absolute;
    left: -10%;
    top: -1px;

    background: var(--site-main-white);

    opacity: 1;

    transform: skewX(-20deg);

    z-index: -1;

    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);

    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.6);
}

.my-btn.white a::after {
    content: '';
    width: 0%;
    height: 110%;

    display: block;
    position: absolute;
    left: -10%;
    top: -1px;

    background: var(--site-main-light-blue);

    opacity: 0;

    transform: skewX(-20deg);

    z-index: -2;

    transition: all 0.4s cubic-bezier(.2, .95, .57, .99);

    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.6);
}

.my-btn.white a:hover::before {
    opacity: 1;
    width: 116%;
}

.my-btn.white a:hover::after {
    opacity: 1;
    width: 120%;
}

.my-btn.blue a {
    color: var(--site-main-blue) !important;
    border-color: var(--site-main-blue);
}

.my-btn.blue a:hover {
    color: var(--site-main-white) !important;
    border-color: var(--site-main-blue);
}

.my-btn.blue a::before {
    content: '';
    width: 0%;
    height: 110%;

    display: block;
    position: absolute;
    left: -10%;
    top: -1px;

    background: var(--site-main-blue);

    opacity: 1;

    transform: skewX(-20deg);

    z-index: -1;

    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);

    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.6);
}

.my-btn.blue a::after {
    content: '';
    width: 0%;
    height: 110%;

    display: block;
    position: absolute;
    left: -10%;
    top: -1px;

    background: var(--site-main-orange);

    opacity: 0;

    transform: skewX(-20deg);

    z-index: -2;

    transition: all 0.4s cubic-bezier(.2, .95, .57, .99);

    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.6);
}

.my-btn.blue a:hover::before {
    opacity: 1;
    width: 116%;
}

.my-btn.blue a:hover::after {
    opacity: 1;
    width: 120%;
}

.my-btn a .transition {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--site-main-light-blue);
    z-index: -1;
}

/* Button end */

/* Home hero bottom shape */

.hero-container {
    --hero-shape-height: clamp(95px, 11vw, 130px);
    --hero-shape-fill: #ffffff;
    position: relative;
    overflow: hidden;
}

.hero-container>.elementor-element-a1dcef9 {
    position: relative;
    z-index: 2;
}

.hero-container>.elementor-element-95df391 {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    min-height: var(--hero-shape-height);
}

.hero-container .e-con:has(> .hero-shape-left, > .hero-shape-right) {
    min-height: 0 !important;
}

.hero-container .hero-shape-left,
.hero-container .hero-shape-right {
    --hero-shape-extension: clamp(110px, 9vw, 180px);
    --hero-shape-gutter: calc((100vw - min(100vw, var(--container-max-width, 1650px))) / 2);
    position: relative;
    z-index: 1;
    overflow: visible;
    padding-top: 33.5px;
    padding-bottom: 33.5px;
}

.hero-container .hero-shape-left,
.hero-container .hero-shape-right {
    align-items: flex-start !important;
    --align-items: flex-start !important;
}

.hero-container .hero-shape-left {
    padding-left: var(--hero-shape-gutter);
    padding-right: 0px;
}

.hero-container .hero-shape-right {
    padding-left: 0px;
    padding-right: 0px;
}

.hero-container .hero-shape-right>.e-con {
    margin-left: calc(-1 * var(--hero-shape-gutter) / 3) !important;
}

.hero-container .hero-shape-left::before,
.hero-container .hero-shape-right::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--hero-shape-fill);
}

.hero-container .hero-shape-left::before {
    border-radius: 32px 0 0 0;
}

.hero-container .hero-shape-right::before {
    border-radius: 0 32px 0 0;
}

.hero-container .hero-shape-left::after,
.hero-container .hero-shape-right::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--hero-shape-extension);
    z-index: -1;
    background: var(--hero-shape-fill);
}

.hero-container .hero-shape-left::after {
    right: calc(var(--hero-shape-extension) * -1 + 1px);
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 250' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0 0H130C163 0 190 16 205 42L300 250H0Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 250' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0 0H130C163 0 190 16 205 42L300 250H0Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

.hero-container .hero-shape-right::after {
    left: calc(var(--hero-shape-extension) * -1 + 1px);
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 250' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0 250L95 42C110 16 137 0 170 0H300V250Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 250' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0 250L95 42C110 16 137 0 170 0H300V250Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

.hero-container .hero-shape-left .e-con-inner,
.hero-container .hero-shape-right .e-con-inner {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.hero-container .hero-shape-left .elementor-widget-text-editor p,
.hero-container .hero-shape-right .elementor-widget-text-editor p,
.hero-container .hero-shape-left strong,
.hero-container .hero-shape-right strong {
    color: var(--site-main-blue);
}

@media screen and (max-width: 767px) {

    .hero-container .hero-shape-left,
    .hero-container .hero-shape-right {
        --hero-shape-extension: 0px;
        --hero-shape-gutter: 0px;
        padding-left: clamp(20px, 2.4vw, 40px);
        padding-right: clamp(20px, 2.4vw, 40px);
    }

    .hero-container .hero-shape-right>.e-con {
        margin-left: 0 !important;
    }

    .hero-container .hero-shape-left::before,
    .hero-container .hero-shape-right::before {
        border-radius: 24px;
    }

    .hero-container .hero-shape-left::after,
    .hero-container .hero-shape-right::after {
        content: none;
    }
}

/* Home hero bottom shape end */

/* Inner page header shape */

.custom-header-column-shape {
    --header-shape-fill: #ffffff;
    --header-shape-ratio: 174 / 152;
    position: relative;
    overflow: visible;
    --overflow: visible;
}

.e-con.custom-header-column-shape {
    border-top-left-radius: 0;
}

.custom-header-column-shape::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    aspect-ratio: var(--header-shape-ratio);
    background: var(--header-shape-fill);
    pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,<svg%20viewBox='0%200%20200%20200'%20preserveAspectRatio='none'%20xmlns='http://www.w3.org/2000/svg'><path%20fill='black'%20d='M200%200C69%206%20121%20181%200%20200L200%20200Z'/></svg>") right center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,<svg%20viewBox='0%200%20200%20200'%20preserveAspectRatio='none'%20xmlns='http://www.w3.org/2000/svg'><path%20fill='black'%20d='M200%200C69%206%20121%20181%200%20200L200%20200Z'/></svg>") right center / 100% 100% no-repeat;
}

@media screen and (max-width: 767px) {
    .custom-header-column-shape::after {
        content: none;
    }

    .e-con.custom-header-column-shape {
        border-top-left-radius: 24px;
    }
}

/* Inner page header shape end */

/* Accordion */

body.dmn-accordion-image-toggle-active .elementor-element-fe03156 {
    position: relative;
}

body.dmn-accordion-image-toggle-active .mi-image,
body.dmn-accordion-image-toggle-active .ri-image,
body.dmn-accordion-image-toggle-active .fai-image,
body.dmn-accordion-image-toggle-active .si-image {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

body.dmn-accordion-image-toggle-active .mi-image.dmn-toggle-image-active,
body.dmn-accordion-image-toggle-active .ri-image.dmn-toggle-image-active,
body.dmn-accordion-image-toggle-active .fai-image.dmn-toggle-image-active,
body.dmn-accordion-image-toggle-active .si-image.dmn-toggle-image-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.elementor-widget-n-accordion .e-n-accordion-item-title-text {
    font-size: var(--site-h5-size);
}

/* Documentation links accordion */

.my-accordion {
    --acc-radius: 20px;
    /* Design metrics: 50px either side of the copy and the icon, 40px above
       the title and below the content, 20px between title and content. */
    --acc-pad-x: 50px;
    --acc-pad-y: 40px;
    --acc-title-gap: 20px;
    --acc-icon-size: 18px;
    /* Elementor's own variables, so its widget CSS does the work rather than
       being fought: items sit flush, the summary carries the padding, and
       the icon takes the design's size and colour. */
    --n-accordion-item-title-space-between: 0px;
    /* Elementor defaults every item to a 1px #d5d8dc border, which shows as
       a grey hairline between the colour blocks and under the open header.
       These two variables are the polite way to switch it off, but they are
       only honoured while nothing overrides the real properties - see the
       border reset further down. */
    --n-accordion-border-width: 0px;
    --n-accordion-border-style: none;
    --n-accordion-border-radius: 0px;
    --n-accordion-padding: var(--acc-pad-y) var(--acc-pad-x);
    --n-accordion-icon-size: var(--acc-icon-size);
    --n-accordion-icon-normal-color: var(--site-main-white);
    --n-accordion-icon-hover-color: var(--site-main-white);
    --n-accordion-icon-active-color: var(--site-main-white);
    --n-accordion-title-normal-color: var(--site-main-white);
    --n-accordion-title-hover-color: var(--site-main-white);
    --n-accordion-title-active-color: var(--site-main-white);
}

/* Elementor writes this widget's per-page CSS with a seven-class selector
   (.elementor-485 .elementor-element.elementor-element-4a6c7d5 >
    .elementor-widget-container > .e-n-accordion > .e-n-accordion-item >
    .e-n-accordion-item-title), which outranks every plain-class rule in this
   stylesheet and sets the real properties rather than the variables above -
   e.g. "border-style: solid", which slips straight past
   --n-accordion-border-style. The element ids in that selector change per
   page and per widget, so they cannot be matched here reliably. The two
   things that would visibly break if overridden - the border and the outer
   corners - are therefore forced, and nothing else is.
   Belt on the border: style AND width, so a stray solid cannot paint. */
.my-accordion .e-n-accordion-item>.e-n-accordion-item-title,
.my-accordion .e-n-accordion-item>.e-con {
    border-width: 0 !important;
    border-style: none !important;
}

/* THE BLEND, read off the design's edge crop.
   Every toggle carries the full radius on its TOP corners, and each one is
   pulled up by exactly that radius so it sits ON TOP of the toggle above it.
   The toggle above keeps SQUARE bottom corners, so its colour fills the
   notch those rounded corners cut away - that is what reads as the blocks
   blending into one another instead of butting together. Giving the toggle
   above rounded bottom corners too would leave a white sliver in the notch
   where the two arcs curve apart, which is the pinching seen earlier.
   Only the last toggle rounds its bottom, because nothing overlaps it.
   Written with :first-child / :last-child / + so it holds for any number of
   toggles. */
.my-accordion .e-n-accordion-item {
    border-radius: var(--acc-radius) var(--acc-radius) 0 0 !important;
    margin-bottom: 0 !important;
}

.my-accordion .e-n-accordion-item+.e-n-accordion-item {
    margin-top: calc(-1 * var(--acc-radius)) !important;
}

.my-accordion .e-n-accordion-item:last-child {
    border-radius: var(--acc-radius) !important;
}

/* Brand colours cycle every three items, so adding a fourth carries on from
   navy rather than needing a new rule. */
.my-accordion .e-n-accordion-item:nth-child(3n + 1) {
    background-color: var(--site-main-blue);
}

.my-accordion .e-n-accordion-item:nth-child(3n + 2) {
    background-color: var(--site-main-light-blue);
}

.my-accordion .e-n-accordion-item:nth-child(3n + 3) {
    background-color: var(--site-main-orange);
}

/* Closed items are a title bar on its own, so they carry the full 40px top
   and bottom. */
.my-accordion .e-n-accordion-item-title {
    padding: var(--acc-pad-y) var(--acc-pad-x);
    cursor: pointer;
}

/* Once open, the title's bottom padding becomes the 20px title-to-content
   gap - the 40px is then carried by the content's own bottom padding, so
   the block reads 40 / title / 20 / content / 40 top to bottom. */
.my-accordion .e-n-accordion-item[open]>.e-n-accordion-item-title {
    padding-bottom: var(--acc-title-gap);
}

/* Whatever sits at the bottom of a toggle that has another one stacked over
   it gets the overlap added to its bottom padding, so the 40px of breathing
   room survives being covered. The last toggle is not overlapped and keeps
   the plain 40px - the "and then the last one doesn't" in the design. */
.my-accordion .e-n-accordion-item:not(:last-child):not([open])>.e-n-accordion-item-title,
.my-accordion .e-n-accordion-item:not(:last-child)[open]>.e-con {
    padding-bottom: calc(var(--acc-pad-y) + var(--acc-radius));
    --padding-bottom: calc(var(--acc-pad-y) + var(--acc-radius));
}

/* The arrow is centred on its toggle, but an overlapped toggle's box is a
   radius taller than the part you can actually see, so it is lifted by half
   the overlap to sit on the visual centre. */
.my-accordion .e-n-accordion-item:not(:last-child) .e-n-accordion-item-title-icon {
    margin-top: calc(var(--acc-radius) / -2);
}

/* Beats the site-wide ".elementor-widget-n-accordion .e-n-accordion-item-title-text"
   rule that sets every nested accordion's title to h5. */
.my-accordion.elementor-widget-n-accordion .e-n-accordion-item-title-text {
    font-family: var(--site-headings-font), sans-serif;
    font-size: var(--site-h6-size);
    font-weight: 700;
    line-height: 1.4;
    color: var(--site-main-white);
}

/* In the design the arrow on the OPEN item sits against the middle of the
   whole expanded block, not the header - measured at the block's centre
   rather than the title's. Absolutely positioning it against the item does
   that, and because it stays a DOM child of <summary> it still toggles the
   accordion when clicked. */
.my-accordion .e-n-accordion-item-title-icon {
    position: absolute;
    top: 50%;
    right: var(--acc-pad-x);
    transform: translateY(-50%);
    margin: 0;
}

.my-accordion .e-n-accordion-item-title-icon svg {
    width: var(--acc-icon-size);
    height: var(--acc-icon-size);
    display: block;
}

.my-accordion .e-n-accordion-item-title-icon svg path {
    stroke: var(--site-main-white);
}

/* Keep the title clear of the absolutely positioned arrow */
.my-accordion .e-n-accordion-item-title-header {
    padding-right: calc(var(--acc-icon-size) + var(--acc-title-gap));
}

/* Expanded content */
.my-accordion .e-n-accordion-item>.e-con {
    padding: 0 var(--acc-pad-x) var(--acc-pad-y);
    --gap: var(--acc-title-gap);
    --row-gap: var(--acc-title-gap);
    --column-gap: 0px;
    gap: var(--acc-title-gap);
    --padding-top: 0px;
    --padding-right: var(--acc-pad-x);
    --padding-bottom: var(--acc-pad-y);
    --padding-left: var(--acc-pad-x);
}

.my-accordion .e-n-accordion-item>.e-con h6 {
    font-family: var(--site-body-font), sans-serif;
    font-size: var(--site-h6-size);
    font-weight: 400;
    line-height: 1.5;
    color: var(--site-main-white);
    margin: 0;
}

.my-accordion .e-n-accordion-item>.e-con h6 a {
    font-weight: 700;
    color: var(--site-main-white);
    text-transform: uppercase;
}

/* Visible keyboard focus, since the summary's default outline is removed by
   the theme reset. */
.my-accordion .e-n-accordion-item-title:focus-visible {
    outline: 2px solid var(--site-main-white);
    outline-offset: -4px;
}

/* Documentation links accordion end */

/* Accordion end */

/* Why choose us */

/* Navigation */

/* Why choose us end */

/* Horizontal Solutions Accordion */

.dmn-hacc {
    --dmn-hacc-tab: clamp(72px, 5.2vw, 138px);
    --dmn-hacc-height: clamp(440px, 36vw, 600px);
    --dmn-hacc-radius: 24px;
    --dmn-hacc-pad: clamp(44px, 3vw, 80px);

    --dmn-hacc-speed: .7s;
    --dmn-hacc-ease: cubic-bezier(.66, 0, .24, 1);
    --dmn-hacc-count: 4;

    display: flex;
    width: 100%;
    min-height: var(--dmn-hacc-height);
    border-radius: var(--dmn-hacc-radius);
    overflow: hidden;
    font-family: var(--site-body-font, "Montserrat"), sans-serif;
}

.dmn-hacc *,
.dmn-hacc *::before,
.dmn-hacc *::after {
    box-sizing: border-box;
}

.dmn-hacc__panel {
    position: relative;
    flex: 0 0 auto;
    width: var(--dmn-hacc-tab);
    background: var(--dmn-hacc-bg, var(--site-main-black));
    color: var(--site-main-white, var(--site-main-white));
    overflow: hidden;
    transition: width var(--dmn-hacc-speed) var(--dmn-hacc-ease);
}

.dmn-hacc__panel.is-active {
    width: calc(100% - (var(--dmn-hacc-count) - 1) * var(--dmn-hacc-tab));
}

.dmn-hacc__tab {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: end;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 50px 0 !important;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
    transition: opacity .25s ease, visibility 0s linear 0s;
}

.dmn-hacc__tab::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--site-main-white);
    opacity: 0;
    transition: opacity .3s ease;
}

.dmn-hacc__tab:hover::before {
    opacity: .08;
}

.dmn-hacc__tab:focus-visible {
    outline: 2px solid var(--site-main-white, var(--site-main-white));
    outline-offset: -8px;
}

.dmn-hacc__panel.is-active .dmn-hacc__tab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
}

.dmn-hacc__label {
    position: relative;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
    font-size: var(--site-h5-size) !important;
}

.dmn-hacc__icon {
    display: none;
}

.dmn-hacc__body {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--dmn-hacc-open-px, 100%);
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
    transition:
        opacity .45s ease,
        transform .55s var(--dmn-hacc-ease),
        visibility 0s linear .45s;
}

.dmn-hacc__panel.is-active .dmn-hacc__body {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: .24s, .24s, 0s;
}

.dmn-hacc__clip {
    width: 100%;
}

.dmn-hacc__slot {
    padding: var(--dmn-hacc-pad);
}

@media (max-width: 900px) {
    .dmn-hacc {
        display: block;
        min-height: 0;
    }

    .dmn-hacc .dmn-hacc__panel,
    .dmn-hacc .dmn-hacc__panel.is-active {
        width: 100%;
    }

    .dmn-hacc .dmn-hacc__panel .dmn-hacc__tab {
        position: relative;
        inset: auto;
        justify-content: space-between;
        gap: 16px;
        padding: 20px clamp(20px, 5vw, 32px) !important;
        text-align: left;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: none;
    }

    .dmn-hacc .dmn-hacc__label {
        writing-mode: horizontal-tb;
        transform: none;
        white-space: normal;
    }

    .dmn-hacc .dmn-hacc__icon {
        display: block;
        flex: 0 0 auto;
        width: 12px;
        height: 12px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform .35s var(--dmn-hacc-ease);
    }

    .dmn-hacc .dmn-hacc__panel.is-active .dmn-hacc__icon {
        transform: rotate(-135deg) translate(-2px, -2px);
    }

    .dmn-hacc .dmn-hacc__body {
        position: relative;
        inset: auto;
        width: 100%;
        display: grid;
        grid-template-rows: 0fr;
        align-items: stretch;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: grid-template-rows var(--dmn-hacc-speed) var(--dmn-hacc-ease);
    }

    .dmn-hacc .dmn-hacc__panel.is-active .dmn-hacc__body {
        grid-template-rows: 1fr;
        transition-delay: 0s;
    }

    .dmn-hacc .dmn-hacc__clip {
        min-height: 0;
        overflow: hidden;
    }

    .dmn-hacc .dmn-hacc__slot {
        padding: 0 clamp(20px, 5vw, 32px) clamp(28px, 6vw, 40px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .dmn-hacc__panel,
    .dmn-hacc__body,
    .dmn-hacc__tab,
    .dmn-hacc__icon {
        transition-duration: .01ms !important;
    }
}

/* Horizontal Solutions Accordion end */

/* Assurances Process */

/* Navigation */

/* Assurances process end */

/* Timeline */

.line-container {
    --tl-line: rgba(0, 0, 0, 0.75);
    --tl-line-trim: 6px;
    position: relative;
}

.line-container::after {
    content: "";
    position: absolute;
    top: var(--tl-line-trim);
    bottom: var(--tl-line-trim);
    left: 50%;
    margin-left: -1px;
    width: 1px;
    background: var(--tl-line);
    pointer-events: none;
}

.line-container>.elementor-widget {
    position: relative;
    z-index: 1;
}

/* Timeline end */

/* Our Story */

.double-shadow {
    box-shadow:
        15px 15px 25px 0px rgba(0, 0, 0, 0.08) inset,
        0px 10px 25px 0px rgba(0, 0, 0, 0.08) !important;
}

/* Our Story end */

/* Join-us panel shape */

.join-us-panel {
    --panel-step: 30px;
    --panel-cap: calc(var(--panel-step) * 0.6);
    --panel-bite: #ffffff;
}

.join-us-panel>.e-con-inner::before,
.join-us-panel>.e-con-inner::after {
    content: "";
    position: absolute;
    height: var(--panel-step);
    background-repeat: no-repeat;
    pointer-events: none;
}

.join-us-panel>.e-con-inner::before {
    top: 0;
    left: 36%;
    right: 0;
    background-image:
        url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'><path%20fill='%23ffffff'%20d='M0%200L100%200L100%20100C41%209%2052%2025%200%200Z'/></svg>"),
        linear-gradient(var(--panel-bite), var(--panel-bite));
    background-position: left top, right top;
    background-size:
        var(--panel-cap) 100%,
        calc(100% - var(--panel-cap)) 100%;
}

.join-us-panel>.e-con-inner::after {
    bottom: 0;
    left: 0;
    right: 37.4%;
    background-image:
        url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'><path%20fill='%23ffffff'%20d='M0%200C51%2091%2054%2081%20100%20100L0%20100Z'/></svg>"),
        linear-gradient(var(--panel-bite), var(--panel-bite));
    background-position: right bottom, left bottom;
    background-size:
        var(--panel-cap) 100%,
        calc(100% - var(--panel-cap)) 100%;
}

@media screen and (max-width: 767px) {

    .join-us-panel>.e-con-inner::before,
    .join-us-panel>.e-con-inner::after {
        content: none;
    }
}

/* Join-us panel shape end */

/* FORMS */

/* Global Changes */

.wpcf7 .wpcf7-form .wpcf7-response-output {
    margin: 0px;
}

.wpcf7 .wpcf7-form.sent .wpcf7-response-output {
    border-color: var(--site-main-blue);
}

.wpcf7-response-output {
    margin-top: 20px !important;
    color: var(--site-main-white);
    line-height: 1.4em;
}

/* Global Changes End */

/* Sign Up Form */

.sign-up-form {
    width: 100%;
}

.sign-up-form .row {
    margin: 0 0 13px 0;
}

.sign-up-form .row:last-child {
    margin-bottom: 0;
}

.sign-up-form .col-md-12 {
    padding: 0;
}

.sign-up-form input[type="text"],
.sign-up-form input[type="email"] {
    width: 100%;
    padding: 11px 13px;
    border: none;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    font-family: "proxima-nova", sans-serif;
    font-size: var(--site-body-size);
    font-weight: 400;
    color: var(--site-main-white);
    outline: none;
    box-sizing: border-box;
    transition: background 0.3s ease-in-out;
}

.sign-up-form input::placeholder {
    color: var(--site-main-white);
    opacity: 1;
}

.sign-up-form input[type="text"]:focus,
.sign-up-form input[type="email"]:focus {
    background: rgba(255, 255, 255, 0.25);
}

.sign-up-form .cf7-submit-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 13px 25px 11px;
    font-family: "proxima-nova", sans-serif;
    font-size: var(--site-body-size);
    letter-spacing: 0;
    text-transform: capitalize;
    text-align: center;
    color: var(--site-main-white);
    border-radius: 50px;
    border: 2px solid var(--site-main-white);
    background: transparent !important;
    cursor: pointer;
    z-index: 1;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.3s ease-in-out;
    margin-top: 10px;
}

.sign-up-form .cf7-submit-btn span {
    position: relative;
    z-index: 5;
}

.sign-up-form .cf7-submit-btn::before {
    content: '';
    width: 0%;
    height: 100%;
    display: block;
    position: absolute;
    left: -10%;
    top: 0;
    background: var(--site-main-white);
    opacity: 1;
    transform: skewX(-20deg);
    z-index: -1;
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.6);
}

.sign-up-form .cf7-submit-btn::after {
    content: '';
    width: 0%;
    height: 100%;
    display: block;
    position: absolute;
    left: -10%;
    top: 0;
    background: var(--site-main-light-blue);
    opacity: 0;
    transform: skewX(-20deg);
    z-index: -2;
    transition: all 0.4s cubic-bezier(.2, .95, .57, .99);
    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.6);
}

.sign-up-form .cf7-submit-btn:hover {
    color: var(--site-main-blue);
    border-color: var(--site-main-white);
}

.sign-up-form .cf7-submit-btn:hover::before {
    opacity: 1;
    width: 116%;
}

.sign-up-form .cf7-submit-btn:hover::after {
    opacity: 1;
    width: 120%;
}

@media (max-width: 767px) {

    .sign-up-form input[type="text"],
    .sign-up-form input[type="email"] {
        height: 65px;
        padding: 0 18px;
    }

    .sign-up-form input[type="submit"] {
        min-width: 170px;
        height: 65px;
        padding: 0 32px;
    }
}

/* Sign Up Form end */

/* Join-us contact form */

.contact-form {
    --cf-line: 16px;
    --cf-underline-gap: 16px;
    --cf-field: calc(var(--cf-line) + var(--cf-underline-gap) + 1px);
    --cf-row-gap: 40px;
    --cf-col-gap: 30px;
    --cf-ink: var(--site-main-blue);
    width: 100%;
}

.contact-form .row {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--cf-col-gap);
}

.contact-form .col-md-6 {
    flex: 1 1 calc(50% - (var(--cf-col-gap) / 2));
    min-width: 0;
}

.contact-form .col-md-12 {
    flex: 1 1 100%;
    min-width: 0;
}

.contact-form .form-field {
    margin-bottom: var(--cf-row-gap);
}

.contact-form .wpcf7-form-control-wrap {
    display: block;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form select,
.contact-form textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: var(--cf-field);
    padding: 0 0 var(--cf-underline-gap);
    border: 0;
    border-bottom: 1px solid var(--cf-ink);
    border-radius: 0;
    background: transparent;
    font-family: "proxima-nova", sans-serif;
    font-size: var(--site-body-size);
    font-weight: 400;
    line-height: var(--cf-line);
    color: var(--cf-ink);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s ease-in-out;
    min-height: 35px;
}

.contact-form ::placeholder {
    color: var(--cf-ink);
    opacity: 1;
}

.contact-form textarea {
    resize: none;
    overflow: hidden;
}

.contact-form select {
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2026%2015'%20fill='none'><path%20d='M1%201L13%2013L25%201'%20stroke='%23151542'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0 top 6px;
    background-size: 26px 15px;
    min-height: 40px;
    padding-bottom: 16px !important;
}

.contact-form select:invalid {
    color: var(--cf-ink);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-bottom-width: 2px;
    padding-bottom: calc(var(--cf-underline-gap) - 1px);
}

.contact-form .cv-upload {
    position: relative;
    box-sizing: border-box;
    height: var(--cf-field);
    padding: 0 0 var(--cf-underline-gap);
    border-bottom: 1px solid var(--cf-ink);
    display: flex;
    align-items: center;
    font-family: "proxima-nova", sans-serif;
    font-size: var(--site-body-size);
    line-height: var(--cf-line);
    color: var(--cf-ink);
}

.contact-form .cv-upload::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: var(--cf-underline-gap);
    width: 36px;
    height: 33px;
    background: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2036%2033'%20fill='none'><path%20d='M18%2023V2M18%202L10%2010M18%202L26%2010'%20stroke='%23151542'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/><path%20d='M2%2022v5a4%204%200%20004%204h24a4%204%200%20004-4v-5'%20stroke='%23151542'%20stroke-width='2'%20stroke-linecap='round'/></svg>") no-repeat center / contain;
    pointer-events: none;
}

.contact-form .cv-upload .wpcf7-form-control-wrap {
    position: absolute;
    inset: 0;
}

.contact-form .cv-upload input[type="file"] {
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.contact-form .wpcf7-not-valid {
    border-bottom-color: #d63638;
}

.contact-form .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 14px;
    color: #d63638;
}

.contact-form .cf7-submit-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 55px;
    padding: 13px 34px;
    margin-top: 8px;
    font-family: "proxima-nova", sans-serif;
    font-size: var(--site-body-size);
    letter-spacing: 0;
    text-transform: capitalize;
    text-align: center;
    color: var(--cf-ink);
    border: 2px solid var(--cf-ink);
    border-radius: 50px;
    background: transparent;
    cursor: pointer;
    z-index: 1;
    appearance: none;
    -webkit-appearance: none;
    transition: color 0.3s ease-in-out;
}

.contact-form .cf7-submit-btn span {
    position: relative;
    z-index: 5;
}

.contact-form .cf7-submit-btn::before {
    content: "";
    position: absolute;
    left: -10%;
    top: 0;
    width: 0%;
    height: 100%;
    display: block;
    background: var(--cf-ink);
    transform: skewX(-20deg);
    z-index: -1;
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

.contact-form .cf7-submit-btn:hover {
    color: var(--site-main-white);
}

.contact-form .cf7-submit-btn:hover::before {
    width: 120%;
}

/* Mobile: single column */
@media screen and (max-width: 767px) {
    .contact-form .col-md-6 {
        flex: 1 1 100%;
    }
}

.contact-form .cv-upload>span:not(.wpcf7-form-control-wrap) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 48px;
}

.contact-form .cv-upload.has-file::after {
    background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2036%2033'%20fill='none'><path%20d='M4%2018l9%209%2019-21'%20stroke='%23151542'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/></svg>");
}

.wpcf7 .wpcf7-form .wpcf7-response-output {
    background: var(--site-main-blue);
    border-color: var(--site-main-blue) !important;
}

/* Terms acceptance row (contact enquiry form).
   The design uses a near-black here rather than the navy the fields and
   button use - that is how it comes out of the design file, so it is a
   variable rather than a hardcoded value in case it was an oversight. */
.contact-form .form-terms {
    --cf-terms-ink: #0d0d0d;
    --cf-terms-box: 31px;
    margin: 28px 0 26px;
    font-family: "proxima-nova", sans-serif;
    font-size: var(--site-body-size);
    line-height: 1.4;
    color: var(--cf-terms-ink);
}

/* The fields carry a bottom margin to make the row pitch, which would sit
   on top of the gap above this row. Only zeroed on forms that actually have
   a terms row, so the join-us form's spacing below its last field is
   untouched. */
.contact-form:has(.form-terms) .col-md-6>.form-field:last-child {
    margin-bottom: 0;
}

.contact-form .form-terms+.row .cf7-submit-btn {
    margin-top: 0;
}

.contact-form .form-terms .wpcf7-list-item {
    margin: 0;
}

.contact-form .form-terms label {
    display: flex;
    align-items: center;
    gap: 21px;
    cursor: pointer;
    margin: 0;
}

/* Styling the real input rather than hiding it behind a fake box, so it
   keeps native keyboard focus, click target and checked state. */
.contact-form .form-terms input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: var(--cf-terms-box);
    height: var(--cf-terms-box);
    margin: 0;
    padding: 0;
    border: 3px solid var(--cf-terms-ink);
    border-radius: 5px;
    background-color: transparent;
    cursor: pointer;
}

.contact-form .form-terms input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2019%2014'%20fill='none'><path%20d='M1.5%207.5L6.5%2012.5L17.5%201.5'%20stroke='%230d0d0d'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px 14px;
}

/* OceanWP draws its own Font Awesome check on ANY checked checkbox
   (input[type=checkbox]:checked:before { content: "\f00c" } in its
   style.min.css), which lands on top of the SVG tick above and shows as a
   double check. Suppressed for this field only - other checkboxes on the
   site keep the parent theme's behaviour. */
.contact-form .form-terms input[type="checkbox"]::before,
.contact-form .form-terms input[type="checkbox"]:checked::before {
    content: none;
}

.contact-form .form-terms input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--cf-ink);
    outline-offset: 3px;
}

.contact-form .form-terms a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* CF7 puts its acceptance validation message after the control */
.contact-form .form-terms .wpcf7-not-valid-tip {
    margin-top: 8px;
}

/* Join-us contact form end */

/* FORMS END */

/* Success stories */

.dmn-stories,
.dmn-stories *,
.dmn-stories *::before,
.dmn-stories *::after {
    box-sizing: border-box;
}

.dmn-stories {
    --ss-panel-bg: #f2f2f2;
    --ss-panel-pad-x: clamp(28px, 3.4vw, 56px);
    --ss-panel-pad-y: clamp(28px, 3vw, 48px);
    --ss-media-width: 42%;
    --ss-gap: clamp(28px, 3vw, 44px);
    --ss-radius: 20px;
    --ss-notch-depth: 39px;
    --ss-notch-split: 37%;
    --ss-notch-curve: 31px;
    --ss-bite: #ffffff;
    --ss-pill-ink: var(--site-main-blue, #151542);
    --ss-arrow-size: 34px;
    --ss-arrow-icon: 16px;
}

.dmn-stories__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: clamp(28px, 3vw, 48px);
}

.dmn-stories .dmn-stories__filters .dmn-stories__pill {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 10px 26px;
    background: transparent;
    border: 1px solid var(--ss-pill-ink);
    border-radius: 999px;
    font-family: var(--site-body-font, sans-serif), sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--ss-pill-ink);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 200ms ease, color 200ms ease;
}

.dmn-stories .dmn-stories__filters .dmn-stories__pill:hover {
    background: rgba(21, 21, 66, 0.08);
}

.dmn-stories .dmn-stories__filters .dmn-stories__pill.is-active {
    background: var(--ss-pill-ink);
    color: var(--site-main-white, #ffffff);
}

.dmn-stories .dmn-stories__filters .dmn-stories__pill:focus-visible {
    outline: 2px solid var(--ss-pill-ink);
    outline-offset: 3px;
}

.dmn-stories__items {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 44px);
}

.dmn-stories__story {
    display: flex;
    align-items: stretch;
}

.dmn-stories__story.is-filtered,
.dmn-stories__story.is-paged-out {
    display: none;
}

.dmn-stories__media {
    flex: 0 0 var(--ss-media-width);
    margin: 0;
    position: relative;
    z-index: 1;
    border-radius: var(--ss-radius);
    overflow: hidden;
}

.dmn-stories__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dmn-stories__panel {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: calc(var(--ss-gap) * -1);
    padding-left: calc(var(--ss-gap) + var(--ss-panel-pad-x));
    background: var(--ss-panel-bg);
}

.dmn-stories__panel-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: var(--ss-panel-pad-y) var(--ss-panel-pad-x) calc(var(--ss-panel-pad-y) + var(--ss-notch-depth)) 0;
}

.dmn-stories__panel::after {
    content: "";
    position: absolute;
    left: var(--ss-notch-split);
    right: 0;
    bottom: 0;
    height: var(--ss-notch-depth);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 100C52 100 48 0 100 0L100 100Z'/%3E%3C/svg%3E"),
        linear-gradient(var(--ss-bite), var(--ss-bite));
    background-position: left bottom, right bottom;
    background-size: var(--ss-notch-curve) 100%, calc(100% - var(--ss-notch-curve) + 1px) 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

.dmn-stories__title {
    margin: 0 0 18px;
    font-size: var(--site-h5-size, 30px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--site-main-blue, #151542);
    text-transform: none;
}

.dmn-stories__fact+.dmn-stories__fact,
.dmn-stories__fact-row {
    margin-top: 18px;
}

.dmn-stories__fact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px clamp(24px, 3vw, 48px);
}

.dmn-stories__fact-row .dmn-stories__fact {
    flex: 1 1 220px;
    min-width: 0;
    margin-top: 0;
}

.dmn-stories__fact-label {
    margin: 0 0 2px;
    font-family: var(--site-body-font, sans-serif), sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--site-main-blue, #151542);
}

.dmn-stories__fact-body {
    font-family: var(--site-body-font, sans-serif), sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--site-main-blue, #151542);
}

.dmn-stories__fact-body p {
    margin: 0 0 0.6em;
    color: inherit;
}

.dmn-stories__fact-body p:last-child {
    margin-bottom: 0;
}

.dmn-stories--carousel {
    --ss-c-radius: clamp(24px, 3.4vw, 46px);
    --ss-c-pad: clamp(20px, 3vw, 50px);
    --ss-c-gap: clamp(20px, 2.6vw, 44px);
    --ss-c-media: 49%;
    --ss-c-media-radius: 20px;
}

.dmn-stories--carousel .dmn-stories__items {
    flex-direction: row;
    gap: 0;
    align-items: stretch;
}

.dmn-stories--carousel .dmn-stories__viewport .dmn-stories__story {
    height: auto;
    align-self: stretch;
    padding: var(--ss-c-pad);
    gap: var(--ss-c-gap);
    background: var(--ss-panel-bg);
    border-radius: var(--ss-c-radius);
}

.dmn-stories--carousel .dmn-stories__viewport {
    padding-top: 1px;
    padding-bottom: 1px;
    margin-top: -1px;
    margin-bottom: -1px;
    overflow-x: clip;
    overflow-y: visible;
}

.dmn-stories--carousel .dmn-stories__media {
    flex: 0 0 var(--ss-c-media);
    z-index: auto;
    border-radius: var(--ss-c-media-radius);
}

.dmn-stories--carousel .dmn-stories__panel {
    margin-left: 0;
    padding-left: 0;
    background: none;
}

.dmn-stories--carousel .dmn-stories__panel::after {
    content: none;
}

.dmn-stories--carousel .dmn-stories__panel-inner {
    padding: 0;
}

.dmn-stories--carousel .dmn-stories__fact-row .dmn-stories__fact {
    flex: 1 1 140px;
}

.dmn-stories__nav,
.dmn-stories__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(24px, 2.6vw, 36px);
}

.dmn-stories .dmn-stories__pager[hidden] {
    display: none;
}

.dmn-stories__nav {
    flex-direction: column;
    gap: 16px;
}

.dmn-stories__arrows {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dmn-stories__pages {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dmn-stories .dmn-stories__arrow,
.dmn-stories .dmn-stories__page {
    box-sizing: border-box;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-arrow-size);
    height: var(--ss-arrow-size);
    min-width: var(--ss-arrow-size);
    margin: 0;
    padding: 0;
    background: var(--site-main-blue, #151542);
    border: 0;
    border-radius: 6px;
    color: var(--site-main-white, #ffffff);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 0;
    text-transform: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: opacity 200ms ease;
}

.dmn-stories .dmn-stories__arrow svg {
    display: block;
    flex: 0 0 auto;
    width: var(--ss-arrow-icon);
    height: var(--ss-arrow-icon);
}

.dmn-stories .dmn-stories__arrow:hover,
.dmn-stories .dmn-stories__page:hover {
    opacity: 0.85;
}

.dmn-stories .dmn-stories__arrow[disabled],
.dmn-stories .dmn-stories__arrow.swiper-button-disabled {
    opacity: 0.25;
    cursor: default;
}

.dmn-stories .dmn-stories__page {
    line-height: 1;
    background: transparent;
    border: 1px solid var(--site-main-blue, #151542);
    color: var(--site-main-blue, #151542);
}

.dmn-stories .dmn-stories__page.is-active {
    background: var(--site-main-blue, #151542);
    color: var(--site-main-white, #ffffff);
}

.dmn-stories .dmn-stories__arrow:focus-visible,
.dmn-stories .dmn-stories__page:focus-visible {
    outline: 2px solid var(--site-main-blue, #151542);
    outline-offset: 2px;
}

.dmn-stories__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.dmn-stories .dmn-stories__nav .dmn-stories__dots {
    position: static;
    width: auto;
    left: auto;
    transform: none;
}

.dmn-stories__dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    background: var(--site-main-blue, #151542);
    opacity: 0.3;
}

.dmn-stories__dots .swiper-pagination-bullet-active {
    opacity: 1;
}


@media screen and (max-width: 860px) {
    .dmn-stories__story {
        flex-direction: column;
    }

    .dmn-stories__media {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    .dmn-stories--list .dmn-stories__panel {
        margin-left: 0;
        margin-top: calc(var(--ss-radius) * -1);
        padding-left: 0;
        border-bottom-left-radius: var(--ss-radius);
        border-bottom-right-radius: var(--ss-radius);
    }

    .dmn-stories--list .dmn-stories__panel-inner {
        padding: calc(var(--ss-panel-pad-y) + var(--ss-radius)) var(--ss-panel-pad-x) var(--ss-panel-pad-y);
    }

    .dmn-stories--carousel .dmn-stories__media {
        flex: 0 0 auto;
    }

    .dmn-stories__panel::after {
        content: none;
    }

    .dmn-stories__fact-row {
        flex-direction: column;
    }
}

/* Success stories end */

/* Desktop Styles Only */
@media screen and (min-width: 992px) {}

/* Laptop Styles Only */
@media screen and (min-width: 992px) and (max-width: 1690px) {

    #site-logo #site-logo-inner a img,
    #site-header.center-header #site-navigation-wrap .middle-site-logo a img {
        max-width: 330px;
        width: 300px;
    }
}

/* Mobile Styles */
@media screen and (max-width: 767px) {

    /* Header */

    #site-header.transparent-header {
        padding: 12px 16px 0;
    }

    #site-header.transparent-header #site-header-inner {
        height: 72px;
        padding: 0 20px;
        border-radius: 16px;
    }

    #site-header.transparent-header #site-logo img {
        max-width: 200px;
    }

    /* Header end */

    .hero-container .hero-shape-left,
    .hero-container .hero-shape-right {
        --hero-shape-extension: 0px;
        padding-left: var(--hero-shape-padding-x);
        padding-right: var(--hero-shape-padding-x);
    }

    .hero-container .hero-shape-left::before,
    .hero-container .hero-shape-right::before {
        border-radius: 24px;
    }

    .hero-container .hero-shape-left::after,
    .hero-container .hero-shape-right::after {
        content: none;
    }

    .dmn-stories--carousel .dmn-stories__fact-row .dmn-stories__fact {
        flex: 1 1 40px;
    }

    .dmn-stories__fact-row .dmn-stories__fact {
        flex: 1 1 40px;
    }

}

/* iPad Styles */
@media screen and (max-width: 850px) and (min-width: 780px) {
    .dmn-stories--carousel .dmn-stories__fact-row .dmn-stories__fact {
        flex: 1 1 40px;
    }

    .dmn-stories__fact-row .dmn-stories__fact {
        flex: 1 1 40px;
    }
}

/* ANIMATIONS */

/* ANIMATIONS END */