/* Start custom CSS for html, class: .elementor-element-c1d36f2 *//* =========================================
ORGANIZATION SPS UT
========================================= */

.sps-org-section {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 70px 30px 100px;
box-sizing: border-box;
}

/* =========================================
MAIN TITLE
========================================= */

.sps-org-heading {
text-align: center;
margin-bottom: 55px;
}

.sps-org-heading h2 {
margin: 0;
color: #173c78;
font-size: 42px;
font-weight: 800;
line-height: 1.25;
}

.sps-org-heading h2 span {
color: #2f68b1;
position: relative;
display: inline-block;
}

.sps-org-heading h2 span::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
left: 0;
bottom: -10px;
background: #f2d000;
border-radius: 10px;
}

/* =========================================
ORGANIZATION LEVEL
========================================= */

.sps-org-level {
display: flex;
justify-content: center;
align-items: stretch;
gap: 55px;
margin-bottom: 45px;
}

.sps-two-column {
max-width: 850px;
margin-left: auto;
margin-right: auto;
}

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

.sps-section-divider {
text-align: center;
margin: 85px 0 45px;
}

.sps-section-divider h2 {
margin: 0;
color: #173c78;
font-size: 36px;
font-weight: 800;
}

.sps-section-divider span {
color: #2f68b1;
position: relative;
}

.sps-section-divider span::after {
content: "";
position: absolute;
height: 5px;
width: 100%;
left: 0;
bottom: -8px;
background: #f2d000;
border-radius: 20px;
}

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

.sps-org-card {
width: 250px;
min-height: 330px;

padding: 32px 22px 25px;

box-sizing: border-box;

background: #ffffff;

border-radius: 30px;

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

text-align: center;

cursor: pointer;

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

display: flex;
flex-direction: column;
align-items: center;

}

.sps-org-card {
transform: translateY(-10px);

box-shadow:
    0 25px 45px rgba(20, 53, 99, 0.2);

}

/* =========================================
DIRECTOR CARD
========================================= */

.sps-director-card {
width: 365px;
min-height: 390px;
}

.sps-director-card .sps-photo {
width: 185px;
height: 185px;
}

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

.sps-photo {
width: 150px;
height: 150px;

border-radius: 50%;

overflow: hidden;

margin-bottom: 18px;

background: #edf3fa;

flex-shrink: 0;

box-shadow:
    0 8px 20px rgba(20, 53, 99, 0.12);

}

.sps-photo img {
width: 100%;
height: 100%;

object-fit: cover;

display: block;

}

/* =========================================
CARD LINE
========================================= */

.sps-card-line {
width: 100%;
height: 1px;

background: #dce3ea;

margin-bottom: 12px;

}

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

.sps-org-card h3 {
margin: 0 0 8px;

color: #172b4d;

font-size: 17px;

font-weight: 700;

line-height: 1.35;

}

.sps-director-card h3 {
font-size: 21px;
}

.sps-org-card p {
margin: 0;

color: #748091;

font-size: 12px;

line-height: 1.6;

min-height: 40px;

}

/* =========================================
CARD ACTION
========================================= */

.sps-card-actions {
margin-top: auto;

padding-top: 18px;

}

.sps-info-text {
display: inline-flex;

align-items: center;

justify-content: center;

padding: 7px 14px;

border-radius: 20px;

background: #edf3fa;

color: #2f68b1;

font-size: 10px;

font-weight: 700;

letter-spacing: 0.3px;

transition: all 0.3s ease;

}

.sps-org-card .sps-info-text {
background: #2f68b1;
color: #ffffff;
}

/* =========================================
MAGISTER GRID
========================================= */

.sps-magister-grid {
display: grid;

grid-template-columns:
    repeat(6, minmax(170px, 1fr));

gap: 28px;

align-items: stretch;

}

/* Magister cards sedikit lebih compact */

.sps-magister-grid .sps-org-card {
width: 100%;
min-height: 315px;

padding: 25px 15px 20px;

border-radius: 28px;

}

.sps-magister-grid .sps-photo {
width: 115px;
height: 115px;
}

.sps-magister-grid .sps-org-card h3 {
font-size: 15px;
}

.sps-magister-grid .sps-org-card p {
font-size: 10px;
}

/* =========================================
MODAL OVERLAY
========================================= */

.sps-profile-modal {
position: fixed;

inset: 0;

width: 100%;
height: 100%;

display: none;

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

padding: 25px;

box-sizing: border-box;

background: rgba(8, 18, 35, 0.78);

backdrop-filter: blur(7px);

z-index: 999999;

}

.sps-profile-modal.active {
display: flex;
}

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

.sps-profile-modal-content {
width: 100%;
max-width: 900px;

position: relative;

background: #ffffff;

border-radius: 25px;

padding: 42px;

box-sizing: border-box;

box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.35);

