/* Minification failed. Returning unminified contents.
(14,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(26,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(50,25): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(132,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(133,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(134,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(135,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(136,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(137,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(138,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(139,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(140,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(141,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(142,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(152,22): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(160,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(204,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(208,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(235,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(239,25): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(247,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(257,29): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(267,18): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(302,19): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(302,38): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(343,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(350,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(356,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(388,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(429,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(460,16): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(464,16): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(468,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(491,30): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(494,47): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(494,70): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(506,18): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(511,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(515,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(525,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(537,19): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(547,42): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(605,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(615,32): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(632,26): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(633,27): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(634,30): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(784,29): run-time error CSS1039: Token not allowed after unary operator: '-base-margin'
(787,18): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(787,37): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(792,50): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(797,51): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(832,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(837,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(861,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(865,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(985,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1006,26): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1013,37): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1037,23): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1065,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1069,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1100,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(1104,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1183,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(1200,31): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1257,17): run-time error CSS1039: Token not allowed after unary operator: '-quaternary-color'
(1258,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1262,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1294,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1301,29): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1331,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1381,30): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1383,47): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1390,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1396,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1404,22): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1405,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1419,23): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1425,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1426,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1427,25): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1437,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1466,23): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1467,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1483,21): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1490,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1495,20): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1496,29): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1549,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1552,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1574,59): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1584,59): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1590,22): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1594,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1608,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1609,59): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1625,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(1630,18): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1648,32): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1654,32): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1676,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1677,25): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1815,25): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1833,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1834,25): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1870,25): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1945,25): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(2087,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2102,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2131,29): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2141,27): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2142,30): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2211,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2221,36): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(2226,36): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(2240,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2255,90): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(2257,23): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-y'
(2271,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2374,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(2414,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(2425,19): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2425,38): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(2500,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-20px'
(2511,30): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2518,27): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
 */
figure, ul {
    margin: 0
}

body, ul {
    font-family: Montserrat-Medium
}

body, main {
    width: 100%
}

h3, h4, p, ul {
    color: var(--tertiary-color)
}

header, main {
    display: flex
}

.bali {
    display: none;
}

#header-wrapper, .separator {
    padding: 0 var(--base-padding-x)
}

body, h1, h2, h3, h4, h5, nav a, nav p, p {
    padding: 0
}

#hero .gradient, #hero .hero-container, #hero-image {
    height: 50vh
}

#hero .gradient, #logos, main {
    position: relative
}

#hero .gradient, #logos, #process, .clip-div, .services-card {
    overflow: hidden
}

#hero-image img,  .clip-img, .nav-toggle-right img, .process-card-icon img {
    object-fit: cover
}

#cta, #feedback, #process {
    margin-bottom: var(--margin-80px)
}

#blog, #cta {
    row-gap: 3vh
}

#avantages, #blog, #contact, #hero {
    height: 100vh
}
.avantages{
    height: 100vh
}


