/* ===================================== */
/* Global Styles */
/* ===================================== */




:root {

    --primary-color: #00b4d8;

    --secondary-color: #0077b6;

    --accent-color: #90e0ef;

    --background-color: #050b14;

    --card-background: rgba(255, 255, 255, 0.05);

    --text-color: #f1f5f9;

    --text-secondary: #94a3b8;

    --border-color: rgba(255,255,255,0.1);

    --transition: 0.3s ease;

}





* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

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

    background: var(--background-color);

    color: var(--text-color);

    line-height: 1.6;

}



a {

    text-decoration: none;

    color: inherit;

}



img {

    max-width: 100%;

    display: block;

}



ul {

    list-style: none;

}





/* ===================================== */
/* Reusable Components */
/* ===================================== */


.section {

    padding: 100px 8%;

}




.section-heading {

    text-align: center;

    margin-bottom: 60px;

}



.section-heading p:first-child {

    color: var(--primary-color);

    font-size: 0.85rem;

    font-weight: 700;

    letter-spacing: 2px;

}



.section-heading h2 {

    font-size: 2.8rem;

    margin: 15px 0;

}



.section-subtitle {

    color: var(--text-secondary);

    max-width: 700px;

    margin: auto;

}






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


.btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 28px;

    border-radius: 8px;

    font-weight: 600;

    transition: var(--transition);

}

.nav-btn {

    padding:10px 22px;

    border-radius:8px;

    background:var(--primary-color);

    color:#001219;

    font-weight:600;

    transition:.3s;

}



.nav-btn:hover {

    transform:translateY(-3px);

}



.btn-primary {

    background: var(--primary-color);

    color: #001219;

}



.btn-primary:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(0,180,216,0.3);

}



.btn-outline {

    border: 1px solid var(--border-color);

    color: var(--text-color);

}



.btn-outline:hover {

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

    color: var(--primary-color);

}






/* ===================================== */
/* Navbar */
/* ===================================== */


header {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 1000;

    backdrop-filter: blur(12px);

    background: rgba(5,11,20,0.75);

    border-bottom: 1px solid var(--border-color);

}



.navbar {

    max-width: 1200px;

    margin: auto;

    padding: 20px 8%;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    font-size: 1.5rem;

    font-weight: 800;

}



.logo span {

    color: var(--primary-color);

}



.nav-links {

    display: flex;

    gap: 35px;

}



.nav-links a {

    color: var(--text-secondary);

    font-weight: 500;

    transition: var(--transition);

}



.nav-links a:hover {

    color: var(--primary-color);

}


/* ===================================== */
/* About Section */
/* ===================================== */

.about-content {

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:50px;

    align-items:center;

}


.about-text p {

    color:var(--text-secondary);

    margin-bottom:20px;

    font-size:1.05rem;

}



.about-card {

    background:var(--card-background);

    border:1px solid var(--border-color);

    padding:35px;

    border-radius:18px;

}



.about-card h3 {

    margin-bottom:25px;

}



.about-card ul {

    display:flex;

    flex-direction:column;

    gap:15px;

}



.about-card li {

    color:var(--text-secondary);

}



/* ===================================== */
/* Hero Section */
/* ===================================== */


.identity-card{

    width:100%;

    max-width:420px;

    background:#0d1117;

    border:1px solid rgba(0,180,216,.2);

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.45);

    transition:.3s ease;

    position:relative;


}

.identity-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 70px rgba(0,180,216,.15);


}



.identity-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:18px;

    border:1px solid rgba(0,180,216,.4);

    pointer-events:none;

    z-index:0;

}

.terminal-header{

    display:flex;

    align-items:center;

    gap:.6rem;

    padding:15px 20px;

    background:#111827;

    position:relative;

    z-index:1;


}

.dot{

    width:12px;

    height:12px;

    border-radius:50%;

}

.terminal-red {
    background:#ff5f56;
}

.terminal-yellow {
    background:#ffbd2e;
}

.terminal-green {
    background:#27c93f;
}
.terminal-header p{

    margin-left:10px;

    color:#9ca3af;

    font-size:.9rem;

    font-family:"JetBrains Mono", monospace;

}

