@import url('https://fonts.googleapis.com/css2?family=Boldonse&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



/* General styling for the body */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #190933;
    /* 190933 Dark background */
    color: #CAD2C5;
    /* Light text for readability */
}

/* Header styling */
header {
    background-color: #371470;
    /* Soft purple header */
    color: #f5e0b7;
    /* Light text for contrast */
    padding-top: 15px;
    padding-bottom: 0.5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    align-self: center;
}

a {
    color: #CAD2C5;
    /* Light text links */
    text-decoration: none;
}

a:hover {
    color: #ffffff;
    /* Light teal hover effect */
}

.panning-image {
    width: 100%;
    height: 500px;
    background-image: url('Pictures/GifPortfolio.gif');
    background-repeat: repeat-x;
    background-size: auto 100%;
    /* Ensures it scales properly */
    animation: pan-right 60s linear infinite;
    /* Pan the image to the right */
    padding: 0px;
    margin: 0px;
}

@keyframes pan-right {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -600% 0;
    }
}



/* Navigation styling */
nav ul {
    list-style-type: none;
    padding: 3px;
    text-align: center;

}

nav ul li {
    display: inline-block;
    margin: 0 clamp(0.2rem, 2vw, 1rem);
    font-size: clamp(1rem, 4vw, 1.3rem);

}

nav ul li a {
    color: #ffcc00;
    text-decoration: none;
    font-family: Poppins, sans-serif;
    font-weight: 300;
}



/* Section styling */
section {
    padding: 40px 20px;
    text-align: left;
    background-color: #190933;
    /* Dark background for sections */
}

header h1 {
    font-family: "Poppins", system-ui;
    font-size: clamp(2rem, 4vw, 4rem);
    /* Responsive, but can get smaller if needed */
    font-weight: 700;
    color: #f5e0b7;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* Responsive adjustments */
/* @media (max-width: 800px) {
    header h1 {
        font-size: 3rem; 
    }
}

@media (max-width: 600px) {
    header h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 400px) {
    header h1 {
        font-size: 2rem;
    }
} */


h2,
h3,
h4,
h5 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    /* Add subtle shadow to headings */
}


h2 {
    color: #CAD2C5;
    /* Soft lavender headings */
    margin-bottom: 20px;
    font-size: 3.0em;
    text-align: center;
}

h3 {
    color: #CAD2C5;
    /* Soft lavender headings */
    margin-bottom: 20px;
    font-size: 2.0em;
    /* font-weight: 500; */

}

h4 {
    color: #CAD2C5;
    /* Soft lavender headings */
    margin-bottom: 20px;
    font-size: 1.5em;
    font-weight: 500;
}



p {
    max-width: 90%;
    margin: 0 auto 20px auto;
    line-height: 1.6;
    font-size: 1.3em;
    color: #CAD2C5;
    /* Light text */
}

ul,
ol {
    max-width: 90%;
    margin: 0 auto 20px auto;
    line-height: 1.6;
    font-size: 1.3em;
    color: #CAD2C5;
    /* Light text */
}

section div p {
    max-width: 100%;
}

.about-section {
    padding: 3rem 3%;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: start;
}

.about-title {
    display: flex;
    flex-direction: column;
    /* font-size: clamp(4rem, 5vw, 10rem); */
    line-height: 1.2;
    color: #f5f5f5;
    text-align: right;
}

.medium-text {
    font-style: italic;
    font-weight: 200;
    /* font-size: 7.5em; */
    font-size: clamp(3rem, 7vw, 10rem);

}

.big-text {
    font-size: clamp(4rem, 6vw, 10rem);
    /* font-size: 6.75em; */
    font-weight: 700;
    white-space: nowrap;
    /* Prevents text from wrapping */

}

