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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif; 
}

body {
    background: #77eeb7; /* Background Color for the home page */ 

}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding:  20px 10%;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

/* Raindow Logo */

.logo {
    position: relative;
    font-size: 25px;
    color: #ededed;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.logo:hover {
    animation: rainbow 1s linear infinite;
}

@keyframes rainbow {
    0% { color: #ff0000; }
    14% { color: #ff7f00; }
    28% { color: #ffff00; }
    42% { color: #00ff00; }
    57% { color: #0000ff; }
    71% { color: #4b0082; }
    85% { color: #8b00ff; }
    100% { color: #ff0000; }
}

/* Raindow Logo */

.logo::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
   /* background: #081b29; /* animation Color for lOGO showRight */ 
    animation: showRight 1s ease forwards;
    animation-delay: .4s;
}

.navbar a {
    font-size: 18px;
    color: #ededed;
    text-decoration: none;
    font-weight: 500;
    margin-left: 35px;
    transition: .3s;
}

.navbar a:hover,
.navbar a.active {
    color: #1DB954;
}

.home {
    height: 100vh;
    background: url('') no-repeat; /* Background for the home page */ 
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 0 10%;
}

.home2 {
    height: 100vh;
    background: url('') no-repeat; /* Background for the home page */ 
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 0 10%;
}



.home-content {
    max-width: 600px;
}

.home-content h1 {
    position: relative;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.2;
    color: white;
}

.home-content h1::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
   /* background: #081b29; /* animation Color for lOGO showRight */ 
    animation: showRight 1s ease forwards;
    animation-delay: 1s;
}

.home-content h3 {
    position: relative;
    font-size: 32px;
    font-weight: 700;
    color: #1DB954;
}

.home-content h3::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
   /* background: #081b29; /* animation Color for lOGO showRight */ 
    animation: showRight 1s ease forwards;
    animation-delay: 1.3s;
}

.home-content p {
    position: relative;
    font-size: 16px;
    margin: 20px 0 40px;
    color: white;
}

.home-content p::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
   /* background: #081b29; /* animation Color for lOGO showRight */ 
    animation: showRight 1s ease forwards;
    animation-delay: 1.6s;
}








.home-content .btn-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 345px;
    height: 50px;
}

.home-content .btn-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 200%;
    /* background: #081b29; /* animation Color for lOGO showRight */ 
    animation: showRight 1s ease forwards;
    animation-delay: 1.9s;
    z-index: 2;
}


.btn-box a {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 100px;
    background: #00abf0;
    border: 2px solid #00abf0;
    border-radius: 8px;
    font-size: 19px;
   /* color: #081b29; */
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 1px;
    z-index: 1;
    overflow: hidden;
    transition: .5s;
}

.btn-box a:hover {
    color: #00abf0;
}

.btn-box a:nth-child(2) {
    background: transparent;
    color: #00abf0;
}

.btn-box a:nth-child(2):hover {
   color: #081b29;
}

.btn-box a:nth-child(2)::before {
    background: #00abf0;

}

.btn-box a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #081b29;
    z-index: -1;
    transition: .5s;
}

.btn-box a:hover::before {
    width: 100%;
}




/*  Social Media Icons */

.home-sci {
    position: absolute;
    bottom: 40px;
    width: 170px;
    display: flex;
    justify-content: space-between;
    
}

.home-sci::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 200%;
   /* background: #081b29; /* animation Color for lOGO showRight */ 
    animation: showRight 1s ease forwards;
    animation-delay: 2.5s;
    z-index: 2;
}

.home-sci a {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid #00abf0;
    border-radius: 50%;
    font-size: 20px;
    color: #00abf0;
    text-decoration: none;
    z-index: 1;
    overflow: hidden;
    transition: .5s;
}

.home-sci a:hover {
    color:#081b29
}

.home-sci a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #00abf0;
    z-index: -1;
    transition: .5s;

}

.home-sci a:hover::before {
    width: 100%;
} 