.terminal-body{

    padding:30px;
    
    background:#0b1220;

    position:relative;

    z-index:1;


}

.terminal-body pre{

    margin:0;

    color:#8ef5b2;

    font-family:"JetBrains Mono",monospace;

    font-size:.95rem;

    line-height:2;

}


.terminal-body span{

    color:#00b4d8;

}


.hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:80px;

    align-items:center;

    max-width:1200px;

    margin:auto;

    padding:150px 8% 80px;

}

.hero-left{

    display:flex;

    flex-direction:column;

}

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

}


.eyebrow{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--primary-color);

    font-size:.9rem;

    font-weight:600;

    letter-spacing:.5px;

}

.eyebrow i{

    font-size:1.2rem;

}

.hero h1{

    font-size:clamp(3rem,6vw,4.8rem);

    line-height:1.1;

    margin:20px 0;

}

.hero h1 span{

    color:var(--primary-color);

}

.hero-description{

    max-width:650px;

    color:var(--text-secondary);

    margin-bottom:35px;

    font-size:1.05rem;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:35px;

}

.social-links{

    display:flex;

    gap:18px;

}

.social-links a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    border:1px solid var(--border-color);

    transition:.3s;

}

.social-links a:hover{

    color:var(--primary-color);

    transform:translateY(-4px);

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

}



/* ===================================== */
/* Timeline */
/* ===================================== */


.timeline {

    max-width:900px;

    margin:auto;

    position:relative;

}



.timeline::before {

    content:"";

    position:absolute;

    left:25px;

    top:0;

    width:2px;

    height:100%;

    background:var(--border-color);

}



.timeline-item {

    position:relative;

    padding-left:70px;

    margin-bottom:40px;

}



.timeline-year {

    position:absolute;

    left:0;

    top:0;

    background:var(--primary-color);

    color:#001219;

    padding:8px 12px;

    border-radius:20px;

    font-weight:700;

    font-size:.85rem;

}



.timeline-content {

    background:var(--card-background);

    border:1px solid var(--border-color);

    padding:25px;

    border-radius:15px;

}



.timeline-content h3 {

    margin-bottom:10px;

}



.timeline-content p {

    color:var(--text-secondary);

}

/* ===================================== */
/* Security Mindset */
/* ===================================== */


.mindset-card {

    max-width:900px;

    margin:auto;

    padding:45px;

    background:var(--card-background);

    border:1px solid var(--border-color);

    border-radius:20px;

    text-align:center;

}



.mindset-card blockquote {

    font-size:1.4rem;

    font-weight:500;

    margin-bottom:25px;

    color:var(--text-color);

}



.mindset-card p {

    color:var(--text-secondary);

}
/* ===================================== */
/* Featured Project */
/* ===================================== */


.featured-project {

    position: relative;

}



.featured-container {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

    padding: 50px;

    background: var(--card-background);

    border: 1px solid var(--border-color);

    border-radius: 20px;

    backdrop-filter: blur(10px);

}





.featured-image img {

    border-radius: 15px;

    border: 1px solid var(--border-color);

    transition: var(--transition);

}



.featured-image img:hover {

    transform: scale(1.03);

}






.featured-content h3 {

    font-size: 2rem;

    margin-bottom: 20px;

}



.featured-content p {

    color: var(--text-secondary);

    margin-bottom: 25px;

}







/* Feature Grid */


.feature-grid {

    display: grid;

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

    gap: 15px;

    margin: 30px 0;

}



.feature {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px;

    background: rgba(255,255,255,0.03);

    border-radius: 10px;

    border: 1px solid var(--border-color);

}



.feature i {

    color: var(--primary-color);

    font-size: 1.3rem;

}





/* Technology Tags */


.project-tech,

.mini-tech {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin: 25px 0;

}



.project-tech span,

.mini-tech span,

.skill-list span {


    padding: 7px 15px;

    border-radius: 20px;

    background: rgba(0,180,216,0.1);

    color: var(--accent-color);

    font-size: 0.85rem;

    border: 1px solid rgba(0,180,216,0.2);

}





