/* ========================= */
/* :: 1.0 WEB FONTS  */
/* ========================= */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ================================== */
/* :: 2.0 GLOBAL Variable Define CSS  */
/* ================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    /* Google Font */
    --inter: 'Inter', sans-serif;
    --bebas-neue: 'Bebas Neue', sans-serif;

    /* Color Palette */
    --white: #fff;
    --black: #000;
    --body-color: #242424;
    --primary: #dd042b;
    --dark: #0e151b;
    --dark-2: #0d1216;
    --gray-light: #d9d9d9;
    --gray-dark: #73797c;
}

/* ========================= */
/* :: 3.0 COMMON CSS */
/* ========================= */
html,
body {
    height: 100%;
    scroll-behavior: smooth;
}
body {
    color: var(--white);
    font-size: 16px;
    font-family: var(--inter);
    font-weight: 400;
    line-height: normal;
    background-color: var(--body-color);
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}
section,
.section {
    position: relative;
}
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}
a,
button {
    outline: none;
    box-shadow: none;
    text-decoration: none;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
button {
    padding: 0;
    border: none;
    background: unset;
}
ol,
ul {
    margin: 0;
    padding: 0;
}
ol li,
ul li {
    list-style: none;
}
img {
    height: auto;
    max-width: 100%;
    object-fit: cover;
}
input,
input:focus,
input:focus-visible,
input:active,
select,
.form-select,
.form-select:focus,
textarea {
    outline: none;
    box-shadow: none;
}
* + address,
* + dl,
* + fieldset,
* + figure,
* + ol,
* + p,
* + pre,
* + ul {
    margin: 0;
    padding: 0;
}

*::-moz-selection {
    background: var(--secondary);
    color: var(--white);
    text-shadow: none;
}
::-moz-selection {
    background: var(--secondary);
    color: var(--white);
    text-shadow: none;
}
::selection {
    background: var(--secondary);
    color: var(--white);
    text-shadow: none;
}

/* =============================== */
/* :: 4.0 Common CSS */
/* =============================== */

/* ===== Typography CSS Start ===== */
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--bebas-neue);
}

.ff-bebas-neue {
    font-family: var(--bebas-neue);
}
.ff-inter {
    font-family: var(--inter);
}

.fs-1 {
    font-size: 40px !important;
    line-height: 1.21;
}
.fs-2 {
    font-size: 28px !important;
    line-height: normal;
}
.fs-3 {
    font-size: 26px !important;
    line-height: normal;
}
.fs-4 {
    font-size: 21px !important;
    line-height: normal;
}
.fs-5 {
    font-size: 18px !important;
    line-height: normal;
}
/* ===== Typography CSS End ===== */

/* ===== Color CSS Start ===== */
.text-primary {
    color: var(--primary) !important;
}
/* ===== Color CSS End ===== */

