:root {
    --primary-color: #339CFF;
    --secondary-color: #00e800;
    --background-color: #000;
    --light-bg: #1a1a1c;
    --Heading-Color: #FFF;
    --Highlight-Color: #00e800;
    --Text-color: #555;
    --navbar-color: #000;
    --footer-color: #000;
    --footer-bottom-color: #1a1a1c;
    --footer-heading-color: #FFF;
    --footer-text-color: #ccc;
    --white-color: #fff;
    --primary-Btn-color: linear-gradient(45deg, #5b7cff, #a855f7);
    --Secondary-Btn-color: linear-gradient(45deg, #1b1f50, #11153a);
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    background: var(--background-color);
    padding-top: 90px;
    overflow-x: hidden;
}

body p {
    font-family: 'Poppins', sans-serif;
}

body h1,
h2,
h3,
h4,
h5 {
    font-family: 'Bebas Neue', 'Oswald', sans-serif;
}

.sub-heading {
    letter-spacing: 1px;
    font-size: 15px;
    color: var(--Highlight-Color);
}

.highlite {
    color: var(--Highlight-Color);
}

.highlite-des {
    color: var(--Highlight-Color);
    letter-spacing: 1px;
}

@media (max-width:768px) {
    .highlite-des {
        color: inherit;
    }

}

/*-- Buttons Start --*/

.primary-btn {
    background: #00ff88;
    color: #000;
    font-weight: 600;
    border: none;
}

.primary-btn:hover {
    background: #00cc6a;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width:768px) {
    .primary-btn {
        font-size: 18px;
        padding: 10px 25px;
    }

    .secondary-btn {
        padding: 10px 25px;
    }

}

.secondary-btn {
    display: inline-block;
    padding: 12px 30px;
    background: #fff;
    color: #000;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.secondary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    background: #00ff5e;
    color: #000;
}

/*-- Buttons End --*/


/*------ NAVBAR -------*/

.custom-navbar {
    background: var(--navbar-color);
    padding: 15px 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    z-index: 9999;
}


.brand-logo {
    width: 70px;
}

/* center menu */
.nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* nav links */

.nav-link {
    color: var(--white-color);
    margin: 0 12px;
    font-weight: 500;
    position: relative;
    transition: 0.3s;
}

/* hover animation */

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--secondary-color);
    transition: 0.4s;
}

.nav-link:hover::after {
    width: 100%;
}

/* dropdown */

.dropdown-menu {
    background: var(--navbar-color);
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.dropdown-item {
    color: var(--white-color);
    background: #1a1a1c;
    transition: 0.3s;
}

.dropdown-item:hover {
    background: #0d6efd;
    color: var(--white-color);
}

/* dark mode toggle */

.dark-toggle {
    font-size: 20px;
    color: var(--white-color);
    margin-right: 15px;
    cursor: pointer;
}

/* NAV LINK */

.nav-link {
    color: var(--white-color) !important;
    margin: 0 14px;
    font-weight: 500;
    position: relative;
    padding-bottom: 6px;
    transition: 0.3s;
}

/* ARROW ICON */

.nav-arrow {
    font-size: 12px;
    margin-left: 6px;
    transition: 0.3s;
}

/* Rotate arrow when dropdown open */

.show>.nav-link .nav-arrow {
    transform: rotate(180deg);
}

/* UNDERLINE ANIMATION */

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0%;
    height: 2px;
    background: #00ff88;
    transition: 0.35s;
}

.nav-link:hover::after {
    width: 100%;
}

/* ACTIVE NAV */

.nav-link.active {
    color: var(--secondary-color) !important;
}

.nav-link.active::after {
    width: 90%;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--white-color) !important;
    margin: 0 14px;
    font-weight: 500;
    position: relative;
    padding-bottom: 6px;
}

/* arrow icon */

.nav-arrow {
    font-size: 12px;
    transition: 0.3s;
}

/* rotate arrow when dropdown open */

.dropdown.show .nav-arrow {
    transform: rotate(180deg);
}

.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    filter: invert(1);
}

.login-btn {
    background: #00ff88;
    color: #000;
    border: none;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 500;
    transition: 0.3s;
    text-decoration: none !important;
}


a {
    text-decoration: none;
}

.login-btn:hover {
    background: #00cc6a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Desktop center menu */

@media (min-width:992px) {

    .nav-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

}

/* Mobile layout fix */

@media (max-width:991px) {

    .nav-center {
        position: static;
        transform: none;
        text-align: left;
    }

    .navbar-nav {
        gap: 10px;
    }

    .login-btn {
        width: 100%;
        margin-top: 10px;
    }

}

.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    filter: invert(1);
}

/*------ END OF NAVBAR -------*/

/*------ FOOTER -------*/
.footer {
    background: var(--footer-color);
    padding-top: 60px;
    font-size: 14px;
}

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


.footer-title {
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--footer-heading-color);
}

.footer-text {
    color: var(--footer-text-color);
    line-height: 1.6;
}

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

.footer-links a {
    text-decoration: none;
    color: var(--footer-text-color);
    display: block;
    margin-bottom: 8px;
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--Highlight-Color);
    transform: translateX(4px);
}

.footer-contact {
    margin-bottom: 8px;
}

.footer-contact {
    color: var(--footer-text-color);
}


.footer-newsletter {
    display: flex;
    margin-top: 10px;
}

.footer-newsletter input {
    border: 1px solid #ddd;
    padding: 8px;
    flex: 1;
    border-radius: 4px 0 0 4px;
}

.footer-newsletter button {
    background: var(--primary-Btn-color);
    border: none;
    color: var(--white-color);
    padding: 8px 12px;
    border-radius: 0 4px 4px 0;
}