/* Project Buttons */


.project-buttons {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}






/* ===================================== */
/* Other Projects Grid */
/* ===================================== */


.projects-grid {

    max-width: 1200px;

    margin: auto;

    display: grid;

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

    gap: 30px;

}




.project-card {

    background: var(--card-background);

    border: 1px solid var(--border-color);

    border-radius: 18px;

    overflow: hidden;

    transition: var(--transition);

}



.project-card:hover {

    transform: translateY(-8px);

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

}





.project-card img {

    width: 100%;

    height: 220px;

    object-fit: cover;

}




.card-content {

    padding: 25px;

}





.project-tag {

    color: var(--primary-color);

    font-size: 0.8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}




.card-content h3 {

    font-size: 1.5rem;

    margin: 15px 0;

}




.card-content p {

    color: var(--text-secondary);

    margin-bottom: 15px;

}






.text-link {

    color: var(--primary-color);

    font-weight: 600;

    transition: var(--transition);

}



.text-link:hover {

    color: var(--accent-color);

}






/* ===================================== */
/* Skills Section */
/* ===================================== */



.skills-container {

    max-width: 1200px;

    margin: auto;

    display: grid;

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

    gap: 30px;

}





.skill-category {

    background: var(--card-background);

    border: 1px solid var(--border-color);

    padding: 35px;

    border-radius: 18px;

    transition: var(--transition);

}



.skill-category:hover {

    transform: translateY(-8px);

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

}




.skill-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: rgba(0,180,216,0.1);

    margin-bottom: 20px;

}



.skill-icon i {

    color: var(--primary-color);

    font-size: 1.8rem;

}



.skill-category h3 {

    margin-bottom: 20px;

}



.skill-list {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}
/* ===================================== */
/* Certifications Section */
/* ===================================== */


.certifications-container {

    max-width: 1000px;

    margin: auto;

    display: grid;

    gap: 30px;

}



.cert-card {

    display: flex;

    gap: 25px;

    padding: 35px;

    background: var(--card-background);

    border: 1px solid var(--border-color);

    border-radius: 18px;

    transition: var(--transition);

}



.cert-card:hover {

    transform: translateX(8px);

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

}





.cert-icon {

    min-width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: rgba(0,180,216,0.1);

}



.cert-icon i {

    color: var(--primary-color);

    font-size: 2rem;

}




.cert-content h3 {

    font-size: 1.4rem;

    margin-bottom: 8px;

}



.cert-provider {

    color: var(--primary-color);

    font-weight: 600;

    margin-bottom: 15px;

}



.cert-content p {

    color: var(--text-secondary);

}







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


.experience-container {

    max-width: 1000px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 30px;

}




.experience-card {

    padding: 35px;

    background: var(--card-background);

    border: 1px solid var(--border-color);

    border-radius: 18px;

}



.experience-header {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;

}



.experience-header h3 {

    font-size: 1.5rem;

}



.experience-company {

    color: var(--primary-color);

    font-weight: 600;

}




.experience-date {

    color: var(--text-secondary);

    font-size: 0.9rem;

}




.experience-card p {

    color: var(--text-secondary);

    margin-bottom: 20px;

}



