:root{

    --accent:#0ea5e9;
    --bg:#f8fafc;
    --card-bg:#ffffff;
    --border-color:#e2e8f0;
    --text:#334155;
    --heading:#0f172a;

}

/* BODY */
body{

    font-family:'Inter',sans-serif;
    background:var(--bg);
    margin:0;
    padding-top:70px;
    overflow-x:hidden;

}

/* NAVBAR */
.navbar{
    background:#212529 !important;
}

/* TOGGLE BUTTONS */
#offcanvasLeftToggle{
    position:fixed;
    top:10px;
    left:10px;
    z-index:1080;
}

#offcanvasRightToggle{
    position:fixed;
    top:10px;
    right:10px;
    z-index:1080;
}

/* OFFCANVAS */
.offcanvas{
    overflow:hidden;
}

.offcanvas iframe{
    width:100%;
    height:100%;
    border:none;
}

/* STATUS */
#status{

    font-size:13px;
    font-weight:600;
    color:#64748b;

    margin-bottom:25px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

}

/* WRAPPER */
.masonry-wrapper{

    max-width:1200px;
    margin:0 auto;

}

/* GRID */
.grid{
    width:100%;
}

/* SIZERS */
.grid-sizer,
.grid-item{
    width:100%;
}

/* TABLET */
@media(min-width:768px){

    .grid-sizer,
    .grid-item{
        width:calc(50% - 8px);
    }

}

/* DESKTOP */
@media(min-width:992px){

    .grid-sizer,
    .grid-item{
        width:calc(33.333% - 10px);
    }

}

/* LARGE */
@media(min-width:1400px){

    .grid-sizer,
    .grid-item{
        width:calc(25% - 12px);
    }

}

/* GUTTER */
.gutter-sizer{
    width:16px;
}

/* CARD */
.card-custom{

    background:var(--card-bg);

    border:1px solid var(--border-color);

    border-radius:16px;

    padding:18px;
    margin:3px;

    overflow:hidden;

    box-shadow:0 1px 2px rgba(0,0,0,.04);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}

.card-custom:hover{

    transform:translateY(-5px);

    border-color:var(--accent);

    box-shadow:0 15px 30px -10px rgba(0,0,0,.12);

}

/* ARTICLE */
article{

    font-size:14px;
    line-height:1.7;
    color:var(--text);

}

article h1,
article h2,
article h3,
article h4{

    color:var(--heading);

    line-height:1.3;

    margin-top:0;
    margin-bottom:14px;

    font-weight:600;

}

article img{

    width:100%;
    height:auto;

    border-radius:10px;

    margin:14px 0;

    display:block;

}

article iframe,
article video{

    width:100%;

    border:none;

    border-radius:10px;

    margin:14px 0;

}

/* BUTTON */
.btn-open{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:15px;

    background:var(--accent);

    color:#fff !important;

    text-decoration:none !important;

    font-size:12px;

    font-weight:600;

    padding:10px 18px;

    border-radius:10px;

    transition:opacity .2s;

}

.btn-open:hover{
    opacity:.9;
}

/* MAIN */
main{
    padding-bottom:40px;
}

/* MOBILE */
@media(max-width:576px){

    body{
        padding-top:65px;
    }

    .card-custom{
        padding:16px;
    }

}