:root {
    --primary-color: #FD6602;
    --secondary-color: #C43C79;
    --text-color: #333;
    --background-color: #FAFAFA;
    --font-family: 'Play', sans-serif;
}

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styling */
body {
    font-family: 'Play', sans-serif;
    background-color: #FAFAFA;
    color: #333;
    padding-block-start: 100px; /* Prevents content from hiding under the fixed header */
}

/* Header styling */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FAFAFA;
    padding: 1.7em 2em;
    color: #fff;
    position: fixed;
    inset-block-start: 0;
    inline-size: 100%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 10;
}

h1{
    text-align: center;
    font-size: 3em; /* Larger title */
    margin-block-end: 40px; /* Space below the title */
    margin-block-start: 80px; /*Space above the title*/
    color: #333;
}

nav {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-grow: 1;
    justify-content: center;
    font-size: 1.2em;
}

nav a {
    color: #fff;
    background-color: #C43C79;
    padding: 0.5em 1.2em;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

nav a:hover {
    background-color: #fff;
    color: #FD6602;
}

/* Basic styling for the nav links */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown content box */
.dropdown-content {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: #ffffff; /* White background for dropdown */
    border: 1px solid #ddd;
    padding: 0.3em 0;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    font-size: 0.7em;
    flex-direction: column;
    min-inline-size: 160px;
}

/* Links inside the dropdown with separate styling */
.dropdown-content a {
    display: block;
    padding: 8px 16px;
    text-align: start;
    color: #FD6602; /* Orange text color for dropdown links */
    background-color: #ffffff; /* White background specifically for dropdown links */
    text-decoration: none;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

/* Hover effect specifically for dropdown links */
.dropdown-content a:hover {
    background-color: #C43C79; /* Pinkish background color on hover for dropdown items */
    color: #ffffff; /* White text on hover */
}

/* Show dropdown content on hover and keep it visible */
.nav-dropdown:hover .dropdown-content,
.nav-dropdown:focus-within .dropdown-content {
    display: flex;
    flex-direction: column;
}


.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    inline-size: 60px;
    animation: flip 5s linear infinite;
}

.section-wrapper {
    background-color: #ffffff;
    margin-block-start: 30px;
    margin-block-end: 140px;
}
.canvasTitle-wrapper{
    background-color: #ffffff;
    padding-block-start: 30px;
    padding-block-end: 15px

}

/* Portfolio Banner Styling */
.portfolio-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portfolio-banner img {
    inline-size: 100%;
    max-block-size: 200px;
    object-fit: cover;
    border-radius: 100px;
}

.portfolio-banner h1 {
    font-size: 3.5em;
    color: var(--primary-color);
    text-align: center;
    margin-block-start: 0.5em;
    margin-block-end: 10px;
    margin-block-start: 50px;
}


.title-portfolio{
    background-color: #FFFFFF;
    justify-content: center;
}
.title p{
    font-size: 1.8em;
    color: #FD6602;
    text-align: center;
    font-weight: bold;
}

/* Experience Section */
.portfolio-section {
    text-align: center;
    padding: 35px;
    background-color: #FFFFFF;
}

.portfolio-section h2 {
    font-size: 2.8em;
    color: #FD6602;
}
.portfolio-paragraph p{
    margin-inline-start: 120px;
    margin-inline-end: 120px;
    max-inline-size: 100%;
    max-block-size: 100%;
    font-size: 1.15em;
    line-height: 1.58;
    text-align: start;
}

/* Spacer Section (Full-Width Banner) */
.spacer {
    background: linear-gradient(120deg, #54147c, #c43c79);
    text-align: center;
    padding: 50px 20px;
    color: white;
    inline-size: 100%; /* Makes the spacer full width */
    box-sizing: border-box; /* Ensures padding is included in the width */
}

.spacer h2 {
    margin-block-end: 20px;
    font-size: 2rem;
}

.spacer-button {
    background-color: white;
    color: #54147c;
    padding: 12px 24px;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    animation: pulse 1.5s infinite;
    transition: all 0.3s ease-in-out;
}

.spacer-button:hover {
    background-color: #54147c;
    color: white;
    border: 2px solid white;
}

/* Floating Logos Section */
#floating-logos-section {
    position: relative;
    block-size: 50vh; /* Adjust this value to control how much space the canvas occupies */
    overflow: hidden;
    background: #FFFFFF;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;    
}

.floating-logos-container {
    position: relative;
    inline-size: 100%;
    block-size: 100%; /* Ensures the container takes up the full available height */
}

#logoCanvas {
    position: absolute;
    inset: 0; /* Fills the container */
    inline-size: 100%; /* Fills the container's width */
    block-size: 100%; /* Fills the container's height */
    z-index: 1;
}


