@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

:root {
    --laranja: #f34822;
    --cinza: #1E1E1E;
}

body {
    background-color: var(--cinza);
    margin: 0; 
    color: whitesmoke;
    font-family: Barlow, Helvetica, system-ui;
    font-size: 14pt;
    word-wrap: break-word;
}

nav,
header,
main,
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

nav div,
.hero-main,
.info-conteiner {
    width: clamp(100px, 90%, 900px);
}

nav {
    max-height: 95px;
    background-color: var(--cinza);
    
    & div img {
        padding: 16px 24px;
    }
}

.form-btn {
    box-sizing: border-box;
    display: inline-block;
    margin: 16px 0;
    padding: 16px 30px;
    height: fit-content;
    max-width: 240px;
    background-color: var(--cinza);
    color: var(--laranja);
    text-align: center;
    text-decoration: none;
    font-family: "Barlow Condensed";
    font-size: 24px;
    font-weight: 700;
    line-height: 90%;
    border-radius: 8px;
    cursor: pointer;
    
    &:hover {
        background-color: rgb(63, 46, 36);
    }
    
    &:active {
        background-color: rgb(34, 25, 20);
        color: rgb(150, 150, 150);
    }
}

.hide {
    display: none !important;
}


/* ========= HEADER ========= */


header {
    background-color: #E83B1F;
    background-image: url(./../assets/header_bg.svg);
    background-repeat: no-repeat;
    font-family: "Barlow Condensed";
    max-height: 460px;
    background-attachment: fixed;
    background-position: 0 70px;
}

.hero-main {
    box-sizing: border-box;
    padding: 56px 0;
    min-height: 460px;
}

.hero-content {
    padding: 0 24px;
    max-width: 740px;
    
    & h1 { 
        margin: 0;
        font-size: 56px;
        font-weight: 700;
        line-height: 90%;
    }
    
    & h2 {
        margin: 36px 0 38px 0;
        font-size: 32px;
        font-weight: 700;
        line-height: 100%;
    }
    
    & p { 
        font-weight: 600; 
        font-size: 28px;
        line-height: 120%;
    }
}


/* ========= MAIN ========= */


main {
    background-color: whitesmoke;
    color: black;
}

.info-conteiner {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 56px;
    margin: 56px 0;
    padding: 0 24px;
    max-width: 900px;    
    
    img {
        transform: scale(1);
        transition: all 0.5s ease-in-out; 
        
        &:hover {
            transform: scale(1.05);
            transition: all 0.5s ease-in-out;
        }
    }
    
}

.info-card {
    display: flex;
    align-items: start;
    gap: 24px;
    
    & > img {
        max-width: 250px;
        max-height: 250px;
        border-radius: 16px;
    }
    
    & h2 {
        margin: 0;
        font-family: "Barlow Condensed";
        font-weight: 700;
        font-size: 36px;
        line-height: 90%;
    }
    
    & p {
        font-weight: 500;
        font-size: 15px;
        line-height: 150%;
    }
}

.modal-anti-cookie {
    position: fixed;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: whitesmoke;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 24px;
    z-index: 10;
    column-gap: 30px;
    
    & .image {
        display: flex;
        flex-direction: column;
        & img {
            width: 50px;
            height: 50px;
            
            &.proibido {
                margin-top: -50px;
            }
        }
    }
}


/* ========= FOOTER ========= */


footer {
    background-color: var(--cinza);
    font-family: "Barlow Condensed";
    overflow: hidden;
    
    & div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        
        padding: 36px 24px;
    }
}

.faca-parte {
    width: 100%;
    background-color: var(--laranja);
    
    & h2 {
        margin: 0;
        font-weight: 700;
        font-size: 36px;
    }
    
    & a { margin: 0; }
}

.contato {
    & img { 
        width: 180px;
        height: 37px; 
    }
    
    & p {
        text-align: center;
        margin: 0;
        font: 12px 'Barlow';
        font-weight: 400;
        line-height: 100%;
    }
    
    .parcerias {
        font-size: 13px;
        line-height: 150%;
        
        & span { font-weight: bold ;}
    }
    
    .direitos a {
        color: whitesmoke;
        
        &:hover {
            color: var(--laranja);
            cursor: pointer;
        }
    }
}

.rainbow {
    background: linear-gradient(90deg, orange, yellow, green, blue, purple);
    background-clip: text;
    -webkit-background-clip: text;
    transition: 500ms ease;
    
    &:hover {
        color: transparent;
        transition: 500ms ease;
    }
}



/* ========= MEDIA QUERIES ========= */


@media (width <= 1000px) {
    header {
        background-size: cover;
        background-position: 75%;
        max-height: fit-content;
        & h2 { font-size: 1.2em;}
        & p { font-size: .9em;}
    }
    
    .info-conteiner { 
        gap: 48px;
        margin: 64px 24px;
        padding:0;
        
    }
}

@media (width <= 650px) {
    
    nav {
        height: 66px; 
        
        & div img {
            width: 166px;
        }
    }
    
    .hero-content {
        max-width: 100%;
    }
    
    .info-card {
        flex-direction: column;
        align-items: start;
        gap: 24px;
        
        &:nth-child(even) { 
            flex-direction: column-reverse; 
        }
    }
    
    .modal-anti-cookie {
        flex-direction: column;
        padding: 15px;
        
        & div {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }
    
    footer {
        text-align: center;
        & p { font-size: 10pt; }
        & h2 { padding: 0 20px; }
        & .form-btn { margin: 24px 18px;}
    }
}

@media (width <= 420px) {
    
    header {
        background-position: 75%;
    }
    
    .info-conteiner {
        max-width: 312px;
        
        & .info-card {
            align-items: center;
            
            & p {
                font-size: 16px;
            }
            
            & img {
                max-width: 312px;
                max-height: 312px;
            }
        }
    }
    
    
}