/* ===== Button CSS Start ===== */
.btn {
    --btn-height: 36px;
    /* Diagonal seam angle — identical to the grey plate behind the logo
       (.logo--header::after uses transform: skewX(141deg) → 180 − 141 = 39°
       off vertical). Deriving the skew from the height keeps that exact same
       angle at every responsive button height. */
    --btn-slant: 39deg;
    --btn-skew: calc(var(--btn-height) * tan(var(--btn-slant)));
    /* Outer corner chamfer: the angle only cuts the corner, then the
       edge runs straight down — like the "Oplossingen" sub-buttons. */
    --btn-chamfer-x: 13px;
    --btn-chamfer-y: 18px;
    height: var(--btn-height);
    padding: 0;
    border: none;
    border-radius: 0;
    color: var(--white);
    line-height: normal;
    display: inline-flex;
    align-items: center;
    /* Transparent gap between the grey text part and the red icon part */
    gap: 5px;
    transition: all 0.3s ease;
}
.btn:hover {
    color: var(--white);
    gap: 9px;
}
.btn__text {
    height: 100%;
    font-size: 16px;
    font-family: var(--bebas-neue);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    clip-path: polygon(
        0% var(--btn-chamfer-y),
        var(--btn-chamfer-x) 0%,
        100% 0%,
        calc(100% - var(--btn-skew)) 100%,
        0% 100%
    );
    background: #73797c;
    padding: 9px 16px 8px;
    padding-left: calc(var(--btn-chamfer-x) + 10px);
    /* The slanted seam eats into the right side, so add half the skew back on
       top of the left padding — text then sits equally far from both edges. */
    padding-right: calc(var(--btn-chamfer-x) + 10px + var(--btn-skew) / 2);
    transition: all 0.3s ease;
}
.btn__text__wrapper {
    position: relative;
    overflow: hidden;
    height: 1.2em;
    display: inline-flex;
    align-items: center;
}
.btn__text__default,
.btn__text__hover {
    display: block;
    white-space: nowrap;
    line-height: 1.2em;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    transition: transform 0.3s ease;
}
.btn__text__hover {
    position: absolute;
    top: 100%;
    left: 0;
}
.btnAnim:hover .btn__text__default {
    transform: translateY(-100%) translateZ(0);
}
.btnAnim:hover .btn__text__hover {
    transform: translateY(-100%) translateZ(0);
}
.btn__icon {
    height: 100%;
    clip-path: polygon(
        var(--btn-skew) 0%,
        100% 0%,
        100% calc(100% - var(--btn-chamfer-y)),
        calc(100% - var(--btn-chamfer-x)) 100%,
        0% 100%
    );
    background: var(--primary);
    padding: 8px 18px;
    padding-left: calc(var(--btn-skew) + 2px);
    padding-right: 18px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    margin-left: calc(var(--btn-skew) * -1);
}
.btn__icon svg {
    width: 16px;
    height: 16px;
}

/* Note:-  */

/* Button Animation */

/* ===== Button CSS End ===== */

/* ===== CSS for Random Componetns/Classes Start ===== */

/* PreLoader Start */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
#loader {
    position: relative;
    width: 96px;
    height: auto;
    padding: 2px;
    background-color: rgba(221, 4, 44, 1);
    clip-path: polygon(
        12px 0%,
        100% 0%,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        0% 100%,
        0% 12px
    );
    animation: loaderPulse 1s ease-in-out infinite;
}
#loader-inner {
    width: 100%;
    height: 100%;
    padding: 8px;
    background-color: #222;
    clip-path: polygon(
        11px 0%,
        100% 0%,
        100% calc(100% - 11px),
        calc(100% - 11px) 100%,
        0% 100%,
        0% 11px
    );
}
#loader-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    clip-path: polygon(
        5px 0%,
        100% 0%,
        100% calc(100% - 5px),
        calc(100% - 5px) 100%,
        0% 100%,
        0% 5px
    );
}
@keyframes loaderPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.06);
        opacity: 0.75;
    }
}
/* PreLoader End */

/* Fixed header background image — all content scrolls over it.
   Covers the top ~75% of the viewport and fades into the dark base below.
   A dark tint keeps text readable where it passes over the image. */
.page-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Fills the whole screen and is fixed, so the image AND the fade over it
       stay put while all content scrolls over them. The image stays visible
       across the full viewport; the tint only darkens it enough to keep text
       readable (a touch heavier at the top for the header + hero copy). */
    height: 100vh;
    z-index: -1;
    /* Fade darkens left → right (darkest on the left, where the hero copy
       sits, lighter on the right so the image shows through) with an extra
       darker band along the bottom. Two stacked gradients over the fixed
       image; both use the same dark tone so they blend cleanly. */
    background:
        linear-gradient(
            to right,
            rgba(13, 18, 22, 0.92) 0%,
            rgba(13, 18, 22, 0.62) 45%,
            rgba(13, 18, 22, 0.34) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(13, 18, 22, 0) 45%,
            rgba(13, 18, 22, 0.75) 100%
        ),
        url('../imgs/hero-bg.webp') no-repeat center center / cover;
    pointer-events: none;
}
/* Transparent wrapper: the fixed header image stays visible behind the
   text and blocks that scroll over it. */
.page-scroll {
    position: relative;
    z-index: 1;
}