.about-content h3 {
    margin-top: 1rem;
    color: #ffcc00;
    /* Accent color */
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.about-content p {
    font-size: clamp(1.0rem, 4vw, 1.5rem);
    line-height: 1.6;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-title {
        font-size: clamp(3rem, 7vw, 6rem);
        align-items: center;
    }
}






/* Form and button styling */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

form input,
form textarea {
    padding: 12px;
    width: 320px;
    border: 2px solid #CAD2C5;
    /* Soft lavender borders for inputs */
    border-radius: 8px;
    background-color: #665687;
    /* Dark background for inputs */
    color: #CAD2C5;
    /* Light text */
}

form input:focus,
form textarea:focus {
    outline: none;
    border-color: #5DD9C1;
    /* Light teal focus state */
}

form button {
    padding: 12px 25px;
    background-color: #5DD9C1;
    /* Light teal button */
    color: #152731;
    /* Dark button text */
    border: none;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.3s ease;
}

form button:hover {
    background-color: #CAD2C5;
    /* Soft lavender on hover */
    color: #152731;
    /* Dark text on hover */
}

/* Footer styling */
footer {
    background-color: #371470;
    /* Soft purple footer */
    color: #CAD2C5;
    /* Light text */
    padding: 50px;
    text-align: center;
    margin-top: 30px;
    font-size: 1em;
}

footer a {
    color: #5DD9C1;
    /* Light teal links in footer */
    text-decoration: none;
    font-weight: bold;
}

footer a:hover {

    color: #b084cc;
    /* Light text on hover */
}

/* Project Page Styles */
#project-details {
    padding: 50px;
    background-color: #231942;
    /* Dark background for project  */
    color: #CAD2C5;
    /* Light text */
    margin: 20px auto;

}

#project-details h2 {
    color: #ffcc00;
    font-size: clamp(2rem, 2vw, 3rem);
    /* Responsive font size */
}

#project-details h3 {
    color: #f5e0b7;
    /* Soft lavender headings */
    max-width: 90%;
    margin: 20px 20px auto;
    font-size: clamp(1.5rem, 2vw, 2rem);
    /* Responsive font size */
    margin-left: 5%;

}

#project-details p,
#project-details ul,
#project-details li {
    font-size: clamp(1rem, 3vw, 1.3rem);
    /* Responsive font size */
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    /* Center the image */
    max-width: 80%;
    /* Set a maximum width */
    animation: fadeIn 3s ease-in-out;
    /* Add fade-in animation */
    position: relative;
    /* For immersive effects */
    overflow: hidden;
    /* Hide overflow for animations */
}

.image-container img {
    max-width: 100%;
    margin: 1%;
    border-radius: 15px;
    /* Add rounded corners */
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    /* Smooth transition for hover effects */
    pointer-events: auto;
    /* Ensure clicks are allowed */

}

.image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    opacity: 0;
    transition: opacity 0.5s ease;
}

.image-container-scrollable {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 1rem auto;
    animation: fadeIn 3s ease-in-out;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
    gap: 2rem;
    max-width: 90%;
    padding-bottom: 2rem;
}

.image-container-scrollable img{

    margin-right: 5px;
    border-radius: 33px;
    border: 5px solid rgb(0, 0, 0);
    box-shadow: 5 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: auto;
    height: 37rem;
}

.screenshot-container-scrollable {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 1rem auto;
    animation: fadeIn 3s ease-in-out;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
    gap: 2rem;
    max-width: 90%;
    padding-bottom: 2rem;
}

