/* =====================================================
   SHQELA PUBLIC FREELANCER PROFILE
===================================================== */


.shqela-public-profile {

    max-width:1200px;
    margin:40px auto;
    padding:20px;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

}





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


.shqela-profile-hero {

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #1e40af
    );

    border-radius:30px;

    padding:45px;

    display:flex;

    align-items:center;

    gap:35px;

    color:white;

    position:relative;

    overflow:hidden;

}



.shqela-profile-hero:after {

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    right:-80px;

    top:-80px;

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

    border-radius:50%;

}





.shqela-profile-avatar {

    position:relative;

    z-index:2;

}



.shqela-profile-avatar img {


    width:180px;

    height:180px;

    border-radius:50%;

    object-fit:cover;

    border:

    8px solid white;

    box-shadow:

    0 15px 35px rgba(0,0,0,.25);

}





.shqela-profile-info {

    position:relative;

    z-index:2;

}





.shqela-profile-info h1 {


    font-size:42px;

    font-weight:900;

    margin:0;

    display:flex;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}





.shqela-profile-role {


    margin-top:12px;

    font-size:20px;

    opacity:.9;

}







/* VERIFIED BADGE */


.shqela-verified-badge {


    background:#22c55e;

    color:white;

    padding:7px 16px;

    border-radius:30px;

    font-size:14px;

    font-weight:800;

}









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


.shqela-profile-content {


    margin-top:35px;

    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:25px;

}





.shqela-profile-box {


    background:white;

    border-radius:25px;

    padding:32px;

    border:

    1px solid #e5e7eb;


    box-shadow:

    0 12px 35px rgba(0,0,0,.06);


    transition:.3s;

}





.shqela-profile-box:hover {


    transform:translateY(-4px);


}







.shqela-profile-box h3 {


    font-size:22px;

    font-weight:900;

    color:#111827;

    margin-bottom:20px;

}








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


.shqela-profile-skills {


    display:flex;

    flex-wrap:wrap;

    gap:12px;

}





.shqela-profile-skills span {


    background:#dbeafe;

    color:#1d4ed8;

    padding:

    10px 18px;


    border-radius:50px;


    font-weight:700;

    font-size:14px;

}









/* =====================================================
   ACTION BUTTONS
===================================================== */


.shqela-profile-actions {


    display:flex;

    gap:15px;

    flex-wrap:wrap;

}





.shqela-profile-button {


    background:#2563eb;

    color:white!important;

    padding:

    15px 25px;


    border-radius:15px;


    font-weight:800;

    text-decoration:none;


    transition:.3s;

}





.shqela-profile-button:hover {


    transform:translateY(-2px);

    background:#1d4ed8;

}





.shqela-profile-button.secondary {


    background:#111827;

}







/* MESSAGE BUTTON */


.shqela-contact-button {


    display:block;

    margin-top:20px;

    background:#16a34a;

    color:white!important;


    padding:17px;


    text-align:center;


    border-radius:16px;


    font-weight:900;


    text-decoration:none;


}









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


@media(max-width:768px){


.shqela-profile-hero {


    flex-direction:column;

    text-align:center;

    padding:35px 20px;

}




.shqela-profile-info h1 {


    font-size:30px;

    justify-content:center;


}





.shqela-profile-content {


    grid-template-columns:1fr;


}




.shqela-profile-actions {


    flex-direction:column;


}




.shqela-profile-button {


    width:100%;

}



}