/* 1. Box-sizing reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Remove default margins & paddings */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
    padding: 0;
}

/* 3. Reset lists */
ul[role='list'],
ol[role='list'],
ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 4. Set core body defaults */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
}

/* 5. Reset anchors */
a {
    text-decoration: none;
    color: inherit;
}

/* 6. Images & media */
img,
picture,
video,
canvas {
    display: block;
    max-width: 100%;
}

/* 7. Forms */
button,
input,
select,
textarea {
    font: inherit;
    border: none;
    outline: none;
    background: none;
}

button {
    cursor: pointer;
}

/* 8. Tables */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

:root {
    /* Margin scale */
    --margin-xxs: .25rem;
    --margin-xs: .5rem;
    --margin-s: .75rem;
    --margin-m: 1rem;
    --margin-l: 1.25rem;
    --margin-xl: 1.50rem;
    --margin-xxl: 2.50rem;
    /* Padding scale (mirrors margin for consistency) */
    --padding-xxs: 0.25rem;
    --padding-xs: 0.5rem;
    --padding-s: 0.75rem;
    --padding-m: 1rem;
    --padding-l: 1.25rem;
    --padding-xl: 1.5rem;
    --padding-xxl: 2.5rem;
    /* Font family */
    --ff-body: 'Inter', sans-serif;
    --ff-heading: 'Inter', sans-serif;
    /* Size */
    --h1: bold 2.25rem/1.2 var(--ff-heading);
    --h2: 600 1.75rem/1.25 var(--ff-heading);
    --h3: 500 1.1rem/1.45 var(--ff-heading);
    --h4: 600 1rem/1.2 var(--ff-heading);
    --big: normal 1.125rem/1.5 var(--ff-body);
    --p: normal 1rem/1.6 var(--ff-body);
    --small: normal 0.875rem/1.7 var(--ff-body);
    --navbar-link: 600 1rem/1 var(--ff-body);
    --navbar-btn: 400 1/1 var(--ff-body);
    --navbar-brand: 700 1rem/1 var(--ff-body);
    --hero-big-heading: 700 5rem/1 var(--ff-heading);
    --hero-small-heading: 300 1.5rem/1.3 var(--ff-heading);
    --hero-description: 400 1.125rem/1.3 var(--ff-heading);
    --hero-cta-description: 400 1.2rem/1.2 var(--ff-heading);
    /*  Light theme colors */
    --bg-dark: hsl(0, 0%, 0%);
    --bg: hsl(203, 15%, 12%);
    --bg-light: hsl(203, 15%, 21%);
    --primary: hsl(203, 100%, 50%);
    --bg-grid: hsl(203, 15%, 11%);
    --text: hsl(0, 0%, 95%);
    --text-muted: hsl(203, 7%, 70%);
    --border-bg: hsl(203, 15%, 24%);
    --border-bg-light: hsl(203, 15%, 27%);
    --gradient: hsl(0, 0%, 0%);
    --gradient-hover: hsl(0, 0%, 0%);
    --highlight: hsl(190, 15%, 97%);
    --border-card: solid 1px var(--bg);
    --shadow: hsl(0, 0%, 0%);
    /* nav */
    --container-max-width: 1440px;
    background-color: hsl(calc(var(--hue) + 25), 25%, 9%) !important;
}

html {
    background-color: hsl(calc(var(--hue) + 25), 25%, 9%);
    color-scheme: dark;
}


body {
    background-color: hsl(calc(var(--hue) + 25), 25%, 9%);
    overscroll-behavior-y: contain;
    background: linear-gradient(135deg,
            hsl(calc(var(--hue) + 25), 25%, 9%) 100%,
            hsl(var(--hue), 15%, 14%) 0%,
            hsl(calc(var(--hue) + 25), 25%, 9%) 100%);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--ff-body);
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--padding-l);
}

header {
    transition: all ease-in-out .3s;
    position: fixed;
    top: 0;
    z-index: 2;
    width: 100%;
    padding: 0 .5rem;
}

header.scrolled {
    position: fixed;
    top: .5rem;
    z-index: 2;
}

.navbar-container.scrolled {
    background-color: hsla(223, 30%, 3%, 0.9);
    /* or var(--background) */
    backdrop-filter: blur(8px);
}

