:root {
    /* Cores */
    --lightColor: #ffffff;
    --outlinerColor: rgb(65, 145, 232);
    --footerColor: #0f172a;
    --bg--aboutColor: #0D0D0D;
    /* Fontes */
    --fontPrimary: 'Playfair Display', serif;
    --fontSecondary: 'Montserrat', sans-serif;
    /* Font Sizes */
    --fs-hero-span: clamp(2rem, 4vw, 4rem);
    --fs-hero: clamp(4rem, 8vw, 8rem);
    --fs-hero-button: clamp(1.4rem, 1.4vw, 3rem); /* 1.4rem */
    --fs-header-logo: clamp(1.5rem, 5vw, 2.3rem);
    --fs-header-nav: clamp(1.1rem, 2.6vw, 1.5rem);
    --fs-hub-title: clamp(1.8rem, 5.5vw, 8rem);
    --fs-hub-subtitle: clamp(0.5rem, 3vw, 1.8rem);
    --fs-about: clamp(2.5rem, 5vw, 6rem);
    --fs-about-span: clamp(1.4rem, 4vw, 3rem);
    --fs-text: clamp(1.1rem, 2.6vw, 1.7rem);
    --fs-footer-title: clamp(1.8rem, 2.7vw, 2.5rem);
    
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}

body {
    color: #0D0D0D;
}
body.menu_open {
    overflow: hidden;
}

/*
====================================================
                    Header 
==================================================== */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    background-color: transparent;
    top: 0;
    transition: transform 1s ease;
    z-index: 2;
    
    & .logo {
        margin: 2rem;
        color: var(--lightColor);
        font-family: var(--fontPrimary);
        font-weight: lighter;
        font-size: var(--fs-header-logo); /* 1.5rem; */
    }

    & .nav_bar {
        display: none;
        position: absolute;
        width: 100%;
        top: 100%;
        height: 100%;
        border-radius: 4px;
        z-index: 10;
        opacity: 2;
        font-family: var(--fontSecondary);
        font-weight: lighter;
        
        & a {
            display: flex;
            align-items: center;
            justify-content: start;
            font-size: var(--fs-header-nav);
            padding: 2.8rem 1.5rem;
            color: white;
            z-index: 2;

            &:hover {
                color: rgb(65, 145, 232);
            }
        }
        & .line {
            width: 1px;
            height: 20px;
            background-color: red;
            z-index: 99;
        }
    }
    
    & .menu-toggle {
        border: none;
        background-color: transparent;
        font-size: 2rem;
        color: var(--lightColor);
        margin: 1rem;
        cursor: pointer;
    }
    
    & .active {
        display: block;
        font-size: 10rem;
        font-weight: 700;
        
    }
    
    & .close-toggle {
        display: none;
        font-family: var(--fontSecondary);
        font-size: 0.5rem;
        
    }

    &.inactive {
        display: none;
    }
}

header.hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

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

/* Tablet NAO PRECISA */

/* Desktop */
@media (min-width: 768px) and (max-width: 1280px) {
    header .nav_bar {
        display: flex;
        align-items: center;
        justify-content: end;
        height: auto;
        right: 0;
        top: 0;
        font-size: clamp(1.4rem, 0.5vw, 2rem);   
    }
    header .menu-toggle {display: none;}
}

/* Telas Grandes */
@media (min-width: 1280px) {
    header .nav_bar {
        display: flex;
        align-items: center;
        justify-content: end;
        height: auto;
        right: 0;
        top: 0;
        font-size: clamp(1.4rem, 0.5vw, 2rem);   
    }
    header .menu-toggle {display: none;}
}
/* ==========FIM HEADER RESPONSIVE====================== */



