.elementor-11533 .elementor-element.elementor-element-dac0ee4{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--overlay-opacity:0.9;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:63px;--padding-bottom:-11px;--padding-left:0px;--padding-right:0px;--z-index:11;}.elementor-11533 .elementor-element.elementor-element-dac0ee4:not(.elementor-motion-effects-element-type-background), .elementor-11533 .elementor-element.elementor-element-dac0ee4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#00153C;background-image:url("https://pasca.ut.ac.id/wp-content/uploads/2025/07/gerbang-UT.png");background-position:center left;background-repeat:no-repeat;background-size:cover;}.elementor-11533 .elementor-element.elementor-element-dac0ee4::before, .elementor-11533 .elementor-element.elementor-element-dac0ee4 > .elementor-background-video-container::before, .elementor-11533 .elementor-element.elementor-element-dac0ee4 > .e-con-inner > .elementor-background-video-container::before, .elementor-11533 .elementor-element.elementor-element-dac0ee4 > .elementor-background-slideshow::before, .elementor-11533 .elementor-element.elementor-element-dac0ee4 > .e-con-inner > .elementor-background-slideshow::before, .elementor-11533 .elementor-element.elementor-element-dac0ee4 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#003391DE;--background-overlay:'';}.elementor-11533 .elementor-element.elementor-element-794c9dc5{--display:flex;--min-height:0px;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11533 .elementor-element.elementor-element-5fbadf80{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-11533 .elementor-element.elementor-element-41a43684{--display:flex;}.elementor-11533 .elementor-element.elementor-element-d797cd5{--display:flex;}.elementor-11533 .elementor-element.elementor-element-2bca1066{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;text-align:center;}.elementor-11533 .elementor-element.elementor-element-2bca1066 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:57px;color:#FFFFFF;}.elementor-11533 .elementor-element.elementor-element-50815803{text-align:center;}.elementor-11533 .elementor-element.elementor-element-50815803 .elementor-heading-title{color:#A7B9E3;}.elementor-11533 .elementor-element.elementor-element-342524d4 .elementor-countdown-wrapper{max-width:100%;}body:not(.rtl) .elementor-11533 .elementor-element.elementor-element-342524d4 .elementor-countdown-item:not(:first-of-type){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-11533 .elementor-element.elementor-element-342524d4 .elementor-countdown-item:not(:last-of-type){margin-right:calc( 10px/2 );}body.rtl .elementor-11533 .elementor-element.elementor-element-342524d4 .elementor-countdown-item:not(:first-of-type){margin-right:calc( 10px/2 );}body.rtl .elementor-11533 .elementor-element.elementor-element-342524d4 .elementor-countdown-item:not(:last-of-type){margin-left:calc( 10px/2 );}.elementor-11533 .elementor-element.elementor-element-548af2ce .elementor-button{background-color:#3080FF;font-size:21px;font-weight:900;line-height:18px;letter-spacing:0.8px;word-spacing:3px;fill:#FFFFFF;color:#FFFFFF;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.64);border-radius:13px 13px 13px 13px;padding:14px 14px 14px 14px;}.elementor-11533 .elementor-element.elementor-element-548af2ce.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:1;}.elementor-11533 .elementor-element.elementor-element-548af2ce .elementor-button:hover, .elementor-11533 .elementor-element.elementor-element-548af2ce .elementor-button:focus{box-shadow:0px 0px 10px 4px rgba(247.59793395996093, 235.98797790726374, 4.844307403564453, 0.39);}.elementor-11533 .elementor-element.elementor-element-123d9d8b{--display:flex;}.elementor-11533 .elementor-element.elementor-element-47895b4f{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11533 .elementor-element.elementor-element-74dbb14c{--display:flex;--justify-content:center;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:15px;}.elementor-11533 .elementor-element.elementor-element-7559ff18 .elementor-button:hover, .elementor-11533 .elementor-element.elementor-element-7559ff18 .elementor-button:focus{background-color:#FFFAE4;}.elementor-11533 .elementor-element.elementor-element-7559ff18:hover{--e-transform-scale:0.9;}.elementor-11533 .elementor-element.elementor-element-7559ff18{--e-transform-transition-duration:600ms;}.elementor-11533 .elementor-element.elementor-element-7559ff18 .elementor-button-content-wrapper{flex-direction:row;}.elementor-11533 .elementor-element.elementor-element-7559ff18 .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-11533 .elementor-element.elementor-element-7559ff18 .elementor-button{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:2px;fill:#00102E;color:#00102E;border-style:solid;border-width:1px 1px 1px 1px;border-radius:30px 30px 30px 30px;padding:19px 40px 19px 40px;}.elementor-11533 .elementor-element.elementor-element-635e2d8a{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:15px;--padding-right:0px;}.elementor-11533 .elementor-element.elementor-element-75f817ab .elementor-button{background-color:#FFE784;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:2px;fill:#00102E;color:#00102E;border-style:solid;border-width:1px 1px 1px 1px;border-radius:030px 030px 030px 030px;padding:19px 40px 19px 40px;}.elementor-11533 .elementor-element.elementor-element-75f817ab .elementor-button:hover, .elementor-11533 .elementor-element.elementor-element-75f817ab .elementor-button:focus{background-color:#FFFAE4;}.elementor-11533 .elementor-element.elementor-element-75f817ab:hover{--e-transform-scale:0.9;}.elementor-11533 .elementor-element.elementor-element-75f817ab{--e-transform-transition-duration:600ms;}.elementor-11533 .elementor-element.elementor-element-75f817ab .elementor-button-content-wrapper{flex-direction:row;}.elementor-11533 .elementor-element.elementor-element-75f817ab .elementor-button .elementor-button-content-wrapper{gap:11px;}.elementor-11533 .elementor-element.elementor-element-6e98a21e{--display:flex;--justify-content:center;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-11533 .elementor-element.elementor-element-dca99ca .elementor-button{background-color:#FFF2BD;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:2px;fill:#00102E;color:#00102E;border-style:solid;border-width:1px 1px 1px 1px;border-radius:030px 030px 030px 030px;padding:19px 40px 19px 40px;}.elementor-11533 .elementor-element.elementor-element-dca99ca .elementor-button:hover, .elementor-11533 .elementor-element.elementor-element-dca99ca .elementor-button:focus{background-color:#FFFAE4;}.elementor-11533 .elementor-element.elementor-element-dca99ca:hover{--e-transform-scale:0.9;}.elementor-11533 .elementor-element.elementor-element-dca99ca{--e-transform-transition-duration:600ms;}.elementor-11533 .elementor-element.elementor-element-dca99ca .elementor-button-content-wrapper{flex-direction:row;}.elementor-11533 .elementor-element.elementor-element-dca99ca .elementor-button .elementor-button-content-wrapper{gap:8px;}.elementor-11533 .elementor-element.elementor-element-343db572 .elementor-icon-wrapper{text-align:center;}.elementor-11533 .elementor-element.elementor-element-343db572.elementor-view-stacked .elementor-icon{background-color:#FFF900;}.elementor-11533 .elementor-element.elementor-element-343db572.elementor-view-framed .elementor-icon, .elementor-11533 .elementor-element.elementor-element-343db572.elementor-view-default .elementor-icon{color:#FFF900;border-color:#FFF900;}.elementor-11533 .elementor-element.elementor-element-343db572.elementor-view-framed .elementor-icon, .elementor-11533 .elementor-element.elementor-element-343db572.elementor-view-default .elementor-icon svg{fill:#FFF900;}.elementor-11533 .elementor-element.elementor-element-343db572 .elementor-icon{font-size:33px;}.elementor-11533 .elementor-element.elementor-element-343db572 .elementor-icon svg{height:33px;}.elementor-11533 .elementor-element.elementor-element-343db572 .elementor-icon i, .elementor-11533 .elementor-element.elementor-element-343db572 .elementor-icon svg{transform:rotate(0deg);}.elementor-11533 .elementor-element.elementor-element-d91acae{--display:flex;--margin-top:35px;--margin-bottom:15px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11533 .elementor-element.elementor-element-1378a4c0{--iteration-count:infinite;--animation-duration:1200ms;z-index:0;--dynamic-text-color:#A4C2FF;}.elementor-11533 .elementor-element.elementor-element-1378a4c0 > .elementor-widget-container{margin:79px 0px -197px 0px;padding:-16px 0px -12px 0px;border-radius:0px 0px 0px 0px;}.elementor-11533 .elementor-element.elementor-element-1378a4c0 .elementor-headline{text-align:center;font-family:"Poppins", Sans-serif;font-size:34px;font-weight:700;line-height:27px;letter-spacing:0px;word-spacing:3px;}.elementor-11533 .elementor-element.elementor-element-1378a4c0 .elementor-headline-dynamic-wrapper path{stroke:#FFF900;stroke-width:8px;stroke-linecap:round;stroke-linejoin:round;}.elementor-11533 .elementor-element.elementor-element-1378a4c0 .elementor-headline-dynamic-wrapper svg{z-index:2;}.elementor-11533 .elementor-element.elementor-element-1378a4c0 .elementor-headline-dynamic-text{z-index:auto;font-family:"Poppins", Sans-serif;font-weight:800;line-height:55px;letter-spacing:0px;word-spacing:0px;}.elementor-11533 .elementor-element.elementor-element-1378a4c0 .elementor-headline-plain-text{color:#0D4194;}.elementor-11533 .elementor-element.elementor-element-271ebb3f{--display:flex;--margin-top:116px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11533 .elementor-element.elementor-element-692cfc32{--display:flex;--padding-top:118px;--padding-bottom:118px;--padding-left:118px;--padding-right:118px;}.elementor-11533 .elementor-element.elementor-element-3dfb7e98{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-137px;--margin-bottom:-227px;--margin-left:0px;--margin-right:0px;--padding-top:-17px;--padding-bottom:-59px;--padding-left:-21px;--padding-right:21px;}.elementor-11533 .elementor-element.elementor-element-d64376{width:100%;max-width:100%;}.elementor-11533 .elementor-element.elementor-element-61591565{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-11533 .elementor-element.elementor-element-5be92995{--spacer-size:50px;}.elementor-11533 .elementor-element.elementor-element-76951a38{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-11533 .elementor-element.elementor-element-65eaa4ee{--spacer-size:41px;}.elementor-11533 .elementor-element.elementor-element-507ea501{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-11533 .elementor-element.elementor-element-1a89981b{--spacer-size:50px;}.elementor-11533 .elementor-element.elementor-element-5b26a296{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-11533 .elementor-element.elementor-element-1cc5d1bb{--e-image-carousel-slides-to-show:1;width:100%;max-width:100%;}.elementor-11533 .elementor-element.elementor-element-1cc5d1bb .elementor-swiper-button.elementor-swiper-button-prev, .elementor-11533 .elementor-element.elementor-element-1cc5d1bb .elementor-swiper-button.elementor-swiper-button-next{font-size:31px;color:#A8A372;}.elementor-11533 .elementor-element.elementor-element-1cc5d1bb .elementor-swiper-button.elementor-swiper-button-prev svg, .elementor-11533 .elementor-element.elementor-element-1cc5d1bb .elementor-swiper-button.elementor-swiper-button-next svg{fill:#A8A372;}.elementor-11533 .elementor-element.elementor-element-1cc5d1bb .swiper-pagination-bullet{--swiper-pagination-bullet-horizontal-gap:3px;--swiper-pagination-bullet-vertical-gap:3px;}.elementor-11533 .elementor-element.elementor-element-1cc5d1bb .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-radius:0px 0px 0px 0px;}.elementor-11533 .elementor-element.elementor-element-5e17acaa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-11533 .elementor-element.elementor-element-7d49b93f{width:100%;max-width:100%;margin:0px 2px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px -26px 0px 26px;}.elementor-11533 .elementor-element.elementor-element-2ee11396{width:100%;max-width:100%;}.elementor-11533 .elementor-element.elementor-element-2ee11396.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-11533 .elementor-element.elementor-element-9a1bed3{width:100%;max-width:100%;}.elementor-11533 .elementor-element.elementor-element-9a1bed3.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-11533 .elementor-element.elementor-element-1e1ec02b{width:100%;max-width:100%;}.elementor-11533 .elementor-element.elementor-element-1e1ec02b.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-11533 .elementor-element.elementor-element-333afa68{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-11533 .elementor-element.elementor-element-436b7450{--spacer-size:41px;}@media(max-width:1024px){.elementor-11533 .elementor-element.elementor-element-dac0ee4{--padding-top:130px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11533 .elementor-element.elementor-element-2bca1066 .elementor-heading-title{font-size:36px;}.elementor-11533 .elementor-element.elementor-element-47895b4f{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-11533 .elementor-element.elementor-element-47895b4f{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-11533 .elementor-element.elementor-element-74dbb14c{--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-11533 .elementor-element.elementor-element-635e2d8a{--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}}@media(min-width:768px){.elementor-11533 .elementor-element.elementor-element-794c9dc5{--width:100%;}.elementor-11533 .elementor-element.elementor-element-41a43684{--width:20%;}.elementor-11533 .elementor-element.elementor-element-d797cd5{--width:59.333%;}.elementor-11533 .elementor-element.elementor-element-123d9d8b{--width:20%;}.elementor-11533 .elementor-element.elementor-element-3dfb7e98{--width:100%;}}@media(min-width:1025px){.elementor-11533 .elementor-element.elementor-element-dac0ee4:not(.elementor-motion-effects-element-type-background), .elementor-11533 .elementor-element.elementor-element-dac0ee4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for html, class: .elementor-element-2b0afd45 *//*=============================
MAKSI FEATURE CARD
==============================*/

