.content {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .content:hover {
            white-space: normal;
            overflow: visible;
            text-overflow: unset;
        }

        .highlighted {
            font-weight: bold;
            color: #003afa;
            /* Custom color for emphasis */
        }

        .candidate-card a {
            text-decoration: none !important;
            color: inherit !important;

        }

        .full-card-link * {
            text-decoration: none !important;
            color: inherit !important;
        }

        a.full-card-link {
            color: #fff;
            text-decoration: none !important;
        }


           :root {
            --brand-gradient: linear-gradient(90deg, #D0003A, #B51151, #AB2379);
            --brand-gradient-bottom: linear-gradient(to top, #D0003A, #B51151, #AB2379);
            --brand-gradient-signup: linear-gradient(to bottom, #AC2377 0%, #B90F4E 40%, #800D3A 100%);
            --shadow-color: rgba(0, 0, 0, 0.1);
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: #ffffff;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 40px;
            background: white;
            background-color: #ffffff;
            height: 91px;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #aa007f;
            display: flex;
            align-items: center;
        }

        .logo img {
            height: 30px;
            margin-right: 8px;
        }

        .nav {
            display: flex;
            list-style: none;
            padding: 0;
            gap: 20px;
        }

        .nav-item {
            position: static;
        }

        .nav-link {
            text-decoration: none;
            color: #333;
            font-size: 18px;
            cursor: pointer;
        }

        .nav-link:hover {
            color: #aa007f;
        }

        .dropdown {
            display: none;
            position: absolute;
            top: 200px;
            left: 50%;
            transform: translateX(-50%);
            width: 1445px;
            height: 606px;
            background: white;
            box-shadow: 0px 5px 15px var(--shadow-color);
            border-radius: 15px;
            padding: 32px 72px;
            z-index: 1000;
        }

        .dropdown.active {
            display: flex;
            justify-content: space-between;
            /* position: relative; */
        }

        .dropdown-box {
            width: 100%;
            height: 542px;
            background: white;
            border-radius: 15px;
            padding: 32px;
            box-shadow: 0px 13px 21px 0 var(--shadow-color);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .dropdown::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 100%;
            background: var(--brand-gradient);
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }

        .dropdown-box h3 {
            font-size: 24px;
            font-weight: bold;
            background-image: var(--brand-gradient);
            color: transparent;
            background-clip: text;
        }

        .dropdown-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 18px;
            align-items: center;
        }

        .dropdown-list img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }

        .dropdown-list-item {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: bold;
            padding: 8px;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
            color: black;
        }

        .dropdown-list-item:hover {
            color: unset !important;
            text-decoration: unset !important;
        }

        .dropdown-list-item:hover {
            background-color: #FBE7FF;
        }

        .dropdown-button {
            background: var(--brand-gradient);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            width: 159px;
            height: 47px;
            align-self: flex-end;
        }

        .solutions-box {
            width: 403px;
            height: 457px;
        }

        .resources-box {
            width: 542px;
            height: 245px;
        }

        .resources-blogs {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .resources-blogs p {
            font-size: 18px;
            line-height: 30px;
            padding: 8px;
            margin-bottom: -8px;
        }

        .blogs-image {
            height: 100px;
            width: 200px;
            border-radius: 25px;
            background-color: #E1A2BD;
        }

        .read-more {
            text-decoration: none;
            margin-left: auto;
            color: black;
            font-weight: bold;
        }

        .solutions-dropdown {
            gap: 32px;
            align-items: center;
            justify-content: center;
            display: none;
        }

        .resources-dropdown {
            width: 951px;
            height: 351px;
            gap: 32px;
            align-items: center;
            justify-content: center;
            display: none;
        }

        .solutions-testimonial {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            width: 391px;
        }

        .solutions-testimonial img {
            width: 327px;
            height: auto;
        }

        .solutions-testimonial .stars {
            width: 140px;
            height: 28px;
        }

        .testimonial-header {
            font-size: 16px;
            font-weight: 520;
            background-image: var(--brand-gradient);
            color: transparent;
            background-clip: text;
        }

        .top-testimonial {
            display: flex;
            align-items: center;
            gap: 72px;
            margin-bottom: 32px;
        }

        .list-solutions {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .btn-signup {
            background: var(--brand-gradient);
            width: 140px;
            height: 56px;
            border: none;
            color: white;
            font-weight: 600;
            border-radius: 16px;
            padding: 8px 16px;
            font-size: 16px;
        }

        /* .btn-login {
            border: 2px solid #aa007f;
            width: 118px;
            height: 47px;
            color: #aa007f;
            font-weight: 600;
            border-radius: 16px;
            padding: 8px 16px;
            font-size: 16px;
            background-color: white;
        } */

        /* new hero section css added by sujan */
        /* Hero Section */
        .hero-section {
            padding: 40px 0px 80px 0px;
            background: #fff;
        }

        .hero-section h1 {
            font-size: 48px;
            line-height: 1.2;
            margin-bottom: 24px;
            font-weight: 600;
            color: #000;
            width: 80%;
        }

        .hero-section .highlight {
            color: #B51151;
        }

        .hero-description {
            font-size: 20px;
            /* line-height: 1.6; */
            color: #333;
            margin-bottom: 40px;
            max-width: 550px;
        }

        .hero-buttons {
            display: flex;
            gap: 16px;
            margin-top: 32px;
        }

        .hero-primary {
            background: var(--brand-gradient);
            color: white;
            border: none;
            padding: 14px 32px;
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
        }

        .hero-primary:hover {
            opacity: 0.9;
        }

        .hero-secondary {
            background: transparent;
            color: #B51151;
            border: 2px solid #B51151;
            padding: 14px 32px;
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
        }

        .hero-secondary:hover {
            background: linear-gradient(110deg,
                    transparent 0%,
                    transparent 25%,
                    rgba(181, 17, 81, 0.1) 45%,
                    rgba(181, 17, 81, 0.1) 55%,
                    transparent 75%,
                    transparent 100%);
            background-size: 200% 100%;
            animation: shine 2s linear infinite;
            border-color: #D0003A;
            color: #D0003A;
        }

        @keyframes shine {
            0% {
                background-position: 200% center;
            }

            100% {
                background-position: -200% center;
            }
        }

        .hero-secondary {
            background: transparent;
            color: #B51151;
            border: 2px solid #B51151;
            padding: 14px 32px;
            border-radius: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
        }

        .hero-secondary:hover {
            background: linear-gradient(110deg,
                    transparent 0%,
                    transparent 25%,
                    rgba(181, 17, 81, 0.1) 45%,
                    rgba(181, 17, 81, 0.1) 55%,
                    transparent 75%,
                    transparent 100%);
            background-size: 200% 100%;
            animation: shine 2s linear infinite;
            border-color: #D0003A;
            color: #D0003A;
        }

        @keyframes shine {
            0% {
                background-position: 200% center;
            }

            100% {
                background-position: -200% center;
            }
        }

        .image-placeholder {
            width: 100%;
            height: 450px;
            border-radius: 12px;
        }

        .hero-video {
            width: 100%;
            height: 470px;
            object-fit: contain;
            border-radius: 30px;
        }

        .menu {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            outline: inherit;
        }

        .nav-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 24px;
        }

        @media (max-width: 400px) {
            .mobile-menu-dropdown {
                width: 360px !important;
                right: 12px !important;
            }
        }

        .mobile-menu-dropdown {
            display: none;
            position: absolute;
            top: 97px;
            right: 19px;
            width: 400px;
            /* height: 373px; */
            background: white;
            box-shadow: 0px 5px 15px var(--shadow-color);
            border-radius: 15px;
            padding: 32px;
            padding-left: 52px;
            z-index: 1000;
            gap: 18px;
        }

        .mobile-menu-dropdown.active {
            display: block;
        }

        .mobile-menu-list {
            list-style: none;
            padding: 32px;
            margin: 0;
            display: flex;
            gap: 18px;
            flex-direction: column;
            justify-content: center;
            box-shadow: 0 13px 21px 0 var(--shadow-color);
        }

        .mobile-menu-dropdown::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 100%;
            background: var(--brand-gradient);
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }

        .mobile-menu-list li {
            display: block;
            align-items: center;
            gap: 15px;
            padding: 16px;
            cursor: pointer;
            border-radius: 15px;
        }

        .mobile-menu-list img {
            width: 24px;
            height: 24px;
        }

        .mobile-menu-list a {
            text-decoration: none;
            font-size: 14px;
            font-weight: bold;
            color: black;
        }

        /* .mobile-menu-list li:hover {
            background-color: #FBE7FF;
        } */

        @media (min-width: 1300px) {
            .menu {
                display: none;
            }
        }

        @media (max-width: 1200px) {
            .nav-item {
                display: none;
            }

            .menu {
                display: block;
            }
        }

        /* HERO */

        .hero-container {
            background-color: #ffffff;
            padding-bottom: 72px;
        }

        .btn-signupnow {
            width: 152px;
        }

        .btn-demo {
            width: 147px;
            background-color: white;
        }

        .hook1 {
            font-size: 60px;
            font-weight: 400;
            color: #333333;
        }

        .with {
            display: none;
            color: #333;
        }

        .hook2 {
            font-size: 60px;
            font-weight: 400;
            background-image: var(--brand-gradient);
            color: transparent;
            background-clip: text;
            margin-bottom: 24px;
        }

        .description {
            font-size: 20px;
            color: #333333;
            margin-bottom: 30px;
        }

        @media (max-width: 1440px) {
            .with {
                display: inline-block;
            }

            .without {
                display: none;
            }
        }

        @media (max-width: 600px) {
            .hero-container {
                margin-bottom: 0;
                padding-bottom: 0px !important;
                margin-top: -3rem !important;
            }

            .hook1 {
                padding: 0px 32px;
                font-size: 34px;
            }

            .hook2 {
                font-size: 34px;
            }

            .description {
                padding: 0px 32px;
                font-size: 12px;
            }

            .newline {
                display: none;
            }
        }

        /* COMPANIES */
        .companies-container {
            background-color: white;
            padding-bottom: 12px;
            margin-top: 80px;
        }

        .companies-container p {
            font-size: 24px;
        }

        .company-logo {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 23px;
            /* margin-bottom: 50px; */
        }

        @media (max-width: 600px) {
            .companies-container {
                display: none;
            }
        }

        /* LOOKING FOR */
        .looking-container {
            padding: 0px 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: linear-gradient(to bottom,
                    rgba(255, 255, 255, 1) 4%,
                    rgba(224, 187, 219, 0.3) 20%,
                    rgba(227, 99, 210, 0.3) 48%,
                    rgba(227, 99, 210, 0.1) 80%,
                    rgba(255, 255, 255, 100) 99%);
        }

        .looking-container h2 {
            font-size: 48px;
            margin-bottom: 20px;
            margin-top:10px;
        }

        .looking-container p {
            font-size: 20px;
        }

        .gradient-text {
            background-image: var(--brand-gradient);
            color: transparent;
            background-clip: text;
            -webkit-background-clip: text;
        }

        .looking-card {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            border-radius: 25px;
            width: 585px;
            height: 506px;
            color: #ffffff;
            position: relative;
            transition: transform 0.3s, opacity 0.3s;
            overflow: hidden;
        }

        .looking-card .backIcon {
            position: absolute;
            top: 18px;
            right: 32px;
            z-index: 3;
        }

        .looking-card:hover {
            transform: scale(1.05);
        }

        .looking-card .back {
            display: none;
            flex-direction: column;
            justify-content: center;
            /* align-items: center; */
            margin-left: 72px;
            padding: 20px;
            border-radius: 25px;
            width: 585px;
            height: 506px;
            color: #ffffff;
            z-index: 1;
            transition: opacity 0.3s;
        }

        .looking-card:hover .back {
            display: flex;
            z-index: 2;
        }

        .looking-card .front {
            transition: opacity 0.3s;
            z-index: 2;
        }

        .looking-card:hover .front {
            opacity: 0;
            display: none;
        }

        .looking-card h3 {
            font-size: 48px;
            margin-bottom: 15px;
            text-align: left;
        }

        .looking-card p {
            font-size: 20px;
            margin-bottom: 20px;
            text-align: left;
            width: 419px;
        }

        .employer-card {
            background-image: radial-gradient(circle at top left,
                    rgba(225, 162, 189, 0.7) 0%,
                    rgba(209, 115, 157, 0.7) 54%,
                    rgba(179, 22, 91, 0.7) 100%);
        }

        .looking-card video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        .looking-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at top left,
                    rgba(225, 162, 189, 0.7) 0%,
                    rgba(209, 115, 157, 0.7) 54%,
                    rgba(179, 22, 91, 0.7) 100%);
            z-index: 1;
        }

        .candidate-card {
            background-image: radial-gradient(circle at top left,
                    rgba(201, 163, 196, 0.7) 0%,
                    rgba(174, 117, 166, 0.7) 54%,
                    rgba(147, 71, 137, 0.7) 100%);
        }

        .looking-card:hover {
            transform: scale(1.05);
        }

        .explore-button {
            background: var(--brand-gradient);
            color: white;
            border: none;
            padding: 10px 20px;
            margin-top: 20px;
            border-radius: 16px;
            width: 175px;
            height: 53px;
        }

        .explore-button:hover {
            color: white;
            opacity: 0.9;
        }

        .back h3 {
            text-align: left;
            font-size: 36px;
            font-weight: 550;
        }

        .back h3 span {
            font-size: 24px;
            font-weight: normal;
        }

        .looking-icon {
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }

        ul.employee-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        ul.employee-list li {
            display: flex;
            align-items: center;
            margin-bottom: 23px;
            font-size: 20px;
        }

        .card-container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 32px;
        }

        @media (max-width: 1300px) {
            .card-container {
                align-items: center;
                flex-direction: column;
            }
        }

        @media (max-width: 600px) {
            .looking-container {
                padding: 50px 10px !important;
                padding-bottom: 0px;
            }

            .looking-container h2 {
                font-size: 32px;
            }

            .looking-container p {
                font-size: 14px;
            }

            .looking-card {
                width: 348px;
                height: 220px;
            }

            .looking-card h3 {
                text-align: left;
                font-size: 24px;
            }

            .looking-card .back {
                width: 256px;
                height: 210px;
                margin-left: 0;
                padding: 10px;
            }

            .back h3 {
                font-size: 20px;
                text-align: left;
            }

            .back h3 span {
                font-size: 14px;
                text-align: left;
            }

            .looking-card p {
                font-size: 14px;
                width: auto;
            }

            ul.employee-list li {
                font-size: 12px;
                margin-bottom: 0;
            }

            .looking-card .backIcon {
                display: none;
            }

            .looking-icon {
                width: 10px;
                height: 10px;
            }
        }

        /* Styles for tablets */
        @media (min-width: 601px) and (max-width: 991px) {
            .looking-container {
                padding-bottom: 20px !important;
            }

            .toggle-buttons {
                top: 230px !important;
            }

            .feature-step .image {
                width: 100% !important;
                margin-left: 72px !important;
                margin-right: 0 !important;
            }

            .testimonials-section {
                padding: 20px 0px !important;
                margin: auto !important;
            }
        }

        /* FEATURES */
        .features-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: white;
            padding: 50px 20px;
            position: relative;
        }

        .features-section h2 {
            background-image: var(--brand-gradient);
            color: transparent;
            background-clip: text;
            font-size: 24px;
            margin: 0;
        }

        .features-section h1 {
            font-size: 48px;
            color: #333;
            margin: 18px 0;
            text-align: center;
        }

        .features-section p {
            font-size: 24px;
            color: black;
            text-align: center;
        }

        .features-section span {
            background-image: var(--brand-gradient);
            color: transparent;
            background-clip: text;
            font-weight: bold;
        }

        .toggle-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 29px;
            margin: 20px 0;
            background-color: #fff;
            width: 537px;
            height: 117px;
            border-radius: 25px;
            position: absolute;
            top: 260px;
            z-index: 10;
        }

        .toggle-button {
            padding: 10px 20px;
            width: 184px;
            height: 53px;
            border-radius: 16px;
            border: none;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;

            background: white;
            color: #D0003A;
            box-shadow: 0px 0px 15px rgba(79, 172, 254, 0.7) !important;
            border: 1px solid #D0003A;
        }

        .toggle-button.active span {
            background-image: var(--brand-gradient);
            /* Apply gradient */
            /* color: transparent; */
            color: white;
            /* Make text transparent */
            background-clip: text;
            -webkit-background-clip: text;
            /* Ensures support for WebKit browsers */
            font-weight: bold;
        }

        .toggle-button:not(.active) span {
            color:#ad2072 !important;
            /* Make text white */
            
        }

        /* .toggle-button.active {
            background-image: var(--brand-gradient);
            color: white;
            box-shadow: 0px 0px 15px rgba(79, 172, 254, 0.7)!important;
        } */
        .toggle-button.active {
            
            color: white;
            background: var(--brand-gradient);
            box-shadow: 0px 0px 15px rgba(79, 172, 254, 0.7) !important;
            border: 1px solid #D0003A;
        }

        .toggle-button:not(.active):hover {
            opacity: 0.9;
        }

        .toggle-button.candidate {
            background-color: #ffffff;
            border: 1px solid #D0003A
        }

        .toggle-button.candidate span {
            background-image: var(--brand-gradient);
            /* color: transparent; */
            background-clip: text;
            color:#fff;
        }

        .feature-step {
            display: flex;
            gap: 115px;
            align-items: center;
            margin-top: 100px;
            position: relative;
            background-image: var(--brand-gradient-bottom);
            padding: 112px 20px 40px 20px;
            border-radius: 25px;
            color: white;
        }

        .feature-step .text {
            flex: 1;
            color: white;
            margin-left: 80px;
            margin-top: -100px;
        }

        .feature-step .text h1 {
            text-align: left;
            color: white;
            font-size: 48px;
            font-weight: 550;
            margin-bottom: 32px;
        }

        .feature-step .text h3 {
            font-size: 36px;
            margin-bottom: 14px;
        }

        .feature-step .text p {
            text-align: left;
            font-size: 20px;
            color: white;
        }

        .feature-step .image {
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 25px;
            background-color: white;
            width: 619px;
            height: 363px;
            margin-right: 80px;
        }

        .feature-step .image img {
            width: 100%;
            border-radius: 10px;
        }

        .feature-step .step-navigation {
            display: flex;
            flex-direction: column;
        }

        .feature-step .bottom-nav {
            display: flex;
            justify-content: end;
            align-items: center;
            margin-top: 40px;
            margin-right: 80px;
        }

        .feature-step .circles {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 148px;
            height: 64px;
        }

        .feature-step .circle {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 1px solid white;
        }

        .feature-step .active-step {
            background-color: white;
        }

        .feature-step .change-arrow {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 148px;
            height: 64px;
            background: white;
            border-radius: 15px;
            gap: 16px;
        }

        .feature-step .change-arrow img {
            width: 12px;
            height: 12px;
        }

        .image video {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 25px;
        }

        /* .feature-step .change-arrow .left-arrow {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 48px;
            height: 48px;
            border-radius: 8px;
        }
        .feature-step .change-arrow .left-arrow:hover {
            border: 1px solid #D0003A;
            cursor: pointer;
            color: white;
            background: var(--brand-gradient);
        }

        .feature-step .change-arrow .right-arrow {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 48px;
            height: 48px;
            border-radius: 8px;
        }
        .feature-step .change-arrow .right-arrow.active:hover {
            cursor: pointer;
            opacity: 0.9;
        } */
        /* Default state for both arrows */
        .left-arrow,
        .right-arrow {
            width: 40px;
            /* Adjust as needed */
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #B2B2B2;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        /* Default (non-active) state: only border */
        .left-arrow img,
        .right-arrow img {
            transition: all 0.3s ease;
        }

        /* Active state */
        .left-arrow.active,
        .right-arrow.active {
            background: var(--brand-gradient);
            border: none;
            /* Remove border */
        }

        /* Change the image when active */
        .right-arrow.active img {
            content: url("{{ asset('assets_new/images/arrowright.svg') }}");
        }

        .left-arrow.active img {
            content: url("{{ asset('assets_new/images/arrowleft.svg') }}");
            /* Assuming you have a white version */
        }

        /* Hover effects */
        .right-arrow:not(.active):hover {
            background-color: white;
            border: 1px solid #D0003A;
        }

        .right-arrow:not(.active):hover img {
            content: url("{{ asset('assets_new/images/arrow-right-black.png') }}");
        }

        .right-arrow.active:hover {
            opacity: 0.9;
        }

        .left-arrow:not(.active):hover {
            background: var(--brand-gradient);
            border: 1px solid #D0003A;
        }

        .left-arrow:not(.active):hover img {
            content: url("{{ asset('assets_new/images/arrowleft.svg') }}");
        }

        /* Keep active styles on hover */
        .left-arrow.active:hover,
        .right-arrow.active:hover {
            background: var(--brand-gradient) !important;
        }

        .left-arrow.active:hover img,
        .right-arrow.active:hover img {
            filter: brightness(1);
            /* Ensure white image remains clear */
        }

        @media (max-width: 1440px) {
            .feature-step {
                gap: 115px;
            }

            .feature-step .text {
                margin-left: 79.5px;
            }
        }

        @media (max-width: 1300px) {
            .feature-step {
                max-width: 100vw;
                width: 100vw;
                flex-direction: column;
                align-items: start;
                gap: 32px;
            }

            .feature-step .image {
                width: 734px;
                height: 373px;
                margin-left: 72px;
                margin-right: 0;
                margin-top: 32px;
            }

            .feature-step .bottom-nav {
                display: none;
            }
        }

        @media (max-width: 600px) {
            .features-section {
                padding: 12px !important;
            }

            .features-section .features-section h2 {
                font-size: 14px;
            }

            .features-section h1 {
                font-size: 32px;
            }

            .features-section p {
                font-size: 16px;
            }

            .toggle-buttons {
                position: static;
                border-radius: 0px;
                margin: 0;
                width: 100vw;
            }

            .toggle-button {
                font-size: 16px;
                width: auto;
                height: auto;
                padding: 14.5px 16px;
            }

            .feature-step {
                position: static;
                margin-top: -70px;
                border-radius: 0px;
            }

            .feature-step .text {
                margin: 0 5px;
            }

            .feature-step .text h1 {
                font-size: 32px;
            }

            .feature-step .text h3 {
                font-size: 24px;
            }

            .feature-step .text p {
                font-size: 14px;
            }

            .feature-step .image {
                margin: 0 0px;
                width: 348px;
                height: auto;
            }

            .bottom-nav {
                display: flex !important;
            }
        }

        /* PARTNERS */
        .partners-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to bottom,
                    rgba(255, 255, 255, 1) 4%,
                    rgba(224, 187, 219, 0.3) 20%,
                    rgba(227, 99, 210, 0.3) 48%,
                    rgba(227, 99, 210, 0.1) 80%,
                    rgba(255, 255, 255, 100) 99%);
            padding: 104px 20px;

        }

        .partners-section h2 {
            background-image: var(--brand-gradient);
            color: transparent;
            background-clip: text;
            font-size: 24px;
            margin: 0;
        }

        .partners-section h1 {
            font-size: 48px;
            color: #333;
            margin: 18px 0;
        }

        .partners-logos {
            display: flex;
            gap: 20px;
            margin-top: 32px;
        }

        .partner-logo {
            width: 262px;
            height: 100px;
            border-radius: 25px;
            border: solid 1px #333;
        }

        @media (max-width: 1300px) {
            .partners-logos {
                display: flex;
                overflow: hidden;
                white-space: nowrap;
                justify-content: center;
                gap: 20px;
                max-width: 47.25rem;
            }

            .partner-logo {
                flex-shrink: 0;
            }
        }

        @media (max-width: 600px) {
            .partners-section {
                padding: 0px 20px;
            }

            .partners-section h2 {
                font-size: 15px;
            }

            .partners-section h1 {
                font-size: 32px;
            }

            .partners-logos {
                overflow: visible;
                white-space: unset;
                flex-wrap: wrap;
            }
        }

        /* TESTIMONIAL */
        .testimonials-section {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            /* Aligns content to the left */
            background: white;
            padding: 217px 0px;
            /* Adjust this if needed */
            position: relative;
            width: 100vw;
            /* Ensures it spans the full viewport width */
            padding-left: 0;
            /* Ensures no extra space on the left */
        }


        .testimonials-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .testimonials-text h2 {
            background-image: var(--brand-gradient);
            color: transparent;
            background-clip: text;
            font-size: 24px;
            margin: 0;
        }

        .testimonials-text h1 {
            font-size: 48px;
            color: #333;
            margin: 18px 0;
            white-space: nowrap;
        }

        .testimonials-text a {
            width: 193px;
            height: 52px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--brand-gradient);
            color: white;
            font-size: 16px;
            text-decoration: none;
            padding: 12px 24px;
            border-radius: 16px;
            margin-top: 20px;
            transition: background 0.3s;
        }

        .testimonials-text a:hover {
            background: linear-gradient(to right, #ff5e5e, #a50050);
        }

        .testimonials-text a span img {
            margin-left: 15px;
        }

        .testimonial-cards {
            flex: 2;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .testimonial-card {
            position: absolute;
            width: 700px;
            height: 190px;
        }

        .testimonial-card:nth-child(2) {
            width: 450px;
            height: 127px;
            bottom: 100px;
            left: 430px;
            z-index: 10;
        }

        .testimonial-card:last-child {
            width: 450px;
            height: 127px;
            top: 100px;
            left: 430px;
            z-index: 10;
        }

        @media (max-width: 1440px) {
            .testimonial-card:nth-child(2) {
                left: 250px;
            }

            .testimonial-card:last-child {
                left: 250px;
            }
        }

        @media (max-width: 1300px) {
            .testimonials-section {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                /* Ensures content aligns to the left */
                justify-content: flex-start;
                /* Ensures it starts at the top */
                background: white;
                padding: 217px 0px;
                /* Adjust if necessary */
                position: static;
                /* Keeps it in the normal document flow */
                width: 100vw;
                /* Ensures it spans the full viewport width */
                margin: 0;
                padding-left: 0;
                /* Removes any extra space on the left */
            }

            .testimonials-text {
                margin-left: 0;
                margin-bottom: 32px;
            }

            .testimonials-text h1 {
                margin: 0;
            }

            .testimonial-cards {
                position: static;
                flex-direction: column;
                margin: 32px 0;
                gap: 32px;
            }

            .testimonial-card {
                position: static;
                width: auto;
                height: auto;
            }

            .testimonial-card:nth-child(2) {
                width: auto;
                height: auto;
            }

            .testimonial-card:last-child {
                width: auto;
                height: auto;
            }
        }

        @media (max-width: 600px) {
            .testimonials-section {
                padding: 40px 0px;
                align-items: start;
            }

            .testimonials-text {
                align-items: start;
                margin-left: 32px;
            }

            .testimonials-text h2 {
                font-size: 15px;
            }

            .testimonials-text h1 {
                font-size: 28px;
            }

            .testimonials-text a {
                width: 127px;
                height: 48px;
                font-size: 12px;
            }

            .testimonials-text a span {
                display: none;
            }

            .testimonial-card {
                position: static;
                width: auto;
                height: auto;
                padding: 0 32px;
            }

            .testimonial-card:nth-child(2) {
                width: auto;
                height: auto;
            }

            .testimonial-card:last-child {
                width: auto;
                height: auto;
            }
        }

        /* BLOGS */
        .insights-section {
            padding-top: 70px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: white;
        }

        .insights-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .insights-header h2 {
            background-image: var(--brand-gradient);
            color: transparent;
            background-clip: text;
            font-size: 24px;
            margin: 0;
        }

        .insights-header h1 {
            font-size: 48px;
            color: #333;
            margin: 18px 0;
        }

        .insights-header p {
            font-size: 24px;
            color: #333;
            margin: 0;
        }

        .insights-cards {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 32px;
            width: 100%;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding: 32px;
        }

        .insights-cards::-webkit-scrollbar {
            display: none;
        }

        .insight-card {
            width: 372px;
            height: 499px;
            flex-shrink: 0;
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: left;
            scroll-snap-align: start;
        }

        .insight-card .image-placeholder {
            width: 100%;
            height: auto;
            background-color: #E1A2BD;
            border-radius: 10px;
            margin-bottom: 16px;
        }

        .insight-card .image-placeholder img {
            border-radius: 10px;
        }

        .insight-card h3 {
            font-size: 20px;
            margin-bottom: 18px;
            color: black;
            line-height: 30px;
        }

        .insight-card p {
            font-size: 16px;
            color: black;
            margin-bottom: 18px;
            line-height: 30px;
        }

        .insight-card a {
            font-size: 16px;
            font-weight: bold;
            color: var(--brand-gradient);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }

        .insight-card a span {
            margin-left: 5px;
        }

        .insights-bottom-nav {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding: 32px;
        }

        .insights-circles {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 148px;
            height: 64px;
        }

        .insights-circle {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #B2B2B2;
            transition: background 0.3s ease;
        }

        /* Active circle */
        .insights-active-step {
            background: var(--brand-gradient);
        }

        /* Arrow container */
        .insights-change-arrow {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 148px;
            height: 64px;
            background: white;
            border-radius: 15px;
            gap: 16px;
        }

        /* Arrow icons */
        .insights-change-arrow img {
            width: 12px;
            height: 12px;
        }

        /* Left arrow (default) */
        .insights-change-arrow .insights-left-arrow,
        .insights-change-arrow .insights-right-arrow {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 48px;
            height: 48px;
            border-radius: 8px;
            border: 1px solid #B2B2B2;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        /* Active arrow */
        .insights-left-arrow.active,
        .insights-right-arrow.active {
            background: var(--brand-gradient);
            border: none;
        }

        /* Hover effects */
        .insights-left-arrow:not(.active):hover,
        .insights-right-arrow:not(.active):hover {
            background: white;
            border: 1px solid #D0003A;
        }

        /* Ensure active stays red even on hover */
        .insights-left-arrow.active:hover,
        .insights-right-arrow.active:hover {
            background: var(--brand-gradient) !important;
        }

        @media (max-width: 1440px) {
            .insights-section {
                padding: 0 90px
            }
        }

        @media (max-width: 600px) {
            .insights-section {
                padding: 0 15px !important;
            }

            .insights-header {
                margin-bottom: 5px;
            }

            .insights-header h2 {
                font-size: 18px;
                margin-top: 18px
            }

            .insights-header h1 {
                font-size: 32px;
                margin: 10px 0;
            }

            .insights-header p {
                font-size: 14px;
            }

            .insights-header a {
                display: none;
            }

            .insight-card h3 {
                font-size: 14px;
                margin: 0;
                line-height: 20px;
            }

            .insight-card p {
                font-size: 14px;
                line-height: 20px;
                margin: 0;
            }

            .insight-card a {
                font-size: 14px;
                margin: 0;
            }

            .insight-card .image-placeholder {
                margin: 0;
                height: 138px;
            }

            .insight-card {
                width: 256px;
                height: 381px;
            }
        }

        /* HIRING */
        .hiring-section {
            display: flex;
            flex-direction: column;
            padding: 98px 262px;
            background: var(--brand-gradient-signup);
            height: 373px;
            color: white;
        }

        .hiring-text h1 {
            font-size: 64px;
            font-weight: bold;
            margin: 0 0 20px;
        }

        .hiring-text p {
            font-size: 40px;
            margin: 0;
        }

        .hiring-button {
            margin-left: auto;
            width: 152px;
            height: 47px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            color: #a50050;
            font-size: 16px;
            font-weight: bold;
            text-decoration: none;
            padding: 12px 24px;
            border-radius: 16px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            transition: background 0.3s ease;
        }

        @media (max-width: 1440px) {
            .hiring-section {
                padding: 98px 90px;
            }
        }

        @media (max-width: 1300px) {
            .hiring-section {
                padding: 98px 72px;
            }

            .hiring-button {
                margin-top: 24px;
            }
        }

        @media (max-width: 600px) {
            .hiring-section {
                padding: 98px 32px;
            }

            .hiring-text p {
                font-size: 34px;
                margin-bottom: 32px;
            }

            .hiring-text h1 {
                font-size: 38px;
            }

            .hiring-button {
                margin-left: 0;
            }
        }

        /* RESOURCES SECTION */
        .resources-section {
            padding-top: 70px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 100px;
        }

        .resources-header {
            text-align: center;
            margin-bottom: 50px;
        }

    .resources-header h2 {
        background-image: var(--brand-gradient);
        color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 24px;
        margin: 0;
    }

    .resources-header h1 {
        font-size: 30px;
        color: #333;
        margin: 18px 0;
        text-align: center;
    }

    .resources-header p {
        font-size: 24px;
        color: #333;
        margin: 0;
        text-align: center;
    }

        .resources-cards {
            display: flex;
            gap: 32px;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding: 20px 0;
            width: 100%;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .resources-cards::-webkit-scrollbar {
            display: none;
        }

        .resource-card {
            flex: 0 0 372px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }

        .resource-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        }

        .resource-card .image-placeholder {
            width: 100%;
            height: 200px;
            overflow: hidden;
        }

        .resource-card .image-placeholder img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .resource-card:hover .image-placeholder img {
            transform: scale(1.05);
        }

        .resource-card h3 {
            font-size: 20px;
            font-weight: 600;
            color: #000;
            margin: 20px 20px 10px 20px;
            line-height: 1.3;
        }

        .resource-card p {
            font-size: 16px;
            color: #666;
            margin: 0 20px 20px 20px;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .resource-card a {
            display: inline-flex;
            align-items: center;
            color: #D0003A;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            margin: 0 20px 20px 20px;
            transition: color 0.3s ease;
        }

        .resource-card a:hover {
            color: #B51151;
        }

        .resource-card a span {
            margin-left: 8px;
            font-size: 18px;
            transition: transform 0.3s ease;
        }

        .resource-card a:hover span {
            transform: translateX(5px);
        }

        .resources-bottom-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }

        .resources-circles {
            display: flex;
            gap: 8px;
        }

        .resources-circle {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ddd;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .resources-circle.resources-active-step {
            background: #D0003A;
        }

        .resources-change-arrow {
            display: flex;
            gap: 10px;
        }

        .resources-left-arrow,
        .resources-right-arrow {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid #ddd;
        }

        .resources-left-arrow:hover,
        .resources-right-arrow:hover {
            background: #e0e0e0;
        }

        .resources-left-arrow.active,
        .resources-right-arrow.active {
            background: var(--brand-gradient);
            border: 1px solid #D0003A;
        }

        .resources-left-arrow img,
        .resources-right-arrow img {
            width: 20px;
            height: 20px;
        }

        /* Ensure active stays red even on hover */
        .resources-left-arrow.active:hover,
        .resources-right-arrow.active:hover {
            background: var(--brand-gradient) !important;
        }

        @media (max-width: 1440px) {
            .resources-section {
                padding: 0 90px
            }
        }

        @media (max-width: 600px) {
            .resources-section {
                padding: 0 15px !important;
            }

            .resources-header {
                margin-bottom: 5px;
            }

        .resources-header h2 {
            font-size: 14px;
            margin-top: 18px
        }

        .resources-header h1 {
            font-size: 32px;
            margin: 10px 0;
        }

        .resources-header p {
            font-size: 14px;
        }

            .resource-card {
                flex: 0 0 300px;
            }

            .resource-card h3 {
                font-size: 16px;
                margin: 15px 15px 8px 15px;
            }

            .resource-card p {
                font-size: 14px;
                margin: 0 15px 15px 15px;
            }

            .resource-card a {
                font-size: 14px;
                margin: 0 15px 15px 15px;
            }
        }