/* ===========================================================
   PORTFOLIO WEBSITE
   Author : Sharayu Dangare
   Version : 1.0
=========================================================== */


/* ===========================
        GOOGLE FONTS
=========================== */

:root{

    /* Colors */

    --primary-bg:#0F172A;
    --secondary-bg:#111827;

    --card-bg:#1E293B;

    --primary-color:#7C3AED;

    --primary-hover:#8B5CF6;

    --white:#F8FAFC;

    --gray:#CBD5E1;

    --border:#334155;

}


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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    background:var(--primary-bg);

    color:var(--white);

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

    overflow-x:hidden;

}


/* ===========================
        TYPOGRAPHY
=========================== */

h1,h2,h3,h4,h5,h6{

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

    font-weight:600;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

img{

    max-width:100%;

    display:block;

}


/* ===========================
        REUSABLE
=========================== */

.section-padding{

    padding:70px 0;

}

.container{

    max-width:1200px;

}

.section-title{

    text-align:center;

    font-size:2.5rem;

    margin-bottom:15px;

}

.section-subtitle{

    text-align:center;

    color:var(--gray);

    max-width:700px;

    margin:auto;

    margin-bottom:60px;

}

/* ===========================================================
                        NAVBAR
=========================================================== */

.custom-navbar{
    background:rgba(15,23,42,0.85);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(255,255,255,0.05);

    transition:0.3s ease;
    padding:14px 0;
}

.logo{

    font-family:'Poppins',sans-serif;
    font-size:2rem;
    font-weight:700;

    color:var(--white)!important;

}

.logo span{

    color:var(--primary-color);

}

.navbar-nav{

    gap:18px;

}

.nav-link{

    color:var(--gray)!important;

    font-weight:500;

    position:relative;

    transition:.3s;

}

.nav-link:hover{

    color:var(--white)!important;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0%;

    height:2px;

    background:var(--primary-color);

    transition:.35s;

}

.nav-link:hover::after,
.nav-link.active::after{

    width:100%;

}

.navbar-toggler{

    border:none;

}

.navbar-toggler:focus{

    box-shadow:none;

}

.navbar-toggler-icon{

    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28124,58,237,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}

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

.hero{

    min-height:95vh;

    display:flex;
    align-items:center;

    position:relative;
    overflow:hidden;

    padding-top:100px;

}

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

.hero-content{

    padding-right:45px;

}

.hero-greeting{

    font-size:1.8rem;
    color:var(--white);

}

.hero-content h1{

    font-size:3.7rem;
    font-weight:700;

    line-height:1.1;

    margin:15px 0;

    /*white-space:nowrap;  (if want to keep it on one line; if font size is 3.8rem)*/

}

.hero-content h1 span{

    color:var(--primary-color);

}

.hero-content h2{

    font-size:2rem;

    margin-bottom:8px;

}

.hero-content h3{

    font-size:1.45rem;

    font-weight:500;

    color:var(--gray);

    margin-bottom:28px;

}

.hero-description{

    max-width:620px;

    font-size:1.1rem;

    line-height:2;

    color:var(--gray);

}


@media (max-width:768px){

.hero h1{

    font-size:2.5rem;

    line-height:1.2;

    word-break:break-word;

}

}


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

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:35px;

}

.btn-primary-custom{

    background:var(--primary-color);

    color:#fff;

    padding:14px 28px;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.btn-primary-custom:hover{

    background:var(--primary-hover);

    color:#fff;

    transform:translateY(-4px);

}

.btn-outline-custom{

    border:2px solid var(--primary-color);

    color:#fff;

    padding:14px 28px;

    border-radius:10px;

    transition:.3s;

}

.btn-outline-custom:hover{

    background:var(--primary-color);

    color:#fff;

    transform:translateY(-4px);

}

/* ===========================================================
                        TECH STACK
=========================================================== */

.tech-stack{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:45px;

}

.tech-stack span{

    display:flex;

    align-items:center;

    gap:10px;

    background:#182338;

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

    padding:12px 20px;

    border-radius:30px;

    color:var(--white);

    transition:.35s;

    cursor:default;

    font-weight:500;

}

.tech-stack i{

    font-size:1.25rem;

    color:var(--primary-color);

    transition:.35s;

}

.tech-stack span:hover{

    transform:translateY(-5px);

    border-color:var(--primary-color);

    box-shadow:0 10px 25px rgba(124,58,237,.18);

}

.tech-stack span:hover i{

    transform:scale(1.15);

}

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

.hero-image{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding-left:25px;

    margin-top:70px;

}

.hero-image img{

    width:100%;

    max-width:620px;

    height:auto;

    object-fit:contain;

    transition:.45s ease;

    filter:brightness(1.08);

}

.hero-image:hover img{

    transform:translateY(-10px);

}

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

.hero::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:650px;

    height:650px;

    background:
    radial-gradient(circle,
    rgba(124,58,237,.15),
    transparent 70%);

    pointer-events:none;

}

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

