/* Futuristic Hero */


.hero {


    padding: 50px 20px;

    text-align: center;


    background:

        linear-gradient(135deg,
            #4B0082,
            #00cfd5);


    color: white;


    border-radius: 0 0 40px 40px;


    animation: heroMove 8s infinite alternate;


}



.hero img {


    width: 70%;


    max-width: 900px;


    border-radius: 25px;


    margin: 25px;


    box-shadow:

        0 20px 40px rgba(0, 0, 0, .4);


}



.hero h2 {


    font-size: 40px;


}



.hero p {


    font-size: 20px;


    max-width: 700px;


    margin: auto;


}



/* Button */


.hero-btn {


    display: inline-block;


    margin-top: 25px;


    padding: 15px 35px;


    background: white;


    color: #4B0082;


    text-decoration: none;


    border-radius: 30px;


    font-weight: bold;


    transition: .3s;


}



.hero-btn:hover {


    transform: scale(1.1);


    background: #111;


    color: white;


}

video {

    max-width: 100%;

    height: auto;

}

/* Moving Gradient */


@keyframes heroMove {


    from {

        background-position: left;

    }


    to {

        background-position: right;

    }


}



/* Premium AI Cards */


.card-container {


    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 30px;


}



.card {


    width: 300px;

    background: white;


    border-radius: 20px;


    overflow: hidden;


    box-shadow:

        0 10px 25px rgba(0, 0, 0, 0.15);


    transition: 0.4s;


}



.card:hover {


    transform: translateY(-15px);


    box-shadow:

        0 20px 40px rgba(75, 0, 130, 0.4);


}



.card-img {


    overflow: hidden;


}



.card img {


    width: 100%;

    height: 200px;

    object-fit: cover;


    transition: 0.5s;


}



.card:hover img {


    transform: scale(1.1);


}



.card-content {


    padding: 20px;


    text-align: center;


}



.card-content h3 {


    color: #4B0082;


}



.card-content button {


    background: #4B0082;


    color: white;


    border: none;


    padding: 10px 25px;


    border-radius: 20px;


    cursor: pointer;


    transition: 0.3s;


}



.card-content button:hover {


    background: #00cfd5;


    transform: scale(1.05);


}



.dark-mode .card {


    background: #1e1e1e;

    color: white;


}


.dark-mode .card-content h3 {


    color: #00ffff;


}




/* AI Gallery */


.gallery-section {


    padding: 50px 20px;

    text-align: center;


}



.gallery-section h2 {


    color: #4B0082;

    font-size: 35px;


}



.gallery-container {


    display: grid;


    grid-template-columns:

        repeat(auto-fit, minmax(250px, 1fr));


    gap: 25px;


    margin-top: 30px;


}



.gallery-item {


    background: white;


    border-radius: 20px;


    overflow: hidden;


    box-shadow:

        0 10px 25px rgba(0, 0, 0, .15);


    transition: .4s;


}



.gallery-item:hover {


    transform: translateY(-10px);


}



.gallery-item img {


    width: 100%;


    height: 220px;


    object-fit: cover;


    transition: .5s;


}



.gallery-item:hover img {


    transform: scale(1.1);


}



.gallery-item h3 {


    padding: 15px;


    color: #4B0082;


}



/* Dark Mode */


.dark-mode .gallery-item {


    background: #1e1e1e;


}



.dark-mode .gallery-item h3 {


    color: #00ffff;


}



.dark-mode .gallery-section h2 {


    color: #00ffff;


}



/* Statistics Section */


.stats {


    text-align: center;

    padding: 50px 20px;

}



.stats h2 {


    color: #4B0082;

    margin-bottom: 40px;


}



.stats-container {


    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 40px;


}



.stat-box {


    width: 200px;

    padding: 25px;


    background: white;


    border-radius: 20px;


    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);


    transition: .4s;


}



.stat-box:hover {


    transform: translateY(-10px);


}



.stat-box h1 {


    font-size: 45px;

    color: #4B0082;


}



.stat-box p {


    font-size: 20px;


}



/* Dark Mode */


.dark-mode .stat-box {


    background: #1e1e1e;

    color: white;


}


.dark-mode .stats h2 {


    color: #00ffff;


}



/* Tutorial Section */


.tutorial-section {

    padding: 50px 20px;

    text-align: center;

}



.tutorial-section h2 {

    font-size: 35px;

    color: #4B0082;

}



.tutorial-container {


    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 30px;

    margin-top: 30px;


}



.tutorial-card {


    width: 280px;


    padding: 30px;


    background: white;


    border-radius: 20px;


    box-shadow:

        0 10px 25px rgba(0, 0, 0, .15);


    transition: .4s;


}



.tutorial-card:hover {


    transform: translateY(-12px);


}



.tutorial-card h3 {


    color: #4B0082;


}



.tutorial-card button {


    margin-top: 20px;


    padding: 10px 25px;


    border: none;


    border-radius: 25px;


    background: #4B0082;


    color: white;


    cursor: pointer;


    transition: .3s;


}



.tutorial-card button:hover {


    background: #00cfd5;


    transform: scale(1.05);


}



/* Dark Mode */


.dark-mode .tutorial-card {


    background: #1e1e1e;

    color: white;


}



.dark-mode .tutorial-card h3 {


    color: #00ffff;


}



.dark-mode .tutorial-section h2 {


    color: #00ffff;


}