.navbar {
    /* background-color: var(--nav-bg-dark); */
    color: var(--nav-text);
}

.navbar-container {
    /* border: 1px solid var(--border);
    border-radius: 32px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 55px;
    border-radius: 2px;
    padding: 0 var(--padding-m);
    transition: background-color .3s ease-in-out,
        box-shadow .3s ease-in-out,
        backdrop-filter .3s ease-in-out;

}

.navbar-toggle {
    background: none;
    border: none;
    cursor: pointer;
}

.navbar-toggle svg {
    stroke: var(--text);
}

.navbar-pc {
    display: none;
    align-items: center;
    gap: 10px;
}

.navbar-mobile {
    position: fixed;
    top: 65px;
    left: 0;
    width: 100%;
    z-index: 2;
    display: none;
    padding: .5rem .5rem;
}

.navbar-mobile ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: .75rem;
    color: var(--text);
    background-color: hsla(223, 30%, 3%, 0.9);
    /* or var(--background) */
    backdrop-filter: blur(8px);
    padding: 1.5rem 1.5rem;
    border-radius: .5rem;
}

.navbar-mobile.active {
    display: flex;
}

.navbar-pc li {
    display: inline-flex;
}

.navbar-link {
    font: var(--navbar-link);
    display: inline-block;
    padding: 8px 16px;
}

.navbar-mobile a {
    border-radius: 6px;
    font: var(--navbar-btn);
    /* border: solid 1px var(--text); */
    display: inline-flex;
    align-items: center;
    /* vertical center */
    justify-content: center;
    /* optional horizontal centering */
    gap: 8px;
    /* space between icon and text */
    padding: 8px 16px;
    color: var(--text);
    transition: background-color ease-in-out .3s, color ease-in-out .3s;
}

.navbar-mobile a svg {
    stroke: var(--primary);
    transition: stroke ease-in-out .1s;
}

.navbar-mobile a:hover {
    color: var(--primary);
}

.navbar-brand {
    font: var(--navbar-brand);
}

.grid-overlay {
    position: fixed;
    /* stay on viewport */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1440px;
    /* center max-width */
    height: 100vh;
    /* full viewport height */
    background-image: url('../images/grid.svg');
    background-repeat: repeat;
    background-size: auto;
    pointer-events: none;
    z-index: 0;
    /* shared mask vars */
    --mask-angle: 45deg;
    /* start angle */
    --mask-center: 50%;
    /* start center position */
    --mask-half: 20%;
    /* half-width of the opaque band */

    -webkit-mask-image: linear-gradient(var(--mask-angle),
            rgba(0, 0, 0, 1) calc(var(--mask-center) - var(--mask-half)),
            rgba(0, 0, 0, 0) calc(var(--mask-center) + var(--mask-half)));
    mask-image: linear-gradient(var(--mask-angle),
            rgba(0, 0, 0, 1) calc(var(--mask-center) - var(--mask-half)),
            rgba(0, 0, 0, 0) calc(var(--mask-center) + var(--mask-half)));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 200% 200%;
    mask-size: 200% 200%;
    will-change: mask-image;
}

.hero-container {
    display: flex;
    position: relative;
    z-index: 1;
    flex-direction: column;
    margin-top: 4rem;
}

.hero-text-container {
    display: flex;
    flex-direction: column;
    margin: auto 0;
    flex: 1;
}

.hero-small-heading {
    font: var(--hero-small-heading);
    margin-top: var(--margin-m);
    color: #d1d5db;
}

.hero-description {
    font: var(--hero-description);
    color: var(--text-muted);
    margin-top: var(--margin-m);
}