.section-heading{

    margin-bottom:70px;
    padding-top: 80px;

}

.section-heading h2{

    font-size:2.8rem;

    font-weight:700;

    color:var(--white);

    margin-bottom:15px;

}

.section-heading h2 span{

    color:var(--primary-color);

}

.section-heading p{

    max-width:650px;

    margin:auto;

    color:var(--gray);

    font-size:1.05rem;

    line-height:1.8;

}

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

#about{

    padding:30px 0;

}

.about-content p{

    color:var(--gray);

    font-size:1.08rem;

    line-height:2;

    margin-bottom:25px;

    text-align:justify;

}

.about-content strong{

    color:var(--white);

    font-weight:600;

}

/* ===========================================================
                    PROFILE OVERVIEW CARD
=========================================================== */

.profile-card{

    background:#182338;

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

    border-radius:22px;

    padding:35px;

    transition:.35s ease;

}

.profile-card:hover{

    border-color:var(--primary-color);

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(124,58,237,.15);

}

.profile-title{

    font-size:1.5rem;

    font-weight:700;

    color:var(--white);

    margin-bottom:35px;

    text-align:center;

    position:relative;

}

/* purple line */
.profile-title::after{

    content:"";

    width:70px;

    height:3px;

    background:var(--primary-color);

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:-10px;

    border-radius:5px;

}

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

.profile-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    background:#111827;

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

    border-radius:16px;

    padding:18px;

    margin-bottom:18px;

    transition:.3s;

}

.profile-item:hover{

    border-color:var(--primary-color);

    transform:translateX(6px);

}

/* icons */
.profile-icon{

    width:52px;

    height:52px;

    background:rgba(124,58,237,.12);

    color:var(--primary-color);

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.2rem;

    flex-shrink:0;

}

/* text */
.profile-info h5{

    color:var(--white);

    margin-bottom:6px;

    font-size:1rem;

    font-weight:600;

}

.profile-info p{

    color:var(--gray);

    margin:0;

    line-height:1.7;

    font-size:.95rem;

}

/* ===========================================================
                        BADGES
=========================================================== */

.profile-badges{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:12px;

}

.profile-badges span{

    background:#1d2940;

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

    color:var(--white);

    padding:8px 14px;

    border-radius:10px;

    font-size:.85rem;

    transition:.3s;

}

.profile-badges span:hover{

    background:var(--primary-color);

    transform:translateY(-3px);

}

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

@media(max-width:992px){

    .about{

        padding:90px 0;

    }

    .section-heading{

        margin-bottom:50px;

    }

    .profile-card{

        margin-top:40px;

    }

}

@media(max-width:768px){

    .section-heading h2{

        font-size:2.2rem;

    }

    .about-content{

        text-align:center;

    }

    .about-content p{

        text-align:left;

    }

}

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

.about-stats{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:60px;

    gap:20px;

}

.stat-item{

    flex:1;

    display:flex;

    align-items:center;

    gap:20px;

    padding:18px 10px;

    transition:.35s ease;

}

.stat-item i{

    font-size:3rem;

    color:var(--primary-color);

    transition:.35s;

}

.stat-text h3{

    margin:0;

    font-size:2.6rem;

    font-weight:700;

    color:var(--white);

    line-height:1;

}

.stat-text p{

    margin-top:10px;

    margin-bottom:0;

    color:var(--gray);

    font-size:.95rem;

}

.stat-divider{

    width:1px;

    height:90px;

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

}

.stat-item:hover{

    transform:translateY(-8px);

}

.stat-item:hover i{

    transform:scale(1.15);

    color:#9b6dff;

}