.maksi-feature{

display:flex;

justify-content:center;

align-items:stretch;

gap:25px;

flex-wrap:wrap;

padding:40px 20px;

}

.maksi-feature-item{

position:relative;

width:220px;

padding:35px 20px;

text-align:center;

border-radius:24px;

background:rgba(255,255,255,.12);

backdrop-filter:blur(14px);

-webkit-backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,.18);

box-shadow:0 12px 35px rgba(0,0,0,.18);

transition:.35s;

overflow:hidden;

}

.maksi-feature-item:hover{

transform:translateY(-12px);

box-shadow:0 25px 55px rgba(0,71,187,.35);

border-color:#FFD200;

}

.maksi-feature-item::before{

content:"";

position:absolute;

width:170px;

height:170px;

background:radial-gradient(circle,
rgba(255,210,0,.30),
transparent 70%);

top:-90px;

right:-70px;

}

.maksi-feature-icon{

width:80px;

height:80px;

margin:auto;

border-radius:50%;

background:linear-gradient(135deg,#0057d8,#2b86ff);

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:white;

box-shadow:0 8px 22px rgba(0,71,187,.35);

transition:.35s;

}

.maksi-feature-item:hover .maksi-feature-icon{

transform:scale(1.15) rotate(10deg);

background:linear-gradient(135deg,#FFD200,#ffb300);

color:#003B91;

}

.maksi-feature-title{

margin-top:20px;

font-size:22px;

font-weight:700;

color:white;

}

.maksi-feature-desc{

margin-top:12px;

font-size:15px;

line-height:1.6;

color:#f1f1f1;

}

@media(max-width:768px){

.maksi-feature{

gap:18px;

}

.maksi-feature-item{

width:100%;

max-width:320px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d64376 *//* =========================================
   SEKOLAH PASCASARJANA UT
   INFO CARDS
========================================= */

.pasca-info-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

    width: 100%;
    max-width: 1250px;

    margin: 0 auto;
    padding: 0;

    align-items: stretch;
}


/* CARD */

.pasca-card {
    position: relative;
    overflow: visible;

    min-height: 440px;
    height: auto;

    padding: 36px 30px 32px;

    border: 1px solid rgba(255, 193, 7, 0.45);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 215, 90, 0.28),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fbff 100%
        );

    box-shadow:
        0 15px 35px rgba(0, 53, 120, 0.12);

    box-sizing: border-box;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

/* =========================================
   PROGRAM STUDI
========================================= */

.program-card {
    min-height: 465px;
}


/* GROUP */

.program-group {
    margin-bottom: 14px;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.78);

    transition: all 0.3s ease;
}


/* SUMMARY */

.program-group summary {
    display: flex;
    align-items: center;

    min-height: 68px;

    padding: 8px 15px;

    cursor: pointer;

    list-style: none;

    box-sizing: border-box;
}


/* Hilangkan tanda default browser */

.program-group summary::-webkit-details-marker {
    display: none;
}


/* NUMBER */

.program-group .study-number {
    width: 55px;

    color: #064da9;

    font-size: 38px;
    font-weight: 800;

    line-height: 1;
}


/* LABEL */

.program-group .study-label {
    flex: 1;

    color: #555;

    font-size: 15px;
}


/* PLUS */

.program-group .arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #ffc400;

    color: #064394;

    font-size: 20px;
    font-weight: 700;

    transition: transform 0.3s ease;
}


/* OPEN */

.program-group[open] {
    box-shadow: 0 8px 20px rgba(0, 55, 120, 0.08);
}

