#sg-gallery{
    font-family: Arial, sans-serif;
    color:#fff;
    background:#1C344D;
    padding:25px;
    border-radius:8px;
    width:100%;
    position:relative;
}

.sg-title{
    font-family:'Biscuitos'!important;
    font-size:4rem!important;
    color:#FADB06!important;
    line-height:1!important;
    margin:0;
    padding:0;

    margin-bottom:0px!important;
}

.sg-main{
    display:grid;
    grid-template-columns: 260px 1fr;
    gap:20px;
    align-items:start;
}

.sg-school-block{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding-left:40px;
    margin-top:5px;
}

.sg-school-buttons{
    display: grid;
    grid-template-columns: repeat(2, 120px);
    column-gap: 65px;
    row-gap: 15px;
}


.sg-school-btn{
    background:#004D9C;
    border: none;
    width: 160px;
    height: 80px;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: lighter;
    transition: 0.2s ease;
    font-family:'OpenSans';
    font-size:1.5rem;
}
.sg-school-btn-wide{

    grid-column:1 / span 2;

    width:345px;

}
.sg-school-btn:hover 
{
    transform: translateY(-2px);
    background: #0095cc;
}
.sg-school-btn.active{
    background:#01BCF3;
}

.sg-viewer{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-left:127px;
}

.sg-prev,
.sg-next{

    position:absolute;

    top:50%;
    transform:translateY(-50%);

    width:18px;
    height:35px;

    cursor:pointer;

    z-index:100;

    transition:.25s ease;

    background:rgba(255,255,255,.55);
}

/* kiri */
.sg-prev{

    left:15px;

    clip-path:polygon(
        100% 0%,
        0% 50%,
        100% 100%
    );
}

/* kanan */
.sg-next{

    right:15px;

    clip-path:polygon(
        0% 0%,
        100% 50%,
        0% 100%
    );
}

.sg-prev:hover,
.sg-next:hover{

    background:rgba(250,219,6,.55);
}

.sg-image-wrapper{
    width:853px;
    height:360px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#1C344D;
    border-radius:10px;
    position:relative;
}
.sg-image-wrapper img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    display:block;
}

.sg-category-carousel{
    margin-top:35px;
    position:relative;
}

.sg-category-list{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-behavior:smooth;
    padding:10px 30px;
}

.sg-category-list::-webkit-scrollbar{
    height:8px;
}
.sg-category-list::-webkit-scrollbar-thumb{
    background:#004D9C;
    border-radius:20px;
}

/* CATEGORY CARD */
.sg-category-thumb{
    width:160px;
    flex-shrink:0;
    overflow:hidden;
    cursor:pointer;
    transition:0.2s ease;
    background:transparent;
    margin-left:10px;
}

.sg-category-thumb:hover{
    transform:translateY(-3px);
}

/* IMAGE AREA */
.sg-category-image{
    width:160px;
    height:160px;
    overflow:hidden;
}

.sg-category-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* CAPTION AREA */
.sg-category-caption{
    background:#004D9C;
    padding:16px 10px;
    text-align:center;
    font-size:0.7rem;
    font-family:'OpenSans';
    color:#FFFFFF;
    text-transform:uppercase;
    transition:0.2s ease;
    font-weight:600;
    letter-spacing:0.5px;
    line-height:1.3;
}

/* HOVER */
.sg-category-thumb:hover .sg-category-caption{
    background:#01BCF3;
    color:#FFFFFF;
}

/* ACTIVE */
.sg-category-thumb.active .sg-category-caption{
    background:#01BCF3;
    color:#FFFFFF;
}

/*
.sg-category-thumb.active{
    background:#01BCF3;
    color:#003;
}*/

/* THUMBNAIL NAVIGATION */
.sg-cat-prev,
.sg-cat-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:35px;
    background:#01BCF3;
    cursor:pointer;
    transition:0.2s ease;
    z-index: 100;
    margin-left: -30px;
    margin-right: -30px;
}

/* LEFT */
.sg-cat-prev{
    left:0;

    clip-path:polygon(
        100% 0%,
        0% 50%,
        100% 100%
    );
}

/* RIGHT */
.sg-cat-next{
    right:0;

    clip-path:polygon(
        0% 0%,
        100% 50%,
        0% 100%
    );
}

/* HOVER */
.sg-cat-prev:hover,
.sg-cat-next:hover{
    background:#FADB06;
}


/* LIGHTBOX */
#sg-lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.94);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:2147483647 !important;
}

#sg-lightbox.active{
    display:flex;
}

#sg-lightbox img{
    max-width:88%;
    max-height:88%;
    object-fit:contain;
    transition:0.2s ease;
}

/* TOOLBAR */
.sg-lightbox-toolbar{
    display:none !important;
    position:absolute;
    top:20px;
    right:20px;
    display:flex;
    gap:10px;
}

.sg-lightbox-toolbar button{
    width:42px;
    height:42px;
    border:none;
    background:rgba(255,255,255,0.12);
    color:#fff;
    font-size:20px;
    cursor:pointer;
    transition:0.2s ease;
}

.sg-lightbox-toolbar button:hover{
    background:rgba(255,255,255,0.22);
}

/* ARROWS */
.sg-lightbox-prev,
.sg-lightbox-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:transparent;
    color:#FFFFFF;
    font-size:64px;
    font-weight:300;
    cursor:pointer;
    transition:0.2s ease;
    opacity:0.7;
    padding:0;
    line-height:1;
}

.sg-lightbox-prev:hover,
.sg-lightbox-next:hover{
    opacity:1;
}

.sg-lightbox-prev{
    left:18px;
}

.sg-lightbox-next{
    right:18px;
}



/* =========================================
   TEMPLATE 2
========================================= */

.sg-slider-wrapper{
    position:relative;
    background:#1C344D;
    padding:45px 60px;
    overflow:hidden;
}

.sg-slider-track{
    display:flex;
    gap:40px;
    overflow-x:auto;
    scroll-behavior:smooth;
}

.sg-slider-track::-webkit-scrollbar{
    display:none;
}

/* ITEM */
.sg-slider-item{
    flex-shrink:0;
    width:380px;
    cursor:pointer;
}

/* IMAGE */
.sg-slider-image{
    width:100%;
    height:420px;
    overflow:hidden;
}

.sg-slider-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* CAPTION */
.sg-slider-caption{
    background:#495C71;
    color:#FADB06;
    text-align:center;
    padding:18px 15px;
    font-size:1.2rem;
    text-transform:uppercase;
    transition:0.2s ease;
    line-height:1.5;
    letter-spacing:2px;
}

.sg-slider-item:hover .sg-slider-caption{
    background:#004D9C;
    color:#FFFFFF;
}

/* ARROWS */
.sg-slider-prev,
.sg-slider-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:35px;
    background:#004D9C;
    cursor:pointer;
    transition:0.2s ease;
}

.sg-slider-prev{
    left:20px;

    clip-path:polygon(
        100% 0%,
        0% 50%,
        100% 100%
    );
}

.sg-slider-next{
    right:20px;

    clip-path:polygon(
        0% 0%,
        100% 50%,
        0% 100%
    );
}

.sg-slider-prev:hover,
.sg-slider-next:hover{
    background:#FADB06;
}