/* ========== Mobile Responcive ========== */
@media (max-width:768px){

    .about-stats{

        flex-direction:column;

        align-items:flex-start;

        gap:30px;

    }

    .stat-divider{

        display:none;

    }

    .stat-item{

        width:100%;

    }

}

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

/* ==== Heading ==== */
.skills{

    padding:30px 0;

}

.skills-heading{

    text-align:center;

    margin-bottom:70px;

}

.skills-heading h2{

    font-size:2.8rem;

    font-weight:700;

    color:var(--white);

    margin-bottom:18px;

}

.skills-heading h2 span{

    color:var(--primary-color);

}

.skills-heading p{

    max-width:700px;

    margin:auto;

    color:var(--gray);

    font-size:1.05rem;

    line-height:1.8;

}

/* ===========================================================
                    SKILL CARDS
=========================================================== */

.skill-card{

    background:#182338;

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

    border-radius:22px;

    padding:35px;

    height:100%;

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}

.skill-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary-color);

    box-shadow:0 20px 45px rgba(124,58,237,.15);

}

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

.skill-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(124,58,237,.12);

    color:var(--primary-color);

    font-size:2rem;

    margin-bottom:25px;

    transition:.35s;

}

.skill-card:hover .skill-icon{

    transform:rotate(-8deg) scale(1.08);

}

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

.skill-card h3{

    color:var(--white);

    font-size:1.35rem;

    font-weight:600;

    margin-bottom:18px;

    position:relative;

}

.skill-card h3::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    margin-top:12px;

    border-radius:5px;

    background:var(--primary-color);

}

/* ===========================================================
                    SKILL LIST
=========================================================== */

.skill-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.skill-card ul li{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--gray);

    margin-bottom:14px;

    font-size:1rem;

    transition:.3s;

}

.skill-card ul li::before{

    content:"✓";

    color:var(--primary-color);

    font-weight:bold;

}

.skill-card ul li:hover{

    color:var(--white);

    transform:translateX(6px);

}

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

@media(max-width:992px){

    .skills{

        padding:90px 0;

    }

    .skills-heading{

        margin-bottom:50px;

    }

}

@media(max-width:768px){

    .skills-heading h2{

        font-size:2.2rem;

    }

}


/* ===========================================================
                PROFESSIONAL EXPERIENCE
=========================================================== */

.featured-project{

    padding:30px 0;

}

/* ================= Card ================= */

.featured-card{

    background:#182338;

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

    border-radius:24px;

    padding:45px;

    transition:.35s ease;

    overflow:hidden;

    position:relative;

}

.featured-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary-color);

    box-shadow:0 25px 45px rgba(124,58,237,.18);

}


/* ================= Browser Mockup ================= */

.featured-image{

    background:#101826;

    border-radius:18px;

    overflow:hidden;

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

    transition:.4s;

}

.featured-image:hover{

    transform:scale(1.02);

}

.featured-image img{

    width:100%;

    display:block;

}


/* ================= Tag ================= */

.featured-tag{

    display:inline-block;

    background:rgba(124,58,237,.12);

    color:var(--primary-color);

    padding:8px 16px;

    border-radius:30px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:20px;

}


/* ================= Heading ================= */

.featured-content h3{

    color:var(--white);

    font-size:2rem;

    margin-bottom:18px;

}

.featured-content p{

    color:var(--gray);

    line-height:1.9;

    margin-bottom:30px;

}


/* ================= Tech Stack ================= */

.project-tech{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:35px;

}

.project-tech span{

    background:#111827;

    color:var(--white);

    padding:8px 16px;

    border-radius:30px;

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

    transition:.3s;

}

.project-tech span:hover{

    border-color:var(--primary-color);

    transform:translateY(-3px);

}


/* ================= Buttons ================= */

.featured-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

/* =============== CUSTOM MODAL ================= */

.custom-modal{

    background:#182338;

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

    border-radius:22px;

    color:var(--white);

}

.custom-modal .modal-header{

    border-bottom:1px solid rgba(255,255,255,.08);

}

.custom-modal .modal-footer{

    border-top:1px solid rgba(255,255,255,.08);

}

.custom-modal h4,
.custom-modal h5,
.custom-modal h6{

    color:var(--white);

}

.custom-modal p{

    color:var(--gray);

    line-height:1.8;

}

.custom-modal ul{

    padding-left:20px;

}

