*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    box-sizing: border-box;
}
body{
    align-items: center;
    background-color: #0D0D0D;
}
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 60px;
    padding: 10px 30px;
    background-color: rgb(26, 26, 36);
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 5px;
    z-index: 99;
    transition: all 0.3s ease-in-out;
}

header .btn a{
    color: white;
    font-family: "montserrat", sans-serif;
    font-weight: 500;
    font-size: 15px;
    padding: 10px 20px;
    transition: all 0.3s ease-in-out;
}
header .btn a:hover{
                   background-color:#D4AF37;
                   border-radius: 10px;
                   scale: 1.1;
}
header .Quote{
           background-color: #D4AF37;
           color: white;
           font-family: "montserrat", sans-serif;
           font-weight: 500;
           font-size: 15px;
           padding: 10px 20px;
           transition: all 0.3s ease-in-out;
}
header .Quote a{
    color: white;
}
header .Quote a:hover{
                
                   scale: 1.1;
}

/*==============================
PORTFOLIO GALLERY
==============================*/

.portfolio-gallery{
    width:100%;
    padding:80px 0;
}

.gallery{

    width:90%;
    max-width:1200px;
    margin:auto;

    display:grid;

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

    gap:30px;

}

.gallery .item{

    position:relative;

    overflow:hidden;

    aspect-ratio:1/1;

    display:block;

    background:#fff;

    text-decoration:none;

    transition:.4s ease;

}

.gallery img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s ease;

}
.gallery .autoshow{

        animation: text-appear both;
        animation-timeline: view();
        width:100%;
        height:100%;

}
.gallery .autoshow source{

        width:100%;
        height:100%;

}   

/* Hover */

.gallery .item:hover img{

    transform:scale(1.08);

}

.gallery .item::after{

    content:"";

    position:absolute;

    inset:0;

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

    opacity:0;

    transition:.35s;

}

.gallery .item:hover::after{

    opacity:1;

}

/* Text Card */

.text-card{

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    padding:35px;

}

.text-content{

    width:100%;

}

.text-content span{

    display:block;

    color:#999;

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.text-content h3{

    color:#1d1d1d;

    font-size:28px;

    line-height:1.25;

    font-weight:700;

    text-transform:uppercase;

}

/* Responsive */

@media(max-width:992px){

.gallery{

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

gap:20px;

}

}

@media(max-width:640px){

.gallery{

grid-template-columns:1fr;

gap:20px;

}

}