@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Vend+Sans:ital,wght@0,300..700;1,300..700&display=swap');

 * {
    font-family: "Poppins", sans-serif;
 }
 
 .image{
    position: relative;
 }
.portfolio-container {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
   animation: fadeInBg 1.5s ease;
}

.profile-card.modern-card {
   width: 350px;
   background: #fff;
   border-radius: 24px;
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
   overflow: hidden;
   animation: cardEnter 1s cubic-bezier(.68,-0.55,.27,1.55);
   display: flex;
   flex-direction: column;
   align-items: center;
    margin: 40px auto;

}
.card-header {
   width: 100%;
   background: #3575ec;
   padding: 2.2rem 0 1.2rem 0;
   display: flex;
   justify-content: center;
   border-top-left-radius: 24px;
   border-top-right-radius: 24px;
}
.profile-img-wrapper {
   width: 110px;
   height: 110px;
   border-radius: 50%;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 24px rgba(0,0,0,0.10);
   border: 4px solid #fff;
}
.profile-img {
   width: 100px;
   height: 100px;
   object-fit: cover;
   border-radius: 50%;
   transition: transform 0.4s;
}
.profile-img:hover {
   transform: scale(1.08) rotate(-2deg);
}
.card-body {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 1.2rem 1.5rem 1.5rem 1.5rem;
}
.name {
   font-size: 1.6rem;
   font-weight: 700;
   color: #222;
   margin: 0.7rem 0 0.2rem 0;
   letter-spacing: 1px;
   text-align: center;
}
.profession {
   font-size: 1.1rem;
   color: #3575ec;
   font-weight: 500;
   margin: 0 0 0.7rem 0;
   text-align: center;
}
.description {
   font-size: 0.98rem;
   color: #555;
   margin-bottom: 1.1rem;
   text-align: center;
}
.social-links.center {
   display: flex;
   justify-content: center;
   gap: 1rem;
   margin-bottom: 1.2rem;
}
.social-links.center a {
   font-size: 1.3rem;
   color: #3575ec;
   background: #f5f7fa;
   border-radius: 50%;
   padding: 0.5rem;
   box-shadow: 0 2px 8px rgba(0,0,0,0.08);
   transition: background 0.3s, color 0.3s, transform 0.3s;
}
.social-links.center a:hover {
   background: #3575ec;
   color: #fff;
   transform: scale(1.15);
}
.card-actions {
   display: flex;
   gap: 1rem;
   margin-bottom: 1.2rem;
   justify-content: center;
}
.btn {
   background: #3575ec;
   color: #fff;
   border: none;
   border-radius: 20px;
   padding: 0.6rem 1.5rem;
   font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(53,117,236,0.12);
   transition: background 0.3s, transform 0.3s;
}
.btn:hover {
   background: #285bb5;
   transform: translateY(-2px) scale(1.05);
}
.card-stats {
   display: flex;
   justify-content: space-between;
   width: 100%;
   margin-top: 0.5rem;
   padding: 0 0.5rem;
}
.stat {
   display: flex;
   align-items: center;
   gap: 0.3rem;
   font-size: 1rem;
   color: #555;
   font-weight: 500;
}
.stat i {
   font-size: 1.2rem;
   color: #3575ec;
}

.image {
   flex-shrink: 0;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   overflow: hidden;
   box-shadow: 0 4px 24px rgba(0,0,0,0.12);
   animation: imgPop 1.2s cubic-bezier(.68,-0.55,.27,1.55);
}

.profile-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
   transition: transform 0.4s;
}
.profile-img:hover {
   transform: scale(1.08) rotate(-2deg);
}

.profile-info {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}
.name {
   font-size: 2.2rem;
   font-weight: 700;
   color: #222;
   margin: 0;
   letter-spacing: 1px;
   animation: fadeInText 1.2s 0.2s backwards;
}
.profession {
   font-size: 1.3rem;
   color: #4e54c8;
   font-weight: 500;
   margin: 0;
   animation: fadeInText 1.2s 0.4s backwards;
}
.description {
   font-size: 1rem;
   color: #555;
   margin-bottom: 0.5rem;
   animation: fadeInText 1.2s 0.6s backwards;
}
.skills {
   margin-top: 0.5rem;
}
.skills h3 {
   font-size: 1.1rem;
   color: #222;
   margin-bottom: 0.5rem;
}
.skill-bar {
   display: flex;
   align-items: center;
   margin-bottom: 0.5rem;
   gap: 1rem;
}
.skill-bar span {
   min-width: 100px;
   font-size: 1rem;
   color: #4e54c8;
   font-weight: 500;
}
.bar {
   flex: 1;
   height: 10px;
   background: #e0e0e0;
   border-radius: 5px;
   overflow: hidden;
}
.progress {
   height: 100%;
   background: linear-gradient(90deg, #4e54c8 0%, #8f94fb 100%);
   border-radius: 5px;
   animation: progressGrow 1.2s cubic-bezier(.68,-0.55,.27,1.55);
}
.social-links {
   margin-top: 1.2rem;
   display: flex;
   gap: 1rem;
}
.social-links a {
   font-size: 1.7rem;
   color: #4e54c8;
   background: #f5f7fa;
   border-radius: 50%;
   padding: 0.5rem;
   box-shadow: 0 2px 8px rgba(0,0,0,0.08);
   transition: background 0.3s, color 0.3s, transform 0.3s;
}
.social-links a:hover {
   background: #4e54c8;
   color: #fff;
   transform: scale(1.15);
}

@keyframes fadeInBg {
   from { opacity: 0; }
   to { opacity: 1; }
}
@keyframes cardEnter {
   0% { transform: scale(0.8) translateY(40px); opacity: 0; }
   100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes imgPop {
   0% { transform: scale(0.6); opacity: 0; }
   100% { transform: scale(1); opacity: 1; }
}
@keyframes fadeInText {
   from { opacity: 0; transform: translateY(20px); }
   to { opacity: 1; transform: translateY(0); }
}
@keyframes progressGrow {
   from { width: 0; }
   to { width: var(--progress-width, 100%); }
}