.footer-social {
    margin-top: 20px;
}

.social-icons i {
    color: var(--white-color);
    font-size: 18px;
    margin-right: 15px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.social-icons i:hover {
    color: var(--Highlight-Color);
    transform: translateY(-3px);
}

/* Bottom Footer */

.footer-bottom {
    background: var(--footer-bottom-color);
    color: var(--white-color);
    padding: 15px 0;
    margin-top: 40px;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-copy {
    justify-content: center;
    margin-top: 10px;
}

.footer-menu a {
    color: white;
    margin-right: 20px;
    text-decoration: none;
    transition: .3s;
}

.footer-menu a:hover {
    color: var(--secondary-color);
    transform: translateY(-5px);
}


/* Responsive */

@media(max-width:768px) {

    .footer-bottom-content {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

}

/*------ END OF FOOTER -------*/


/*============= Index  ==============*/

/*---------- V1 Hero Section Start --------*/
.hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(120deg, #0a0a0a, #111);
}

.hero h1 {
    font-size: 57px;
    font-weight: 800;
    line-height: 1.1;
}

.hero h1 span {
    color: #00ff88;
}

.hero p {
    color: #ccc;
    max-width: 400px;
}

.btn-primary-custom {
    background: #00ff88;
    color: #000;
    font-weight: 600;
    border: none;
    border-radius: 50px;
}

.btn-primary-custom:hover {
    background: #00cc6a;
    color: #000;
}

.btn-outline-custom {
    background: #000;
    border: 1px solid #555;
    color: #fff;
}

.btn-outline-custom:hover {
    background: #222;
}

.hero-img {
    position: relative;
    text-align: center;
}

.hero-img img {
    max-width: 100%;
    width: 420px;
    position: relative;
    z-index: 2;
}

.paint {
    position: absolute;
    width: 450px;
    height: 250px;
    background: #00ff88;
    filter: blur(80px);
    z-index: 1;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
}

.hero-stats {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
}

.hero-stats h2 {
    color: #00ff88;
    font-size: 32px;
    margin: 0;
}

.hero-stats p {
    color: #fff;
    margin-bottom: 20px;
    font-size: 22px;
}

.social-icons i {
    margin-right: 10px;
    background: #00ff88;
    color: #000;
    padding: 10px;
    border-radius: 5px;
}

.social-icons i:hover {
    color: #000;
}

/* Mobile */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 36px;
    }

    .hero {
        padding: 60px 10px;
        text-align: center;
    }

    .hero p {
        text-align: center;
        margin: auto;
    }

    .btn-group {
        text-align: center;
    }

    .hero-stats {
        position: static;
        transform: none;
        display: flex;
        justify-content: space-around;
        margin-top: 30px;
    }
}

/*---------- V1 Hero  Section End --------*/

/*---------- V1 About Us  Section Start --------*/

.v1-about {
    background: #000;
}

/* Image */
.v1-about-img-wrapper {
    overflow: hidden;
    border-radius: 12px;
}

.v1-about-img {
    width: 100%;
    transition: 0.5s;
}

.v1-about-img-wrapper:hover .v1-about-img {
    transform: scale(1.05);
}

/* Text */
.v1-about-subtitle {
    color: #00ff5e;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 10px;
}

.v1-about-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

.v1-about-text {
    color: #bbb;
    line-height: 1.7;
    margin-bottom: 15px;
}

.v1-highlight {
    color: #00ff5e;
}

/* Button */
.v1-about-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 25px;
    background: #00ff5e;
    color: #000;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
}

.v1-about-btn:hover {
    background: #00cc4a;
}

/* Responsive */
@media (max-width: 768px) {
    .v1-about-title {
        font-size: 2rem;
    }
}

/*---------- V1 About Us  Section End --------*/

/*---------- V1 Services  Section Start --------*/
.v1-services {
    background: var(--light-bg);
}

/* Section Title */
.v1-section-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
}

.v1-section-text {
    color: #aaa;
    max-width: 600px;
    margin: 10px auto 0;
}

/* Card */
.v1-service-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 94, 0.4);
}

.v1-service-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: 0.5s;
}

/* Overlay */
.v1-service-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3));
}

/* Content */
.v1-service-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    color: #fff;
}

.v1-service-content h4 {
    font-weight: 700;
}

.v1-highlight {
    color: #00ff5e;
}

.v1-service-content p {
    font-size: 0.9rem;
    color: #ccc;
}

/* Button */
.v1-service-btn {
    color: #00ff5e;
    text-decoration: none;
    font-weight: 600;
}

/* Hover */
.v1-service-card:hover .v1-service-img {
    transform: scale(1.1);
}

/*---------- V1 Services  Section End --------*/

/*---------- V1 Why Choose Us  Section Start --------*/
.v1-who {
    background: var(--background-color);
}

/* Title */
.v1-who-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
}

.v1-who-subtext {
    color: #aaa;
    max-width: 600px;
    margin: 10px auto 0;
}

.v1-highlight {
    color: #00ff5e;
}

/* Cards */
.v1-who-card {
    background: var(--light-bg);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    align-items: flex-start;
    gap: 15px;
    transition: 0.3s;
}

.v1-who-card:hover {
    transform: translateY(-5px);
    border: 1px solid #00ff5e;
}

/* Icon */
.v1-who-icon {
    font-size: 24px;
    background: rgba(0, 255, 94, 0.1);
    color: #00ff5e;
    padding: 10px;
    border-radius: 8px;
}

/* Text */
.v1-who-card h5 {
    color: #fff;
    margin-bottom: 5px;
}

.v1-who-card p {
    color: #bbb;
    font-size: 0.9rem;
}

