body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* Use Inter or a similar modern font */
    background-color: #111111;
    color: #fff;
    overflow-x: hidden;
    position: relative;
}

body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-thumb {
    background: #4b6ef5; /* Scrollbar color */
}

body::-webkit-scrollbar-thumb:hover {
    background: #2d3a9a; /* Scrollbar hover color */
}

body::-webkit-scrollbar-track {
    background: #030303; /* Scrollbar track color */
}

.container {
    padding: 160px 20px; /* Increased padding top to push content down */
    overflow: hidden;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background-color: #121212;
    z-index: 1000;
}

.nav-items {
    margin-left: auto; /* Added to move items to the right */
    padding-right: 50px; /* Adjust padding to space them more to the right */
}

.navbar.scrolled {
    transition: background-color 0.3s ease;
    background-color: rgba(21, 21, 21, 0.8); /* Transparent at the top */

}

.nav-logo .logo {
    height: 50px;
    animation: slideIn 1s 0.6s forwards; /* Add animation to logo */
}
.nav-logo {
    display: flex; /* Align items in a row */
    align-items: center; /* Vertically center logo and title */
}

.nav-items a {
    color: #fff;
    margin: 0 15px;
    text-decoration: none;
    transition: color 0.3s ease;
}
.nav-items a:hover {
    color: #4b6ef5; /* Hover color */
}
.nav-logo img {
    height: 30px; /* Adjust logo size */
    margin-right: 10px;
}

.nav-title {
    font-size: 1.13em;
    font-weight: bold;
    color: white; /* White text color */
    letter-spacing: -0.5px; /* Adjust letter spacing */
}


/* Background Abstract Objects */
.background-objects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none; /* Prevent background objects from interfering with clicks */
    overflow: hidden; /* Ensure elements stay within bounds */
}

.area {
    background: #111111;
    background: linear-gradient(to left, #121212, #111111);
    width: 100%;
    height: 100vh;
    position: fixed; /* Make it fixed to be a full background */
    top: 0;
    left: 0;
    z-index: 0; /* Ensure it is behind all content */
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200vh; /* Extends circles to entire page height */
    overflow: hidden;
    pointer-events: none; /* Prevent interaction with the background */
}

.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(to right, #4553fe, #404cea);
    animation: animate 25s linear infinite;
    bottom: -150px;
}

.circles li:nth-child(1) { left: 25%; width: 25px; height: 25px; animation-delay: 0s; }
.circles li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
.circles li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
.circles li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
.circles li:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; }
.circles li:nth-child(6) { left: 75%; width: 10px; height: 10px; animation-delay: 3s; }
.circles li:nth-child(7) { left: 35%; width: 60px; height: 60px; animation-delay: 7s; }
.circles li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }
.circles li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }
.circles li:nth-child(10) { left: 85%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 11s; }

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

.lander {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1200px;
    width: 100%;
    margin-top: 60px; /* Added margin-top to start under navbar */
}


.image-section {
    flex: 1.5; /* Take up 50% of the container */
    opacity: 0; /* Start hidden for fade-in effect */
    transform: translateY(50px); /* Initial position for animation */
    animation: slideIn 1s 0.6s forwards; /* Image animation with delay */
    position: relative; /* For positioning indicators */
}

.preview-image {
    width: 100%;
    height: auto;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); /* Slight shadow */
    opacity: 0; /* Start hidden */
    position: absolute; /* Stack images on top of each other */
    top: 0;
    left: 0;
    transition: opacity 1s ease, transform 1s ease; /* Smooth fade and slide transition */
    transform: translateX(-20px); /* Initial slide position */
    margin-left: 50px; /* Add margin to move it more to the right */

}

.preview-image.active {
    opacity: 1; /* Show active image */
    position: relative; /* Ensure active image stays in the correct position */
}

.carousel-indicators {
    position: relative; /* Place below the image */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px; /* Space between the image and the dots */
    gap: 7px; /* Spacing between dots */
    transition: gap 0.3s ease; /* Smooth gap transition */
    margin-left: 10%; /* Add margin to move it more to the right */
}

.dot {
    width: 6px; /* Smaller dot width */
    height: 6px; /* Smaller dot height */
    background-color: #4747479d; /* Inactive color */
    border-radius: 50%;
    position: relative;
    overflow: hidden; /* Hide progress bar overflow */
    transition: margin 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    display: flex; /* Ensure flex properties */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    
}