@font-face {
    font-family: Montserrat-Bold;
    src: url('/Content/fonts/Montserrat-Bold.eot');
    src: url('/Content/fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),url('/Content/fonts/Montserrat-Bold.woff2') format('woff2'),url('/Content/fonts/Montserrat-Bold.woff') format('woff'),url('/Content/fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Montserrat-Medium;
    src: url('/Content/fonts/Montserrat-Medium.eot');
    src: url('/Content/fonts/Montserrat-Medium.eot?#iefix') format('embedded-opentype'),url('/Content/fonts/Montserrat-Medium.woff2') format('woff2'),url('/Content/fonts/Montserrat-Medium.woff') format('woff'),url('/Content/fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Montserrat-SemiBold;
    src: url('/Content/fonts/Montserrat-SemiBold.eot');
    src: url('/Content/fonts/Montserrat-SemiBold.eot?#iefix') format('embedded-opentype'),url('/Content/fonts/Montserrat-SemiBold.woff2') format('woff2'),url('/Content/fonts/Montserrat-SemiBold.woff') format('woff'),url('/Content/fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Montserrat-Italic;
    src: url('/Content/fonts/Montserrat-Italic.eot');
    src: url('/Content/fonts/Montserrat-Italic.eot?#iefix') format('embedded-opentype'),url('/Content/fonts/Montserrat-Italic.woff2') format('woff2'),url('/Content/fonts/Montserrat-Italic.woff') format('woff'),url('/Content/fonts/Montserrat-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

* {
    box-sizing: border-box
}

[data-scroll-container] {
    visibility: visible;
    opacity: 1;
    transition: none;
    position: relative;
    overflow: hidden;
    -webkit-overflow-scrolling: touch
}

.header-active, header {
    transition: .2s ease-out
}

.c-scrollbar {
    opacity: 1 !important;
    right: 4px !important;
    z-index: 999
}

ul {
    list-style-type: square;
    padding-left: 1rem;
    font-size: clamp(14px, 1vw, 20px);
    line-height: 140%
}

:root {
    --primary-color: #013C52;
    --secondary-color: #FF663D;
    --tertiary-color: #052029;
    --quaternary-color: #015172;
    --font-size-base: 1rem;
    --white-color: #F2F2F2;
    --margin-40px: clamp(12px, 3.8vh, 80px);
    --margin-80px: clamp(40px, 8vh, 160px);
    --base-padding-x: max(5vw, 16px);
    --base-padding-y: clamp(16px, 2vw, 50px);
    --vh: 100vh
}

html {
    scroll-behavior: smooth
}

body {
    font-size: 1rem;
    margin: 0;
    background: var(--white-color);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    height: 100%
}

h1, h2 {
    font-family: Montserrat-Bold;
    color: var(--primary-color);
    margin: 0;
    line-height: 130%
}

main {
    flex-direction: column;
    overflow: hidden !important
}

h1 {
    font-size: clamp(32.44px, 3.8vw, 120.04px)
}

h2 {
    font-size: clamp(26.83px, 3.3vw, 81.04px)
}

.buttonSecondary:hover, h3, h4 {
    font-family: Montserrat-SemiBold
}

h3 {
    font-size: clamp(21.04px, 2vw, 48px);
    line-height: 130%;
    margin: 0
}

h4 {
    font-size: clamp(18.04px, 2vw, 48px);
    line-height: 130%;
    margin: 0
}

h5, small {
    font-family: Montserrat-Bold;
    font-size: 13px; /* was 12px → better readability */
    text-transform: uppercase;
    letter-spacing: 0.08rem; /* slightly tighter */
    line-height: 140%;
    margin: 0;
}

h5 {
    color: var(--secondary-color);
}

small {
    color: var(--secondary-color); /* unify with design system */
    display: block; /* IMPORTANT → spacing works everywhere */
    margin-bottom: 12px; /* global spacing */
}

p {
    font-family: Montserrat-Medium;
    font-size: clamp(14px, 1vw, 20px);
    line-height: 140%;
    margin: 0
}

.italic {
    font-family: Montserrat-Italic;
    font-size: clamp(16px, 1.2vw, 3.75rem);
    margin-bottom: 0 !important
}

#contact-details div, .nav-toggle-info, .nav-toggle-info a {
    font-size: clamp(14px, 1vw, 20px)
}

.margin-0 {
    margin: 0 !important
}

.margin-top-80 {
    margin-top: var(--margin-80px) !important
}

.margin-bottom-80 {
    margin-bottom: var(--margin-80px) !important
}

.staticbg {
    background: url('/Content/img/StaticNoise.webp') center center fixed
}

#process, #progress-bar, .separator {
    background-color: var(--tertiary-color)
}

.width-100 {
    width: 100% !important
}

.separator {
    height: 2px;
    display: block;
    width: calc(100% - var(--base-padding-x) * 2);
    margin: 0 auto
}

.header-active, .nav-toggle ul li {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

 #process-container, #services, .services-container {
    margin: var(--margin-80px) 0
}

.error {
    color: #fe20db
}

header {
    flex-direction: column;
    padding-top: 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 10;
    align-items: center
}

#header-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center
}

#menu-mobile, .nav-toggle, .nav-toggle-mobile {
    display: none
}

.header-active {
    background-color: rgba(5,32,41,.6);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow: 0 4px 4px rgba(0,0,0,.25)
}

.nav-toggle, footer {
    padding: var(--margin-80px) var(--base-padding-x)
}

.nav-toggle {
    height: 0;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 3vw;
    justify-content: center;
    opacity: 0;
    transition: .3s
}

.nav-portfolio, .nav-services, nav-toggle-left ul {
    opacity: 0;
    transition: opacity .3s;
    display: none
}

    .nav-portfolio.visible, .nav-services.visible {
        opacity: 1;
        display: block
    }

.nav-toggle.visible {
    display: flex;
    height: 75vh;
    opacity: 1
}

.nav-toggle-info-left {
    width: 50%;
    display: flex;
    column-gap: 1.5rem;
    height: 3vh
}

.nav-toggle-info {
    display: flex;
    column-gap: .5rem;
    color: var(--white-color);
    align-self: flex-end
}

.button, nav a, nav p {
    font-family: Montserrat-Medium;
    font-size: clamp(16px, 1vw,1.25rem);
    color: var(--white-color);
    text-transform: uppercase;
    text-decoration: none
}

.nav-toggle-info a, .nav-toggle-info p {
    color: var(--white-color);
    text-decoration: none
}

.nav-toggle-info img {
    width: 20px;
    height: 20px;
    align-self: center
}

.nav-toggle-wrapper {
    display: flex;
    column-gap: 9vw;
    justify-content: space-between
}

.nav-toggle > .nav-toggle-wrapper:last-of-type {
    height: 6vh;
    align-items: flex-end
}

.nav-toggle-left {
    width: 50%;
    align-self: center
}

.nav-toggle-right {
    display: flex;
    width: 33.33%
}

    #about p, #about p a, #contact-form label, #contact-title h1, #contact-title h2, #contact-title h3, #error h3, #error p, #process h3, #process p, #process p a, #slider2 h2, #slider2 h3, #slider2 p, #sous h2, #sous p, #success h3, #success p, .active h3, .active h4, .active p, .nav-toggle-right p, .subpage.header-active > #header-wrapper > nav a, .subpage.header-active > #header-wrapper > nav p {
        color: var(--white-color)
    }


.nav-toggle-right img {
    width: 100%;
    border-radius: 1rem;
    height: 30vh;
    animation: 30s ease-in-out infinite ltr
}

@keyframes ltr {
    0%,100% {
        object-position: 0% 0%
    }

    12.5%,87.5% {
        object-position: 25% 0%
    }

    25%,75% {
        object-position: 50% 0%
    }

    37.5%,62.5% {
        object-position: 75% 0%
    }

    50% {
        object-position: 100% 100%
    }
}

.nav-toggle ul {
    list-style-type: none;
    padding: 0;
    margin: 0
}

    .nav-toggle ul li a {
        font-size: clamp(21.04px, 1.5vw, 32px);
        color: var(--white-color);
        text-decoration: none
    }

        .nav-toggle ul li a span {
            display: none;
            width: 20px;
            height: 20px;
            margin-right: 1.5rem;
            background: url('/Content/img/btnIcon.svg') center center no-repeat;
            transition: .2s ease-out
        }

.nav-toggle-left ul li a:hover span {
    display: inline-flex
}

.nav-toggle ul li {
    border-top: 1px solid rgba(242,242,242,.5);
    border-bottom: 1px solid rgba(242,242,242,.5)
}

    .nav-toggle ul li:first-child {
        border-top: 0
    }

    .nav-toggle ul li:last-child {
        border-bottom: 0
    }

.subpage.header-active figure svg .logotext {
    fill: var(--white-color)
}

.subpage figure svg .logotext {
    fill: var(--tertiary-color)
}

#hero .hero-container .hero-left p a, .slider-right h2, .subpage > #header-wrapper > nav > a, .subpage > #header-wrapper > nav > p {
    color: var(--tertiary-color);    
}

#feedback-progress, nav {
    display: flex;
    column-gap: 3vw;
    align-items: center
}

    nav a, nav p {
        margin: 0;
        cursor: pointer
    }

        nav a:hover, nav p:hover {
            text-decoration: underline
        }

.button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    border: 1.5px solid var(--secondary-color);
    border-radius: 1rem;
    height: 6.25rem;
    background: linear-gradient(to right,var(--white-color) 50%,var(--secondary-color) 50%);
    background-size: 201% 100%;
    background-position: right bottom;
    transition: .5s ease-out
}