.program-group[open] .arrow {
    transform: rotate(45deg);
}


/* PROGRAM LIST */

.program-list {
    max-height: 285px;

    overflow-y: auto;

    padding: 4px 14px 14px;
}


/* SCROLLBAR */

.program-list::-webkit-scrollbar {
    width: 5px;
}

.program-list::-webkit-scrollbar-track {
    background: #f1f4f8;
    border-radius: 10px;
}

.program-list::-webkit-scrollbar-thumb {
    background: #b8c8dc;
    border-radius: 10px;
}


/* PROGRAM ITEM */

.program-item {
    display: grid;

    grid-template-columns: 28px 1fr auto;

    align-items: center;

    gap: 8px;

    padding: 9px 8px;

    border-bottom: 1px solid #edf0f4;

    color: #555;

    font-size: 12px;

    line-height: 1.3;
}

.program-item:last-child {
    border-bottom: none;
}


/* NUMBER */

.program-item > span {
    color: #064da9;

    font-size: 11px;
    font-weight: 700;
}


/* NAME */

.program-item strong {
    color: #444;

    font-size: 12px;
    font-weight: 600;
}


/* CODE */

.program-item small {
    padding: 3px 7px;

    border-radius: 6px;

    background: #eef4fb;

    color: #064da9;

    font-size: 10px;
    font-weight: 700;
}


/* TOTAL */

.program-card .total-badge {
    margin-top: 10px;
}


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

@media (max-width: 767px) {

    .program-group summary {
        min-height: 62px;
    }

    .program-group .study-number {
        font-size: 32px;
        width: 50px;
    }

    .program-group .study-label {
        font-size: 14px;
    }

    .program-list {
        max-height: 300px;
    }

    .program-item {
        grid-template-columns: 25px 1fr auto;

        padding: 9px 5px;
    }

    .program-item strong {
        font-size: 11px;
    }

}


/* HOVER */

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

    box-shadow:
        0 22px 45px rgba(0, 53, 120, 0.18);
}


/* ICON */

.pasca-card .icon {
    width: 72px;
    height: 72px;

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

    margin-bottom: 26px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #0867d8,
            #0047b8
        );

    font-size: 35px;

    box-shadow:
        0 12px 25px rgba(0, 77, 180, 0.25);
}


/* TITLE */

.pasca-card h3 {
    margin: 0 0 25px;

    color: #064394;

    font-size: 29px;
    font-weight: 700;
    line-height: 1.2;
}


/* =========================================
   PROGRAM STUDI
========================================= */

.study-stat {
    display: flex;
    align-items: center;

    margin-bottom: 18px;
    padding: 15px 18px;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.75);
}

.study-number {
    min-width: 65px;

    color: #064da9;

    font-size: 38px;
    font-weight: 800;
    line-height: 1;
}

.study-label {
    color: #555;

    font-size: 16px;
    line-height: 1.3;
}


.total-badge {
    display: inline-block;

    margin-top: 12px;
    padding: 11px 22px;

    border-radius: 30px;

    background: #ffc400;

    color: #063e89;

    font-size: 15px;
    font-weight: 700;
}


/* =========================================
   ALUMNI
========================================= */

.alumni-total {
    text-align: center;

    margin: 5px 0 28px;
}

.alumni-total strong {
    display: block;

    color: #0755bd;

    font-size: 55px;
    font-weight: 800;
    line-height: 1;
}

.alumni-total span {
    display: block;

    margin-top: 8px;

    color: #666;

    font-size: 15px;
}


.alumni-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.alumni-detail > div {
    padding: 18px 12px;

    text-align: center;

    border-radius: 16px;

    background: #f5f8fc;

    border-left: 4px solid #ffc400;
}

.alumni-detail strong {
    display: block;

    color: #064da9;

    font-size: 27px;
    font-weight: 800;
}

.alumni-detail span {
    display: block;

    margin-top: 5px;

    color: #666;

    font-size: 14px;
}


.alumni-caption {
    margin-top: 25px;

    color: #777;

    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}


/* =========================================
   BIAYA PENDIDIKAN
========================================= */

.biaya-card {
    padding-bottom: 28px;
}

.biaya-card h3 {
    margin-bottom: 18px;
}


.biaya-title {
    margin: 8px 0 10px;
    padding-left: 4px;

    color: #064394;

    font-size: 16px;
    font-weight: 700;
}


.doktoral-title {
    margin-top: 22px;

    border-top: 1px solid #e5eaf2;
    padding-top: 18px;
}


.price-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 47px;

    margin-bottom: 9px;
    padding: 8px 14px 8px 17px;

    border-left: 5px solid #ffc400;
    border-radius: 12px;

    background: #f7f9fc;

    box-sizing: border-box;
}


.price-item span {
    color: #666;

    font-size: 14px;
}


.price-item strong {
    color: #064394;

    font-size: 15px;
    font-weight: 700;

    white-space: nowrap;
}


.price-note {
    margin-top: 5px;
    padding-left: 5px;

    color: #777;

    font-size: 11px;
    line-height: 1.4;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1024px) {

    .pasca-info-section {
        grid-template-columns: 1fr 1fr;
    }

    .biaya-card {
        grid-column: span 2;
    }

}


@media (max-width: 767px) {

    .pasca-info-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .biaya-card {
        grid-column: span 1;
    }

    .pasca-card {
        min-height: auto;
        padding: 28px 22px;
    }

    .pasca-card h3 {
        font-size: 25px;
    }

    .alumni-total strong {
        font-size: 48px;
    }

    .price-item {
        min-height: 50px;
    }

}

/* =========================================
   BIAYA PENDIDIKAN DROPDOWN
========================================= */

.biaya-dropdown {
    margin-bottom: 14px;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.78);

    transition: all 0.3s ease;
}


/* SUMMARY */

.biaya-dropdown summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 60px;

    padding: 8px 14px 8px 17px;

    cursor: pointer;

    list-style: none;

    box-sizing: border-box;
}


/* Hilangkan tanda default */

.biaya-dropdown summary::-webkit-details-marker {
    display: none;
}


/* TITLE */

.biaya-summary-title {
    color: #064394;

    font-size: 15px;
    font-weight: 700;
}


/* PLUS */

.biaya-dropdown .arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #ffc400;

    color: #064394;

    font-size: 20px;
    font-weight: 700;

    transition: transform 0.3s ease;
}


/* OPEN */

.biaya-dropdown[open] {
    box-shadow:
        0 8px 20px rgba(0, 55, 120, 0.08);
}

.biaya-dropdown[open] .arrow {
    transform: rotate(45deg);
}


/* CONTENT */

.biaya-content {
    padding: 0 14px 14px;
}


/* PRICE */

.price-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 47px;

    margin-bottom: 9px;
    padding: 8px 14px 8px 17px;

    border-left: 5px solid #ffc400;
    border-radius: 12px;

    background: #f7f9fc;

    box-sizing: border-box;
}


.price-item span {
    color: #666;

    font-size: 13px;
}


.price-item strong {
    color: #064394;

    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;
}


/* NOTE */

.price-note {
    margin-top: 5px;
    padding: 0 4px;

    color: #777;

    font-size: 11px;
    line-height: 1.4;
}

.program-card,
.biaya-card {
    z-index: 10;
}

.program-group[open],
.biaya-dropdown[open] {
    position: relative;
    z-index: 20;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7d49b93f *//* =========================================
   SEKOLAH PASCASARJANA
   ABOUT SECTION
========================================= */

.sps-about-section {
    width: 100%;
    padding: 80px 30px 100px;

    background:
        linear-gradient(
            180deg,
            #f4f7fd 0%,
            #eef3fb 100%
        );

    box-sizing: border-box;
}


/* =========================================
   HEADER
========================================= */

.sps-about-header {
    max-width: 1100px;
    margin: 0 auto;

    text-align: center;
}


.sps-label {
    display: inline-block;

    margin-bottom: 28px;
    padding: 10px 25px;

    border-radius: 30px;

    background: #edf4ff;

    color: #0751b4;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;
}


.sps-about-header h2 {
    margin: 0;

    color: #064394;

    font-size: clamp(34px, 4vw, 48px);
    font-weight: 800;

    line-height: 1.15;
}


.sps-about-header h2 span {
    color: #ffc400;
}


.sps-about-header p {
    max-width: 850px;

    margin: 22px auto 0;

    color: #66758a;

    font-size: 16px;
    line-height: 1.9;
}


/* =========================================
   TAB
========================================= */

.sps-tabs {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 16px;

    margin: 55px auto 42px;
}


.sps-tab {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-width: 165px;

    padding: 17px 25px;

    border: none;
    border-radius: 40px;

    background: #ffffff;

    color: #0751b4;

    font-family: inherit;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 22px rgba(20, 70, 130, 0.08);

    transition:
        all 0.3s ease;
}


.sps-tab span {
    font-size: 21px;
}


.sps-tab:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(20, 70, 130, 0.14);
}


