* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
  }
  
:root {
    --background-color: #191919;
    --color: #d1d1d1;
    --neutral-1: #adadad;
    --accent-1: #dfff4f;
    --orange: #EB4D33;
    --border: #525252;
    --dark-gray: #292929;
    --darker-gray: #212121;
    --highlight: #3d3d3d;
    --padding: min(4vw, 16px);
    --type-size: max(0.74vw, 16px);
  }
::selection {
  background: #3d3d3d;
} 

body {
    font-family: 'Inter', sans-serif;
    font-size: var(--type-size);
    line-height:  1.6;
    background-color: var(--background-color);
    color: var(--color);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: none;
}

h1 {
    font-size: 40px;
    line-height: 48px;
    font-weight: 600;
    padding-bottom: 16px;
}

h2 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 500;
    color: var(--neutral-1);
}


h3 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
}

h4 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    color: var(--neutral-1);
}

h5 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
}

h6 {
    color: var(--neutral-1);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

span {
    color: var(--accent-1);
}

a {
    text-decoration: none;
}

.button {
    width: fit-content;
    cursor: pointer; /* Pointer cursor on hover */
    gap: 16px;
    /* padding: 24px 40px 24px 32px; */ /* bigger button */
    background-color: rgba(223, 255, 79, 0.08); /*#dfff4f at 8% */
    border: solid;
    border-radius: 78px;
    border-width: 1px;
    border-color: rgba(223, 255, 79, 0.16);  /*#dfff4f at 16% */
    box-shadow: 0 0 42px rgba(223, 255, 79, 0.12); /*#dfff4f at 8% * Drop shadow */
    transition: box-shadow 0.3s; /* Smooth transition */
}

.button:hover {
    border-color: rgba(223, 255, 79, 0.32);  /*#dfff4f at 32% */
    background-color: rgba(223, 255, 79, 0.12); /*#dfff4f at 12% */
    box-shadow: 0 0 64px rgba(223, 255, 79, 0.16); /*#dfff4f at 8% * Drop shadow */
}

.button a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 32px 16px 28px;
    font-size: 22px;
    line-height: 1.4em;
    color: var(--accent-1);
    text-decoration: none;
    gap: 16px;
}

.container {
    display: flex;
    flex-direction: column;
    /* padding: 0 var(--padding); */
}

.hero {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 48px;
    justify-content: center;
    padding: 80px 12vw;
}

.hero-logo {
    width: 80px;
}

.hero-text {
    gap: 40px;
    max-width: 40vw;
}

.graphics {
    position: absolute;
    top: 80px;
    right: 40px;
    width: 440px;
    z-index: -1;
}

.services {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 64px;
    padding: 80px 12vw;
}

.service-info {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.header-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.service-types {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.type {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.icon-bullet {
    width: 24px;
}

.workflows {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
}

.info-frame {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 504px;
    padding: 40px;
}

.info-title {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

.info-title i::before {
    color: var(--orange);
    width: 24px;
    height: 24px;
}

.info-frame p {
    color: var(--neutral-1);
}

.project-carousel {
    display: flex;
    overflow-x: scroll;
    justify-content: start;
    padding: 0;
    gap: 0;
    scroll-behavior: smooth;
    scrollbar-color: var(--dark-gray) var(--background-color);
}

.project-carousel img {
    width: 640px;
    display: block;
}

.carousel {
    display: flex;
    overflow-x: scroll;
    gap: 40px;
    justify-content: start;
    padding: 80px 12vw;
    scroll-behavior: smooth;
    scrollbar-color: var(--dark-gray) var(--background-color);
}

.testimonials {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
}

.testimonial-info {
    display: flex;
    flex-direction: column;
    height: fit-content;
    gap: 32px;
    border: solid;
    border-width: 1px;
    border-color: var(--highlight);
    border-radius: 8px;
    padding: 40px;
    background-color: var(--darker-gray);
    width: 540px;
    min-width: 480px;
}

.testimonial-info span {
    color: var(--orange);
}

.client {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

.client img {
    width: 32px;
    height: 32px;
    border-radius: 32px;
}

.testimonial-quote {
    font-size: 16px;
    line-height: 24px;
}

.company a {
    width: fit-content;
    display: flex;
    flex-direction: row;
    gap: 8px;
    color: var(--neutral-1);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.company img {
    width: 24px;
    height: 24px;
    border-radius: 24px;
}

.values {
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding: 80px 12vw;
}

.values-all {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
}

.value-frame {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 320px;
    padding: 40px;
}

.value-title {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

.value-title i::before {
    color: var(--orange);
    width: 24px;
    height: 24px;
}

.value-frame p {
    color: var(--neutral-1);
}

.footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 24px 12vw;
    gap: 16px;
    color: var(--neutral-1);
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    /* border-top: solid;
    border-top-width: 1px;
    border-top-color: var(--dark-gray); */
}

.footer img {
    width: 24px;
    height: 24px;
    border-radius: 24px;
}

@media (max-width: 900px) {
    .hero, .services, .testimonials, .values {
        padding: 80px 16px;
    }
    
    .hero-text {
        max-width: none;
    }
    
    .button {
        width: 100%;
    }

    .graphics {
        top: 24px;
        right: 16px;
        width: 240px;
    }

    .info-frame {
        padding: 16px 0;
    }

    .project-carousel img {
        width: 100%;
    }

    .project-carousel {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .carousel {
        flex-direction: column;
        height: auto;
        padding: 0;
        width: 100%;
    }

    .testimonials {
        overflow: hidden;
    }

    .testimonial-info {
        padding: 24px;
        width: 100%;
        min-width: auto;
    }

    .value-frame {
        padding: 16px 0;
    }

    .footer {
        padding: 24px 16px;
    }
}

@media (min-width: 1600px) {
    .project-carousel img {
        width: 920px;
    }
}