/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   CORES
========================================================= */

:root {
    --color-Light: #FFFFFF;
    --color-Black: #000000;
    --color-Orange: #ff6600;
    --color-Gray: #808080;
    --color-Background: rgb(208, 208, 198);
    --color-DarkGray: #4d4c4c;
}


/* =========================================================
   BODY
========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--color-Background);
    font-family: "Quicksand", sans-serif;
    overflow-x: hidden;
}


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

.header-page {
    background: var(--color-Background);

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 6px clamp(15px, 4vw, 40px);

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 85px;

    z-index: 1000;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
    width: clamp(105px, 13vw, 160px);
    height: auto;
}


/* =========================================================
   BOTÃO MENU
========================================================= */

.menu-btn {
    width: 45px;
    height: 45px;

    background: none;
    border: none;

    color: var(--color-Gray);

    cursor: pointer;

    font-size: 25px;

    display: flex;
    justify-content: center;
    align-items: center;
}


/* =========================================================
   MENU
========================================================= */

.header-menu {
    display: none;

    position: fixed;

    top: 75px;
    right: clamp(10px, 3vw, 30px);

    background: #333;

    list-style: none;

    width: min(220px, calc(100vw - 20px));

    border-radius: 5px;

    z-index: 999;

    overflow: hidden;
}


/* MENU ATIVO */

.header-menu.ativo {
    display: block;
}


/* ITENS DO MENU */

.header-menu li {
    border-bottom: 1px solid #555;
}

.header-menu li:last-child {
    border-bottom: none;
}


/* LINKS */

.header-menu a {
    display: block;

    padding: 15px;

    text-decoration: none;

    color: var(--color-Light);

    transition: .3s;
}


/* HOVER */

.header-menu a:hover {
    color: var(--color-Orange);

    background: var(--color-Black);

    border-radius: 5px;
}


/* =========================================================
   PÁGINA TEK BOND
========================================================= */

.tekbond {
    width: min(90%, 1400px);

    margin:
        clamp(100px, 10vw, 140px)
        auto
        clamp(50px, 8vw, 80px);
}


/* =========================================================
   CABEÇALHO DO PROJETO
========================================================= */

.cabecalho-projeto {
    width: 100%;
    max-width: 750px;

    margin-bottom: clamp(40px, 6vw, 60px);
}


/* TÍTULO */

.cabecalho-projeto h1 {
    font-size: clamp(36px, 6vw, 64px);

    color: var(--color-Orange);

    margin-bottom: 20px;

    line-height: 1.1;
}


/* TEXTO */

.cabecalho-projeto p {
    color: var(--color-DarkGray);

    font-size: clamp(16px, 2vw, 22px);

    line-height: 1.8;

    text-align: justify;
}


/* =========================================================
   GALERIA
========================================================= */

.galeria {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(min(100%, 280px), 1fr));

    gap: clamp(15px, 2vw, 25px);
}


/* =========================================================
   IMAGENS
========================================================= */

.galeria img {
    width: 100%;

    height: clamp(200px, 20vw, 250px);

    object-fit: cover;

    border-radius: 12px;

    transition: .3s;

    cursor: default;
}


/* EFEITO AO PASSAR O MOUSE */

.galeria img:hover {
    transform: scale(1.03);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.lightbox {
    display: none;

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, .92);

    z-index: 9999;

    justify-content: center;
    align-items: center;

    padding: clamp(15px, 4vw, 40px);
}


/* LIGHTBOX ATIVO */

.lightbox.ativo {
    display: flex;
}


/* =========================================================
   IMAGEM AMPLIADA
========================================================= */

.lightbox img {
    display: block;

    max-width: 100%;
    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 12px;
}


/* =========================================================
   BOTÃO X
========================================================= */

.fechar {
    position: absolute;

    top: clamp(10px, 2vw, 20px);
    right: clamp(10px, 3vw, 30px);

    width: 50px;
    height: 50px;

    background: none;
    border: none;

    color: var(--color-Light);

    font-size: clamp(35px, 5vw, 45px);

    cursor: pointer;

    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .3s;
}


/* HOVER DO X */

.fechar:hover {
    color: var(--color-Orange);

    transform: scale(1.1);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .header-page {
        height: 80px;
    }

    .header-menu {
        top: 75px;
    }

    .tekbond {
        width: 92%;

        margin-top: 110px;
    }

    .cabecalho-projeto {
        max-width: 100%;
    }

    .cabecalho-projeto h1 {
        font-size: clamp(38px, 7vw, 52px);
    }

    .cabecalho-projeto p {
        font-size: 18px;
    }

    .galeria {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 15px;
    }

    .galeria img {
        height: 220px;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 768px) {

    .header-page {
        height: 75px;

        padding: 5px 15px;
    }

    .logo {
        width: 125px;
    }

    .menu-btn {
        width: 42px;
        height: 42px;

        font-size: 23px;
    }

    .header-menu {
        top: 70px;

        right: 10px;

        width: min(220px, calc(100vw - 20px));
    }


    /* PÁGINA */

    .tekbond {
        width: 92%;

        margin:
            105px auto
            50px;
    }


    /* CABEÇALHO */

    .cabecalho-projeto {
        margin-bottom: 40px;
    }

    .cabecalho-projeto h1 {
        font-size: clamp(34px, 9vw, 44px);

        margin-bottom: 15px;
    }

    .cabecalho-projeto p {
        font-size: 17px;

        line-height: 1.7;

        text-align: justify;
    }


    /* GALERIA */

    .galeria {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .galeria img {
        height: 180px;

        border-radius: 10px;
    }


    /* LIGHTBOX */

    .lightbox {
        padding: 15px;
    }

    .lightbox img {
        max-width: 100%;

        max-height: 85vh;

        border-radius: 8px;
    }


    /* X */

    .fechar {
        top: 8px;

        right: 10px;

        width: 45px;
        height: 45px;

        font-size: 36px;
    }

}


/* =========================================================
   CELULAR PEQUENO
========================================================= */

@media (max-width: 480px) {

    .header-page {
        height: 70px;
    }

    .logo {
        width: 105px;
    }

    .menu-btn {
        width: 40px;
        height: 40px;

        font-size: 21px;
    }

    .header-menu {
        top: 65px;

        right: 8px;

        width: calc(100vw - 16px);
    }


    /* PÁGINA */

    .tekbond {
        width: 94%;

        margin:
            100px auto
            40px;
    }


    /* TÍTULO */

    .cabecalho-projeto h1 {
        font-size: 34px;

        line-height: 1.15;
    }


    /* TEXTO */

    .cabecalho-projeto p {
        font-size: 15px;

        line-height: 1.65;
    }


    /* GALERIA */

    .galeria {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .galeria img {
        width: 100%;

        height: auto;

        aspect-ratio: 16 / 10;

        border-radius: 10px;
    }


    /* LIGHTBOX */

    .lightbox {
        padding: 10px;
    }

    .lightbox img {
        max-width: 100%;

        max-height: 82vh;
    }


    /* X */

    .fechar {
        top: 5px;

        right: 7px;

        width: 42px;
        height: 42px;

        font-size: 34px;
    }

}


/* =========================================================
   CELULAR MUITO PEQUENO
========================================================= */

@media (max-width: 360px) {

    .logo {
        width: 95px;
    }

    .tekbond {
        width: 94%;
    }

    .cabecalho-projeto h1 {
        font-size: 30px;
    }

    .cabecalho-projeto p {
        font-size: 14px;
    }

    .galeria img {
        aspect-ratio: 4 / 3;
    }

}