/* ==========================================================
   HireMyIndia AI Candidate Profile UI
   Premium Profile Styling V1
========================================================== */


.ai-profile-header {
    background: linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );
    color: #ffffff;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 15px 35px rgba(37,99,235,.25);
}


.ai-profile-header h2 {
    font-weight: 700;
    margin-bottom: 8px;
}


.ai-profile-header .headline {
    font-size: 16px;
    opacity: .95;
}


.ai-profile-header .location {
    font-size: 14px;
    margin-top: 8px;
}



.ai-confidence-badge {

    background: rgba(255,255,255,.15);
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 14px;

}



/* Cards */

.ai-profile-card {

    background:#ffffff;
    border-radius:18px;
    padding:22px;
    margin-bottom:22px;
    box-shadow:
        0 8px 25px rgba(0,0,0,.06);

    transition:.3s;

}


.ai-profile-card:hover {

    transform:translateY(-3px);

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

}



.ai-profile-card h4 {

    font-weight:700;
    margin-bottom:18px;

}




/* Skills */


.skill-cloud {

    display:flex;
    flex-wrap:wrap;
    gap:10px;

}



.skill-tag {

    background:#eff6ff;
    color:#2563eb;
    padding:8px 16px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;

}



/* Timeline Final Layout */

.experience-timeline {
    position: relative;
    padding-left: 55px;
}


.experience-timeline:before {

    content:"";
    position:absolute;

    left:22px;
    top:0;
    bottom:0;

    width:3px;

    background:#2563eb;
    border-radius:20px;

}


.experience-item {

    position:relative;
    margin-bottom:28px;

}


.experience-item:before {

    content:"";

    position:absolute;

    left:-42px;
    top:28px;

    width:16px;
    height:16px;

    background:#ffffff;

    border:4px solid #2563eb;

    border-radius:50%;

    z-index:2;

}