.sps-tab.active {
    background:
        linear-gradient(
            135deg,
            #126de0,
            #0755c4
        );

    color: #ffffff;

    box-shadow:
        0 12px 25px rgba(0, 80, 190, 0.25);
}


/* =========================================
   CONTENT
========================================= */

.sps-tab-content {
    position: relative;

    max-width: 1100px;

    margin: 0 auto;
}


.sps-panel {
    display: none;

    grid-template-columns: 0.8fr 1.5fr;

    align-items: center;

    gap: 55px;

    padding: 55px 50px;

    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 20px 50px rgba(25, 65, 120, 0.08);

    box-sizing: border-box;

    animation: spsFadeIn 0.35s ease;
}


.sps-panel.active {
    display: grid;
}


@keyframes spsFadeIn {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================
   IMAGE
========================================= */

.sps-panel-image {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 300px;
}


.sps-image-frame {
    position: relative;

    width: 100%;
    max-width: 390px;
}


.sps-image-frame img {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    height: 280px;

    object-fit: cover;

    border-radius: 25px;

    box-shadow:
        0 18px 35px rgba(0, 55, 120, 0.12);
}


.sps-image-decoration {
    position: absolute;

    z-index: 1;

    right: -18px;
    bottom: -18px;

    width: 175px;
    height: 175px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #ffd72f,
            #fff5c4
        );
}


/* =========================================
   TEXT
========================================= */

.sps-panel-text h3 {
    margin: 0 0 22px;

    color: #064394;

    font-size: 31px;
    font-weight: 700;
}


.sps-panel-text p {
    margin: 0 0 17px;

    color: #566579;

    font-size: 15px;

    line-height: 1.9;
}


/* =========================================
   VISION CARD
========================================= */

.sps-vision-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 280px;
    min-height: 280px;

    padding: 35px;

    text-align: center;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #0757c7,
            #063f96
        );

    box-shadow:
        0 20px 40px rgba(0, 65, 160, 0.22);

    box-sizing: border-box;
}


.vision-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 65px;
    height: 65px;

    margin-bottom: 20px;

    border-radius: 50%;

    background: #ffc400;

    color: #064394;

    font-size: 35px;
}


.sps-vision-card span {
    margin-bottom: 12px;

    color: #ffd000;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 2px;
}


.sps-vision-card strong {
    color: #ffffff;

    font-size: 19px;
    line-height: 1.5;
}


/* =========================================
   CONTENT BLOCK
========================================= */

.sps-content-block {
    margin-bottom: 22px;
}


.sps-content-block h4 {
    margin: 0 0 8px;

    color: #0755bd;

    font-size: 18px;
}


/* =========================================
   LIST
========================================= */

.sps-list {
    margin: 0;
    padding: 0;

    list-style: none;
}


.sps-list li {
    position: relative;

    margin-bottom: 12px;
    padding-left: 25px;

    color: #566579;

    font-size: 14px;

    line-height: 1.7;
}


.sps-list li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    color: #ffc400;

    font-size: 17px;
    font-weight: 800;
}


/* =========================================
   ADVANTAGE CARD
========================================= */

.sps-advantage-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 280px;
    min-height: 280px;

    padding: 35px;

    text-align: center;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2f7ff
        );

    border: 1px solid #e6edf7;

    box-shadow:
        0 18px 40px rgba(0, 55, 120, 0.10);
}


.advantage-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    margin-bottom: 22px;

    border-radius: 20px;

    background: #ffc400;

    color: #064394;

    font-size: 34px;
}


.sps-advantage-card strong {
    color: #064394;

    font-size: 19px;
    line-height: 1.45;
}


.sps-advantage-card span {
    margin-top: 12px;

    color: #7b8797;

    font-size: 13px;
}


/* =========================================
   ADVANTAGE GRID
========================================= */

.advantage-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}


.advantage-item {
    display: flex;

    gap: 14px;

    padding: 18px;

    border-radius: 16px;

    background: #f7f9fd;

    border-left: 4px solid #ffc400;
}


.advantage-number {
    color: #0755bd;

    font-size: 18px;
    font-weight: 800;
}


.advantage-item strong {
    display: block;

    margin-bottom: 6px;

    color: #174b8f;

    font-size: 14px;

    line-height: 1.4;
}


.advantage-item p {
    margin: 0;

    color: #68778a;

    font-size: 12px;

    line-height: 1.6;
}


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

@media (max-width: 767px) {

    .sps-about-section {
        padding: 55px 18px 70px;
    }


    .sps-about-header h2 {
        font-size: 31px;
    }


    .sps-about-header p {
        font-size: 14px;
        line-height: 1.7;
    }


    .sps-tabs {
        flex-direction: column;

        gap: 10px;

        margin: 35px auto 30px;
    }


    .sps-tab {
        width: 100%;
        max-width: 280px;
    }


    .sps-panel,
    .sps-panel.active {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 30px 23px;
    }


    .sps-panel-image {
        min-height: auto;
    }


    .sps-image-frame {
        max-width: 300px;
    }


    .sps-image-frame img {
        height: 220px;
    }


    .sps-panel-text h3 {
        font-size: 26px;
    }


    .advantage-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================
   PROGRAM STUDI
========================================= */

.sps-program-panel {
    display: none;
    grid-template-columns: 1fr;
    padding: 45px 50px;
}


.sps-program-panel.active {
    display: block;
}


.sps-program-wrapper {
    width: 100%;
}


/* HEADER */

.sps-program-header {
    margin-bottom: 30px;
}


.sps-program-header h3 {
    margin: 0 0 10px;

    color: #064394;

    font-size: 31px;
    font-weight: 700;
}


.sps-program-header p {
    max-width: 850px;

    margin: 0;

    color: #66758a;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   SECTION TITLE
========================================= */

.sps-program-section {
    margin-top: 25px;
}


.sps-program-title {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 15px;
}


.program-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #126de0,
            #0755bd
        );

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    box-shadow:
        0 8px 18px rgba(0, 75, 180, 0.20);
}


.program-title-icon.doktor {
    background:
        linear-gradient(
            135deg,
            #ffc900,
            #f0a900
        );

    color: #064394;
}


.sps-program-title h4 {
    margin: 0;

    color: #064394;

    font-size: 19px;
    font-weight: 700;
}


.sps-program-title span {
    display: block;

    margin-top: 3px;

    color: #7b8797;

    font-size: 12px;
}


/* =========================================
   PROGRAM GRID
========================================= */

.sps-program-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;
}


/* =========================================
   PROGRAM ITEM
========================================= */

.sps-program-item {
    display: flex;
    align-items: center;

    gap: 13px;

    min-height: 70px;

    padding: 12px 15px;

    border: 1px solid #edf1f7;
    border-radius: 15px;

    background: #f8faff;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.sps-program-item:hover {
    transform: translateY(-3px);

    background: #ffffff;

    border-color: #dbe7f7;

    box-shadow:
        0 10px 25px rgba(0, 65, 150, 0.10);
}


/* CODE */

.program-code {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 52px;
    height: 38px;

    padding: 0 8px;

    border-radius: 10px;

    background: #e9f1ff;

    color: #0755bd;

    font-size: 11px;
    font-weight: 800;

    box-sizing: border-box;
}


/* NAME */

.sps-program-item div {
    flex: 1;
}


.sps-program-item strong {
    display: block;

    color: #174b8f;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.35;
}


.sps-program-item small {
    display: block;

    margin-top: 3px;

    color: #8994a4;

    font-size: 11px;
}


/* ARROW */

.program-arrow {
    color: #0755bd;

    font-size: 20px;
    font-weight: 700;

    transition:
        transform 0.25s ease;
}


.sps-program-item:hover .program-arrow {
    transform: translateX(4px);
}


/* =========================================
   DOKTOR
========================================= */

.doktor-section {
    margin-top: 30px;

    padding-top: 25px;

    border-top: 1px solid #e8edf4;
}


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

