/*space added so scroll bar dosent cover part of the sections and smooth scrolling to sections*/
html {
    scroll-padding-top: 3rem;
    scroll-behavior: smooth;
}

/* set width and heigh of page, hides overflow meaning text out of screen isnt shown so no horizontal scroll bar,
set background color, and general font family */
body {
    width: 100%;
    height: auto;
    overflow-x: hidden;
    background-color: #f6f9fc;     
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html, body {
    padding: 0;
    margin: 0;
}

/*style name with font,size,weight,colour, letter spacing, and transition for hover effect*/
.logo span {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    background: linear-gradient(to bottom, #60a5fa, #2563eb); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
    display: inline-block;
    padding-left: 3rem;
    transition: transform 0.3s ease;
    cursor: default;
}

/*hover effect for logo, moves it up and scales it slightly*/
.logo span:hover {
    transform: translateY(-4px) scale(1.05);
}

/*froze nav bar to the top of the page, set width and height, display flex to align items, justify content to space between logo and nav bar, background color, text color, box shadow for depth, and z-index to keep it on top of other elements*/
.nav-container {   
    position: fixed;
    top: 0;
    left: 0;                  
    width: 100%;
    z-index: 100;
    height: 4rem;
    margin: 0 auto;         /* Centers the container */             
    display: flex;
    justify-content: space-between;
    background: #f6f9fc;
    align-items: center;
    box-shadow: 0 5px 4px rgba(0, 0, 0, 0.1);

}


/*style nav bar, display flex to align items, gap between items, padding on right, font family, weight, and size*/
.nav-bar{
    display: flex;
    padding-right: 3rem;
    gap: 1.5rem;
    font-family: 'Courier New', Courier, monospace;
}

/*adding letter spacing*/
.nav-bar a{
    letter-spacing: 1px;
}

/*styling the nav-bar section links, removing underline, making sure the transitions i apply to them later are smooth*/
.link a {
    position: relative;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2em;
    color: #1f2937;
    transition: color 0.2s ease, transform 0.3s ease;
    display: inline-block;
}

/*hover effect for nav-bar links, changes color and moves it up slightly*/
.link a:hover,
.link a.active {
    color: #3b82f6;
    transform: translateY(-2px) scale(1.05); 
}

/*active link effect, changes color and adds a line below it*/
.link a.active::after {
    background-color: #3b82f6;
    width: 70%; 
}

/*line below the link, position absolute to place it below the text, centered, width 0% by default, height 2px, background color transparent, and transition for smooth effect*/
.link a::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 2px;
    background-color: transparent;
    transition: all 0.3s ease;
}

/* general section styling, min-height to fill the screen, padding for spacing*/
section {
    min-height: 100vh;
    padding: 1rem 2rem 2rem 5rem;
    overflow-x: hidden;
}

h3, h4, h5 {
    color: #1f2937;
}

h2{
    color: #1f2937;
    font-size: 2rem;
    font-weight: bolder;
}

ul li {
    margin-bottom: 5px; 
}

/*general font color, size, and line height for paragraphs and list items*/
p, li {
    color: #1f2937;
    font-size: 1rem;
    line-height: 1.6;
}

/*about section*/

.about-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding-top: 8rem;
}
.intro-heading {
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.intro-heading .typing {
    background: linear-gradient(to right, #60a5fa, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-text {
    font-size: 1.05rem;
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
    color: #374151;
}

.about-text a {
    color: #2563eb;
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
}

.about-text a:hover {
    color: #2563eb;
    transform: translateY(-3px); 
}


/*set container of the socials section to flex and add gap between items*/
.socials {
    display: flex;
    justify-content: center;
    gap: 15px;                    
}

/*style the social media icons, display inline-block, font size, color, set transition for smoothhover effect, and cursor pointer*/
.socials a {
    margin: 0 10px;
    padding-top: 50px;
    font-size: 2rem;
    color: indianred;
    transition: color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

/*hover effect for social media icons, changes color and moves it up slightly*/
.socials a:hover {
    color: #3b82f6;        
    transform: translateY(-2px); 
}

/*projects section*/
.projects{
    max-width: 800px;
    margin: 0 auto;
}

.projects span{
    font-style: italic;
    font-weight: normal;
}

.projects h3 {
    margin-bottom: 0;
}

.projects h3 + p {
    margin-top: 0;
}


/*experience section*/
.timeline {
    margin: 0 auto;
    max-width: 800px;
    display: grid;
    grid-template-columns: 1fr 3px 1fr; /*making right and left columns with a 3px middle verticle line*/
}

.timeline__component {
    margin: 0 2em 2em 2em; /*margin around each component*/
}

.timeline__component--bg {
    padding: 1.5em;
    padding-top: 0;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}


.timeline__component--bottom {
    margin-bottom: 0;
}

.timeline__middle {
    position: relative;
    background: #2563eb;
}

.timeline__point {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* centers the point */
    width: 15px;
    height: 15px;
    background: #2563eb;
    border-radius: 50%;   /*  makes it a circle */
}

.timeline__point--bottom {
    top: initial;
    bottom: 0;
}

.timeline__date--right {
    text-align: right;
}

.timeline__component--bg span{
    font-style: italic;
    font-weight: normal;
}

.timeline__date--right span, .timeline__date span{
    background-color: #e0dede;
    font-style: italic;
    font-weight: 500;
}

#Experience{
    padding-bottom: 5vh;
}

/*certifications section*/
.cert {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.cert-img {
    margin-top: 1rem; 
}

.cert-img img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    cursor: pointer;
}

/* Modal container */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
}

/* The image inside the modal */
.modal-content {
    display: block;
    margin: auto;
    max-width: 90%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

/* Close button */
.close {
    position: absolute;
    top: 30px;
    right: 50px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.close:hover {
    color: #ccc;
}

#Certifications {
    padding-bottom: 0;
    margin-bottom: 0;
    }

.cert-img {
    margin-bottom: 0;
    }

/* Footer styling */
.site-footer {
    background-color: #1f2937;
    padding: 1rem;      
}

.site-footer p{
    color: white;
    font-size: 0.9rem;
    cursor: default;
}

.footer{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

.copyright{
    grid-column: 2;
    text-align: center;
}

.top{
    grid-column: 3;
    text-align: right;
}

.top a{
    text-decoration: underline;
    color: white;
    font-size: 0.9rem;
    display: inline-block;
    transition: transform 0.5s ease;
}

.top a:hover{
    transform: translateY(-2px) scale(1.05);
}






/*breakpoints*/

@media (min-width: 992px) and (max-width: 1199px) {  

    .about-container {
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
        padding-top: 8rem;
    }

}

@media (min-width: 768px) and (max-width: 991px) {
    
    .about-container {
        max-width: 500px;
        margin: 0 auto;
        text-align: center;
        padding-top: 8rem;
    }

    ul li {
        margin-bottom: 15px; 
    }

    .timeline {
        grid-template-columns: 1fr; 
    }

    .timeline__middle {
        display: none; /
    }

    .timeline__component {
        margin: 0 0 2em 0;
    }

    .timeline__component--bg {
        padding: 1em; 
    }

    .timeline__date--right {
        text-align: left;
    }
    
    .timeline__component:nth-child(4) { order: 3; }
    .timeline__component:nth-child(6) { order: 4; } 
    .timeline__component:nth-child(9) { order: 6; }

}

@media (max-width: 767px) {
    
    html{
        scroll-padding-top: 0;
    }

    ul li {
        margin-bottom: 25px; 
    }

    section{
        padding: 1rem 2rem 2rem 2rem;
    }

    .nav-container{
        display:None;
    }
    .about-container {
        max-width: 300px;
        margin: 0 auto;
        text-align: left;
        padding-top: 10px;
    }

    .intro-heading {
        font-size: 2.5rem;
    }

    .intro-heading .typing {
        display: block; 
        margin-top: 0.5rem;
        min-height: 1.2em;   
    }

    .timeline {
        grid-template-columns: 1fr; 
    }

    .timeline__middle {
        display: none; /
    }

    .timeline__component {
        margin: 0 0 2em 0;
    }

    .timeline__component--bg {
        padding: 1em; 
    }

    .timeline__date--right {
        text-align: left;
    }
    
    .timeline__component:nth-child(4) { order: 3; }
    .timeline__component:nth-child(6) { order: 4; } 
    .timeline__component:nth-child(9) { order: 6; }

    .cert {
        grid-template-columns: 1fr;
        max-width: 100%;
        margin: 0 auto;
    }

    .cert-img img {
        max-width: 250px;
    }

    #Certifications{
        padding-bottom: 100px;
    }

    .footer{
        display: grid;
        grid-template-columns: 1fr 80px;
    }

    .copyright{
        grid-column: 1;
    }

    .top{
        grid-column: 2;
    }

}