/* 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 '-'
(143,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(164,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(171,22): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(180,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(224,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(228,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(234,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(259,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(263,25): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(271,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(281,29): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(291,18): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(300,33): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(351,19): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(351,38): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(392,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(399,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(405,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(441,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(482,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(513,16): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(517,16): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(521,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(544,30): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(547,47): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(547,70): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(559,18): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(564,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(568,18): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(571,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(583,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(595,19): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(605,42): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(663,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(673,32): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(690,26): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(691,27): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(692,30): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(842,29): run-time error CSS1039: Token not allowed after unary operator: '-base-margin'
(845,18): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(845,37): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(850,50): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(855,51): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(890,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(895,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(919,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(923,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1043,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1064,26): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1071,37): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1095,23): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1123,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1127,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1158,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(1162,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1241,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(1258,31): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1295,24): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1296,25): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1319,17): run-time error CSS1039: Token not allowed after unary operator: '-quaternary-color'
(1320,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1324,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1353,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1358,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1365,29): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1396,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1484,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1490,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1498,22): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1499,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1513,23): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1519,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1520,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1521,25): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1531,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1560,23): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1561,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1577,21): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1584,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1589,20): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1590,29): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1643,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1646,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1668,59): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1678,59): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1684,22): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1688,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1702,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1703,59): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1719,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(1724,18): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1743,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1765,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1766,25): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1904,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1922,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1923,25): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1959,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(2044,25): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(2186,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2201,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2230,29): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2246,30): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2263,32): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2354,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2365,32): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(2379,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2394,90): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(2396,23): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-y'
(2410,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2513,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(2553,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(2569,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(2582,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(2589,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2596,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(2606,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2619,59): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(2627,19): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2627,38): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(2673,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(2680,33): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(2689,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(2696,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(2714,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2729,23): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2731,23): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2731,42): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(2761,59): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(2762,19): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2762,38): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(2769,19): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2798,21): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(2807,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2879,29): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2892,29): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(2906,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(2908,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(2910,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(2914,26): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(2915,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(2934,19): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2934,38): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(3015,30): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(3022,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;
    --secondary-color-text: #B84522;
    --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;
}
/* Versiune precedenta care baga o linie mica alba la top pe mobil.
html {
    scroll-behavior: smooth
}

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

html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    background: var(--primary-color);
}

body {
    font-size: 1rem;
    margin: 0;
    padding: 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-text); /* unify with design system */
    display: block; /* IMPORTANT → spacing works everywhere */
    margin-bottom: 12px; /* global spacing */
}

.small-on-dark {
    color: var(--secondary-color);
}

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 {
    display: inline-flex;
    align-items: center;
    padding: .75rem 1rem;
    margin-top: .75rem;
    background: rgba(5, 32, 41, .9);
    border-left: 5px solid var(--secondary-color);
    border-radius: .75rem;
    color: #fff;
    font-size: .95rem;
    font-weight: 500;
    width: fit-content;
    max-width: 100%;
}

.error:empty {
    display: none;
}


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
}
/* V1
.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)
}
*/
/* V2 pentru contrast la case study (pe fond alb)*/
.header-active {
    background-color: rgba(5,32,41,.88);
    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%
}
.nav-toggle-wrapper:first-child .nav-toggle-right {
    align-items: center;
    justify-content: center;
}

#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)
}

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

.button:hover #btnIcon path {
    stroke: var(--secondary-color)
}
.button:hover .submit-text {
    color: 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.webp') 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%
}

.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.128x128.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 {
    padding-left: var(--base-padding-x);
    margin-bottom: var(--margin-40px);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.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;*/
    background: var(--primary-color);
    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
}

@media only screen and (max-width: 767px) {
    #contact .gradient .orangeBulb1 {
        right: -45%;
        top: -5%;
        width: 120%;
        filter: blur(180px);
        opacity: .75;
    }

    #contact .gradient .greenBulb1 {
        left: -35%;
        top: -20%;
        width: 120%;
        filter: blur(140px);
        opacity: .55;
    }

    #contact .gradient .blueBulb1 {
        left: -30%;
        top: 20%;
        width: 120%;
        filter: blur(120px);
        opacity: .6;
    }
}