@media (max-width: 767px) {

    .sps-program-panel {
        padding: 30px 22px;
    }


    .sps-program-header h3 {
        font-size: 26px;
    }


    .sps-program-grid {
        grid-template-columns: 1fr;
    }


    .sps-program-item {
        min-height: 65px;
    }


    .program-code {
        min-width: 48px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2ee11396 *//* =========================================
   LAYANAN AKADEMIK SPs UT
========================================= */

.sps-academic-section {
    width: 100%;

    padding: 75px 25px 90px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f8fd 100%
        );

    box-sizing: border-box;
}


/* =========================================
   HEADER LAYANAN AKADEMIK
========================================= */

.sps-academic-header {
    display: block !important;

    width: 100% !important;
    max-width: 900px;

    margin: 0 auto 42px !important;

    padding: 0 !important;

    text-align: center !important;

    box-sizing: border-box;
}


/* LABEL KECIL */

.sps-academic-label {
    display: block !important;

    width: fit-content !important;

    margin: 0 auto 12px !important;
    padding: 0 !important;

    color: #0755bd;

    font-size: 12px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 2px;

    text-align: center !important;
}


/* JUDUL */

.sps-academic-header h2 {
    display: block !important;

    width: 100% !important;

    position: relative;

    margin: 0 !important;
    padding: 0 !important;

    color: #064394;

    font-size: clamp(36px, 4vw, 48px);

    font-weight: 800;

    line-height: 1.15;

    text-align: center !important;
}


.sps-academic-header h2 span {
    color: #126de0;
}


/* GARIS KUNING */

.sps-academic-header h2::after {
    content: "";

    position: absolute;

    left: 50%;

    bottom: -10px;

    width: 145px;
    height: 7px;

    border-radius: 50%;

    background: #ffc400;

    transform: translateX(-50%) rotate(-3deg);
}


/* DESKRIPSI */

.sps-academic-header p {
    display: block !important;

    width: 100% !important;

    max-width: 780px;

    margin: 25px auto 0 !important;

    color: #69788c;

    font-size: 15px;

    line-height: 1.8;

    text-align: center !important;
}


/* =========================================
   FLOATING OVAL MENU
========================================= */

.sps-academic-tabs {
    position: relative;
    z-index: 10;

    display: flex !important;

    align-items: center;
    justify-content: center;

    gap: 18px;

    width: 100%;

    margin: 0 auto 35px !important;
    padding: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    border: none !important;
}


/* OVAL */

.sps-academic-tab {
    display: flex !important;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-width: 190px;

    height: 58px;

    padding: 0 27px;

    border: 1px solid #e4eaf3 !important;

    border-radius: 50px !important;

    background: #ffffff !important;

    color: #536171 !important;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(25, 65, 120, 0.12) !important;

    box-sizing: border-box;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}


/* ICON */

.sps-academic-tab .tab-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    font-size: 19px;

    line-height: 1;
}


/* HOVER */

.sps-academic-tab:hover {
    transform: translateY(-5px) !important;

    color: #0755bd !important;

    background: #ffffff !important;

    box-shadow:
        0 16px 30px rgba(25, 65, 120, 0.16) !important;
}


/* ACTIVE */

.sps-academic-tab.active {
    background:
        linear-gradient(
            135deg,
            #48a8ff 0%,
            #0755bd 100%
        ) !important;

    border-color: transparent !important;

    color: #ffffff !important;

    box-shadow:
        0 14px 30px rgba(0, 75, 180, 0.28) !important;

    transform: translateY(-3px);
}


/* ACTIVE HOVER */

.sps-academic-tab.active:hover {
    transform: translateY(-6px) !important;

    box-shadow:
        0 18px 35px rgba(0, 75, 180, 0.32) !important;
}


/* =========================================
   CONTENT
========================================= */

.sps-academic-content {
    display: none;

    max-width: 1180px;

    margin: 0 auto;

    padding: 34px 42px 42px;

    border-radius: 0 25px 25px 25px;

    background: #ffffff;

    box-shadow:
        0 15px 40px rgba(25, 65, 120, 0.10);

    box-sizing: border-box;

    animation: academicFade 0.35s ease;
}


.sps-academic-content.active {
    display: block;
}


@keyframes academicFade {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* =========================================
   CONTENT CARD
========================================= */

.sps-academic-content {
    position: relative;
    z-index: 1;

    display: none;

    max-width: 1180px;

    margin: 0 auto !important;

    padding: 38px 42px 42px;

    border-radius: 25px;

    background: #ffffff;

    box-shadow:
        0 18px 45px rgba(25, 65, 120, 0.10);

    box-sizing: border-box;

    animation: academicFade 0.35s ease;
}


.sps-academic-content.active {
    display: block;
}


/* =========================================
   INTRO
========================================= */

.service-intro {
    max-width: 900px;

    margin: 0 auto 30px;

    text-align: center;
}


.service-kicker {
    display: inline-block;

    margin-bottom: 10px;

    color: #ffc400;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}


.service-intro h3 {
    margin: 0 0 12px;

    color: #064394;

    font-size: 27px;

    line-height: 1.3;
}


.service-intro h3 span {
    color: #126de0;
}


.service-intro p {
    margin: 0;

    color: #667589;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   VIDEO AREA
========================================= */

.video-learning-area {
    display: grid;

    grid-template-columns: 340px 1fr;

    gap: 25px;

    align-items: start;
}


/* =========================================
   PLAYLIST
========================================= */

.video-playlist {
    display: flex;

    flex-direction: column;

    gap: 10px;

    max-height: 430px;

    overflow-y: auto;

    padding-right: 6px;
}


.video-playlist::-webkit-scrollbar {
    width: 5px;
}


.video-playlist::-webkit-scrollbar-track {
    background: #f1f4f8;

    border-radius: 10px;
}


.video-playlist::-webkit-scrollbar-thumb {
    background: #c3cfdf;

    border-radius: 10px;
}


.playlist-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 4px 8px;

    border-bottom: 1px solid #edf1f6;
}


.playlist-heading strong {
    color: #064394;

    font-size: 14px;
}


.playlist-heading span {
    padding: 5px 9px;

    border-radius: 20px;

    background: #eef4ff;

    color: #0755bd;

    font-size: 10px;

    font-weight: 700;
}


/* =========================================
   VIDEO ITEM
========================================= */

.video-item {
    display: grid;

    grid-template-columns: 105px 1fr;

    gap: 12px;

    width: 100%;

    padding: 9px;

    border: 1px solid #e9eef5;

    border-radius: 14px;

    background: #f8faff;

    text-align: left;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        all 0.25s ease;
}


.video-item:hover {
    transform: translateX(3px);

    border-color: #c9daf2;

    background: #ffffff;

    box-shadow:
        0 7px 20px rgba(0, 65, 150, 0.08);
}


.video-item.active {
    border-color: #126de0;

    background:
        linear-gradient(
            135deg,
            #eef6ff,
            #ffffff
        );

    box-shadow:
        0 7px 18px rgba(0, 75, 180, 0.10);
}


/* =========================================
   THUMBNAIL
========================================= */

.video-thumbnail {
    position: relative;

    width: 105px;
    height: 67px;

    overflow: hidden;

    border-radius: 9px;
}


.thumbnail-gradient {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            135deg,
            #0755bd,
            #48a8ff
        );
}


.thumbnail-gradient span {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 31px;
    height: 31px;

    border-radius: 50%;

    background: rgba(255,255,255,0.92);

    color: #0755bd;

    font-size: 13px;
}


.video-duration {
    position: absolute;

    right: 5px;
    bottom: 5px;

    padding: 3px 5px;

    border-radius: 4px;

    background: rgba(0,0,0,0.72);

    color: #ffffff;

    font-size: 9px;

    font-weight: 600;
}


/* =========================================
   VIDEO INFO
========================================= */

.video-item-info {
    display: flex;

    flex-direction: column;

    justify-content: center;
}


.video-item-info strong {
    color: #174b8f;

    font-size: 12px;

    line-height: 1.4;
}


.video-item-info small {
    margin-top: 5px;

    color: #8995a5;

    font-size: 10px;
}


/* =========================================
   PLAYER
========================================= */

.video-player-area {
    min-width: 0;
}


.video-player {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #092f70,
            #0755bd
        );

    box-shadow:
        0 15px 35px rgba(0, 55, 130, 0.18);
}


.video-player iframe,
.video-player video {
    display: block;

    width: 100%;
    height: 100%;

    border: none;
}


/* PLACEHOLDER */

.video-placeholder {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;
    height: 100%;

    background:
        radial-gradient(
            circle at center,
            rgba(65,160,255,0.45),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #063b8c,
            #0755bd
        );

    color: #ffffff;
}


.player-play {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 65px;
    height: 65px;

    margin-bottom: 13px;

    border-radius: 50%;

    background: #ffc400;

    color: #064394;

    font-size: 24px;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.18);
}


.video-placeholder span {
    font-size: 12px;

    opacity: 0.85;
}


