/* General Section Styling */
section {
    padding: 80px 100px;  /* Increase padding for better spacing */
    margin-bottom: 60px;  /* Increase margin between sections */
    min-height: 400px;
    border-radius: 15px;  /* Slightly larger border radius for softer edges */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);  /* Add soft shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
    background-color: transparent;  /* Make background transparent to use body gradient */
}

section:hover {
    transform: translateY(-5px);  /* Slight hover animation */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);  /* Enhance shadow on hover */
}

html, body {
    width: 100%;
    height: 100%;
    font-family: 'Nunito', sans-serif;
}

    body {
        background-color: #191332;
        color: #333;
        line-height: 1.6;
        font-family: 'Nunito', sans-serif;
    }

/* General Section Styling */
section {
    padding: 80px 100px;  /* Increase padding for better spacing */
    margin-bottom: 60px;  /* Increase margin between sections */
    min-height: 400px;
    background-color: #191332;
    border-radius: 15px;  /* Slightly larger border radius for softer edges */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);  /* Add soft shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

section:hover {
    transform: translateY(-5px);  /* Slight hover animation */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);  /* Enhance shadow on hover */
}

/* Project Details Section */
.project-details {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.project-details p {
    font-size: 1.2em;
    color: #333;
    line-height: 1.8;  /* Increase line-height for readability */
    margin-top: 20px;
    text-align: justify;
}

/* Section Block Styling */
.section {
    background-color: #edebeb;
    padding: 40px;  /* Increased padding */
    margin: 30px auto;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);  /* Add shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.section ul {
    list-style-type: none;
    padding-left: 0;
}

.section ul li {
    font-size: 1.1em;
    color: #333;
    margin: 15px 0;
}

/* Text & Headings Styling */
h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #5255a2;
    text-align: center;
    margin-bottom: 40px;  /* Add more space below */
    margin-top: 20px;  /* Add margin-top to move the h1 down */
    position: relative;
    font-size: 3.5em;  /* Make h1 larger */
    line-height: 1.2;  /* Adjust line-height */
}

h2, h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #5255a2;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    font-size: 2.2em;
}

h2::after, h3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background-color: #fdc800;
}

.section h2 {
    margin-bottom: 20px;
    font-size: 2em;
}

/* Preformatted Code Block Styling */
.section pre {
    background-color: #011832;
    color: #f1c40f;
    padding: 20px;
    border-radius: 5px;
    overflow-x: auto;
    margin-top: 20px;
}

/* Download Button */
.download-button {
    display: inline-block;
    padding: 12px 25px;
    color: #ffffff;
    background-color: #011832;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;  /* Add hover transition */
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Add a slight shadow */
}

.download-button:hover {
    background-color: #335580;
    transform: translateY(-3px);  /* Button lifts slightly on hover */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);  /* Enhanced shadow on hover */
}

/* Footer Styling */
.footer {
    background-color: #5255a2;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 1em;
    width: 100%;
    margin-top: 0;  /* Remove extra margin above footer */
    margin-bottom: 0; /* Ensure the footer margin is controlled */
    border-radius: 0 0 10px 10px;
    display: flex;
    justify-content: center; /* Horizontally center the content */
    align-items: center;    /* Vertically center the content */
    clear: both;  /* Prevent overflow issues */
    position: relative;
}

.footer p {
    margin: 0;
    color: #e9e9e9;
}

/* Responsive Design Tweaks */
@media (max-width: 768px) {
    section {
        padding: 50px 20px;
    }

    h1 {
        font-size: 2.8em;
    }

    h2, h3 {
        font-size: 2em;
    }

    .project-details p, .section ul li {
        font-size: 1em;
    }

    .download-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    h2, h3 {
        font-size: 1.8em;
    }

    body {
        font-size: 1em;
    }
}

/* Style for project intro section */
#project-intro {
    text-align: center;
    padding: 60px 20px;  /* Increase padding for more space */
    background-color: #edebeb;  /* Keep background consistent */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);  /* Soft shadow for a subtle 3D effect */
    margin-bottom: 40px;
    max-width: 1200px; /* Limit the width for better readability */
    margin: auto; /* Center the section on the page */
}

#project-intro h1 {
    font-size: 3em;  /* Make the title more prominent */
    font-weight: bold;
    margin-bottom: 20px;  /* Add space below the title */
    line-height: 1.2;  /* Improve readability */
    position: relative;
}

#project-intro h1::after {
    content: '';
    width: 80px;
    height: 4px;
    background-color: #fdc800;
    display: block;
    margin: 20px auto;  /* Center the line under the heading */
    border-radius: 2px; /* Soften the separator line */
}

#project-intro p {
    font-size: 1.3em;  /* Slightly increase the paragraph size */
    line-height: 1.4;  /* Increase line height for better readability */
    margin-bottom: 20px;  /* Space out the paragraphs */
    max-width: 900px;  /* Limit width for paragraph content */
    margin: 0 auto;  /* Center the paragraphs */
    text-align: justify; /* Justify the text for clean edges */
}


/* Back button with icon */
.back-button {
    background-color: #5255a2;
    color: white;
    padding: 10px 20px;
    font-size: 1.5em; /* Icon size */
    text-decoration: none;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.back-button i {
    font-size: 1.5em; /* Icon size */
}

.back-button:hover {
    background-color: #3f4187; /* Darker shade for hover effect */
}

/* Responsive Design Tweaks for download button */
@media (max-width: 768px) {
    .download-button {
        width: 100%;
        padding: 10px; /* Adjust padding for smaller screens */
        font-size: 1.1em; /* Make the font size slightly larger */
    }
}

@media (max-width: 480px) {
    .download-button {
        width: 100%; /* Ensure button takes up full width */
        padding: 12px; /* Comfortable padding for smaller devices */
        font-size: 1em; /* Adjust the font size */
        border-radius: 6px; /* Softer edges for a better mobile look */
    }
}