.experience-card {

    background:#ffffff;
    border-radius:16px;
    padding:22px;

    border:1px solid #eef2ff;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}


.experience-company {

    font-size:17px;
    font-weight:700;
    color:#111827;

}


.experience-role {

    color:#2563eb;
    font-weight:600;

    margin-top:6px;

}


.experience-duration {

    display:inline-flex;

    margin-top:12px;

    padding:6px 12px;

    background:#eff6ff;

    color:#2563eb;

    border-radius:20px;

    font-size:13px;

}


.experience-description {

    margin-top:12px;

    color:#6b7280;

}



/* Experience Timeline V2 */


.experience-card {

    background:#ffffff;
    border-radius:16px;
    padding:22px;
    border:1px solid #eef2ff;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
    transition:.3s;

}


.experience-card:hover {

    transform:translateY(-3px);

}



.experience-company {

    font-size:18px;
    font-weight:700;
    color:#111827;

}



.experience-role {

    color:#2563eb;
    font-weight:600;
    margin-top:6px;

}



.experience-duration {

    display:inline-block;

    margin-top:10px;

    background:#eff6ff;

    color:#2563eb;

    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

}



.experience-description {

    margin-top:15px;

    color:#64748b;

    line-height:1.7;

}



.ai-parsed-badge {

    display:inline-block;

    background:#ecfeff;

    color:#0891b2;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}


/* Premium Experience Timeline Enhancement */

.experience-timeline {

    position:relative;

}


.experience-timeline {

    border-left:3px solid transparent;

    border-image:linear-gradient(
        to bottom,
        #2563eb,
        #60a5fa
    ) 1;

}


.experience-item {

    margin-bottom:35px;

}


.experience-item:before {

    width:18px;
    height:18px;

    left:-36px;
    top:22px;

    background:#ffffff;

    border:5px solid #2563eb;

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


}


.experience-card {

    border-radius:18px;

    padding:24px;

    background:#ffffff;

    border:1px solid #e5e7eb;

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

    transition:.3s ease;

}


.experience-card:hover {

    transform:translateY(-4px);

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

}


.experience-company {

    font-size:18px;

    font-weight:700;

    letter-spacing:.2px;

}


.experience-role {

    font-size:14px;

    margin-top:8px;

}


.experience-duration {

    margin-top:12px;

}




/* Experience Timeline Card Alignment Fix */

.experience-item {

    margin-left:0 !important;

}


.experience-card {

    margin-left:0 !important;

    width:100%;

}


.experience-timeline {

    padding-left:55px !important;

}






/* FINAL EXPERIENCE TIMELINE ALIGNMENT */

.experience-timeline {

    position:relative;

    padding-left:60px;

}



.experience-timeline:before {

    content:"";

    position:absolute;

    left:30px;

    top:20px;

    bottom:20px;

    width:3px;

    background:#2563eb;

    border-radius:20px;

}



.experience-item {

    position:relative;

    margin-bottom:25px;

}



.experience-item:before {

    content:"";

    position:absolute;

    left:-38px;

    top:30px;

    width:14px;

    height:14px;

    background:#ffffff;

    border:4px solid #2563eb;

    border-radius:50%;

    z-index:5;

}



.experience-card {

    width:100%;

    margin-left:0;

    background:#ffffff;

    border-radius:16px;

    padding:22px;

    border:1px solid #eef2ff;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}




/* ===== FINAL PREMIUM EXPERIENCE TIMELINE ===== */


.experience-timeline {

    position: relative;
    padding-left: 70px;

}


/* Main vertical professional line */

.experience-timeline:before {

    content:"";

    position:absolute;

    left:35px;

    top:20px;

    bottom:20px;

    width:3px;

    background:linear-gradient(
        to bottom,
        #2563eb,
        #60a5fa
    );

    border-radius:20px;

}



/* Experience item */

.experience-item {

    position:relative;

    margin-bottom:35px;

}



/* Timeline circle */

.experience-item:before {

    content:"";

    position:absolute;


    left:-45px;

    top:50%;

    transform:translateY(-50%);


    width:18px;

    height:18px;


    background:#ffffff;


    border:4px solid #2563eb;


    border-radius:50%;


    z-index:10;


    box-shadow:
    0 0 0 5px rgba(37,99,235,0.15);

}



/* Same size cards */

.experience-card {

    width:100%;

    min-height:120px;

    padding:24px;


    background:#ffffff;

    border-radius:16px;


    border:1px solid #eef2ff;


    box-shadow:
    0 10px 25px rgba(0,0,0,.06);


}



/* Company */

.experience-company {

    font-size:18px;

    font-weight:700;

    color:#111827;

}



/* Role */

.experience-role {

    margin-top:6px;

    color:#2563eb;

    font-weight:600;

}



/* Duration */

.experience-duration {

    margin-top:12px;

}







/* ===== EXPERIENCE TIMELINE PREMIUM FINAL ===== */


.experience-timeline {

    position:relative;

    padding-left:55px;

}


/* single professional vertical line */

.experience-timeline:before {

    content:"";

    position:absolute;

    left:20px;

    top:35px;

    bottom:35px;

    width:3px;

    background:#2563eb;

    border-radius:20px;

}



/* timeline item */

.experience-item {

    position:relative;

    margin-bottom:35px;

}



/* centered circle */

.experience-item:before {

    content:"";

    position:absolute;

    left:-44px;

    top:50%;

    transform:translateY(-50%);

    width:18px;

    height:18px;

    background:#ffffff;

    border:4px solid #2563eb;

    border-radius:50%;

    z-index:10;

    box-shadow:
    0 0 0 5px rgba(37,99,235,0.15);

}



/* same card alignment */

.experience-card {

    width:100% !important;

    margin-left:0 !important;

    min-height:120px;

    padding:24px;

    background:#ffffff;

    border-radius:16px;

    border:1px solid #eef2ff;

    box-shadow:
    0 10px 25px rgba(0,0,0,.06);

}


.experience-company {

    font-size:18px;

    font-weight:700;

    color:#111827;

}


.experience-role {

    margin-top:6px;

    color:#2563eb;

    font-weight:600;

}


.experience-duration {

    margin-top:12px;

}




/* FINAL EXPERIENCE TIMELINE SINGLE LINE DESIGN */

.experience-timeline {
    position: relative;
    padding-left: 55px;
}


/* Remove extra blank vertical line */
.experience-timeline:before {
    display:none !important;
}


/* Single timeline line */
.experience-timeline:after {

    content:"";
    position:absolute;

    left:20px;
    top:35px;
    bottom:35px;

    width:3px;

    background:#2563eb;
    border-radius:20px;

}


/* Experience item alignment */

.experience-item {

    position:relative;
    margin-bottom:28px;

}


/* Timeline circles */

.experience-item:before {

    content:"";

    position:absolute;

    left:-44px;
    top:50%;

    transform:translateY(-50%);

    width:14px;
    height:14px;

    background:#ffffff;

    border:4px solid #2563eb;

    border-radius:50%;

    z-index:5;

}


/* Same size cards */

.experience-card {

    width:100% !important;

    margin-left:0 !important;

    border-radius:16px;

    padding:22px;

}





/* FINAL EXPERIENCE TIMELINE ONLY ONE LINE */

.experience-timeline {
    position:relative;
    padding-left:55px;
}


/* main timeline line */

.experience-timeline:after {

    content:"";

    position:absolute;

    left:22px;

    top:35px;

    bottom:35px;

    width:3px;

    background:#2563eb;

    border-radius:20px;

}


/* company points */

.experience-item:before {

    content:"";

    position:absolute;

    left:-41px;

    top:50%;

    transform:translateY(-50%);

    width:14px;

    height:14px;

    background:#fff;

    border:4px solid #2563eb;

    border-radius:50%;

    z-index:10;

}




/* REMOVE EXTRA EXPERIENCE TIMELINE FREE LINE */

.experience-timeline {
    border-left: none !important;
}


/* remove old timeline pseudo line */

.experience-timeline:before {
    display:none !important;
    content:none !important;
}


/* keep only circle markers */

.experience-item:before {
    z-index:20 !important;
}


/* single center timeline */

.experience-timeline:after {

    content:"" !important;

    position:absolute !important;

    left:22px !important;

    top:35px !important;

    bottom:35px !important;

    width:3px !important;

    display:block !important;

    background:#2563eb !important;

    border-radius:20px !important;

}




/* ===== FINAL EXPERIENCE TIMELINE CENTER ALIGNMENT ===== */


/* remove old extra timeline lines */
.experience-timeline:before,
.experience-timeline:after {
    display:none !important;
}


/* timeline wrapper */
.experience-timeline {

    position:relative !important;
    padding-left:60px !important;

}


/* single vertical line only */

.experience-timeline {

    position:relative !important;

}


.experience-timeline::after {

    content:"" !important;

    position:absolute !important;

    left:22px !important;

    top:20px !important;

    bottom:20px !important;

    width:3px !important;

    background:#2563eb !important;

    border-radius:20px !important;

}


/* each experience item */

.experience-item {

    position:relative !important;

    margin-bottom:28px !important;

}



/* circle exactly center of line */

.experience-item::before {

    content:"" !important;

    position:absolute !important;

    left:-38px !important;

    top:50% !important;

    transform:translateY(-50%) !important;

    width:14px !important;

    height:14px !important;

    background:#ffffff !important;

    border:4px solid #2563eb !important;

    border-radius:50% !important;

    z-index:10 !important;

}


/* same size cards */

.experience-card {

    width:100% !important;

    margin-left:0 !important;

    padding:22px 24px !important;

    border-radius:16px !important;

    background:#ffffff !important;

    border:1px solid #eef2ff !important;

    box-shadow:0 8px 20px rgba(0,0,0,.05) !important;

}




/* ===== EXPERIENCE TIMELINE FINAL CENTER LINE THROUGH CIRCLES ===== */


/* single center line */

.experience-timeline::after {

    content:"";

    position:absolute;

    left:22px;

    top:20px;

    bottom:20px;

    width:3px;

    background:#2563eb;

    border-radius:20px;

    z-index:1;

}


/* remove any other line */

.experience-timeline::before {

    display:none !important;

}



/* timeline items */

.experience-item {

    position:relative;

}



/* circle exactly over line center */

.experience-item::before {

    content:"";

    position:absolute;

    left:-45px;

    top:50%;

    transform:translateY(-50%);

    width:14px;

    height:14px;

    background:#ffffff;

    border:4px solid #2563eb;

    border-radius:50%;

    z-index:5;

    box-sizing:border-box;

}




/* ===== EXPERIENCE TIMELINE TRUE CENTER LINE ===== */


/* timeline container */

.experience-timeline {

    position:relative !important;

    padding-left:70px !important;

}



/* ONE SINGLE VERTICAL LINE */

.experience-timeline::before {

    content:"" !important;

    display:block !important;

    position:absolute !important;

    left:25px !important;

    top:15px !important;

    bottom:15px !important;

    width:3px !important;

    background:#2563eb !important;

    border-radius:20px !important;

    z-index:1 !important;

}


/* disable duplicate line */

.experience-timeline::after {

    display:none !important;

}



/* each company item */

.experience-item {

    position:relative !important;

    margin-bottom:30px !important;

}



/* circle exactly on line center */

.experience-item::before {

    content:"" !important;

    position:absolute !important;

    left:-52px !important;

    top:50% !important;

    transform:translateY(-50%) !important;

    width:16px !important;

    height:16px !important;

    background:#ffffff !important;

    border:4px solid #2563eb !important;

    border-radius:50% !important;

    z-index:5 !important;

}


/* card alignment */

.experience-card {

    margin-left:0 !important;

    width:100% !important;

}