animation: spsModalShow 0.35s ease;

}

@keyframes spsModalShow {

from {
    opacity: 0;
    transform: translateY(25px) scale(0.97);
}

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

}

/* =========================================
MODAL CLOSE
========================================= */

.sps-modal-close {
position: absolute;

top: 18px;
right: 22px;

width: 42px;
height: 42px;

border: none;

background: transparent;

color: #64748b;

font-size: 34px;

cursor: pointer;

transition: all 0.25s ease;

}

.sps-modal-close {
color: #173c78;

transform: rotate(90deg);

}

/* =========================================
MODAL GRID
========================================= */

.sps-modal-grid {
display: grid;

grid-template-columns: 290px 1fr;

gap: 45px;

align-items: center;

}

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

.sps-modal-photo {
width: 100%;
aspect-ratio: 1 / 1;

border-radius: 18px;

overflow: hidden;

background: #edf3fa;

}

.sps-modal-photo img {
width: 100%;
height: 100%;

object-fit: cover;

}

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

.sps-modal-info h2 {
margin: 0 0 8px;

color: #172b4d;

font-size: 28px;

line-height: 1.3;

}

.sps-modal-position {
color: #2f68b1;

font-size: 15px;

font-weight: 600;

line-height: 1.5;

margin-bottom: 25px;

}

.sps-modal-info p {
color: #4b5b70;

font-size: 16px;

line-height: 1.8;

margin: 0 0 25px;

}

/* =========================================
EMAIL
========================================= */

.sps-modal-email {
border-top: 1px solid #e1e7ee;

padding-top: 20px;

display: flex;

flex-wrap: wrap;

gap: 12px;

}

.sps-modal-email strong {
color: #172b4d;
}

.sps-modal-email a {
color: #2f68b1;

text-decoration: none;

font-weight: 600;

}

.sps-modal-email a {
text-decoration: underline;
}

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

@media (max-width: 1100px) {

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

}

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

@media (max-width: 800px) {

.sps-org-heading h2 {
    font-size: 32px;
}

.sps-section-divider h2 {
    font-size: 28px;
}

.sps-org-level {
    gap: 25px;
}

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

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

.sps-modal-photo {
    max-width: 300px;
    margin: 0 auto;
}

}

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

@media (max-width: 600px) {

.sps-org-section {
    padding: 50px 18px 70px;
}

.sps-org-heading {
    margin-bottom: 40px;
}

.sps-org-heading h2 {
    font-size: 28px;
}

.sps-section-divider {
    margin: 60px 0 30px;
}

.sps-section-divider h2 {
    font-size: 25px;
}

.sps-org-level {
    flex-direction: column;

    align-items: center;
}

.sps-org-card,
.sps-director-card {
    width: 100%;
    max-width: 360px;
}

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

    gap: 16px;
}

.sps-magister-grid .sps-org-card {
    min-height: 300px;
}

.sps-magister-grid .sps-photo {
    width: 95px;
    height: 95px;
}

.sps-magister-grid .sps-org-card h3 {
    font-size: 13px;
}

.sps-modal-content {
    padding: 25px;
}

.sps-profile-modal-content {
    padding: 35px 22px 28px;
}

.sps-modal-info h2 {
    font-size: 23px;
}

}

/* ================================
POPUP ACTIONS
================================ */

.sps-popup-contact {
margin-top: 18px;
}

.sps-popup-email {
display: flex;
align-items: center;
gap: 12px;

padding: 14px 0;

border-top: 1px solid #e5e7eb;

}

.sps-popup-email strong {
font-size: 14px;
color: #334155;
}

.sps-popup-email a {
color: #315b8f;
font-size: 14px;
font-weight: 600;
text-decoration: none;
}

.sps-popup-email a {
color: #1e3f6e;
}

/* GOOGLE SCHOLAR BUTTON */

.sps-popup-actions {
margin-top: 14px;
}

.sps-popup-scholar {
width: 100%;

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

padding: 13px 18px;

background: linear-gradient(
    135deg,
    #244b78,
    #356b9f
);

color: #ffffff !important;

border-radius: 10px;

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

text-decoration: none;

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

box-shadow:
    0 6px 16px rgba(36, 75, 120, 0.2);

}

.sps-popup-scholar svg {
width: 19px;
height: 19px;

fill: currentColor;

}

.sps-popup-scholar .sps-popup-arrow {
width: 18px;
height: 18px;

fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;

transition: transform 0.25s ease;

}

.sps-popup-scholar {
background: linear-gradient(
135deg,
#1d3d64,
#285783
);

transform: translateY(-2px);

box-shadow:
    0 10px 22px rgba(36, 75, 120, 0.28);

}

.sps-popup-scholar .sps-popup-arrow {
transform: translateX(4px);
}/* End custom CSS */