:root {
    --bg-color: rgba(230, 221, 182, 0.116);
    --card-bg-color: white;
    --content-bg-color: rgb(240, 236, 232);
    --primary: #6366f1;
    --primary-dark: #4f46e5;
}

.back-dark {
    background-color: var(--bg-color);
    max-width: 100%;
    margin: 0 auto;
}

.dp {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.dp-lower {
    text-align: center;
    background-color: var(--content-bg-color);
    max-width: '100%';
    margin: 0 auto;
    padding-top: 55px;
    padding-bottom: 20px;
}

.tagline {
    font-family: 'Rubik', sans-serif;
    color: rgb(107, 101, 75);
    font-weight: 600;
    padding-top: 15px;
}

.coverImage {
    cursor: pointer;
    width: 35vw;
    max-width: 425px;
    border: 10px solid rgb(255, 255, 255);
    margin-top: 60px;
    margin-bottom: -50px;
    transition:.2s all ease-in;
}

.coverImage:hover {
    border: 10px solid rgb(224, 224, 224);
    transition:.5s all ease-in;
}
/* -------------------------------------------------------- */
.kabaddi-scoreboard-start-button {
    background: linear-gradient(29deg, #bb1010, #dd6323);
    font-size: 20px;
    color: white;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid #00000062;
    box-shadow: 0 4px 15px rgba(49, 16, 16, 0.39);
    padding: 5px 20px;
    border-radius: 20px;
    transition: all 0.2s;
}
.kabaddi-scoreboard-start-button:hover {
    background: linear-gradient(29deg, #b40808, #c95211);
    box-shadow: 0 4px 15px rgba(49, 16, 16, 0.603);
    transition: all 0.2s;
}
@media (max-width: 768px) {
    .coverImage {
        width: 90vw;
    }
}

/* =========================================================================== */
#pokhrajdhruv-section{
    background-color: var(--bg-color);
}
/* =========================================================================== */
.my-skills {
    cursor: pointer;
    transition: 0.3s all ease;
}

.my-skills:hover {
    transform: scale(1.2);
    transition: 0.3s all ease;
}

/* =========================================================================== */
/* Project Card Hover Effect */
.project-card {
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.project-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
}