/* ==========================================================
   FILTRO DE CATEGORIAS CSS
========================================================== */

.sam-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 56px;
    margin: 0 auto 55px;
    padding: 0;
    flex-wrap: wrap;
    list-style: none;
}

.sam-filter li{
    list-style:none;
}

.sam-filter a{
    position:relative;
    display:inline-block;
    color:#8a8a8a;
    font-size:20px;
    font-weight:400;
    text-decoration:none;
    transition:.35s;
    padding-bottom:12px;
}

.sam-filter a:hover{
    color:#f6a313;
}

.sam-filter .active a{
    color:#f6a313;
}

.sam-filter .active a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:28px;
    height:2px;
    background:#f6a313;
}

.sam-filter a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:2px;
    background:#f6a313;
    transition:.35s;
}

.sam-filter a:hover::after{
    width:28px;
}


/* ==========================================================
   GRID CSS
========================================================== */

.sam-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
}

.sam-item{
    position:relative;
    overflow:hidden;
    aspect-ratio:3/2;
    background:#111;
}

.sam-item img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    transition:
        transform .65s ease,
        filter .65s ease;

}


/* ==========================================================
   OVERLAY CSS
========================================================== */

.sam-overlay{

    position:absolute;
    inset:0;

    display:flex;
    align-items:flex-end;

    background:linear-gradient(
        to top,
        rgba(16,16,16,.82) 0%,
        rgba(16,16,16,.48) 45%,
        rgba(16,16,16,.18) 75%,
        rgba(16,16,16,0) 100%
    );

    opacity:0;

    transition:.45s ease;

}

.sam-content{

    position:absolute;

    left:48px;
    right:48px;
    bottom:42px;

}


/* ==========================================================
   HOVER CSS
========================================================== */

.sam-item:hover .sam-overlay{
    opacity:1;
}

.sam-item:hover img{

    transform:scale(1.05);

    filter:brightness(.72);

}

/* ==========================================================
   CATEGORIA CSS
========================================================== */

.sam-category{

    font-family:var(--e-global-typography-primary-font-family);
    font-weight:400;

    color:#ffffff;

    font-size:14px;

    line-height:1;

    letter-spacing:0;

    text-transform:none;

    margin:0 0 12px;

    transform:translateY(16px);

    opacity:0;

    transition:.45s ease;

}


/* ==========================================================
   TITULO CSS
========================================================== */

.sam-title{

    font-family:var(--e-global-typography-primary-font-family);
    font-weight:var(--e-global-typography-primary-font-weight);

    color:#fff;

    font-size:18px;

    line-height:1.35;

    margin:0;

    max-width:340px;

    transform:translateY(18px);

    opacity:0;

    transition:.5s ease;

}





/* ==========================================================
   ANIMAÇÕES CSS
========================================================== */

.sam-item:hover .sam-category{

    opacity:1;

    transform:translateY(0);

}

.sam-item:hover .sam-title{

    opacity:1;

    transform:translateY(0);

    transition-delay:.08s;

}




/* ==========================================================
   RESPONSIVO CSS
========================================================== */

@media(max-width:991px){

.sam-grid{

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

}

}

@media(max-width:640px){

.sam-grid{

grid-template-columns:1fr;

}

.sam-title{

font-size:30px;

}

.sam-filter{

gap:28px;

}

.sam-filter a{

font-size:17px;

}

}

/* ==========================================================
   LOAD MORE CSS
========================================================== */

.sam-load-more-wrap{

    margin:70px 0;

    text-align:center;

}

.sam-load-more{

    padding:18px 44px;

    border:none;

    background:#f29900;

    color:#fff;

    cursor:pointer;

    transition:.35s;

    font-size:15px;

}

.sam-load-more:hover{

    background:#3f3f3f;

}


/* ==========================================================
   SERVIÇO LINK SINGLE CSS
========================================================== */

.sam-servico-link{

    font-family:"Josefin Sans",sans-serif;

    font-size:41px;

    font-weight:400;

    line-height:1.1;

    letter-spacing:0;

    color:#808080;

    text-decoration:none;

    transition:.3s;

}

.sam-servico-link:hover{

    color:var(--e-global-color-primary);

}


/* ==========================================================
   CLIENTE INFO SINGLE
========================================================== */

.sam-cliente-info{

    font-family:"Josefin Sans",sans-serif;

}

.sam-cliente-info h4{

    margin:0 0 18px;

    font-family:"Josefin Sans", sans-serif;

    font-size:41px;

    font-weight:400;

    line-height:1.1;

    letter-spacing:0;

    color:#808080;

}

.sam-cliente-info p{

    margin:0 0 18px;

}

.sam-cliente-info a{

    color:#808080;

    text-decoration:none;

    transition:.3s;

}

.sam-cliente-info a:hover{

    color:var(--e-global-color-primary);

}


/* ==========================================================
   WEBSITE / INSTAGRAM
========================================================== */

.sam-info-link{

    display:flex;

    align-items:center;

    gap:10px;

    margin:12px 0;

    font-family:"Josefin Sans",sans-serif;

    font-size:20px;

    font-weight:400;

}

.sam-info-link a{

    color:#808080;

    text-decoration:none;

    transition:.3s;

}

.sam-info-link a:hover{

    color:var(--e-global-color-primary);

}

.sam-info-link i{

    color:var(--e-global-color-primary);

    font-size:18px;

    width:20px;

    text-align:center;

}

.sam-cliente-nome{

    font-family:"Josefin Sans", sans-serif !important;

    font-size:41px !important;

    font-weight:400 !important;

    line-height:1.1 !important;

    letter-spacing:0 !important;

    color:#808080 !important;

    margin:0 0 18px !important;

}

/* ==========================================================
   TAGS / SOLUÇÕES APLICADAS
========================================================== */

.sam-tag{

    display:inline-flex;

    width:calc(33.333% - 10px);

    min-height:46px;

    margin:0 5px 10px 5px;

    padding:8px 5px;

    box-sizing:border-box;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:#fff;

    color:#808080;

    font-family:"Josefin Sans",sans-serif;

    font-size:16px;

    font-weight:400;

    line-height:1.1;

    text-decoration:none;

    transition:.3s;

}

.sam-tag:hover{

    background:var(--e-global-color-primary);

    color:#fff;

}