.section-overlay {
    position: relative;
    z-index: 1;
}
.section-overlay::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0d1216;
    opacity: 0.85;
    z-index: -1;
}
.transition-common {
    transition: all 0.3s ease-in-out;
}
.transition-ease {
    transition: all 0.4s ease;
}
/* ===== CSS for Random Componetns/Classes End ===== */

/* =============================== */
/* :: 5.0 Header Area CSS Start */
/* =============================== */
.header--area {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(217, 217, 217, 0.25);
    background-color: rgba(13, 18, 22, 0.92);
    backdrop-filter: blur(8px);
}

/* Logo grey angled plate — base (mobile) so it matches desktop */
.logo--header {
    padding: 8px 0;
    padding-right: 32px;
}
.logo--header::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 999999%;
    height: 100%;
    background-color: #d9d9d9;
    z-index: -1;
    transform: skewX(141deg);
}
.header__wrapper {
    padding: 16px 0;
}

.logo--mobileMenu {
    max-width: 72px;
    width: 100%;
}
.logo__wrap {
    max-width: 64px;
    width: 100%;
}
.mobile-menu.offcanvas {
    background-color: rgba(14, 21, 27, 0.8);
    backdrop-filter: blur(8px);
}
.btn--mobileMenuOpen,
.btn--mobileMenuClose,
.btn--modalClose {
    height: 40px;
    width: auto;
    color: var(--white);
    font-size: 16px;
}
.btn--mobileMenuOpen:hover .btn__icon,
.btn--mobileMenuClose:hover .btn__icon,
.btn--modalClose:hover .btn__icon {
    background-color: var(--white);
    color: var(--primary);
}
.nav__item--mobileMenu {
    border-bottom: 1px solid var(--gray-light);
}
.nav__link--mobileMenu {
    padding: 14px 0;
    color: var(--white);
}
.nav__link--mobileMenu:hover {
    color: var(--primary);
}
.action-btns {
    gap: 16px;
}
.mobile-menu .action-btns .btn {
    --btn-height: 42px;
}
.mobile-menu .action-btns .btn__text {
    font-size: 18px;
    padding: 11px 20px 10px;
    padding-right: calc(20px + var(--btn-skew) / 2);
}
.mobile-menu .action-btns .btn__icon {
    padding: 8px 26px;
    padding-right: 18px;
}
.search-btn {
    width: 24px;
    height: 24px;
}
.search-btn svg {
    width: 100%;
    height: 100%;
}
.search-modal .modal-content {
    background-color: rgba(14, 21, 27, 0.8);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
}
.search-modal .modal-header {
    border: none;
}

/* Navigation for Desktop Start */
.nav__wrapper--header {
    gap: 32px;
}
.nav__item--header::after {
    content: '';
    position: absolute;
    right: -17px;
    top: 45%;
    transform: translateY(-50%);
    width: 1px;
    height: 85%;
    background-color: #d9d9d9;
}
.nav__item--header:last-child::after {
    display: none;
}
.nav__link--header {
    color: #dadada;
}
.nav__link--header:hover {
    color: var(--primary);
}
/* Navigation for Desktop End */

/* ---- Text flip animation ---- */
.link-anim__text__wrapper {
    position: relative;
    overflow: hidden;
}
.link-anim__text__default,
.link-anim__text__hover {
    display: block;
    white-space: nowrap;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    transition:
        transform 0.3s cubic-bezier(0.76, 0, 0.24, 1),
        color 0.3s ease;
}
.link-anim__text__hover {
    position: absolute;
    top: 100%;
    left: 0;
    color: currentColor;
}
.link-anim:hover .link-anim__text__default {
    transform: translateY(-100%) translateZ(0);
}
.link-anim:hover .link-anim__text__hover {
    transform: translateY(-100%) translateZ(0);
    color: currentColor;
}
/* =============================== */
/* :: 5.0 Header Area CSS End */
/* =============================== */

/* =============================== */
/* :: 6.0 Hero Section CSS Start */
/* =============================== */
.hero--section {
    min-height: 468px;
    padding: 48px 0;
    background: transparent;
}
.hero__wrapper {
    max-width: 632px;
}
.main__title {
    font-size: 36px;
}
.hero__para {
    line-height: 1.7;
}
/* =============================== */
/* :: 6.0 Hero Section CSS End */
/* =============================== */

