#slv-vb .cls-1 {
    fill: var(--blue-light);
}

#slv-vb .cls-2 {
    fill: var(--orange);
}

#slv-vb .cls-3 {
    fill: var(--black);
}

#slv-tr .cls-1 {
    fill: var(--blue-light);
}

#slv-tr .cls-2 {
    fill: var(--yellow);
}

#slv-tr .cls-3 {
    fill: var(--green);
}

#slv-tr .cls-4 {
    fill: var(--black);
}

.cards-section {
    display: flex;
    flex-direction: column;
    height: 400px;
    justify-content: center;
}

.cards-section .section-heading {
    margin: 100px 0 50px 0;
    display: none;
}

.section-heading h1 {
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    color: var(--default-text);
}

.section-heading span {
    color: var(--blue-light);
}

.logo-arm {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 20px 0;
}

.cards-section .card-title {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.cards-section .cards-title {
    border: 2px solid var(--blue-light);
    border-radius: 20px;
    padding: 15px 20px;

}

.cards-section .card-title h2 {
    color: var(--blue-light);
    margin: 10px 0;
}

.cards-section .card-title h1 {
    color: var(--default-text);
    text-transform: uppercase;
    margin: 10px 0;
    font-weight: bold;
}

.logo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 500px;
    cursor: pointer;
}

.logo-container {
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 520px;
    height: min(120px, calc(80px + ((100vw - 350px) * (40 / 150))));
    border-radius: 25px;
    transition: border-radius 1s ease, height 1s ease;
    /* background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C); */
    background: linear-gradient(to right, #F9F295, #E0AA3E, #FAF398, #ca9c56);
    /* background-image: linear-gradient(to bottom right, var(--orange), #f3f584, var(--yellow)); */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.logo-card #slv-vb,
.logo-card #slv-tr {
    position: absolute;
    max-width: 500px;
    height: auto;
    transition: transform 1s ease;
    padding: 10px;
}

.overlay .text {
    text-align: center;
    color: var(--black);
    font-size: 25px;
    font-weight: 500;
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 1s ease, opacity 1s ease;
    display: flex;
    flex-direction: column;
    row-gap: 30px;
    pointer-events: none;
}

/* From Uiverse.io by gharsh11032000 */
.overlay .text a {
    display: flex;
    justify-content: center;
}

.animated-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 15px 36px;
    border: 4px solid;
    border-color: transparent;
    font-size: 16px;
    background-color: inherit;
    border-radius: 100px;
    font-weight: 500;
    color: var(--black);
    box-shadow: 0 0 0 2px var(--black);
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button svg {
    position: absolute;
    width: 24px;
    fill: var(--black);
    z-index: 9;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
    right: 16px;
}

.animated-button .arr-2 {
    left: -25%;
}

.animated-button .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-color: var(--blue-light);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text-button {
    position: relative;
    z-index: 1;
    transform: translateX(-12px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
    box-shadow: 0 0 0 12px transparent;
    color: var(--white);
    border-radius: 12px;
}

.animated-button:hover .arr-1 {
    right: -25%;
}

.animated-button:hover .arr-2 {
    left: 16px;
}

.animated-button:hover .text-button {
    transform: translateX(12px);
}

.animated-button:hover svg {
    fill: var(--white);
}

.animated-button:active {
    scale: 0.95;
    box-shadow: 0 0 0 4px var(--blue-light);
}

.animated-button:hover .circle {
    width: 220px;
    height: 220px;
    opacity: 1;
}


.logo-card.clicked #slv-vb,
.logo-card.clicked #slv-tr {
    animation: shrinkAndMove 1s ease forwards;
}

.logo-card.clicked .logo-container {
    height: 300px;
    border-radius: 25px 25px 15px 15px;
}

.logo-card.clicked .overlay .text {
    opacity: 1;
    animation: moveUp 1s ease forwards;
    pointer-events: all;
    /* line-height: 1.2; */
}

.logo-card #slv-vb,
.logo-card #slv-tr {
    animation: shrinkAndMoveReverse 1s ease forwards;
}

.logo-card .overlay .text {
    animation: moveUpReverse 1s ease forwards;
}


/* Define the animations */
@keyframes shrinkAndMove {
    from {
        transform: translateY(0) scale(1);
    }

    to {
        transform: translateY(-100px) scale(0.5);
    }
}

@keyframes moveUp {
    from {
        transform: translateY(80px);
        opacity: 0;
    }

    to {
        transform: translateY(20px);
    }
}

@keyframes shrinkAndMoveReverse {
    from {
        transform: translateY(-100px) scale(0.5);
    }

    to {
        transform: translateY(0) scale(1);
    }
}

@keyframes moveUpReverse {
    from {
        transform: translateY(20px);
        opacity: 1;
    }

    to {
        transform: translateY(80px);
        opacity: 0;
    }
}

@media (min-width: 1420px) {
    .cards-section {
        margin-top: 40px;
    }
}


@media (max-width: 1420px) {
    .cards-section .cards-title {
        display: none;
    }

    .cards-section .section-heading {
        display: flex;
        justify-content: center;
    }


}

@media (max-width:1248px) {
    .logo-arm {
        flex-direction: column;
        justify-content: center;
        align-content: center;
        gap: 80px;
        margin-top: 80px;
    }

    .cards-section {
        margin-top: 50px;
    }

    .cards-section .section-heading {
        margin-top: 400px;
    }
}

@media (max-width: 590px) {
    .section-heading h1 {
        font-size: 2rem;
    }

    .logo-card {
        width: 100%;
    }

    /* .logo-card #slv-vb,
    .logo-card #slv-tr {
        max-width: 300px;
    } */

    .logo-container {
        width: 100%;
        margin: 0 40px;
    }

    .overlay .text {
        font-size: 20px;
    }
}