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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');


/* single student css */
.dpps-container{

max-width:1400px;

margin:40px auto;

display:grid;

grid-template-columns:minmax(0,2fr) 380px;

gap:30px;

align-items:start;

padding:0 20px;

}

.dpps-main{

display:flex;

flex-direction:column;

gap:25px;

min-width:0;

}

.dpps-right{

position:sticky;

top:25px;

display:flex;

flex-direction:column;

gap:25px;

align-self:start;

}

.dpps-sidebar-card{

background:#fff;

border:1px solid #e5e7eb;

border-radius:18px;

padding:24px;

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

}
@media(max-width:992px){

.dpps-container{

grid-template-columns:1fr;

}

.dpps-right{

position:static;

}

}
/* education.php */

/*=========================================
EDUCATION
=========================================*/

.dpps-education-list{

display:flex;

flex-direction:column;

gap:22px;

}

.dpps-education-item{

display:flex;

align-items:flex-start;

gap:18px;

padding-bottom:22px;

border-bottom:1px solid #edf2f7;

}

.dpps-education-item:last-child{

border:none;

padding-bottom:0;

}

.dpps-education-icon{

width:52px;

height:52px;

border-radius:14px;

background:#eef4ff;

color:#2563eb;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

flex-shrink:0;

}

.dpps-education-content{

flex:1;

}

.dpps-education-content h4{

font-size:18px;

font-weight:700;

color:#111827;

margin-bottom:6px;

}

.dpps-education-content p{

font-size:15px;

color:#667085;

margin-bottom:8px;

}

.dpps-education-content span{

display:inline-block;

padding:6px 12px;

border-radius:30px;

background:#f4f6fb;

font-size:13px;

font-weight:600;

color:#344054;

}
.dpps-similar-gridd {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    margin-top: 25px;
}
/*=========================================
SIMILAR STUDENTS
=========================================*/

.dpps-similar-grid{

display:grid;

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

gap:20px;

margin-top:25px;

}

.dpps-similar-card{

background:#fff;

border:1px solid #e5e7eb;

border-radius:18px;

padding:20px;

transition:.3s;

}

.dpps-similar-card:hover{

transform:translateY(-4px);

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

}

.dpps-similar-top{

display:flex;

align-items:center;

gap:15px;

margin-bottom:15px;

}

.dpps-similar-avatar{

width:60px;

height:60px;

border-radius:50%;

overflow:hidden;

flex-shrink:0;

}

.dpps-similar-avatar img{

width:100%;

height:100%;

object-fit:cover;

}

.dpps-similar-top h4{

font-size:18px;

font-weight:700;

margin:0;

color:#111827;

}

.dpps-similar-top p{

margin-top:4px;

font-size:14px;

color:#6b7280;

}

.dpps-similar-meta{

display:flex;

gap:18px;

font-size:14px;

margin-bottom:15px;

color:#6b7280;

}

.dpps-similar-meta span{

display:flex;

align-items:center;

gap:6px;

}

.dpps-similar-skills{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-bottom:20px;

}

.dpps-similar-skills span{

padding:6px 12px;

background:#f3f4f6;

border-radius:30px;

font-size:13px;

font-weight:600;

}

@media(max-width:768px){

.dpps-similar-grid{

grid-template-columns:1fr;

}

}
/*=========================================
DIGITAL PLACEMENT PORTAL
SINGLE STUDENT PROFILE
PART 1
=========================================*/

.dpps-layout{

max-width:1400px;

margin:40px auto;

padding:0 15px;

display:grid;

grid-template-columns:minmax(0,1fr) 340px;

gap:28px;

align-items:start;

}

.dpps-left{

display:flex;

flex-direction:column;

gap:24px;

min-width:0;

}

.dpps-right{

position:sticky;

top:90px;

display:flex;

flex-direction:column;

gap:22px;

}

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

.dpps-card{

background:#fff;

border:1px solid #e6ebf3;

border-radius:20px;

overflow:hidden;

box-shadow:0 8px 25px rgba(16,24,40,.05);

}

