.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0;
}

.front-page {
    transition: background-color 0.5s ease;
}

.front-page .services,
.front-page .features,
.front-page .testimonials,
.front-page .faq {
  background: transparent;
}

.front-page,
.service-detail-page {
    transition: background-color 0.45s ease;
}
.front-page.bg-services,
.service-detail-page.bg-services {
    background-color: var(--bg-accent-gr);
}
.front-page.bg-features {
    background: var(--bg-accent-yl);
}
.front-page.bg-testimonials {
    background: var(--bg-accent-yl);
}
.front-page.bg-faq,
.service-detail-page.bg-faq {
    background-color: var(--bg-100);
}


/* Section Padding */
.video-hero {
    padding: 80px 2em;
}
.process {
    padding: 80px 2em 140px;
}
.services {
    padding: 20px 2em;
}
.features {
    padding: 140px 2em;
}
.faq {
    padding: 140px 2em 80px;
}

/* Centered Text */
.process .container,
.services .container,
.testimonials .container {
    text-align: center;
}

/* Spacing */
.process h2 {
    margin: 0 auto 1em;
    max-width: 720px;
}
.services h2 {
    margin: 0 auto 1em;
    max-width: 740px;
}
.testimonials h2 {
    margin: 0 auto 1em;
    max-width: 650px;
}

/* Home Page - Video Hero
=============================== */
.video-hero .container {
    text-align: center;
}
.video-hero-stars {
    position: absolute;
}
.video-thumbnail-container {
    position: relative;
    height: 660px;
    border-radius: var(--img-corners);
    overflow: hidden;
}
.video-thumbnail {
    filter: brightness(0.6);
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--img-corners);
}
.video-hero-text {
    position: absolute;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: start;
    gap: 2em;
    background-color: var(--accent-90);
    width: 100%;
    padding: 3em 4em;
    border-radius: 0 0 20px 20px;
    text-align: left;
}
.video-hero-text h4,
.video-hero-text p {
    margin: 0;
    align-self: center;
}
.video-play-btn{
    position: absolute;
    bottom: 120px;
    left: 4em;
    z-index: 1;
    gap: 1em;
    border: 0;
    cursor: pointer;
}
.video-play-btn:hover{
    filter: brightness(0.9);
}

/* Stars */
.video-hero .container {
    position: relative;
}
.video-hero-title-wrap .star-1,
.video-hero-title-wrap .star-2 {
    position: absolute;
}
.video-hero-title-wrap .star-2 {
    right: 100px;
    top: 75px;
}
.video-hero-title-wrap .star-1 {
    right: 280px;
    top: 0;
}

/* Home Page - Process
=============================== */
.process-row {
    display: grid;
    grid-template-columns: 1fr 3fr;
    text-align: left;
    border-bottom: 1px solid var(--outline-100);
    align-items: center;
}
.process-row:last-of-type {
    border: 0;
}
.process-title {
    margin: 1.5em 0;
}
.process-text {
    margin: 0;
}

/* Home Page - Features
=============================== */
.features .container {
    text-align: center;
}
.logo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2em 5em;
    justify-content: center;
    align-items: center;
}

/* Large Screens 
=============================== */
@media only screen and (max-width: 1200px) {
    .process {
        padding: 80px 2em 80px;
    }
}
@media only screen and (max-width: 1080px) {
    .video-hero-title-wrap .star-1 {
        right: 210px;
    }
    .video-hero-title-wrap .star-2 {
        right: 34px;
        top: 80px;
    }
    
}

@media only screen and (max-width: 1024px) {
    .video-hero {
        padding: 40px 2em;
    }
    .video-hero-title-wrap .star-1 {
        right: 180px;
    }
    .video-hero-title-wrap .star-2 {
        right: 70px;
        top: 80px;
    }
    .process {
        padding: 40px 2em 40px;
    }
    .front-page .features {
        padding: 80px 2em;
    }
    .front-page .faq {
        padding: 80px 2em;
    }
    .pre-footer-cta {
        padding: 80px 2em
    }
}

/* Small Screens 
=============================== */
@media only screen and (max-width: 997px) {
    .video-hero-title-wrap .star-1 {
        right: 180px;
    }
    .video-hero-title-wrap .star-2 {
        right: 70px;
        top: 70px;
    }
    .video-hero .section-title {
        font-size: 3.5em;
    }
    .services h2 {
        margin: 0 auto 1.5em;
    }
}