.home-imgHover {
    position: absolute;
    top: 0;
    right: 0px; /* ANIMATION HIDDEN PANNEL */
    width: 600px; /* ANIMATION HIDDEN PANNEL */
    height: 100%; /* ANIMATION HIDDEN PANNEL */
    background: transparent;
    transition: 3s;
    animation: manipActiveHover .1s forwards;
    animation-delay: 4s;
    pointer-events: none;
}

.home-imgHover:hover {
    /* background: #00abf0; /* ANIMATION HIDDEN PANNEL */
    opacity: .8;
}


.home-imgHover::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 140%; /* animation Color for PAGES showRight */ 
    height: 200%;
   /* background: #081b29; /* animation Color for lOGO showRight */ 
    animation: showRight 1s ease forwards;
    animation-delay: 3s;
    z-index: 100;
}

.home-fun {
    position: absolute;
    bottom: 300px;
    width: 170px;
    display: flex;
    justify-content: space-between;
}






/* Media */

@keyframes appearFromRight {
    0% {
        opacity: 0;
        transform: translateX(20px) scale(0.5); /* Start from the right, scaled down */
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1); /* End in natural position and size */
    }
}

.social-links {
    display: flex;
    gap: 12px; /* Space between icons */
}

.social-links a {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background: transparent;
    border: 2px solid #00abf0;
    border-radius: 50%;
    font-size: 24px;
    color: #00abf0;
    text-decoration: none;
    overflow: hidden;
    opacity: 0; /* Start hidden */
    animation: appearFromRight 2.2s ease forwards; /* Extend duration to 4 seconds */
}

/* Stagger each icon’s appearance over the 4-second duration */
.social-links a:nth-child(1) {
    animation-delay: 0s;
}

.social-links a:nth-child(2) {
    animation-delay: 1.3s;
}

.social-links a:nth-child(3) {
    animation-delay: 2.6s;
}



/* About Me */

/* Sets up the main container for the About section */
.about {
    display: flex; /* Arranges children (.about-content and .about-image) in a row */
    align-items: center; /* Centers content vertically within the container */
    padding-right: 0; /* Removes any padding on the right side */
    margin-left: 0; /* Aligns the section fully to the left side of the screen */
}

/* Styles the text content, now on the left side */
.about-content {
    flex: 2; /* Gives the text container more space relative to the image container */
    padding-right: 20px; /* Adds space between the text content and the image */
    order: 1; /* Ensures content appears first, aligning it to the left */
}

/* Styles the image container, now on the right side */
.about-image {
    flex: 1; /* Allows the image container to take up available space */
    max-width: 600px; /* Reduces the maximum width to keep the image within view */
    margin-left: 450px; /* Adds space between the text content and the image */
    order: 2; /* Ensures image appears last, aligning it to the right */
}

/* Styles the image itself within the container */
.about-image img {
    width: 350%; /* Fills the container without overflowing */
    height: auto; /* Keeps the image's aspect ratio */
    border-radius: 10px; /* Adds rounded corners to the image */
}








/* Animation styles for first-time visitors only */
.show-animations .home-content h1::before {
    animation: showRight 1s ease forwards;
}

.show-animations .social-links a {
    opacity: 0;
    animation: appearFromRight 2.2s ease forwards;
}

/* No animations for return visitors */
.no-animations .home-content h1,
.no-animations .social-links a,
.no-animations .btn-box a {
    animation: none !important;
    transition: none !important;
    opacity: 1; /* Ensure elements are fully visible instantly */
}







/* Portfolio Section */
.portfolio {
    display: flex; /* Flex layout for alignment */
    justify-content: center; /* Center the cards horizontally */
    align-items: stretch; /* Ensure all cards have the same height */
    flex-wrap: wrap; /* Allow cards to wrap onto the next row if needed */
    gap: 30px; /* Add spacing between cards */
    padding: 40px; /* Add padding around the section */
    height: auto; /* Adjust height dynamically based on content */
    background-color: #081b29; /* Optional: Different background for contrast */
}

