/* ==========================================
   HERO
========================================== */

.hero{
    margin-bottom:100px;
}

.hero-image{
    width:100%;
}

.hero-image img{
    width:100%;
    height:calc(100vh - 90px);
    object-fit:cover;
}


/* ==========================================
   HOME
========================================== */

.home-section{
    margin-bottom:120px;
}

.section-header{
    margin-bottom:50px;
}

.section-header h2{
    margin:0;
    font-size:44px;
    font-weight:600;
    letter-spacing:-1px;
}


/* ==========================================
   SUBMENU
========================================== */

.section-submenu{
    margin:35px 0 0;
    border-bottom:1px solid #e5e5e5;
}

.section-submenu ul{
    display:flex;
    flex-wrap:wrap;
    gap:36px;
    margin:0;
    padding:0;
    list-style:none;
}

.section-submenu li{
    margin:0;
}

.section-submenu a{
    display:block;
    padding:18px 0;
    font-size:17px;
    color:#444;
    transition:.2s;
}

.section-submenu a:hover{
    color:#000;
}

.section-submenu .current-menu-item a,
.section-submenu .current_page_item a,
.section-submenu .current-page-ancestor a{
    color:#000;
    font-weight:600;
    border-bottom:2px solid #000;
}


/* ==========================================
   PORTFOLIO GRID
========================================== */

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:60px 40px;
}


/* ==========================================
   PORTFOLIO CARD
========================================== */

.portfolio-card{
    transition:.3s;
}

.portfolio-card:hover{
    transform:translateY(-8px);
}

.portfolio-card__link{
    display:block;
}

.portfolio-card__image{
    overflow:hidden;
    background:#f5f5f5;
    aspect-ratio:4/5;
}

.portfolio-card__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s;
}

.portfolio-card:hover .portfolio-card__image img{
    transform:scale(1.03);
}

.portfolio-card__content{
    padding-top:18px;
}

.portfolio-card__category{
    margin-bottom:10px;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:#888;
}

.portfolio-card__title{
    margin:0;
    margin-top:22px;
    font-size:30px;
    font-weight:500;
    line-height:1.2;
}

.portfolio-card__excerpt{
    margin-top:14px;
    color:#666;
    line-height:1.7;
}


/* ==========================================
   PORTFOLIO SUBMENU
========================================== */

.portfolio-submenu{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:0 0 50px;
}

.portfolio-submenu a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 24px;
    border:1px solid #ddd;
    border-radius:999px;
    color:#111;
    text-decoration:none;
    transition:.2s;
}

.portfolio-submenu a:hover{
    background:#111;
    color:#fff;
}

.portfolio-submenu a.active{
    background:#111;
    color:#fff;
    border-color:#111;
}