.dot.active {
    width: 23px; /* Smaller expanded width for the progress bar */
    background-color: #4747479d; /* Active dot color to blend with inactive */
    margin: 0 2px; /* Adjust margins for smaller dots */
    border-radius: 3px; /* Rounded edges for the progress bar */
    display: flex; /* To center the progress bar */
    align-items: center; /* Center vertically */
    justify-content: flex-start; /* Align progress bar to start */
    overflow: hidden; /* Ensure progress bar does not overflow */
    padding: 0; /* Remove padding to avoid misalignment */
}
.dot.active .progress-bar {
    display: block; /* Show progress bar only in the active dot */
    width: 100%; /* Full width of the smaller active dot */
    height: 100%; /* Full height of the active dot container */
    background-color: #7c7c7c93; /* Progress bar color */
    transform: scaleX(0); /* Start hidden */
    transform-origin: left;
    transition: transform 7s linear; /* Animate over the duration */
    border-radius: 4px; /* Match the border-radius of the parent */
}
.progress-bar {
    width: 100%; /* Full width of the expanded dot */
    height: 3px; /* Reduced height */
    background-color: #ff000085; /* Progress bar color */
    transform: scaleX(0); /* Start hidden */
    transform-origin: left;
    transition: transform 3s linear; /* Animate over the duration */
}

.dot .progress-bar {
    display: none; /* Hide progress bar by default */
}

/* Text Section */
.text-section {
    flex: 1; /* Take up 50% of the container */
    color: #fff;
}

/* Logo and Title */
.logo-title {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(50px);
    animation: slideIn 1s forwards; /* Added animation */
}
.logo-title img {
    height: 80px; /* Increased size for better visibility */
}
.header-logo {
    height: 40px;
}
/* Style for static elements */
header h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(50px);
    animation: slideIn 1s forwards; /* Title animation */
}
@media (max-width: 768px) {
    header h1 {
        font-size: 2em; /* Smaller size for smaller screens */
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.5em; /* Even smaller size for mobile devices */
    }
}
header p {
    font-size: 1.2em;
    color: #aaa;
    max-width: 600px;
    margin: 0 auto 40px;
    opacity: 0;
    transform: translateY(50px);
    animation: slideIn 1s 0.2s forwards; /* Description animation with delay */
}

.buttons {
    margin: 20px 0;
    opacity: 0;
    transform: translateY(50px);
    animation: slideIn 1s 0.4s forwards; /* Buttons animation with delay */
}

.primary-btn, .secondary-btn {
    padding: 15px 30px;
    margin: 10px;
    font-size: 1em;
    border: none;
    cursor: pointer;
    border-radius: 0; /* Edgy buttons */
    transition: all 0.3s ease;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4); /* Slight shadow */
}

.primary-btn {
    background: linear-gradient(to right, #4553fe, #404cea); /* Gradient background */
    color: #fff;
    border: none;
}

.secondary-btn {
    background-color: transparent;
    color: #fff;
    border: 2px solid #656565; /* Border color */
}

.login-btn {
    background: linear-gradient(to right, #4553fe, #404cea); /* Gradient background */
    color: #fff; /* Text color */
    border: none; /* Remove border */
    cursor: pointer; /* Cursor changes to pointer on hover */
    border-radius: 0; /* Edgy buttons */
    transition: all 0.3s ease; /* Smooth transitions */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4); /* Slight shadow */
    font-size: 0.9em; /* Font size */
    padding: 13px 55px;
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center items vertically */
    gap: 8px; /* Space between icon and text */
}

/* Icon style within the login button */
.login-btn i {
    font-size: 1.2rem; /* Adjust icon size */
}

/* Hover effect for login button */
.login-btn:hover {
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); /* Slight shadow */
}

.primary-btn:hover, .secondary-btn:hover {
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); /* Slight shadow */
}


.learn-more {
    padding: 80px 20px;
    background-color: #101010;
    color: #fff;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    opacity: 0; /* Start hidden for animation */
}

.learn-more-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
    gap: 40px; /* Space between text and icon */
}

.learn-more-text {
    flex: 1; /* Takes up 50% of the width */
    text-align: left; /* Align text to the left */
    opacity: 0; /* Start hidden for animation */
    transform: translateY(50px); /* Start position for animation (bottom to top) */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition for fade and slide */
}

.learn-more-text h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #4b6ef5;
}