#progress, #progress-bar {
    height: 4px;
    border-radius: 2px
}

#btnIcon path {
    stroke: var(--white-color)
}

#contact-form .button:hover, .button:hover {
    background-position: left bottom;
    color: var(--secondary-color)
}

    #contact-form .button:hover #btnIcon path, .button:hover #btnIcon path {
        stroke: var(--secondary-color)
    }

.blog-aside, .button svg {
    align-self: flex-end
}

.buttonSecondary {
    font-size: clamp(18px, 1.2vw,1.75rem);
    text-decoration: none;
    color: var(--white-color);
    display: flex;
    align-items: center;
    column-gap: 1.5vw;
    cursor: pointer
}

#progress-number, .feedback-paragraph {
    font-size: clamp(16px, 1.2vw,3.75rem)
}

.about-container, .sous-container {
    padding: var(--margin-80px);
    column-gap: 3vw;
    min-height: 60vh;
    display: flex;
    border-radius: 1.5rem;
    box-shadow: 2px 2px 16px 0 rgba(5,32,41,.4)
}

.sous-container-dev {
    width: 100%;
    padding: clamp(24px, 4vh, 60px) var(--base-padding-x);
    column-gap: 3vw;
    min-height: 60vh;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    border-radius: 1.5rem;
    box-shadow: 2px 2px 16px 0 rgba(5,32,41,.4);
    background: url('/Content/img/Home/index/home-bg-servers.png') 0 0 / cover no-repeat #052029;
}


.sous-intro {
    width: 50%;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.sous-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    row-gap: 1.2rem;
    justify-content: flex-start; /* IMPORTANT */
}

    .sous-text .step {
        display: flex;
        flex-direction: column;
        row-gap: 0.2rem;
    }

    .sous-text .step h3 {
        margin-bottom: 0.2rem;
    }

    .sous-text .step p {
        margin-bottom: 0;
    }
/*----------------------------------*/

.buttonSecondary > img {
    transform: translateX(0);
    animation: 5s ease-in-out infinite calltoactionAnim
}

@keyframes calltoactionAnim {
    0%,100%,50% {
        transform: translateX(0)
    }

    25%,75% {
        transform: translateX(50%)
    }
}

#about, #blog, #contact, #cta, #feedback, #hero .hero-container, #process-wrapper, #services, #sous {
    padding: 0 var(--base-padding-x)
}

/* ATE partea asta a suferit modificari ca sa arate ca acuma */
    #hero {
        display: flex;
        flex-direction: column;
        padding-bottom: 2.625rem
    }
    #hero .gradient {
        background-color: var(--primary-color)
    }

    #hero.subpage {
        height: auto !important;
        padding-bottom: 0;
    }

    #hero .hero-container {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    #hero.subpage .hero-container {
        height: auto !important;
        min-height: 0 !important;
        background: var(--white-color); /* <- the white zone */
        padding-top: var(--margin-40px); /* spacing from the image */
        padding-bottom: var(--margin-40px);
        align-items: stretch !important; /* not flex-start */
    }

    /* 1) Center H1 vertically inside the left column */
    #hero.subpage .hero-left {
        display: flex !important;
        flex-direction: column;
        justify-content: center !important; /* vertical centering */
        align-self: stretch !important; /* take full height of the row */
    }

    #hero.subpage .hero-wrapper {
        align-items: stretch !important;
    }

    #hero .hero-container .hero-left {
        width: 70%;
        display: flex;
        flex-direction: column;
        row-gap: 1rem;
        align-self: flex-end;
        align-items: stretch;
        justify-content: center;
    }

    #hero.subpage .hero-right .hero-h2-compact {
        font-size: clamp(22px, 1.6vw, 34px) !important;
        line-height: 1.2 !important;
        margin: 0 0 14px 0 !important;
        letter-spacing: -0.01em;
        max-width: 44ch;
        font-weight: 700;
    }

    #hero.subpage .hero-container .hero-left {
        align-self: stretch !important;
    }

    #hero .hero-container .hero-left p {
        width: 33.33vw
    }

/**V2 ATE - ca sp pot pune H2 in dreapta deasupra*/
    #hero .hero-container .hero-right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        width: 50%;
        align-self: flex-end;
        row-gap: 1.5rem; /* optional */
    }



/* V1
#hero .hero-container .hero-right {
    display: flex;
    align-self: flex-end;
    width: 50%;
    justify-content: flex-end
}
*/

/*--------------------------------------------------------------------------*/
#contactform, #feedback-title, .slider-right, .subpage .hero-right {
    width: 50%
}

    #contact .gradient::after, #hero .gradient::after {
        content: "";
        position: absolute;
        z-index: 5;
        opacity: .2;
        display: block;
        width: 100%;
        height: 100%;
        mix-blend-mode: normal
    }

    #contact .gradient .orangeBulb1, #contact .gradient .whiteBulb1, #contact .gradient .whiteBulb2, #hero .gradient .orangeBulb1, #hero .gradient .whiteBulb1, #hero .gradient .whiteBulb2 {
        position: absolute;
        animation: 100s ease-in infinite moveGradientsLeft
    }

    #contact .gradient .blueBulb1, #contact .gradient .blueBulb2, #contact .gradient .greenBulb1, #hero .gradient .blueBulb1, #hero .gradient .blueBulb2, #hero .gradient .greenBulb1 {
        position: absolute;
        animation: 100s ease-in infinite moveGradients
    }

    #hero .gradient .orangeBulb1 {
        filter: blur(140px);
        left: -25%;
        z-index: 3;
        mix-blend-mode: normal;
        top: 25%;
        width: 42%;
        opacity: 1
    }

    #contact .gradient .whiteBulb1, #hero .gradient .whiteBulb1 {
        filter: blur(130px);
        right: -30%;
        z-index: 2;
        mix-blend-mode: normal;
        width: 64%;
        top: 40%
    }

    #hero .gradient .greenBulb1 {
        filter: blur(100px)
    }

    #contact .gradient .blueBulb1, #hero .gradient .blueBulb1 {
        filter: blur(112px);
        left: 0;
        z-index: 0;
        mix-blend-mode: normal;
        width: 100%;
        top: 20%
    }

#hero .hero-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    column-gap: 9vw
}

