@font-face {
    font-family: 'Archivo Black';
    src: url(./fonts/Archivo_Black/ArchivoBlack-Regular.ttf);
}

@font-face {
    font-family: 'Noto Sans';
    src: url(./fonts/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf);
}

html, body {
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}

body {
    background-color: rgb(24, 24, 24) !important;
    display: flex;
    flex-direction: column;
}

/* Heading */
.header {
    height: 64px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgb(24, 24, 24);
    display: flex;
    flex-direction: row;
    border-bottom: 2px solid #cf0000;
}

.header .lockup img {
    width: 48px;
}

.lockup {
    display: flex;
    align-items: center;
    padding-left: 48px;
}

.lockup h4 {
    font: 400 32px 'Archivo Black';
    color: white;
    padding-left: 48px;
}

/* Hero */

.hero {
    background: url(./images/hero.png) no-repeat 0 0 / cover;
    height: 560px;
    padding-inline: 10%;
    align-items: end;
    display: flex;
}

.hero-text {
    padding-bottom: 48px;
}

.hero h2 {
    font: 400 72px 'Archivo Black';
    color: white;
    text-transform: uppercase;
    margin-bottom: 0;
    word-spacing: 20px;
}

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

.clean {
    position: absolute;
    background: #cf0000;
    width: 0px;
    left: calc(10% - 27px);
    height: 80px;
    transform: translateY(10px);
    z-index: 0;
    clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
    animation: clean-swipe .75s .5s ease;
    animation-fill-mode: forwards;
}

@keyframes clean-swipe {
    from {width: 0;}
    to {width: 334px;}
}

.hero h1 {
    font: 400 24px 'Noto Sans';
    color: white;
    margin: 24px 0;
}

.button {
    padding: 10px 32px;
    color: white;
    border-radius: 8px;
    font: 400 18px 'Noto Sans';
    background: #cf0000;
}

.button:hover {
    background: #b90000;
    text-decoration: none;
    color: white;
    cursor: pointer;
}

.button:focus,
.button:active {
    background: #aa0000;
    text-decoration: none;
    color: white;
    cursor: pointer;
}

/* Services section */
.services,
.transformation {
    padding-inline: 10%;
}

.transformation {
    margin-bottom: 80px;
}

.services h3,
.transformation h3 {
    font: 400 48px 'Noto Sans';
    color: white;
    margin-block: 64px 24px;
}

.blur {
    content: "";
    position: absolute;
    transform: translate(-80px, -80px);
    height: 18rem;
    width: 18rem;
    background: #cf0000b3;
    opacity: 0.6;
    filter: blur(80px);
    z-index: -1;
}

.cards {
    display: grid;
    grid: auto-flow / 1fr 1fr 1fr;
    gap: 24px;
}

.services .card img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.card {
    border-radius: 12px;
    border: 1px solid rgb(255 250 237);
    background: rgb(255 250 237);
}

.card-body {
    color: black;
    padding: 10px;
}

.card img {
    width: 100%;
    border-radius: 12px 12px 0 0;
}

.card h4 {
    font: 600 22px 'Noto Sans';
    margin-block: 0;
}

.card p {
    font: 400 16px 'Noto Sans';
}

/* Reviews */
.reviews {
    display: grid;
    grid: auto-flow / 2fr 3fr;
    margin: 120px 0 80px 0;
    padding-inline: 10%;
    gap: 24px;
    position: relative;
}

.reviews h3 {
    font: 400 48px 'Noto Sans';
    color: white;
    display: flex;
    align-items: center;
}

.reviews .blur {
    right: 10%;
    transform: translate(80px, -80px);
}

.reviews .quotation-mark {
    position: absolute;
    width: 100px;
    left: 10%;
}

.reviews .quotation-mark.end {
    left: 30%;
    bottom: 0;
    rotate: 180deg;
}

.carousel-inner {
    border-radius: 12px;
}

.carousel .item {
    background: white;
    height: 400px;
}

.carousel .item p {
    font: 400 18px 'Noto Sans';
    padding-inline: 15%;
    padding-top: 48px;
}

.carousel .item h4 {
    font: 600 24px 'Noto Sans';
    padding-inline: 15%;
}

.carousel .item img {
    max-width: 400px !important;
    justify-self: center;
    padding-bottom: 20px;
}

.carousel-indicators li {
    border-color: black !important;
}

.carousel-indicators .active {
    background-color: rgb(54, 54, 54) !important;
}

.connect {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 120px;
    padding-inline: 10%;
}

.connect h3 {
    font: 400 48px 'Noto Sans';
    color: white;
}

.connect h3 ~ p,
.transformation h3 ~ p {
    font: 400 20px 'Noto Sans';
    color: white;
    margin-bottom: 24px;
}

.connect form {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.connect input {
    border-radius: 8px;
    font: 400 16px 'Noto Sans';
    padding: 14px 12px;
    margin-bottom: 8px;
}

.connect textarea {
    border-radius: 8px;
    font: 400 16px 'Noto Sans';
    padding: 14px 12px;
}

.connect form .button {
    width: 200px;
    align-self: center;
    margin-top: 16px;
    border: none;
}

.connect.complete {
    display: none;
}

.connect.complete h3 {
    text-align: center;
}

.connect .blur {
    transform: translate(0px, 80px);
    filter: blur(120px);
    width: 30rem;
    height: 30rem;
}

@media screen and (max-width: 1025px) {
    .hero h2 {
        font-size: 48px;
    }

    .clean {
        width: 234px;
        height: 50px;
    }

    .reviews .quotation-mark {
        width: 70px;
    }

    .reviews .quotation-mark.start {
        transform: translate(-20px, -36px);
    }

    .reviews .quotation-mark.end {
        top: 100px;
        right: 8%;
        left: auto;
    }

    @keyframes clean-swipe {
        from {width: 0;}
        to {width: 234px;}
    }
    
    .lockup h4 {
        font-size: 24px;
    }

    .reviews {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 800px) {
    .cards {
        grid-template-columns: 1fr;
    }

    .carousel .item {
        height: 530px;
    }

    .connect form {
        width: 100%;
    }

    .services h3,
    .connect h3,
    .reviews h3,
    .transformation h3 {
        font-size: 32px;
    }

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

    .reviews .blur {
        transform: none;
    }

    .carousel .item img {
        width: 300px;
    }

    .reviews .quotation-mark {
        display: none;
    }

    .hero h2 {
        line-height: 50px;
    }

    .hero .clean {
        transform: unset;
    }

    .hero .text {
        display: block;
        margin-bottom: 20px;
    }

    .hero br {
        display: none;
    }
}