/* Image */
.v1-who-img-wrapper {
    overflow: hidden;
    border-radius: 20px;
}

.v1-who-img {
    width: 100%;
    transition: 0.5s;
}

.v1-who-img-wrapper:hover .v1-who-img {
    transform: scale(1.05);
}

.v1-who-icon i {
    font-size: 22px;
}

/* Responsive */
@media (max-width: 768px) {
    .v1-who-title {
        font-size: 2rem;
    }
}

/*---------- V1 Why Choose Us  Section End --------*/

/*============= End of Index  ==============*/

/*============= Home Version 2 Start ===========*/

/*-------- V2 Hero Section Start ------*/
.v2-hero {
    background: #0a0a0a;
    overflow: hidden;
}

/* Left Side */
.v2-hero-left {
    position: relative;
    background: #0a0a0a;
    padding: 0px 100px 150px 60px;
}


.v2-hero-content {
    max-width: 500px;

}

.v2-hero-content {
    position: relative;

}

/* Text */
.v2-hero-subtitle {
    color: #00ff5e;
    font-weight: 600;
    letter-spacing: 2px;
}

.v2-hero-title {
    color: #fff;
    font-size: 3rem;
    font-weight: 800;
    margin: 20px 0;
}

.v2-highlight {
    color: #00ff5e;
}

.v2-hero-text {
    color: #bbb;
    margin-bottom: 25px;
    line-height: 1.6;

}

/* Button */
.v2-hero-btn {
    display: inline-block;
    padding: 12px 30px;
    background: #00ff5e;
    color: #000;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s;
}

.v2-hero-btn:hover {
    background: #00cc4a;
}

/* Right Side */
.v2-hero-right {
    position: relative;
    min-height: 0vh;
    background-color: #00ff5e;
}

.v2-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

/* Green Accent Line */
.v2-hero-right::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 0;
    width: 50px;
    height: 100%;
    background: #00ff5e;
    transform: skewX(-03deg);
    z-index: 2;
}

/* Responsive */
@media (max-width: 991px) {
    .v2-hero-left {
        clip-path: none;
        text-align: center;
        padding: 40px 20px;
    }

    .v2-hero-right::before {
        display: none;
    }

    .v2-hero-title {
        font-size: 2.2rem;
    }
}

@media (max-width:768px) {
    .v2-hero-content {
        text-align: center;
        margin: auto;
    }
}

/*-------- V2 Hero Section End --------*/

/*-------- V2 About Us Section Start ---*/
.v2-about {
    background: var(--light-bg);
}

/* Grid Layout */
.v2-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.v2-about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Custom Layout */
.v2-img-1 {
    grid-column: span 1;
}

.v2-img-2 {
    grid-column: span 1;
}

.v2-img-3 {
    grid-column: span 2;
}

/* Text */
.v2-about-subtitle {
    color: #00ff5e;
    font-weight: 600;
    letter-spacing: 2px;
}

.v2-about-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 800;
    margin: 10px 0 20px;
}

.v2-highlight {
    color: #00ff5e;
}

.v2-about-text {
    color: #bbb;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Features */
.v2-about-feature {
    gap: 15px;
    margin-bottom: 20px;
}

.v2-about-number {
    min-width: 50px;
    height: 50px;
    background: #00ff5e;
    color: #000;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.v2-about-feature h5 {
    color: #fff;
    margin-bottom: 5px;
}

.v2-about-feature p {
    color: #bbb;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .v2-about-title {
        font-size: 2rem;
    }

    .v2-about-grid {
        grid-template-columns: 1fr;
    }

    .v2-img-3 {
        grid-column: span 1;
    }

    .v2-img-1 {
        display: none;
    }

    .v2-img-2 {
        display: none;
    }
}

/*-------- V2 About us Secion End ------*/

/*-------- V2 Stats Start -------------*/
.v2-stats {
    background: #000;
}