#logos::after, #logos::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    height: 100px;
    width: 2.625rem;
    z-index: 2
}

#hero-image {
    display: flex
}

    #hero-image img {
        width: 100%
    }

/*--aici erau media query-urile */
#logos {
    width: calc(100% - var(--base-margin));
    white-space: nowrap;
    height: 100px;
    margin: var(--margin-80px) var(--base-padding-x)
}

    #logos::after {
        right: 0;
        background: linear-gradient(to left,var(--white-color),transparent)
    }

    #logos::before {
        left: 0;
        background: linear-gradient(to right,var(--white-color),transparent)
    }

#logos-container {
    display: inline-block;
    white-space: nowrap
}

#logos img {
    display: inline-block;
    width: 150px;
    height: 100%;
    text-align: center;
    line-height: 100px;
    margin-right: 12vw;
    opacity: .5
}

#about {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}

#sous {
    display: flex;
    flex-direction: column;
}

.about-container, .sous-container {
    width: 100%;
    background: url('/Content/img/Home/Marble.webp') 0 0/100% 100% no-repeat #052029
}

#about h2{
    color: var(--white-color);
    width: 50%
}

#sous h3 {
    color: var(--white-color);
    width: 100%
}

.about-container .about-text, .sous-container .sous-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    row-gap: 3.5rem
}

#footer-head, .about-div, .blog-info, .sous-div {
    display: flex;
    justify-content: space-between
}

    #footer-links div,  .about-div div, .sous-div div {
        display: flex;
        flex-direction: column
    }

    .about-div span, .sous-div span {
        font-size: clamp(.75rem, 6.2vw, 5rem);
        color: var(--secondary-color)
    }

#contact-details div, #contact-title p, #process h2, .item-tags span {
    color: var(--white-color)
}



#services {
    display: flex;
    flex-direction: column
}

    #services h2 {
        width: 100%
    }

.services-container {
    display: flex;
    flex-wrap: wrap
}

.services-card, .services-card-wrapper {
    display: flex;
    flex-direction: column;
    position: relative
}

.services-card {
    width: 33.33%;
    height: max(45vh,300px);
    padding: 2rem;
    justify-content: center;
    border-radius: 1.5rem;
    cursor: pointer;
    text-decoration: none
}

    .services-card .buttonSecondary {
        visibility: hidden
    }

.services-card-wrapper {
    height: auto;
    row-gap: 1rem;
    z-index: 2
}



.clip-div, .clip-img, .portfolio-item {
    z-index: 1;
    width: 100%;
    left: 0;
    top: 0
}

.services-card-wrapper span {
    margin-top: 3vh
}

.clip-img {
    position: absolute;
    height: 100%;
    clip-path: polygon(0 0,100% 0,100% 0,0 0);
    transition: clip-path .2s ease-out
}

.item-button, .item-paragraph, .item-tags, .item-title {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s,transform .5s
}

.active .clip-img {
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    box-shadow: 2px 2px 16px 0 rgba(5,32,41,.4)
}

.active .buttonSecondary {
    visibility: visible
}


#contact, #process, #progress-bar, #slider2, .item-button {
    position: relative
}

.slider {
    position: relative
}


.portfolio-item .left {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    width: 50%;
    padding-right: 9vw;
    height: 100%;
    justify-content: space-between
}

#process, .left-top {
    flex-direction: column;
    display: flex
}

.portfolio-item .right {
    width: 50%;
    height: 100%
}

.bullet2::before, .bullet::before {
    content: "";
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.portfolio-item .left .buttonSecondary {
    color: var(--primary-color);
    margin-top: 2rem
}

.portfolio-item .right img {
    border-radius: 1.5rem;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.left-top {
    row-gap: 1.5vw
}

.item-tags {
    display: flex;
    column-gap: .5rem
}

    .item-tags span {
        background: var(--tertiary-color);
        padding: .25rem .5rem;
        font-size: clamp(10px, 1vw, 14px);
        border-radius: 1rem
    }

.blog-aside h2, .blog-author-info {
    border-bottom: 1.5px solid var(--tertiary-color);
    padding-bottom: 1vh
}

.item-button {
    z-index: 10
}

.item-button, .item-paragraph, .item-title {
    display: flex;
    margin: 0
}

.item-image {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1s
}

.active-portfolio {
    z-index: 12
}

#process {
    min-height: 100vh;
    padding-top: var(--margin-40px)
}

    #process::after {
        content: "";
        position: absolute;
        z-index: 1;
        opacity: .1;
        pointer-events: none;
        display: block;
        width: 100%;
        height: 100%;
        background: url('/Content/img/RandomStatic.webp');
        mix-blend-mode: normal
    }

#process-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 3vh
}

#process h2 {
    width: 100%
}

#process p, .avantages-container p, .slider-right p {
    margin-top: var(--margin-40px)
}

#blog, #contact, #feedback, #process h5, #progress-bar, #progress-number {
    margin-top: var(--margin-80px)
}

#process-container {
    display: flex;
    column-gap: 6vw;
    cursor: grab;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-y: hidden;
    width: 100%;
    align-items: stretch;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.process-container::-webkit-scrollbar {
    display: none
}

.process-content {
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .process-content span {
        font-size: clamp(21.04px, 4vw,3.75rem);
        color: var(--secondary-color)
    }

#progress-number, .blog-info p, .case-author p, .feedback-author .name, aside a {
    color: var(--tertiary-color)
}

.process-card {
    flex: 0 0 25%;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch
}

.process-card-icon {
    height: 32vh
}

#feedback {
    display: flex;
    flex-direction: row;
    height: 35vh;
    column-gap: 3vw
}

#feedback-wrapper {
    display: flex;
    column-gap: 9vw;
    align-items: flex-start
}

#feedback-container {
    display: flex;
    flex-direction: row;
    row-gap: 3vw;
    width: 75%;
    overflow: hidden;
    position: relative
}

#cta, .feedback-card {
    flex-direction: column;
    display: flex
}

.feedback-card {
    row-gap: 3vw;
    min-width: 100%
}

