Card position is not on the right side of the web

Please help, I'm just learning how to make Cards using react js. below is the script. when I run it, the position of the card that should be on the right side is still on the left.

how to get div.card to be on the right side?

What's wrong with my code?

1. Services.jsx

import React from 'react'
import './Services.css'
import HeartEmoji from "../../img/heartemoji.png";
import Glasses from "../../img/glasses.png";
import Humble from "../../img/humble.png";
import Resume from './resume.pdf';
import Card from '../Card/Card';
import { themeContext } from '../../Context';
import { useContext } from 'react';
import { motion } from 'framer-motion';
const Services = () => {
    const transition = {duration : 2, type: 'spring'}
    const theme = useContext(themeContext);
    const darkMode = theme.state.darkMode;
    return (
        <div className="services" id='Services'>
            
            {/* left side */}
            <div className="awesome">
                <span style={{color: darkMode? 'white': ''}}>My Awesome</span>
                <span>services</span>
                <spane>
                    Lorem ispum is simpley dumy text of  printing of printing Lorem
                    <br />
                    ispum is simpley dummy text of printing    
                </spane>
                <a href={Resume} download>
                    <button className="button s-button">Download CV</button>
                </a>

                <div className="blur s-blur1" style={{ background: "#ABF1FF94" }}></div>
            </div>

            {/* right side */}
            <div className="cards">
                {/* first card */}
                <motion.div
                whileInView={{left: '14rem'}}
                initial={{left: '25rem'}}
                transition={transition}
                style={{left: '14rem'}}
                >
                    <Card
                        emoji = {HeartEmoji}
                        heading = {'Design'}
                        detail = {"Figma, Sketch, Photoshop, Adobe, Adobe xd"}
                    />
                </motion.div>
                {/* second card */}
                <motion.div
                whileInView={{left: '14rem'}}
                initial={{left: '25rem'}}
                transition={transition}
                style={{ top: "54rem", left: "10rem" }}
                >
                    <Card
                        emoji={Glasses}
                        heading={"Developer"}
                        detail={"Html, Css, JavaScript, React"}
                    />
                </motion.div>
                {/* 3rd card */}
                <motion.div
                whileInView={{left: '14rem'}}
                initial={{left: '25rem'}}
                transition={transition}
                style={{ top: "60rem", left: "14rem" }}
                >
                    <Card
                        emoji={Humble}
                        heading={"UI/UX"}
                        detail={
                            "Lorem ispum dummy text are usually use in section where baalabalalala thank you"
                        }
                    />
                </motion.div>
                <div className="blur s-blur2" style={{ background: "var(--purple)"}}></div>
            </div>
        </div>
    )
}

export default Services

2. Card.jsx

import React from 'react'
import './Card.css'
const Card = ({emoji, heading, detail}) => {
    return (
        <div className="card">
            <img src={emoji} alt="" />
            <span>{heading}</span>
            <span>{detail}</span>
            <button className="c-button">LEARN MORE</button>
        </div>
    )
}

export default Card

3. Services.css

.services {
    padding: 0 3rem 0 3rem;
    display: flex;
    height: 90vh;
    margin-bottom: 8rem;
    margin-top: 9rem;
    margin-bottom: 13rem;
}

.awesome{
    display: flex;
    flex-direction: column;
    position: relative;
}

.awesome > :nth-child(1) {
    color: var(--black);
    font-size: 2.5rem;
    font-weight: bold;
}

.awesome > :nth-child(2) {
    color: var(--orange);
    font-size: 2.5rem;
    font-weight: bold;
}

.awesome > :nth-child(3) {
    color: var(--gray);
    font-size: 14px;
    margin-top: 1rem;
}
.s-button{
    width: 10rem;
    height: 2.5rem;
    margin-top: 1rem;
}
.cards>{
    position: relative;
}
.cards>*{
    position: absolute;
}
/* blur */
.s-blur2 {
    left: 14rem;
    top: 8rem;
}

.s-blur1 {
    top: 13rem;
    left: -18rem;
}
@media screen and (max-width: 480px) {
    .services{
        margin-top: 0;
        flex-direction: column;
        gap: 5rem;
        height: 66rem;
        padding: 0;
    }
    .cards{
        display: flex;
        flex-direction: column;
        gap: 17rem;
    }
    .cards>*{
        position: static;
    }
}

4. Card.css

.card {
    width: 10rem;
    height: 13rem;
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    width: 10rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.26);
    border: 7px solid var(--orangeCard);
    box-shadow: var(--boxShadow);
    border-radius: 20px;
    padding: 0px 26px 2rem 26px;
}
.card span:nth-of-type(2) {
    color: var(--gray);
    font-size: 16px;
}
.card > img {
    transform: scale(0.6);
    margin-bottom: -2rem;
}
.c-button {
    background: #ffffff;
    box-shadow: 0px 19px 60px rgba(0, 0, 0, 0.08);
    border-radius: 7px;
    border: none;
    padding: 10px;
    font-size: 16px;
    color: #5290FD;
}

@media screen and (max-width: 480px) {
    .card{
        width: auto;
    }
}