.hero-cta-btn,
.cta-btn,
.contact-submit-btn {
    border-radius: 6px;
    font: var(--navbar-btn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
}

.hero-cta-btn svg,
.cta-btn svg {
    stroke: var(--text);
}

.btn-primary {
    background-color: var(--primary);
}

.cta-btn {
    background-color: var(--primary);
    margin-top: var(--margin-l);
}

.btn-secondary {
    background-color: var(--text);
    color: var(--bg-dark);
}

.btn-secondary svg {
    stroke: var(--bg-dark);
}

.hero-cta-description {
    font: var(--hero-cta-description);
    margin-top: var(--margin-l);
    max-width: 541px;
}

.hero-cta-description span {
    color: var(--primary);
    font-weight: 500;
}

.btn-primary-gradient {
    background: linear-gradient(90deg,
            hsla(213, 100%, 40%, 1) 0%,
            hsla(233, 100%, 60%, 1) 100%);
}

.section-tag {
    font: var(--small);
    display: flex;
    gap: .5rem;
    align-items: center;
    color: hsl(190, 100%, 55%);
    /* Safari */
}

.section-tag svg {
    stroke: hsl(190, 100%, 55%);
}

.section-heading {
    margin-top: var(--margin-m);
    font: var(--h2);
}

.service-container {
    margin-top: 5rem;
}

.services {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 0 auto;
    margin-top: var(--margin-l);
}

.service {
    border-radius: 6px;
    background-color: var(--bg);
    background: linear-gradient(135deg,
            hsla(calc(var(--hue) + 25), 20%, 16%, .35) 100%,
            hsla(var(--hue), 15%, 12%, .35) 0%,
            hsla(calc(var(--hue) + 25), 20%, 16%, .35) 100%);
    padding: var(--padding-m);
    border: 1px solid color-mix(in srgb, var(--border-bg) 70%, transparent);
    backdrop-filter: blur(3px);
    /* main frosted glass effect */
    -webkit-backdrop-filter: blur(3px);
    /* Safari support */
}

.service h3 {
    font: var(--h3);
    margin-top: .75rem;
    text-transform: uppercase;
}

.service p {
    font: var(--big);
    margin-top: .75rem;
    color: var(--text-muted);
}

.service .icon-rect {
    stroke: var(--border-bg-light);
    fill: var(--bg-light);
    /* color: #ff0000; */
}

.service .icon-path {
    stroke: var(--primary);
}

.about-container {
    margin-top: 5rem;
}

.about {
    background-color: var(--bg);
    padding: var(--padding-l);
    border-radius: 6px;
}

.about-paragraph {
    margin-top: var(--margin-l);
    font: var(--big);
    color: var(--text-muted);
}

.scroll-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 1) 98%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-repeat: no-repeat;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 1) 98%, rgba(0, 0, 0, 0) 100%);
    mask-repeat: no-repeat;
}

.scroll-cards {
    display: flex;
    width: max-content;
    animation: scrollLeft 20s linear infinite;
}

.scroll-cards div {
    /* white-space: nowrap; */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: var(--margin-xl);
    max-width: 225px;
    aspect-ratio: 1/1;
    background: linear-gradient(135deg, hsla(calc(var(--hue) + 25), 15%, 6%, .9) 0%, hsla(calc(var(--hue) + 25), 25%, 10%, .9) 25%, hsla(calc(var(--hue) + 25), 25%, 10%, .9) 50%, hsla(calc(var(--hue) + 25), 15%, 6%, .9) 100%);
    border: solid 1px hsl(calc(var(--hue) + 25), 15%, 18%);
    padding: var(--padding-l);
    border-radius: 1rem;
    text-align: center;
    gap: .75rem;
    z-index: 2;
    backdrop-filter: blur(2px);
    /* main frosted glass effect */
    -webkit-backdrop-filter: blur(2px);
    /* Safari support */
    /* space between loops */
}

.scroll-cards div h2 {
    color: var(--primary);
    font: var(--h4);
}

.scroll-cards div p {
    color: var(--text-muted);
    font: var(--p);
}

.scroll-container:hover .scroll-cards {
    animation-play-state: paused;
}

.section-mt-responsive {
    margin-top: 5rem;
}

.faq-item {
    margin-top: 1rem;
    /* background-color: var(--bg); */
    background: linear-gradient(135deg, hsla(calc(var(--hue) + 5), 10%, 6%, 1) 0%, hsla(calc(var(--hue) + 5), 15%, 8%, 1) 25%, hsla(calc(var(--hue) + 5), 15%, 8%, 1) 50%, hsla(calc(var(--hue) + 5), 5%, 6%, 1) 100%);
    border: solid 1px hsla(calc(var(--hue) + 5), 10%, 18%, 1);
    color: var(--text);
    border-radius: 6px;
    padding: var(--padding-m);
    cursor: pointer;
    transition: border ease-in-out .2s;
    overflow: hidden;
}