/* =========================================
   VIDEO INFORMATION
========================================= */

.video-information {
    padding: 15px 3px 0;
}


.video-information h4 {
    margin: 0 0 6px;

    color: #064394;

    font-size: 18px;
}


.video-information p {
    margin: 0;

    color: #718095;

    font-size: 12px;

    line-height: 1.6;
}


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

@media (max-width: 767px) {

    .sps-academic-section {
        padding: 55px 15px 70px;
    }


    .sps-academic-header h2 {
        font-size: 34px;
    }


    .sps-academic-tabs {
        flex-direction: column;

        gap: 12px;

        margin-bottom: 28px !important;
    }


    .sps-academic-tab {
        width: 100%;

        max-width: 300px;

        min-width: 0;

        height: 54px;
    }


    .sps-academic-content,
    .sps-academic-content.active {
        border-radius: 20px;

        padding: 28px 18px;
    }


    .video-learning-area {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .video-playlist {
        order: 2;

        max-height: none;
    }


    .video-player-area {
        order: 1;
    }


    .video-item {
        grid-template-columns: 120px 1fr;
    }


    .video-thumbnail {
        width: 120px;
        height: 75px;
    }


    .service-intro h3 {
        font-size: 23px;
    }

}


@media (min-width: 768px) {

    .sps-academic-tabs {
        flex-direction: row;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9a1bed3 *//* =====================================================
   KEGIATAN AKADEMIK SPs UT
===================================================== */

.sps-news-section {
    width: 100%;

    padding: 75px 20px 80px;

    background:
        radial-gradient(
            circle at 5% 5%,
            rgba(25, 104, 220, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 95% 90%,
            rgba(255, 201, 0, 0.08),
            transparent 25%
        ),
        #f6f9ff;

    box-sizing: border-box;
}


/* =====================================================
   HEADER
===================================================== */

.sps-news-header {
    display: block !important;

    max-width: 850px;

    margin: 0 auto 35px !important;

    text-align: center !important;
}


.sps-news-kicker {
    display: inline-block !important;

    margin-bottom: 12px !important;
    padding: 9px 18px;

    border-radius: 30px;

    background: #edf5ff;

    color: #0755bd;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}


.sps-news-header h2 {
    display: block !important;

    position: relative;

    margin: 0 !important;
    padding: 0 !important;

    color: #064394;

    font-size: clamp(34px, 4vw, 48px);

    font-weight: 800;

    line-height: 1.15;

    text-align: center !important;
}


.sps-news-header h2 span {
    color: #126de0;
}


.sps-news-header h2::after {
    content: "";

    display: block;

    width: 135px;
    height: 6px;

    margin: 9px auto 0;

    border-radius: 50%;

    background: #ffc400;

    transform: rotate(-3deg);
}


.sps-news-header p {
    max-width: 760px;

    margin: 18px auto 0 !important;

    color: #718096;

    font-size: 14px;

    line-height: 1.8;

    text-align: center !important;
}


/* =====================================================
   TAB MENU
===================================================== */

.sps-news-tabs {
    display: flex !important;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin: 0 auto 30px !important;
}


.sps-news-tab {
    display: flex !important;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-width: 150px;

    height: 48px;

    padding: 0 22px;

    border: 1px solid #e1e8f2 !important;

    border-radius: 50px !important;

    background: #ffffff !important;

    color: #586779 !important;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(25, 65, 120, 0.08) !important;

    transition: all .25s ease;
}


.sps-news-tab span {
    font-size: 15px;
}


.sps-news-tab:hover {
    transform: translateY(-3px);

    color: #0755bd !important;

    box-shadow:
        0 12px 25px rgba(25, 65, 120, 0.12) !important;
}


.sps-news-tab.active {
    background:
        linear-gradient(
            135deg,
            #3fa5ff,
            #0755bd
        ) !important;

    border-color: transparent !important;

    color: #ffffff !important;

    box-shadow:
        0 12px 27px rgba(0, 75, 180, 0.25) !important;
}


/* =====================================================
   NEWS BOX
===================================================== */

.sps-news-box {
    position: relative;

    width: 100%;
    max-width: 1180px;

    min-height: 510px;

    margin: 0 auto;

    padding: 30px 38px 25px;

    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 18px 45px rgba(25, 65, 120, 0.10);

    box-sizing: border-box;
}


/* =====================================================
   NEWS GRID
===================================================== */

.sps-news-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    min-height: 390px;
}


/* =====================================================
   NEWS CARD
===================================================== */

.sps-news-card {
    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border: 1px solid #e3eaf3;

    border-radius: 16px;

    background: #ffffff;

    text-decoration: none;

    box-shadow:
        0 6px 18px rgba(25, 65, 120, 0.08);

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


.sps-news-card:hover {
    transform: translateY(-5px);

    border-color: #c8daf2;

    box-shadow:
        0 14px 30px rgba(25, 65, 120, 0.15);
}


/* =====================================================
   IMAGE
===================================================== */

.sps-news-image {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0755bd,
            #49a9ff
        );
}


.sps-news-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}


.sps-news-card:hover .sps-news-image img {
    transform: scale(1.05);
}


/* fallback image */

.sps-news-image.no-image::after {
    content: "SPs UT";

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    color: rgba(255,255,255,.9);

    font-size: 22px;
    font-weight: 800;

    letter-spacing: 2px;
}


/* =====================================================
   DATE BADGE
===================================================== */

.sps-news-date {
    position: absolute;

    left: 12px;
    bottom: 12px;

    padding: 6px 9px;

    border-radius: 8px;

    background: rgba(255,255,255,.94);

    color: #0755bd;

    font-size: 10px;

    font-weight: 700;

    box-shadow:
        0 4px 12px rgba(0,0,0,.12);
}


/* =====================================================
   CARD CONTENT
===================================================== */

.sps-news-content {
    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 17px 18px 18px;
}


.sps-news-category {
    margin-bottom: 7px;

    color: #ffc400;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.sps-news-title {
    display: -webkit-box;

    overflow: hidden;

    margin: 0;

    color: #164b8f;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.45;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


.sps-news-excerpt {
    display: -webkit-box;

    overflow: hidden;

    margin: 9px 0 0;

    color: #7b8797;

    font-size: 11px;

    line-height: 1.6;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* =====================================================
   LOADING
===================================================== */

.sps-news-loading {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    min-height: 390px;

    gap: 12px;

    color: #758398;

    font-size: 12px;
}


.sps-spinner {
    width: 30px;
    height: 30px;

    border: 3px solid #e5edf8;

    border-top-color: #0755bd;

    border-radius: 50%;

    animation:
        spsSpin .8s linear infinite;
}


@keyframes spsSpin {

    to {
        transform: rotate(360deg);
    }

}


/* =====================================================
   EMPTY
===================================================== */

.sps-news-empty {
    display: none;

    min-height: 390px;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    text-align: center;
}


.sps-news-empty .empty-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    margin-bottom: 14px;

    border-radius: 18px;

    background: #eaf3ff;

    color: #0755bd;

    font-size: 24px;
}


.sps-news-empty h3 {
    margin: 0 0 7px;

    color: #164b8f;

    font-size: 21px;
}


.sps-news-empty p {
    max-width: 480px;

    margin: 0;

    color: #7b8797;

    font-size: 12px;

    line-height: 1.7;
}


/* =====================================================
   NAVIGATION
===================================================== */

.sps-news-navigation {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-top: 23px;
}


.sps-news-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 1px solid #dce6f2;

    border-radius: 50%;

    background: #ffffff;

    color: #0755bd;

    font-family: inherit;

    font-size: 21px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 6px 15px rgba(25, 65, 120, 0.08);

    transition: all .25s ease;
}


.sps-news-arrow:hover:not(:disabled) {
    transform: translateY(-3px);

    background: #0755bd;

    border-color: #0755bd;

    color: #ffffff;

    box-shadow:
        0 9px 20px rgba(0, 75, 180, 0.22);
}


.sps-news-arrow:disabled {
    opacity: .35;

    cursor: default;
}


/* =====================================================
   DOTS
===================================================== */

.sps-news-dots {
    display: flex;

    align-items: center;

    gap: 6px;
}


.sps-news-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: #d5dfed;

    cursor: pointer;

    transition: all .25s ease;
}


.sps-news-dot.active {
    width: 20px;

    border-radius: 10px;

    background: #0755bd;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .sps-news-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 600px) {

    .sps-news-section {
        padding: 55px 15px 65px;
    }


    .sps-news-header h2 {
        font-size: 32px;
    }


    .sps-news-tabs {
        gap: 7px;
    }


    .sps-news-tab {
        min-width: 0;

        flex: 1;

        height: 44px;

        padding: 0 12px;

        font-size: 11px;
    }


    .sps-news-box {
        min-height: 0;

        padding: 20px 15px;
    }


    .sps-news-grid {
        grid-template-columns: 1fr;

        min-height: 0;
    }


    .sps-news-card {
        min-height: 0;
    }


    .sps-news-navigation {
        margin-top: 18px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1e1ec02b *//* =====================================================
   DOKUMENTASI SPs
===================================================== */

.sps-documentation {
    width: 100%;
    padding: 75px 20px 85px;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(20,100,220,.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 95% 85%,
            rgba(255,196,0,.09),
            transparent 25%
        ),
        #f6f9ff;

    box-sizing: border-box;
}


/* HEADER */

.sps-doc-header {
    max-width: 850px;
    margin: 0 auto 32px;

    text-align: center;
}


.sps-doc-kicker {
    display: inline-block;

    padding: 9px 18px;

    border-radius: 30px;

    background: #edf5ff;

    color: #0755bd;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}


.sps-doc-header h2 {
    margin: 12px 0 0;

    color: #064394;

    font-size: clamp(35px,4vw,48px);

    font-weight: 800;

    line-height: 1.15;
}


.sps-doc-header h2 span {
    color: #116de0;
}


.sps-doc-header h2::after {
    content: "";

    display: block;

    width: 100px;
    height: 6px;

    margin: 8px auto 0;

    border-radius: 50%;

    background: #ffc400;

    transform: rotate(-3deg);
}


.sps-doc-header p {
    max-width: 750px;

    margin: 17px auto 0;

    color: #718096;

    font-size: 14px;

    line-height: 1.8;
}


/* =====================================================
   TAB
===================================================== */

.sps-doc-tabs {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 12px;

    margin-bottom: 32px;
}


.sps-doc-tab {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-width: 175px;

    height: 48px;

    padding: 0 22px;

    border: 1px solid #e0e8f3;

    border-radius: 50px;

    background: #ffffff;

    color: #536174;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 22px rgba(30,70,120,.08);

    transition: .25s ease;
}


.sps-doc-tab:hover {
    transform: translateY(-3px);

    color: #0755bd;
}


.sps-doc-tab.active {
    background:
        linear-gradient(
            135deg,
            #3ea5ff,
            #0755bd
        );

    border-color: transparent;

    color: #ffffff;

    box-shadow:
        0 12px 28px rgba(0,75,180,.25);
}


/* =====================================================
   PANEL
===================================================== */

.sps-doc-panel {
    display: none;

    max-width: 1180px;

    margin: 0 auto;

    padding: 30px;

    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 18px 45px rgba(30,70,120,.10);
}


.sps-doc-panel.active {
    display: block;
}


/* =====================================================
   VIDEO
===================================================== */

.sps-video-layout {
    display: grid;

    grid-template-columns: 310px 1fr;

    gap: 25px;
}


/* VIDEO LIST */

.sps-video-list {
    min-width: 0;
}


.sps-video-list-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 0 3px 13px;

    border-bottom: 1px solid #e4ebf4;

    color: #0755bd;

    font-size: 13px;
}


.sps-video-list-header span {
    padding: 5px 9px;

    border-radius: 20px;

    background: #edf5ff;

    font-size: 10px;
}


/* VIDEO ITEM */

.sps-video-items {
    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 12px;

    /* BATAS TINGGI */
    height: 420px;

    /* SCROLL HANYA DI AREA INI */
    overflow-y: auto;

    overflow-x: hidden;

    padding-right: 8px;

    box-sizing: border-box;

    scrollbar-width: thin;

    scrollbar-color: #0b63ce #edf3fa;
}


.sps-video-item {
    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    min-height: 76px;

    flex-shrink: 0;

    padding: 8px;

    border: 1px solid #e4ebf4;

    border-radius: 13px;

    background: #f8fbff;

    text-align: left;

    cursor: pointer;

    transition: .25s ease;

    box-sizing: border-box;
}

/* Chrome / Edge / Safari */

.sps-video-items::-webkit-scrollbar {
    width: 6px;
}


.sps-video-items::-webkit-scrollbar-track {
    background: #edf3fa;

    border-radius: 10px;
}


.sps-video-items::-webkit-scrollbar-thumb {
    background: #0b63ce;

    border-radius: 10px;
}


.sps-video-items::-webkit-scrollbar-thumb:hover {
    background: #064a9e;
}

.sps-video-items {
    scrollbar-color: transparent transparent;
}

.sps-video-items:hover {
    scrollbar-color: #0b63ce #edf3fa;
}

.sps-video-items::-webkit-scrollbar-thumb {
    background: transparent;
}

.sps-video-items:hover::-webkit-scrollbar-thumb {
    background: #0b63ce;
}

.sps-video-item:hover {
    transform: translateX(3px);

    border-color: #9fc8f5;
}


.sps-video-item.active {
    border-color: #1680ef;

    background: #f0f7ff;

    box-shadow:
        0 5px 16px rgba(0,80,180,.08);
}


.sps-video-thumb {
    position: relative;

    width: 100px;
    height: 60px;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 8px;

    background: #0755bd;
}


.sps-video-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.play-small {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    font-size: 18px;

    background: rgba(0,60,150,.20);
}


.sps-video-info {
    min-width: 0;
}


.sps-video-info strong {
    display: block;

    overflow: hidden;

    color: #164b8f;

    font-size: 11px;

    line-height: 1.4;

    white-space: normal;
}


.sps-video-info small {
    display: block;

    margin-top: 4px;

    color: #8794a6;

    font-size: 9px;
}


/* MAIN VIDEO */

.sps-main-video {
    min-width: 0;
}


.sps-video-frame {
    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 20px;

    background: #063f91;

    box-shadow:
        0 12px 30px rgba(0,50,120,.18);
}


.sps-video-frame iframe {
    width: 100%;
    height: 100%;

    border: 0;
}


.sps-main-video-title {
    padding: 16px 3px 0;
}


.sps-main-video-title span {
    color: #f1b900;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}


.sps-main-video-title h3 {
    margin: 5px 0 0;

    color: #164b8f;

    font-size: 20px;
}


/* =====================================================
   WORKSHOP
===================================================== */

.sps-workshop-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 20px;
}


.sps-workshop-card {
    overflow: hidden;

    border: 1px solid #e0e8f2;

    border-radius: 18px;

    background: #ffffff;

    text-decoration: none;

    box-shadow:
        0 8px 22px rgba(30,70,120,.08);

    transition: .3s ease;
}


.sps-workshop-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 16px 35px rgba(30,70,120,.14);
}


.sps-workshop-image {
    position: relative;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #0755bd;
}


.sps-workshop-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .4s ease;
}


.sps-workshop-card:hover
.sps-workshop-image img {
    transform: scale(1.06);
}


.sps-workshop-image span {
    position: absolute;

    left: 12px;
    bottom: 12px;

    padding: 6px 9px;

    border-radius: 7px;

    background: rgba(255,255,255,.95);

    color: #0755bd;

    font-size: 10px;

    font-weight: 700;
}


.sps-workshop-content {
    padding: 17px;
}


.sps-workshop-label {
    color: #f1b900;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.sps-workshop-content h3 {
    margin: 7px 0 8px;

    color: #164b8f;

    font-size: 16px;

    line-height: 1.45;
}


.sps-workshop-content p {
    margin: 0;

    color: #7c899b;

    font-size: 11px;

    line-height: 1.6;
}


.sps-read-more {
    margin-top: 15px;

    color: #0755bd;

    font-size: 11px;

    font-weight: 700;
}


.sps-read-more span {
    margin-left: 5px;

    transition: .2s;
}


.sps-workshop-card:hover
.sps-read-more span {
    margin-left: 10px;
}


/* =====================================================
   GALLERY
===================================================== */

.sps-gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    grid-auto-rows: 150px;

    gap: 10px;
}


.sps-gallery-item {
    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 13px;

    background: #e8eef7;
}


.sps-gallery-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}


