:root {
    --primaryColor: #2E3D62;

    --lightPrimaryColor: #686b6e;
    --secondaryColor: #5D50C5;
    --lightSecondaryColor: #F0EEFD;
    --activeLinkColor: #1B7F8B;
    --lightGrayBg: #E3E6EB;
    --transparentDropDown: #2e3d62da;
    --transparentColor: rgba(0, 0, 0, 0.548);
    --shadow: rgba(189, 188, 188, 0.514);
    --svgColor: #f8fafd;
    /* --------------------------------- */
    --whatsappColor: #25D366;
    --white: #ffff;
    --blue: #1877F2;
    --gray: #f8f8f8;
}

.temp3-counter-section {
    width: 100%;
    margin: 40px 0px
}


.temp3-counter-container {
    width: 85%;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.temp3-counter-image-section {
    width: 60%;
    margin: 0px auto;
    position: relative;
    height: 400px;
}

.temp3-counter-img-icon-parent {
    width: 100%;
    height: 400px;
    position: absolute;
    bottom: -30px;
    right: 0px;
}

.temp3-counter-img-icon-container {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    box-shadow: 4px 4px 8px var(--shadow);
    border: 10px solid var(--lightSecondaryColor);
}

.temp3-counter-img-icon-container img {
    width: 100%;
    max-height: 99%;
    min-height: 99%;
}

.temp3-counter-icon-section {
    position: absolute;
    bottom: 0px;
    right: 0px;

    background-color: transparent;
    padding: 20px;
    width: 100px;
    height: 100px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    transition: transform 0.3s ease-in-out;
    animation: animatedtemp3-counter-icon-section;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: backwards;
}

@keyframes animatedtemp3-counter-icon-section {
    from {
        background-color: transparent
    }

    to {
        background-color: var(--lightSecondaryColor)
    }
}

/* .temp3-counter-icon-section:hover {
    animation: animatedtemp3-counter-icon-section;
    animation-duration: 5s;
    animation-iteration-count:infinite; 
    animation-direction: alternate;
    animation-fill-mode: backwards;

    transform: scale(1.2);
} */

.temp3-counter-icon-container {
    width: 80px;
    height: 80px;
    background-color: transparent;
    color: var(--secondaryColor);
    align-content: center;
    text-align: center;
}

/* ===================================== */
.temp3-couter-grid-section {
    width: 100%;
    background-color: var(--svgColor);
    padding: 90px 0px 50px 0px;
}

.temp3-couter-grid-container {
    width: 80%;
    margin: 0px auto;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.temp3-counter-card {
    background-color: var(--white);
    width: 250px;
    box-shadow: 4px 4px 8px var(--shadow);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;

    position: relative;
    padding: 40px 10px;
    border-radius: 4px;
}

.temp3-counter-card::before {
    content: "";
    width: 20%;
    height: 4px;
    margin: 0px auto;

    background-color: #3897F0;

    position: absolute;
    top: 0px;

    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;

}

.temp3-counter-card span {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: rgba(26, 151, 240, 0.1);
    font-weight: bold;

    color: #3897F0;

    align-content: center;
    text-align: center;
}

.temp3-counter-card span i {
    font-weight: bolder;
    font-size: 2rem;
}

.temp3-counter-card span img {
    width: 100%;
    height: 100%;
}

.temp3-counter-card span:hover .temp3-counter-card span {
    background-color: #3897F0;
    font-weight: bold;

    color: var(--white);
}

.temp3-counter-card h3 {
    width: fit-content;
    margin: 0px auto;
    color: var(--primaryColor);

    font-size: 2rem;
    font-weight: bold;
}

.temp3-counter-card p {
    color: var(--lightPrimaryColor);
    width: fit-content;
    margin: 0px auto;
}

.temp3-counter-card h5 {
    color: var(--primaryColor);
    line-height: 1.8;
    font-size: 1rem;
    width: fit-content;
    margin: 0% auto;
}

.temp3-counter-card ul {
    margin: 0% auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 20px;
}

@media (max-width:1024px) {
    .temp3-counter-image-section {
        width: 98%;
        margin: 0px auto;
        position: relative;
        height: 400px;
    }
}