.cta-container, .feedback-author {
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .feedback-author img {
        border-radius: 1rem;
        width: max(72px,1vw);
        height: max(72px,1vw);
        object-fit: cover
    }

.blog-card-image img, .blog-content img, .image-cta img {
    border-radius: 1.5rem;
    object-fit: cover
}

.feedback-author .name {
    font-size: clamp(16px, 1.7vw,3.75rem);
    text-align: right
}

.blog-container .blog-right, .cta-container .cta-right, .feedback-author p {
    text-align: right
}

#progress-bar {
    width: 80%;
    display: block
}

#progress, .bullet.active, .bullet2.active {
    background-color: var(--secondary-color)
}

#progress {
    width: 0;
    transition: width .5s;
    display: block
}

#progress-number {
    width: 20%;
    display: flex;
    justify-content: flex-end;
    column-gap: .5vw
}

#cta {
    height: calc(100vh - var(--margin-80px) * 2);
    justify-content: space-between
}

.image-cta {
    height: 70vh;
    display: flex
}

    .image-cta img {
        width: 100%;
        object-position: center 29%;
        box-shadow: 2px 2px 16px 0 rgba(5,32,41,.4)
    }

#blog {
    display: flex;
    flex-direction: column
}

.blog-container {
    display: flex;
    justify-content: space-between;
    column-gap: 3vw
}

.blog-card, .blog-title {
    display: flex;
    flex-direction: column
}

.blog-content img {
    width: 100%;
    margin-top: 1.5rem
}

.blog-title {
    width: 50%
}

.blog-card {
    width: 33.33%;
    row-gap: 3vh
}

#contact-content, .blog-card-content {
    flex-direction: column;
    display: flex;
    row-gap: 3vh
}

.blog-card-image img {
    width: 100%;
    box-shadow: 2px 2px 16px 0 rgba(5,32,41,.2)
}

#contact-content .buttonSecondary, .blog-card-content .buttonSecondary {
    color: var(--quaternary-color);
    margin-top: var(--margin-40px)
}

#contact .gradient {
    background-color: var(--primary-color);
    overflow: hidden;
    width: 100%;
    position: absolute;
    z-index: 4;
    height: 100%;
    left: 0
}

    #contact .gradient .orangeBulb1 {
        filter: blur(500px);
        right: -25%;
        z-index: 3;
        mix-blend-mode: normal;
        top: 42%;
        width: 73%;
        opacity: 1
    }

    #contact .gradient .greenBulb1 {
        filter: blur(300px);
        width: 110%;
        top: -48%
    }

#contact {
    display: flex;
    background: linear-gradient(99deg,#013c52 24.06%,#ff663d 96.04%),#013c52;
    align-items: center
}

#footer-social {
    margin-top: var(--margin-40px)
}

#contact-wrapper {
    height: 58vh;
    display: flex;
    column-gap: 9vw;
    width: calc(100% - var(--base-padding-x)*2);
    position: absolute;
    z-index: 5
}

#contact-content {
    width: 50%;
    justify-content: space-between
}

#contact-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 3vh
}

#contact-title p {
    margin-top: 3vh
}

#contact-details div {
    display: flex;
    column-gap: .5rem;
    align-items: center
}

#contact-form .button, #contact-form input[type=text], #contact-form textarea {
    padding: 1rem;
    font-size: clamp(18px, 1vw, 1.25rem);
    color: var(--white-color);
    font-family: Montserrat-Medium
}

.image-wrapper {
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0 !important
}

#contact-form input[type=text]:focus, #contact-form textarea:focus {
    outline: 0
}

#contact-form input[type=text]::placeholder {
    color: #fff
}

#contact-form input[type=text] {
    width: 100%;
    margin-top: 1rem;
    background: 0 0;
    border: 1.5px solid #f2f2f2;
    border-radius: 1rem;
    resize: none
}

#contact-form textarea {
    height: 40vh;
    width: 100%;
    margin-top: 1rem;
    background: 0 0;
    border: 1.5px solid #f2f2f2;
    border-radius: 1rem;
    resize: none
}

#blog-content h2, aside a {
    font-family: Montserrat-SemiBold
}

#contact-form .button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    text-transform: uppercase;
    border: 1.5px solid var(--white-color);
    border-radius: 1rem;
    background: linear-gradient(to right,var(--white-color) 50%,transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: .5s ease-out
}

#contact-details a, #contact-details p {
    color: var(--white-color);
    text-decoration: none;
    font-size: clamp(14px, 1vw, 20px)
}

#footer-links a, #footer-links p {
    color: var(--white-color);
    margin-bottom: 1rem;
    font-size: 14px
}

footer {
    display: flex;
    flex-direction: column;
    background: var(--tertiary-color) repeat;
    color: var(--white-color)
}

#footer-links {
    display: flex;
    width: 80%;
    column-gap: 9vw;
    justify-content: flex-end
}

#footer-social {
    border-top: 1.5px solid rgba(255,255,255,.1);
    display: flex;
    justify-content: space-between;
    padding-top: var(--margin-40px);
    align-items: center
}

#aboutus, #blog-content {
    flex-direction: column;
    padding: 0 var(--base-padding-x);
    margin-top: var(--margin-80px);
    margin-bottom: var(--margin-80px);
    display: flex
}

#footer-links p {
    text-transform: uppercase;
    min-width: 7rem
}

#footer-social a {
    color: var(--white-color);
    text-decoration: none;
    opacity: .8;
    min-width: 3rem
}

#footer-links a {
    text-decoration: none;
    opacity: .8
}

    #footer-links a:hover, #footer-social a:hover {
        opacity: 1
    }

#aboutus {
    row-gap: 3vh
}

.about-wrapper {
    display: flex;
    flex-direction: row;
    row-gap: 3vh;
    column-gap: 3vw
}

.about-div.border {
    border-top: 1.5px solid #013c52;
    border-bottom: 1.5px solid #013c52;
    padding-top: var(--margin-40px);
    padding-bottom: var(--margin-40px)
}

.about-left {
    display: flex;
    justify-content: center;
    justify-content: flex-start;
    row-gap: 3vh;
    width: 33.33%
}

#blog-content section .blog-content, .about-right {
    width: 66.67%
}

    .about-right p {
        color: var(--tertiary-color);
        margin-bottom: 1.5rem
    }

#blog-content h2 {
    font-size: clamp(21.04px, 1.5vw, 31px);
    line-height: 130%;
    color: var(--primary-color);
    margin: 1.5rem 0 .5rem
}

