/*Header*/
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.site-header-primary-section-right .ast-builder-menu {
    border-radius: 100px;
    padding: 0 12px !important;
    transition: background-color 0.25s ease;
}

body.header-scrolled .site-header-primary-section-right .ast-builder-menu {
    background-color: var(--e-global-color-2433379);
}

.header-btn {
    padding: 6px 47px 6px 18px !important;
    background-color: var(--e-global-color-86d4116);
    border-radius: 100px;
    position: relative;
    max-height: 47px;
    transition: all 0.2s ease-in;
    margin-left: 12px;
}

.header-btn:hover {
    background-color: var(--e-global-color-74cb0b2);
}

.header-btn:active,
.header-btn:focus {
    background-color: #031F28;
}

.header-btn:after {
    content: '';
    background-image: url(/wp-content/uploads/2026/06/sw-btn-arrow-black-on-white.svg);
    width: 32px;
    height: 32px;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

.header-btn a {
    color: var(--e-global-color-secondary) !important;
    line-height: 35px;
    padding: 0 !important;
}

.ast-builder-menu .main-navigation>ul {
    align-items: center;
}

body.ast-popup-nav-open {
    overflow: hidden;
}

body.ast-popup-nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(30px) saturate(1.2);
    -webkit-backdrop-filter: blur(30px) saturate(1.2);
    pointer-events: none;
    z-index: 100000;
}

.ast-mobile-popup-header {
    position: absolute;
    top: 16px;
    right: 24px;
}

.ast-builder-menu-mobile {
    margin-top: 36px;
}

#menu-toggle-close {
    padding: 0;
    font-size: 32px;
}

#menu-toggle-close:focus {
    border: none;
}

.ast-mobile-svg.ast-close-svg {
    width: 32px;
    height: 32px;
}

.ast-mobile-popup-content .ast-builder-layout-element:not(.ast-builder-menu):not(.ast-header-divider-element) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.ast-header-break-point .main-navigation .stack-on-mobile .header-btn {
    width: auto;
    background-color: var(--e-global-color-secondary) !important;
    margin-left: 24px;
    margin-top: 12px;
}

.ast-header-break-point .main-navigation .stack-on-mobile .header-btn:after {
    background-image: url(/wp-content/uploads/2026/06/sw-btn-arrow-white-on-primary.svg);
}

.ast-header-break-point .main-navigation .stack-on-mobile .header-btn a {
    font-size: 16px;
    color: var(--e-global-color-86d4116) !important;
    line-height: 2.3em;
}

.ast-header-html {
    width: 100%;
}

.menu-socials {
    position: relative;
    margin: 10px 24px 0 24px;
}

.menu-socials:before {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.20) 0%, rgba(130, 149, 155, 0.55) 50%, rgba(255, 255, 255, 0.20) 100%);
}

.mob-socials-title {
    margin-bottom: 8px !important;
    color: var(--e-global-color-secondary);
    padding-top: 34px;
}

.social-links {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.social-links li {
    margin: 0;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    text-decoration: none;
}

.social-links img {
    width: 32px;
    height: 32px;
    display: block;
    transition: transform 0.3s ease;
}

.social-links a:hover img {
    transform: scale(1.1);
}

@media screen and (max-width: 767px) {
    .header-logo {
        width: 160px;
        padding-top: 10px;
    }

    .menu-socials {
        margin: 10px 12px 0 12px;
    }

}

/*Hero*/
#scroll-down {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.prompt-section-wrapper {
    max-width: 710px;
}

.prompt-form-wrapper {
    padding: 16px;
    border-radius: 40px;
    background-color: #fff;
    box-shadow: 0 10px 30px 0 rgba(0, 86, 183, 0.29);
}

.prompt-form-wrapper form {
    display: flex;
    flex-direction: column;
}

#prompt-submit {
    align-self: flex-end;
}

#prompt-field {
    padding: 16px;
    background-color: transparent;
    resize: none;
    line-height: 1.4rem;
    color: #000;
}

#prompt-field::placeholder {
    line-height: 1.4rem;
    color: var(--e-global-color-35a5bf9);
}

#prompt-submit {
    align-self: flex-end;
    position: relative;
    padding: 6px 47px 6px 18px !important;
    line-height: 35px;
}

#prompt-submit:after {
    content: '';
    background-image: url(/wp-content/uploads/2026/06/sw-btn-arrow-black-on-white.svg);
    width: 32px;
    height: 32px;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

.product-benefits {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
}

.product-benefits .benefit-item {
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.25);
    padding: 8px 12px;
    box-shadow: 0 10px 30px 0 rgba(0, 86, 183, 0.29);
    color: var(--e-global-color-d09743c);
    line-height: 14.4px;
}

@media screen and (max-width: 767px) {
    .product-benefits .benefit-item {
        flex-basis: calc(50% - 4px);
        font-size: 14px;
        line-height: 12.6px;
        align-self: stretch;
        align-content: center;
    }

    #prompt-field {
        height: 90px;
        padding: 8px 0;
    }

    #scroll-down {
        bottom: 24px;
    }
}

