.section-space{
    padding-top: 100px;
    padding-bottom: 100px;
}
.section-space + .section-space{
    padding-top: 0;
}
.section-space .section-space{
    padding-top: 50px;
    padding-bottom: 50px;
}
.section-space-top{
    padding-top: 100px !important;
}
.section-space-bottom{
    padding-bottom: 100px !important;
}
#sp-main-body{
    padding-top: 0;
    margin-top: -80px;
}
/*----- Banner -----*/
#banner{
    padding-top: 180px;
    background: var(--orange-10) url("../images/general/circle-bg-1.webp") no-repeat center top;
    background-size: cover;
}
#banner h1{
    line-height: 65px;
}
#bannerOrangeCircle{
    position: absolute;
    top: 95px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#bannerOrangeCircle>div:first-child{
    width: 484px;
    height: 494px;
}
#bannerOrangeCircle>div:last-child{
    width: 417px;
    height: 426px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#bannerAsset1,#bannerAsset2{
    position: absolute;
}
#bannerAsset1{
    top: 30%;
    left: 0;
}
#bannerAsset2{
    bottom: 10%;
    right: 0;
}
/*----- Health -----*/
.health-bg{
    background: url("../images/home/health-bg.webp") no-repeat center top;
    background-size: 100%;
}
.health-item{
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px 30px;
    border-radius: 8px;
    transition: all .3s ease-in;
}
.health-item:hover, #healthCourses .health-item:first-child{
    box-shadow: 0 3px 16px 2px rgba(var(--orange-200-rgb), .12);
}
.health-item>.circle-icon{
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--orange-200);
    flex-shrink: 0;
    background-color: white;
    box-shadow: 0 3px 16px 2px rgba(var(--orange-200-rgb), .12);
    transition: all .3s ease-in;
}

.health-item:hover>.circle-icon, #healthCourses .health-item:first-child>.circle-icon{
    color: white;
    background-color: var(--orange-200);
    box-shadow: none;
}
.health-item p{
    margin-bottom: 0;
    color: var(--black-200);
}
/*----- Courses -----*/
#coursesCaption{
    padding-top: 100px;
    padding-bottom: 400px;
    background: var(--orange-10) url("../images/home/courses-bg.webp") no-repeat center center;
    background-size: cover;
}
.courses-feature-item{
    display: flex;
    gap: 28px;
    border-radius: 20px;
    padding: 20px 25px;
}
.courses-feature-item.item-1,
.courses-feature-item.item-4{
    box-shadow: 0 3px 16px 2px rgba(var(--orange-200-rgb), .12);
}
.courses-feature-item.item-1{
    border-bottom-left-radius: 5px;
}
.courses-feature-item.item-2{
    border-bottom-right-radius: 5px;
}
.courses-feature-item.item-3{
    border-top-left-radius: 5px;
}
.courses-feature-item.item-4{
    border-top-right-radius: 5px;
}
.courses-feature-item h5{
    margin-bottom: 0;
}
#courseItems{
    margin-top: -300px;
    border-radius: 35px 25px 40px 15px;
    overflow: hidden;
}
.course-caption{
    color: white;
    padding: 30px;
}
.course-item{
    position: relative;
    z-index: 0;
    color: white;
    height: 100%;
    display: flex;
    padding: 30px;
    flex-direction: column;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.course-item:before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    bottom: 0;
    background-image: linear-gradient(to top, rgba(3,2,22, .87) 30%, rgba(3,2,22, 0) 100%);
    z-index: -1;
    transition: all .3s ease-in-out;
}
.course-item:hover:before {
    top: 0;
}
.course-item:not(.large-item)>.expander{
    height: 90%;
    flex-shrink: 0;
    transition: height .3s ease-in-out;
}
.course-item:hover>.expander{
    height: 0%;
}
.course-item>.item-text{
    margin-top: auto;
}
.course-item>.item-text>h3{
    margin-bottom: 20px;
}
.course-item.item-1{
    background-image: url("../images/courses/yoga-title-bg.webp");
}
.course-item.item-2{
    background-image: url("../images/courses/corrective-exercises-title-bg.webp");
}
.course-item.item-3{
    background-image: url("../images/courses/trx-title-bg.webp");
}
.course-item.item-4{
    background-image: url("../images/courses/bodybuilding-title-bg.webp");
    min-height: 300px;
}
/*----- Blog -----*/
#blog{
    position: relative;
    padding: 120px 0 100px;
    z-index: 0;
}
.blog-bg{
    position: absolute;
    z-index: -1;
    animation: transform 4s cubic-bezier(0.46,0.03,0.52,0.96) infinite;
}
.blog-bg.bg-1{
    right: 20px;
    top: 50px;
}
.blog-bg.bg-2{
    left: 20px;
    bottom: 20px;
}

.blog-card{
    padding: 30px 30px 15px 30px;
    border-radius: 25px;
    background-color: white;
    box-shadow: 0 3px 16px 2px rgba(var(--orange-200-rgb), .12);
    height: 100%;
}
.blog-card .item-image{
    border-radius: 30px;
    overflow: hidden;
}
.blog-card .blog-title{
    line-height: 1.8;
}
.blog-card .blog-title:not(:hover){
    color: black;
}
.blog-card .blog-cat>a:not(:hover),
.blog-card p{
    color: var(--black-200);
}
.blog-card p{
    margin-bottom: 0;
}
.blog-card .blog-read-more{
    transform: translateY(39px);
    text-align: center;
}
@media (max-width: 1199px) and (min-width: 992px){
    #bannerOrangeCircle>div:first-child {
        width: 417px;
        height: 426px;
    }
    #bannerOrangeCircle>div:last-child{
        width: 350px;
        height: 373px;
    }
}
@media (max-width: 991px) and (min-width: 768px){
    .blog-card{
        display: flex;
        gap: 20px;
        padding: 20px;
    }
    .blog-card .blog-read-more {
        transform: translateY(8px);
        text-align: left;
    }
    .blog-card .item-image {
        margin-bottom: 0;
    }
}
@media (max-width: 991px){
    .blog-bg{
        width: 35%;
    }
}
@media (max-width: 767px){
    .courses-feature-item{
        gap: 18px;
        padding: 15px 12px;
    }
    .course-caption {
        padding: 15px;
    }
    .blog-card .blog-read-more {
        transform: translateY(30px);
    }
}
@media (max-width: 575px){
    #aboutSticker {
        top: 14%;
        left: 5%;
    }
    .health-item {
        gap: 10px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .courses-feature-item{
        align-items: center;
        border-radius: 15px !important;
    }
    .blog-card {
        padding: 20px 20px 15px 20px;
    }
    .blog-bg{
        width: 50%;
    }
}
@media (max-width: 527px){
    #banner{
        padding-top: 150px;
    }
    #bannerOrangeCircle>div:first-child {
        width: 417px;
        height: 426px;
    }
    #bannerOrangeCircle>div:last-child{
        width: 350px;
        height: 373px;
    }
}
@media (max-width: 475px){
    #bannerOrangeCircle>div:first-child {
        width: 320px;
        height: 340px;
    }
    #bannerOrangeCircle>div:last-child{
        width: 280px;
        height: 300px;
    }
}