.learn-more-text p {
    font-size: 1.2em;
    max-width: 800px;
    color: #aaa;
    margin-bottom: 20px;
}

/* Icon Style */
.learn-more-icon {
    flex: 0 0 200px; /* Fixed width for the icon section */
    text-align: center; /* Center the icon */
    opacity: 0; /* Start hidden for animation */
    transform: translateX(50px); /* Start position for animation (right to left) */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition for fade and slide */
}

.learn-more-icon i {
    font-size: 10em; /* Large icon size */
    color: #4b6ef5; /* Icon color */
}

/* Animated class when in view */
.learn-more.animate-visible {
    opacity: 1; /* Fully visible */
}

.learn-more.animate-visible .learn-more-text {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Reset position */
}

.learn-more.animate-visible .learn-more-icon {
    opacity: 1; /* Fully visible */
    transform: translateX(0); /* Reset position */
}

@media (max-width: 768px) {
    .learn-more-content {
        flex-direction: column; /* Stack content vertically on smaller screens */
        align-items: center; /* Center content */
    }

    .learn-more-icon {
        margin-top: 20px; /* Add spacing above the icon */
    }
}


.faq-section {
    background-color: #1a1a1a;
    color: #fff;
    padding: 80px 20px;
    text-align: center;
    width: 100%;  /* Ensure full width */
    box-sizing: border-box; /* Include padding in width */
    margin: 0 auto; /* Center the content */
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    box-sizing: border-box; /* Include padding in width calculation */
}

.faq-item {
    background-color: #121212;
    margin: 15px 0;
    padding: 20px;
    border-radius: 8px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    transform: translateY(50px);
    width: 100%;  /* Ensure full width */
    box-sizing: border-box; /* Include padding in width */
}

.starry-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(7, 7, 7); /* Optional: Set the background color */
    overflow: hidden;
    z-index: -1; /* Behind all content */
    pointer-events: none; /* Ensures stars don't interfere with interactions */
}

.star {
    position: absolute;
    width: 2px; /* Size of stars */
    height: 2px; /* Size of stars */
    background: white;
    border-radius: 50%;
    opacity: 0; /* Start invisible */
    animation: blink 2s infinite ease-in-out;
}

/* Random star positions */
.star:nth-child(1) { top: calc(5% * 0.5); left: 10%; animation-delay: 1s; }
.star:nth-child(2) { top: calc(10% * 0.5); left: 25%; animation-delay: 3s; }
.star:nth-child(3) { top: calc(15% * 0.5); left: 50%; animation-delay: 2s; }
.star:nth-child(4) { top: calc(20% * 0.7); left: 70%; animation-delay: 4s; }
.star:nth-child(5) { top: calc(25% * 0.8); left: 80%; animation-delay: 6s; }
.star:nth-child(6) { top: calc(30% * 0.9); left: 30%; animation-delay: 1.5s; }
.star:nth-child(7) { top: calc(35% * 1); left: 40%; animation-delay: 3.5s; }
.star:nth-child(8) { top: calc(40% * 1.2); left: 90%; animation-delay: 2.5s; }
.star:nth-child(9) { top: calc(45% * 1.4); left: 60%; animation-delay: 4.5s; }
.star:nth-child(10) { top: calc(50% * 1.6); left: 20%; animation-delay: 5s; }
.star:nth-child(11) { top: calc(55% * 2); left: 30%; animation-delay: 2s; }
.star:nth-child(12) { top: calc(60% * 2.2); left: 70%; animation-delay: 1s; }
.star:nth-child(13) { top: calc(65% * 2.5); left: 15%; animation-delay: 6s; }
.star:nth-child(14) { top: calc(70% * 3); left: 45%; animation-delay: 2.8s; }
.star:nth-child(15) { top: calc(75% * 3.5); left: 55%; animation-delay: 3s; }
.star:nth-child(16) { top: calc(80% * 4); left: 5%; animation-delay: 4.2s; }
.star:nth-child(17) { top: calc(85% * 4.5); left: 95%; animation-delay: 1.8s; }
.star:nth-child(18) { top: calc(90% * 5); left: 35%; animation-delay: 2.1s; }
.star:nth-child(19) { top: calc(95% * 5.5); left: 65%; animation-delay: 2.3s; }
.star:nth-child(20) { top: calc(98% * 6); left: 75%; animation-delay: 1.2s; }

