/* Hero Section Styles */
.new-hero {
    position: relative; /* Restored position: relative */
    width: 100%;
    min-height: calc(100vh - 70px); /* Full viewport height minus header height (approx 70px) */
    background-size: cover;
    background-position: center center;
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: flex-start; /* Horizontally align content to the start (left) */
    text-align: left; /* Align text to the left */
    color: #fff;
    /* Removed overflow: hidden; to allow wave to extend outside */
    z-index: 10; /* Ensure hero section's stacking context is above others */
    padding-left: 5%; /* Add padding to align with container's content area */
}

.new-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent overlay */
    z-index: 1;
}

.new-hero__content {
    position: relative;
    z-index: 2;
    max-width: 900px; /* Limit content width */
    text-align: left; /* Align text to the left within its container */
    /* Removed margin-right: auto; margin-left: 10%; transform: translateX(-10%); */
    transform: translateY(-20%); /* Fine-tune vertical position: move up by 20% of its own height */
}

.new-hero__super-title {
    font-family: 'Dancing Script', cursive; /* Script font */
    font-size: 99px; /* Specific font size */
    color: #fff;
    display: block;
    margin-bottom: 10px;
}

.new-hero__title {
    font-family: 'Montserrat', sans-serif; /* Bold sans-serif font */
    font-size: 120px !important; /* Specific font size, forced with !important */
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.new-hero__title--part1 {
    background-image: linear-gradient(to right, #007bff, #00c6ff, #5bc0de); /* Blue, lighter blue, light blue gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    display: block;
}

.new-hero__title--part2 {
    background-image: linear-gradient(90deg, #2AADDF 0%, #282561 16.46%, #282561 18.61%, #282561 4.94%, #EF3E56 58%);    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    display: block;
}

.new-hero__cta {
    display: inline-flex;
    align-items: center;
    background-color: #007bff; /* Blue button */
    color: #fff;
    padding: 12px 25px; /* Slightly larger padding for the button */
    border-radius: 50px; /* Rounded button */
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1em; /* Slightly larger font size for the button */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* Added transitions for hover effects */
    margin-top: 20px;
    position: relative; /* Needed for pseudo-element glow */
    overflow: hidden; /* Hide overflow for glow effect */
    z-index: 1;
    box-shadow: inset 0 0 0 0.1em #007bff, 0 0 0 rgba(0, 123, 255, 0); /* Initial box-shadow */
}

.new-hero__cta:before,
.new-hero__cta:after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    top: 0;
    right: -50%;
    left: -50%;
    height: 0;
    padding-bottom: 200%;
    border-radius: 39%;
    transition: transform 0s cubic-bezier(0.2, 0, 0.1, 1) 0.5s, opacity 0.5s cubic-bezier(0.2, 0, 0.1, 1);
    opacity: 0;
}

.new-hero__cta:before {
    transform: translate3d(-10%, 4.8em, 0) rotate(330deg);
    background: linear-gradient(
        25deg,
        rgba(0, 123, 255, 0.8), /* Adjusted color */
        rgba(0, 123, 255, 0)
    );
}

.new-hero__cta:after {
    transform: translate3d(10%, 4.8em, 0) rotate(0deg);
    background: linear-gradient(
        70deg,
        rgba(0, 123, 255, 0.5), /* Adjusted color */
        rgba(0, 123, 255, 0)
    );
}

.new-hero__cta:hover {
    background-color: #0056b3; /* Darker blue on hover */
    box-shadow: inset 0 0 0 0.1em #007bff, 0 0 1.75em rgba(0, 123, 255, 0.5); /* Stronger glow */
    transform: translateY(-3px); /* Slight lift effect */
    transition: background-color 0.3s ease, box-shadow 2s ease, transform 0.3s ease;
    color: #fff; /* Ensure text color remains white on hover */
}

.new-hero__cta:hover:before,
.new-hero__cta:hover:after {
    transition: transform 2s ease 0s, opacity 0.2s ease;
    opacity: 1;
}

.new-hero__cta:hover:before {
    transform: translate3d(-10%, -1em, 0) rotate(100deg);
}

.new-hero__cta:hover:after {
    transform: translate3d(10%, -1em, 0) rotate(180deg);
}

.new-hero__cta i {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.new-hero__cta:hover i {
    transform: translateX(5px); /* Arrow moves on hover */
}

/* Responsive adjustments for Hero Section */
@media only screen and (max-width: 768px) {
    .new-hero {
        min-height: calc(100vh - 60px); /* Full viewport height minus mobile header height (approx 60px) */
        padding-left: 20px; /* Adjust padding for mobile */
        justify-content: flex-start; /* Ensure left alignment on mobile */
    }

    .new-hero__content {
        margin-left: 0; /* Reset margin for mobile */
        transform: translateX(0); /* Reset transform for mobile */
        text-align: center; /* Center content on mobile */
    }

    .new-hero__super-title {
        font-size: 2.5em; /* Adjusted for mobile */
    }

    .new-hero__title {
        font-size: 60px !important; /* Specific font size for mobile H1 */
    }

    .new-hero__cta {
        padding: 10px 20px; /* Smaller on mobile */
        font-size: 1em; /* Smaller on mobile */
    }
}

.new-hero__bottom-wave {
    position: absolute;
    bottom: -100px; /* Adjusted to overlap the next section more */
    left: 0;
    width: 100%;
    z-index: 9999; /* Increased z-index to ensure it's on top */
    line-height: 0; /* Remove extra space below image */
}

.new-hero__bottom-wave img {
    width: 100%;
    height: auto;
    display: block;
    /* Optional: Add a subtle shadow to the wave if needed */
    /* filter: drop-shadow(0 -5px 10px rgba(0,0,0,0.1)); */
}

/* Add margin-top to the introduction section to make space for the wave */
.landing-intro {
    margin-top: 100px; /* Adjust this value to match the negative bottom of the wave */
    position: relative; /* Ensure it creates its own stacking context if needed */
    z-index: 1; /* Ensure it's below the wave */
}