.screenshot-container-scrollable img{
    margin-right: 5px;
    border-radius: 15px;
    box-shadow: 5 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 70%;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.video-container video {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    animation: fadeIn 3s ease-in-out;
    color: #ffffff;
    /* Responsive sizing for portrait vs landscape */
    max-width: 40rem;
    max-height: 30rem;
    width: auto;
    height: auto;
    object-fit: contain;
    
}



/* Portrait video: height is the constraint */
.video-container video[height][width]:not([width=""]):not([height=""]) {
    aspect-ratio: attr(width number) / attr(height number);
    max-width: 20rem;
    max-height: 30rem;
}

/* Landscape video: width is the constraint */
.video-container video[width][height]:not([width=""]):not([height=""]) {
    aspect-ratio: attr(width number) / attr(height number);
    max-width: 40rem;
    max-height: 20rem;
}

@media (orientation: portrait) {
    .video-container video {
        max-width: 100%;
        max-height: 40rem;
    }
}

@media (orientation: landscape) {
    .video-container video {
        max-width: 70%;
        max-height: 45rem;
    }
}

.video-container iframe {
    display: block;
    margin: 0 auto;
    border-radius: 15px;
    pointer-events: auto;
    /* Responsive aspect ratio for YouTube (16:9) */
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    height: auto;
    /* Remove fixed height to allow aspect-ratio to control height */
    border: none;
}

.iphone-video video {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    position: relative;
    border-radius: 45px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    animation: fadeIn 3s ease-in-out;
    color: #ffffff;
    max-width: 20rem;
    width: auto;
    height: auto;
    object-fit: contain;
    border: #000000 7px solid;
}


/* Responsive Design */
@media (max-width: 768px) {


    form input,
    form textarea {
        width: 90%;
    }

    form button {
        width: 90%;
    }
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
    /* Enable smooth scrolling for anchor links */
}

/* Additional Styles for Enhancements */

form button:focus {
    outline: none;
    /* Remove default outline */
    box-shadow: 0 0 5px #5DD9C1;
    /* Add glow effect on focus */
}

/* Responsive styles for mobile devices */

/* .project-details iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    justify-content: center;
    align-items: center;
} */

/* Project list styling */
.project-list {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.project {
    background-color: rgb(106, 77, 165);
    padding: 0px 20px;
    border-radius: 10px;
    width: 25rem;
    max-width: 80%;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 600px) and (max-width: 1400px) {
    .project {
        width: auto;
        max-width: 20rem;
        min-width: 10rem;
    }
}
.project h3 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: #ffcc00;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.project h4 {
    color: #f5e0b7;
    margin-bottom: 10px;
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    font-weight: 600;
}

.project p {
    font-size: clamp(0.9rem, 1vw, 1.2rem);
    color: #CAD2C5;
    align-self: justify;
}

.label {
    font-size: clamp(1rem, 1vw, 1.2rem);
    font-weight: 400;
    display: block;
    color: #ace8ab;
}

.view-project {
    display: none;
    /* Hide by default */
    position: relative;
    /* Position it absolutely within the project div */
    bottom: 10px;
    /* Position it at the bottom */
    left: 10px;
    /* Position it to the left */
    color: #190933;
    /* Dark text color */
    padding: 5px 10px;
    /* Padding for the button */
    border-radius: 5px;
    /* Rounded corners */
    transition: opacity 0.3s ease;
    /* Smooth transition for opacity */
}

.project:hover {
    transform: scale(1.03);
    background-color: #b084cc;
    /* Soft purple background for projects */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    /* Enhance shadow on hover */
}

.project:hover .view-project {
    display: block;
    /* Show the pop-out text on hover */
    opacity: 1;
    /* Ensure it's fully visible */
}

/* Project Settings for Category */

.project-category {
    cursor: pointer;
    margin: 20px auto;
    padding: 20px;
    background-color: #371470;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    width: 95rem;
    max-width: 90%;
}

.project-category:hover {
    background-color: #4e1d9c;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    /* Enhance shadow on hover */
}

.project-category h3 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    /* Responsive font size */
    color: #ffcc00;
    margin: 0;
}

.project-list {
    display: flex; 
    max-height: 100rem;
    overflow: hidden;
    opacity: 1;
    transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.5s, padding-top 0.5s;
    margin-top: 0rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
}
.project-list.hidden {
    max-height: 0;
    margin-top: 0rem;
    pointer-events: none;
    opacity: 0;
    padding-bottom: 0;
    padding-top: 0;
}

.project-category {
    position: relative;
    overflow: hidden;
}

.game-bg-svg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: url('Pictures/GameBGProjects.svg') no-repeat right center;
    background-size: 40% auto; /* Only middle part when closed */
    transition: background-size 0.6s cubic-bezier(0.4,0,0.2,1);
    opacity: 0.25; /* Optional: make it subtle */
    margin-top: -100px;
}
.coding-bg-svg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: url('Pictures/CodingBGProjects.svg') no-repeat right center;
    background-size: 40% auto; /* Only middle part when closed */
    transition: background-size 0.6s cubic-bezier(0.4,0,0.2,1), padding-top 0.6s;
    opacity: 0.5; /* Optional: make it subtle */
    padding-top: 420px;

}
.design-bg-svg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: url('Pictures/DesignBGProjects.svg') no-repeat right center;
    background-size: 40% auto; /* Only middle part when closed */
    transition: background-size 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.6s; 
    opacity: 0.25; /* Optional: make it subtle */
    margin-top: -50px;

}
.music-bg-svg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: url('Pictures/MusicBGProjects.svg') no-repeat right center;
    background-size: 40% auto; /* Only middle part when closed */
    transition: background-size 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.6s; 
    opacity: 0.25; /* Optional: make it subtle */
    padding-top: 200px;
}
/* When open, scale SVG to fill */
.project-list.hidden .game-bg-svg {
    background-size: 50% 50%;
    opacity: 1; /* Make it more visible when not hidden */
}