.experience-card ul {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.experience-card li {

    color: var(--text-secondary);

    padding-left: 20px;

    position: relative;

}



.experience-card li::before {

    content: "▹";

    position: absolute;

    left: 0;

    color: var(--primary-color);

}







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


.contact-container {

    max-width: 900px;

    margin: auto;

    display: grid;

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

    gap: 25px;

}



.contact-card {

    text-align: center;

    padding: 35px 20px;

    background: var(--card-background);

    border: 1px solid var(--border-color);

    border-radius: 18px;

    transition: var(--transition);

}



.contact-card:hover {

    transform: translateY(-8px);

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

}





.contact-icon {

    margin-bottom: 20px;

}



.contact-icon i {

    font-size: 2rem;

    color: var(--primary-color);

}




.contact-card h3 {

    margin-bottom: 10px;

}




.contact-card a {

    color: var(--text-secondary);

}



.contact-card a:hover {

    color: var(--primary-color);

}







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


.footer {

    border-top: 1px solid var(--border-color);

    padding: 50px 8% 20px;

    background: #020617;

}




.footer-container {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 2fr 1fr 1fr;

    gap: 40px;

}



.footer-logo h3 {

    font-size: 1.5rem;

}



.footer-logo p {

    color: var(--text-secondary);

    margin-top: 15px;

    max-width: 350px;

}





.footer-links {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.footer-links a {

    color: var(--text-secondary);

}



.footer-links a:hover {

    color: var(--primary-color);

}





.footer-social {

    display: flex;

    gap: 15px;

}



.footer-social a {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 1px solid var(--border-color);

}



.footer-social i {

    font-size: 1.2rem;

}



.footer-social a:hover {

    color: var(--primary-color);

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

}





.footer-bottom {

    text-align: center;

    margin-top: 40px;

    padding-top: 20px;

    border-top: 1px solid var(--border-color);

    color: var(--text-secondary);

}







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



@media(max-width: 1024px) {


    .about-content {

    grid-template-columns:1fr;

    }


    .hero {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .hero-left {

        align-items: center;

    }


    .hero-description {

        margin-left: auto;

        margin-right: auto;

    }


    .hero-buttons {

        justify-content: center;

    }


    .hero-right {

        margin-top: 40px;

    }


    .social-links {

        justify-content: center;

    }





    .featured-container {

        grid-template-columns: 1fr;

    }




    .projects-grid {

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

    }



    .skills-container {

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

    }



    .contact-container {

        grid-template-columns: 1fr;

    }


}







@media(max-width: 768px) {



    .section {

        padding: 70px 5%;

    }



    .timeline-item {

    padding-left:60px;

    }


.mindset-card {

    padding:25px;

    }


.nav-btn {

    display:none;

    }




    .section-heading h2 {

        font-size: 2rem;

    }




    .featured-container {

        padding: 25px;

    }



    .feature-grid {

        grid-template-columns: 1fr;

    }




    .projects-grid {

        grid-template-columns: 1fr;

    }




    .skills-container {

        grid-template-columns: 1fr;

    }




    .cert-card {

        flex-direction: column;

    }




    .experience-header {

        flex-direction: column;

    }




    .footer-container {

        grid-template-columns: 1fr;

        text-align: center;

    }




    .footer-social {

        justify-content: center;

    }


}
/* ===================================== */
/* Scroll Animation */
/* ===================================== */


.hidden {

    opacity: 0;

    transform: translateY(30px);

    transition: 0.6s ease;

}



.show {

    opacity: 1;

    transform: translateY(0);

}





/* Navbar scroll state */


header.scrolled {

    background: rgba(5,11,20,0.95);

}
.menu-button {

    display: none;

    background: none;

    border: none;

    color: var(--text-color);

    font-size: 1.8rem;

}



@media(max-width:768px){

    .menu-button{

        display:block;

    }


    .nav-links{

        position:absolute;

        top:80px;

        left:0;

        width:100%;

        background:#050b14;

        flex-direction:column;

        padding:30px;

        display:none;

    }


    .nav-links.active{

        display:flex;

    }

}
.nav-links a.active {

    color: var(--primary-color);

}



.terminal-command {
    color: #9ca3af;
    font-family: "JetBrains Mono", monospace;
    margin-bottom: 5px;
}

.terminal-value {
    color: #8ef5b2;
    font-family: "JetBrains Mono", monospace;
    margin-bottom: 18px;
    line-height: 1.8;
}

.terminal-value span {
    color: var(--primary-color);
    font-weight: 700;
}



/* ===================================== */
/* Background Effects */
/* ===================================== */


.background-blur {

    position:fixed;

    width:400px;

    height:400px;

    border-radius:50%;

    filter:blur(120px);

    opacity:.25;

    z-index:-1;

}



.blur-one {

    background:#00b4d8;

    top:-150px;

    left:-100px;

}



.blur-two {

    background:#0077b6;

    bottom:-150px;

    right:-100px;

}