.faq-item:hover {
    border: solid 1px var(--primary);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    /* question left, icon right */
    align-items: center;
    width: 100%;
    color: var(--text);
    text-align: left;
    padding: 0;
    margin: 0;
}

.faq-icon {
    transition: transform 0.3s ease;
}

.faq-answer {
    padding-top: 1rem;
}

.faq-answer-container {
    max-height: 0;
    opacity: 0;
    transition: max-height .3s ease-in-out, opacity .3s ease-in-out;
    font: var(--small);
    color: var(--text-muted);
}

.faq-item:not(.active) .faq-answer-container {
    max-height: 0;
    opacity: 0;
}

.faq-item.active .faq-answer-container {
    max-height: 300px;
    opacity: 1;
    /* enough for text */
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
    /* + becomes × */
}

.contact-section {
    /* max-width: 1080px; */
    /* background-color: hsla(calc(var(--hue) + 25), 3%, 6%, .9); */
    background: linear-gradient(135deg, hsla(calc(var(--hue) + 5), 10%, 6%, .9) 0%, hsla(calc(var(--hue) + 5), 15%, 8%, .9) 25%, hsla(calc(var(--hue) + 5), 15%, 8%, .9) 50%, hsla(calc(var(--hue) + 5), 5%, 6%, .9) 100%);
    border-radius: 6px;
    padding: var(--padding-l);
    border: solid 1px hsla(calc(var(--hue) + 5), 13%, 23%, .8);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.contact-section-description {
    margin: var(--margin-m) 0;
    font: var(--big);
    color: var(--text-muted);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.input-group {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    border: solid 1px hsla(calc(var(--hue) + 5), 13%, 23%, .8);
    padding: 0 1rem;
    border-radius: 8px;
}

.input-group div {
    padding: .75rem 0;
}

.input-group svg {
    stroke: hsl(calc(var(--hue) + 5), 7%, 65%);
    margin: auto 0;
    display: block;
}

/* .input-group svg:last-of-type {
    margin-top: 0;
} */
.input-group input::placeholder,
.input-group textarea::placeholder {
    color: hsl(calc(var(--hue) + 5), 7%, 65%);
}


.input-group:focus-within {
    border: solid 1px var(--primary);
}

.input-group:hover {
    border: solid 1px var(--primary);
}

.input-group input,
.input-group textarea {
    width: 100%;
    font-size: 1rem;
    resize: none;
    color: hsl(calc(var(--hue) + 5), 8%, 90%);
    padding: .75rem 0;
}

.contact-submit-btn {
    background-color: var(--primary);
    color: var(--text);
    margin-top: var(--margin-l);
}

.contact-submit-btn:hover {}


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

    100% {
        transform: translateX(-50%);
    }

    /* move half because text is duplicated */
}

.flex-column-mobile {
    margin-top: var(--margin-l);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

footer {
    background: linear-gradient(135deg,
            hsl(calc(var(--hue) + 25), 25%, 5%) 100%,
            hsl(var(--hue), 15%, 8%) 0%,
            hsl(calc(var(--hue) + 25), 25%, 5%) 100%);
    padding: var(--padding-xxl) 0;
}

.footer-text-container .heading svg {
    height: 55px;
}

.footer-text-container .description {
    margin-top: var(--margin-xs);
    font: var(--small);
    color: var(--text-muted);
}

.footer-contact-container {
    display: flex;
    flex-direction: column;
    margin-top: var(--margin-xl);
    gap: .5rem;
}

.footer-contact-container a {
    border-radius: 6px;
    font: var(--small);
    /* border: solid 1px var(--text); */
    display: inline-flex;
    align-items: center;
    /* vertical center */
    justify-content: start;
    /* optional horizontal centering */
    gap: 16px;
    /* space between icon and text */
    color: var(--text);
    transition: color ease-in-out .1s;
}

.footer-contact-container a svg {
    stroke: var(--primary);
}

.footer-contact-container a:hover {
    color: var(--primary);
}

.small-text-disclaimer {
    font-size: .75rem;
    font-weight: 300;
    color: var(--text-muted);
    margin-bottom: var(--margin-xxl);
    text-align: center;
}

.separator {
    width: 100%;
    height: 1px;
    background-color: hsl(0, 0%, 20%);
    /* adjust color */
    margin: 2rem 0;
    opacity: 0.5;
    /* optional subtle look */
}

.footer-navigation {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.footer-navigation div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-navigation h4 {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.footer-navigation a {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    transition: color ease-in-out .2s;
}

.footer-navigation a:hover {
    color: var(--primary);
}

.hp-wrap {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .footer-text-container .heading svg {
        height: 85px;
    }

    .btn-responsive {
        align-self: flex-start;
    }

    .flex-column-mobile {
        flex-direction: row;
    }

    .services {
        grid-template-columns: repeat(2, 1fr);
    }
}

#formMessage {
    transition: opacity 0.4s ease;
}

#formMessage.success {
    color: #3eff5e;
    font: var(--p);
    font-weight: 400;
}

#formMessage.error {
    color: #ff1c42;
    font: var(--p);
    font-weight: 400;
}

.hidden {
    display: none !important;
}



@media (min-width: 1024px) {

    .navbar-btn {
        border-radius: 6px;
        font: var(--navbar-btn);
        /* border: solid 1px var(--text); */
        display: inline-flex;
        align-items: center;
        /* vertical center */
        justify-content: center;
        /* optional horizontal centering */
        gap: 8px;
        /* space between icon and text */
        /* padding: 8px 16px; */
        color: var(--text);
        transition: color ease-in-out .3s;
    }

    .navbar-btn svg {
        stroke: var(--primary);
        transition: stroke ease-in-out .1s;
    }

    .navbar-btn:hover {
        color: var(--primary);
    }

    .section-mt-pc {
        margin-top: 5rem;
    }

    .section-mt-responsive {
        padding: var(--padding-l);
        margin-top: 0rem;
    }

    .faq-contact {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .navbar-toggle {
        display: none;
    }

    .navbar-pc {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .navbar-pc .navbar-link {
        transition: color ease-in-out .2s;
        display: block;
    }

    .navbar-pc a:hover {
        color: var(--primary);
    }

    .navbar-mobile {
        display: none !important;
    }

    /* .dotlottie-container {
        display: block;
    } */

    .hero-container {
        flex-direction: row-reverse;
    }

    .services {
        grid-template-columns: repeat(3, 1fr);
    }

    .about {
        display: flex;
        width: 100%;
        margin: 0 auto;
    }

    .about>.text {
        flex: 2;
        align-self: center;
    }

    .about>.lotie-container {
        flex: 1;
    }

    .p-xxl-lg {
        padding: var(--padding-xxl);
    }

    .footer-contact-section {
        display: flex;
        flex-direction: row;
        gap: 6rem;
    }

    .footer-navigation {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }

    .footer-text-container .heading svg {
        height: 100px;
    }
}

@media (min-width: 1440px) {
    :root {
        --hero-small-heading: 300 2.5rem/1.3 var(--ff-heading);
        --hero-description: 400 1.5rem/1.1 var(--ff-heading);
        --hero-cta-description: 400 1.8rem/1.2 var(--ff-heading);

        --h1: bold 3rem/1.2 var(--ff-heading);
        --h2: 600 2.25rem/1.25 var(--ff-heading);
        --h3: 500 1.4rem/1.45 var(--ff-heading);
        --h4: 600 1.25/1.2 var(--ff-heading);
        --big: normal 1.25rem/1.5 var(--ff-body);
        --p: normal 1rem/1.6 var(--ff-body);
        --small: normal .85rem/1.7 var(--ff-body);
    }

    .footer-navigation {
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem;
    }

    .footer-text-container .heading svg {
        height: 100px;
    }
}

.p-xxl {
    padding: var(--padding-xxl);
}

.p-0 {
    padding: 0;
}

.section-mt {
    margin-top: 5rem;
}

.flex {
    display: flex;
}

.align-items-center {
    align-items: center;

}

.align-content-center {
    align-content: center;
}

.justify-content-center {
    justify-content: center;

}

.justify-content-space-between {
    justify-content: space-between;
}

.justify-content-end {
    justify-content: end;
}

.flex-direction-row {
    flex-direction: row;
}

.flex-direction-column {
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

.z-index-1 {
    position: relative;
    z-index: 1;
}