.project {
    transition: filter 0.3s;
}

/* Only blur non-hovered .project if any .project is hovered */
.project-list:has(.project:hover) .project:not(:hover) {
    filter: blur(3px);
}

.project:hover {
    filter: none;
    z-index: 2;
}

.project-category {
    position: relative;
    overflow: hidden;
}

.game-bg-svg,
.coding-bg-svg,
.design-bg-svg,
.music-bg-svg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    pointer-events: none;
    /* ...other styles... */
}

/* Ensure content is above the SVG background */
.project-category > h3,
.project-category > .project-list {
    position: relative;
    z-index: 1;
}

.button-container {
    display: flex;
    justify-content: left;
    gap: 20px;
    margin: 1% 5%;
}

.button {
    padding: 10px 20px;
    background-color: #3599eb;
    /* Light teal button */
    color: #152731;
    /* Dark button text */
    text-decoration: none;
    border-radius: 13px;
    font-size: 1em;
    font-weight: bold;
    transition: background 0.3s ease;
}

.button:hover {
    background-color: #CAD2C5;
    /* Soft lavender on hover */
    color: #152731;
    /* Dark text on hover */
}

.image-carousel {
    overflow: hidden;
    /* Hide overflow for smooth scrolling */
    width: 100%;
    position: relative;
    padding: 10px;
    margin: 0px;
    border: #ffcc00 4px solid;
    border-radius: 10px;
    /* Rounded corners */
}

.carousel-track {
    display: flex;
    animation: scroll-left 10s linear infinite;
    will-change: transform;
    /* Optimize animation performance */
    width: fit-content;
}

.carousel-track img {
    flex-shrink: 0;
    margin-right: 10px;
    width: auto;
    /* Ensure images scale properly */
    height: 20rem;
    /* Maintain consistent height */
    border-radius: 5px;
    /* Add rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Add shadow for depth */
}

/* Duplicate images for seamless scrolling */
.carousel-track::after {
    content: '';
    display: flex;
    width: 100%;
    background: inherit;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Adjust to match the width of the duplicated content */
    }
}

.PDFview {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem auto;
    /* Center the PDF */
    animation: fadeIn 3s ease-in-out;
    /* Add fade-in animation */
    position: relative;
    /* For immersive effects */
    overflow: hidden;
    /* Hide overflow for animations */
    width: clamp(20rem, 90%, 100%);
    /* Set a maximum width */
    height: 70rem;
    /* Set a maximum height */
}

.image-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#gallery-image {
    width: 500px;
    height: auto;
}

#name {
    text-align: center;
    font-size: 1.5em;
    width: 30rem;
    font-family: poppins;
    font-weight: 400;
    max-width: 92%;
    height: 1rem;

}

#email {
    text-align: center;
    font-size: 1.5em;
    width: 30rem;
    font-family: poppins;
    font-weight: 400;
    max-width: 92%;
    height: 1rem;

}

#message {
    font-size: 1.5em;
    /* Light text for message */
    text-align: left;
    height: 10rem;
    width: 60rem;
    font-family: poppins;
    font-weight: 300;
    max-width: 92%;

}

#contact label {
    font-size: 1.7em;
    /* Light text for labels */
    color: #f5e0b7;
    text-align: center;
    width: 20rem;
    font-family: poppins;
    font-weight: 500;
    max-width: 92%;
}

.project-structure {
    background: #231942;
    color: #ace8ab;
    padding: 0em;
    border-radius: 8px;
    overflow-x: auto;
    font-size: clamp(1rem, 2vw, 1.3rem);

}

/* 
    Colors used for text styling throughout the application:

    - #CAD2C5: Light text color used for general content, paragraphs, and headings.
    - #f5e0b7: Light text color used for headers and prominent text.
    - #ffcc00: Accent text color used for links, highlights, and headings.
    - #5DD9C1: Light teal color used for focus states and buttons.
    - #b084cc: Light purple color used for hover effects.
    - #152731: Dark text color used for buttons and specific elements.
    - #190933: Dark background color used for contrast with light text.
*/