/* Blinking animation */
@keyframes blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.download-section {
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    padding: 80px 20px;
    text-align: center;
    width: 100%;  /* Ensure full width */
    box-sizing: border-box; /* Include padding in width */
    margin: 0 auto; /* Center the content */
    opacity: 0; /* Start hidden */
}

.download-section.scroll-animated {
    opacity: 1;
    transform: translateY(0);
}
.download-section h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.download-section p {
    font-size: 1.2em;
    margin-bottom: 30px;
}
.download-section p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

.download-section .download-icons {
    margin-top: 20px;
}

.download-section .download-icons a {
    display: inline-block;
    margin: 0 15px;
    font-size: 2em; /* Icon size */
    color: #007bff; /* Icon color */
    text-decoration: none;
    transition: color 0.3s ease;
}
.download-section .download-icons a:hover {
    color: #0056b3; /* Change color on hover */
}
/* Animation for sliding elements into view */
@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




      /* Subscription Section Styles */
      .subscription-section {
        padding: 60px 20px;
        background-color: #111111;
        color: #fff;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 120px; /* Added space between the subscription section and the footer */
    }

    .subscription-section h2 {
        font-size: 2em;
        margin-bottom: 10px;
        color: #4b6ef5; /* Accent color */
        font-weight: 600; /* Semi-bold for header */
    }
    .coming-soon {
        font-size: 2.5em; /* Larger font size */
        color: #f54b4b; /* Accent color matching the theme */
        font-weight: 700; /* Bold font weight */
        text-transform: uppercase; /* Uppercase letters */
        letter-spacing: 2px; /* Spacing between letters */
    }
    .subscription-section p {
        font-size: 1em;
        margin-bottom: 30px;
        color: #aaa; /* Subtle text color */
        font-weight: 400; /* Normal weight for text */
    }

    /* Subscription Cards Container */
    .subscription-cards {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap; /* Makes cards wrap on smaller screens */
    }

    /* Subscription Card Styles */
    .subscription-card {
        background: #131313; /* Darker background for the card */
        padding: 40px 30px; /* Increased padding for more space */
        width: 300px; /* Fixed width for uniformity */
        text-align: left; /* Align text to the left */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Soft shadow */
        border: none; /* No border */
        position: relative; /* For potential additional elements */
    
        opacity: 0; /* Start hidden */
        transform: translateY(50px); /* Start below the viewport */
        transition: transform 0.6s ease, opacity 0.6s ease, box-shadow 0.3s ease; /* Transition for hover and entry */
    }
    /* Define Keyframes for Slide-in Animation */
    @keyframes slideInAndScale {
        0% {
            opacity: 0;
            transform: translateY(50px); /* Start below viewport with reduced size */
        }
        100% {
            opacity: 1;
            transform: translateY(0); /* End at normal position and size */
        }
    }
    
    /* Apply the Animation when '.animate' Class is Added */
    .subscription-card.animate {
        opacity: 1; /* Set opacity to visible */
        transform: translateY(0); /* Slide to original position */
    }

    .subscription-card:hover {
        transform: translateY(-5px); /* Slight lift on hover */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
    }

    /* Popular Plan Highlight */
    .premium-plan.popular {
        background: #161616; /* Slightly different, darker background color for popular plan */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Stronger shadow for emphasis */
        border: 2px solid #656565; /* Border color */
    }

    /* Plan Title and Price Styles */
    .subscription-card h3 {
        font-size: 1.2em;
        margin-bottom: 10px;
        color: #fff; /* White text */
        font-weight: 500; /* Medium weight for plan title */
    }

    .subscription-card .price {
        font-size: 2.5em; /* Larger font size for price */
        color: #fff;
        margin: 10px 0;
        font-weight: 700; /* Bold font for price */
    }

    .subscription-card .per-month,
    .subscription-card .per-year {
        font-size: 0.45em; /* Smaller font size for period */
        color: #aaa; /* Lighter gray color */
        font-weight: 400; /* Normal weight for period */
    }

    .subscription-card .plan-description {
        font-size: 0.9em;
        color: #bbb;
        margin-bottom: 20px;
        font-weight: 400; /* Normal weight for description */
    }

    /* Feature List Styles */
    .subscription-card .features {
        list-style-type: none;
        padding: 0;
        margin: 20px 0;
    }

    .subscription-card .features li {
        font-size: 1em;
        color: #fff; /* White text for features */
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        font-weight: 400; /* Normal weight for features */
    }

    .subscription-card .features li i {
        margin-right: 10px; /* Space between icon and text */
        color: #4b6ef5; /* Check icon color */
        font-size: 1.2em; /* Adjust icon size */
    }

    /* Choose Plan Button Styles */
    .choose-plan-btn {
        width: 100%; /* Full width button */
        padding: 12px 0;
        font-size: 1em;
        cursor: pointer;
        margin-top: 20px; /* Spacing above button */
        font-weight: 500; /* Medium weight for button text */
        border-radius: 0; /* Edgy buttons */
        transition: all 0.3s ease;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4); /* Slight shadow */
        background-color: transparent;
        color: #fff;
        border: 2px solid #656565; /* Border color */
    }

    .choose-plan-btn:hover {
        background-color: #181818; /* Light grey hover color */
    }








