.content2 {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-rows: 1fr 5fr;
}

.content2-title {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        flex-direction: column;
        text-align: center;
}

.content2-title p {
        background-color: transparent;
}
.content2-title p:nth-child(1) {
        font-size: clamp(24px, 8vw, 48px);
        font-family: 'supershiny';
}


.content2-title p:nth-child(2){
        margin-top: 10px;
        background-color: transparent;
        font-size: 16px;
        line-height: 1.2;
        color: var(--text-muted);
}

.content2-title p:nth-child(3){
        margin-top: 10px;
        background-color: var(--primary);
        width: 10%;
        height: 5px;
        border-radius: 10px;
}

.grid-card {
        border: 1px solid black;
        border-radius: 20px;
        display: grid;
        grid-template-columns: 1fr 4fr;
        background-color: var(--grid-card-color);
        border:1px dashed var(--primary);
}
.grid-card-content{
        background-color: transparent;
        padding: 0px 10px;
        display: flex;
        gap: 10px;
        flex-direction: column;
        align-items: start;
        justify-content: center;
}
.grid-card-content p{
       background-color: transparent;
}
.grid-card-content p:nth-child(1){
        font-size: 20px;
        font-weight: bold;
}

.grid-card-content p:nth-child(2){
        font-size: 16px;
        font-weight: normal;
        color: var(--text-muted);
}
.grid-card-img {
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
}
.grid-card-img img{
        width: 64px;
        height: 64px;
        background-color: transparent;
}

@media (max-width: 550px) {
        .grid2, .grid5, .grid8 {
                display: none;
        }
        .content2-main {
                padding: 10px 10px;
                background-color: transparent;
                display: grid;
                gap: 10px;
        }
        .content2-title {
                margin-top: 20px;
        }
}

@media (min-width: 600px) {
        .page2 {
                width: 100%;
                height: 100vh;
                background-color: transparent;
        }       
        .content2-main {
                background-color: transparent;
                display: grid;
                gap: 10px;
        }
        .content2-main {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(3, 1fr);
                gap: 10px;
                margin: 10px 20px;
        }

        .grid5 {
                background-color: transparent;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
        }

        .ripple-container {
                position: relative;
                width: 150px;
                height: 150px;
         }

        .ripple-container img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                object-fit: cover;
                position: relative;
                z-index: 2;
        }
        .ripple-container::before,
        .ripple-container::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 150px;
                height: 150px;
                border-radius: 50%;
                transform: translate(-50%, -50%) scale(1);
                background: rgba(0, 150, 255, 0.4);
                z-index: 1;
                animation: ripple 2s infinite;
        }

        .ripple-container::after {
                animation-delay: 1s;
        }

        @keyframes ripple {
                0% {
                  transform: translate(-50%, -50%) scale(1);
                  opacity: 0.6;
                }
                100% {
                  transform: translate(-50%, -50%) scale(2.5);
                  opacity: 0;
                }
        } 
        
        .grid1,.grid3,.grid4,.grid6,.grid7,.grid9 {
                position: relative;
        }

        .grid1::after, .grid4::after,.grid7::after{
                content: '';
                width: 20px;
                height: 20px;
                position: absolute;
                background-color: var(--primary);
                border-radius: 50%;
                right: -10px;
                top: 50%;
                transform: translateY(-52%);
                animation: scaling 2s ease-in-out infinite alternate;
        }
        .grid2,.grid8 {
                position: relative;
        }
        .grid2::after, .grid8::after{
                content: '';
                width: 99%;
                height: 0px;
                position: absolute;
                border-top: 2px dashed var(--primary);
                top: 50%;
                left: 2px;
                transform: translateY(-52%);
        }
        .grid3::after, .grid6::after, .grid9::after{
                content: '';
                width: 20px;
                height: 20px;
                position: absolute;
                background-color: var(--primary);
                border-radius: 50%;
                left: -10px;
                top: 50%;
                transform: translateY(-52%);
                animation: scaling 2s ease-in-out infinite alternate;
        }
        .grid4::before{
                content: '';
                width: 40%;
                height: 0px;
                position: absolute;
                border-top: 2px dashed var(--primary);
                top: 50%;
                right: -40%;
                transform: translateY(-52%);
        }
        .grid6::before{
                content: '';
                width: 40%;
                height: 0px;
                position: absolute;
                border-top: 2px dashed var(--primary);
                top: 50%;
                left: -40%;
                transform: translateY(-52%);
        }

        .grid2::before{
                content: '';
                width: 0px;
                height: 60%;
                position: absolute;
                border-right: 2px dashed var(--primary);
                top: 50%;
                left: 50%;
        }
        .grid8::before{
                content: '';
                width: 0px;
                height: 60%;
                position: absolute;
                border-right: 2px dashed var(--primary);
                bottom: 50%;
                left: 50%;
                /* transform: translateY(-52%); */
        }
        @keyframes scaling {
                from {
                        transform: translateY(-50%) scale(0.9);
                }
                to{
                        transform: translateY(-50%) scale(1.2);
                }
        }
}