#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 {
    position: absolute;
    bottom: var(--margin-80px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 1.5rem
}

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


.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.65rem;
        padding-bottom: 0.65rem;
        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(20px, 3.5vw, 24px);
    }

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

    .nav-toggle-mobile ul li ul li {
        border: none !important;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .nav-toggle-mobile ul li ul li a {
        font-size: clamp(17px, 1vw, 20px);
        color: rgba(242,242,242,.82);
        font-weight: 400;   
    }
    
    .nav-toggle-mobile ul li ul li a::before {
        content: "-";
        opacity: .5;
        margin-right: .5rem;
    }
    
    #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
    }





     .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
    }

    /*-------------- START CONTACT   -------------------*/
    

    #contact {
        height: auto;
        min-height: auto;
        display: flex;
        align-items: flex-start;        
        padding-bottom: var(--margin-80px);
    }

    #contact-wrapper {
        position: relative;
        top: auto;
        left: auto;
        height: auto;
        flex-direction: column;
        row-gap: 2rem;
    }

    #contact-content {
        justify-content: flex-start;        
    }

    #contact-title {
        padding-top: calc(var(--margin-80px) + 10px);
        
    }

    #contact-title p {
        margin-bottom: 1.25rem;
    }

    /* Hide privacy paragraph on mobile */
    #contact-title p:last-child {
        display: none;
        margin-bottom: 0;
    }

    /* Optional: hide address/time on mobile to show textarea earlier */
    #contact-details {
        display: none;
    }

    #contactform,
    #contact-form {
        width: 100%;
    }

    #msg {
        height: 100px;
    }
    

    /*-------------- END CONTACT   -------------------*/

    #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
    }


    .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-text);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#contact a {
    color: var(--secondary-color);
    text-decoration: underline;
    text-underline-offset: .15em;
    transition: opacity .2s ease;
}

#contact a:hover {
    opacity: .8;
}
/*--------------------------------
    INTERNAL LINK
-----------------------------------------*/
.internal-link {
    color: var(--secondary-color-text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color .2s ease;
}

.internal-link:hover {
    color: var(--primary-color);
}

.case-link {
    font-family: Montserrat-Medium;
    font-size: clamp(18px, 1.2vw, 1.75rem);
    text-decoration: none;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    column-gap: 1.5vw;
    cursor: pointer;
    transition: color .2s ease;
}

.case-link:hover {
    font-family: Montserrat-SemiBold;
    color: var(--primary-color);
}

.blog-article-hero .section-label {
    margin-top: 8px;
}


/*--------------------------------
    FAQ SECTION
--------------------------------*/

.faq-section {
    background: url('/Content/img/StaticNoise.webp') var(--white-color) repeat;
}

.faq-container {
    display: flex;
    column-gap: 9vw;
    align-items: center;
    min-height: 50vh;
    padding: var(--margin-80px) var(--base-padding-x);
}

.faq-left,
.faq-right {
    width: 50%;
}

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

    .faq-left p {
        max-width: 38rem;
    }

.faq-section-reverse .faq-container {
    flex-direction: row-reverse;
}

.faq-right {
    display: flex;
    flex-direction: column;
}

.faq-item {
    border-bottom: 1.5px solid rgba(5, 32, 41, .25);
}

    .faq-item:first-child {
        border-top: 0;
    }

.faq-question {
    display: block;
    width: 100%;
    padding: 1.4rem 2rem 1.4rem 0;
    border: 0;
    margin: 0;
    background: transparent;
    font-family: Montserrat-SemiBold;
    font-weight: normal;
    font-size: clamp(16px, 1.1vw, 22px);
    line-height: 140%;
    color: var(--tertiary-color);
    text-align: left;
    cursor: pointer;
    position: relative;
}

    .faq-question:focus-visible {
        outline: 2px solid var(--secondary-color);
        outline-offset: 4px;
    }

    .faq-question::after {
        content: "+";
        position: absolute;
        right: 0;
        top: 1.4rem;
        color: var(--secondary-color);
        font-family: Montserrat-SemiBold;
        font-size: 1.5rem;
        line-height: 1;
    }

.faq-item.active .faq-question {
    color: var(--tertiary-color);
}
.faq-item.active .faq-question::after {
    content: "−";
}


.faq-answer {
    display: none;
    padding: .5rem 2rem 1.4rem 0;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-answer,
.faq-answer p {
    color: var(--primary-color);
}

    .faq-answer p {
        line-height: 155%;
        margin: 0;
    }

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

    .faq-container,
    .faq-section-reverse .faq-container {
        flex-direction: column;
        align-items: flex-start;
        row-gap: var(--margin-40px);
        min-height: auto;
        padding: var(--margin-80px) var(--base-padding-x);
    }

    .faq-left,
    .faq-right {
        width: 100%;
    }

    .faq-left {
        order: 1;
    }

    .faq-right {
        order: 2;
    }

    .faq-question {
        padding: 1.2rem 2rem 1.2rem 0;
    }

        .faq-question::after {
            top: 1.2rem;
        }
}

/*----------------------------------
    COMPARISON V2
-----------------------------------*/

.comparison-v2 {
    background: url('/Content/img/StaticNoise.webp') var(--white-color) repeat;
    padding: var(--margin-80px) var(--base-padding-x);
}

.comparison-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: var(--margin-40px);
}

    .comparison-container h2 {
        max-width: 90%;
    }

    .comparison-container > p {
        max-width: 1100px;
    }

