@charset "UTF-8";

/*=========================================================
    DOE DESIGNS PORTFOLIO
    File: design.css
=========================================================*/


/*=========================================================
    DESIGN PAGE
=========================================================*/

body.design-page{
    background:#251036;
}


/*=========================================================
    PAGE LAYOUT
=========================================================*/

body.design-page .page-content{
    display:flex;
    flex-direction:column;
    min-height:calc(100vh - 70px);
}

/*=========================================================
    DESIGN GRID
=========================================================*/

.design-grid{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:60px;
    width:100%;
    position:relative;
    z-index:2;
}

/*=========================================================
    DESIGN CARDS
=========================================================*/

.design-card{
    position:relative;
    z-index:2;
    width:260px;
    height:260px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    border:2px solid rgba(255,255,255,.15);
    text-decoration:none;
    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}

.design-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.design-card:hover{
    border-color:#00E5FF;
    box-shadow:
        0 0 30px rgba(0,229,255,.40);
    transform:translateY(-8px);
}

/*=========================================================
    CONTACT
=========================================================*/

.design-page .page-contact-link{

    margin:35px auto 25px;

}

.design-page .page-contact-link p{

    color:#ffffff;

    font-size:18px;

    letter-spacing:.04em;

}

/*=========================================================
    MOBILE
=========================================================*/

@media (max-width:900px){

    .design-grid{

        flex-direction:column;

        gap:40px;

        padding:40px 0;

    }

}