/* Popup Container */
.popup-container {
    position: fixed;
    inset: 0; 
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden; 
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}


.popup-container.visible {
    visibility: visible;
    opacity: 1;
}

/* Popup Box */
.popup {
    background: linear-gradient(
        135deg,
        #C43C79 5%, /* Bright purple in the corner */
        #ffffff 20%, /* white */
        #ffffff 100% /* extra white for better fading*/
    ); 
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-inline-size: 500px;
    inline-size: 90%; /* Responsive width */
    text-align: center;
    position: relative;
}



/* Form Fields */
form input,
form textarea {
    inline-size: 100%;
    padding: 10px;
    margin-block-end: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}

/* Name Fields Side-by-Side */
.name-fields {
    display: flex;
    gap: 10px;
    padding: 10px;
}

.name-fields input {
    flex: 1;
}

/* Radio Button Options */
.radio-options {
    display: flex;
    flex-wrap: wrap; /* Wraps options for smaller screens */
    justify-content: space-between;
    margin-block-end: 15px;
    gap: 10px;
    padding: 10px;
}

.radio-options label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-options input {
    margin-inline-end: 8px; /* Space between radio and label text */
}

/* Message Box */
form textarea {
    block-size: 150px;
    resize: none;
}

/* Buttons (Submit and Cancel) */
.buttons {
    display: flex;
    gap: 10px;
    margin-block-start: 5px;
}

.submit-btn,
.close-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Submit Button Styling */
.submit-btn {
    background-color: #54147c;
    color: #fff;
    margin-inline-start: 105px;
}

.submit-btn:hover {
    background: #c43c79;
}

/* Close Button in Top-Right Corner */
.close-btn {
    position: absolute;
    background: #54147c;
    inset-inline-start: 290px;
    border: none;
    font-size: 1rem;
    color:white;
    cursor: pointer;
}

.close-btn:hover {
    background-color: #c43c79;
    color: #fff;
}



/* Contact form styling */
/*THE FOOTER*/
#contact {
    padding-block-start: 20px;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    inline-size: 500px;
    block-size: 475px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1.1em;
}

#contact form {
    display: flex;
    flex-direction: column;
    gap: 1.1em;
    max-inline-size: 42px;
    margin: -10px auto;
}

.form-title {
    font-size: 1.2em;
}

#contact input,
#contact textarea {
    padding: 1em;
    border: none;
    border-radius: 25px;
    inline-size: 400px;
    align-items: center;
}

.form-msg textarea {
    block-size: 155px;
}

#contact button {
    padding: 0.7em;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    inline-size: 65px;
    cursor: pointer;
    transition: background 0.3s;
    animation: pulse 1.5s infinite;
}

#contact button:hover {
    background: #7F00FF;
}

/* Footer styling */
footer {
    background: linear-gradient(120deg, #54147c, #c43c79);
    color: #fff;
    padding: 2em;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.footer-content {
    flex: 1;
    max-inline-size: 45%;
    text-align: center;
    margin-inline-end: 200px;
    margin-inline-start: 100px;
    padding-block-start: 65px;
    font-size: 1.1em;
}

.footer-content p {
    margin-block-end: 1em;
}

.social-media-icons {
    display: flex;
    gap: 1em;
    justify-content: center;
}

.social-media-icons a img {
    inline-size: 45px;
    block-size: 45px;
    transition: transform 0.3s;
}

.social-media-icons a img:hover {
    transform: scale(1.2);
}


/* Below section are all keyframes for organization*/ 


/* Bounce animation keyframes */
@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Fade-in animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade-in Class for Scroll-Triggered Animations */
.fade-in {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}