:root {
    --primary-color: #FFF;
    --secondary-color: #000000;
    --accent: #1F3E7E; /*    [boxes-hovered]*/
    --text-color: #414173;
    --button-color: #2ccfbb; /*#020094;*/ /*dark blue rgb(2, 0, 148) --old color: #3500fc;*/
    --light-blue: #55CDFF; /*light blue rgb(85, 205, 255) --old color: #622eef */
    --yellow-color: #fdb913;
    --pink-color: #ec398b;
    --dark-blue: #231769;
    --dark-accent: #80A2EC; /*#f09922;    [boxes] */
    --dark-accent2: #4CE5C7; /*#ef7630;*/
    --neon-blue: #4CE5C7;
}
.healthicons {
    width: 100%;
    height: 100%;
    display: inline-block;
    margin-right: 5px;
    cursor: pointer;
    position: relative;
}

    .healthicons::before {
        content: "";
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

.icon-kidney-blood-animated::before {
    background-image: url(images/icons/attendees/kidneywithbloodcells.gif);
}

.icon-kidney-blood::before {
    background-image: url(images/icons/attendees/kidneywithbloodcells.svg);
}

.icon-kidney::before {
    background-image: url(images/icons/attendees/kidney.svg);
}

.icon-2030::before {
    background-image: url(images/icons/attendees/2030.svg);
}

.icon-uptodate::before {
    background-image: url(images/icons/attendees/uptodate.svg);
}

.icon-discover::before {
    background-image: url(images/icons/attendees/discover.svg);
}

.icon-learn::before {
    background-image: url(images/icons/attendees/learn.svg);
}

.icon-network::before {
    background-image: url(images/icons/attendees/network.svg);
}

.icon-vocational::before {
    background-image: url(images/icons/attendees/vocational.svg);
}

.icon-review::before {
    background-image: url(images/icons/attendees/review.svg);
}

.icon-technique::before {
    background-image: url(images/icons/attendees/technique.svg);
}

.icon-development::before {
    background-image: url(images/icons/attendees/development.svg);
}

.icon-networking::before {
    background-image: url(images/icons/attendees/networking.svg);
}

.icon-knowledge::before {
    background-image: url(images/icons/attendees/knowledge.svg);
}

.icon-nurses::before {
    background-image: url(images/icons/attendees/nurses.svg);
}

.icon-Cardiologists::before {
    background-image: url(images/icons/attendees/cardiologists.svg);
}

.icon-Immunologists::before {
    background-image: url(images/icons/attendees/hematologists.svg);
}

.icon-Hematologists::before {
    background-image: url(images/icons/attendees/immunologists.svg);
}

.icon-Nephrologists::before {
    background-image: url(images/icons/attendees/nephrologists.svg);
}

.icon-dermatologists::before {
    background-image: url(images/icons/attendees/dermatologists.svg);
}

.icon-dermatologistsurgeon::before {
    background-image: url(images/icons/attendees/dermatologistsurgeon.svg);
}

.icon-physician::before {
    background-image: url(images/icons/attendees/physician.svg);
}

.icon-academic::before {
    background-image: url(images/icons/attendees/academic.svg);
}

.icon-policymakers::before {
    background-image: url(images/icons/attendees/policymakers.svg);
}

.icon-community::before {
    background-image: url(images/icons/attendees/community.svg);
}

.icon-partners::before {
    background-image: url(images/icons/attendees/partners.svg);
}

.icon-professionals::before {
    background-image: url(images/icons/attendees/professionals.svg);
}

.icon-leaders::before {
    background-image: url(images/icons/attendees/leaders.svg);
}

.icon-investors::before {
    background-image: url(images/icons/attendees/investors.svg);
}

.icon-patientadvocates::before {
    background-image: url(images/icons/attendees/patientadvocates.svg);
}

.icon-rheumatologists::before {
    background-image: url(images/icons/attendees/rheumatologists.svg);
}

.icon-geriatrician::before {
    background-image: url(images/icons/attendees/geriatrician.svg);
}

.icon-persdevelopment::before {
    background-image: url(images/icons/attendees/persdevelopment.svg);
}

.icon-orthogeriatrics::before {
    background-image: url(images/icons/attendees/orthogeriatrics.svg);
}

.icon-familyphysician::before {
    background-image: url(images/icons/attendees/familyphysician.svg);
}

.icon-internal::before {
    background-image: url(images/icons/attendees/internal.svg);
}

.icon-pharmacists::before {
    background-image: url(images/icons/attendees/pharmacists.svg);
}

.icon-endocrinologists::before {
    background-image: url(images/icons/attendees/endocrinologists.svg);
    width: 50%;
    height: 50%;
}

.icon-pulmonologists::before {
    background-image: url(images/icons/attendees/pulmonologists.svg);
}

.icon-pediatricians::before {
    background-image: url(images/icons/attendees/pediatricians.svg);
}

.icon-allergists::before {
    background-image: url(images/icons/attendees/allergists.svg);
}

.icon-researchgate::before {
    background-image: url(images/icons/attendees/researchgate.svg);
    transition: filter 0.3s ease; /* Smooth transition for the filter effect */
}

.icon-researchgate:hover::before {
    filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(500%) hue-rotate(180deg) brightness(100%) contrast(100%);
    /* Adjust the filter values to match var(--primary-color-1) */
}
/*Design frame*/
.box-number {
    margin-top: 25px;
}
.box-number .number {
    display: block;
    font-size: 48px;
    color: #222;
    width: 60px;
    height: 60px;
    text-align: center;
    padding: 25px;
    border-radius: 60px;
    position: absolute;
}

    .box-number i {
        display: block;
        font-size: 40px;
        color: #fff;
        width: 90px;
        height: 90px;
        top: 23%;
        text-align: center;
        padding: 15px 0px;
        border-radius: 60px;
        position: absolute;
        background-color: var(--dark-accent);
        font-style: normal !important;
    }

.box-number.square .number,
.box-number.square i {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.box-number.circle .number,
.box-number.circle i {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.box-number .text {
    margin-left: 100px;
}

.box-icon .icon {
    display: block;
    font-size: 48px;
    color: #fff;
    text-align: center;
    border-radius: 60px;
    position: absolute;
    cursor: default;
}
.box-number:hover i.bg-color.hover-color-2 {
    background-color: var(--accent);
    color: #fff;
}
.text-light:hover {
    color: #fff;
}
 .box-number.square .text h3, .box-number.square .text h3, .box-number.circle .text h3 {
    letter-spacing: 0;
    text-transform: none;
    color: var(--titles-color);
    font-weight: 400;
    font-size: 1.1rem;
    line-height: inherit;
    margin-bottom: 0px;
}
/* Media query for mobile devices */
@media (max-width: 576px) {
    .box-number.square .text h3,
    .box-number.circle .text h3 {
        font-size: 1rem; /* Adjust the font size as needed */
    }
}
     .box-number.square .text h3,  .box-number.square .text h3, .box-number.circle .text h3 {
        display: flex; /* Enable flexbox for vertical centering */
        align-items: center; /* Align content vertically within the h3 element */
        padding-top: 0px;
    }
        .box-number.circle .text h3:hover {
            color: var(--dark-accent);
        }
    .box-number .text > p {
        font-size: 13px;

    }
        .box-number.square .text h3 + p,  .box-number.square .text h3 + p, .box-number.circle .text h3 + p {
            margin-top: 5px;
        }
.box-number.circle .text h3 > span {
    margin-top: 30px;
    font-size: 1.3rem;
}
@media (min-width: 992px) {
    .box-number.circle .text h3 > span {
        margin-top: 23px;
    }
    }

    .box-number.circle .text h6 {
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-color);
        ;
        font-weight: 500;
        font-size: 0.75rem;
    }

        .box-number.circle .text h6:hover {
            color: var(--button-color);
        }

    .text-light {
        color: #f8f9fa;
    }
        .text-light:hover {
            color: var(--accent)!important;
            z-index: 100;
        }
@media only screen and (max-width: 992px) {
    .sm-hide {
        display: none !important;
    }
}

.spacer-single {
    width: 100%;
    height: 30px;
    display: block;
    clear: both;
}