@import url('gilroy.css');

body{
    font-family: 'Gilroy', sans-serif;
    margin: 0;
    background-color: #fff;
    .container{
        padding-top: 2em;
        height: 96vh;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        header{
            padding: 0 2em 0 2em;
            display: flex;
            flex-flow: column;
            gap: 1px;
            font-weight: 800;
            .logo{
                width: 100%;
                max-width: 445px;
            }
            h1{
                font-size: clamp(1rem, 8vw, 90px);
                margin: .2em 0;                
            }
            .description{
                font-size: 28px;
            }
        }

        main{
            .marquee-container {
                width: 100%;
                overflow: hidden;
                margin: 2rem 0;

                .marquee {
                    white-space: nowrap;
                    overflow: hidden;
                    margin: 1rem 0;
                    font-weight: bold;
                    font-size: 2rem;
                    color: #878787;
                    
                    span {
                        display: inline-block;
                        animation: scroll-left 30s linear infinite;
                    }
                }

                .marquee-right {
                    span {
                        animation: scroll-right 35s linear infinite;
                    }
                } 
            }
        }
        
        footer{
            /* padding-top: 2em; */
            .bar{
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #000;
                height: 48px;
                padding: 24px 2em;
                .logo{
                    width: 100%;
                    max-width: 134px;
                }
                
                .social-media{
                    display: flex;
                    gap: 1em;
                    a{
                        color: #fff;
                        text-decoration: none;
                        font-size: 24px;
                        transition: color 0.3s ease-in-out;
                        &:hover{
                            color: #f0f0f0;
                        }
                    }
                }
            }
            .bussiness-informations{
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;
                padding: 2em 0 2em 0;
            }
        }
    }
}

@keyframes scroll-left {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}