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

body {
    font-family: Arial, sans-serif;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #9C1B38; /* Red color from the screenshot */
    padding: 10px 20px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
}

/* Left Smiley Logo */
.nav-left .logo-smiley {
    width: 40px; /* Adjust based on your actual logo size */
    height: auto;
}

/* Center Links */
.nav-center {
    display: flex;
    gap: 30px; /* Space between links */
}

.nav-center a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.nav-center a:hover {
    color: #ddd; /* Slight gray on hover for effect */
}

/* Right Logos */
.nav-right {
    display: flex;
    gap: 15px; /* Space between X and AlphaBot logos */
}

.nav-right .logo-x,
.nav-right .logo-alphabot {
    width: 30px; /* Adjust based on your actual logo sizes */
    height: auto;
}

/* Parallax Section */
.parallax-section {
    width: 100%;
    height: 600px; /* Increased height to allow scrolling for parallax effect */
    background-image: url('background-image.jpg'); /* Replace with your background image */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    margin-top: 60px; /* Adjust for fixed navbar height */
    position: relative;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* GIF Container */
.gif-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Centered GIF */
.centered-gif {
    width: 1000px; /* Fixed width as specified */
    height: auto; /* Let the height adjust to maintain aspect ratio */
    max-height: 480px; /* Ensure it doesn't exceed the original height */
    object-fit: contain; /* Ensure the entire GIF is visible without cropping */
}

/* Ticker Section */
.ticker-section {
    width: 100%;
    background-color: #9C1B38; /* Match the navbar red */
    height: 50px; /* Height of the banner */
    overflow: hidden; /* Hide overflow for the ticker effect */
    position: relative; /* Ensure positioning context for the ticker-content */
}

/* Ticker Content */
.ticker-content {
    display: flex;
    align-items: center; /* Vertically center the spans */
    white-space: nowrap; /* Keep text in a single line */
    animation: scroll 20s linear infinite; /* Animation for scrolling */
    position: absolute;
    top: 50%; /* Position the top at 50% of the section height */
    transform: translateY(-50%); /* Shift up by half its height to center */
}

/* Ticker Text */
.ticker-content span {
    color: white;
    font-size: 18px; /* Reduced further to fit within 50px height */
    font-weight: bold;
    margin-right: 50px; /* Space between repeated text */
    display: inline-block; /* Ensure proper spacing */
}

/* Animation for scrolling */
@keyframes scroll {
    0% {
        transform: translateX(100%) translateY(-50%); /* Start from the right, maintain vertical centering */
    }
    100% {
        transform: translateX(-100%) translateY(-50%); /* Move to the left, maintain vertical centering */
    }
}

/* About Section */
.about-section {
    background-color: #9C1B38; /* Match the navbar red */
    padding: 50px 20px; /* Add padding for spacing */
    text-align: center; /* Center the content */
    color: white;
}

.about-section h1 {
    font-size: 48px; /* Large heading size */
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px; /* Space below the heading */
}

.about-section p {
    font-size: 16px; /* Smaller text for the paragraph */
    line-height: 1.6; /* Improve readability */
    max-width: 800px; /* Limit the width for better readability */
    margin: 0 auto; /* Center the paragraph */
}

/* Image Scroll Section */
.image-scroll-section {
    width: 100%;
    height: 100vh; /* Full viewport height to allow scrolling */
    overflow: hidden; /* Hide overflow to control the image movement */
    position: relative;
    background-color: #9C1B38; /* Match the red background */
}

/* Add thick black lines above and below the section */
.image-scroll-section::before,
.image-scroll-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 15px; /* Thickness of the black line */
    background-color: black;
    z-index: 1; /* Ensure the lines are above the content */
}

.image-scroll-section::before {
    top: 0; /* Position at the top of the section */
}

.image-scroll-section::after {
    bottom: 0; /* Position at the bottom of the section */
}

.image-scroll-container {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Center vertically */
    will-change: transform; /* Optimize for performance */
    transition: transform 0.3s ease; /* Smooth transition for scrolling */
}

.scroll-image {
    width: 80vw; /* Take up 80% of the viewport width */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the entire image is visible without cropping */
    margin-right: 20px; /* Space between images */
}

/* FAQ Section */
.faq-section {
    background-color: #9C1B38; /* Match the navbar red */
    padding: 50px 20px; /* Add padding for spacing */
    text-align: center; /* Center the content */
    color: white;
}

.faq-section h1 {
    font-size: 48px; /* Large heading size */
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 30px; /* Space below the heading */
}

.faq-item {
    max-width: 800px; /* Limit the width for better readability */
    margin: 0 auto 15px; /* Center and add spacing between items */
}