.sps-gallery-item:nth-child(4) {
    grid-row: span 2;
}


.sps-gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .4s ease;
}


.sps-gallery-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(0,65,150,.55);

    opacity: 0;

    transition: .25s ease;
}


.sps-gallery-overlay span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    border-radius: 50%;

    background: #ffc400;

    color: #0755bd;

    font-size: 25px;

    font-weight: 700;
}


.sps-gallery-item:hover img {
    transform: scale(1.07);
}


.sps-gallery-item:hover
.sps-gallery-overlay {
    opacity: 1;
}


.sps-gallery-note {
    margin-top: 20px;

    text-align: center;

    color: #8a96a7;

    font-size: 11px;
}


/* =====================================================
   PAGINATION
===================================================== */

.sps-doc-pagination {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 25px;
}


.sps-doc-pagination button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border: 1px solid #dce6f2;

    border-radius: 50%;

    background: #ffffff;

    color: #0755bd;

    font-size: 19px;

    cursor: pointer;
}


.sps-doc-pagination span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #d5dfed;
}


.sps-doc-pagination span.active {
    width: 20px;

    border-radius: 10px;

    background: #0755bd;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:900px) {

    .sps-video-layout {
        grid-template-columns: 1fr;
    }


    .sps-video-items {
        display: grid;

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


    .sps-workshop-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .sps-gallery-grid {
        grid-template-columns:
            repeat(3,1fr);
    }

}


@media(max-width:600px) {

    .sps-documentation {
        padding: 55px 15px 65px;
    }


    .sps-doc-header h2 {
        font-size: 32px;
    }


    .sps-doc-tabs {
        gap: 6px;
    }


    .sps-doc-tab {
        min-width: 0;

        flex: 1;

        padding: 0 8px;

        font-size: 10px;
    }


    .sps-doc-panel {
        padding: 18px;

        border-radius: 20px;
    }


    .sps-video-items {
        grid-template-columns: 1fr;
    }


    .sps-workshop-grid {
        grid-template-columns: 1fr;
    }


    .sps-gallery-grid {
        grid-template-columns:
            repeat(2,1fr);

        grid-auto-rows: 120px;
    }


    .sps-gallery-item:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }

}