.slider > h2 {
    margin: 0 var(--base-padding-x);
    width: calc(100% - var(--base-padding-x) * 2);
    z-index: 2
}

#blog-content {
    align-items: flex-end
}

    #blog-content section {
        display: flex;
        column-gap: 3vw
    }

        #blog-content section aside {
            display: flex;
            width: 33.33%;
            flex-direction: column;
            row-gap: 1vh
        }

aside img {
    width: 2rem !important
}

.blog-info div {
    display: flex;
    align-items: center;
    column-gap: 1rem
}

.blog-info p {
    font-size: clamp(12px, 1vw, 14px)
}

aside a {
    text-decoration: none
}

#blog-content section aside.blog-aside {
    row-gap: 2vh
}

aside a .blog-info {
    margin-top: 1vh
}

.blog-author-info {
    display: flex;
    align-items: center;
    column-gap: 1rem
}

#avantages {
    padding: 0 var(--base-padding-x)
}
.avantages {
    padding: 0 var(--base-padding-x)
}

.blog-info img {
    width: 20px !important;
    height: 20px !important
}

.blog-content section img {
    margin-top: 3rem;
    width: 100%;
    object-fit: cover;
    margin-bottom: 3rem
}


#slider2 {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    background: url('/Content/img/StaticNoise.webp') var(--white-color) repeat;
    row-gap: 3vh;    
}

.slider {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url('/Content/img/StaticNoise.webp') var(--white-color) repeat;
    row-gap: 3vh;
}


#slider2, .slider-container2 {
    background: var(--tertiary-color) repeat !important
}

#slider2 > h2 {
    margin-top: var(--margin-80px)
}


.slider-wrapper {
    height: 85%;
}

.slider-container, .slider-container2 {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 9vw;
    padding: 0 var(--base-padding-x);
    background: url('/Content/img/StaticNoise.webp') var(--white-color) repeat;    
    padding-bottom: 0; /* was margin-80px */
}

.avantages-container, .slider-left {
    justify-content: center;
    display: flex
}

.slider-left {
    width: 50%;
    align-self: center
}

.slider-right span {
    font-size: clamp(31.04px, 4vw, 3.75rem);
    color: var(--secondary-color)
}

.bullets, .bullets2 {
    position: absolute;
    bottom: var(--margin-80px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 1.5rem
}

.bullet, .bullet2 {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .3s;
    position: relative
}

    .bullet2::before {
        border: 1px solid var(--white-color);
        border-radius: 50%;
        position: absolute
    }

    .bullet::before {
        border: 1px solid var(--tertiary-color);
        border-radius: 50%;
        position: absolute
    }

#avantages {
    display: flex;
    position: relative;
    flex-direction: column
}

.avantages-wrapper {
    display: flex;
    position: relative;
    overflow: hidden;
    column-gap: 9vw;
    height: 75vh
}

#avantages > h2 {
    width: 90%;
    z-index: 2;
    margin-top: var(--margin-80px);
    margin-bottom: var(--margin-40px)
}

.avantages-scroll {
    width: 50%;
    overflow: visible;
    position: relative;
    z-index: 1
}

.avantages-container {
    height: 100%;
    align-items: flex-start;
    flex-direction: column
}

.avantages-fixed {
    width: 50%;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center
}


/*----------------------- NO MEDIA QUERY ----------------------------*/
/*ATE inainte erau la linia , le-am mutata aici ca sa nu ma incurc in ele */

@media only screen and (min-width: 768px) {
    #sous .sous-container-dev {
        flex-direction: row;
        flex-wrap: nowrap;
        column-gap: 6vw;
    }

    #sous .sous-intro,
    #sous .sous-text {
        flex: 1;
        min-width: 0;
    }
}


@keyframes moveGradients {
    0%,100% {
        transform: translate(0,0)
    }

    10% {
        transform: translate(10vw,-20vh)
    }

    20% {
        transform: translate(1vw,10vh)
    }

    30% {
        transform: translate(5vw,5vh)
    }

    40% {
        transform: translate(-5vw,-10vh)
    }

    50% {
        transform: translate(10vw,20vh)
    }

    60% {
        transform: translate(-10vw,-15vh)
    }

    70% {
        transform: translate(20vw,5vh)
    }

    80% {
        transform: translate(-5vw,10vh)
    }

    90% {
        transform: translate(10vw,-5vh)
    }
}
/*--------END MEDIA QUESRY @keyframes moveGradients ---------------------------------------------*/

@keyframes moveGradientsLeft {
    0%,100% {
        transform: translate(0,0)
    }

    10% {
        transform: translate(5vw,-5vh)
    }

    20% {
        transform: translate(3vw,5vh)
    }

    30%,50%,70% {
        transform: translate(5vw,5vh)
    }

    40%,60% {
        transform: translate(-5vw,-5vh)
    }

    80% {
        transform: translate(-5vw,1vh)
    }

    90% {
        transform: translate(10vw,-5vh)
    }
}

/*--------END MEDIA QUESRY @keyframes moveGradientsLeft ---------------------------------------------*/
/* pina aici sunt cele ce au fost mutate */