.ribbon-custom-color .banner::after,
.ribbon-custom-color .banner::before {
    background-color: #f36969;
}

.ribbon-custom-color .text::before,
.ribbon-custom-color .text::after,
.no-css-transforms .ribbon-custom-color .text {
    background-color: #f36969;
}

.ribbon {
    position: absolute;
    top: 0;
    right: 0;
}

.ribbon .text,
.ribbon .banner,
.ribbon a {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 10px;
    line-height: 14px;
    vertical-align: baseline;
    background: transparent;
}

.ribbon a {
    color: #fff;
    text-decoration: none;
}

.ribbon .banner {
    transform: rotate(45deg);
    color: #fff;
    font-smoothing: antialiased;
    display: block;
    float: right;
    position: relative;
    right: -8px;
    top: 15px;
    width: 65px;
    text-align: center;
}

.ribbon .banner::after,
.ribbon .banner::before {
    content: "";
    display: block;
    height: 6px;
    position: absolute;
    width: 20px;
}

.ribbon .banner::before {
    transform: skewY(-45deg) translate(50%, 15px);
    transform-origin: 100% center;
    left: -30px;
    top: -5px;
}

.ribbon .banner::after {
    transform: translate(100%, -100%) skewY(45deg) translateX(-58%);
    transform-origin: 0 center;
    right: -12px;
    top: 18px;
}

.icon {
    align-items: center;
    display: inline-flex;
    font-feature-settings: "liga";
    font-size: 12px;
    justify-content: center;
    line-height: 1.5;
    transition: .3s cubic-bezier(.25, .8, .5, 1);
    vertical-align: middle;
    transform: rotate(45deg); /* Rotate the icon */
}

