body {
    overflow-x: hidden;
}

.roadmap-lag-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.card-roadmap-cpp {
    height: 300px;
    width: 260px;
    background-color: #1e3449;
    border: 3px solid #659AD2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 30px 10px;
    color: #659AD2;
    border-radius: 45px;
}

.App-logo-cpp {
    pointer-events: none;
    width: 140px;
    margin-bottom: 20px;
}

.App-button-cpp {
    padding: 10px 20px;
    background-color: transparent;
    color: #659AD2;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    border: 3px solid #659AD2;
    border-radius: 5em;
    margin-top: 20px;
    transition: 0.2s;
}

.App-button-cpp:hover {
    color: #282c34;
    background-color: #659AD2;
}



/* From Uiverse.io by aadium */
.card-roadmap-python {
    height: 300px;
    width: 260px;
    background-color: #191e24;
    border: 3px solid #387EB8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 25px 5px;
    color: white;
    border-radius: 45px;
}

.App-logo-python {
    pointer-events: none;
    margin-top: -40px;
    margin-bottom: -40px;
    width: 250px;
}

.App-button-pyhton {
    padding: 10px 20px;
    background-color: transparent;
    color: #FFE052;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    border: 3px solid #FFE052;
    border-radius: 5em;
    margin-top: 20px;
    transition: 0.2s;
}

.App-button-python:hover {
    color: #191e24;
    background-color: #FFE052;
}

.welcometo {
    color: #387EB8;
}

.python {
    color: #FFE052;
}



/* javascript */

.card-roadmap-js {
    height: 300px;
    width: 260px;
    background-color: #25241c;
    border: 3px solid #f7df1e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 30px 0px;
    color: #f7df1e;
    border-radius: 45px;
}

.App-logo-js {
    pointer-events: none;
    width: 120px;
    margin-bottom: 20px;
}

.App-button-js {
    padding: 10px 20px;
    background-color: transparent;
    color: #f7df1e;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    border: 3px solid #f7df1e;
    border-radius: 5em;
    margin-top: 20px;
    transition: 0.2s;
}

.App-button-js:hover {
    color: #2e2d23;
    background-color: #f7df1e;
}

/* react */
/* From Uiverse.io by aadium */
.card-roadmap-react {
    height: 300px;
    width: 260px;
    background-color: #1e2127;
    border: 3px solid #61dafb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 30px 20px;
    color: #61dafb;
    border-radius: 45px;
}

.App-logo-react {
    pointer-events: none;
    margin-top: -10px
}

.App-button-react {
    padding: 10px 20px;
    background-color: transparent;
    color: #61dafb;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    border: 3px solid #61dafb;
    border-radius: 5em;
    margin-top: 20px;
    transition: 0.2s;
}

.App-button-react:hover {
    color: #1e2127;
    background-color: #61dafb;
}

@media (prefers-reduced-motion: no-preference) {
    .App-logo {
        animation: App-logo-spin infinite 5s linear;
    }
}

@keyframes App-logo-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.roadmap-lag-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}



/* roadmap */
.roadmap-btn {
    display: flex;
    margin-top: 70px;
    border: none;
    padding: 20px 50px;
    margin: auto;
    color: whitesmoke;
    font-size: 24px;
    font-weight: 500;

}

.box-shadow {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    background: linear-gradient(60deg, rgb(149, 233, 229) 0%, rgb(202, 165, 243) 100%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 44px 12px 44px 12px;
    -webkit-border-radius: 44px 12px 44px 12px;
    -moz-border-radius: 44px 12px 44px 12px;
}

.box-shadow:hover {
    transform: translateY(-10px);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    color: white;
    background-image: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);
}




.card-roadmap-ml {
    height: 300px;
    width: 260px;
    background-color: #25241c;
    border: 3px solid #c0c0bd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 30px 0px;
    color: #c0c0bd;
    border-radius: 45px;
}

.App-logo-ml {
    pointer-events: none;
    width: 120px;
    margin-bottom: 20px;
}

.App-button-ml {
    padding: 10px 20px;
    background-color: transparent;
    color: #a1a19b;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    border: 3px solid #a1a19b;
    border-radius: 5em;
    margin-top: 20px;
    transition: 0.2s;
}

.App-button-ml:hover {
    color: #2e2d23;
    background-color: #43bcec;
}

.card-roadmap-ai-agent {
    height: 300px;
    width: 260px;
    background-color: #1e3449;
    border: 3px solid #659AD2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 30px 10px;
    color: #659AD2;
    border-radius: 45px;
}

.App-logo-ai-agent {
    pointer-events: none;
    width: 140px;
    margin-bottom: 20px;
}

.App-button-ai-agent {
    padding: 10px 20px;
    background-color: transparent;
    color: #659AD2;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    border: 3px solid #659AD2;
    border-radius: 5em;
    margin-top: 20px;
    transition: 0.2s;
}

.App-button-ai-agent:hover {
    color: #282c34;
    background-color: #659AD2;
}


.card-roadmap-app-dev {
    height: 300px;
    width: 260px;
    background-color: #1e3449;
    border: 3px solid #659AD2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 30px 10px;
    color: #659AD2;
    border-radius: 45px;
}

.App-logo-app-dev {
    pointer-events: none;
    width: 140px;
    margin-bottom: 20px;
}

.App-button-app-dev {
    padding: 10px 20px;
    background-color: transparent;
    color: #659AD2;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    border: 3px solid #659AD2;
    border-radius: 5em;
    margin-top: 20px;
    transition: 0.2s;
}

.App-button-app-dev :hover {
    color: #282c34;
    background-color: #659AD2;
}

/* web development */
.card-roadmap-web-dev {
    height: 300px;
    width: 260px;
    background-color: #25241c;
    border: 3px solid #f7df1e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 30px 0px;
    color: #f7df1e;
    border-radius: 45px;
}

.App-logo-web-dev {
    pointer-events: none;
    width: 120px;
    margin-bottom: 20px;
}

.App-button-web-dev {
    padding: 10px 20px;
    background-color: transparent;
    color: #f7df1e;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    border: 3px solid #f7df1e;
    border-radius: 5em;
    margin-top: 20px;
    transition: 0.2s;
}

.App-button-web-dev:hover {
    color: #2e2d23;
    background-color: #f7df1e;
}