@media only screen and (max-width:767px) {
    .nav-toggle-mobile {
        display: none;
        flex-direction: column;
        width: 100%;
        height: 100%;
        justify-content: space-between
    }

    .nav-toggle-call {
        display: flex
    }

        .nav-toggle-call a {
            width: 50%;
            color: var(--white-color);
            text-decoration: none;
            justify-content: center;
            align-items: center;
            display: flex;
            height: 10vh;
            background-color: rgba(5,32,41,.3);
            backdrop-filter: blur(40px);
            -webkit-backdrop-filter: blur(40px)
        }

            .nav-toggle-call a:first-of-type {
                border-right: 1px solid #052029
            }

    .nav-toggle-mobile ul {
        list-style-type: none;
        padding: 0;
        margin-top: var(--margin-80px);
        padding: 0 var(--base-padding-x);
        row-gap: 12px; /* Am redus putin */
    }

    #header-wrapper, .portfolio-item .left .buttonSecondary, .slider-right p {
        margin-top: 1rem
    }

    .nav-toggle-mobile ul li {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
        border-top: 1px solid rgba(242,242,242,.5);
        border-bottom: 1px solid rgba(242,242,242,.5)
    }

        .nav-toggle-mobile ul li:last-child {
            border-bottom: none
        }

        .nav-toggle-mobile ul li:first-child {
            border-top: none
        }

        .nav-toggle-mobile ul li p {
            display: flex;
            justify-content: space-between
        }

            .nav-toggle-mobile ul li p span {
                display: flex;
                align-items: center;
                justify-content: center
            }

        .nav-toggle-mobile ul li a, .nav-toggle-mobile ul li p {
            text-decoration: none;
            color: var(--white-color);
            font-size: clamp(18px, 3.5vw, 24px);
        }

        .nav-toggle-mobile ul li ul {
            display: none;
            padding: 0;
            margin: 1rem 0 0;
            border-top: 1px solid rgba(242,242,242,.5)
        }

            .nav-toggle-mobile ul li ul li {
                border: none !important
            }

                .nav-toggle-mobile ul li ul li a {
                    font-size: clamp(14px, 1vw, 20px)
                }

    #menu-mobile {
        display: block;
        width: 42px;
        height: 42px;
        display: flex;
        justify-content: flex-end;
        align-items: center
    }

    #header {
        padding-top: 0;
        padding-bottom: 0
    }

    #header-wrapper {
        margin-bottom: 1rem
    }

    #hero .gradient img {
        width: 60%
    }

    #hero .gradient .orangeBulb1 {
        filter: blur(70px);
        -webkit-filter: blur(70px);
        width: 60%
    }

    #hero .gradient .blueBulb1 {
        filter: blur(20px);
        -webkit-filter: blur(20px)
    }

    #hero .gradient .greenBulb1 {
        filter: blur(30px);
        -webkit-filter: blur(30px)
    }

    #hero {
        height: 100vh;
        padding: 0
    }

    #hero-image.gradient img {
        width: 100% !important
    }

    #hero .gradient {
        height: 50vh
    }

    #hero .hero-container .hero-left {
        justify-content: flex-end
    }

    #hero .hero-container {
        padding: 0 var(--base-padding-x); /* padding: 0 1rem; */
        height: 100%
    }

    .orangeBulb2, nav {
        display: none
    }

    #hero .hero-wrapper {
        flex-wrap: wrap;
        row-gap: 9vh;
        padding: 1rem 0
    }

    #about h2, #blog-content section .blog-content, #blog-content section aside, #contact-content, #contact-form, #contactform, #feedback-container, #hero .hero-container .hero-left, #hero .hero-container .hero-left p, #hero .hero-container .hero-right,  #services h2, .about-left, .about-right, .blog-card, .blog-title,  .cta-left, .portfolio-item .right, .services-card, .slider-left, .slider-right, .sous-container .sous-text, .sous-container-dev .sous-text, article {
        width: 100%
    }

    #footer-logo img, #header svg {
        width: 120px
    }

    .button {
        height: 5.25rem;
        width: 100%
    }

    .about-container {
        padding: 32px 24px;
        flex-direction: column;
        row-gap: 1.5rem;
        background-size: cover;
        background-position: 16%
    }

    .sous-container-dev {
        padding: 32px 24px;
        flex-direction: column;
        flex-wrap: wrap;
        row-gap: 1.5rem;
        background-size: cover;
        background-position: 16%
    }


    .sous-container-dev .sous-intro {
        width: 100%;
    }


    .sous-container-dev .sous-intro p {
        width: 100%;
        max-width: none; /* important */
    }

    .sous-container-dev .sous-intro h2,
    .sous-container-dev .sous-intro p {
        width: 100%;
        max-width: 100%;
    }
    
    .sous-container-dev > .sous-intro,
    .sous-container-dev > .sous-text {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }


    #logos img {
        width: 100px
    }

    .about-container .about-text, .sous-container-dev .about-text {
        width: 100%;
        row-gap: 2.5rem
    }

    .about-div div {
        width: 33.33%
    }

    .about-div {
        column-gap: .4rem
    }

    .active .clip-img {
        clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
        object-fit: cover
    }

    #blog-content section, .portfolio-item, .services-container, .slider-container, .slider-container2 {
        flex-wrap: wrap
    }





    .bullet2::before, .bullet::before {
        content: "";
        width: 16px;
        height: 16px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%)
    }

    .blog-card-image img, .portfolio-item .right img {
        max-height: 200px
    }



    #process h2 {
        width: 100%;
        row-gap: 2vh
    }

    .process-card {
        flex: 0 0 90%
    }

    .process-card-icon img {
        height: 100%;
        object-fit: contain
    }

    .process-card-icon {
        height: 40%
    }

    #feedback-wrapper {
        flex-direction: column-reverse;
        align-items: flex-start;
        width: 100%;
        row-gap: 4vh
    }

    #feedback-title {
        width: 100%;
        margin-top: var(--margin-80px)
    }

    #feedback {
        width: 100%;
        height: 100vh;
        align-items: flex-start;
        margin-top: 0;
        column-gap: 0;
        flex-direction: column;
        margin-bottom: 0
    }


    #avantages > h2, .feedback-author {
        margin-top: var(--margin-40px)
    }

    .feedback-card {
        justify-content: space-between;
        align-items: space-between
    }

    .avantages-fixed img, .image-cta {
        height: 100%
    }

        .image-cta img {
            height: 100%;
            object-fit: cover;
            object-position: 42% center
        }

    .cta-container {
        flex-direction: column-reverse;
        row-gap: 4vh;
        align-items: flex-start
    }

        .cta-container .cta-right {
            text-align: left
        }

    #blog {
        margin-bottom: var(--margin-80px)
    }

    .blog-container {
        flex-direction: column;
        row-gap: 4vh
    }

    #contact {
        min-height: calc(100vh + 460px);
        padding-top: var(--margin-80px);
        padding-bottom: var(--margin-80px)
    }

    #contact-wrapper {
        height: auto;
        flex-direction: column;
        row-gap: 4vh
    }

    #footer-links {
        flex-wrap: wrap;
        width: 100%;
        column-gap: 1rem;
        justify-content: space-between;
        margin-top: 1.5rem;
        row-gap: 1rem
    }

    #footer-logo {
        width: 50%
    }

    #footer-head {
        row-gap: 2vh;
        flex-direction: column
    }

    #footer-links a, #footer-social {
        font-size: 12px
    }

    #footer-links div {
        display: flex;
        flex-direction: column;
        width: 47%
    }

    .about-div .last {
        padding-left: 1rem
    }
    
    #hero.subpage {
        padding-bottom: 0
    }

    #hero.subpage .hero-container {
        align-items: flex-end;
        padding-bottom: 3vh
    }

    #hero.subpage .hero-wrapper {
        flex-direction: column;
        flex-wrap: nowrap
    }

    #blog, #hero.subpage .hero-container .hero-left {
        height: auto
    }

    
    .about-wrapper {
        flex-direction: column
    }

    article > section:last-of-type {
        flex-wrap: wrap-reverse !important
    }

    .bullets, .bullets2 {
        bottom: var(--margin-40px);
        column-gap: 1rem
    }

    .bullet, .bullet2 {
        width: 8px;
        height: 8px
    }

        .bullet2::before {
            border: 1px solid var(--white-color);
            border-radius: 50%
        }

        .bullet::before {
            border: 1px solid var(--tertiary-color);
            border-radius: 50%
        }


    .slider {
        row-gap: 1.5vh
    }
    .slider-left {
        height: 30%
    }


    .slider > h2 {
        margin-top: var(--margin-80px)
    }

    #process-wrapper {
        row-gap: 3vh
    }

    .avantages-scroll {
        width: 100%;
        height: 50%
    }

    .avantages-fixed {
        width: 100%;
        height: 40%;
        background: url('/Content/img/StaticNoise.webp') repeat center center fixed var(--white-color);
        z-index: 3;
        padding: var(--base-padding-y) 0;
        top: auto
    }

    .avantages-wrapper {
        flex-wrap: wrap-reverse;
        align-items: start;
        height: 100%
    }
}
/*--------END MEDIA QUERY @media only screen and ---------------------------*/