/* Icon */
.v2-stat-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: rgba(0, 255, 94, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-stat-icon i {
    font-size: 24px;
    color: #00ff5e;
}

/* Text */
.v2-stat-box h3 {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
}

.v2-stat-box p {
    color: #bbb;
    margin: 0;
    font-size: 0.9rem;
}

/* Icon */
.v2-stat-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: rgba(0, 255, 94, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

/* Box */
.v2-stat-box {
    padding: 25px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

/* Remove border for last */
.v2-stat-box:last-child {
    border-right: none;
}

/* Hover Effect 🔥 */
.v2-stat-box:hover {
    transform: translateY(-10px);
    background: rgba(0, 255, 94, 0.05);
    box-shadow: 0 10px 30px rgba(0, 255, 94, 0.2);
    border-radius: 10px;
}

/* Icon */
.v2-stat-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: rgba(0, 255, 94, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.v2-stat-icon i {
    font-size: 24px;
    color: #00ff5e;
    transition: 0.3s;
}

/* Icon Hover Animation */
.v2-stat-box:hover .v2-stat-icon {
    transform: scale(1.1);
    background: #00ff5e;
}

.v2-stat-box:hover .v2-stat-icon i {
    color: #000;
}

/* Text */
.v2-stat-box h3 {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    transition: 0.3s;
}

.v2-stat-box p {
    color: #bbb;
    margin: 0;
    font-size: 0.9rem;
    transition: 0.3s;
}

/* Text hover color */
.v2-stat-box:hover h3 {
    color: #00ff5e;
}

/* Responsive */
@media (max-width: 768px) {
    .v2-stat-box {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/*-------- V2 stats End -----------*/

/*-------- V2 Why Choose Us Start ------------*/

.v2-why {
    background: linear-gradient(120deg, #0a0a0ac1, #111111), url('https://i.pinimg.com/1200x/76/c7/6a/76c76a7a19d36104ad013fe959f5f8ef.jpg')center/ cover no-repeat;
}

/* Left Image */
.v2-why-img-wrapper {
    position: relative;
    width: 350px;
    height: 350px;
    margin: auto;
    border-radius: 50%;
    overflow: hidden;
}

.v2-why-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Green Circle Accent */
.v2-why-img-wrapper::before {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    border: 10px solid #00ff5e;
    border-radius: 50%;
    top: -10%;
    left: -10%;
    z-index: -1;
}

/* Text */
.v2-why-subtitle {
    color: #00ff5e;
    font-weight: 600;
    letter-spacing: 2px;
}

.v2-why-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 800;
    margin: 10px 0 20px;
}

.v2-highlight {
    color: #00ff5e;
}

/* Cards */
.v2-why-card {
    background: #000;
    padding: 20px;
    border-radius: 10px;
    text-align: left;
    transition: 0.3s;
    height: 100%;
}

.v2-why-card i {
    font-size: 28px;
    color: #00ff5e;
    margin-bottom: 10px;
}

.v2-why-card h5 {
    color: #fff;
    margin-bottom: 8px;
}

.v2-why-card p {
    color: #bbb;
    font-size: 0.9rem;
}

/* Hover */
.v2-why-card:hover {
    transform: translateY(-5px);
    border: 1px solid #00ff5e;
}

/* Responsive */
@media (max-width: 768px) {
    .v2-why-img-wrapper {
        width: 250px;
        height: 250px;
    }

    .v2-why-title {
        font-size: 2rem;
        text-align: center;
    }

    .v2-why-subtitle {
        text-align: center;
        display: block;
    }
}

/*-------- V2 Why Choose Us End --------------*/

/*-------- V2 Process Section Start ----------*/
.v2-process {
    background: #000;
}

/* Title */
.v2-process-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 800;
}

.v2-process-subtext {
    color: #aaa;
    max-width: 600px;
    margin: 10px auto 0;
}

.v2-highlight {
    color: #00ff5e;
}

/* Box */
.v2-process-box {
    background: var(--light-bg);
    padding: 40px;
    border-radius: 20px;
}

/* Image */
.v2-process-img-wrapper {
    overflow: hidden;
    border-radius: 15px;
}

.v2-process-img {
    width: 100%;
    transition: 0.5s;
}

.v2-process-img-wrapper:hover .v2-process-img {
    transform: scale(1.05);
}

/* Steps */
.v2-process-step {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.v2-process-step:last-child {
    border-bottom: none;
}

/* Numbers */
.v2-step-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: #00ff5e;
    min-width: 50px;
}

/* Text */
.v2-process-step h5 {
    color: #fff;
    margin-bottom: 5px;
}

.v2-process-step p {
    color: #bbb;
    font-size: 0.9rem;
}

/* Button */
.v2-process-btn {
    display: inline-block;
    padding: 12px 30px;
    background: #00ff5e;
    color: #000;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s;
}

.v2-process-btn:hover {
    background: #00cc4a;
}

/* Responsive */
@media (max-width: 768px) {
    .v2-process-title {
        font-size: 2rem;
    }
}

/*-------- V2 Process Section End ------------*/

/*============= Home Version 2 End =============*/

/*============= Inner Hero Section =============*/
.inhero-section {
    position: relative;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('https://i.pinimg.com/1200x/53/59/cc/5359cc29a70e9e1061b6c4326668df06.jpg') center/cover no-repeat;
    overflow: hidden;
}

.inhero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

.inhero-section .container {
    position: relative;
    z-index: 2;
}

.inhero-subtitle {
    color: #39d27d;
    font-weight: 600;
    letter-spacing: 4px;
    font-size: 16px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.inhero-title {
    color: #fff;
    font-weight: 700;
    font-size: 56px;
    line-height: 1.2;
}

/* Tablet */
@media (max-width:991px) {

    .inhero-section {
        height: 360px;
    }

    .inhero-title {
        font-size: 42px;
    }

}

/* Mobile */
@media (max-width:576px) {

    .inhero-section {
        height: 300px;
        padding: 40px 15px;
    }

    .inhero-title {
        font-size: 30px;
    }

    .inhero-subtitle {
        font-size: 13px;
        letter-spacing: 2px;
    }

}

/*============= Inner Hero Section End =========*/

/*============= About Start ====================*/

/*------ Our Mision & Vission ------*/
.v2-mission {
    background: var(--light-bg);
}

/* Text */
.v2-mission-subtitle {
    color: #00ff5e;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 16px;
}

.v2-mission-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 800;
    margin: 10px 0 20px;
}

.v2-highlight {
    color: #00ff5e;
}

/* Tabs */
.v2-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.v2-tab {
    padding: 8px 18px;
    border: none;
    background: #000;
    color: #ddd;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
}

.v2-tab.active {
    background: #00ff5e;
    color: #000;
}

/* Content */
.v2-tab-content {
    display: none;
}

.v2-tab-content.active {
    display: block;
}

.v2-tab-content h5 {
    color: #fff;
}

.v2-tab-content p {
    color: #bbb;
}

/* Image */
.v2-mission-img-wrapper {
    overflow: hidden;
    border-radius: 20px;
}

.v2-mission-img {
    width: 100%;
    transition: 0.5s;
}

.v2-mission-img-wrapper:hover .v2-mission-img {
    transform: scale(1.05);
}

@media (max-width:786px) {

    /* Section Padding */
    .v2-mission {
        padding: 40px 15px;
    }

    .v2-mission-subtitle {
        margin: auto;
        text-align: center;
    }

    /* Tabs Fix */
    .v2-tabs {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .v2-tab {
        flex: 1 1 30%;
        font-size: 14px;
        padding: 8px 10px;
        text-align: center;
    }

    /* Content Spacing */
    .v2-tab-content {
        text-align: center;
    }

    .v2-tab-content h5 {
        font-size: 1.2rem;
    }

    .v2-tab-content p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* Image spacing */
    .v2-mission-img-wrapper {
        margin-top: 20px;
    }
}

/* Mobile Fix */
@media (max-width: 575px) {

    /* Section Padding */
    .v2-mission {
        padding: 40px 15px;
        text-align: center;
    }

    .v2-mission-subtitle {
        text-align: center;
        margin-left: 15px;
    }

    /* Title Fix */
    .v2-mission-title {
        font-size: 1.8rem;
        line-height: 1.3;
        text-align: center;
    }


    /* Tabs Fix */
    .v2-tabs {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .v2-tab {
        flex: 1 1 30%;
        font-size: 14px;
        padding: 8px 10px;
        text-align: center;
    }

    /* Content Spacing */
    .v2-tab-content {
        text-align: center;
    }

    .v2-tab-content h5 {
        font-size: 1.2rem;
    }

    .v2-tab-content p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* Image spacing */
    .v2-mission-img-wrapper {
        margin-top: 20px;
    }
}

/*----- Our Mission & Vission END ------*/

/*----- Who We Are Start ---------*/
.ab-who {
    background: #000;
}

/* Text */
.ab-subtitle {
    color: #00ff5e;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 16px;
}

.ab-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    margin: 10px 0 20px;
}

.ab-highlight {
    color: #00ff5e;
}

.ab-text {
    color: #bbb;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* Author */
.ab-author {
    margin: 20px 0;
    color: #fff;
}

.ab-author span {
    color: #aaa;
}

/* Button */
.ab-btn {
    display: inline-block;
    padding: 12px 30px;
    background: #00ff5e;
    color: #000;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: 0.3s;
}

.ab-btn:hover {
    background: #00cc4a;
}

/* Image */
.ab-img-wrapper {
    position: relative;
}

.ab-img {
    width: 100%;
    border-radius: 15px;
}

/* Floating Card */
.ab-quote-card {
    position: absolute;
    bottom: -30px;
    left: 30px;
    background: var(--light-bg);
    padding: 20px;
    border-radius: 10px;
    max-width: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.ab-quote-card p {
    color: #fff;
    font-size: 0.9rem;
}

.ab-quote-card span {
    color: #00ff5e;
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 768px) {
    .ab-title {
        font-size: 2rem;
    }

    .ab-quote-card {
        position: static;
        margin-top: 0px;
        text-align: center;
        justify-content: center;
        margin: auto;
    }

    .ab-who {
        text-align: center;
    }
}

@media (max-width:575px) {
    .ab-quote-card {
        position: static;
        margin-top: 15px;
    }
}

/*----- Who We Are End -----------*/

/*------ Testimonial Section start -----*/
.ab-testimonial {
    background: radial-gradient(circle at top, #0b2f1a, #000);
}

/* Title */
.ab-testimonial-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 800;
}

.ab-testimonial-subtext {
    color: #aaa;
    max-width: 600px;
    margin: 10px auto 0;
}

/* Card */
.ab-testimonial-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 255, 94, 0.2);
    transition: 0.3s;
    height: 100%;
}

/* Hover */
.ab-testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 255, 94, 0.2);
}

/* Image */
.ab-testimonial-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-bottom: 15px;
    object-fit: cover;
    border: 2px solid #00ff5e;
}

/* Text */
.ab-testimonial-card h5 {
    color: #fff;
    margin-bottom: 5px;
}

.ab-testimonial-card span {
    color: #00ff5e;
    font-size: 0.85rem;
}

.ab-testimonial-card p {
    color: #bbb;
    font-size: 0.9rem;
    margin-top: 15px;
}

/*------ Testimonial Section End -------*/

/*------ Our Team Section Start --------*/

.ab-team {
    background: #000;
}

/* Title */
.ab-team-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 800;
}

.ab-highlight {
    color: #00ff5e;
}

/* Card */
.ab-team-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 94, 0.3);
}

