:root {
    --brand: #268FCA;
    --gray: #474747;
}

body {
    font-family: 'Instrument Sans', sans-serif;
}

p {
    font-size: 18px;
    color: var(--gray);
    line-height: 150%;
}

h1 {
    font-size: 58px;
    font-weight: 100;

    background: -webkit-linear-gradient(15deg, var(--brand), #003756);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    font-size: 46px;
    line-height: 115%;
}

h3 {
    font-size: 28px;
    font-weight: 600;
}

.eyebrow {
    width: 100px;
    height: 10px;

    background: linear-gradient(90deg, #60BBEE -2.22%, #2387C0 67.22%);

    margin-bottom: 40px;

}

button {

    padding: 20px 40px;


    background: linear-gradient(97.73deg, #399FD8 -6.96%, #0775B4 23.5%, #003756 92.79%);
    box-shadow: 0px 10px 15px rgba(1, 115, 153, 0.2);

    width: fit-content;
    font-size: 20px;
    font-weight: 600;
    color: white;
    border: none;
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;

    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
        width: 180px;
    }

    ul {
        display: flex;
        gap: 20px;
    }

    a {
        text-decoration: none;
        color: var(--gray);

        &.active {
            color: var(--brand);
            font-weight: 600;
        }

        &:hover {
            color: var(--brand);
        }
    }

    .hamburger {

        width: 40px;
        height: 40px;

        flex-direction: column;
        justify-content: center;
        gap: 3px;

        display: none;

        div {
            height: 3px;
            background-color: var(--gray);
            width: 100%;
        }
    }
}


.sticky-container {
    position: fixed;
    top: 0;
    width: 100%;

    z-index: 100;
    background-color: rgba(255, 255, 255, 0);

    animation-name: backgroundChange;
    animation-duration: 1ms;
    animation-direction: alternate;
    animation-timeline: scroll(block nearest);
}

@keyframes backgroundChange {
    0% {
        background-color: rgba(255, 255, 255, 0);

    }

    100% {
        background-color: rgba(255, 255, 255, 1);

    }

}

.hero {
    background: linear-gradient(180deg, #E3F8FF 18.55%, #C4E1FC 100%);

    display: flex;

    .col-1 {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 40px;
        gap: 40px;

        .stats {
            display: flex;
            gap: 40px;
        }
    }

    .stat-item {
        .number {
            font-size: 44px;
            font-weight: 800;
            color: var(--brand);
            padding-bottom: 12px;

            span {
                color: var(--gray);
            }
        }

        p:nth-child(2) {
            font-size: 18px;
            font-weight: 800;
            line-height: 100%;
        }
    }

    .col-2 {
        flex: 1;

        display: flex;
        flex-direction: column;

        img {
            width: 100%;
            transform: translateY(2px);
            z-index: 0;

        }

        div {
            z-index: 1;
            background-color: var(--brand);
            padding: 40px;
            display: flex;
            gap: 40px;

            p:nth-child(1) {
                font-size: 24px;

                span {
                    font-size: 36px;
                    font-weight: 800;
                    padding-right: 10px;
                }
            }

            p {
                color: white;
            }
        }
    }
}


.logos-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 20px;
}



.services {
    background-color: #F6F6F6;
}

.row-1 {
    display: flex;
    align-items: end;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
    justify-content: space-between;

    p {
        max-width: 500px;
    }
}


.row-2 {
    display: flex;
    flex-direction: row;
    gap: 40px;

    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 40px;

    flex: 1;
}

.icon {
    width: 94px;
}


.about {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
    position: relative;

    .col-2 {
        display: flex;
        gap: 40px;
        width: 80%;
        position: absolute;
        right: 0;
    }
}

.highlight-employee {
    background-color: #2D2D2D;
    padding: 40px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;

    .employee-pic {
        border-radius: 999px;
        width: 80px;
    }
}

.content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.story {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 0px;
    gap: 40px;
}



.portfolios {
    display: flex;
    gap: 40px;
    margin: 0 auto;
    max-width: 1200px;
}

.portfolio-item {
    position: relative;
    overflow: hidden;
}


.port-details {
    position: absolute;
    background-color: white;
    padding: 12px;
    transition: all 300ms ease;
    width: 100%;
}

.portfolio-item:hover {
    .port-details {
        transform: translateY(-80px);
    }
}

.news {
    margin: 0 auto;
    max-width: 1200px;
    padding: 80px;
}

.news-container {
    display: flex;
    gap: 20px;
}

.news-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;

    img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    div {
        display: flex;
        gap: 18px;

        h4 {
            font-size: 18px;
            font-weight: 600;
        }

        p {
            line-height: 100%;
        }

        span {
            font-size: 28px;
            font-weight: 800;
        }
    }
}


.testimonial {
    background-color: black;
    display: flex;
    gap: 40px;
    padding: 40px;
    max-width: 950px;
    margin: 0 auto;

    .col-1 {
        background-color: white;

        &>img {
            width: 100%;
        }

        .testi-card {
            padding: 40px;
            position: relative;
            display: flex;
            align-items: center;
            flex-direction: column;
            text-align: center;

            h4 {
                font-size: 22px;
                font-weight: 500;
                margin-bottom: 12px;
            }

            .icon-quote {
                background-color: white;
                border-radius: 100%;
                width: 62px;
                height: 62px;

                display: grid;
                place-items: center;

                position: absolute;
                top: -31px;


                box-shadow: 0px 10px 15px rgba(35, 135, 192, 0.15);


            }
        }
    }

    .col-2 {
        color: white;
        display: flex;
        flex-direction: column;
        gap: 40px;
        justify-content: center;
        align-items: flex-end;

        p {
            color: white;
        }
    }
}

.button-container {
    display: flex;

    .arrow {
        width: 57px;
        height: 57px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
    }

    .arrow:nth-of-type(2) {
        background-color: var(--brand);
    }
}



footer {

    background: linear-gradient(219.84deg, #474747 4.14%, #222222 44.22%);

    display: flex;

    padding-top: 380px;

    transform: translateY(-200px);

    z-index: 0;


}


@media screen and (max-width: 600px) {
    nav {
        ul {
            display: none;
        }

        .hamburger {
            display: flex;
        }
    }
}