.custom-modal li{

    color:var(--gray);

    margin-bottom:12px;

    line-height:1.7;

}

.custom-modal hr{

    border-color:rgba(255,255,255,.08);

}

/* ================ learn more button ============== */

.btn-outline-custom{

    background:transparent;

    border:2px solid var(--primary-color);

    color:var(--primary-color);

    padding:14px 28px;

    border-radius:10px;

    font-weight:600;

    transition:.3s ease;

}

.btn-outline-custom:hover{

    background:var(--primary-color);

    color:#fff;

    transform:translateY(-4px);

}

.btn-outline-custom:focus,
.btn-outline-custom:active{

    background:var(--primary-color) !important;

    color:#fff !important;

    border-color:var(--primary-color) !important;

    box-shadow:none !important;

}

.btn-outline-custom:visited{

    color:var(--primary-color);

}


/* ================= Responsive ================= */

@media(max-width:992px){

.featured-card{

padding:30px;

}

.featured-image{

margin-bottom:35px;

}

.featured-content{

text-align:center;

}

.project-tech{

justify-content:center;

}

.featured-buttons{

justify-content:center;

}

}

@media(max-width:768px){

.featured-content h3{

font-size:1.6rem;

}

}


/* ===========================================================
                        MY PROJECTS
=========================================================== */

.projects-section{

    padding:20px 0;

}

/* ================= Card ================= */

.project-card{

    background:#182338;

    border-radius:22px;

    overflow:hidden;

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

    transition:.35s ease;

    height:100%;

    display:flex;

    flex-direction:column;

    box-shadow:0 12px 35px rgba(0,0,0,.15);

}

.project-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary-color);

    box-shadow:0 20px 45px rgba(124,58,237,.20);

}

/* ================= Project Image ================= */

.project-image{

    position:relative;

    height:200px;

    overflow:visible;

}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s ease;

    filter:brightness(.75) blur(2px);

}

.project-image-wrapper{

    width:100%;

    height:100%;

    overflow:hidden;

}

.project-image-wrapper img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.project-card:hover .project-image img{

    transform:scale(1.08);

    filter:brightness(.9) blur(1px);

}

/* Dark Gradient */

.project-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to bottom,

        rgba(10,15,35,.05),

        rgba(10,15,35,.15),

        rgba(10,15,35,.45),

        rgba(10,15,35,.85)

    );

}

/* ================= Floating Icon ================= */

.project-icon{

    position:absolute;

    left:22px;

    bottom:-28px;

    width:58px;

    height:58px;

    border-radius:50%;

    background:linear-gradient(135deg,#7c3aed,#9d6bff);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.4rem;

    box-shadow:0 10px 30px rgba(124,58,237,.35);

    z-index:2;

}

/* ================= Content ================= */

.project-content{

    padding:28px 22px 22px;

    display:flex;

    flex-direction:column;

    flex-grow:1;

}

/* ================= Title ================= */

.project-content h3{

    color:#fff;

    font-size:1.3rem;

    margin-bottom:8px;

    line-height:1.35;

}

/* ================= Badge ================= */

.project-type{

    display:inline-block;

    align-self:flex-start;

    margin-bottom:18px;

    padding:7px 14px;

    border-radius:30px;

    background:rgba(124,58,237,.12);

    border:1px solid rgba(124,58,237,.30);

    color:var(--primary-color);

    font-size:.82rem;

    font-weight:600;

}

/* ================= Description ================= */

.project-content p{

    color:var(--gray);

    line-height:1.6;

    margin-bottom:18px;

    flex-grow:1;

}

/* ================= Tech ================= */

.project-tech{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:24px;

}

.project-tech span{

    background:#111827;

    color:#fff;

    padding:6px 12px;

    border-radius:30px;

    font-size:.75rem;

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

    transition:.3s;

}

.project-tech span:hover{

    border-color:var(--primary-color);

}

/* ================= Buttons ================= */

.project-buttons{

    display:flex;

    gap:12px;

}

.project-buttons a{

    flex:1;

    text-align:center;

}

.project-buttons .btn-primary-custom,
.project-buttons .btn-outline-custom{

    padding:10px 18px;

    font-size:.9rem;

}

/* ================= Responsive ================= */

@media(max-width:992px){

.project-image{

height:210px;

}

}

@media(max-width:768px){

.project-buttons{

flex-direction:column;

}

.project-content{

padding:42px 22px 22px;

}

.project-content h3{

font-size:1.3rem;

}

.project-image{

height:200px;

}

}


/* ===========================================================
                    CERTIFICATIONS
=========================================================== */

.certifications{

    padding:30px 0;

}

/* Card */

.certificate-card{

    background:#182338;

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

    border-radius:18px;

    padding:22px 16px;

    text-align:center;

    transition:.35s;

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.certificate-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary-color);

    box-shadow:0 15px 35px rgba(124,58,237,.18);

}