/* Image Wrapper */
.ab-team-img-wrapper {
    position: relative;
    overflow: hidden;
}

/* Images */
.ab-img-main,
.ab-img-hover {
    width: 100%;
    transition: 0.5s;
}

/* Hover image hidden initially */
.ab-img-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* Hover effect */
.ab-team-card:hover .ab-img-hover {
    opacity: 1;
}

.ab-team-card:hover .ab-img-main {
    opacity: 0;
}

/* Info */
.ab-team-info {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: #fff;
}

.ab-team-info h4 {
    font-weight: 700;
}

.ab-team-info p {
    font-size: 0.85rem;
    color: #00ff5e;
}

/* Glow on hover */
.ab-team-card:hover {
    box-shadow: 0 10px 30px rgba(0, 255, 94, 0.2);
}

.ab-img-main {
    filter: grayscale(2);
}

/*------ Our Team Section End ----------*/
/*============= About End ======================*/


/*============= Service-Details.HTML ============*/

.v1-service-detail {
    background: #000;
}

/* Image */
.v1-detail-img-wrapper {
    overflow: hidden;
    border-radius: 15px;
}

.v1-detail-img {
    width: 100%;
    transition: 0.5s;
}

.v1-detail-img-wrapper:hover .v1-detail-img {
    transform: scale(1.05);
}

/* Text */
.v1-detail-title {
    color: #fff;
    font-size: 2.3rem;
    font-weight: 700;
}

