*, ::after, ::before {
    box-sizing: border-box
}

* {
    margin: 0
}

@media (prefers-reduced-motion:no-preference) {
    html {
        interpolate-size: allow-keywords
    }
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased
}

canvas, img, picture, svg, video {
    display: block;
    max-width: 100%
}

button, input, select, textarea {
    font: inherit
}

h1, h2, h3, h4, h5, h6, p {
    overflow-wrap: break-word
}

p {
    text-wrap: pretty
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance
}

svg{
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
}

:root{
    --background: #EEEEEE;
    --foreground: #D4CBCA;
    --color-primary: #131313;
    --color-secondary: #66605d;
    --color-accent: #B5803E;
    
    --gap: 2.5rem;
    --padding: 2.5rem 3rem;
    --radius:2.5rem;
    
    font-size: 62.5%;
    font-family: 'Elms Sans', sans-serif;
    font-weight: 500;
    font-display: block;
    
}

body{
    color: var(--color-primary);
    background: var(--background);
    font-size: 1.6rem;
}

.wrap{
    max-width: 1600px;
    padding: 0 var(--gap);
    margin: 0 auto;
}

.btn{
    border:1px solid var(--color-primary);
    padding: var(--padding);
    text-decoration: none;
    color: var(--color-primary);
    font-size: 1.6rem;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    align-items: center;
    width: max-content;
    text-transform: uppercase;
    transition: all .2s ease-in-out;
    
    & svg{
        transition: all .2s ease-in-out;
    }
    
    &:hover{
        background: var(--color-primary);
        color: var(--background);
        
        & svg{
            transform: translateX(1rem)
        }
    }
}

header{
    
    margin-top: calc(var(--gap) * 2);
    margin-bottom: calc(var(--gap) * 2);
    display: flex;
    justify-content: center;
    align-items: center;
    
    & .logo{
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
        align-items: center;
        
        & svg{
            width: 4rem;
            height: 4rem;
        }
        
        & span{
            font-size: 2rem;
            font-weight: 300;
            text-transform: uppercase;
            line-height: 1;
        }
        
        & b{
            font-weight: 900;
            display: block;
        }
    }
    
    
}

.accent{
    color: var(--color-accent);
}

#intro{
    display: flex;
    flex-flow: row wrap;
    gap: var(--gap);
    align-items: stretch;
    
    & > *{
        border-radius: var(--radius);
        padding: var(--padding);
        display: flex;
        flex-direction: column;
    }
    
    & .imageside{
        flex: 1 1 calc(50% - var(--gap) / 2);
        min-width: 500px;
        aspect-ratio: 1/1;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../assets/server.webp');
        background-color: var(--foreground);
    }
    
    & .textside{
        flex: 1 1 calc(50% - var(--gap) / 2);
        min-width: 500px;
        justify-content: center;
        gap: var(--gap);
        padding-top:10rem;
        padding-bottom:10rem;
        
        & h1{
            font-size: 7rem;
            font-weight: 300;
            line-height: 1;
        }
        
        & h2{
            font-size: 2.4rem;
            font-weight: 300;
            line-height: 1.2;
        }
        
        & .btn{
            margin-top: 5rem;
        }
    }
    
}

#services{
    margin-top: calc(var(--gap) * 2);
    margin-bottom: calc(var(--gap) * 2);
    display: flex;
    flex-direction: column;
    
    & h2{
        font-size: 6rem;
        font-weight: 300;
    }
    
    & .services{
        display: flex;
        flex-flow: row wrap;
        gap: var(--gap);
        align-items: stretch;
        margin-top: var(--gap);
        
        & .service{
            flex:1 1 350px;
            padding: var(--padding);
            border:1px solid var(--color-secondary);
            border-radius: var(--radius);
            display: flex;
            flex-direction: column;
            
            & svg{
                width: 8rem;
                height: 8rem;
                fill: var(--color-secondary);
                margin-bottom: .5rem;
                margin-bottom: var(--gap);
            }
            
            & h3{
                font-size: 2.4rem;
                font-weight: 500;
                line-height: 1.2;
                margin-bottom: .5rem;
            }
            
            & p{
                font-size: 1.6rem;
                font-weight: 400;
                line-height: 1.2;
                color: var(--color-secondary);
            }
            
            &:hover{
                background-color: var(--foreground);
                
            }
        }
    }
}

#partners{
    width: 100%;
    display: flex;
    flex-direction: column;
    
    & h2{
        font-size: 6rem;
        font-weight: 300;
    }
    
    & h3{
        font-size: 2.4rem;
        font-weight: 400;
    }
    
    & .partners{
        margin-top: calc(var(--gap) * 2);
        overflow: hidden;
        position: relative;
        
        &::before,
        &::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 10rem;
            z-index: 2;
            pointer-events: none;
        }
        
        &::before {
            left: 0;
            background: linear-gradient(to right, var(--background), transparent);
        }
        
        &::after {
            right: 0;
            background: linear-gradient(to left, var(--background), transparent);
        }
    }
    
    & .partners-track{
        display: flex;
        gap: 6rem;
        animation: scroll 30s linear infinite;
        width: max-content;
        
        &:hover {
            animation-play-state: paused;
        }
    }
    
    & .partners-slide{
        display: flex;
        gap: 6rem;
        align-items: center;
        
        & img{
            height: 4rem;
            width: auto;
            object-fit: contain;
            filter: grayscale(100%) opacity(0.6);
            transition: all 0.3s ease;
            
            &:hover{
                filter: grayscale(0%) opacity(1);
            }
        }
    }
}

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

#map{
    margin-top: calc(var(--gap) * 2);
    margin-bottom: calc(var(--gap) * 2);
    width: 100%;
    border:1px solid var(--color-secondary);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    
    background-image: url('../assets/mapbg.webp');
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    
    display: flex;
    flex-flow: row wrap;
    align-items: start;
    justify-content: space-between;
    padding: 3rem;
    
    & .infos{
        padding: var(--padding);
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        
        backdrop-filter: blur(5px);
        border-radius: var(--radius);
        border:1px solid var(--color-secondary);
        min-height: 100%;
        
        flex: 0 1 auto;
    }
    
    & .based{
        font-size: 2.4rem;
        margin-right: 5rem;
        margin-bottom: 7rem;     
        
        flex: 1 1 auto;
    }
}


footer p{
    text-align: center;
    margin-top: 5rem;
    margin-bottom: 5rem;
}

@media (max-width: 1200px){
    #intro{
        
        & > *{
            flex:1 1 100%!important;
        }
        & .imageside{
            min-width: 100%;
        }
        & .textside{
            min-width: 100%;
        }
    }
}

@media (max-width: 760px){
    
    #intro .textside{
        padding:0;
        
        & h1{
            font-size: 5rem;
        }
        
        & h2{
            font-size: 2rem;
        }
        
        & .btn{
            margin-top: 2rem;
        }
    }
    
    #services {
        & h2 {
            font-size: 4rem;
        }
    }
    #partners {
        & h2 {
            font-size: 4rem;
        }
        & h3 {
            font-size: 1.8rem;
        }
    }
    
    #map .based{
        width: 100%;
    }
}