@font-face {
    font-family: 'Poppins';
    src: url('./assets/fonts/Poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

:root {
    --mainColor: #EB3338;
    --main-gradient: linear-gradient(to right, #7172D2, #3F4096);
    --secondColor: #43449B;
    --thirdColor: #FFDFE0;
    --secondGradient: linear-gradient(to bottom, #FF7478, #EB3338);

}

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

.primary-bg {
    background: var(--mainColor);
}

.text-primary {
    color: var(--mainColor);
}

.text-secondary {
    color: var(--secondColor);
}

.gradient-bg {
    background: var(--main-gradient);
}

.redGradientBg {
    background: var(--secondGradient);
}

.lightRedGradientBg {
    background: linear-gradient(to bottom, #F2E4E4, white);
}

.redThemedBtn {
    border: 1px solid var(--mainColor);
    color: var(--mainColor);
    transition: 0.2s ease-in-out;
}

.redThemedBtn:hover {
    background: var(--mainColor);
    color: white;
}

.purpleThemedBtn {
    position: relative;
    display: inline-block;
    color: white;
    overflow: hidden;
    background: var(--main-gradient);
    z-index: 1;
    transition: transform 0.3s ease;
}

.purpleThemedBtn::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--mainColor);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.purpleThemedBtn:hover::before {
    opacity: 1;
}

.purpleThemedBtn:hover {
    transform: scale(1.02);
}

.socialMediaBtn {
    background: var(--mainColor);
}

.socialMediaBtn:hover {
    background: var(--main-gradient);
}

.read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

.read-more-text {
    transition: color 0.3s, text-decoration-color 0.3s;
}

.read-more-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    transform-origin: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
}


/* Hover Styles */
.read-more-link:hover .read-more-text {
    color: #EB3338;
    text-decoration: underline;
    text-decoration-color: #EB3338;
}

.read-more-link:hover .read-more-arrow {
    color: #EB3338;
    transform: rotate(45deg);
    background-color: white;
    border-radius: 50%;
    border: 1px solid;
}