/*
====================================================
                    Aside 
==================================================== */
& .hero-social {
    display: none;
    position: fixed;
    left: 1.5rem;
    top: 70%;
    transform: translateY(-50%);
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;

    &.hide {
        opacity: 0;
        transform: scale(0.8) translateX(-30px);
        pointer-events: none;
    }
    
    div {
        display: flex;
        align-items: center;
        
        gap: 1rem;
        transform: rotate(-90deg);
        transform-origin: left center;
        top: 0;
        background-color: transparent;
    
        img {
            height: 25px;
            width: 25px;
        }

        .line {
            position: relative;
            left: 2px;
            width: 1px;
            height: 55px;
            background-color:var(--lightColor);
            flex-shrink: 0;
            align-self: center;
            gap: 1rem;
            margin: 0 clamp(8px, 2vw, 18px);
            }

        h4 {
            color: var(--lightColor);
            font-weight: lighter;
        }
    }   
}

/* ===== Aside Responsive ============================== */
@media (min-width: 768px) {
    .hero-social {
        display: block;
    } 
}
/* ===================================================== */
/* ====================================================
                    SESSAO CONTACT 
==================================================== */
.contact_container {
    background: linear-gradient(to bottom,#0d0d0d,#050505);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 2rem 1.8rem;
    min-height: 100vh;
    scroll-snap-align: start;

    .contact_left {
        height: 100%;
        display: flex;
        flex-direction: column;
        .contact_whatsapp {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 3rem;
            font-family: var(--fontPrimary);
            font-weight: 700;
            color: var(--lightColor);
            margin-bottom: 1rem;

            p {
                
                font-size: clamp(2rem, 4vw, 7rem);/* clamp(2rem, 4vw, 5rem) */;
            
            }

            img {
                width: 80px;
                height: 80px;
            }
        }
        .contact_form {
            width: 100%;
            max-height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            text-align: center;
            
            
            .form_name {
                width: 100%;
                height: 30px;
                border-radius: 3px;
                border: 1px solid rgba(128, 128, 128, 0.595);
                background-color: rgba(128, 128, 128, 0.271);
                color: var(--outlinerColor);
            }
            .form_email {
                width: 100%;
                height: 30px;
                border-radius: 3px;
                border: 1px solid rgba(128, 128, 128, 0.595);
                background-color: rgba(128, 128, 128, 0.271);
                color: var(--outlinerColor);
    
            }
            .form_mensagem {
                width: 100%;
                min-height: 100px;
                border-radius: 3px;
                border: 1px solid rgba(128, 128, 128, 0.595);
                background-color: rgba(128, 128, 128, 0.271);
                color: var(--outlinerColor);
    
            }
            .btn-whats {
                width: 50%;
                height: 30px;
                border-radius: 3px;
                border: 1px solid rgba(128, 128, 128, 0.595);
                background-color: rgba(128, 128, 128, 0.271);
                color: var(--outlinerColor);
                font-size: clamp(0.8rem , 0.8vw, 1.2rem);
            }
        }
    }

    
    .contact_right {
        
        .contact_header {
            color: var(--lightColor);
            font-family: var(--fontPrimary);
            font-weight: 700;
            margin: 3rem 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 1rem;
            
            h2 {
                font-size: clamp(1.85rem, 3.9vw, 5rem);
            }

            p {
                width: 60%;
                font-size: clamp(1.2rem, 2.5vw, 3rem);
                font-weight: 500;
                font-family: var(--fontSecondary);
            }
        }
        
        .contact_links {
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin: 1.5rem 0;
            
            img {
                width: 50px;
                height: 50px;
            }

            a {
                width: auto;
                display: inline-flex;
            }
        }
    }
}
        
/* ====================================================
                    RESPONSIVE CONTACT
==================================================== */
@media (min-width: 814px) {
    .contact_container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .contact_left {
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .contact_whatsapp {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                gap: 2rem;
                
                p {
                    display: inline-block;
                }
                
                img {
                    margin-left: 3rem;
                    width: 110px;
                    height: 110px;
                }
            }
            .contact_form {
                width: 80%;
                height: 100%;
                justify-content: center;
                gap: 1rem;


                .form_name {
                    height: 30px;
                    font-size: 1rem;
                }

                .form_email {
                    height: 30px;
                    font-size: 1rem;


                }

                .form_mensagem {
                    height: 200px;
                    font-size: 1rem;

                }
                .btn-whats {
                    min-width: 200px;
                    height:40px;
                    font-size: 1.2rem;
                    


                }
            }
        }
        .contact_right {
            display: flex;
            flex-direction: column;
            width: 50%;
            gap: 4rem;
            justify-content: end;
    
            .contact_header {
                
            }
            
        }
        .contact_links {
            
            a { 
                width: 60px;
                height: 60px;
                
            }
        }
    } 
}