/* LIGHBOX  */

.sps-lightbox {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 40px;

    background: rgba(3,20,50,.88);

    cursor: zoom-out;
}


.sps-lightbox img {
    max-width: 92vw;
    max-height: 88vh;

    object-fit: contain;

    border-radius: 10px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.4);
}


.sps-lightbox-close {
    position: absolute;

    top: 20px;
    right: 30px;

    color: #ffffff;

    font-size: 40px;

    line-height: 1;

    cursor: pointer;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-00ba5db *//* =====================================================
   TESTIMONI SPs UT
===================================================== */

.sps-testimonial-section {

    width: 100%;

    padding: 80px 20px 90px;

    background:

        radial-gradient(
            circle at 5% 15%,
            rgba(20,100,220,.08),
            transparent 25%
        ),

        radial-gradient(
            circle at 95% 85%,
            rgba(255,196,0,.10),
            transparent 25%
        ),

        #f7faff;

    box-sizing: border-box;
}


/* =====================================================
   HEADER
===================================================== */

.sps-testimonial-header {

    max-width: 800px;

    margin: 0 auto 40px;

    text-align: center;

}


.sps-testimonial-kicker {

    display: inline-block;

    padding: 9px 18px;

    border-radius: 30px;

    background: #edf5ff;

    color: #0755bd;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.sps-testimonial-header h2 {

    margin: 13px 0 0;

    color: #064394;

    font-size:
        clamp(36px, 4vw, 50px);

    font-weight: 800;

    line-height: 1.15;

}


.sps-testimonial-header h2 span {

    color: #126de0;

}


.sps-testimonial-header h2::after {

    content: "";

    display: block;

    width: 105px;

    height: 6px;

    margin: 8px auto 0;

    border-radius: 50%;

    background: #ffc400;

    transform: rotate(-3deg);

}


.sps-testimonial-header p {

    max-width: 650px;

    margin: 17px auto 0;

    color: #748399;

    font-size: 14px;

    line-height: 1.8;

}


/* =====================================================
   MAIN CARD
===================================================== */

.sps-testimonial-wrapper {

    position: relative;

    display: grid;

    grid-template-columns:
        1fr 390px;

    align-items: center;

    gap: 45px;

    max-width: 1100px;

    min-height: 430px;

    margin: 0 auto;

    padding: 55px 60px;

    border-radius: 30px;

    background: #ffffff;

    box-shadow:
        0 20px 55px
        rgba(30,70,120,.10);

    overflow: hidden;

    box-sizing: border-box;

}


/* decorative glow */

.sps-testimonial-wrapper::before {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    left: -120px;

    bottom: -140px;

    border-radius: 50%;

    background: rgba(20,105,220,.07);

}


.sps-testimonial-wrapper::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    right: -110px;

    top: -110px;

    border-radius: 50%;

    background: rgba(255,196,0,.12);

}


/* =====================================================
   TEXT
===================================================== */

.sps-testimonial-content {

    position: relative;

    z-index: 2;

}


.sps-quote-icon {

    color: #ffc400;

    font-family: Georgia, serif;

    font-size: 75px;

    font-weight: 700;

    line-height: .65;

    margin-bottom: 25px;

}


.sps-testimonial-quote {

    max-width: 650px;

    color: #46566b;

    font-size: 20px;

    font-weight: 400;

    line-height: 1.75;

}


.sps-testimonial-line {

    width: 45px;

    height: 4px;

    margin: 25px 0 18px;

    border-radius: 5px;

    background: #126de0;

}


.sps-testimonial-name {

    color: #064394;

    font-size: 19px;

    font-weight: 800;

}


.sps-testimonial-program {

    margin-top: 5px;

    color: #126de0;

    font-size: 13px;

    font-weight: 700;

}


.sps-testimonial-year {

    margin-top: 4px;

    color: #8b97a7;

    font-size: 11px;

}


/* =====================================================
   PHOTO
===================================================== */

.sps-testimonial-photo {

    position: relative;

    z-index: 2;

    height: 360px;

}


.sps-testimonial-photo img {

    position: relative;

    z-index: 2;

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    border-radius: 20px;

    box-shadow:
        0 18px 35px
        rgba(20,60,110,.18);

}


/* yellow decoration */

.sps-photo-decoration {

    position: absolute;

    z-index: 1;

    width: 180px;

    height: 180px;

    right: -25px;

    bottom: -25px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #ffc400,
            #ffe987
        );

}


/* =====================================================
   PHOTO LABEL
===================================================== */

.sps-photo-label {

    position: absolute;

    z-index: 3;

    left: -20px;

    bottom: 20px;

    display: flex;

    flex-direction: column;

    padding: 12px 18px;

    border-radius: 12px;

    background: #ffffff;

    color: #064394;

    font-size: 12px;

    font-weight: 800;

    box-shadow:
        0 8px 22px
        rgba(20,60,110,.15);

}


.sps-photo-label span {

    margin-bottom: 3px;

    color: #ffc400;

    font-size: 8px;

    letter-spacing: 1.5px;

}


/* =====================================================
   NAVIGATION
===================================================== */

.sps-testimonial-navigation {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 28px;

}


.sps-testimonial-navigation button {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border: 1px solid #dce6f2;

    border-radius: 50%;

    background: #ffffff;

    color: #0755bd;

    font-family: inherit;

    font-size: 20px;

    cursor: pointer;

    transition: .25s ease;

}


.sps-testimonial-navigation button:hover {

    background: #0755bd;

    border-color: #0755bd;

    color: #ffffff;

    transform: translateY(-2px);

}


.sps-testimonial-dots {

    display: flex;

    align-items: center;

    gap: 6px;

}


.sps-testimonial-dots span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #d7e1ee;

    transition: .25s ease;

}


.sps-testimonial-dots span.active {

    width: 20px;

    border-radius: 10px;

    background: #0755bd;

}


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

@media(max-width:800px) {

    .sps-testimonial-wrapper {

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 35px 25px 40px;

    }


    .sps-testimonial-photo {

        order: -1;

        width: 230px;

        height: 280px;

        margin: 0 auto;

    }


    .sps-testimonial-quote {

        font-size: 17px;

    }


    .sps-photo-label {

        left: -15px;

    }

}


@media(max-width:500px) {

    .sps-testimonial-section {

        padding: 60px 15px 70px;

    }


    .sps-testimonial-header h2 {

        font-size: 32px;

    }


    .sps-testimonial-wrapper {

        border-radius: 22px;

        padding: 30px 20px 35px;

    }


    .sps-testimonial-photo {

        width: 200px;

        height: 245px;

    }


    .sps-testimonial-quote {

        font-size: 16px;

        line-height: 1.65;

    }

}

#sps-testimonial-quote,
#sps-testimonial-image {

    transition:
        opacity .18s ease;

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5e17acaa */.maksi-section-bg {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden !important;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(45, 105, 220, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 40%,
            rgba(255, 193, 7, 0.10),
            transparent 28%
        ),
        #f5f8ff !important;
}/* End custom CSS */