@import url(satoshi.css);

:root {
    --blue: #4F4FFC;
    --green: #D0FF46;
    --purple: #C46AF7;
    --black: #101049;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,
body {
    margin: 0px;
}

body:not(.page) {
    header {
        position: absolute;
        top: 73px;
        left: 56px;
    }
}

body.page {
    header {
        position: relative;
        margin-top: 63px;
        margin-left: 73px;
    }
}

.block-container {
    max-width: 1400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

h1,
h2,
h3,
p,
.block-title,
a,
li {
    font-family: 'Satoshi-Variable';
}

h1 {
    font-size: 48px;
    font-weight: 900;
}

h2 {
    font-size: 48px;
    font-weight: 900;
}

h3 {
    font-size: 36px;
    font-weight: 900;
}

p,
li {
    font-size: 20px;
    font-weight: 500;
}

.block-title {
    font-size: 64px;
    font-weight: 900;
}

.top-banner,
.text-block,
footer,
.team-block {
    padding-left: 56px;
    padding-right: 56px;
}

.top-banner {
    background-color: var(--blue);
    height: 100vh;
    display: flex;
    align-items: flex-end;
    background-image: url('../../images/yellow-shape.svg');
    background-repeat: no-repeat;
    background-position: top right;

    h1 {
        padding-bottom: 66px;
        max-width: 950px;
        margin: 0px;
    }
}

.text-block {
    background-color: var(--black);
    padding-top: 90px;
    padding-bottom: 70px;

    p {
        color: white;
    }

    .block-container>* {
        max-width: 660px;

        &:first-child {
            margin-top: 0px;
        }

        &:last-child {
            margin-bottom: 0px;
        }
    }

    h2 {
        color: var(--blue);
        margin: 0;
        margin-top: 60px;
    }


}

.team-block {
    padding-top: 60px;
    padding-bottom: 100px;

    .column.col-2 {
        display: flex;
        gap: 77px;

        .col {
            width: 50%;
        }
    }

    .block-title {
        color: var(--black);
    }

    .image {
        aspect-ratio: 1 / 1;
        background-size: cover;
        background-position: top center;

        img {
            width: 100%;
        }

        &.image-mobile {
            display: none;
        }
    }

    .name {
        margin-top: 42px;
        margin-bottom: 30px;
        font-weight: 900;
    }

    .name,
    p {
        color: var(--black);
    }

    .block-contents {
        padding-left: 50px;
        padding-right: 50px;
        margin-top: 70px;
    }

    .description {
        margin-bottom: 40px;
    }
}

footer {
    background-color: var(--purple);
    padding-top: 50px;
    padding-bottom: 80px;
    background-image: url('../../images/purple-shape.svg');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    position: relative;

    .block-container {
        >*:first-child {
            margin-top: 0px;
        }

        >*:last-child {
            margin-bottom: 0px;
        }
    }

    h2 {
        max-width: 850px;
        color: var(--black);
        margin-bottom: 140px;
    }

    h3 {
        color: var(--black);
    }

    .social-media {
        list-style: none;
        padding: 0;

        li a {
            display: inline-flex;
            gap: 25px;
            align-items: center;
            margin-bottom: 10px;
            text-decoration: none;
            color: var(--black);
            font-weight: 600;
        }

        img {
            max-width: 30px;
        }

        span {
            position: relative;

            &:before {
                content: '';
                position: absolute;
                width: 100%;
                height: 2px;
                border-radius: 4px;
                background-color: var(--black);
                bottom: -3px;
                left: 0;
                transform-origin: right;
                transform: scaleX(0);
                transition: transform .3s ease-in-out;
            }
        }

        a:hover {
            span:before {
                transform-origin: left;
                transform: scaleX(1);
            }
        }
    }

    .txt-policy {
        font-size: 24px;
        color: var(--green);
        border-bottom: 2px solid var(--green);
        position: absolute;
        right: 30px;
        bottom: 40px;
        text-decoration: none;
        font-weight: 500;

        &:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            border-radius: 4px;
            background-color: var(--black);
            bottom: -2px;
            left: 0;
            transform-origin: right;
            transform: scaleX(0);
            transition: transform .3s ease-in-out;
        }

        &:hover {
            &:before {
                transform-origin: left;
                transform: scaleX(1);
            }
        }
    }
}

.company-info {
    padding: 39px 58px 40px 58px;

    .email {
        font-weight: 900;
    }

    a {
        color: #000000;
    }

    p {
        font-size: 14px;
    }
}

body.page {
    background-image: url('../../images/yellow-shape.svg');
    background-repeat: no-repeat;
    background-position: top right;

    .block-title {
        margin-bottom: 50px;
        margin-top: 88px;
        font-size: 40px;
        color: var(--black);
    }

    .page-block .block-container {
        max-width: 1200px;
        padding-bottom: 100px;
        padding-left: 58px;
        padding-right: 58px;
        box-sizing: border-box;

        p,
        li {
            font-size: 20px;
        }

        * {
            color: var(--black);
        }
    }
}

@media (max-width: 1080px) {
    body:not(.page) header {
        top: 50px;
        left: 46px;
    }

    body.page header {
        margin-top: 50px;
        margin-left: 46px;
    }

    body.page .page-block .block-container {
        padding-left: 53px;
        padding-right: 53px;
    }

    .top-banner {
        height: 70vh;
        aspect-ratio: inherit;

        h1 {
            max-width: 760px;
        }
    }

    .top-banner,
    .text-block,
    footer,
    .team-block,
    .company-info {
        padding-left: 53px;
        padding-right: 53px;
    }

    .team-block {
        .image {
            aspect-ratio: 863 / 602;
            display: none;

            &.image-mobile {
                display: block;
            }
        }

        .team-item {
            margin-bottom: 80px;
        }

        .name {
            margin-top: 70px;
        }

        .column.col-2 {
            flex-direction: column;
            gap: 0px;

            .col {
                width: 100%;
            }
        }

        h3.name {
            font-size: 48px;
        }
    }

    p {
        font-size: 32px;
    }

    .text-block {
        .block-container>* {
            max-width: 100%;
        }
        
        br{
            display:none;
        }
    }

    .top-banner h1 {
        font-size: 36px;
    }

    footer {
        padding-bottom: 10px;
    }

    footer h2 {
        font-size: 58px;
    }

    footer h3 {
        font-size: 40px;
    }

    footer .social-media li {
        font-size: 24px;
    }

    footer .block-container {
        max-width: 700px;
        margin-left: inherit;
    }
}

@media (max-width: 768px) {

    .top-banner,
    .text-block,
    footer,
    .team-block,
    .company-info {
        padding-left: 30px;
        padding-right: 30px;
    }

    .team-block {
        .block-contents {
            padding-left: 10px;
            padding-right: 10px;
        }
    }

    footer {
        background-size: inherit;
        background-position: top;

        .txt-policy {
            display: inline-flex;
            position: relative;
            bottom: 0;
            right: 0;
            margin-top: 50px;
        }
    }

}

@media (max-width: 600px) {
    .top-banner {
        height: 70vh;
        background-position: top;
    }

    body.page .page-block .block-container {
        padding-left: 30px;
        padding-right: 30px;
    }

    body:not(.page) header {
        top: 30px;
        left: 30px;
    }

    body.page header {
        margin-top: 30px;
        margin-left: 30px;
    }

    header img {
        max-width: 100px;
    }

    .top-banner h1,
    footer h2,
    body.page .block-title {
        font-size: 30px;
    }

    .top-banner h1 {
        padding-bottom: 30px;
    }

    p,
    li,
    footer .social-media li,
    footer .txt-policy {
        font-size: 20px;
    }

    footer .social-media li a {
        gap: 20px;
    }

    h2,
    footer h3 {
        font-size: 28px;
    }

    .block-title,
    .team-block h3.name {
        font-size: 34px;
    }

    footer {
        padding-bottom: 30px;
    }

    footer h2 {
        margin-bottom: 100px;
    }

    .team-block .name {
        margin-top: 40px;
    }

    .team-block .team-item {
        margin-bottom: 60px;
    }

    body.page {
        background-image: none;
    }
}

@media (max-width: 450px) {

    .top-banner h1,
    footer h2,
    body.page .block-title {
        font-size: 26px;
    }

    h2,
    footer h3 {
        font-size: 26px;
    }

    p,
    li,
    footer .social-media li,
    footer .txt-policy,
    body.page .page-block .block-container p,
    body.page .page-block .block-container li {
        font-size: 18px;
    }



    .block-title,
    .team-block h3.name {
        font-size: 30px;
    }

    .team-block .block-contents {
        margin-top: 50px;
    }

    footer .social-media li {
        font-size: 16px;
    }

    .company-info p {
        font-size: 13px;
    }
}