/* =============================== */
/* :: 7.0 Expertise Section CSS Start */
/* =============================== */
.expertise--section {
    padding: 48px 0;
}
.expertise__card {
    height: 100%;
    padding: 32px 24px;
    top: 0;
    border: 1px solid var(--gray-dark);
    background: linear-gradient(to bottom, #172e41 0%, #000 50%, #172e41 100%);
    background-size: auto 200%;
    transition: all 0.25s ease-in-out;
}
.expertise__card::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: all 0.25s ease-in-out;
    z-index: 1;
}
.expertise__card:hover {
    top: -8px;
    border-color: rgba(221, 4, 44, 0.75);
    box-shadow: 0 0 16px var(--dark-2);
    background-position: bottom center;
}
.expertise__card:hover::after {
    width: 100%;
}
.expertise__icon__box {
    width: 60px;
    height: 60px;
}
/* =============================== */
/* :: 7.0 Expertise Section CSS End */
/* =============================== */

/* =============================== */
/* :: 8.0 Customer Section CSS Start */
/* =============================== */
.customer__slider {
    padding: 24px 0;
    background: var(--dark-2);
}
.customer__slider .swiper-wrapper {
    transition-timing-function: linear;
}
.customer__slider .swiper-slide {
    width: 80px;
    height: auto;
}
/* =============================== */
/* :: 8.0 Customer Section CSS End */
/* =============================== */

/* =============================== */
/* :: 9.0 Solutions Section CSS Start */
/* =============================== */
.solutions--section {
    padding-top: 56px;
}
.nav-tabs,
.nav-tabs .nav-link,
.nav-tabs .nav-link.active {
    border: none;
    border-radius: 0;
    background-color: transparent;
    padding: 0;
}
.nav-tabs .nav-link,
.nav-tabs .nav-link.active {
    padding: 11px 26px;
    font-family: var(--bebas-neue);
    font-size: 18px;
    text-transform: uppercase;
    color: var(--white);
    clip-path: polygon(10% 0%, 100% 0%, 100% 50%, 90% 100%, 0% 100%, 0% 50%);
    background-color: var(--gray-dark);
    transition: all 0.4s ease;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
    background-color: var(--primary);
}
.nav-tabs {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: 8px;
    margin-bottom: 40px;
}
/* Custom Scroll */
@supports (scrollbar-color: var(--primary) transparent) {
    .nav-tabs {
        scrollbar-color: var(--primary) transparent;
        scrollbar-width: thin;
    }
}
.nav-tabs::-webkit-scrollbar {
    width: 8px;
    height: 4px;
}
.nav-tabs::-webkit-scrollbar-track {
    background: transparent;
}
.nav-tabs::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 10px;
    border: 2px solid transparent;
}

.tab__wrap {
    gap: 16px;
}
.tab__inner__content {
    height: 100%;
    padding: 24px 20px;
    background-color: #292a2c;
}
.tab__thumb {
    height: 100%;
    padding: 24px 20px;
}
/* =============================== */
/* :: 9.0 Solutions Section CSS End */
/* =============================== */

/* =============================== */
/* :: 10.0 Success Section CSS Start */
/* =============================== */
.success--section {
    padding-top: 48px;
}
.success__card {
    height: 100%;
    top: 0;
    border: 1px solid #73797c;
    background: linear-gradient(to bottom, #242424 0%, #000 100%);
    transition: all 0.25s ease-in-out;
}
.success__card::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: all 0.25s ease-in-out;
    z-index: 1;
}
.success__card:hover {
    top: -8px;
    border-color: rgba(221, 4, 44, 0.75);
    box-shadow: 0 0 16px var(--dark-2);
}
.success__card:hover::after {
    width: 100%;
}
.success__card__thumb {
    width: 100%;
    aspect-ratio: 1 / 0.665;
}
.success__card__thumb {
    position: relative;
    overflow: hidden;
}