.v1-highlight {
    color: #00ff5e;
}

.v1-detail-text {
    color: #bbb;
    margin: 15px 0 25px;
}

/* Progress */
.v1-progress-box {
    margin-bottom: 20px;
}

.v1-progress-box span {
    color: #fff;
    font-size: 0.9rem;
}

/* Bar background */
.v1-progress {
    width: 100%;
    height: 6px;
    background: #222;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 5px;
}

/* Bar fill */
.v1-progress-bar {
    height: 100%;
    background: #00ff5e;
    border-radius: 10px;
    transition: 0.5s;
}

/* Hover animation */
.v1-progress-box:hover .v1-progress-bar {
    filter: brightness(1.3);
}

@media (max-width:575px) {
    .v1-service-detail {
        text-align: center;
    }
}


/*----- description ------*/

.v1-service-description {
    background: #000000;
}

/* Title */
.v1-desc-title {
    color: #fff;
    font-size: 2.3rem;
    font-weight: 700;
}

.v1-highlight {
    color: #00ff5e;
}

/* Text */
.v1-desc-content p {
    color: #bbb;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* Subtitle */
.v1-desc-subtitle {
    color: #fff;
    margin-bottom: 15px;
}

/* List */
.v1-desc-list {
    list-style: none;
    padding: 0;
}

.v1-desc-list li {
    color: #bbb;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

/* Hover effect */
.v1-desc-list li:hover {
    color: #00ff5e;
}

@media (max-width:575px) {
    .v1-service-description {
        text-align: center;
    }
}

/*--------- Pricing Section Start -------------*/
.v1-pricing {
    background: #000;
    padding: 50px 10px;
}

/* Title */
.v1-pricing-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 800;
}

.v1-pricing-text {
    color: #aaa;
    max-width: 600px;
    margin: 10px auto 0;
}

.v1-highlight {
    color: #00ff5e;
}

/* Card */
.v1-price-card {
    background: var(--light-bg);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
    position: relative;
}

/* Active card */
.v1-price-card.active {
    border: 2px solid #00ff5e;
    transform: scale(1.05);
}

/* Badge */
.v1-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: #00ff5e;
    color: #000;
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 5px;
}

/* Price */
.v1-price {
    color: #fff;
    font-size: 2.2rem;
    margin: 20px 0;
}

.v1-price span {
    font-size: 0.9rem;
    color: #bbb;
}

/* Button */
.v1-price-btn {
    display: inline-block;
    margin: 15px 0;
    padding: 10px 25px;
    background: #00ff5e;
    color: #000;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
}

/* List */
.v1-price-card ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.v1-price-card ul li {
    color: #bbb;
    margin-bottom: 10px;
}

/* Hover */
.v1-price-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 255, 94, 0.2);
}

.v1-price-card h4 {
    color: #FFF;
}

.v1-price-card p {
    color: #ccc;
}

/* Tablet (md) */
@media (min-width: 768px) and (max-width: 991px) {

    .v1-pricing .col-md-4 {
        width: 50%;
    }

    /* Center last card */
    .v1-pricing .col-md-4:nth-child(3) {
        margin: 0 auto;
    }
}

@media (min-width: 768px) and (max-width: 991px) {

    .v1-pricing .col-md-4:nth-child(3) {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
    }
}

.v1-price-card ul {
    text-align: center;
    padding: 0;
}

.v1-price-card ul li {
    display: inline-block;
    text-align: left;
}

/*--------- Pricing Section End ---------------*/

/*--------- FAQ Section Start --------------*/
.v1-faq {
    background: var(--light-bg);
}

/* Title */
.v1-faq-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 800;
}

.v1-faq-text {
    color: #aaa;
    max-width: 600px;
    margin: 10px auto 0;
}

.v1-highlight {
    color: #00ff5e;
}

/* FAQ Item */
.v1-faq-item {
    background: #000;
    margin-bottom: 15px;
    border-radius: 5px;
    overflow: hidden;
    border-left: 3px solid #00ff5e;
}

/* Question */
.v1-faq-question {
    padding: 15px 20px;
    color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Icon */
.v1-faq-icon {
    font-size: 20px;
    color: #00ff5e;
}

/* Answer */
.v1-faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    color: #bbb;
    transition: 0.3s;
}

/* Active */
.v1-faq-item.active .v1-faq-answer {
    max-height: 200px;
    padding: 10px 20px 15px;
}

.v1-faq-item.active .v1-faq-icon {
    content: "-";
}

/*--------- FAQ Section End ----------------*/

/*============= Service-Details.HTML ============*/

/*============= Blog.HTML Start =================*/
.v1-blog {
    background: #000;
}

/* Inputs full width */
.v1-input,
.v1-select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: none;
    outline: none;
}

/* Desktop & Tablet alignment fix */
@media (min-width: 768px) {
    .v1-blog-filter {
        align-items: center;
    }
}

.v1-blog-filter {
    flex-wrap: wrap;
}

/* Card */
.v1-blog-card {
    background: var(--light-bg);
    padding: 15px;
    border-radius: 10px;
    color: #fff;
    transition: 0.3s;
}

.v1-blog-card img {
    width: 100%;
    height: 220px;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* Badge */
.v1-badge {
    position: absolute;
    background: #00ff5e;
    color: #000;
    padding: 5px 10px;
    font-size: 0.7rem;
    border-radius: 5px;
    top: 20px;
}

/* Hover */
.v1-blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 255, 94, 0.2);
}

.v1-select {
    border: 2px solid rgba(0, 255, 94, 0.3);
}

.v1-select:focus,
.v1-input:focus {
    border-color: #00ff5e;
    box-shadow: 0 0 10px rgba(0, 255, 94, 0.3);
}

