.banner .animated,
.about-us .animated,
.suited-individuals .animated,
.steps-padding .animated {
    opacity: 0
}

.animate-in {
    animation: slideUp 400ms ease-in-out forwards;
    animation-delay: calc(var(--animation-order)*50ms)
}

.mouse-icon {
    cursor: pointer;
    transition: 300ms ease-in-out
}

.mouse-icon:hover,
.mouse-icon:focus {
    animation-play-state: paused
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.banner-content {
    inset: 0
}
.container-with-whitebg{
    background:#fff;
}
.container-with-whitebg.nitro-offscreen{
    padding-bottom:5%;
}
.border-5px {
    border-radius: 5px
}

.banner {
    height: calc(100lvh - var(--header-height));
    min-height: calc(var(--min-height, 850px) - var(--header-height));
    max-height: calc(var(--max-height, 1080px) - var(--header-height));
    overflow: hidden
}

.banner-content-button {
    margin-block: min(5%, 8.4rem) min(10.5%, 14.8rem)
}

.radius-15 {
    border-radius: 1.5rem
}

.section-image {
    overflow: hidden
}

.section-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.about-us {
    grid-template-columns: 69.1rem auto
}

.small-card {
    transition: 300ms ease-in-out;
    flex: 300px;
    --_head-fs: var(--fs-20)
}

.small-card:hover,
.small-card:focus,
.small-card:focus-within {
    box-shadow: -10px 24px var(--shadow-height) rgba(15, 24, 26, .2);
    transform: translate(0, -5%)
}

.small-card .card-icon {
    height: 5.6rem
}

.small-card .small-card-head {
    --_padding-top: 2rem;
    --_padding-bottom: 2.6rem;
    --_height: calc(var(--_head-fs) * 1.5 * 2);
    height: calc(var(--_padding-top) + var(--_padding-bottom) + var(--_height));
    padding-block: var(--_padding-top) var(--_padding-bottom)
}

.align-self-end {
    align-self: end
}

.read-more-button {
    border: 0;
    appearance: none;
    margin-inline-start: 1rem;
    outline-color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
     color: var(--clr-blue); 
    /*color: #211464;*/
    font-family: var(--ff-pop)
}

.read-more-button:hover,
.read-more-button:focus,
.read-more-button:focus-within {
    color: var(--clr-black)
}

.card-icon img {
    width: 37px !important
}

.steps {
    width: min(481px, 100%)
}

.doctor-photo {
    width: 180px;
    height: 180px;
    overflow: hidden
}

.doctor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.doctor-desc {
    width: min(698px, 100%)
}

.radius-50\% {
    border-radius: 50%
}

.hidden-extendable-text {
    grid-template-rows: 0fr;
    transition: 300ms ease-in-out
}

.hidden-extendable-text p {
    transition: 300ms ease-in-out;
    overflow: hidden
}

.hidden-extendable-text.expanded {
    grid-template-rows: 1fr
}

#mouse-icon-button {
    border: 0;
    background-color: rgba(0, 0, 0, 0);
    outline-color: rgba(0, 0, 0, 0)
}

.small-card.pbs-22 {
    padding-block-start: 2.2rem
}

#doctor-slider {
    position: relative
}

#doctor-slider .owl-nav {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: calc(var(--owl-items, 5rem)*1rem + 6rem);
    pointer-events: none
}

#doctor-slider .owl-nav .owl-prev,
#doctor-slider .owl-nav .owl-next {
    pointer-events: all
}

#doctor-slider .owl-nav .owl-prev svg rect,
#doctor-slider .owl-nav .owl-next svg rect {
    transition: 300ms ease-in-out
}

#doctor-slider .owl-nav .owl-prev:hover,
#doctor-slider .owl-nav .owl-next:hover {
    background-color: rgba(0, 0, 0, 0)
}

#doctor-slider .owl-nav .owl-prev:hover svg rect,
#doctor-slider .owl-nav .owl-next:hover svg rect {
    fill: var(--clr-white)
}

#doctor-slider.owl-theme .owl-dots .owl-dot span {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #000;
    transition: 300ms ease-in-out
}

#doctor-slider.owl-theme .owl-dots .owl-dot.active span,
#doctor-slider.owl-theme .owl-dots .owl-dot:hover span {
    background-color: var(--clr-white);
    border-color: rgba(0, 0, 0, 0)
}

#doctor-slider.owl-theme .owl-dots {
    padding-block-start: 10.5rem
}

.height-100\% {
    height: 100%
}

#card-slider-container .owl-stage {
    padding-block: 7.7rem
}

.section-image.image-2 {
    width: min(620px, 100%)
}

.max-width-698px {
    width: min(698px, 100% - 5rem)
}

.banner-image-small {
    display: none
}

.throbbing-button {
    z-index: 10;
    isolation: isolate;
    transition: 300ms ease-out
}

.throbbing-button::after {
    content: "";
    transition: 300ms ease-in-out;
    inset: 0;
    z-index: -1;
    position: absolute;
    background-color: var(--clr-blue);
    opacity: .5;
    border-radius: inherit;
    animation: throbbing 2s ease-in-out 2s infinite forwards
}

.throbbing-button:hover::after,
.throbbing-button:focus::after {
    animation-play-state: paused;
    opacity: 0
}