@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    :root {
        --base-padding-x: max(3vw, 16px)
    }

    .about-div span {
        font-size: clamp(.75rem, 5.5vw, 5rem)
    }

    .about-container {
        padding: 3vw;
        min-height: 48vh
    }

    .services-card {
        padding: 1rem;
        height: max(35vh,300px);
        width: 100%
    }

        .services-card img {
            object-fit: cover
        }

    #footer-links, .services-container {
        flex-wrap: wrap
    }



    .process-card {
        flex: 0 0 45%
    }

    .portfolio-item {
        flex-wrap: wrap;
        row-gap: 9vh
    }

        .portfolio-item .left, .portfolio-item .right {
            width: 100%;
            padding-right: 0
        }

        .portfolio-item .left {
            height: auto
        }



    #process {
        min-height: 50vh !important
    }

    #blog {
        height: 60vh
    }

    #contact-wrapper {
        flex-wrap: wrap;
        align-items: center;
        align-self: center;
        height: auto;
        row-gap: 3vh
    }

    #contact-details, #contact-form {
        width: 100%
    }

    #footer-links div {
        width: 40%
    }

    .nav-toggle-info, .nav-toggle-info a, .nav-toggle-info p {
        font-size: 14px
    }

    .nav-toggle-info-left, .nav-toggle-left {
        width: 60%
    }
}
/*--------END MEDIA QUERY @media only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) ---------------------------*/


/*----------------  
    Contact 
----------------*/
#contact #adresa,
#contact #success,
#contact #error {
    display: none;
}


#contact .bali {
    position: absolute;
    left: -9999px;
}

.wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--white-color);
    text-decoration: none;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.wa-btn:hover {
    text-decoration: underline;
}

.wa-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


.nav-toggle-left ul.nav-portfolio li {
    padding: 0; /* remove padding from li */
}

.nav-toggle-left ul.nav-portfolio li a {
    display: flex; /* better than block */
    align-items: center; /* vertical centering */
    width: 100%;
    height: 100%; /* KEY FIX */
    padding: 1.5rem 0; /* restore spacing */
}


.section-label {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    font-family: Montserrat-Bold;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    line-height: 140%;
    color: var(--secondary-color);
}
/* =========================================================
   CTA V2
   ========================================================= */

.cta-v2 {
    width: 100%;
    min-height: 50vh;
    height: auto;
    display: block;
    padding: var(--margin-40px) var(--base-padding-x);
}

/* Reverse layout */
.cta-v2--reverse .cta-container {
    flex-direction: row-reverse;
}

/* Container */
.cta-v2 .cta-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 6vw;
    min-height: 50vh;
}

/* Columns */
.cta-v2 .cta-left,
.cta-v2 .cta-right {
    flex: 1 1 0;
    min-width: 0;
}

.cta-v2 .cta-right {
    text-align: left;
    align-items: flex-start;
}

/* Left (image wrapper) */
.cta-v2 .cta-left {
    display: flex;
    align-items: center;
}

/* Image */
.cta-v2 .image-cta {
    width: 100%;
    height: 100%;
    min-height: 34vh;
    max-height: 420px;
    overflow: hidden;
    border-radius: 32px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

    .cta-v2 .image-cta img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

/* Right (text) */
.cta-v2 .cta-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    row-gap: 0.9rem;
}

/* Text elements */
.cta-v2 .cta-kicker {
    margin: 0;
}

.cta-v2 .cta-right h2,
.cta-v2 .cta-right h3 {
    margin: 0;
}

/* Button */
.cta-v2 .button {
    margin-top: var(--margin-20px);
}


/* =========================================================
   CTA V2 – TABLET
   ========================================================= */

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

    .cta-v2 {
        padding-bottom: var(--margin-40px);
    }

        .cta-v2 .cta-container {
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            row-gap: var(--margin-40px);
            min-height: auto;
        }

        .cta-v2 .cta-left,
        .cta-v2 .cta-right {
            width: 100%;
            flex: 0 0 auto;
        }

        .cta-v2 .image-cta {
            min-height: 0;
            height: 32vh;
            max-height: 260px;
            border-radius: 24px;
        }

        .cta-v2 .cta-right {
            justify-content: flex-start;
            row-gap: 0.6rem;
        }
}


/* =========================================================
   CTA V2 – MOBILE
   ========================================================= */

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

    .cta-v2 {
        min-height: 50vh;
    }

        .cta-v2 .image-cta {
            height: 28vh;
            max-height: 220px;
        }

        .cta-v2 .button {
            width: 100%;
            justify-content: center;
        }
}