.v1-blog-card a {
    color: var(--Highlight-Color);
    transition: .4s;
}

.v1-blog-card a:hover {
    letter-spacing: 2px;
}

/*============= Blog.HTML End ===================*/

/*============= Blog Details.HTML Start =========*/

.bd-hero {
    background: #000;
}

/* Title */
.bd-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #FFF;
    line-height: 1.3;
}

/* Highlight */
.bd-highlight {
    color: #00ff5e;
}

/* Meta */
.bd-meta {
    color: #ccc;
    font-size: 0.95rem;
    margin-top: 10px;
}

/* Image */
.bd-img-wrapper {
    border-radius: 15px;
    overflow: hidden;
}

.bd-img {
    width: 100%;
    height: auto;
    display: block;
}

.bd-des p {
    color: #ddd;
    text-align: justify;
}

.bd-des h4 {
    color: var(--Highlight-Color);
}

/**/

.bd-tips {
    background: var(--light-bg);
}

/* Title */
.bd-tips-title {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* List */
.bd-tips-list {
    list-style: none;
    padding: 0;
}

.bd-tips-list li {
    color: #bbb;
    margin-bottom: 15px;
    line-height: 1.6;
    display: flex;
    gap: 10px;
}

/* Green dot */
.bd-dot {
    width: 8px;
    height: 8px;
    background: #00ff5e;
    margin-top: 8px;
    flex-shrink: 0;
    transform: rotate(45deg);
}

/* Image */
.bd-tips-img-wrapper {
    overflow: hidden;
    border-radius: 15px;
}

.bd-tips-img {
    width: 100%;
    transition: 0.5s;
}

.bd-tips-img-wrapper:hover .bd-tips-img {
    transform: scale(1.05);
}

/*--------- related Blog ------*/

.bd-related {
    background: #000;
}

/* Header */
.bd-related-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #FFF;
}

.bd-view-all {
    color: var(--Highlight-Color);
    text-decoration: none;
    font-weight: 600;
    transition: .4s;
}

.bd-view-all:hover {
    letter-spacing: 2px;
}

@media (max-width:575px) {
    .bd-related-title {
        text-align: center;
        margin: auto;
        margin-bottom: 10px;
    }

    .bd-view-all {
        text-align: center;
        margin: auto;
    }
}

/*============= Blog Details.HTML End ===========*/

/*============= Contact.HTML Start ==============*/

.cu-contact-section {
    background: #0b0b0b;
    color: #fff;
}

.cu-contact-form-wrapper {
    border: 2px solid #00ff66;
    background: #111;
    border-radius: 20px;
}

.cu-form-title {
    font-weight: 700;
}

.cu-form-subtitle {
    font-size: 12px;
    color: #aaa;
}

.cu-input {
    background: transparent;
    border: 1px solid #444;
    color: #fff;
}

.cu-input::placeholder {
    color: #888;
}

.cu-input:focus {
    border-color: #00ff66;
    box-shadow: none;
    background: transparent;
    color: #fff;
}

.cu-submit-btn {
    background: #00ff66;
    color: #000;
    font-weight: 600;
    border: none;
    transition: 0.3s;
}

.cu-submit-btn:hover {
    background: #00cc55;
}

.cu-contact-heading span,
.cu-contact-subheading span {
    color: #00ff66;
}

.cu-icon-box {
    background: #00ff66;
    color: #000;
    padding: 10px;
    border-radius: 5px;
    font-size: 18px;
}

@media (max-width:575px) {

    .cu-contact-info h2,
    .cu-contact-info h4,
    .cu-contact-text {
        text-align: center;
    }
}

/*----- MAP Start ------*/
.cu-map-section {
    position: relative;
    height: 450px;
    overflow: hidden;
    padding: 50px 40px;
}

.cu-map-frame {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(100%) brightness(0.6);
}

@media (max-width:768px) {
    .cu-map-section {
        padding: 50px 15px;
    }
}

/*----- MAP End --------*/

/*============= Contact.HTML End ================*/

/*============= Guides.HTML Start ===============*/

/*---- Class Schedules start ----*/
.cu-schedule-section {
    background: #000;
    color: #fff;
}

/* TITLE */
.cu-schedule-title {
    font-family: var(--font-heading);
    color: #00e800;
    font-size: 42px;
}

.cu-schedule-subtext {
    color: #aaa;
}

/* TABLE */
.cu-schedule-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 2px solid #00e800;
    padding: 20px;
    border-radius: 20px;
}

/* ROW */
.cu-row {
    display: grid;
    grid-template-columns: 100px repeat(5, 1fr);
    gap: 10px;
    align-items: center;
}

/* HEADER */
.cu-header {
    font-weight: 600;
    color: #00e800;
    text-align: center;
}

/* TIME */
.cu-time {
    color: #aaa;
    font-size: 14px;
    text-align: center;
}

/* CLASS CARD */
.cu-card {
    background: #111;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    transition: 0.3s;
    border: 1px solid #222;
}

.cu-card:hover {
    border-color: #00e800;
    transform: scale(1.05);
}

/* HIGHLIGHT (Lab sessions) */
.cu-highlight {
    background: #00e800;
    color: #000;
    font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .cu-row {
        grid-template-columns: 80px repeat(5, 1fr);
        font-size: 12px;
    }

    .cu-card {
        padding: 10px;
    }
}

@media (max-width: 576px) {
    .cu-row {
        display: block;
    }

    .cu-row>div {
        margin-bottom: 8px;
    }
}

/*---- Mobile Class Schedules Start -----*/

/* MOBILE SCHEDULE */
.cu-mobile-schedule {
    padding: 10px;
}