.dpps-body{

padding:28px;

}

/*=========================================
HERO
=========================================*/

.dpps-hero{

background:#fff;

border-radius:20px;

overflow:hidden;

border:1px solid #e7edf5;

box-shadow:0 8px 25px rgba(16,24,40,.05);

}

/* Cover */

.dpps-cover{

height:220px;

background:linear-gradient(135deg,#2563eb,#3b82f6,#60a5fa);

position:relative;

}

.dpps-cover:before{

content:"";

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

background:

radial-gradient(circle at 20% 30%,rgba(255,255,255,.18),transparent 25%),

radial-gradient(circle at 85% 20%,rgba(255,255,255,.15),transparent 30%),

radial-gradient(circle at 60% 85%,rgba(255,255,255,.10),transparent 25%);

}

/*=========================================
PROFILE AREA
=========================================*/

.dpps-profile{

display:flex;

justify-content:space-between;

gap:30px;

padding:0 35px 35px;

margin-top:-70px;

position:relative;

z-index:5;

}

.dpps-profile-left{

display:flex;

gap:22px;

align-items:flex-end;

flex:1;

}

.dpps-avatar{

width:150px;

height:150px;

border-radius:24px;

overflow:hidden;

border:6px solid #fff;

background:#fff;

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

position:relative;

flex-shrink:0;

}

.dpps-avatar img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.dpps-online{

width:18px;

height:18px;

border-radius:50%;

background:#22c55e;

border:3px solid #fff;

position:absolute;

right:10px;

bottom:10px;

}

/*=========================================
NAME
=========================================*/

.dpps-info{

padding-top:75px;

flex:1;

}

.dpps-name{

font-size:34px;

font-weight:700;

line-height:1.2;

color:#101828;

margin:0;

}

.dpps-designation{

font-size:17px;

font-weight:500;

color:#667085;

margin-top:8px;

}

.dpps-meta{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-top:18px;

}

.dpps-meta span{

display:flex;

align-items:center;

gap:8px;

font-size:14px;

font-weight:500;

color:#667085;

}

.dpps-meta i{

color:#98a2b3;

width:18px;

text-align:center;

}

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

.dpps-badges{

display:flex;

gap:10px;

flex-wrap:wrap;

margin-top:18px;

}

.dpps-badge{

padding:7px 14px;

border-radius:999px;

font-size:12px;

font-weight:600;

}

.dpps-badge-blue{

background:#eef4ff;

color:#2563eb;

border:1px solid #cfe0ff;

}

.dpps-badge-yellow{

background:#fff7e8;

color:#b76a00;

border:1px solid #ffd596;

}

/*=========================================
RIGHT ACTIONS
=========================================*/

.dpps-actions{

display:flex;

flex-direction:column;

gap:12px;

width:230px;

padding-top:85px;

}

.dpps-btn{

height:48px;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

border-radius:12px;

font-size:14px;

font-weight:600;

text-decoration:none;

transition:.25s;

}

.dpps-btn-primary{

background:#2563eb;

color:#fff;

border:1px solid #2563eb;

}

.dpps-btn-primary:hover{

background:#1d4ed8;

}

.dpps-btn-light{

background:#f4f6fb;

color:#344054;

border:1px solid #e5e7eb;

}

.dpps-btn-light:hover{

background:#edf2f7;

}

.dpps-btn-outline{

background:#fff;

border:1px solid #d0d5dd;

color:#344054;

}

.dpps-btn-outline:hover{

background:#f8fafc;

}

/*=========================================
SIDEBAR
=========================================*/

.dpps-sidebar-card{

background:#fff;

border:1px solid #e6ebf3;

border-radius:18px;

padding:24px;

box-shadow:0 8px 25px rgba(16,24,40,.05);

}

.dpps-sidebar-card h3{

font-size:18px;

font-weight:700;

margin-bottom:20px;

color:#111827;

}

.dpps-sidebar-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:14px 0;

border-bottom:1px solid #eef2f7;

}

