@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

header nav ul li:nth-child(3) a {
    font-weight: 700;
}

@media only screen and (min-width: 0px), (min-device-width: 0px) {
    .box-container {
        width: 100%;
        margin: 0 auto;
    }

    .solutions-mobile {
        display: none;
    }

    .background-mobile-header {
        width: 100%;
        padding: 28.95vh 0 3.53vh 0;
        background: url("/assets/backgrounds/mulher_background.png");
        background-position: top;
        background-size: cover;
        background-repeat: no-repeat;
    }

    /* Hero Section */
    .hero {
        margin: 0 auto;
        width: 80.9vw;
        color: var(--white);
        text-align: center;
        align-items: center;
        justify-content: center;

        .background-image {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 139.55vh;
            z-index: -1;
        }

        .background-image-mobile {
            display: none;
        }

        .content-top {
            width: 100%;
            align-items: flex-start;

            h1 {
                font-weight: 500;
                font-size: 5.93vh;
                line-height: 1.2;
                text-align: left;
                width: 47.99vw;

                b {
                    font-weight: 700;
                }
            }

            .hero-features {
                margin-top: 6.36vh;
                
                ul {
                    list-style: none;
                    padding: 0;
                    margin: 0;

                    li {
                        display: flex;
                        align-items: center;
                        margin-bottom: 2.82vh;

                        img {
                            height: 3.67vh;
                            margin-right: 1.04vw;
                        }

                        p {
                            font-size: 2.82vh;
                        }
                    }
                }
            }

            .btn-default {
                margin-top: 4.24vh;
            }
        }
    }

    .bottom-service-info {
        margin-top: 30.79vh;
        align-items: center;
        color: var(--white);

        h2 {
            font-size: 5.51vh;
            font-weight: 700;
        }

        p {
            width: 44.31vw;
            margin-top: 4.24vh;
            font-size: 2.26vh;
            text-align: center;
        }
    }

    .background-desktop {
        width: 100%;
        padding: 2.4vh 0 21.33vh 0;
        background: url("/assets/backgrounds/dark_background_solutions.png");
        background-position: bottom;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .solutions-section {
        margin-top: 0;
        /* padding-bottom: 4rem;
        background: linear-gradient(to bottom, var(--dark-background), #212439); */
        display: flex;
        flex-direction: column;
        align-items: center;

        .background-image {
            position: absolute;
            top: 135.59vh;
            right: 0;
            width: 100%;
            height: 218.01vh;
            z-index: -1;
        }

        .background-image-mobile {
            display: none;
        }

        .solutions-tabs {
            width: 75.69vw;
            display: flex;

            ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                justify-content: space-between;
                width: 100%;
                border-bottom: 0.42vh solid #ffffff10;

                .tab-item {
                    width: 25.23vw;
                    align-items: center;
                    gap: 1.41vh;
                    position: relative;
                    text-align: center;
                    padding-bottom: 2.82vh;

                    font-size: 2.54vh;
                    color: #ffffff50;
                    font-weight: 600;

                    cursor: pointer;
                    transition: color 0.3s ease;
                    
                    img {
                        height: 3.53vh;
                        opacity: 0.5;
                    }

                    &.active {
                        font-weight: 700;
                        color: var(--white);
                        border-bottom-color: var(--orange);

                        img {
                            opacity: 1;
                            filter: brightness(0) saturate(100%) invert(42%) sepia(99%)
                            saturate(1354%) hue-rotate(359deg) brightness(101%) contrast(101%);
                        }
                    }
                }

                .tab-item:hover {
                    color: var(--white);
                }

                .tab-item.active::after {
                    content: "";
                    position: absolute;
                    bottom: -0.42vh;
                    left: 0;
                    width: 100%;
                    height: 0.42vh;
                    background-color: var(--orange);
                }
            }
        }

        .solutions-content-container {
            width: 77.08vw;
            display: flex;

            .solutions-content-card {
                background-color: #ffffff05;
                width: 100%;
                margin-top: 4.94vh;
                border-radius: 2.12vh;
                padding: 7.06vh 3.47vw;

                display: none;

                &.active {
                    display: flex;
                }

                .content-grid {
                    display: flex;
                    flex-direction: row;
                    width: 100%;

                    .text-content {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        width: 29.44vw;
                        gap: 7.34vh;

                        .feature-item {
                            display: flex;
                            align-items: flex-start;
                            gap: 1.5rem;

                            img {
                                height: 3.67vh;
                            }

                            .feature-text {
                                display: flex;
                                flex-direction: column;
                                color: var(--white);
                                gap: 1.41vh;
                                margin-top: 0.5vh;

                                h3 {
                                    font-size: 2.54vh;
                                    font-weight: 700;
                                    text-transform: uppercase;
                                }

                                p {
                                    font-size: 2.26vh;
                                    font-weight: 400;
                                }
                            }
                        }
                    }

                    .feature-image {
                        height: 45.48vh;
                        width: 35.21vw;
                        object-fit: cover;
                        margin-left: auto;
                        border-radius: 2.12vh;
                    }
                }
            }
        }

        .carousel-dots {
            margin-top: 2.82vh;
            justify-content: center;
            align-items: center;
            gap: 0.5vw;
            cursor: pointer;
            
            .dot {
                height: 1.13vh;
                width: 1.13vh;
                border-radius: 50%;
                background-color: var(--white);

                &.active {
                    height: 1.41vh;
                    width: 1.41vh;
                    background-color: var(--orange);
                }
            }
        }
    }

    .features-section {
        margin-top: 20.48vh;
        /* background: linear-gradient(to bottom, #212439, #24306c); */
        color: var(--white);

        .features-header {
            width: 49.17vw;
            text-align: center;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .features-header h2 {
            font-size: 5.51vh;
            font-weight: 700;
        }

        .features-header p {
            font-size: 2.26vh;
            margin-top: 3.39vh;
            width: 37.43vw;
        }

        .features-illustration {
            display: flex;
            justify-content: center;
            align-items: center;

            gap: 1.25vw;
            margin-top: 13.28vh;

            img {
                height: 41.95vh;
                position: relative;
                z-index: 10;
            }

            .features-left {
                align-items: flex-start;
                gap: 4.94vh;

                .feature-bubble {
                    justify-content: flex-start;

                    img { 
                        margin-left: -2vw;
                    }
                }
            }

            .features-left .feature-bubble:nth-child(1), 
            .features-left .feature-bubble:nth-child(3) {
                margin-left: 2.43vw
            }

            .features-right {
                align-items: flex-end;
                gap: 4.94vh;

                .feature-bubble {
                    justify-content: flex-end;
                    
                    img { 
                        margin-right: -2.1vw;
                    }
                }
            }

            .features-right .feature-bubble:nth-child(1), 
            .features-right .feature-bubble:nth-child(3) {
                margin-right: 2.43vw
            }

            .feature-bubble {
                width: 20.83vw;
                height: 11.02vh;
                border: 0.28vh solid #ffffff10;
                background-color: #ffffff05;
                border-radius: 2.12vh;
                padding: 2.82vh 1.39vw;

                display: flex;
                align-items: center;
            
                p {
                    margin: 0;
                    font-size: 1.98vh;
                }

                img {
                    height: 3.39vh;
                    position: absolute;
                }
            }
        }

        .features-illustration-mobile {
            display: none;
        }

        .illustration {
            display: none;
        }

        .bubble-solo {
            width: 20.83vw;
            height: 11.02vh;
            border: 0.28vh solid #ffffff10;
            background-color: #ffffff05;
            border-radius: 2.12vh;
            padding: 2.82vh 1.39vw;

            margin: 8.19vh auto 0 auto;
            display: flex;
            justify-content: center;
            
            p {
                margin: 0;
                font-size: 1.98vh;
                text-align: center;
            }

            img {
                height: 3.39vh;
                position: absolute;
                margin-top: -5vh;
            }
        }
    }

    .faq-section {
        width: 72.22vw;
        /* margin: 21.19vh auto 0 auto; */
        margin: 21.19vh auto 0 auto;

        .faq-main-header {
            align-items: flex-start;
            gap: 2.12vh;

            img {
                width: 5.23vh;
            }

            h2 {
                font-weight: 400;
                font-size: 5.51vh;
                margin-block-start: 0;
            }

            p {
                color: var(--black);
                width: 31.94vw;
                font-size: 2.26vh;
            }
        }

        .faq-content-wrapper {
            display: flex;
            gap: 4.86vw;
            margin-top: 7.06vh;

            ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: column;

                li {
                    width: 20.83vw;
                    height: 7.06vh;
                    display: flex;
                    align-items: center;
                    padding: 2.11vh 1.04vw;
                    border-radius: 1.13vh;
                    gap: 0.69vw;
                        
                    cursor: pointer;
                    transition: background-color 0.3s ease;
                    color: #b7b7b7;
                    font-size: 2.54vh;
                    font-weight: 500;

                    img {
                        width: 2.82vh;
                    }

                    &.active {
                        background-color: #f7f7f7;
                        font-weight: 700;
                        color: var(--orange);

                        img {
                            filter: brightness(0) saturate(100%) invert(42%) sepia(99%)
                                saturate(1354%) hue-rotate(359deg) brightness(101%) contrast(101%);
                            }
                    }
                }

                li:hover {
                    background-color: #f0f0f0;
                }
            }

			.faq-menu-mobile { 
				display: none;
			}

            .faq-accordion {
                display: flex;
                flex-direction: column;
                border-top: 0.28vh solid #EAEAEA;

                .accordion-item {
                    border-bottom: 0.28vh solid #eaeaea;
                    display: none;

                    .accordion-header {
                        width: 100%;
                        background: none;
                        border: none;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 3.53vh 0.42vw 3.53vh 0.42vw;
                        text-align: left;
                        font-size: 2.82vh;
                        font-weight: 700;
                        cursor: pointer;

                        .accordion-icon-wrapper {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: 0.85vh 0.85vh;
                            border-radius: 0.71vh;

                            background-color: #eaeaea;
                            transition: background-color 0.5s ease-in-out;

                            img {
                                height: 1.88vh;
                                transition: filter 0.5s ease-in-out, transform 0.5s ease-in-out;
                            }
                        }
                    }

                    .accordion-content {
                        overflow: hidden;
                        max-height: 0;
                        transition: max-height 0.5s ease-in-out;

                        p {
                            font-size: 2.26vh;
                            color: #4d4d4d;

                            margin: 0 3.47vw 3.53vh 0.42vw;
                        }
                    }
                }

                .accordion-item.active .accordion-icon-wrapper {
                    background-color: var(--orange);
                }

                .accordion-item.active .accordion-header .accordion-icon-wrapper .icon-plus {
                    transform: rotate(45deg);
                    filter: brightness(0) invert(1);
                }

                .accordion-item.active .accordion-content {
                    max-height: 40vh;
                }

                .accordion-item.visible {
                    display: block;
                }
            }

			.faq-accordion-mobile {
				display: none;
			}
        }
    }

    .solution-for-section {
        width: 77.08vw;
        margin: 24.72vh auto 0 auto;

        .solution-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            h2 {
                font-size: 5.51vh;
                font-weight: 700;
                max-width: 23.82vw;
            }

            .solution-description {
                display: flex;
                align-items: center;
                font-size: 2.26vh;
                max-width: 29.72vw;
            }
        }

        .arrow {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 4.23vh;
			width: 4.23vh;
			background-color: #EAEAEA;
			border-radius: 5px;
            position: absolute;
            justify-self: end;
            margin-top: -9.06vh;

			img {
				width: 1.83vh;
                transform: rotate(-90deg);
			}
		}

        .solution-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2.43vw;

            margin-top: 7.06vh;
            padding-top: 7.06vh;
            border-top: 0.28vh solid;
            border-image: linear-gradient(to right, #3A41F0 35%, #EAEAEA 35%) 1;

            .solution-card {
                cursor: pointer;
                background-color: #f7f7f7;
                border-radius: 2.82vh;
                padding: 3.53vh 3.53vh 4.52vh 3.53vh;
                text-align: left;
                transition: transform 0.3s ease, box-shadow 0.3s ease;

                img {
                    height: 3.11vh;
                }

                p {
                    font-size: 2.25vh;
                    font-weight: 500;
                    margin-top: 1.41vh;
                }
            }

            /* .solution-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
            } */
        }

        .mobile-arrow {
            display: none;
        }
    }

    .support-section {
        width: 77.08vw;
        margin: 24.72vh auto 0 auto;

        .support-intro {
            align-items: center;

            h2 {
                font-size: 5.51vh;
            }

            p {
                max-width: 40.62vw;
                margin-top: 4.24vh;
                font-size: 2.26vh;
                text-align: center;
            }
        }

        .cta-card {
            margin-top: 7.06vh;
            width: 100%;
            display: flex;
            align-items: center;

            .background-image {
                width: 100%;
                object-fit: cover;
            }

            .background-image-mobile {
                display: none;
            }

            .cta-content {
                position: absolute;
                padding: 10.59vh 0 10.59vh 5.21vw;
                color: var(--white);
            
                h3 {
                    font-size: 2.82vh;
                    max-width: 27.78vw;
                }

                p {
                    margin-top: 2.54vh;
                    font-size: 2.26vh;
                    max-width: 24vw;
                }

                .mobile-only {
                    display: none;
                }

                button {
                    margin-top: 4.94vh;
                }
            }
        }
    }
}