/* TIME BLOCK */
.cu-time-block {
    margin-bottom: 25px;
}

/* TIME */
.cu-time-block .cu-time {
    text-align: center;
    margin-bottom: 15px;
    font-size: 16px;
    color: #aaa;
}

/* CARD */
.cu-class-card {
    background: #111;
    border-radius: 14px;
    padding: 15px;
    margin-bottom: 12px;
    text-align: center;
    border: 1px solid #222;
    transition: 0.3s;
}

.cu-class-card span {
    display: block;
    color: #00e800;
    font-size: 12px;
    margin-bottom: 5px;
}

.cu-class-card p {
    margin: 0;
    color: #fff;
}

/* HOVER */
.cu-class-card:hover {
    border-color: #00e800;
}

/* HIGHLIGHT */
.cu-class-card.cu-highlight {
    background: #00e800;
    color: #000;
}

.cu-class-card.cu-highlight span,
.cu-class-card.cu-highlight p {
    color: #000;
}

/*---- Mobile Class Schedules End -------*/

/*---- Class Schedules End ------*/


/*---- Route Map Start ---*/
/* SECTION */
.cu-roadmap-section {
    background: var(--light-bg);
    color: #fff;
    padding: 80px 20px;
}

/* TITLE */
.cu-roadmap-title {
    font-family: var(--font-heading);
    color: #00e800;
    font-size: 42px;
}

.cu-roadmap-subtext {
    color: #aaa;
    max-width: 600px;
    margin: auto;
}

/* ROAD LINE */
.cu-roadmap {
    position: relative;
    margin-top: 60px;
}

.cu-roadmap::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 4px;
    height: 100%;
    background: #00e800;
    transform: translateX(-50%);
}

/* ITEM */
.cu-roadmap-item {
    width: 50%;
    padding: 20px 40px;
    position: relative;
}

.cu-roadmap-item.left {
    left: 0;
    text-align: right;
}

.cu-roadmap-item.right {
    left: 50%;
}

/* CONTENT BOX */
.cu-roadmap-content {
    background: #111;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #222;
    transition: 0.3s;
}

.cu-roadmap-content:hover {
    border-color: #00e800;
    transform: translateY(-5px);
}

/* DOT */
.cu-roadmap-item::after {
    content: "";
    position: absolute;
    top: 30px;
    width: 18px;
    height: 18px;
    background: #00e800;
    border-radius: 50%;
    z-index: 2;
}

.cu-roadmap-item.left::after {
    right: -9px;
}

.cu-roadmap-item.right::after {
    left: -9px;
}

/* TEXT */
.cu-roadmap-content h4 {
    color: #00e800;
    margin-bottom: 8px;
}

.cu-roadmap-content p {
    color: #bbb;
    font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 768px) {

    .cu-roadmap::before {
        left: 20px;
    }

    .cu-roadmap-item {
        width: 100%;
        padding-left: 50px;
        padding-right: 20px;
    }

    .cu-roadmap-item.left {
        left: 0px;
        text-align: left;
    }
    .cu-roadmap-item.right{
        text-align: left;
        left:20px;
    }

    .cu-roadmap-item::after {
        left: 11px;
    }
}

/*---- Route Map End -----*/

/* SECTION */
.cu-community-section {
    background: #000;
    color: #fff;
}

/* TITLE */
.cu-section-title {
    font-family: var(--font-heading);
    font-size: 42px;
    color: #00e800;
}

.cu-section-text {
    font-family: var(--font-body);
    color: #aaa;
    max-width: 600px;
    margin: auto;
}

/* GRID */
.cu-grid {
    column-count: 3;
    column-gap: 15px;
}

.cu-grid-item {
    position: relative;
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: 12px;
    break-inside: avoid;
}

.cu-grid-item img {
    width: 100%;
    display: block;
    border-radius: 12px;
    transition: 0.4s;
}

/* HOVER OVERLAY */
.cu-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.3s;
    text-align: center;
}

.cu-overlay h5 {
    color: #00e800;
    margin-bottom: 5px;
}

.cu-grid-item:hover img {
    transform: scale(1.1);
}

.cu-grid-item:hover .cu-overlay {
    opacity: 1;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .cu-grid {
        column-count: 2;
    }
}

@media (max-width: 576px) {
    .cu-grid {
        column-count: 1;
    }
}

/*============= Guides.HTML End =================*/

/*================ CTA SECTION =================*/
.v1-cta {
    background: #000;
}

/* Main Box */
.v1-cta-box {
    position: relative;
    padding: 50px;
    overflow: hidden;
    background-color: linear-gradient(135deg, #000000, #0f172a);
    background: url(../img/cta-img.png) top center /cover no-repeat;
}

/* Green Glow */
.v1-cta-box::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background-color: #00ff5e;
    filter: blur(150px);
    opacity: 0.4;
    top: -100px;
    right: -100px;
}

/* Text */
.v1-cta-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
}

.v1-highlight {
    color: #00ff5e;
}

.v1-cta-text {
    color: #ccc;
    margin: 20px 0;
}

/* Button */
.v1-cta-btn {
    display: inline-block;
    padding: 12px 30px;
    background: #fff;
    color: #000;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.v1-cta-btn:hover {
    background: #00ff5e;
    color: #000;
}


/* Responsive */
@media (max-width: 768px) {
    .v1-cta-box {
        text-align: center;
        padding: 30px;
    }

    .v1-cta-title {
        font-size: 2rem;
    }

    .v1-cta-img {
        margin-top: 20px;
    }

    .v1-cta-box::before {
        background: #00000099;
    }

    .v1-cta-text {
        color: #fff;
    }
}