.dpps-sidebar-item:last-child{

border:none;

padding-bottom:0;

}

.dpps-sidebar-item small{

display:block;

font-size:11px;

font-weight:700;

letter-spacing:.4px;

text-transform:uppercase;

color:#98a2b3;

margin-bottom:6px;

}

.dpps-sidebar-item strong{

font-size:15px;

font-weight:700;

color:#111827;

}
/*=========================================
ABOUT SECTION
=========================================*/

.dpps-section-title{

font-size:24px;

font-weight:700;

color:#111827;

margin-bottom:22px;

}

.dpps-about{

font-size:15px;

line-height:1.9;

color:#475467;

}

.dpps-about p{

margin-bottom:16px;

}

.dpps-about strong{

color:#111827;

font-weight:600;

}

/*=========================================
INFO GRID
=========================================*/

.dpps-info-grid{

display:grid;

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

gap:18px;

margin-top:25px;

}

.dpps-info-box{

background:#f8fafc;

border:1px solid #e5e7eb;

border-radius:14px;

padding:18px;

transition:.25s;

}

.dpps-info-box:hover{

transform:translateY(-2px);

box-shadow:0 10px 24px rgba(0,0,0,.05);

}

.dpps-info-box small{

display:block;

font-size:11px;

font-weight:700;

letter-spacing:.6px;

text-transform:uppercase;

color:#98a2b3;

margin-bottom:10px;

}

.dpps-info-box strong{

display:block;

font-size:16px;

font-weight:700;

color:#111827;

}

/*=========================================
SKILLS
=========================================*/

.dpps-skills{

display:flex;

flex-wrap:wrap;

gap:12px;

}

.dpps-skill{

padding:10px 16px;

border-radius:999px;

background:#f4f6fb;

border:1px solid #e4e7ec;

font-size:14px;

font-weight:500;

color:#344054;

transition:.25s;

}

.dpps-skill:hover{

background:#2563eb;

color:#fff;

border-color:#2563eb;

}

/*=========================================
PROJECTS
=========================================*/

.dpps-projects{

display:grid;

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

gap:20px;

margin-top:20px;

}

.dpps-project{

border:1px solid #e5e7eb;

border-radius:18px;

padding:22px;

background:#fff;

transition:.3s;

}

.dpps-project:hover{

transform:translateY(-4px);

box-shadow:0 16px 32px rgba(0,0,0,.08);

}

.dpps-project h4{

font-size:18px;

font-weight:700;

margin-bottom:12px;

color:#111827;

}

.dpps-project p{

font-size:14px;

line-height:1.8;

color:#667085;

margin-bottom:18px;

}

.dpps-project-footer{

display:flex;

justify-content:space-between;

align-items:center;

}

.dpps-project-tag{

background:#eef4ff;

color:#2563eb;

padding:7px 12px;

border-radius:999px;

font-size:12px;

font-weight:600;

}

.dpps-project-link{

color:#2563eb;

font-size:14px;

font-weight:600;

text-decoration:none;

}

.dpps-project-link:hover{

text-decoration:underline;

}

/*=========================================
CERTIFICATES
=========================================*/

.dpps-cert-grid{

display:grid;

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

gap:18px;

}

.dpps-cert{

display:flex;

gap:16px;

align-items:flex-start;

padding:20px;

border:1px solid #e5e7eb;

border-radius:16px;

background:#fff;

transition:.25s;

}

.dpps-cert:hover{

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

}

.dpps-cert-icon{

width:52px;

height:52px;

border-radius:14px;

background:#eef4ff;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

color:#2563eb;

flex-shrink:0;

}

.dpps-cert h4{

font-size:16px;

font-weight:700;

color:#111827;

margin-bottom:6px;

}

.dpps-cert p{

font-size:14px;

color:#667085;

line-height:1.6;

}

.dpps-cert small{

display:block;

margin-top:8px;

font-size:12px;

color:#98a2b3;

}

/*=========================================
EDUCATION
=========================================*/

