/*####################################### Banner fitness CSS#########################################*/

.hence-forth-fitness-page h1 span {
    color: #F6B000;
}
/*################################# fitness Pages Layers ##################################*/
.fitness-bg-layers {
    position: relative;
    width: 100%;
    height: 100%;
}

.fitness-bg-layers::before {
    position: absolute;
    content: "";
    top: 0%;
    left: 0;
    background: transparent url("../images/fitness/fitness-layers.webp") center/cover no-repeat padding-box;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/*################################# Feature of fitness App ##################################*/


.feature-fitness-app-bg {
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    padding: 100px;
}

.feature-fitness-app-heading h3 span {
    background: linear-gradient(282.84deg, #00C6FF 18.56%, #0072FF 81.44%);
}

.feature-fitness-app-card {
    background: #F6F8FC;
    border-radius: 16px;
    padding: 30px;
    height: 100%;
}

.feature-fitness-app-card h6 {
    color: #494C50;
}


/*################################### Create Fitness App ####################################*/
.create-fitness-app-heading h3 span {
    background: linear-gradient(46.19deg, #FF512F 5.66%, #F09819 94.35%);
}

.create-fitness-app-image {
    position: relative;
}

.create-fitness-app-image img {
    width: 100%;
}

.meta-white-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
}

.create-fitness-app-image::before {
    position: absolute;
    content: '';
    inset: 0 0 0 0;
    width: 0%;
    height: 0%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px 20px 0 0;

}

.create-fitness-app-box {
    text-align: center;
    cursor: pointer;
    background: #FFFFFF;
    border: 2px solid #EDEEEE;
    border-radius: 20px;

}

.create-fitness-app-box:hover .create-fitness-app-image::before {
    width: 100%;
    height: 100%;
}

.create-fitness-app-box:hover .meta-white-button {
    visibility: visible;
}


.heading-metaverse-development {
    padding: 25px;
}

/*####################################### blockchain Platform CSS#########################################*/

.one-app-many-user-images li h5 {
    margin-top: 20px;
    font-weight: 600;
}



.one-app-many-user .nav-pills .nav-link {
    display: block;
    padding: 12px 18px;
    text-decoration: none;
    transition: unset !important;
    background: linear-gradient(180deg, #04EA6F20 0%, #00D56320 100%) !important;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.03em;
    color: #212529;
    white-space: nowrap;
}

.one-app-many-user .nav-pills .nav-link.active,
.one-app-many-user .nav-pills .nav-link:hover {
    background: linear-gradient(180deg, #04EA6F 0%, #00D563 100%) !important;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    color: #fff;
}

.one-app-many-user-card {
    background: #FFFFFF;
    box-shadow: 0px 2px 6px rgba(33, 37, 41, 0.08);
    border-radius: 16px;
    height: 100%;
    padding: 25px;
}

/*################################# User Get Fit ##################################*/
.user-get-fit-content h3 span {
    background: linear-gradient(226.69deg, #FFB199 0%, #FF0844 100%);
}

/*################################# Fitness Latest Technology ##################################*/
.fitness-latest-technology-heading h3 span {
    background: linear-gradient(180deg, #04EA6F 0%, #00D563 100%);
}

.fitness-latest-technology-card {
    border-radius: 20px;
    padding: 40px;
    height: 100%;
}


.fitness-latest-technology-custom:nth-child(1) .fitness-latest-technology-card {
    background: rgba(172, 222, 231, 0.4);

}

.fitness-latest-technology-custom:nth-child(2) .fitness-latest-technology-card {
    background: rgba(255, 225, 233, 0.4);

}

.fitness-latest-technology-custom:nth-child(3) .fitness-latest-technology-card {
    background: rgba(253, 215, 194, 0.4);

}

.fitness-latest-technology-custom:nth-child(4) .fitness-latest-technology-card {
    background: rgba(204, 226, 203, 0.4);

}


/*################################# DoorDash Clone Outshine ##################################*/
.why-choose-us-fitness-card {
    height: 100%;
    padding: 25px;
    background: #FFFFFF;
    box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.02);
    border-radius: 16px;
}

/* add hover css */

/*################################# Media ##################################*/


@media all and (min-width:768px) and (max-width:991px){
    .feature-fitness-app-bg {
        padding: 40px;
    }
    
}
@media all and (min-width:320px) and (max-width:767px){
    .feature-fitness-app-bg {
        padding: 20px;
    }
    
}