/* ===========================
   RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#11131b;

    color:#fff;

    overflow-x:hidden;

}

/* ===========================
   BACKGROUND
=========================== */

.background{

    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:-2;

    background:
    radial-gradient(circle at 15% 15%, rgba(78,58,255,.22), transparent 32%),
    radial-gradient(circle at 85% 20%, rgba(85,62,255,.12), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.03), transparent 55%),
    linear-gradient(180deg,#0a0c12,#11151d);

}

.background::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(255,255,255,.015) 1px,
        transparent 1px

    ),

    linear-gradient(

        90deg,

        rgba(255,255,255,.015) 1px,
        transparent 1px

    );

    background-size:40px 40px;

    opacity:.25;

}

/* ===========================
   WRAPPER
=========================== */

.wrapper{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

}

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

.card{

    width:760px;

    max-width:100%;

    background:

    linear-gradient(
        180deg,
        rgba(28,31,40,.96),
        rgba(20,22,30,.98)
    );

    border:1px solid rgba(255,255,255,.06);

    border-radius:28px;

    padding:38px;

    backdrop-filter:blur(18px);

    box-shadow:

        0 30px 90px rgba(0,0,0,.55),

        inset 0 1px rgba(255,255,255,.05);

}

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

.profile{

    display:flex;

    align-items:center;

    gap:24px;

    margin-bottom:30px;

}

.avatar{

    width:116px;
    height:116px;

    border-radius:50%;

    object-fit:cover;

    padding:5px;

    background:

    linear-gradient(
        135deg,
        #6f65ff,
        #4e7cff
    );

    box-shadow:

        0 15px 35px rgba(78,92,255,.35);

}

.profile-info{

    flex:1;

}

.profile-info h1{

    font-size:40px;

    line-height:1.15;

    font-weight:700;

    letter-spacing:-1px;

    margin-bottom:10px;

}

.designation{

    color:#a4adb8;

    font-size:18px;

    letter-spacing:.2px;

}

.designation span{

    font-style:italic;

}

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

.about{

    font-size:18px;

    color:#b7c0ca;

    line-height:1.9;

    margin:28px 0;

}

.about a{

    color:#67a5ff;

    font-weight:600;

}

.about a:hover{

    text-decoration:underline;

}

/* ===========================
   TABS
=========================== */

.tabs{

    display:grid;

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

    gap:10px;

    margin-bottom:26px;

}

.tabs button{

    height:56px;

    background:#252b35;

    border:none;

    border-radius:15px;

    color:#9ea8b3;

    font-weight:600;

    transition:.25s;

    cursor:pointer;

}

.tabs button:hover{

    background:#313842;

    color:#fff;

}

.tabs button.active{

    background:#3d4452;

    color:white;

    box-shadow:

    inset 0 1px rgba(255,255,255,.08);

}

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

.links{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.links a{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:72px;

    padding:0 24px;

    border-radius:18px;

    background:

    linear-gradient(
        180deg,
        #2a3039,
        #232831
    );

    border:1px solid rgba(255,255,255,.05);

    text-decoration:none;

    color:white;

    transition:.25s;

}

.links a:hover{

    transform:translateY(-3px);

    border-color:rgba(100,130,255,.35);

    background:

    linear-gradient(
        180deg,
        #313844,
        #282e37
    );

}

.links span{

    font-size:18px;

}

.links i{

    transition:.25s;

}

.links a:hover i{

    transform:translateX(5px);

}

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

.social{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:34px;

}

.social a{

    width:54px;

    height:54px;

    border-radius:50%;

    background:#242a33;

    color:#d6d6d6;

    transition:.3s;

}

.social a:hover{

    background:#4c63ff;

    color:white;

    transform:translateY(-5px);

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:768px){

.profile{

    flex-direction:column;

    text-align:center;

}

.profile-info h1{

    font-size:30px;

}

.designation{

    font-size:17px;

}

.about{

    text-align:center;

    font-size:17px;

}

.tabs{

    grid-template-columns:1fr 1fr;

}

.links span{

    font-size:16px;

}

}

@media(max-width:500px){

.card{

    padding:22px;

}

.tabs{

    grid-template-columns:1fr;

}

.links a{

    padding:18px;

}

.links{

    gap:10px;

}

.social{

    gap:12px;

}

.social a{

    width:46px;

    height:46px;

}

.profile-info h1{

    font-size:26px;

}

}

/* ===========================
Premium Hover Effects
=========================== */

.links a{

    position:relative;

    overflow:hidden;

}

.links a::before{

    content:"";

    position:absolute;

    left:var(--x);

    top:var(--y);

    width:0;

    height:0;

    border-radius:50%;

    transform:translate(-50%,-50%);

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

    transition:.45s;

}

.links a:hover::before{

    width:500px;

    height:500px;

}

.links a span,
.links a i{

    position:relative;

    z-index:2;

}

.card{

    transition:.5s;

}

.card:hover{

    transform:translateY(-3px);

    box-shadow:

        0 35px 70px rgba(0,0,0,.55);

}