/* General Reset */
    
body, html {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
        color: #333;
        scroll-behavior: smooth;
        background: url('pics/69191476.png') no-repeat center center fixed; /* Fixed background image */
        background-size: cover; /* Ensures the image covers the viewport */
    }
    
    
body, html {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
        color: #333;
        scroll-behavior: smooth;
        background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)), 
        url('pics/pic1.jpg') no-repeat center/cover; /* Fixed background image */
        background-size: cover; /* Ensures the image covers the viewport */

    }

@media only screen and (max-width: 768px) {
    body, html {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
        url('pics/69191476.png') no-repeat center center fixed;
        background-size: cover;
        background-attachment:fixed;
    }
}

section {
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease-in-out,transform 0.8s ease-in-out;
    background:rgba(255,255,255,0.9);
    /* Semi-transparent background for readability */
        padding:50px 20px;
    margin:20px 0;
    border-radius:10px;
    /* box-shadow:0 4px 6px rgba(0,0,0,0.1);
    */
}
section.in-view {
    opacity:1;
    transform:translateY(0);
}
/* Hero Section */
    #home {
    height:85vh;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-align:center;
    padding:20px;
    background:none;
    /* Removes the background override for the hero section */
}
#home .hero-content {
    max-width:800px;
}
#home h1 {
    font-size:4rem;
    margin-bottom:20px;
    line-height:1.2;
}
#home h1 span {
    color:#00aaff;
}
#home p {
    font-size:1.5rem;
    margin-bottom:30px;
    line-height:1.8;
}
#home button {
    padding:15px 30px;
    border:none;
    border-radius:5px;
    background-color:#00aaff;
    color:#fff;
    cursor:pointer;
    font-size:1.2rem;
    transition:background-color 0.3s ease;
}
#home button:hover {
    background-color:#0088cc;
}
/* Hero Section */
        #home {
    height:85vh;
    /* Keeping the height as before for the hero section */
            display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url('pics/bg.png') no-repeat center/cover;
    background-size:cover;
    /* Ensures the image covers the area */
            background-position:center;
    /* Centers the background */
            color:#fff;
    text-align:center;
    padding:20px;
    background:none;
}
#home .hero-content {
    height: 80vh;
    max-width:800px;
}
#home h1 {
    font-size:4rem;
    margin-bottom:20px;
    line-height:1.2;
}
#home h1 span {
    color:#00aaff;
}
#home p {
    font-size:1.5rem;
    margin-bottom:30px;
    line-height:1.8;
}
#home button {
    padding:15px 30px;
    border:none;
    border-radius:5px;
    background-color:#00aaff;
    color:#fff;
    cursor:pointer;
    font-size:1.2rem;
    transition:background-color 0.3s ease;
}
#home button:hover {
    background-color:#0088cc;
}
/* Header */
        header {
    background:#000000;
    color:#ffffff;
    padding:25px 20px;
    position:sticky;
    top:0;
    z-index:10;
}
header nav ul {
    list-style:none;
    display:flex;
    justify-content:center;
    margin:0;
    padding:0;
}
header nav ul li {
    margin:0 20px;
}
header nav ul li a {
    color:#fff;
    text-decoration:none;
}
header nav ul li a:hover {
    color:#317090;
}
/* About Section */
        #about {
    padding:50px 20px;
    background-color:#d7baf9;
    text-align:center;
    background:none;
}
#about h2 {
    font-size:2.5rem;
    margin-bottom:20px;
    color:#ffffff;
}
#about p {
    max-width:800px;
    margin:0 auto 30px;
    font-size:1.2rem;
    line-height:1.8;
    color:#ffffff;
}
#about .skills {
    display:flex;
    flex-wrap:wrap;
    /* Allows wrapping to the next line */
            justify-content:center;
    /* Centers the items on each row */
            gap:20px;
    /* Adds space between the skill items */
            margin-top:20px;
    /* Adds spacing above the skill section */
            max-width:1200px;
    /* Optional:Restrict width for better alignment */
            margin-left:auto;
    /* Center the skills section horizontally */
            margin-right:auto;
    /* Center the skills section horizontally */
}
#about .skill {
    background-color:rgba(0,0,0,0.5);
    /* Dark background with slight transparency */
            border:2px solid rgba(0,174,255,0.7);
    /* Semi-transparent border */
            padding:20px 30px;
    /* Increased padding for better spacing */
            border-radius:10px;
    /* Softer edges */
            box-shadow:0 4px 10px rgba(0,174,255,0.2);
    /* Subtle glowing effect */
            font-size:1.1rem;
    font-weight:500;
    color:#fff;
    /* Light text for contrast */
            text-align:center;
    /* Center-align the text */
            transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s;
    flex:1 1 1px;
    /* Allows items to grow,shrink,and wrap */
            max-width:300px;
    /* Restricts the maximum width for each skill item */
}
#about .skill:hover {
    transform:scale(1.1);
    /* Larger scale effect */
            box-shadow:0 8px 15px rgba(0,174,255,0.5);
    /* Brighter glow on hover */
            border-color:#00aeff;
    /* More vivid border color on hover */
            cursor:pointer;
}
/* Projects Section */
        #projects {
    padding:50px 20px;
    background-color:#f9f9f9;
    background:none;
}
#projects h2 {
    text-align:center;
    margin-bottom:20px;
    font-size:2.5rem;
    color:#ffffff;
}
.project-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    margin:0 auto;
    max-width:1200px;
}
.project {
    position:relative;
    overflow:hidden;
    border-radius:10px;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    cursor:pointer;
    transition:transform 0.3s;
    background-color:#d30404;
    /* Ensure the project background is white */
            display:block;
    background-color:rgba(0,0,0,0.5);
    /* Dark background with slight transparency */
            border:2px solid rgba(0,174,255,0.7);
    /* Semi-transparent border */
            padding:5px 5px;
}
.project:hover {
    transform:translateY(-10px);
}
.project img {
    border-radius:10px;
    width:100%;
    height:200px;
    object-fit:cover;
}
.project-title {
    font-size:1.2rem;
    font-weight:500;
    text-align:center;
    margin:5px 0 5px;
    color:#ffffff;
    /* Highlighted color for titles */
            transition:color 0.3s ease;
}
.project:hover .project-title {
    color:#000000;
    /* Slightly darker hover effect */
}
.project .project-details {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.7);
    color:#ffffff;
    padding:20px;
    transform:translateY(100%);
    transition:transform 0.3s;
}
.project:hover .project-details {
    transform:translateY(0);
}
.project-details h3 {
    margin:0 0 10px;
    font-size:1.5rem;
}
.project-details p {
    margin:0;
    font-size:1rem;
}
/* For the specific blogging project */
        .project-blogging {
    position:relative;
}
.project-blogging a {
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    /* Ensures the link is clickable above the content */
            text-decoration:none;
    background:rgba(0,0,0,0);
    /* Transparent link */
}
/* Optional:Add a subtle hover effect on the entire blogging project */
        .project-blogging:hover .project-details {
    background:rgba(0,0,0,0.8);
    /* Slightly darkens the overlay */
}
/* Contact Section */
        #contact {
    padding:50px 20px;
    background-color:#1e1e2f;
    color:#fff;
    text-align:center;
    background:none;
}
#contact h2 {
    margin-bottom:20px;
    font-size:2.5rem;
}
#contact form {
    max-width:600px;
    margin:0 auto;
}
#contact form input,#contact form textarea {
    width:95%;
    color: #fff;
    padding:15px;
    margin-bottom:20px;
    border:none;
    border-radius:5px;
    font-size:1rem;
    background-color:rgba(255,255,255,0.153);
}
#contact form textarea {
    color: #fff;
    resize:none;
    height:150px;
}
#contact form button {
    background-color:#00aaff;
    color:#fff;
    border:none;
    padding:15px 30px;
    border-radius:5px;
    cursor:pointer;
    font-size:1.2rem;
    transition:background-color 0.3s;
}
#contact form button:hover {
    background-color:#0088cc;
}

#contact form input.invalid {
      border: 2px solid #ff4d4d;
 }

 #contact form input.valid {
      border: 2px solid #00c851;
 }

input.invalid, textarea.invalid {
     border: 2px solid red;
 }

input.valid, textarea.valid {
    border: 2px solid green;
}

.error-message {
      display: none;
    color: red;
    font-size: 12px;
    margin-top: 5px;
}
/* Footer */
        footer {
    background-color:#000000;
    /* Dark background */
            color:#fff;
    padding:20px 0;
    text-align:center;
}
footer .footer-content {
    max-width:1200px;
    margin:0 auto;
}
footer .footer-content p {
    margin:0;
    font-size:1.1rem;
}
footer .social-links {
    margin-top:10px;
}
footer .social-links a {
    color:#fff;
    text-decoration:none;
    margin:0 10px;
    font-size:1rem;
}
footer .social-links a:hover {
    color:#00aaff;
    /* Hover color */
}
/* Responsive Adjustments */
@media (max-width:768px) {
    #contact form input,#contact form textarea {
    padding:12px;
    font-size:0.9rem;
}
}