/* ======================
   HERO
====================== */
.hero{

    max-width:600px;

    margin:40px auto 80px;

    padding:30px 25px;

    text-align:center;

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

    backdrop-filter:blur(12px);

    border-radius:32px;

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

}

/* ======================
   IMAGE WRAP
====================== */
.hero-img-wrap{

    display:inline-block;

    padding:8px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #667eea,
    #764ba2
    );

    box-shadow:
    0 15px 40px rgba(102,126,234,.25);

}

/* ======================
   IMAGE
====================== */
.hero-img{

    width:210px;

    height:210px;

    border-radius:50%;

    object-fit:cover;

    display:block;

    border:5px solid #fff;

}

/* ======================
   NAME
====================== */
.name{

    font-size:38px;

    font-weight:800;

    color:#e65100;

    margin:18px 0 8px;

    letter-spacing:-0.5px;

}

/* ======================
   DEGREE
====================== */
.degree{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:
    rgba(30,136,229,.12);

    color:#1e88e5;

    font-size:15px;

    font-style:italic;

    margin-bottom:18px;

}

/* ======================
   DESCRIPTION
====================== */
.desc{

    font-size:17px;

    color:#444;

    line-height:1.8;

    max-width:350px;

    margin:0 auto;

}

/* ======================
   BUTTON
====================== */
.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:280px;

    margin-top:25px;

    padding:16px 36px;

    border-radius:60px;

    background:
    linear-gradient(
    135deg,
    #ff512f,
    #dd2476
    );

    color:#fff;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    letter-spacing:.3px;

    transition:.35s ease;

    box-shadow:
    0 12px 30px rgba(221,36,118,.30);

    animation:
    heroBtnPulse 2.5s infinite;

}

/* HOVER */
.btn:hover{

    transform:
    translateY(-3px)
    scale(1.03);

    box-shadow:
    0 18px 40px rgba(221,36,118,.40);

}

/* ANIMATION */
@keyframes heroBtnPulse{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

}

/* ======================
   MOBILE
====================== */
@media(max-width:480px){

    .hero{

        padding:35px 20px;

        margin:30px auto 70px;

    }

    .hero-img{

        width:190px;
        height:190px;

    }

    .name{

        font-size:34px;

    }

    .degree{

        font-size:14px;

    }

    .desc{

        font-size:15px;

        line-height:1.7;

    }

}