@media (min-width: 576px) and (max-width: 800px) {
    .py-8 {
        padding-top: 5.5rem !important;
        padding-bottom: 7.5rem !important;
      }

}


@media (max-width: 576px) {
    .mobile-center {
        margin: auto;
    }

    .special-font-icon {
        position:relative;
        top:50%;
        left:40% !important;
        transform:translate(-50%,-50%)
    }

    .fs-1 {
        font-size: 1rem !important;
    }

    .fs-4 {
        font-size: 1.8rem !important;
    }

    .ps-5 {
        padding-left: 1rem !important;
    }

    .py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;

    }

    .py-6 {
        padding-top: 1rem !important;
        padding-bottom: 3rem !important;
    }

}


.nav-custom {
    background-color: rgba(255, 255, 255, 0.767) !important;
}

.wide-custom {
    width: 85% !important;
}

.circle-image {
    height: 90px;
    width: 90px;
    border-radius: 50%;
}


.green {
    background-color: rgb(219, 240, 219);
}

.blue {
    background-color: rgb(181, 218, 243);
}

.red-light {
    background-color: rgb(250, 214, 214);

}

.red-dark {
    background-color: rgb(238, 54, 54);
}

.orange-dark {
    background-color: rgb(250, 186, 68);
}

.font-icon {
    position:relative;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}