.ribbon .text {
    position: relative;
    z-index: 2;
    padding: 3px 3px 3px 0;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1px;
    min-height: 14px;
    line-height: 14px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ribbon .text::before,
.ribbon .text::after {
    content: "";
    display: block;
    height: 20px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.ribbon .text::before {
    transform: translateX(-15%) skewX(-45deg);
}

.ribbon .text::after {
    transform: translateX(15%) skewX(45deg);
}




.footer {
    background-color: #141414;
    color: #ffffff;
    padding: 60px 20px;
    position: relative;
    border-top: 4px solid #4b6ef5;
    font-family: Arial, sans-serif;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-about {
    text-align: left;
}

.footer-logo {
    width: 80px;
    margin-bottom: 20px;
}

.footer-about p {
    font-size: 0.95em;
    color: #bbbbbb;
    line-height: 1.6;
}

.footer-links, .footer-contact, .footer-newsletter {
    text-align: left;
}

.footer-links h4, .footer-contact h4, .footer-newsletter h4 {
    margin-bottom: 15px;
    color: #ffffff;
    font-size: 1.1em;
    border-bottom: 2px solid #4b6ef5;
    padding-bottom: 5px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links ul li a {
    color: #bbbbbb;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links ul li a:hover {
    color: #4b6ef5;
}

.footer-contact {
    color: #bbbbbb;
}

.footer-contact .social-icons {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.footer-contact .social-icons a {
    color: #ffffff;
    font-size: 24px;
    transition: transform 0.3s;
}

.footer-contact .social-icons a:hover {
    transform: scale(1.2);
}

.footer-contact p {
    margin: 8px 0;
}

.footer-contact i {
    margin-right: 10px;
}

.footer-newsletter .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-newsletter input[type="email"] {
    padding: 12px 15px; /* Increased padding for better usability */
    background-color: #1f1f1f; /* Flat, dark background */
    border: 1px solid #1f1f1f; /* Subtle border */
    font-size: 1em;
    color: #ffffff; /* Light text color */
    outline: none;
    transition: border-color 0.3s, background-color 0.3s; /* Smooth transition for hover effects */
}
.footer-newsletter input[type="email"]::placeholder {
    color: #777777; /* Lighter color for placeholder text */
}
.footer-newsletter input[type="email"]:focus {
    border-color: #4b6ef5; /* Border color on focus */
    background-color: #1f1f1f; /* Darker background on focus */
}

.footer-newsletter button:hover {
    background-color: #3a53cc;
}
.footer-newsletter button {
    padding: 10px;
    border: none;
    background-color: #4b6ef5;
    color: #ffffff;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.footer-newsletter button:hover {
    background-color: #3a53cc;
}

.footer-bottom {
    border-top: 1px solid #4b6ef5;
    padding-top: 20px;
    margin-top: 40px;
    text-align: center;
}

.footer-bottom p {
    margin: 5px 0;
    color: #bbbbbb;
    font-size: 0.9em;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr; /* Stack items vertically on smaller screens */
        text-align: center;
    }

    .footer-about,
    .footer-links,
    .footer-contact,
    .footer-newsletter {
        text-align: center;
    }

    .footer-newsletter .newsletter-form {
        align-items: center;
    }
}














.faq-section {
    background-color: transparent;
    color: #fff;
    padding: 80px 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.faq-section h2 {
    font-size: 2.5em;
    margin-bottom: 40px;
    color: #4b6ef5;
}

.faq-items {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Allows the cards to wrap on smaller screens */
    gap: 30px;
    margin-top: 40px;
}

.faq-card {
    background-color: transparent;
    padding: 30px;
    border-radius: 12px;
    width: 300px;
    text-align: center;
    transition: transform 0.6s ease, box-shadow 0.6s ease;
    position: relative;
}

.faq-icon {
    font-size: 3em;
    color: #dbdbdb;
    margin-bottom: 20px;
    opacity: 0; /* Start hidden */
    transform: translateY(-30px); /* Start position for animation */
    transition: all 0.6s ease; /* Animation for icon */
}

.faq-icon.icon-animate {
    opacity: 1;
    transform: translateY(0); /* End position */
}

.faq-card h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
}

.faq-card p {
    font-size: 1em;
    color: #aaa;
    margin: 0;
}


.customer-reviews-section {
    padding: 60px 20px;
    background-color: #111111;
    color: #fff;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 60px; /* Add space above the reviews section */
}

.customer-reviews-section h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #4b6ef5; /* Accent color */
    font-weight: 600; /* Semi-bold for header */
}

.reviews-container {
    position: relative; /* Position for animation */
    max-width: 800px; /* Limit the width for better presentation */
    margin: 0 auto; /* Center the container */
    overflow: hidden; /* Hide overflow for sliding effect */
}

.review {
    opacity: 0; /* Initially hidden */
    position: absolute; /* Stack reviews on top of each other */
    top: 0;
    left: 0;
    right: 0;
    transition: opacity 1s ease-in-out; /* Smooth transition for showing/hiding */
}

.review.active {
    opacity: 1; /* Show active review */
}

.stars {
    font-size: 1.5em; /* Size for stars */
    color: #f1c40f; /* Gold color for stars */
    margin-bottom: 10px;
}

.reviewer {
    font-style: italic; /* Italic style for reviewer name */
    color: #aaa; /* Subtle text color */
}

.discord-section {
    padding: 80px 20px;
    background-color: #141414; /* Matches other sections */
    color: #fff;
    text-align: center;
    width: 100%;
    box-sizing: border-box; /* Include padding in width */
    margin: 0 auto; /* Center the content */
    opacity: 0; /* Start hidden for animation */
}

.discord-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
    gap: 40px; /* Space between text and icon */
}

.discord-text {
    flex: 1; /* Takes up 50% of the width */
    text-align: left; /* Align text to the left */
    opacity: 0; /* Start hidden for animation */
    transform: translateY(50px); /* Start position for animation (bottom to top) */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition for fade and slide */
}

.discord-text h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #7289da; /* Discord's brand color */
}

.discord-text p {
    font-size: 1.2em;
    max-width: 800px;
    color: #aaa;
    margin-bottom: 20px;
}

.discord-icon {
    flex: 0 0 200px; /* Fixed width for the icon section */
    text-align: center; /* Center the icon */
    opacity: 0; /* Start hidden for animation */
    transform: translateX(50px); /* Start position for animation (right to left) */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition for fade and slide */
}

.discord-icon i {
    font-size: 10em; /* Large icon size */
    color: #7289da; /* Discord's brand color */
}

/* Button Style */
.discord-btn {
    background-color: #7289da; /* Discord button color */
    color: #fff; /* White text color */
    border: none; /* Remove default border */
    padding: 15px 30px; /* Button padding */
    font-size: 1.2em; /* Button font size */
    border-radius: 0; /* Edgy buttons */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

.discord-btn:hover {
    background-color: #5a6fb8; /* Slightly darker shade on hover */
}

/* Animated class when in view */
.discord-section.animate-visible {
    opacity: 1; /* Fully visible */
}

.discord-section.animate-visible .discord-text {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Reset position */
}

.discord-section.animate-visible .discord-icon {
    opacity: 1; /* Fully visible */
    transform: translateX(0); /* Reset position */
}

@media (max-width: 768px) {
    .discord-content {
        flex-direction: column; /* Stack content vertically on smaller screens */
        align-items: center; /* Center content */
    }

    .discord-icon {
        margin-top: 20px; /* Add spacing above the icon */
    }
}

.gofundme-section {
    padding: 80px 20px;
    background-color: #131313; /* Matches other sections */
    color: #fff;
    text-align: center;
    width: 100%;
    box-sizing: border-box; /* Include padding in width */
    margin: 0 auto; /* Center the content */
    opacity: 0; /* Start hidden for animation */
}

.gofundme-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
    gap: 180px; /* Space between text and icon */
}

.gofundme-icon {
    flex: 0 0 200px; /* Fixed width for the icon section */
    text-align: center; /* Center the icon */
    opacity: 0; /* Start hidden for animation */
    transform: translateX(-50px); /* Start position for animation (left to right) */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition for fade and slide */
}

.gofundme-font-icon {
    font-size: 10em; /* Large icon size */
    color: #00b964; /* GoFundMe's brand color */
}
.gofundme-text {
    flex: 1; /* Takes up 50% of the width */
    text-align: left; /* Align text to the left */
    opacity: 0; /* Start hidden for animation */
    transform: translateY(50px); /* Start position for animation (bottom to top) */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition for fade and slide */
}

.gofundme-text h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #00b964; /* GoFundMe's brand color */
}