/* Card Styles */
.card {
    background-color: #fff; /* Card background color */
    border: 1px solid #ddd; /* Light border */
    border-radius: 8px; /* Rounded corners */
    width: 280px; /* Fixed width for consistency */
    display: flex; /* Flex layout for card content */
    flex-direction: column; /* Stack card content vertically */
    text-align: center; /* Center-align text within the card */
    justify-content: space-between; /* Space out content */
    padding: 20px; /* Add padding inside the card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
    transition: transform 0.2s ease; /* Smooth hover effect */
}

/* Hover Effect for Cards */
.card:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* Card Images */
.card img {
    width: 100%; /* Maintain natural width */
    max-width: 100%; /* Prevent images from exceeding card width */
    height: auto; /* Maintain natural height */
    object-fit: contain; 
    margin-bottom: 15px; /* Space below the image */
    display: block; /* Prevent extra spacing below the image */
}

/* Card Info */
.card-info {
    flex-grow: 1; /* Allow info to grow and fill available space */
    display: flex; /* Use flex for alignment */
    flex-direction: column; /* Stack text vertically */
    justify-content: flex-start; /* Align content to the top of the card */
    text-align: center; /* Center-align all text */
}

.card-info h3 {
    font-size: 18px; /* Title font size */
    color: #333; /* Title color */
    margin: 10px 0; /* Space above and below title */
}

.card-info p {
    font-size: 14px; /* Description font size */
    color: #666; /* Gray text color */
    margin: 5px 0; /* Space between lines */
    line-height: 1.5; /* Improve readability with line spacing */
}


/* Adjust for Smaller Screens */
@media (max-width: 768px) {
    .portfolio {
        flex-direction: column; /* Stack cards vertically on smaller screens */
        gap: 20px; /* Reduce spacing */
        padding: 20px; /* Reduce padding */
    }

    .card {
        width: 90%; /* Allow cards to take up most of the width */
        margin: 0 auto; /* Center cards */
    }
}


.blue-box {
    background-color: #00abf0; /* Blue background */
    width: 100%; /* Full width of the screen */
    height: 200px; /* Adjust height as needed */
    position: relative; /* Stacks it within the normal flow */
    margin-bottom: 30px; /* Space below the box */
    z-index: 0; /* Ensure it doesn't overlap important elements */
}












/* Projects Section Header */
.projects-header {
    text-align: center;
    margin-bottom: 10px; /* Adjust spacing between header and cards */
}

.projects-header h2 {
    color: #00abf0; /* Set the text color */
    font-size: 2rem; /* Adjust the font size */
    font-weight: 700; /* Make it bold */
    text-transform: uppercase; /* Optional: Make it uppercase */
    margin: 0; /* Remove default margins */
}

/* Adjustments for the carousel track */
.carousel-track-container {
    margin-top: 0; /* Ensure there's no unnecessary space */
}