.success__card__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
    transform: translateY(-100%);
    transition: all 0.25s ease-in-out;
    pointer-events: none;
    z-index: 1;
}
.success__card:hover .success__card__thumb::after {
    transform: translateY(100%);
}
.success__card__thumb__inner {
    transition: all 0.25s ease-in-out;
}
.success__card:hover .success__card__thumb__inner {
    transform: scale(1.05);
}
.succes__card__inner {
    padding: 24px 20px;
}

.success__card__subtitle,
.success__card__para {
    font-size: 16px;
}
/* =============================== */
/* :: 10.0 Success Section CSS End */
/* =============================== */

/* =============================== */
/* :: 11.0 Experience Section CSS Start */
/* =============================== */
.experience--section {
    margin-top: 48px;
    padding: 48px 0;
}
.experience__wrapper {
    max-width: 792px;
}
.experience--section .section__para {
    line-height: 1.7;
}
/* =============================== */
/* :: 11.0 Experience Section CSS End */
/* =============================== */

/* =============================== */
/* :: 12.0 Contact Section CSS Start */
/* =============================== */
.contact--section {
    padding: 48px 0;
}
.contact__info__item {
    gap: 16px;
}
.contact__info__icon {
    width: 26px;
    height: 26px;
    background-color: var(--primary);
    color: var(--white);
}
.contact__info__text,
.contact__info__link {
    color: var(--white);
}
.contact__info__link:hover {
    color: var(--primary);
}
.contact__info__icon svg {
    width: 50%;
    height: 50%;
}
.form--contact {
    padding: 24px 20px;
    clip-path: polygon(
        16px 0%,
        100% 0%,
        100% calc(100% - 16px),
        calc(100% - 16px) 100%,
        0% 100%,
        0% 16px
    );
    background-color: #2f3338;
}
.form .title {
    font-size: 28px;
}
.form__label {
    font-size: 18px;
}
.form__input__wrapper {
    clip-path: polygon(
        12px 0%,
        100% 0%,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        0% 100%,
        0% 12px
    );
    background-color: var(--white);
    padding: 1px;
    width: 100%;
    height: 40px;
}
.form__input {
    display: block;
    border: none;
    outline: none;
    clip-path: inherit;
    background-color: var(--dark-2);
    padding: 8px 16px;
    color: var(--white);
    font-size: 16px;
}
.form__input__wrapper:has(.form__input:focus),
.form__input__wrapper:has(.form__input:not(:placeholder-shown)) {
    background-color: var(--primary);
}
.form__input::placeholder {
    color: var(--white);
}
.form__input__wrapper--textarea {
    height: 72px;
}
.form__item--submit .btn__text {
    max-width: 344px;
    width: 100%;
}
/* =============================== */
/* :: 12.0 Contact Section CSS End */
/* =============================== */

/* =============================== */
/* :: 13.0 Footer Area CSS Start */
/* =============================== */
.footer--area {
    position: relative;
    z-index: 1;
    background-color: var(--body-color);
}
.footer__top {
    padding: 48px 0;
}
.footer__top__wrapper {
    gap: 16px;
}
.logo--footer {
    max-width: 150px;
    width: 100%;
}
.footer__widgets {
    margin-top: 32px;
}
.nav__link--footer,
.footer__text,
.footer__link {
    color: var(--white);
    font-family: var(--bebas-neue);
    text-transform: uppercase;
    line-height: 1.667;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.nav__link--footer::after,
.footer__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 3px;
    height: 1px;
    width: 100%;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.nav__link--footer:hover,
.footer__link:hover {
    color: var(--primary);
}
.nav__link--footer:hover::after,
.footer__link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}
.footer__bottom {
    padding: 10px 0;
    background-color: var(--gray-dark);
}
.footer__social__link {
    width: 26px;
    height: 26px;
    background-color: var(--white);
    color: var(--dark);
}
.footer__social__link:hover {
    background-color: var(--primary);
    color: var(--white);
}
.footer__social__link svg {
    width: 70.5%;
}
/* =============================== */
/* :: 13.0 Footer Area CSS End */
/* =============================== */