/* Logo */

.certificate-card img{

    width:70px;

    height:70px;

    object-fit:contain;

    margin-bottom:18px;

    transition:.35s;

}

.certificate-card:hover img{

    transform:scale(1.08);

}

/* Company */

.certificate-card h5{

    color:var(--white);

    font-size:1rem;

    margin-bottom:6px;

}

/* Certificate */

.certificate-card p{

    color:var(--gray);

    font-size:.9rem;

    margin-bottom:20px;

    min-height:42px;

}

/* Button */

.certificate-btn{

    margin-top:auto;

    color:var(--primary-color);

    text-decoration:none;

    font-weight:600;

    font-size:.9rem;

    transition:.3s;

}

.certificate-btn i{

    margin-left:6px;

    transition:.3s;

}

.certificate-btn:hover{

    color:#fff;

}

.certificate-btn:hover i{

    transform:translateX(5px);

}

/* Responsive */

@media(max-width:992px){

.certificate-card{

    margin-bottom:15px;

}

}

@media(max-width:576px){

.certificate-card{

    padding:18px 12px;

}

.certificate-card img{

    width:60px;

    height:60px;

}

}

/* ===========================================================
                        EDUCATION
=========================================================== */

.education{

    padding:30px 0;

}

.education-timeline{

    position:relative;

    display:flex;

    justify-content:space-between;

    margin-top:60px;

}

.timeline-line{

    position:absolute;

    top:8px;

    left:8%;

    width:80%;

    height:3px;

    background:rgba(124,58,237,.4);

}

.education-item{

    position:relative;

    width:22%;

    text-align:center;

    z-index:2;

}

.timeline-dot{

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--primary-color);

    margin:auto;

    box-shadow:0 0 18px rgba(124,58,237,.6);

}

.timeline-year{

    display:block;

    margin-top:12px;

    margin-bottom:18px;

    color:var(--primary-color);

    font-weight:600;

}

.education-card{

    background:#182338;

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

    border-radius:16px;

    padding:18px;

    transition:.35s;

}

.education-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary-color);

}

.education-card h5{

    color:#fff;

    margin-bottom:8px;

}

.education-card p{

    color:var(--gray);

    margin-bottom:4px;

}

.education-card small{

    color:var(--gray);

}

@media(max-width:768px){

.education-timeline{

flex-direction:column;

gap:40px;

}

.timeline-line{

display:none;

}

.education-item{

width:100%;

}

}

/* ===========================================================
                    ACHIEVEMENTS
=========================================================== */

.achievements{

    padding:30px 0;

}

.achievement-card{

    background:#182338;

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

    border-radius:18px;

    padding:25px 22px;

    text-align:center;

    transition:.35s;

    height:100%;

}

.achievement-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary-color);

    box-shadow:0 18px 40px rgba(124,58,237,.18);

}

.achievement-icon{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    border-radius:50%;

    background:rgba(124,58,237,.12);

    border:1px solid rgba(124,58,237,.35);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary-color);

    font-size:1.8rem;

    transition:.35s;

}

.achievement-card:hover .achievement-icon{

    transform:rotate(10deg) scale(1.08);

    background:var(--primary-color);

    color:#fff;

}

.achievement-card h4{

    color:#fff;

    font-size:1.2rem;

    margin-bottom:12px;

}

.achievement-card p{

    color:var(--gray);

    font-size:.95rem;

    line-height:1.7;

    margin:0;

}

@media(max-width:768px){

.achievement-card{

margin-bottom:20px;

}

}

/* ===========================================================
                        CONTACT
=========================================================== */

.contact{

    padding:30px 0;

}

.contact-info-card,
.contact-form-card{

    background:#182338;

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

    border-radius:20px;

    padding:30px;

    height:100%;

}

