/*
|--------------------------------------------------------------------------
| GURU DETAIL
|--------------------------------------------------------------------------
*/

.guru-detail-page{

    padding:60px 0;

}

/*==============================================================
BACK
==============================================================*/

.guru-back{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:35px;

    text-decoration:none;

    color:var(--primary);

    font-weight:600;

    transition:.3s;

}

.guru-back:hover{

    color:var(--secondary);

}

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

.guru-profile{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:55px;

    align-items:center;

    background:#fff;

    padding:45px;

    border-radius:24px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

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

.guru-profile-photo{

    width:100%;

}

.guru-profile-photo img{

    width:100%;

    aspect-ratio:3/4;

    display:block;

    object-fit:cover;

    object-position:center top;

    border-radius:24px;

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

}

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

.guru-profile-content h1{

    margin:0;

    color:var(--primary);

    font-size:52px;

    line-height:1.1;

    font-weight:700;

}

.guru-role{

    margin:18px 0 30px;

    font-size:22px;

    color:#666;

}

/*==============================================================
BADGES
==============================================================*/

.guru-badges{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

    margin-bottom:35px;

}

.guru-badges span{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    font-size:15px;

}

/*==============================================================
ABOUT
==============================================================*/

.guru-about h3{

    margin-bottom:15px;

    font-size:34px;

    color:#222;

}

.guru-about p{

    line-height:1.9;

    color:#666;

}

/*==============================================================
SANTRI
==============================================================*/

.guru-students{

    margin-top:70px;

}

.guru-students h2{

    margin-bottom:25px;

    color:var(--primary);

    font-size:34px;

}

.guru-student-list{

    display:flex;

    gap:28px;

    flex-wrap:wrap;

}

.guru-student{

    width:120px;

    text-align:center;

    text-decoration:none;

    color:#222;

}

.guru-student img{

    width:95px;

    height:95px;

    object-fit:cover;

    border-radius:50%;

    display:block;

    margin:auto;

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

    transition:.3s;

}

.guru-student:hover img{

    transform:scale(1.08);

}

.guru-student div{

    margin-top:10px;

    font-weight:600;

    font-size:15px;

}

.guru-student-more{

    width:95px;

    height:95px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    font-weight:700;

    transition:.3s;

}

.guru-student-more:hover{

    transform:scale(1.05);

    background:var(--secondary);

}

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

@media(max-width:992px){

.guru-profile{

grid-template-columns:260px 1fr;

gap:35px;

padding:35px;

}

.guru-profile-content h1{

font-size:42px;

}

.guru-role{

font-size:20px;

}

}

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

@media(max-width:768px){

.guru-detail-page{

padding:35px 0;

}

.guru-profile{

grid-template-columns:1fr;

text-align:center;

padding:25px;

gap:30px;

}

.guru-profile-photo{

max-width:260px;

margin:auto;

}

.guru-profile-content h1{

font-size:34px;

}

.guru-role{

font-size:18px;

margin:12px 0 20px;

}

.guru-badges{

justify-content:center;

}

.guru-about{

text-align:left;

}

.guru-about h3{

font-size:28px;

}

.guru-student-list{

justify-content:center;

}

}