/* Full-Screen Carousel Background */
.portfolio-carousel {
    background-color: #1a2a3a; /* Light dark blue */
    width: 100%;
    padding: 40px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Carousel Track Container */
.carousel-track-container {
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Carousel Track */
.carousel-track {
    display: flex;
    gap: 20px; /* Space between cards */
    transition: transform 0.5s ease-in-out;
    align-items: center;
    justify-content: center;
}

/* Card */
.card {
    background-color: white; /* Default background */
    border-radius: 15px; /* Rounded corners */
    width: 250px; /* Fixed width */
    height: 300px; /* Fixed height */
    text-align: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: scale(0.9); /* Slightly smaller by default */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    overflow: hidden; /* Prevent content overflow */
}

/* Card Image */
.card img {
    max-width: 100px;
    height: auto;
    margin-bottom: 10px;
}

/* Card Info */
.card-info h3,
.card-info p {
    color: #333; /* Default text color */
    margin: 5px 0;
    transition: color 0.3s ease;
}

/* Hover Effect */
.card:hover {
    background-color: #081b29; /* Change background color on hover */
    transform: scale(1); /* Match original size on hover */
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4); /* Add stronger shadow */
    border-radius: 15px; /* Keep consistent rounded shape */
}

.card:hover .card-info h3,
.card:hover .card-info p {
    color: white; /* Change text color to white on hover */
}

/* Active Center Highlight */
.card.active {
    transform: scale(1.1); /* Highlight active card */
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
    border-radius: 15px; /* Ensure consistent shape */
}



.projects-text {
    position: absolute; /* Position it relative to the home section */
    bottom: 40px; /* Align with the home-sci section */
    left: 50%; /* Start at the middle of the section */
    transform: translateX(-50%); /* Shift back by half its width to perfectly center */
    font-size: 18px; /* Font size for readability */
    color: #00abf0; /* Matches the blue theme color */
    font-weight: 600; /* Make it slightly bold */
    text-align: center; /* Ensure the text is centered */
}






.card .card-info .active {
    text-decoration: none;
    font-family: Impact, 'Arial Narrow Bold', sans-serif;
    color: #00abf0;
}


.card .card-info .active:hover{
    text-decoration: none;
    font-family: Impact, 'Arial Narrow Bold', sans-serif;
    color: rgb(255, 0, 0);
}




.scroll-down-section2 {
    display: flex;
    justify-content: center; /* Center the text column */
    align-items: flex-start; /* Align text to the top */
    height: 100vh; /* Take the full viewport height */
    background-color: white; /* Set background color */
    overflow-y: auto; /* Enable scrolling within this section */
    padding: 20px; /* Add padding for better readability */
}

.text-container {
    max-width: 600px; /* Limit width to create a column layout */
    text-align: left; /* Align text to the left */
    margin: auto; /* Center the container in the middle of the section */
    line-height: 1.6; /* Improve readability */
    font-size: 16px; /* Adjust text size */
    color: #333; /* Set a readable text color */
}

.text-container p {
    margin-top: 25px;
}






.scroll-down-section3 {
    background-color: #77eeb7;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto; /* Allow scrolling */
    gap: 30px; /* Space between sections */
}

.section-headline {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    color: #333; /* Adjust color as needed */
}

.image-row {
    display: flex; /* Arrange images in a row */
    justify-content: center; /* Center the row */
    align-items: center; /* Align items vertically */
    gap: 20px; /* Add spacing between images */
    width: 100%; /* Allow the row to use full width */
}

.image-row img {
    width: 300px; /* Set a consistent width for all images */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add slight shadow */
    transition: transform 0.2s ease-in-out; /* Hover effect */
}

.image-row img:hover {
    transform: scale(1.05); /* Slight zoom on hover */
    width: 500px; /* Set a consistent width for all images */
}



.billboard-row {
    display: flex;
    flex-wrap: wrap; /* Allow images to wrap */
    justify-content: center; /* Center align the billboards */
    gap: 30px; /* Space between billboard images */
}

.billboard-row img {
    width: 45%; /* Set billboard images to nearly half the width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add slight shadow */
    transition: transform 0.2s ease-in-out; /* Hover effect */
}

.billboard-row img:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}


/* Part Four */

.scroll-down-section4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white; /* Match the theme */
    padding: 40px 20px;
    color: white; /* Contrast text */
    text-align: center;
}

.scroll-down-section4 h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.scroll-down-section4 p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.pdf-viewer {
    width: 90%; /* The iframe will take up 90% of the width of its parent container. */
    max-width: 1200px; /* The width of the iframe will not exceed 800px, even if 90% is larger. */
    margin: 0 auto 20px; /* Centers the iframe horizontally (`auto` for left and right) and adds a 20px bottom margin. */
    border: 2px solid #1DB954; /* Creates a 2px solid border with the color #945029 (a shade of brown). */
    border-radius: 8px; /* Rounds the corners of the iframe with a radius of 8px. */
    overflow: hidden; /* Hides any content that overflows the iframe’s boundary (useful for rounded corners). */
}

.pdf-download a {
    text-decoration: none;
    background-color: #1DB954;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.pdf-download a:hover {
    background-color: white;
    color: #1DB954;
    border: 2px solid #1DB954;
}






/* KEYFRAMES ANIMATION */

@keyframes showRight {
    100%{
        width: 0;
    }
}

@keyframes manipActiveHover {
   100%  {
    pointer-events: auto;
   }
}