/* ====================================================
                    FOOTER
==================================================== */
.footer_container {
    display: flex;
    flex-direction: column;
    font-family: var(--fontSecondary);
    background: var(--footerColor);   
    border-top: 1px solid rgba(255,255,255,0.08);
    scroll-snap-align: start;
    
    .footer_logo {
        font-size: var(--fs-footer-title);
        margin: 1rem 0 0 1rem;
        color: var(--lightColor);
        grid-area: footer_logo;
    }

    .footer_cta {
        font-size: 0.9rem;
        margin: 1rem 0 0 1rem;
        color: var(--lightColor);
        opacity: 0.7;
        grid-area: footer_cta;

    }

    .footer_social_media {
        display: flex;
        justify-content: space-between;
        margin: 1rem;
        width: 48%;
        grid-area: footer_social;
        & img {
            width: 35px;
            height: 35px;
            display: flex;
            color: var(--lightColor);
            transition: 0.3s ease;
        }
    }

    .footer_nav {
        display: flex;
        flex-direction: column;
        margin: 1rem 0 0 1rem;
        color: var(--lightColor);

        .nav_title {
            font-size: 0.9rem;
            font-weight: 600;
        }

        a {
            font-size: clamp(0.8rem, 1vw, 1.7rem);/* 0.8rem */
            line-height: 1.6;
            margin-top: 0.1rem;
            color: var(--lightColor);
            font-weight: lighter;
            opacity: 0.7;

        }
        &.col1 {
            grid-area: col1;
        }
        &.col2 {
            grid-area: col2;
        }
        &.col3 {
            grid-area: col3;
        }
    }
    .copyrights {
        margin: 1rem 0 0 1rem;
        color: var(--lightColor);
        text-align: start;
        font-size: 0.8rem;
        font-weight: 300;
        opacity: 0.7;
        grid-area: copyrights;
    }
}
/* 
====================================================
                RESPONSIVE FOOTER
==================================================== */
@media (min-width: 393px) {
    .footer_social_media {
        max-width: 200px;
    }
}

@media (min-width: 686px) and (max-width: 868px) {
    .footer_container {
        display: grid;
        grid-template-columns: 300px 1fr 1fr 1fr;
        grid-template-areas: "footer_logo col1 col2 col3"
                            "footer_cta col1 col2 col3"
                            "footer_social col1 col2 col3"
                            "copyrights col1 col2 col3";
    }   
}

@media (min-width: 868px) and (max-width: 1024px) {
    .footer_container {
        display: grid;
        grid-template-columns: 370px 1fr 1fr 1fr;
        grid-template-areas: "footer_logo col1 col2 col3"
                            "footer_cta col1 col2 col3"
                            "footer_social col1 col2 col3"
                            "copyrights col1 col2 col3";
    }
}

@media (min-width: 1024px) {
    .footer_container {
        padding: 1rem;
        display: grid;
        grid-template-columns: 600px 1fr 1fr 1fr;
        grid-template-areas: "footer_logo col1 col2 col3"
                            "footer_cta col1 col2 col3"
                            "footer_social col1 col2 col3"
                            "copyrights col1 col2 col3";
    }
}