/*
* Page : Marketing
* type : css
* Apply on 1 page
*/

/* componnents on all pages */
@import '../components/footer.css';
@import '../components/buttons.css';
@import '../components/loader.css';
@import '../components/hero.css';
@import '../components/forms.css';
@import '../components/toggle.css';

/* componnents on this page */
@import '../components/carousel.css';
@import '../components/pricing.css';
@import '../components/portfolio.css';
@import '../components/reviews.css';
@import '../components/faq.css';

/* ------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------- */

/* hero section */
[data-barba-namespace="marketing"] section.hero .cta-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: fit-content;
}
[data-barba-namespace="marketing"] .cta-container .third-button, [data-barba-namespace="marketing"] .cta-container .secondary-button {
    width: fit-content;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* hero cards */
/* card container */
[data-barba-namespace="marketing"] .card-container {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1424px;
    margin: 0 auto;
    pointer-events: none;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* cards */
[data-barba-namespace="marketing"] .perf-card, [data-barba-namespace="marketing"] .seo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 152px;
    height: 120px;
    border-radius: 8px;
    opacity: 0;
}
/* darkmode theme */
body.dark [data-barba-namespace="marketing"] .perf-card stop, body.dark [data-barba-namespace="marketing"] .seo-card stop {
    stop-color: #a7a1c1;
}

/* motion hero card */
[data-barba-namespace="marketing"] section.hero.visible .perf-card {
    will-change: transform;
    animation: apearHeroCards 300ms 700ms ease-in-out both, floatLeftCard 8s linear infinite both;
}
[data-barba-namespace="marketing"] section.hero.visible .seo-card {
    will-change: transform;
    animation: apearHeroCards 300ms 700ms ease-in-out both, floatRightCard 8s linear infinite both;
}
@keyframes apearHeroCards {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}
@keyframes floatLeftCard {
    0% {
        transform: translate(0,0);
    } 25% {
        transform: translate(5px,-15px);
    } 50% {
        transform: translate(0,0);
    } 75% {
        transform: translate(5px, 15px);
    } 100% {
        transform: translate(0,0);
    }
}
@keyframes floatRightCard {
    0% {
        transform: translate(0,0);
    } 25% {
        transform: translate(-5px, 15px);
    } 50% {
        transform: translate(0,0);
    } 75% {
        transform: translate(-5px,-15px);
    } 100% {
        transform: translate(0,0);
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* perf card container */
[data-barba-namespace="marketing"] .perf-card .graphique-card {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
[data-barba-namespace="marketing"] .perf-card .graphique-card svg.graphique-value {
    position: absolute;
    margin: 6px 14px 0px 0px;
}
/* darkmode theme */
body.dark [data-barba-namespace="marketing"] .graphique-value, body.dark [data-barba-namespace="marketing"] .graphique-value path {
    fill: var(--secondary-darkmode-color);
}
body.dark [data-barba-namespace="marketing"] .bg-counter-svg path {
    fill: var(--bg-2-darkness-element);
}
/* perf card content container */
[data-barba-namespace="marketing"] .perf-card .title-container {
    position: absolute;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
[data-barba-namespace="marketing"] .perf-card .values-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100px;
}
[data-barba-namespace="marketing"] .perf-card .values-container div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
}
/* perf card title */
[data-barba-namespace="marketing"] .card-container .title-card {
    font-size: 14px;
    line-height: 14px;
    font-weight: 700;
    text-align: left;
}
/* darkmode theme */
body.light [data-barba-namespace="marketing"] .card-container .title-card {
    color: var(--dark-color);
}
body.dark [data-barba-namespace="marketing"] .card-container .title-card {
    color: var(--white-color);
}
/* perf card text */
[data-barba-namespace="marketing"] .card-container .text-value {
    font-size: 10px;
    line-height: 10px;
    font-weight: 700;
    text-align: left;
}
body.light [data-barba-namespace="marketing"] .card-container .text-value {
    color: var(--dark-color);
}
body.dark [data-barba-namespace="marketing"] .card-container .text-value {
    color: var(--lightness-color);
}
[data-barba-namespace="marketing"] .card-container .text-card {
    font-size: 4px;
    line-height: 4px;
    text-align: center;
}
/* darkmode theme */
body.light [data-barba-namespace="marketing"] .card-container .text-card {
    color: var(--dark-grey-color);
}
body.dark [data-barba-namespace="marketing"] .card-container .text-card {
    color: var(--lightness-color);
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* seo card svg */
[data-barba-namespace="marketing"] .seo-card .more-icon {
    position: absolute;
    right: 19px;
    top: -8px;
}
body.dark [data-barba-namespace="marketing"] .seo-card .more-icon path {
    fill: var(--secondary-darkmode-color);
}
body.dark [data-barba-namespace="marketing"] .seo-card .hr-icon path, body.dark [data-barba-namespace="marketing"] .seo-card .graph-icon path{
    stroke: var(--secondary-darkmode-color);
}
[data-barba-namespace="marketing"] .seo-card .hr-icon {
    position: absolute;
    right: 26px;
    top: 5px;
}
[data-barba-namespace="marketing"] .seo-card .abs-ord-axe {
    position: absolute;
    bottom: 8px;
    left: 8px;
}
[data-barba-namespace="marketing"] .seo-card .title-card {
    position: absolute;
    bottom: 18px;
    right: 18px;
}
[data-barba-namespace="marketing"] .seo-card .text-card {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 73px;
    text-align: left;
}

/* scroll indicator */
[data-barba-namespace="marketing"] section.hero svg.scroll-indicator {
    opacity: 0;
}
[data-barba-namespace="marketing"] section.hero.visible svg.scroll-indicator {
    will-change: transform;
    animation: apearHeroScrollIndicator 300ms 700ms ease-in-out both, scrollIndicator 1200ms ease-in-out infinite both;
}
@keyframes apearHeroScrollIndicator {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}
@keyframes scrollIndicator {
    0% {
        transform: translateY(0);
        fill-opacity: 1;
    } 50% {
        transform: translateY(-3px);
        fill-opacity: 0.5;
    } 100% {
        transform: translateY(0);
        fill-opacity: 1;
    }
}

/* animation */
/* portfolio title content */
[data-barba-namespace="marketing"] section.hero h1, [data-barba-namespace="marketing"] section.hero p, [data-barba-namespace="marketing"] section.hero strong {
    color: hsl(0 0% 100% / 0.2);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
}

[data-barba-namespace="marketing"] section.hero.visible .hero-content h1 {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}
[data-barba-namespace="marketing"] section.hero.visible .hero-content p {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}
[data-barba-namespace="marketing"] section.hero.visible .hero-content strong {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}

/* button service section */
[data-barba-namespace="marketing"] section.hero .cta-container .secondary-button, [data-barba-namespace="marketing"] section.hero .cta-container .third-button, [data-barba-namespace="marketing"] section.hero .fourth-button {
    opacity: 0;
    transform: scale(1.1);
}
/* aniamtion */
[data-barba-namespace="marketing"] section.hero.visible .cta-container .secondary-button {
    will-change: transform;
    animation: buttonApear 300ms 250ms ease-in forwards;
}
[data-barba-namespace="marketing"] section.hero.visible .cta-container .third-button {
    will-change: transform;
    animation: buttonApear 300ms 350ms ease-in forwards;
}
[data-barba-namespace="marketing"] section.hero.visible .fourth-button {
    will-change: transform;
    animation: buttonApear 300ms 450ms ease-in forwards;
}

/* darkmode theme */
body.light [data-barba-namespace="marketing"] section.hero h1 {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
body.dark [data-barba-namespace="marketing"] section.hero h1, body.dark [data-barba-namespace="marketing"] section.hero strong {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
body.light [data-barba-namespace="marketing"] section.hero p  {
    background-image: linear-gradient(90deg, var(--lightness-color), var(--lightness-color));
}
body.dark [data-barba-namespace="marketing"] section.hero p  {
    background-image: linear-gradient(90deg, var(--lightness-color), var(--lightness-color));
}

/* responsiv */
/* breakpoints */
@media (max-width: 1370px) {
    [data-barba-namespace="marketing"] .card-container {
        display: none;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------- */

/* web site features section */
[data-barba-namespace="marketing"] .web-site-features {
    justify-content: center;
    align-items: center;
    gap: 56px;
}
[data-barba-namespace="marketing"] .web-site-features .title-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 100%;
    gap: 16px;
    width: 100%;
}
[data-barba-namespace="marketing"] .web-site-features .title-container .title-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 24px;
}
[data-barba-namespace="marketing"] .web-site-features .title-container h2 {
    color: hsl(0 0% 100% / 0.2);
}
[data-barba-namespace="marketing"] .visible .web-site-features .title-container h2 {
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}
body.light [data-barba-namespace="marketing"] .visible .web-site-features .title-container h2 {
    background-image: linear-gradient(90deg, var(--dark-color), var(--dark-color));
}
body.dark [data-barba-namespace="marketing"] .visible .web-site-features .title-container h2 {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
[data-barba-namespace="marketing"] #web-site-features .title-container a {
    opacity: 0;
    transform: scale(1.2);
}
[data-barba-namespace="marketing"] .web-site-features-container {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-auto-rows: auto;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
body.light [data-barba-namespace="marketing"] .web-site-features-container {
    grid-template-columns: repeat(3, auto);
    gap: 16px;
}
body.dark [data-barba-namespace="marketing"] .web-site-features-container {
    grid-template-columns: repeat(3, auto);
    gap: 16px;
}
[data-barba-namespace="marketing"] .web-site-features-container .card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    opacity: 0;
    transform: scale(1.2);
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* title animation */
[data-barba-namespace="marketing"] #web-site-features.visible .title-container a {
    will-change: transform;
    animation: bouncedApear 300ms 150ms ease-in forwards;
}

/* card animation */
body [data-barba-namespace="marketing"] .visible .card.one {
    will-change: transform;
    animation: bouncedApear 300ms 300ms ease-in forwards;
}
body [data-barba-namespace="marketing"] .visible .card.eight {
    will-change: transform;
    animation: bouncedApear 300ms 350ms ease-in forwards;
}
body [data-barba-namespace="marketing"] .visible .card.three {
    will-change: transform;
    animation: bouncedApear 300ms 400ms ease-in forwards;
}
body [data-barba-namespace="marketing"] .visible .card.six {
    will-change: transform;
    animation: bouncedApear 300ms 450ms ease-in forwards;
}
body [data-barba-namespace="marketing"] .visible .card.four {
    will-change: transform;
    animation: bouncedApear 300ms 500ms ease-in forwards;
}
body [data-barba-namespace="marketing"] .visible .card.five {
    will-change: transform;
    animation: bouncedApear 300ms 550ms ease-in forwards;
}
body [data-barba-namespace="marketing"] .visible .card.two {
    will-change: transform;
    animation: bouncedApear 300ms 600ms ease-in forwards;
}
body [data-barba-namespace="marketing"] .visible .card.seven {
    will-change: transform;
    animation: bouncedApear 300ms 650ms ease-in forwards;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* darkmode theme */
body.dark [data-barba-namespace="marketing"] .web-site-features-container .card {
    max-width: initial;
    padding: 24px;
    border-radius: 16px;
    background: var(--bg-darkness-element);
    width: initial;
}
body.light [data-barba-namespace="marketing"] .web-site-features-container .card {
    max-width: initial;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(8, 0, 26, 0.24);
    background: rgba(246, 236, 246, 0.72);
    width: initial;
}
body.dark [data-barba-namespace="marketing"] .web-site-features-container .card {
    max-width: initial;
    padding: 24px;
    border-radius: 16px;
    background: var(--bg-darkness-element);
    width: initial;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* breakpoint */
@media (max-width: 1270px) {
    body.light [data-barba-namespace="marketing"] .web-site-features-container, body.dark [data-barba-namespace="marketing"] .web-site-features-container {
        grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
        gap: 32px 16px;
    }
    [data-barba-namespace="marketing"] .web-site-features-container .card {
        max-width: 100%;
    }

    body.light [data-barba-namespace="marketing"] .web-site-features-container .card {
        max-width: 100%;
        padding: 24px;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* svg */
[data-barba-namespace="marketing"] .web-site-features-container .card .svg-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}
[data-barba-namespace="marketing"] .web-site-features-container .card .svg-container svg {
    width: 18px;
    height: auto;
    overflow: visible;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* darkmode theme svg container */
body.light [data-barba-namespace="marketing"] .web-site-features-container .card .svg-container {
    background-color: var(--dark-color);
}
body.dark [data-barba-namespace="marketing"] .web-site-features-container .card .svg-container {
    background-color: var(--bg-body);
}
/* darkmode theme svg */
body.light [data-barba-namespace="marketing"] .web-site-features-container .card svg path {
    fill: var(--white-color);
}
body.dark [data-barba-namespace="marketing"] .web-site-features-container .card svg path {
    fill: var(--primary-darkmode-color);
}

/* ------------------------------------------------------------------------------------------------------------------------- */

[data-barba-namespace="marketing"] .web-site-features-container .card > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}
[data-barba-namespace="marketing"] .web-site-features-container .card strong {
    text-transform: capitalize;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------- */

/* services description section */
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section {
    padding: 16px 0px;
}
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 56px;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* title and text */
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section strong {
    color: var(--white-color);
}
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section p {
    color: var(--lightness-color);
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* card container */
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .about-services-container {
    display: grid;
    grid-auto-flow: column;
    gap: 56px;
    padding: 0px 152px;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* img services section */
body [data-barba-namespace="marketing"] .about-services-container .img-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
body [data-barba-namespace="marketing"] .about-services-container .img-container img {
    height: auto;
}
body [data-barba-namespace="marketing"] .about-services-container .img-container.reverse {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
body [data-barba-namespace="marketing"] .about-services-container .img-container.reverse img {
    height: auto;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* content services section */
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .content-about-services {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    height: 100%;
}

/* title container */
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .content-about-services .title-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 32px;
}

/* title */
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .content-about-services h2 {
    color: hsl(0 0% 100% / 0);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
}
body.light [data-barba-namespace="marketing"] section.about-services-section.darkness-section .content-about-services h2 {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
body.dark [data-barba-namespace="marketing"] section.about-services-section.darkness-section .content-about-services h2 {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
/* animation title */
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section.visible .content-about-services h2 {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}

/* subtitle */
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .content-about-services p.content {
    color: hsl(0 0% 100% / 0);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
}
body.light [data-barba-namespace="marketing"] section.about-services-section.darkness-section .content-about-services p.content {
    background-image: linear-gradient(90deg, var(--lightness-color), var(--lightness-color));
}
body.dark [data-barba-namespace="marketing"] section.about-services-section.darkness-section .content-about-services p.content {
    background-image: linear-gradient(90deg, var(--lightness-color), var(--lightness-color));
}
/* animation title */
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section.visible .content-about-services p.content {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}

/* call button services */
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .content-about-services .fourth-button {
    opacity: 0;
    transform: scale(1.2);
}
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section.visible .content-about-services .fourth-button {
    will-change: transform;
    animation: bouncedApear 300ms 150ms ease-in forwards;
}

/* about services */
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .content-about-services .description-container {
    opacity: 0;
    transform: scale(1.2);
}

/* section 1 aboute services */
/* animation card 1 */
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section.visible .content-about-services.one .description-container.one {
    will-change: transform;
    animation: bouncedApear 300ms 500ms ease-in forwards;
}
/* animation text card 2 */
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section.visible .content-about-services.one .description-container.two {
    will-change: transform;
    animation: bouncedApear 300ms 250ms ease-in forwards;
}

body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .cards-container {
    display: flex;
    flex-direction: row;
    gap: 32px;
}
@media (max-width: 768px) {
    body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .cards-container {
        flex-direction: column;
    }
}
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .cards-container .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .cards-container .icon-container svg {
    width: 20px;
    height: auto;
}
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .description-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    padding: 24px;
    border-radius: 16px;
}
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .content-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .lightness-card {
    width: 100%;
    height: 345px;
    border-radius: 16px;
    background: linear-gradient(119deg, var(--white-color) -14.19%, var(--secondary-color) 222.44%);
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* Darkmode theme */
/* card */
body.light [data-barba-namespace="marketing"] section.about-services-section.darkness-section .description-container {
    border: 1px solid var(--lightness-color);
}
body.dark [data-barba-namespace="marketing"] section.about-services-section.darkness-section .description-container {
    border: 1px solid var(--bg-body);
}
/* icon container */
body.light [data-barba-namespace="marketing"] section.about-services-section.darkness-section .cards-container .icon-container {
    background-color: var(--white-color);
}
body.light [data-barba-namespace="marketing"] section.about-services-section.darkness-section .cards-container .icon-container svg path {
    fill: var(--dark-color);
}
body.dark [data-barba-namespace="marketing"] section.about-services-section.darkness-section .cards-container .icon-container {
    background-color: var(--bg-body);
}
body.dark [data-barba-namespace="marketing"] section.about-services-section.darkness-section .cards-container .icon-container svg path {
    fill: var(--primary-darkmode-color);
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* vignette */
body.dark [data-barba-namespace="marketing"] .rounded-icon-container {
    background: var(--bg-body);
}
body.dark [data-barba-namespace="marketing"] .rounded-icon-container svg, body.dark body [data-barba-namespace="marketing"] .rounded-icon-container svg path {
    fill: var(--primary-darkmode-color) !important;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* responsiv */
/* mobile */
@media (max-width: 768px) {
    body [data-barba-namespace="marketing"] section.about-services-section.darkness-section > div {
        padding: 72px 16px;
    }
    body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .about-services-container {
        grid-auto-flow: row;
        padding: 0px 32px;
    }
    body [data-barba-namespace="marketing"] .about-services-container .img-container img {
        width: 100%;
    }
    body [data-barba-namespace="marketing"] .about-services-container .img-container.reverse {
        order: -1;
    }
    body [data-barba-namespace="marketing"] section.about-services-section.darkness-section > div div.primary-button {
        padding: 0px 32px;
    }
}
/* tablette */
@media (min-width: 769px) and (max-width: 1024px){
    body [data-barba-namespace="marketing"] section.about-services-section.darkness-section > div {
        padding: 72px 56px!important;
    }
    body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .about-services-container {
        grid-auto-flow: row;
        padding: 32px;
    }
    body [data-barba-namespace="marketing"] .about-services-container .img-container img {
        width: 100%;
    }
    body [data-barba-namespace="marketing"] .about-services-container .img-container.reverse {
        order: -1;
    }
}
@media (min-width: 1025px) and (max-width: 1310px){
    body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .about-services-container {
        grid-auto-flow: row;
    }
    body [data-barba-namespace="marketing"] .about-services-container .img-container img {
        width: 100%;
    }
    body [data-barba-namespace="marketing"] .about-services-container .img-container.reverse {
        order: -1;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------- */

/* about me section */
[data-barba-namespace="marketing"] section.about-me-section.darkness-section > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
}
[data-barba-namespace="marketing"] .content-about-me .title-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* about me title content */
[data-barba-namespace="marketing"] section.about-me-section.darkness-section .title-container h2, [data-barba-namespace="marketing"] section.about-me-section.darkness-section .title-container p {
    color: hsl(0 0% 100% / 0);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
}
[data-barba-namespace="marketing"] section.about-me-section.darkness-section strong {
    color: var(--white-color);
}
[data-barba-namespace="marketing"] section.about-me-section.darkness-section p {
    color: var(--lightness-color);
}

/* animation */
[data-barba-namespace="marketing"] section.about-me-section.darkness-section.visible h2 {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}
[data-barba-namespace="marketing"] section.about-me-section.darkness-section.visible .title-container p {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}

/* darkmode theme */
body.light [data-barba-namespace="marketing"] section.about-me-section.darkness-section .title-container h2  {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
body.dark [data-barba-namespace="marketing"] section.about-me-section.darkness-section .title-container h2  {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
body.light [data-barba-namespace="marketing"] section.about-me-section.darkness-section .title-container p  {
    background-image: linear-gradient(90deg, var(--lightness-color), var(--lightness-color));
}
body.dark [data-barba-namespace="marketing"] section.about-me-section.darkness-section .title-container p  {
    background-image: linear-gradient(90deg, var(--lightness-color), var(--lightness-color));
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* aboute descriptions containers */
body [data-barba-namespace="marketing"] section.about-me-section.darkness-section .about-me-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    padding: 0px 152px !important;
}
body [data-barba-namespace="marketing"] section.about-me-section.darkness-section .content-about-me {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    height: 100%;
}
body [data-barba-namespace="marketing"] section.about-me-section.darkness-section .description-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
}
body [data-barba-namespace="marketing"] .about-me-container .content-aboute-me-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body [data-barba-namespace="marketing"] section.about-me-section.darkness-section .content-description {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* animation */
/* about services text */
body [data-barba-namespace="marketing"] section.about-services-section.darkness-section .content-about-me .description-container .content-aboute-me-container > * {
    transform: translateY(8px);
    opacity: 0;
}
body [data-barba-namespace="marketing"] section.about-me-section.darkness-section .rounded-icon-container, [data-barba-namespace="marketing"] section.about-me-section.darkness-section .content-aboute-me-container > * {
    opacity: 0;
}
/* animation text card 1 */
body [data-barba-namespace="marketing"] section.about-me-section.darkness-section.visible .content-about-me .description-container.one .content-aboute-me-container {
    transform-origin: left;
    will-change: transform;
    animation: textRotate 300ms 250ms ease-in forwards;
}
body [data-barba-namespace="marketing"] section.about-me-section.darkness-section.visible .content-about-me .description-container.one .content-aboute-me-container > * {
    will-change: transform;
    animation: apear 300ms 250ms ease-in forwards, textSlideUp 300ms 250ms ease-in forwards;
}
body [data-barba-namespace="marketing"] section.about-me-section.darkness-section.visible .content-about-me .description-container.one .rounded-icon-container {
    will-change: transform;
    animation: apear 300ms 400ms ease-in forwards;
}
/* animation text card 2 */
body [data-barba-namespace="marketing"] section.about-me-section.darkness-section.visible .content-about-me .description-container.two .content-aboute-me-container {
    transform-origin: left;
    will-change: transform;
    animation: textRotate 300ms 550ms ease-in forwards;
}
body [data-barba-namespace="marketing"] section.about-me-section.darkness-section.visible .content-about-me .description-container.two .content-aboute-me-container > * {
    will-change: transform;
    animation: apear 300ms 550ms ease-in forwards, textSlideUp 300ms 550ms ease-in forwards;
}
body [data-barba-namespace="marketing"] section.about-me-section.darkness-section.visible .content-about-me .description-container.two .rounded-icon-container {
    will-change: transform;
    animation: apear 300ms 700ms ease-in forwards;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* face img */
body [data-barba-namespace="marketing"] section.about-me-section.darkness-section .lightness-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 345px;
    border-radius: 16px;
}

body [data-barba-namespace="marketing"] .about-me-container div picture {
    position: absolute;
    bottom: -3px;
    max-height: calc(100% + 56px);
}
body [data-barba-namespace="marketing"] .about-me-container div picture img {
    width: calc(100% + 56px);
}

/* breakpoint */
@media (min-width: 1300px) and (max-width: 1450px) {
    body [data-barba-namespace="marketing"] .about-me-container div img {
        width: calc(100% - 5vw);
    }
}
@media (min-width: 1200px) and (max-width: 1299px) {
    body [data-barba-namespace="marketing"] .about-me-container div img {
        width: calc(100% - 2vw);
    }
}
@media (min-width: 769px) and (max-width: 1199px) {
    body [data-barba-namespace="marketing"] .about-me-container div img {
        width: calc(100% - 1vw);
    }
}
@media (min-width: 550px) and (max-width: 768px) {
    body [data-barba-namespace="marketing"] .about-me-container div img {
        max-height: initial;
        width: auto;
    }
}
@media (max-width: 549px) {
    body [data-barba-namespace="marketing"] .about-me-container div img {
        max-height: initial;
    }
}

/* responsive */
@media (max-width: 768px) {
    body [data-barba-namespace="marketing"] section.about-me-section.darkness-section .lightness-card {
        position: relative;
        padding-top: 16px;
        height: fit-content;
        overflow: hidden;
    }
    body [data-barba-namespace="marketing"] .about-me-container div picture {
        position: initial;
    }
    body [data-barba-namespace="marketing"] .about-me-container div picture img {
        display: block;
        width: 100%!important;
        margin-bottom: -5px;
    }
}


/* ------------------------------------------------------------------------------------------------------------------------- */

/* darkmode theme face img */
body.light [data-barba-namespace="marketing"] section.about-me-section.darkness-section .lightness-card {
    background: linear-gradient(119deg, var(--white-color) -14.19%, var(--secondary-color) 222.44%);
}
body.dark [data-barba-namespace="marketing"] section.about-me-section.darkness-section .lightness-card {
    border: 1px solid rgba(8, 0, 26, 0.24);
    background: var(--bg-3-darkness-element);
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* button */
[data-barba-namespace="marketing"] .about-me-section.darkness-section > div div.primary-button {
    padding: 0px 152px;
    opacity: 0;
    transform: scale(1.1);
}

/* animation */
[data-barba-namespace="marketing"] .about-me-section.darkness-section.visible > div div.primary-button {
    will-change: transform;
    animation: buttonApear 300ms 950ms ease-in forwards;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* responsiv */
/* mobile */
@media (max-width: 768px) {
    [data-barba-namespace="marketing"] section.about-me-section.darkness-section > div {
        min-height: calc(100vh - 160px) !important;
    }
    [data-barba-namespace="marketing"] section.about-me-section.darkness-section .about-me-container {
        flex-direction: column;
        padding: 0px 32px !important;
    }
    [data-barba-namespace="marketing"] .about-me-section.darkness-section > div div.primary-button {
        padding: 0px 32px;
    }
}

/* tablette */
@media (min-width: 768px) and (max-width: 1024px) {
    [data-barba-namespace="marketing"] section.about-me-section.darkness-section .about-me-container {
        padding: 0px !important;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------- */

/* Pricing section */
[data-barba-namespace="marketing"] section#pricing-section > div {
    display: flex;
    justify-content: center;
    align-items: center;
}
[data-barba-namespace="marketing"] section.pricing-section .pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
/* title container */
[data-barba-namespace="marketing"] section.pricing-section .pricing .title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 992px;
}
[data-barba-namespace="marketing"] section.pricing-section .pricing .title-container h2 {
    color: hsl(0 0% 100% / 0);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
[data-barba-namespace="marketing"] section.pricing-section .pricing .title-container p {
    color: hsl(0 0% 100% / 0);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-image: linear-gradient(90deg, var(--lightness-color), var(--lightness-color));
}
[data-barba-namespace="marketing"] section.pricing-section .pricing span {
    font-family: var(--text-font);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--lightness-color);
}

/* toggle container */
[data-barba-namespace="marketing"] section.pricing-section .pricing .toggle-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* animations */
[data-barba-namespace="marketing"] section.pricing-section.visible .pricing .title-container h2, [data-barba-namespace="marketing"] section.pricing-section.visible .pricing .title-container p {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}
[data-barba-namespace="marketing"] section.pricing-section .toggle-container {
    opacity: 0;
}
[data-barba-namespace="marketing"] section.pricing-section.visible .toggle-container {
    will-change: transform;
    animation: apear 300ms 150ms ease-in forwards;
}
[data-barba-namespace="marketing"] section.pricing-section.visible .products-container .product.one {
    will-change: transform;
    animation: bouncedApear 300ms 300ms ease-in forwards;
}
[data-barba-namespace="marketing"] section.pricing-section.visible .products-container .product.two {
    will-change: transform;
    animation: bouncedApear 300ms 600ms ease-in forwards;
}
[data-barba-namespace="marketing"] section.pricing-section.visible .products-container .product.three {
    will-change: transform;
    animation: bouncedApear 300ms 450ms ease-in forwards;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* responsiv */
@media (max-width: 768px) {
    [data-barba-namespace="marketing"] section.pricing-section.darkness-section > div > div {
        max-width: 1424px;
        padding: 16px;
        margin: 0px auto;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------- */

/* wipuulce plugin */ 
[data-barba-namespace="marketing"] section.wipuulce-section > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}
[data-barba-namespace="marketing"] section div .wipuulce {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-self: center;
    gap: 56px;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* wipuulce title content */
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section h2 {
    color: var(--white-color);
}
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section strong {
    color: var(--white-color);
}
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section p {
    color: var(--lightness-color);
}

/* portfolio title content */
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section h2 {
    color: hsl(0 0% 100% / 0.2);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
}

/* animation */
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section.visible h2 {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}

/* darkmode theme */
body.light [data-barba-namespace="marketing"] section.wipuulce-section.darkness-section h2  {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
body.dark [data-barba-namespace="marketing"] section.wipuulce-section.darkness-section h2  {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* wipuulce logo card */
[data-barba-namespace="marketing"] section .wipuulce .lightness-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 16px;
}

@media (max-width: 768px) {
    [data-barba-namespace="marketing"] .wipuulce-logo {
        width: auto;
        height: 50%;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* darkmode theme */
body.light [data-barba-namespace="marketing"] section .wipuulce .lightness-card {
    background: linear-gradient(119deg, var(--white-color) -14.19%, var(--secondary-color) 222.44%);
}
body.dark [data-barba-namespace="marketing"] section .wipuulce .lightness-card {
    background: var(--bg-3-darkness-element);
    border: 1px solid rgba(8, 0, 26, 0.24);
}
body.light [data-barba-namespace="marketing"] .wipuulce-logo path {
    fill: var(--dark-color);
}
body.dark [data-barba-namespace="marketing"] .wipuulce-logo path {
    fill: var(--bg-darkness-element);
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* wipuulce content description */
[data-barba-namespace="marketing"] section .wipuulce .content-about-services {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    height: 100%;
}
[data-barba-namespace="marketing"] section .wipuulce .description-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
}
[data-barba-namespace="marketing"] .wipuulce .content-description {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* animation */
/* about wipuulce text */
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section .content-about-services .description-container .content-description > * {
    transform: translateY(8px);
    opacity: 0;
}
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section .rounded-icon-container,
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section .content-description > * {
    opacity: 0;
}
/* animation text card 1 */
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.one .content-description {
    transform-origin: left;
    will-change: transform;
    animation: textRotate 300ms 250ms ease-in forwards;
}
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.one .content-description > * {
    will-change: transform;
    animation: apear 300ms 250ms ease-in forwards, textSlideUp 300ms 250ms ease-in forwards;
}
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.one .rounded-icon-container {
    will-change: transform;
    animation: apear 300ms 400ms ease-in forwards;
}
/* animation text card 2 */
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.two .content-description {
    transform-origin: left;
    will-change: transform;
    animation: textRotate 300ms 550ms ease-in forwards;
}
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.two .content-description > * {
    will-change: transform;
    animation: apear 300ms 550ms ease-in forwards, textSlideUp 300ms 550ms ease-in forwards;
}
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.two .rounded-icon-container {
    will-change: transform;
    animation: apear 300ms 700ms ease-in forwards;
}
/* animation text card 3 */
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.three .content-description {
    transform-origin: left;
    will-change: transform;
    animation: textRotate 300ms 700ms ease-in forwards;
}
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.three .content-description > * {
    will-change: transform;
    animation: apear 300ms 700ms ease-in forwards, textSlideUp 300ms 700ms ease-in forwards;
}
[data-barba-namespace="marketing"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.three .rounded-icon-container {
    will-change: transform;
    animation: apear 300ms 800ms ease-in forwards;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* button */
[data-barba-namespace="marketing"] .wipuulce-section.darkness-section > div div.primary-button {
    opacity: 0;
    transform: scale(1.1);
}

/* animation */
[data-barba-namespace="marketing"] .wipuulce-section.darkness-section.visible > div div.primary-button {
    will-change: transform;
    animation: buttonApear 300ms 950ms ease-in forwards;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* responsiv */
@media (max-width: 768px) {
    [data-barba-namespace="marketing"] section div .wipuulce {
        grid-template-columns: 1fr;
        padding: 0px 32px !important;
    }
    [data-barba-namespace="marketing"] section .wipuulce .content-about-services {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 32px;
        height: 100%;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------- */