.comparison-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.comparison-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
}

    .comparison-table th,
    .comparison-table td {
        padding: 18px 22px;
        vertical-align: top;
        text-align: left;
        color: var(--tertiary-color);
        font-family: Montserrat-Medium;
        font-size: clamp(14px, 1vw, 20px);
        line-height: 1.45;
        border-bottom: 1.5px solid rgba(5, 32, 41, .18);
    }

    .comparison-table th {
        font-family: Montserrat-SemiBold;
        color: var(--primary-color);
    }

        .comparison-table th:first-child,
        .comparison-table td:first-child {
            width: 18%;
            font-family: Montserrat-SemiBold;
        }

        .comparison-table th:nth-child(2),
        .comparison-table td:nth-child(2),
        .comparison-table th:nth-child(3),
        .comparison-table td:nth-child(3) {
            width: 41%;
        }
/*
@media only screen and (max-width: 767px) {

    .comparison-v2 {
        padding: var(--margin-80px) var(--base-padding-x);
    }

    .comparison-container h2 {
        max-width: 100%;
    }

    .comparison-table {
        min-width: 820px;
    }

        .comparison-table th,
        .comparison-table td {
            padding: 14px 16px;
        }
}
*/

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

    .comparison-table-scroll {
        overflow-x: visible;
    }

    .comparison-table {
        min-width: 0;
        width: 100%;
        display: block;
    }

        .comparison-table thead {
            display: none;
        }

        .comparison-table tbody {
            display: block;
        }

        .comparison-table tr {
            display: block;
            padding: 18px 0;
            border-bottom: 1.5px solid rgba(5, 32, 41, .18);
        }

        .comparison-table td {
            display: block;
            width: 100% !important;
            padding: 0;
            border-bottom: 0;
        }

            .comparison-table td:first-child {
                font-family: Montserrat-SemiBold;
                color: var(--primary-color);
                font-size: clamp(18px, 5vw, 22px);
                margin-bottom: 14px;
            }

            .comparison-table td:not(:first-child)::before {
                content: attr(data-label);
                display: block;
                margin-bottom: 4px;
                font-family: Montserrat-SemiBold;
                font-size: 13px;
                text-transform: uppercase;
                letter-spacing: 0.06rem;
                color: var(--secondary-color-text);
            }

            .comparison-table td:not(:first-child) {
                margin-bottom: 14px;
                line-height: 1.5;
            }

            .comparison-table td:last-child {
                margin-bottom: 0;
            }
}

.button-orange {
    background: var(--secondary-color) !important;
    background-image: none !important;
    border-color: var(--secondary-color) !important;

    color: var(--white-color) !important;
}

    .button-orange:hover {
        background: var(--secondary-color);
        color: var(--white-color);
    }

.submit-text {
    color: #F2F2F2;
    line-height: 1;
}

/*------------------ TEST -----------------------*/

/* =========================================================
   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;
}


/* =========================================================
   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;
        }
}