.faq-question {
    background-color: transparent;
    color: white;
    border: 2px solid white; /* White border as per screenshot */
    border-radius: 25px; /* Rounded corners */
    padding: 15px 20px;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Slight white overlay on hover */
}

.faq-arrow {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.faq-arrow.open {
    transform: rotate(180deg); /* Rotate arrow when open */
}

.faq-answer {
    display: none; /* Hidden by default */
    background-color: rgba(255, 255, 255, 0.1); /* Slight white background for contrast */
    border-radius: 10px;
    padding: 15px 20px;
    margin-top: 10px;
    text-align: left;
}

.faq-answer p {
    font-size: 16px;
    line-height: 1.6;
}

/* Holder Benefits Section */
.benefits-section {
    background-color: #9C1B38; /* Match the navbar red */
    padding: 50px 20px; /* Add padding for spacing */
    text-align: center; /* Center the content */
    color: white;
}

.benefits-section h1 {
    font-size: 48px; /* Large heading size */
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 30px; /* Space below the heading */
}

.benefits-section ul {
    list-style: none; /* Remove default bullets */
    max-width: 800px; /* Limit the width for better readability */
    margin: 0 auto; /* Center the list */
    text-align: center; /* Center the text of each list item */
}

.benefits-section li {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px; /* Space between list items */
    padding: 0 20px; /* Add padding for better spacing */
}

.benefit-label {
    font-weight: bold; /* Bold the labels */
}

/* Team Section */
.team-section {
    background-color: #9C1B38; /* Match the navbar red */
    padding: 50px 20px; /* Add padding for spacing */
    text-align: center; /* Center the content */
    color: white;
}

.team-section h1 {
    font-size: 48px; /* Large heading size */
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 30px; /* Space below the heading */
}

.team-container {
    display: flex;
    justify-content: center;
    gap: 30px; /* Space between team members */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    max-width: 1200px; /* Limit the width for better layout */
    margin: 0 auto; /* Center the container */
}

.team-member {
    text-align: center;
}

.team-image {
    width: 200px; /* Adjust based on your image size */
    height: 300px; /* Adjust based on your image size */
    object-fit: cover; /* Ensure images fit without distortion */
    border: 5px solid black; /* Black border as per screenshot */
    margin-bottom: 15px; /* Space below the image */
}

.team-member h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}

.team-member p {
    font-size: 16px;
    margin-bottom: 5px;
}

.team-member a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.team-member a:hover {
    color: #ddd; /* Slight gray on hover for effect */
}

/* Footer Section */
.footer-section {
    background-color: #9C1B38; /* Match the navbar red */
    padding: 20px; /* Add padding for spacing */
    text-align: center; /* Center the content */
}

.footer-logos {
    display: flex;
    justify-content: center;
    gap: 15px; /* Space between logos */
}

.footer-logo {
    width: 30px; /* Match the size of the navbar logos */
    height: auto;
}

/* Ensure sections are visible below the fixed navbar */
section {
    padding-top: 60px; /* Adjust based on navbar height */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
    .centered-gif {
        width: 80%; /* Scale down the GIF on smaller screens */
        height: auto; /* Maintain aspect ratio */
        max-height: none; /* Remove max-height on smaller screens */
    }

    .ticker-content span {
        font-size: 16px; /* Smaller text on mobile */
        margin-right: 30px;
    }

    .about-section h1 {
        font-size: 36px; /* Smaller heading on mobile */
    }

    .about-section p {
        font-size: 14px; /* Smaller paragraph text on mobile */
    }

    .scroll-image {
        width: 90vw; /* Slightly larger on mobile to fit the screen */
        height: auto;
        margin-right: 10px;
    }

    .faq-section h1 {
        font-size: 36px; /* Smaller heading on mobile */
    }

    .faq-question {
        font-size: 16px; /* Smaller question text on mobile */
        padding: 10px 15px;
    }

    .faq-answer p {
        font-size: 14px; /* Smaller answer text on mobile */
    }

    .benefits-section h1 {
        font-size: 36px; /* Smaller heading on mobile */
    }

    .benefits-section li {
        font-size: 14px; /* Smaller list text on mobile */
        padding: 0 15px; /* Adjust padding for mobile */
    }

    .team-section h1 {
        font-size: 36px; /* Smaller heading on mobile */
    }

    .team-container {
        gap: 20px; /* Reduce gap on smaller screens */
    }

    .team-image {
        width: 150px; /* Smaller images on mobile */
        height: 225px;
    }

    .team-member h3 {
        font-size: 20px; /* Smaller name text on mobile */
    }

    .team-member p {
        font-size: 14px; /* Smaller role and handle text on mobile */
    }

    .footer-logo {
        width: 25px; /* Slightly smaller logos on mobile */
    }
}