@keyframes slideUp {
    0% {
        opacity: 0;
        translate: 0 min(50%, 5rem)
    }

    100% {
        opacity: 1;
        translate: 0
    }
}

@keyframes throbbing {
    0% {
        opacity: 0
    }

    20% {
        opacity: .2;
        inset: -1rem
    }

    40% {
        opacity: 0;
        inset: 0
    }
}

@media(max-width: 1550px) {
    .DesignedButton__button.FollowButton {
        margin-block-end: 6rem !important
    }
}

@media(max-width: 1440px) {
    #blog-slider-container {
        --_image-height: 27rem
    }

    .banner {
        --min-height: 750px;
        --max-height: 950px
    }

    #doctor-slider.owl-theme .owl-dots {
        padding-block-start: 7.5rem
    }

    .banner-content-button {
        margin-block: min(4%, 7.4rem) min(8.5%, 12.8rem)
    }

    .small-card {
        --shadow-height: 55px
    }

    #card-slider-container .owl-stage {
        padding-block: 5.7rem
    }
}

@media(max-width: 1366px) {
    #blog-slider-container {
        --_image-height: 26rem
    }

    .banner {
        --min-height: 650px;
        --max-height: 800px
    }

    .about-us {
        grid-template-columns: 66.1rem auto
    }

    .banner-content-button {
        margin-block: min(3%, 4.4rem) min(7.5%, 10.8rem)
    }

    .small-card {
        --shadow-height: 45px
    }

    #card-slider-container .owl-stage {
        padding-block: 4.7rem
    }
}

@media(max-width: 1280px) {
    #blog-slider-container {
        --_image-height: 23rem
    }

    .banner {
        --min-height: 650px;
        --max-height: 780px
    }

    #card-slider-container .owl-stage {
        padding-block: 2.7rem
    }

    .small-card {
        --shadow-height: 35px
    }

    .banner-content-button {
        margin-block: min(4%, 5.4rem) min(6.5%, 8.8rem)
    }

    .gap-69 {
        gap: 2.9rem
    }

    .step-content.gap-12 {
        gap: .8rem
    }

    #doctor-slider.owl-theme .owl-dots {
        padding-block-start: 5.5rem
    }
}

@media(max-width: 1140px) {
    .gap-69 {
        gap: 1.9rem
    }

    #blog-slider-container {
        --_image-height: 20rem
    }

    .banner {
        --min-height: 600px;
        --max-height: 600px
    }

    .small-feature-grid {
        flex-direction: column;
        width: min(500px, 100%);
        gap: 2rem
    }

    .about-us {
        grid-template-columns: 1fr 1fr
    }

    br:not(.break-all br) {
        display: none
    }

    .steps-padding {
        gap: 2rem
    }
}

@media(max-width: 1024px) {
    #blog-slider-container {
        --_image-height: 17rem
    }

    .small-card-head {
        --_padding-top: 1rem;
        --_padding-bottom: 0.6rem
    }

    .about-us {
        grid-template-columns: 1fr
    }

    .small-feature-grid {
        flex-direction: row;
        width: 100%
    }

    .section-image.image-1 {
        width: 60%;
        margin-inline: auto
    }

    .grid-4-cols {
        --_columns: 2
    }

    .banner-image {
        object-position: left
    }

    .steps-padding {
        padding-block: 2rem
    }
}

@media(max-width: 1000px) {
    #blog-slider-container {
        --_image-height: 100%
    }
}

@media(max-width: 950px) {

    #doctor-slider .owl-prev svg,
    #doctor-slider .owl-next svg {
        width: 1.2rem
    }

    #doctor-slider.owl-theme .owl-dots {
        padding-block-start: 2.5rem
    }
}

@media(max-width: 920px) {
    .steps-padding {
        padding-block: 4rem;
        grid-template-columns: 1fr
    }

    .steps-padding .steps {
        width: 100%;
        gap: 4rem
    }

    .section-image.image-2 {
        margin-inline: auto
    }
}

@media(max-width: 850px) {
    .banner {
        height: unset;
        max-height: unset;
        min-height: unset
    }

    .mouse-icon {
        display: none
    }
}

@media(max-width: 650px) {
    .grid-4-cols {
        --_columns: 1
    }

    .small-feature-grid {
        flex-direction: column
    }

    .section-image.image-1 {
        width: 100%
    }

    .DesignedButton__button.FollowButton {
        margin-block-end: 2.6rem !important
    }

    .FeedLayout__col-footer.layout__flex-column {
        margin-block-start: 2.6rem !important
    }
}

@media(max-width: 550px) {
    .banner-content-button {
        margin-block: 1rem 2rem
    }

    .banner-image-small {
        inset: 0;
        z-index: 0;
        display: block;
        position: absolute;
        filter: blur(10px) brightness(0.5)
    }

    .banner-image {
        position: relative;
        z-index: 1
    }

    .banner-content {
        position: relative;
        z-index: 2
    }

    .banner-content h1 {
        padding-block-start: 2rem
    }
}

@media(max-width: 500px) {
    .banner {
        --min-height: auto;
        --max-height: auto
    }
}

.bounce {
    animation: bounce 3s infinite forwards
}

@keyframes bounce {
    30% {
        translate: 0 -1rem
    }

    100% {
        translate: 0
    }
}