@media only screen and (max-width: 768px) {
    .video-hero-title-wrap .star-1 {
        right: 200px;
        top: -8px;
    }
    .video-hero-title-wrap .star-2 {
        right: 110px;
        top: 26px;
    }
    .video-hero-title-wrap .star-1 svg {
        width: 16px;
    }
    .video-hero-title-wrap .star-2 svg {
        width: 18px;
    }
    .video-hero .section-title {
        font-size: 2em;
    }
    .video-thumbnail-container {
        height: 560px;
    }
    .video-play-btn {
        bottom: 128px;
        left: 1.5em;
    }
    .video-hero-text {
        grid-template-columns: 1fr;
        gap: 0.5em;
        padding: 40px 24px 24px;
    }
    .video-hero {
        padding: 20px 2em;
    }
    .process {
        padding: 40px 2em 40px;
    }
    .process-title {
        margin-top: 1em;
    }
    .process-text {
        margin: 1em 0;
    }
    .process h2 {
        max-width: 530px;
    }
    .process-row {
        align-items: flex-start;
    }
    .features {
        padding: 40px 2em;
    }
    .faq {
        padding: 40px 2em;
    }
    .features .eyebrow {
        margin-bottom: 2em;
    }
    .features .logo-grid {
        gap: 1em 2em;
    }
    .services h2 {
        margin: 0 auto 1em;
    }
    .testimonials h2 {
        margin: 0 auto 0.5em;
    }
}

@media only screen and (max-width: 480px) {
    .video-hero {
        padding: 2.5em 1em 1em;
    }
    .video-hero .section-title {
        max-width: 250px;
        margin: 0 auto;
    }
    .video-hero .lg-text {
        max-width: 290px;
        margin: 0.5em auto 2em;
    }
    .video-hero-title-wrap .star-1 {
        right: 180px;
        top: 38px;
    }
    .video-hero-title-wrap .star-2 {
        top: 68px;
        right: 94px;
    }
    .video-hero-title-wrap .star-1 svg {
        width: 14px;
    }
    .video-hero-title-wrap .star-2 svg {
        width: 16px;
    }
    .video-thumbnail-container {
        height: 450px;
    }
    .video-play-btn {
        bottom: 156px;
    }
    .process {
        padding: 3em 1em;
    }
    .process-row {
        grid-template-columns: none;
        gap: 0.3em;
    }
    .front-page .process-title {
        margin: 16px 0 0;
    }
    .front-page .process-text {
        margin: 0 0 1em;
    }
    .services {
        padding: 20px 1em;
    }
    .services h2 {
        margin: 0 0 1em;
    }
    .service-grid h3 {
        margin-top: 0.3em;
    }
    .service-grid .service-card {
        gap: 1em;
    }
    .logo-grid {
        gap: 2em;
    }
    .front-page .features {
        padding: 80px 1em;
    }
    .front-page .faq,
    .faq {
        padding: 40px 1em;
    }
    .pre-footer-cta {
        padding: 40px 1em;
    }
    .pre-footer-cta h2 {
        font-size: 1.5em;
    }
    .footer-top {
        flex-direction: column;
        gap: 2em;
    }
    .formkit-form[data-uid="5ff7ac551c"] .formkit-fields {
        width: 100%;
    }
    .footer-newsletter h3 {
        font-size: 1.5em;
        margin-bottom: 0.8em;
        text-align: center;
        line-height: 1.3;
    }
    .footer-newsletter {
        margin: auto;
    }
    .footer-links {
        text-align: center;
        margin: auto;
    }
    .footer-bottom-container {
        flex-direction: column;
        padding: 1em 1em 2em;
        gap: 8px;
    }
    .footer-socials, .footer-copyright {
        margin: auto;
    }
    .footer-copyright {
        order: 2;
    }
    .footer-socials {
        order: 1;
    }
}

@media only screen and (max-width: 395px) {
    .video-play-btn {
        bottom: 156px;
    }
    .video-hero-title-wrap .star-1 {
        right: 136px;
    }
    .video-hero-title-wrap .star-2 {
        right: 50px;
    }
}

@media only screen and (max-width: 320px) {
    .video-play-btn {
        bottom: 211px;
    }
}