/* Global Reset */

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



/* Body */

body {

    background: #0B1020;
    color: #FFFFFF;
    font-family: Calibri, "Segoe UI", Arial, sans-serif;

}



/* Navigation */

nav {

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

    padding: 25px 8%;

    background: #11182D;

}



.logo {

    color: #FFFFFF;
    font-size: 24px;
    line-height: 1.1;

}



nav ul {

    display: flex;
    gap: 35px;
    list-style: none;

}



nav ul a {

    color: #BFC5D2;
    text-decoration: none;
    transition: 0.3s ease;

}



nav ul a:hover {

    color: #6D5EF5;

}



nav li {

    color: #BFC5D2;
    font-size: 16px;
}



/* Hero Section */

.hero {

    padding: 80px 8%;

}



.hero h1 {

    font-size: 64px;
    line-height: 1.1;
    font-weight: 700;
    margin-top: 30px;

}

.greeting {

    color: #6D5EF5;
    display: inline-block;
    margin-bottom: 20px;

}


.name {

    color: #FFFFFF;

}



.hero h3 {

    margin-top: 40px;
    font-size: 28px;
    font-weight: 600;
    color: #6D5EF5;

}



.hero p {

    margin-top: 25px;

    max-width: 650px;

    font-size: 20px;

    line-height: 1.6;

    color: #BFC5D2;

}

.hero-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 80px;

}

.hero-text {

    flex: 1;

}

.hero-image {

    flex: 1;

    display: flex;

    justify-content: flex-end;

}

.hero-image img {

    width: 380px;

    height: 380px;

    object-fit: cover;

    border-radius: 50%;

    border: 5px solid #6D5EF5;

    box-shadow: 0 0 30px rgba(109,94,245,.35);

}

/* Buttons */

.hero-buttons {

    margin-top: 35px;

    display: flex;
    gap: 20px;

}



.btn,
.btn-outline {

    padding: 12px 28px;

    border-radius: 8px;

    text-decoration: none;

    font-size: 16px;

    font-weight: 600;

}



.btn {

    background: #6D5EF5;

    color: white;

}



.btn-outline {

    border: 1px solid #6D5EF5;

    color: white;

}

/* About Section */

.about {

    background: #141B2D;
    padding: 100px 8%;

}



.about h2 {

    font-size: 40px;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 25px;

}



.about p {

    font-size: 20px;
    line-height: 1.7;
    color: #BFC5D2;
    text-align: left;

}

.container {

    max-width: 900px;
    margin: 0 auto;

}

/* ===========================
   Experience
=========================== */

.experience {

    padding: 100px 8%;
    background: #0B1020;

}

.experience h2 {

    text-align: center;
    font-size: 40px;
    color: #FFFFFF;
    margin-bottom: 50px;

}

.experience-card {

    background: #141B2D;
    border-left: 4px solid #6D5EF5;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 25px;

}

.experience-card h3 {

    color: #FFFFFF;
    margin-bottom: 8px;

}

.experience-card span {

    color: #6D5EF5;
    font-weight: 600;
    display: block;
    margin-bottom: 15px;

}

.experience-card p {

    color: #BFC5D2;
    line-height: 1.7;

}


/* ===========================
   Featured Projects
=========================== */


.projects{
    padding:100px 8%;
    background:#0B1020;
}

.projects h2{
    text-align:center;
    font-size:40px;
    color:#fff;
    margin-bottom:60px;
}

.project-list{

    display:flex;
    flex-direction:column;
    gap:40px;

}


.project-card{

    background:#141B2D;

    border-radius:15px;

    border:1px solid rgba(109,94,245,.25);

    transition:.3s ease;

    padding-bottom:0 20px 30px;

}


.project-card:hover{

    transform:translateY(-8px);

    border-color:#6D5EF5;

}


.project-card img {

    width: calc(100% - 40px);

    height: auto;

    max-height: 400px;

    object-fit: contain;

    display: block;

    margin: 20px auto 0;

    border-radius: 12px;

}

.project-card h3{

    font-size:28px;

    color:#fff;

    margin:30px 30px 15px;

}


.project-card p{

    color:#BFC5D2;

    line-height:1.8;

    margin:0 30px 25px;

}


.project-card h4{

    color:#fff;

    margin:0 30px 15px;

}


.tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:0 30px 30px;

}


.tags span{

    background:#1C2540;

    color:#CFCFFF;

    padding:10px 18px;

    border-radius:30px;

    font-size:14px;

}


.project-links{

    display:flex;

    gap:25px;

    margin:0 30px 35px;

}


.project-links a{

    color:#6D5EF5;

    text-decoration:none;

    font-weight:600;

}


.project-links a:hover{

    text-decoration:underline;

}

.project-btn {

    display: inline-block;
    padding: 10px 18px;
    border: 1px solid #6D5EF5;
    border-radius: 8px;
    color: #FFFFFF;
    text-decoration: none;
    transition: 0.3s ease;

}

.project-btn:hover {

    background: #6D5EF5;

}

.project-btn.secondary {

    background: transparent;

}

/* ===========================
   Technical Skills
=========================== */

.skills {

    padding: 100px 8%;
    background: #141B2D;

}


.skills h2 {

    text-align: center;
    font-size: 40px;
    color: #FFFFFF;
    margin-bottom: 50px;

}


.skills-grid {

    max-width: 900px;
    margin: 0 auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 15px;

}


.skills-grid span {

    background: #0B1020;

    color: #FFFFFF;

    padding: 14px 22px;

    border-radius: 8px;

    border: 1px solid #6D5EF5;

    font-size: 16px;

    transition: 0.3s ease;

}


.skills-grid span:hover {

    background: #6D5EF5;

}

/* ===========================
   Certifications
=========================== */

.certifications {

    padding: 100px 8%;
    background: #0B1020;

}


.certifications h2 {

    text-align: center;
    font-size: 40px;
    color: #FFFFFF;
    margin-bottom: 50px;

}


.cert-grid {

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;

}


.cert-card {

    background: #141B2D;

    width: 260px;

    padding: 20px;

    border-radius: 10px;

    border: 1px solid #6D5EF5;

    text-align: center;

}


.cert-card h3 {

    color: #FFFFFF;

    font-size: 17px;

    margin-bottom: 15px;

}


.cert-card p {

    color: #BFC5D2;

    font-size: 14px;

}

/* ===========================
   Contact Section
=========================== */

.contact {

    padding: 100px 8%;
    background: #141B2D;
    text-align: center;

}


.contact h2 {

    font-size: 40px;
    color: #FFFFFF;
    margin-bottom: 25px;

}


.contact p {

    color: #BFC5D2;
    font-size: 20px;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto 35px;

}



.contact-links {

    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;

}



.contact-links a {

    color: #FFFFFF;
    text-decoration: none;
    font-size: 18px;

    display: flex;
    align-items: center;
    gap: 8px;

}



.contact-links a:hover {

    color: #6D5EF5;

}

/* ===========================
   Footer
=========================== */

footer {

    background: #0B1020;

    padding: 30px 8%;

    text-align: center;

}


footer p {

    color: #BFC5D2;

    font-size: 15px;

    margin: 8px;

}