/*=======================================
            Title & Text
========================================*/

.title-text {
    padding: 150px 0;
    color: var(--white);

    @media (max-width: 1600px) {
        padding: 70px 0 100px;
    }

    @media (max-width: 1200px) {
        padding: 70px 0;
    }

    @media (max-width: 800px) {
        padding: 50px 0;
    }

    .contents {

        .title {
            width: 520px;

            @media (max-width: 1600px) {
                width: 400px;
            }

            @media (max-width: 1200px) {
                width: 100%;
                margin-bottom: 30px;
            }

            h2 {
                font-size: 68px;
                line-height: 1.2;

                @media (max-width: 1600px) {
                    font-size: 54px;
                }

                @media (max-width: 1200px) {
                    font-size: 50px;
                }

                @media (max-width: 800px) {
                    font-size: 40px;
                }

                @media (max-width: 450px) {
                    font-size: 34px;
                }

            }

        }

        .text {
            width: calc(100% - 520px);
            padding-left: 90px;
            font-size: 38px;
            line-height: 1.3;
            margin-top: 5px;

            @media (max-width: 1600px) {
                font-size: 30px;
                width: calc(100% - 400px);
            }

            @media (max-width: 1200px) {
                width: 100%;
                padding-left: 0;
            }

            @media (max-width: 1200px) {
                font-size: 32px;
            }

            @media (max-width: 800px) {
                font-size: 28px;
            }

            @media (max-width: 450px) {
                font-size: 24px;
            }


        }

    }

}






/*=======================================
            Logo Carousel
========================================*/

.logo-carousel {
    padding-bottom: 30px;

    @media (max-width: 1000px) {
        padding-bottom: 50px;
    }

    @media (max-width: 800px) {
        padding: 50px 0;
    }

    .contents {
        justify-content: space-between;
        align-items: center;

        .title {
            font-size: 24px;
            line-height: 1;
            color: var(--white);
            width: 200px;

            @media (max-width: 1000px) {
                width: 100%;
                text-align: center;
                margin-bottom: 10px;
                font-size: 32px;
            }

        }

        .logos {
            width: calc(100% - 200px);

            @media (max-width: 1000px) {
                width: 100%;
            }

            .logo {
                aspect-ratio: 1/1;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;

                img {
                    max-width: 80%;
                    max-height: 80%;
                    width: auto;
                    height: auto;

                }

            }

        }

    }

}






/*=======================================
            Three Columns
========================================*/

.three-col {
    padding: 70px 0 150px;

     @media (max-width: 1200px) {
        padding: 70px 0;
     }

    .contents {
        justify-content: space-between;
        align-items: flex-start;

        .column {
            width: calc(100% / 3 - 30px);
            color: var(--white);

            @media (max-width: 1200px) {
                width: calc(100% / 2 - 30px);

                &:last-of-type {
                    width: 100%;
                    margin-top: 70px;
                }

            }

            @media (max-width: 1000px) {
                width: 100%;
                margin-bottom: 70px;

                &:last-of-type {
                    margin: 0;
                }

            }

            .above {
                font-size: 20px;
                line-height: 1;
                margin-bottom: 40px;

                @media (max-width: 1000px) {
                    margin-bottom: 20px;
                }

            }

            h3 {
                font-size: 40px;
                line-height: 1.2;
                margin-bottom: 30px;

                @media (max-width: 600px) {
                    font-size: 32px;
                }

            }

            .text-container {
                font-size: 20px;
                line-height: 1.3;
            }

            .button {
                margin-top: 40px;

                @media (max-width: 1000px) {
                    margin-top: 20px;
                }

            }

        }

    }

}