.dpps-timeline{

position:relative;

padding-left:32px;

margin-top:10px;

}

.dpps-timeline:before{

content:"";

position:absolute;

left:8px;

top:0;

bottom:0;

width:2px;

background:#dbe4f0;

}

.dpps-timeline-item{

position:relative;

padding-bottom:28px;

}

.dpps-timeline-item:last-child{

padding-bottom:0;

}

.dpps-timeline-item:before{

content:"";

position:absolute;

left:-30px;

top:4px;

width:16px;

height:16px;

border-radius:50%;

background:#2563eb;

border:4px solid #fff;

box-shadow:0 0 0 2px #2563eb;

}

.dpps-timeline-item h4{

font-size:17px;

font-weight:700;

color:#111827;

margin-bottom:6px;

}

.dpps-timeline-item strong{

display:block;

font-size:14px;

color:#2563eb;

margin-bottom:6px;

}

.dpps-timeline-item p{

font-size:14px;

line-height:1.8;

color:#667085;

}

.dpps-timeline-item small{

display:block;

margin-top:8px;

font-size:13px;

color:#98a2b3;

}
/*=========================================
READY SCORE
=========================================*/

.dpps-score-box{

text-align:center;

}

.dpps-score-circle{

width:130px;

height:130px;

margin:0 auto 18px;

border-radius:50%;

background:conic-gradient(#2563eb 0deg,#2563eb 280deg,#edf2f7 280deg);

display:flex;

align-items:center;

justify-content:center;

position:relative;

}

.dpps-score-circle:before{

content:"";

position:absolute;

width:92px;

height:92px;

background:#fff;

border-radius:50%;

}

.dpps-score-number{

position:relative;

font-size:30px;

font-weight:700;

color:#111827;

z-index:2;

}

.dpps-score-label{

font-size:15px;

font-weight:600;

color:#667085;

margin-top:10px;

}

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

.dpps-contact-card{

display:flex;

flex-direction:column;

gap:12px;

}

.dpps-contact-btn{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

height:48px;

border-radius:12px;

font-size:14px;

font-weight:600;

text-decoration:none;

transition:.25s;

}

.dpps-contact-btn.primary{

background:#2563eb;

color:#fff;

}

.dpps-contact-btn.primary:hover{

background:#1d4ed8;

}

.dpps-contact-btn.outline{

border:1px solid #d0d5dd;

background:#fff;

color:#344054;

}

.dpps-contact-btn.outline:hover{

background:#f8fafc;

}

/*=========================================
SIMILAR STUDENTS
=========================================*/

.dpps-similar{

display:flex;

flex-direction:column;

gap:18px;

}

.dpps-similar-item{

display:flex;

gap:14px;

align-items:center;

padding-bottom:18px;

border-bottom:1px solid #edf2f7;

}

.dpps-similar-item:last-child{

border:none;

padding-bottom:0;

}

.dpps-similar-photo{

width:58px;

height:58px;

border-radius:14px;

overflow:hidden;

flex-shrink:0;

}

.dpps-similar-photo img{

width:100%;

height:100%;

object-fit:cover;

}

.dpps-similar-info{

flex:1;

}

.dpps-similar-info h5{

font-size:15px;

font-weight:700;

color:#111827;

margin-bottom:4px;

}

.dpps-similar-info p{

font-size:13px;

color:#667085;

margin-bottom:8px;

}

.dpps-similar-info a{

font-size:13px;

font-weight:600;

color:#2563eb;

text-decoration:none;

}

.dpps-similar-info a:hover{

text-decoration:underline;

}

/*=========================================
SOCIAL LINKS
=========================================*/

.dpps-social{

display:flex;

gap:12px;

margin-top:20px;

}

.dpps-social a{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:12px;

background:#f4f6fb;

color:#344054;

font-size:18px;

transition:.25s;

text-decoration:none;

}

.dpps-social a:hover{

background:#2563eb;

color:#fff;

}

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

.dpps-empty{

padding:60px 30px;

text-align:center;

background:#fff;

border-radius:20px;

border:1px solid #e5e7eb;

color:#667085;

font-size:16px;

}

/*=========================================
SECTION SPACING
=========================================*/

.dpps-card+.dpps-card{

margin-top:24px;

}

/*=========================================
HOVER EFFECT
=========================================*/

.dpps-card{

transition:.3s;

}

.dpps-card:hover{

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

}

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

@media(max-width:1100px){

.dpps-layout{

grid-template-columns:1fr;

}

.dpps-right{

position:static;

}

.dpps-projects{

grid-template-columns:1fr;

}

.dpps-cert-grid{

grid-template-columns:1fr;

}

}

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

@media(max-width:768px){

.dpps-profile{

flex-direction:column;

padding:0 20px 25px;

}

.dpps-profile-left{

flex-direction:column;

align-items:center;

text-align:center;

}

.dpps-avatar{

width:120px;

height:120px;

}

.dpps-info{

padding-top:10px;

}

.dpps-name{

font-size:28px;

}

.dpps-meta{

justify-content:center;

}

.dpps-badges{

justify-content:center;

}

.dpps-actions{

width:100%;

padding-top:0;

}

.dpps-info-grid{

grid-template-columns:1fr;

}

.dpps-body{

padding:22px;

}

}

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

@media(max-width:480px){

.dpps-layout{

padding:0 10px;

}

.dpps-cover{

height:150px;

}

.dpps-avatar{

width:100px;

height:100px;

}

.dpps-name{

font-size:24px;

}

.dpps-section-title{

font-size:20px;

}

.dpps-meta{

flex-direction:column;

align-items:flex-start;

gap:8px;

}

.dpps-project{

padding:18px;

}

.dpps-cert{

padding:16px;

}

.dpps-sidebar-card{

padding:18px;

}

.dpps-btn{

font-size:13px;

height:44px;

}

}

/* append */
/*=========================================
SKILL PROGRESS
=========================================*/

.dpps-skill-progress-wrap{

margin-top:35px;

display:flex;

flex-direction:column;

gap:18px;

}

.dpps-progress-item{

display:flex;

flex-direction:column;

gap:8px;

}

.dpps-progress-head{

display:flex;

justify-content:space-between;

align-items:center;

font-size:14px;

font-weight:600;

color:#111827;

}

.dpps-progress{

height:10px;

background:#edf2f7;

border-radius:999px;

overflow:hidden;

}

.dpps-progress span{

display:block;

height:100%;

background:linear-gradient(90deg,#2563eb,#60a5fa);

border-radius:999px;

}
/* end single student css */
.dpp-home-students{

margin:60px auto;

}
.hero__content h1 {
    font-size: 65px;
    text-transform: capitalize;
    font-weight: 600;
}
.dpp-hero{

padding:20px 20px;
box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
background:#fff;
text-align:center;
color:#fff;
border-radius:18px;
margin-bottom:60px;

}

.dpp-hero h1{

font-size:48px;

font-weight:700;

margin-bottom:15px;

}

.dpp-hero p{

font-size:18px;

margin-bottom:35px;

opacity:.9;

}

.dpp-hero form{

display:flex;

gap:15px;

justify-content:center;

flex-wrap:wrap;

}

.dpp-hero input{

width:40%;

height:55px;

padding:0 18px;

border:none;

border-radius:12px;

font-size:15px;

}

.dpp-hero button{

height:55px;

padding:0 35px;

background:#111827;

color:#fff;

border:none;

border-radius:12px;

cursor:pointer;

font-weight:600;

}
.dpp-home-job-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

@media(max-width:991px){

.dpp-home-job-grid{
    grid-template-columns:1fr;
}

}
.dpp-home-section{

margin:70px 0;

}

.dpp-home-section h2{

font-size:34px;

font-weight:700;

margin-bottom:25px;

}
.dpp-home-title{

text-align:center;

margin-bottom:35px;

}

.dpp-home-title h2{

font-size:34px;

font-weight:700;

margin-bottom:8px;

color:#111827;

}

.dpp-home-title p{

font-size:16px;

color:#6b7280;

}

.dpp-home-students-grid{

display:grid;

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

gap:25px;

}

.dpp-view-all{

margin-top:35px;

text-align:center;

}

.dpp-view-all a{

display:inline-block;

padding:14px 28px;

background:#2563eb;

color:#fff;

border-radius:12px;

font-weight:600;

text-decoration:none;

transition:.3s;

}

.dpp-view-all a:hover{

background:#1d4ed8;

}

@media(max-width:991px){

.dpp-home-students-grid{

grid-template-columns:1fr;

}

}
.dpp-home-students-grid
{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;
margin:30px auto;

}

@media(max-width:991px){

.dpp-home-students-grid{

grid-template-columns:1fr;

}

}
.candidate-card{
    width:100%;
    background:#fff;
    border:1px solid #e8edf5;
    border-radius:18px;
    padding:18px;
    margin-bottom:20px;
    box-shadow:0 10px 25px rgba(16,24,40,.05);
    transition:.3s;
}

.candidate-card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 35px rgba(16,24,40,.10);
}

/*========================*/

.card-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.profile{
    display:flex;
    gap:14px;
    flex:1;
}

.profile-img{
    width:64px;
    height:64px;
    border-radius:16px;
    overflow:hidden;
    position:relative;
    flex-shrink:0;
}

.profile-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.online{
    position:absolute;
    right:2px;
    bottom:2px;
    width:14px;
    height:14px;
    background:#22c55e;
    border:3px solid #fff;
    border-radius:50%;
}

/*========================*/

.profile-info{
    flex:1;
}

.name-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.name-row h3{
    margin:0;
    font-size:22px;
    line-height:1.2;
    color:#1d2939;
    font-weight:700;
}

.designation{
    margin-top:6px;
    color:#667085;
    font-size:15px;
    font-weight:500;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.certified{
    background:#eaf3ff;
    color:#246bff;
    border:1px solid #c8dcff;
}

.unpaid{
    background:#fff5e7;
    color:#b56d00;
    border:1px solid #ffd58d;
}

/*========================*/

.meta{
    display:flex;
    gap:16px;
    margin-top:12px;
}

.meta span{
    display:flex;
    align-items:center;
    gap:6px;
    color:#667085;
    font-size:13px;
    font-weight:500;
}

.meta i{
    color:#98a2b3;
}

/*========================*/

.rating-box{
    min-width:110px;
    text-align:right;
}

.rating{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:5px;
    font-size:18px;
    color:#f59e0b;
}

.rating strong{
    color:#1d2939;
    font-size:18px;
}

.rating-box small{
    display:block;
    margin-top:5px;
    font-size:12px;
    color:#667085;
}

/*========================*/

.skills{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:18px 0;
}

.skills span{
    padding:8px 14px;
    border-radius:999px;
    background:#f4f6fa;
    border:1px solid #e4e7ec;
    color:#344054;
    font-size:13px;
    font-weight:500;
}

/*========================*/

.info-box{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    padding:18px;
    border-radius:14px;
    border:1px solid #e4e7ec;
    background:#f8f9fc;
}

.item small{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:8px;
    color:#98a2b3;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.item strong{
    font-size:15px;
    color:#1d2939;
    font-weight:700;
}

/*========================*/

.card-actions{
    display:flex;
    gap:12px;
    margin-top:20px;
}

.btn{
    flex:1;
    height:46px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    text-decoration:none;
    border-radius:12px;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

.btn-outline{
    background:#fff;
    border:1px solid #d0d5dd;
    color:#344054;
}

.btn-outline:hover{
    background:#f5f7fb;
}

.btn-light{
    background:#eef2f7;
    color:#344054;
    border:1px solid #e4e7ec;
}

.btn-light:hover{
    background:#dfe6ef;
}

.btn-primary{
    background:#2563eb;
    border:1px solid #2563eb;
    color:#fff;
}

.btn-primary:hover{
    background:#1d4ed8;
}

/*========================*/

@media(max-width:991px){

.card-top{
    flex-direction:column;
}

.rating-box{
    text-align:left;
}

.rating{
    justify-content:flex-start;
}

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

.card-actions{
    flex-wrap:wrap;
}

.btn{
    flex:calc(50% - 6px);
}

}

@media(max-width:600px){

.profile{
    flex-direction:row;
}

.name-row h3{
    font-size:20px;
}

.meta{
    flex-direction:row;
    gap:10px;
}



.btn{
    flex:100%;
}

}

/*==========================================
PART 2
==========================================*/

/* Card Animation */

.candidate-card{
    position:relative;
    overflow:hidden;
}

.candidate-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:100%;

    background:#2563eb;

    opacity:0;

    transition:.3s;

}

.candidate-card:hover::before{

    opacity:1;

}

/*========================*/

.profile-img{

    background:#f3f4f6;

    border:1px solid #e5e7eb;

}

.profile-img img{

    display:block;

}

/*========================*/

.badge i{

    font-size:12px;

}

.certified{

    box-shadow:0 2px 8px rgba(37,99,235,.08);

}

.unpaid{

    box-shadow:0 2px 8px rgba(245,158,11,.08);

}

/*========================*/

.meta span{

    white-space:nowrap;

}

.meta span i{

    width:16px;

    text-align:center;

}

/*========================*/

.skills span{

    transition:.25s;

    cursor:default;

}

.skills span:hover{

    background:#2563eb;

    border-color:#2563eb;

    color:#fff;

}

/*========================*/

.info-box{

    transition:.25s;

}

.info-box:hover{

    border-color:#d0d5dd;

}

/*========================*/

.item{

    display:flex;

    flex-direction:column;

}

.item strong{

    line-height:1.4;

    word-break:break-word;

}

/*========================*/

.card-actions .btn{

    cursor:pointer;

}

.card-actions .btn i{

    font-size:15px;

}

.card-actions .btn-primary i{

    transition:.3s;

}

.card-actions .btn-primary:hover i{

    transform:translateX(4px);

}

.card-actions .btn-outline:hover{

    border-color:#2563eb;

    color:#2563eb;

}

.card-actions .btn-light:hover{

    color:#111827;

}

.card-actions .btn-primary{

    box-shadow:0 10px 25px rgba(37,99,235,.15);

}

.card-actions .btn-primary:hover{

    box-shadow:0 15px 30px rgba(37,99,235,.25);

}

/*========================*/

.rating{

    user-select:none;

}

.rating i{

    font-size:16px;

}

/*========================*/

.online{

    animation:dppPulse 2s infinite;

}

@keyframes dppPulse{

    0%{

        box-shadow:0 0 0 0 rgba(34,197,94,.7);

    }

    70%{

        box-shadow:0 0 0 10px rgba(34,197,94,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(34,197,94,0);

    }

}

/*========================*/

@media(max-width:768px){

    .candidate-card{

        padding:15px;

    }

    .profile-img{

        width:58px;

        height:58px;

    }
    
.dpp-hero input{

width:100%;

height:55px;

padding:0 18px;

border:none;

border-radius:12px;

font-size:15px;

}
    .designation{

        font-size:14px;

    }

    .skills{

        gap:8px;

    }

    .skills span{

        font-size:12px;

        padding:7px 12px;

    }

}

/*========================*/

@media(max-width:480px){

    .candidate-card{

        border-radius:14px;

    }

    .name-row{

        flex-direction:column;

        align-items:flex-start;

    }

    .badge{

        margin-top:4px;

    }

    .card-actions{

                display: grid;
        grid-template-columns: 1fr 1fr;

    }

    .card-actions .btn{

        width:100%;

    }

}

/*==========================================
PLUGIN COMPATIBILITY
==========================================*/

.dpp-student-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.dpp-student-card{

    background:none;

    border:none;

    box-shadow:none;

    padding:0;

}

.dpp-student-card .candidate-card{

    margin:0;

}