@media only screen and (max-width: 560px), (max-device-width: 560px) {
    .box-container {
        width: 100%;
        /* padding: 0 32px; */
    }

    .background-mobile-header {
        width: 100%;
        padding: 205px 32px 75px 32px;
        background: url("/assets/backgrounds/background-solutions-mobile.png");
        background-position: top;
        background-size: cover;
        background-repeat: no-repeat;
    }

    /* Hero Section */
    .hero {
        margin: 0; /* Altura do header */
        width: 100%;

        .background-image {
            display: none;
        }

        .content-top {
            width: 100%;
            align-items: flex-start;

            h1 {
                font-size: 29px;
                width: 100%;
            }

            .hero-features {
                margin-top: 34px;
                
                ul {
                    li {
                        margin-bottom: 30px;

                        img {
                            width: 30px;
                            margin-right: 16px;
                        }

                        p {
                            font-size: 16px;
                            text-align: left;
                        }
                    }
                }
            }

            .btn-default {
                margin-top: 20px;
            }
        }
    }

    .bottom-service-info {
        margin-top: 153px;

        h2 {
            font-size: 29px;
            text-align: center;
        }

        p {
            width: 100%;
            margin-top: 20px;
            font-size: 16px;
        }
    }

    .background-mobile {
        width: 100%;
        padding: 0 32px;
        background: url("/assets/backgrounds/dark_background_solutions_mobile.png");
        background-position: bottom;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .background-desktop {
        padding: 0;
        background: none;
    }

    .solutions-section {
        display: none;
    }

    .solutions-mobile {
        display: block;
        margin-top: 0;

		.glider-track {
			gap: 20px;
		}

        .mobile-content-card {
			display: flex;
			align-items: center;
			justify-content: start;
            margin-top: 25px;
			color: var(--white);

            .tab-item {
                width: fit-content;
                gap: 10px;
                padding-bottom: 0;

                font-size: 18px;
                font-weight: 600;
                    
                img {
                    height: 25px;
                    opacity: 1;
                    filter: brightness(0) saturate(100%) invert(42%) sepia(99%)
                        saturate(1354%) hue-rotate(359deg) brightness(101%) contrast(101%);
                }
            }

            .content-grid {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;

				margin-top: 25px;
				border-radius: 15px;
            	padding: 25px;
				background-color: #ffffff05;

				.feature-image {
                    height: auto;
                    width: 100%;
					object-fit: cover;
                    margin-top: 0;
                    border-radius: 8px;
                }

                .text-content {
					display: flex;
					flex-direction: column;
					justify-content: center;
                    margin-top: 30px;
                    width: 100%;
                    gap: 30px;

                    .feature-item {
						display: flex;
						align-items: flex-start;
                        gap: 12px;

                        img {
                            height: 20px;
                        }

                        .feature-text {
							display: flex;
							flex-direction: column;
                            gap: 12px;
                            margin-top: 2px;

                            h3 {
                                font-size: 16px;
                                font-weight: 600;
								text-transform: uppercase;
                            }

                            p {
                                font-size: 14px;
								font-weight: 400;
                            }
                        }
                    }
                }
            }
        }
    }

    .features-section {
        margin-top: 100px;

        .features-header {
            width: 100%;
            text-align: left;

            h2 {
                font-size: 29px;
            }

            p {
                font-size: 16px;
                margin-top: 20px;
                width: 100%;
            }
        }

        .features-illustration {
            display: none;
        }

        .features-illustration-mobile {
            display: flex;
            flex-direction: column;
            overflow: hidden;

            gap: 15px;
            margin-top: 50px;
            margin-left: -32px;
            width: 100vw;

            > * {
                flex: 0 0 100%;
            }

            .features-line {
                align-items: center;
                gap: 10px;
                width: 100%;

                .row {
                    gap: 10px;
                }

                .feature-bubble {
                    min-width: 280px;
                    height: auto;
                    border: 2px solid #ffffff40;
                    border-radius: 10px;
                    padding: 12px;

                    p {
                        font-size: 14px;
                    }
                }

                img {
                    width: 27px;
                }
            }
            
            .features-line:nth-child(1) {
                .row {
                    will-change: transform;
                    animation: scrollRight 10s linear infinite;
                }
            }

            .features-line:nth-child(2) {
                .row {
                    will-change: transform;
                    animation: scrollLeft 10s linear infinite;

                    img {
                        transform: scaleX(-1);
                    }
                }
            }

            .features-line:nth-child(3) {
                .row {
                    will-change: transform;
                    animation: scrollRight 15s linear infinite;
                }
            }
        }

        .illustration {
            display: block;
            height: 196px;
            margin: 52px 0 84px 0;
        }

        .bubble-solo {
            display: none;
        }
    }

    .faq-section {
        width: 100%;
        padding: 0 32px;
        margin-top: 75px;

        .faq-main-header {
            gap: 16px;

            img {
                width: 25px;
            }

            h2 {
                font-size: 29px;
            }

            p {
                width: 100%;
                font-size: 16px;
            }
        }

        .faq-content-wrapper {
            flex-direction: column;
            gap: 20px;
            margin-top: 50px;

            aside {
				display: none;
			}

			.faq-menu-mobile {
				display: flex;
				flex-direction: column;

				.menu-option {
					width: 100%;
                    height: 50px;
					display: flex;
					align-items: center;
                    padding: 15px 14px;
                    border-radius: 8px;
                    gap: 10px;
                        
					cursor: pointer;
                    transition: background-color 0.3s ease;
                    color: #b7b7b7;
                    font-weight: 500;
                    font-size: 18px;

					img {
                        width: 20px;
                    }

                    &.active {
                        background-color: #f7f7f7;
                        font-weight: 700;
                        color: var(--orange);

                        img {
                            filter: brightness(0) saturate(100%) invert(42%) sepia(99%)
                                saturate(1354%) hue-rotate(359deg) brightness(101%) contrast(101%);
                            }
                    }
				}
			}

			.faq-accordion {
				display: none;
			}

            .faq-accordion-mobile {
				display: flex;
                flex-direction: column;
                border-top: 1px solid #EAEAEA;

                .accordion-item {
                    border-bottom: 1px solid #eaeaea;
					display: none;

                    .accordion-header-mobile {
                        width: 100%;
						background: none;
                        border: none;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 20px 14px;
						text-align: left;
                        font-size: 16px;
						font-weight: 700;
                        cursor: pointer;
                        gap: 20px;

                        .accordion-icon-wrapper {
							display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: 6px;
                            border-radius: 5px;

							background-color: #eaeaea;
                            transition: background-color 0.5s ease-in-out;

                            img {
                                height: 13px;
								transition: filter 0.5s ease-in-out, transform 0.5s ease-in-out;
                            }
                        }
                    }

                    .accordion-content {
						overflow: hidden;
                        max-height: 0;
                        transition: max-height 0.5s ease-in-out;

                        p {
                            font-size: 14px;
							color: #4d4d4d;

                            margin: 0 38px 30px 14px;
                        }
                    }
                }

				.accordion-item.active .accordion-icon-wrapper {
                    background-color: var(--orange);
                }

                .accordion-item.active .accordion-header-mobile .accordion-icon-wrapper .icon-plus {
                    transform: rotate(45deg);
                    filter: brightness(0) invert(1);
                }

                .accordion-item.active .accordion-content {
                    max-height: 290px;
                }

				.accordion-item.visible {
                    display: block;
                }
            }
        }
    }

    .solution-for-section {
        width: 100%;
        padding: 0 32px;
        margin-top: 120px;

        .solution-header {
            flex-direction: column;

            h2 {
                font-size: 29px;
                max-width: 75%;
            }

            .solution-description {
                margin-top: 20px;
                align-items: start;
                font-size: 16px;
                max-width: 100%;

				border-left: 2px solid #3A41F0;
				padding-left: 15px;
            }
        }

        .arrow {
            display: none;
        }

        .solution-cards-grid {
			border-left: 2px solid #EAEAEA;
            border-top: none;
            border-image: none;
			padding: 31px 0 16px 15px;
            margin-top: 0;

            gap: 25px;

            .solution-card {
                border-radius: 16px;
                padding: 24px;

                img {
                    height: 22px;
                }

                p {
                    font-size: 16px;
                    margin-top: 14px;
                }
            }
        }

		.mobile-arrow {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 30px;
			width: 30px;
			background-color: #EAEAEA;
			border-radius: 5px;
			margin-left: -14px;

			img {
				width: 13px;
			}
		}
    }

    .support-section {
        width: 100%;
        padding: 0 32px;
        margin-top: 100px;

        .support-intro {
            align-items: start;

            h2 {
                font-size: 29px;
            }

            p {
                max-width: 100%;
                margin-top: 20px;
                font-size: 16px;
                text-align: start;
            }
        }

        .cta-card {
            margin-top: 50px;

            .background-image {
                display: none;
            }

            .background-image-mobile {
                width: 100%;
                object-fit: cover;
                display: block;
            }

            .cta-content {
                padding: 0 62px 0 30px;
            
                h3 {
                    display: none;
                }

                p {
                    margin-top: 0;
                    font-size: 16px;
                    max-width: 100%;
                    font-weight: 600;
                    text-align: center;
                }

                .desktop-only {
                    display: none;
                }

                .mobile-only {
                    display: block;
                }

                a {
                    height: fit-content;
                    width: fit-content;
                    margin: 25px auto 0 auto;
                }

                button { 
                    margin-top: 0;
                }
            }
        }
    }
}