/*Suitable for*/
.suitable-item h3 {
    word-break: break-word;
    letter-spacing: -7.68px;
    line-height: 90% !important;
}

.suitable-item:before {
    z-index: 2;
}

#suitable-for {
    position: relative;
    overflow: visible;
}

#suitable-for:before {
    content: '';
    background-image: url(/wp-content/uploads/2026/06/sw-suitable-for-shape.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 77%;
    position: absolute;
    overflow: visible;
    top: -5%;
    left: 0;
    display: block;
    z-index: 0;
    height: 900px;
}

@media screen and (max-width: 1025px) {
    #suitable-for:before {
        background-image: none;
    }
}

/* ================================
   Success Stories Slider - Layout
================================ */

.success-stories-section {
    position: relative;
    width: 100%;
    max-width: calc(100vw - 10%) !important;
    margin: 0 auto;
    padding: 32px 0 80px;
    overflow: hidden;
}

.success-title {
    max-width: calc(100vw - 10%) !important;
    width: 1330px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.success-title .elementor-heading-title {
    margin-left: 16px;
}

.success-stories-wrapper {
    width: 1620px !important;
    max-width: calc(100vw - 4rem) !important;
    height: 580px;
    margin-right: 0 !important;
}

.success-stories-slider {
    width: 100%;
    max-width: 100%;
}

.slick-dotted.slick-slider {
    margin-bottom: 0;
}


/* ================================
   Slick Structure
================================ */

.success-stories-slider .slick-list {
    overflow: hidden;
}

.success-stories-slider .slick-track {
    display: flex;
}

.success-stories-slider .slick-slide {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    height: 600px;
    padding: 60px 30px 20px 0;
    margin-left: 16px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.success-stories-slider .slick-slide.slick-active {
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
}


/* ================================
   Slide Card
================================ */

.success-story-slide {
    position: relative;
    box-sizing: border-box;
}

.success-story-card {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1290px;
    height: 440px;
    padding: 80px 0 80px 48px;
    overflow: visible;
    color: var(--e-global-color-secondary);
    background-image: url("/wp-content/uploads/2026/06/snapweb-success-stories-background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50px;
}

.success-story-content {
    position: relative;
    z-index: 2;
    width: 50%;
    max-width: 565px;
}

.success-story-quote {
    margin-bottom: 14px;
    font-size: 1.75rem;
    line-height: 1.3;
    font-weight: 300;
}


/* ================================
   Person Info
================================ */

.success-story-person {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px;
}

.success-story-person img {
    width: 66px;
    height: 66px !important;
    border-radius: 50% !important;
    object-fit: cover;
}

.success-story-person h3 {
    margin: 0;
    font-size: 24px !important;
    line-height: 1 !important;
    color: var(--e-global-color-secondary) !important;
}

.success-story-person p {
    margin: 4px 0 0;
    font-size: 16px;
    color: var(--e-global-color-secondary);
}


/* ================================
   Project Images Stack
================================ */

.success-story-images {
    position: absolute;
    top: -40px;
    left: 37%;
    z-index: 3;
    width: 720px;
    height: 540px;
    transform-origin: top right;
}

.success-story-project-image {
    position: absolute;
    width: 400px;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px 0 rgba(0, 86, 183, 0.29) !important;
}

.success-story-project-image.image-1 {
    top: 0;
    right: 0;
    z-index: 1;
}

.success-story-project-image.image-2 {
    top: 26%;
    right: -18%;
    z-index: 2;
}

.success-story-project-image.image-3 {
    top: 52%;
    right: -32%;
    z-index: 3;
}


/* ================================
   Website Link
================================ */

.website-link {
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 40%;
    margin-top: 32px;
    font-size: 20px;
    text-align: right;
}


/* ================================
   Slick Dots
================================ */

.success-stories-slider .slick-dots {
    position: absolute;
    right: 68%;
    bottom: 38px;
    display: flex;
    gap: 10px;
    width: 20%;
    padding: 0;
    margin: 0;
    list-style: none;
}

.slick-dots li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
}

.success-stories-slider .slick-dots li button {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
}

.success-stories-slider .slick-dots li button:before {
    top: 10.5px;
    left: 10.5px;
    width: 12px;
    height: 12px;
    font-size: 12px;
    line-height: 16px;
    opacity: 1;
    transform: translate(-50%, -50%);
}

.success-stories-slider .slick-dots li.slick-active button,
.success-stories-slider .slick-dots li button:hover {
    width: 24px;
    height: 24px;
    border: 1px solid var(--e-global-color-accent);
    border-radius: 50%;
    background: transparent;
}

.success-stories-slider .slick-dots li.slick-active button:before,
.success-stories-slider .slick-dots li button:hover:before {
    color: var(--e-global-color-accent) !important;
}


/* ================================
   Responsive - Large Desktop
================================ */

@media (max-width: 1770px) and (min-width: 1514px) {
    .success-story-card {
        margin-left: -6%;
    }

    .success-story-images {
        left: 30%;
    }

    .website-link {
        justify-content: center;
    }
}


/* ================================
   Responsive - Small Desktop
================================ */

@media (max-width: 1513px) and (min-width: 1360px) {
    .success-story-content {
        max-width: 516px;
    }

    .success-story-images {
        left: 28%;
    }

    .success-story-project-image {
        width: 400px;
    }

    .success-story-project-image.image-1 {
        top: -1%;
        right: -8%;
    }

    .success-story-project-image.image-2 {
        top: 35%;
        right: -20%;
    }

    .success-story-project-image.image-3 {
        display: none;
    }

    .website-link {
        width: 80%;
    }

    .success-stories-slider .slick-dots {
        right: 75%;
    }
}


/* ================================
   Responsive - Laptop
================================ */

@media (max-width: 1359px) and (min-width: 1025px) {
    .success-stories-section {
        width: 100%;
        max-width: calc(100vw - 4rem) !important;
    }

    .success-title .elementor-heading-title {
    margin-left: 0;
}

    .success-stories-slider .slick-slide {
        justify-content: flex-end;
        padding-right: 0;
        margin-left: 0;
    }

    .success-stories-slider .slick-dots {
        right: auto;
        left: 4rem;
        width: 60%;
    }

    .success-story-images {
        left: 25%;
    }

    .success-story-project-image {
        width: 380px;
    }

    .success-story-project-image.image-2 {
        top: 36%;
        right: -20%;
    }

    .success-story-project-image.image-3 {
        display: none;
    }

    .website-link {
        margin-top: 0;
    }
}


/* ================================
   Responsive - Tablet
================================ */

@media (max-width: 1024px) {
    .success-stories-section {
        padding: 32px 0 0;
    }

    .success-title .elementor-heading-title {
    margin-left: 0;
}

    .success-stories-wrapper {
        height: 560px;
    }

    .success-stories-slider .slick-slide {
        padding: 0;
        margin: 0;
    }

    .success-stories-slider .slick-dots {
        right: auto;
        bottom: 64px;
        width: 100%;
    }

    .success-story-card {
        flex-direction: column;
        padding: 32px 24px 32px 16px;
    }

    .success-story-content {
        width: 100%;
        min-width: 100%;
    }

    .success-story-quote {
        font-size: 20px;
        line-height: 1.3;
    }

    .success-story-person h3 {
        font-size: 22px !important;
    }

    .success-story-person img {
        width: 48px;
        height: 48px !important;
    }

    .success-story-images {
        position: relative;
        top: auto;
        left: auto;
    }

    .success-story-project-image {
        width: 380px;
    }

    .success-story-project-image.image-1 {
        top: -10%;
        right: 8%;
    }

    .success-story-project-image.image-2 {
        top: 30%;
        right: -16%;
    }

    .success-story-project-image.image-3 {
        display: none;
    }

    .website-link {
        width: 92%;
        margin-top: 8px;
    }
}


/* ================================
   Responsive - Mobile
================================ */

@media (max-width: 768px) {
    .success-stories-slider .slick-slide {
        height: 100%;
    }

    .success-title .elementor-heading-title {
    margin-left: 0;
}

    .success-stories-slider .slick-dots {
        bottom: -48px;
        width: 50%;
        gap: 6px;
    }

    .success-stories-slider .slick-dots li button,
    .success-stories-slider .slick-dots li.slick-active button,
    .success-stories-slider .slick-dots li button:hover {
        width: 14px;
        height: 14px;
    }

    .success-stories-slider .slick-dots li button:before {
        top: 6px;
        left: 5px;
        width: 10px;
        height: 10px;
        font-size: 12px;
        line-height: 13px;
        opacity: 1;
    }

    .success-story-card {
        flex-direction: column;
        min-height: 440px;
        padding: 32px 0;
        overflow: hidden;
        background-image: url("/wp-content/uploads/2026/06/snapweb-success-stories-background-mob.png");
        border-radius: 24px;
    }

    .success-story-content {
        padding: 0 16px;
    }

    .success-story-quote {
        font-size: 16px !important;
    }

    .success-story-person h3 {
        font-size: 14px !important;
    }

    .success-story-person p,
    .website-link {
        font-size: 12px !important;
    }

    .success-story-person img {
        width: 32px;
        height: 32px !important;
    }

    .success-story-images {
        width: 100%;
        height: 100%;
    }

    .success-story-project-image.image-1 {
        top: 8px;
        right: -16px;
        border-radius: 20px !important;
    }

    .success-story-project-image.image-2 {
        display: none;
    }

    .website-link {
        margin-top: 32px;
        width: 98%;
    }
}

/*how it works animation*/
.rive-col .elementor-element {
  min-height: 100%;
  position: relative;
}

.rive-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
}

.rive-wrapper canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

@media screen and (max-width: 1024px) {
    .rive-col {
        aspect-ratio: 1 / 1;
    }
}



#suitable-for > div > div.elementor-element.e-con-full.e-flex.e-con.e-child > div.elementor-element.e-con-full.suitable-item.e-flex.e-con.e-child.animated.fadeIn::before{
	'top':0;
	'left':0;
	'width':100%;
	'height':100%
}