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

:root{

    --color-Light:#FFFFFF;
    --color-Black:#000000;
    --color-Orange:#ff6600;
    --color-Gray:#808080;

}

body{

    background:rgb(208, 208, 198);
    font-family:"Quicksand",sans-serif;

}

.header-page{

    background: rgb(208, 208, 198);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:6px 20px;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:85px;

    z-index:1000;

}


.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;
}

.header-menu{

    display: none;

    position: fixed;

    top: 65px;   /* Ajuste conforme a altura do cabeçalho */

    right: 10px;

    background: #333;

    list-style: none; 

    width: 220px;

    border-radius: 5px;

    z-index: 999;
}

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

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

.header-menu a{

    display:block;

    padding:15px;

    text-decoration:none;

    color:var(--color-Light);


    
}



.header-menu a:hover{
    color: var(--color-Orange);
    background:var(--color-Black);
    border-radius: 5px;
}

/* Classe adicionada pelo JavaScript */
.header-menu.ativo{
    display: block;
}

.logo{

    width:160px;   /* ajuste conforme necessário */

    height:auto;

}



.tekbond{

    width:90%;
    max-width:1400px;
    margin:120px auto 80px;

}

.cabecalho-projeto{

    max-width:750px;
    margin-bottom:60px;

}

.cabecalho-projeto h1{

    font-size:64px;
    color:var(--color-Orange);
    margin-bottom:20px;

}

.cabecalho-projeto p{

    color:#4d4c4c;
    font-size:22px;
    line-height:1.8;
    text-align:justify;

}

.galeria{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
    cursor: none;

}

.galeria img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 12px;
    transition: .3s;
    cursor: default; /* Cursor normal */
}

.galeria img:hover{

    transform:scale(1.03);

}

@media(max-width:768px){

    .cabecalho-projeto h1{

        font-size:42px;

    }

    .cabecalho-projeto p{

        font-size:18px;

    }

    .galeria{

        grid-template-columns:repeat(2,1fr);

    }

    .galeria img{

        height:180px;

    }

}

@media(max-width:480px){

    .galeria{

        grid-template-columns:1fr;

    }

    .galeria img{

        height:220px;

    }

}