* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior:smooth;
    scroll-padding-top: 80px;
}

body {
    background-color: #fafafa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.6;
    color: #333;
}

header {
    position: sticky;
    top: 0;
    background-color: #fafafa; /* Prevent content from merging */
    z-index: 100;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

section {
    padding: 40px 10px; /* Adds space for navbar visibility */
    min-height: 100vh; /* Ensures each section fills the screen */
}

.logo h1 {
    font-size: 35px;
    font-weight: bold;
    color: #333;

}

.logo a {
    text-decoration: none;
    color: inherit;
    cursor: help;
}

.nav-links {
    display:flex;
    gap: 45px;
    list-style: none;
    margin-right: 20px;
}

.nav-links a{
    /* color: #333; */
    color: #333;
    font-weight: 600;
    text-decoration: none;
    font-size: 1.3em;
}


.nav-links a::after{
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: rgb(16, 15, 17);
    transition: width 0.3s ease-in-out;
}

.nav-links a:hover::after{
    width: 100%;
}

.hamburger i {
    font-size: 1.3em;
    font-weight: 600;
    cursor: pointer;
    display: none;
}


/* Hero section  */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
}

.hero-image img{
    width: 400px;
    height: 400px;
    border-radius: 80%;
    object-fit: cover;
    /* background-color: #f2f2f2; */
    
}

.hero-text h1{
    color: #333;
    font-size: 48px;
    margin-bottom: 10px;
}

.hero-text p{
    font-size: 20px;
    color: #666;
    margin-bottom: 20px;
}

.cta-button{
    text-decoration:none;
    background-color:#2d336b;
    padding: 10px;
    color: rgb(221, 212, 212);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.cta-button:hover{
    box-shadow: 2px 3px 3px gray;
}

/* Skills section  */

.skills-section {
    margin: 0 20px;
}
.my-skills {
    margin: 70px auto;
    height: 430px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.skills-section h1{
    text-align: center;
    padding: 15px;
    font-size: 40px;
    border-radius: 25px;
    color: #271731;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}

.skills-section h2 {
    text-align: center;
    padding-top: 15px;
}

li {
    list-style-type: none;
}

.web-skills, .programming{ /*style the text*/
	width: 40%;
	margin: 0 50px;
    border-radius: 10px;
    height: fit-content;
	color: #333;
    background-color: #fafafa;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.web-skills li, .programming li{ 
	margin: 20px 20px;
    color: #666;
}

.bar{ 
	display: block;
	height: 4px;
    margin: 0 3px;
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.bar span{ 
	height: 4px;
	float: left;
	background-color: rgba(134, 15, 138, 0.8);
    
}

.html{ 
	animation: html 1s forwards;
}

.css{ 
	animation: css 1s forwards;
}

.javascript{ 
	animation: javascript 1s forwards;
}

.php{ 
	animation: php 4s forwards;
}

.c {
    animation: c 2s forwards;
}

.java {
    animation: java 2s forwards;
}

.python {
    animation: python 2s forwards;
}

@keyframes html{ /*animate html skills*/
	0%{
		width: 0%;
	}

	100%{
		width: 67%;
	}
}
@keyframes css{ /*animate css skills*/
	0%{
		width: 0%;
	}

	100%{
		width: 40%;
	}
}
@keyframes javascript{ /*animate javascript skills*/
	0%{
		width: 0%;
	}

	100%{
		width: 20%;
	}
}
@keyframes php{ /*animate php skills*/
	0%{
    width: 0%;
	}

	100%{
    width: 29%;
	}
}

@keyframes c{
    0% {
        width: 0%;
    }
    100% {
        width: 70%;
    }
}
@keyframes java{
    0% {
        width: 0%;
    }
    100% {
        width: 20%;
    }
}
@keyframes python{
    0% {
        width: 0%;
    }
    100% {
        width: 15%;
    }
}

/* Project section  */

.projects-section{
    text-align: center;
    padding: 80px 20px;
}

.projects-section h1{
    text-align: center;
    padding: 15px;
    font-size: 40px;
    border-radius: 25px;
    color: #271731;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

    
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 100%;
    margin-top: 50px;
}

.project-card {
    background-color: #fafafa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* contact section  */

.contact h1{
    text-align: center;
    padding: 15px;
    font-size: 40px;
    border-radius: 25px;
    color: #271731;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fafafa;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

input,textarea{
    background-color:#fafafa;
}

.cta-button {
    background-color: #2D336B;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #1a1f4b;
}



/* Footer section  */
.below {
    text-align: center;
    height: 10px;
    
}

.below h3{
    color: #afa8a8;
    background-color: #2D336B;
}