.gofundme-text p {
    font-size: 1.2em;
    max-width: 800px;
    color: #aaa;
    margin-bottom: 20px;
}

/* Button Style */
.gofundme-btn {
    background-color: #00b964; /* GoFundMe button color */
    color: #fff; /* White text color */
    border: none; /* Remove default border */
    padding: 15px 30px; /* Button padding */
    font-size: 1.2em; /* Button font size */
    border-radius: 0; /* Edgy buttons */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

.gofundme-btn:hover {
    background-color: #009b54; /* Slightly darker shade on hover */
}

/* Animated class when in view */
.gofundme-section.animate-visible {
    opacity: 1; /* Fully visible */
}

.gofundme-section.animate-visible .gofundme-text {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Reset position */
}

.gofundme-section.animate-visible .gofundme-icon {
    opacity: 1; /* Fully visible */
    transform: translateX(0); /* Reset position */
}

@media (max-width: 768px) {
    .gofundme-content {
        flex-direction: column; /* Stack content vertically on smaller screens */
        align-items: center; /* Center content */
    }

    .gofundme-icon {
        margin-bottom: 20px; /* Add spacing above the icon */
    }
}
.progress-container {
    width: 100%;
    background-color: #111111; /* Light gray background for the progress bar */
    margin: 20px 0; /* Spacing above and below the progress bar */
    height: 15px; /* Height of the progress bar */
    overflow: hidden; /* Allows the progress bar to show */
    position: relative;}

.progress-bar {
    width: 0%; /* Initial width for progress */
    height: 100%; /* Full height */
    background-color: #00b964; /* GoFundMe's brand color */
    transition: width 0.5s ease-in-out; /* Smooth transition for width change */
}

.gofundme-stage-text {
    margin-top: 10px; /* Spacing above the text */
    color: #aaa; /* Subtle text color */
    font-size: 1.1em; /* Font size */
    text-align: left; /* Align text to the left */
}