.contact-info-card{

    text-align:center;

}

.contact-icon-main{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:50%;

    background:rgba(124,58,237,.12);

    border:1px solid rgba(124,58,237,.3);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary-color);

    font-size:2rem;

}

.contact-info-card h3{

    color:#fff;

    margin-bottom:12px;

}

.contact-info-card p{

    color:var(--gray);

    margin-bottom:25px;

    line-height:1.7;

}

.contact-detail{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

    color:#fff;

}

.contact-detail i{

    width:42px;

    height:42px;

    border-radius:50%;

    background:rgba(124,58,237,.12);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary-color);

}

.contact-social{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:30px;

}

.contact-social a{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#101827;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.3s;

}

.contact-social a:hover{

    background:var(--primary-color);

    transform:translateY(-5px);

}

.contact-form-card input,
.contact-form-card textarea{

    width:100%;

    background:#101827;

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

    border-radius:12px;

    padding:14px 18px;

    color:#fff;

    margin-bottom:18px;

    outline:none;

    transition:.3s;

}

.contact-form-card input:focus,
.contact-form-card textarea:focus{

    border-color:var(--primary-color);

    box-shadow:0 0 0 3px rgba(124,58,237,.15);

}

.contact-form-card textarea{

    resize:none;

}

.contact-form-card button{

    padding:13px 28px;

}

.contact-form-card button i{

    margin-right:8px;

}


/* ============================
         RESUME MODAL
============================ */
#resumeModal .modal-content{
    background:#111827;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
}

#resumeModal .modal-header{
    background:linear-gradient(90deg,#2563eb,#7c3aed);
    border:none;
}

#resumeModal .modal-title{
    color:#fff;
    font-weight:600;
}

#resumeModal .modal-footer{
    background:#111827;
    border:none;
}

#resumeModal iframe{
    background:white;
}


/* ===========================================================
                FITNESS PROJECT MODAL
=========================================================== */

#fitnessModal .modal-content{

    background:#182338;

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

    border-radius:22px;

    overflow:hidden;

}

#fitnessModal .modal-header{

    background:#182338;

    border-bottom:1px solid rgba(255,255,255,.08);

    padding:18px 25px;

}

#fitnessModal .modal-title{

    color:#fff;

    font-size:1.4rem;

    font-weight:600;

}

#fitnessModal .btn-close{

    filter:invert(1);

    opacity:1;

}

#fitnessModal .modal-body{

    background:#101827;

}

#fitnessModal iframe{

    display:block;

    width:100%;

    border:none;

    background:#fff;

}


/* ===========================================================
                    PROJECT DETAILS MODAL
=========================================================== */

#projectModal .modal-content{

    background:#182338;

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

    border-radius:22px;

    color:#fff;

    overflow:hidden;

}

#projectModal .modal-header{

    border-bottom:1px solid rgba(255,255,255,.08);

    padding:20px 30px;

}

#projectModal .modal-title{

    font-size:1.5rem;

    font-weight:700;

    color:#fff;

}

#projectModal .modal-body{

    padding:30px;

}

#projectModal .btn-close{

    filter:invert(1);

    opacity:1;

}

#projectModal strong{

    display:block;

    color:var(--primary-color);

    margin-bottom:8px;

    font-size:1rem;

}

#projectModal p{

    color:var(--gray);

    line-height:1.8;

    margin-bottom:22px;

}



/* ===========================================================
                    BACK TO TOP BUTTON
=========================================================== */

#backToTop{

    position: fixed;

    bottom: 25px;
    right: 25px;

    width: 50px;
    height: 50px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;

    /* Glass Effect */
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Thin Purple Border */
    border: 1px solid rgba(139,92,246,0.6);

    color: var(--primary-color);

    text-decoration: none;

    font-size: 1.2rem;

    box-shadow: 0 8px 25px rgba(124,58,237,.15);

    z-index: 9999;

    transition: all .3s ease;

}

/* Hover */

#backToTop:hover{

    background: rgba(139,92,246,.18);

    border-color: var(--primary-color);

    color: #fff;

    transform: translateY(-5px) scale(1.08);

    box-shadow: 0 12px 30px rgba(124,58,237,.35);

}

/* Click */

#backToTop:active{

    transform: scale(.95);

}