.banner{
    background: url(../images/banner.webp) center center / cover ;
    background-repeat: repeat-x;
    padding-top: 250px;
    padding-bottom: 180px;
    position: relative;
}
.banner::before {
    height: 7px;
    width: 100%;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background: linear-gradient(270deg, rgba(255,130,32,1) 50%, rgba(0,154,73,1) 50%);
}
.enquire__btn{
    font-size: 16px;
    font-weight: 500;
    color: var(--white);
    background-color: var(--green);
    padding: 15px 30px;
    position: relative;
    z-index: 0;
    border-radius: 3px;
}
.enquire__btn:hover , .live-chat:hover{
    color: var(--white);
}
.enquire__btn::before , .live-chat:before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--orange);
    content: '';
    width: 0%;
    height: 100%;
    transition: .3s linear;
    z-index: -1;
    border-radius: 3px;
}

.enquire__btn:hover::before , .live-chat:hover::before {
    width: 100%;
    transition: .3s linear;
    color: var(--white);
}
.live-chat{
    font-size: 16px;
    font-weight: 500;
    padding: 15px 43px;
    color: var(--black);
    background-color: var(--white);
    position: relative;
    z-index: 0;
    border-radius: 3px;
}
.live-chat:hover{
    color: var(--white);
}
.live-chat:before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--orange);
    content: '';
    width: 0%;
    height: 100%;
    transition: .3s linear;
    z-index: -1;
    border-radius: 3px;
}
.live-chat:hover::before {
    width: 100%;
    transition: .3s linear;
    color: var(--white);
}
.banner .title p {
    padding: 20px 0;
}
.big-screen {
    max-width: max-content;
    position: relative;
    z-index: 0;
}
.trusted{
    background: url(../images/slider-bg.webp) center center / cover  no-repeat;
    padding: 0;
    background-position: 64%;
}
.trusted .slick-slide {
    margin-right: 10px;
}
.client-grid-container h3 {
    padding: 25px 0 18px 0;
}
.client-grid-container {
    display: grid;
    grid-template-columns: auto auto;
    gap: 30px;
    padding-top: 60px;
}
.view__btn {
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
    background-color: var(--green);
    padding: 14px 30px;
    display: inline-block;
    border-radius: 3px;
    border: 2px solid transparent;
    margin-top: 20px;
}

.view__btn:hover {
    border: 2px solid var(--green);
    background: transparent;
    color: var(--green);
}
.clients-wrap .body-spartan,
.johnson,
.race-track,
.wide,
.sportlight,
.fitmeal
{
    position: relative;
    width: max-content;
}
.body-spartan::before {
    background-image: url(../images/body.webp);
} 
.johnson::before{
    background-image: url(../images/johnson.webp);
}
.race-track::before{
    background-image: url(../images/race-after.webp);
}
.wide::before{
    background-image: url(../images/wide-after.webp);
}
.sportlight::before{
    background-image: url(../images/sport.webp);
}
.fitmeal::before{
    background-image: url(../images/fitmeal.webp);
}

.clients-wrap .body-spartan::before ,
.johnson::before,
.johnson::before,
.race-track::before,
.wide::before,
.sportlight::before,
.fitmeal::before
{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0; left: 0; right: 0;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: all .4s linear;
    border-radius: 35px;
}
.clients-wrap .body-spartan:hover::before ,
.johnson:hover::before,
.race-track:hover::before,
.wide:hover::before,
.sportlight:hover::before,
.fitmeal:hover::before
{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: all .4s linear;
    opacity: 1;
}
.cta__wrap{
    background: url(../images/cta-bg.webp) center center / cover  no-repeat;
}
.cta__wrap .title h4{
    font-family: 'Sora', sans-serif;
    text-transform: uppercase;
}
.cta__wrap .title p{
    font-size: 23px;
    font-family: 'Sora', sans-serif;
    line-height: 1.3;
    font-weight: 400;   
    padding-top: 15px;
}
.cta__wrap .live-chat {
    display: flex;
    justify-content: center;
    align-items: center;
    width: max-content;
    margin: auto;
    gap: 5px;
    margin-top: 23px;
    padding: 15px 30px;
}
.case-study{
    padding: 80px 0;
}
.lets-go-slider h3 {
    font-size: 320px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    line-height: .7;
    max-width: max-content;
}
.lets__go .slick-slide {
    display: flex !important;
    justify-content: center;
}
.lets__go .slick-track {
    padding: 60px;
}
.google-map {
    position: relative;
}

.google-map::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background-color: #000000d9;
}
.address {
    color: var(--white);
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    bottom: 120px;
}

.address li span {
    display: block;
    line-height: 25px;
    padding-top: 10px;
}
.address li object {
    animation: dot-bilink  .5s infinite alternate;
}
@keyframes dot-bilink {
    0%{transform: matrix(1.1, 0, 0, 1.1, 0, 0);  };
    100%{transform: matrix(1, 0, 0, 1, 0, 0);};
}
.address:hover{
    color: var(--white);
}
.banner .before-img {
    position: absolute;
    bottom: 5%;
    left: 2%;
}
.banner .after-img {
    position: absolute;
    top: 25%;
}
.banner .laptop {
    position: absolute;
    bottom: -43%;
    right: -27%;
    z-index: 1;
}
.banner .phone {
    position: absolute;
    bottom: 21%;
    right: -38%;
}

.banner .tab {
    position: absolute;
    bottom: -30%;
}
.clients-wrap  img {
    border-radius: 35px;
}
.client-grid-container .clients-wrap:nth-child(2) {
    margin-top: 140px;
}
.client-grid-container .clients-wrap:nth-child(3) {
    margin-top: -90px;
}
.client-grid-container .clients-wrap:nth-child(4) {
    margin-top: 50px;
}
.client-grid-container .clients-wrap:nth-child(5) {
    margin-top: -90px;
}
.client-grid-container .clients-wrap:nth-child(6) {
    margin-top: 50px;
}



/* styling race track */
.banner-race-track{
    background: url(../images/race-track/banner-img.webp) center top/ contain  no-repeat;
    padding-top: 100px;
}
.banner__content h1 span {
    background-color: var(--yellow);
    padding: 0 20px;
    color: var(--black);
}
.banner-race-track .banner__content h1 {
    line-height: 93px;
}
.info-track .title h3 {
    padding-bottom: 50px;
}
.info-track .title  img {
    position: absolute;
    z-index: -1;
    top: -15px;
}
.info-track .content p {
    font-size: 16px;
    padding-bottom: 15px;
    color: #666666;
    font-family: 'Plus Jakarta Sans', sans-serif; 
}
.info-track .shape-1 {
    position: absolute;
    top: -54%;
    z-index: -1;
}
.info-track .shape-2 {
    position: absolute;
    right: 0;
    z-index: -1;
    top: -58%;
}
.car-problem .content .wave-shape-1 {
    position: absolute;
    z-index: -1;
    top: -1%;
    right: 22%;
    max-width: 72%;
}
.car-problem .content p {
    font-size: 16px;
    padding-bottom: 20px;
    color: #666666;
    font-family: 'Plus Jakarta Sans', sans-serif; 
}
.car-cta {
    background: url(../images/race-track/cars-bg-img.webp) center center/ cover no-repeat;
    padding: 105px 0;
}
.car-cta img {
    position: absolute;
    max-width: 34%;
    top: 5%;
}
.portfolio h4:before , .mission h4::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 25px;
    background-color: #E15C29;
    z-index: -1;
    bottom: -10%;
    left: 32%;
}
.mission h4::before {
    content: '';
    position: absolute;
    width: 250px;
    height: 25px;
    background-color: #F1900E;
    z-index: -1;
    bottom: 22px;
    left: 10%;
}
.cta{
    background: url(../images/race-track/cta-bg-img.webp) center center/ cover no-repeat;
    position: relative;
    padding: 80px 0;
}

.cta::before {
    content: '';
    position: absolute;
    background-image: url(../images/race-track/trake.webp);
    width: 100%;
    height: 100%;
    background-repeat: repeat-x;
    background-size: contain;
    top: -7%;
    animation: movement 30s linear infinite alternate;
}
.clients p {
    padding: 15px 0 30px 0;
}
.slick-dots li {
    width: 15px;
    height: 15px;
    background-color: grey;
    clip-path: circle(44%);
}
.slick-dots li:active{
    background-color: var(--orange);
}
.slick-dots li button:before{
    display: none;
}
li.slick-active button {
    background-color: var(--orange);
}
.clients figure {
    width: max-content;
}
.car-problem img{
    animation: img-animate 2s linear infinite alternate;
}
@keyframes img-animate{
    0%{transform: translateY(-2%)};
    0%{transform: translateY(2%)};
}
.portfolio img {
    max-width: max-content;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.portfolio a , .recent-work a{
    position: relative;
}

.portfolio a::before ,.recent-work a::before{
    content: '+';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000bd;
    font-size: 100px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    transition: all .2s linear;
}
.portfolio a:hover::before , .recent-work a:hover::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: all .2s linear;
}
.portfolio .row{
    margin-top: 60px;
}
.johnson-banner {
    background: url(../images/john-son/header-bg.webp) center center/ cover no-repeat;
    padding-top: 210px;
    padding-bottom: 250px;
}
.shampoo {
    position: absolute;
    bottom: 6%;
    right: 21%;
}
section.overview p {
    font-size: 18px;
    color: #666666;
    padding-top: 15px;
}
.video-wrap .left__content {
    padding-top: 230px;
    padding-bottom: 150px;
    padding-right: 50px;
    padding-left: 35px;
}
.video-wrap .right__content {
    padding-top: 230px;
    padding-bottom: 150px;
    padding-left: 50px;
}
.video-wrap  p {
    padding-top: 20px;
    font-size: 18px;
    font-family: 'Plus Jakarta Sans', sans-serif; 
}
.video-wrap .video {
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
}
.video-wrap .video img{
    cursor: pointer;
}

.video-wrap .video::before {
    position: absolute;
    content: '';
    background-image: url(../images/john-son/play.png);
    width: 6%;
    height:22%;
    background-repeat: no-repeat;
    cursor: pointer;
    animation: bilink 500ms linear infinite alternate;
}
.video-wrap .container-fluid {
    margin-top: -9%;
    position: relative;
    z-index: -1;
}
.service__container {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 175px;
    row-gap: 50px;
}
.service__container h6 {
    padding: 20px  0;
}
.service .title p {
    padding: 10px 0 50px 0;
}
.service__container .johnson-cards:nth-child(1) {
    margin-top: 90px;
}

.service__container .johnson-cards:nth-child(4) {
    margin-top: -60px;
}
.service{
    padding-top: 0;
}
.video-wrap  , .overview{
    padding-bottom: 20px;
    z-index: 0;
}
@keyframes bilink{
    0%{    transform: matrix(1.2, 0, 0, 1.2, 0, 0);};
    100%{    transform: matrix(1, 0, 0, 1, 0, 0);};
}



/* healthy life styling  */
.healthy-life-banner{
    background: url(../images/healthy-life/healthy-life-bg.webp) center top/ cover no-repeat;
    padding: 230px 0 250px 0;
}
.healthy-life-banner h1 {
    font-size: 80px;
    color: var(--white);
    text-transform: uppercase;
}

.healthy-life-banner h3
{
    font-size: 150px;
    color: #9EAC2E;
    text-transform: uppercase;
}

.healthy-life-banner img {
    margin-bottom: 30px;
    max-width: 18%;
}
.after-banner-wrap{
    background: url(../images/healthy-life/line-shape.webp) center top/ cover no-repeat;
}
.after-banner-wrap .left__content p {
    font-size: 18px;
    font-family: 'Plus Jakarta Sans', sans-serif;   
    color: var(--text-grey);
}
.primary__btn {
    font-size: 16px;
    font-weight: 500;
    color: var(--white);
    background-color: var(--green);
    padding: 12px 35px;
    display: block;
    width: max-content;
    border-radius: 5px;
    margin-top: 25px;
}

.primary__btn:hover {
    background-color: var(--orange);
    color: var(--white);
}
.after-banner-wrap img {
    max-width: max-content;
}
.info-wrap {
    background: url(../images/healthy-life/info-bg.webp) center top/ cover no-repeat;
}
.info-wrap ul li {
    font-size: 16px;
    list-style: disc;
    line-height: 35px;
    font-family: 'Plus Jakarta Sans', sans-serif;   
    font-weight: 300;
}

.info-wrap ul {
    margin: 20px 0 20px 20px;
}
.info-wrap  .right__content h6 {
    padding: 20px 0;
}
.info-wrap  .right__content p  , .cta-wrap p{
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;   
    font-weight: 300;
}
.before-cta-wrap p {
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif; 
    padding-top: 15px;  
}
.before-cta-wrap ul li {
    list-style: disc;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 35px;
}
.before-cta-wrap img  , .cta-wrap img{
    max-width: max-content;
}
.before-cta-wrap .row .col-12:nth-child(3) {
    display: flex;
    justify-content: end;
}
.cta-wrap{
    background: url(../images/healthy-life/cta-bg.webp) center top/ cover no-repeat;
}
.cta-wrap .laptop {
    position: relative;
    left: -31%;
}
.before-shape {
    position: absolute;
    top: 0;
}
.after-shape {
    position: absolute;
    right: 3%;
    bottom: -15%;
}
.process__container {
    display: flex;
    margin-top: 50px;
    row-gap: 35px;
    column-gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

.process__container span {
    display: block;
    text-align: center;
    line-height: normal;
    padding-top: 10px;
}
.window .window-scroll {
    position: absolute;
    width: 573px;
    height: 335px;
    top: 3.5%;
    left: 4.5%;
    border-radius: 5px;
    overflow: hidden;
    bottom: 0;
}
.window .window-scroll img{
 top: 0;
}
section.banner:hover  .window-scroll img {
    top: -1685px;
    position: relative;
    transition:  15s ;
}
.window {
    top: -110px;
}

/* laptop */
.laptop .laptop-scroll {
    position: absolute;
    width: 340px;
    height: 220px;
    top: 6.5%;
    left: 14.5%;
    border-radius: 5px;
    overflow: hidden;
    bottom: 0;
}
.laptop .laptop-scroll img{
 top: 0;
}
section.banner:hover  .laptop-scroll img {
    top: -1000px;
    position: relative;
    transition:  15s ;
}
.laptop {
    top: 80%;
}
/* laptop */


/* tab */
.tab .tab-scroll {
    position: absolute;
    width: 185px;
    height: 255px;
    top: 5.5%;
    left: 8.5%;
    border-radius: 5px;
    overflow: hidden;
    bottom: 0;
}
.tab .tab-scroll img{
 top: 0;
}
section.banner:hover  .tab-scroll img {
    top: -500px;
    position: relative;
    transition:  15s ;
}
.tab {
    top: 70%;
}
/* tab */

/* mobile */
.mobile .mobile-scroll {
    position: absolute;
    width: 87px;
    height: 176px;
    top: 10.5%;
    left: 6.5%;
    border-radius: 5px;
    overflow: hidden;
    bottom: 0;
}
.mobile .mobile-scroll img{
 top: 0;
}
section.banner:hover  .mobile-scroll img {
    top: -300px;
    position: relative;
    transition:  15s ;
}
.mobile {
    top: 25%;
    position: absolute;
    right: -35%;
}
/* mobile */
.before-recet-work{
    background: url(../images/healthy-life/before-portfolio-bg.webp) center top/ cover no-repeat;
    padding-bottom: 160px;
}
.before-recet-work ul li svg {
    font-size: 15px;
}
.before-recet-work ul li span {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    margin-top: 20px;
}
.before-work {
    position: absolute;
    right: 0;
    bottom: 0;
}
.card-wrap {
    padding: 35px 20px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    min-height: 240px;
    border-radius: 5px;
    background-color: var(--white);
}
.card-wrap:hover , .card-wrap:hover span{
    background-color : #003961;
    color: var(--white);
}
.card-wrap:hover img , .box.active img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}
.box.active span{
    color: var(--white);
}
.card-wrap  img {
    filter: brightness(0) saturate(100%) invert(17%) sepia(74%) saturate(1190%) hue-rotate(176deg) brightness(96%) contrast(105%);
}
.box.active{
background-color: #003961;
color: var(--white);
}
.box.active object {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}
.recent-work {
    background: url(../images/healthy-life/portfolio-bg.webp) center top/ cover no-repeat;
}
.healthy-card {
    margin-top: -135px;
    position: relative;
}
.recent-work .title h5 {
    padding-top: 90px;
    padding-bottom: 35px;
}
.healthy-life-banner .content ul li {
    font-size: 150px;
    letter-spacing: -17px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Plus Jakarta Sans', sans-serif; 
    color: #9EAC2E;
}
.spotlight{
    background: url(../images/spotlight/spotlight-img.webp) center top/ cover no-repeat;
    padding-top: 170px;
}

.spotlight .content h5 {
    font-size: 75px;
    color: var(--white);
    text-transform: uppercase;
    font-weight: 700;
}
.spotlight-img {
    position: absolute;
    max-width: max-content;
}
.spot-info h3 {
    padding-top: 120px;
}
.info-1 {
    display: block;
    margin-left: auto;
    animation: img-animate 2s linear infinite alternate;
}
.info-2 {
    display: block;
    margin-right: auto;
    animation: img-animate 2s linear infinite alternate;
}
.spot-cta {
    background: url(../images/spotlight/cta-img.webp) center top/ auto no-repeat;
}
.spot-services p{
    font-family: 'Plus Jakarta Sans', sans-serif; 
    font-weight: 400;
}
.spot-services img {
    display: block;
    margin-left: auto;
}
.services-wrap-1{
    background-color: #377273;
    position: relative;
    padding: 20px;
    z-index: 0;
    border: 2px solid transparent;
}
.services-wrap-1::before {
    content: '';
    position: absolute;
    background: url(../images/spotlight/icon-1.webp) center top/ cover no-repeat;
    width: 60%;
    height: 60%;
    top: 0;
    left: 0;
    z-index: 9999;
    filter: brightness(0) saturate(100%) invert(77%) sepia(8%) saturate(48%) hue-rotate(155deg) brightness(94%) contrast(84%);
    opacity: 0.3;
}
.services-wrap-2{
    background-color: #723672;
    position: relative;
    padding: 20px
}
.services-wrap-3{
    background-color: #373C71;
    position: relative;
    padding: 20px
}
.services-wrap-1:hover,
.services-wrap-2:hover,
.services-wrap-3:hover {
    background-color: var(--grey);
    color: var(--black);
}
.services-wrap-1:hover img,
.services-wrap-2:hover img,
.services-wrap-3:hover img{
    filter: brightness(0) saturate(100%) invert(0%) sepia(14%) saturate(2333%) hue-rotate(3deg) brightness(92%) contrast(103%);
}
.spot-services {
    background: url(../images/spotlight/spot-services.webp) center top/ auto no-repeat;
    padding-top: 300px;
    margin-top: -255px;
    position: relative;
    z-index: -1;
    padding-bottom: 60px;
}
.spotlight-portfolio img {
    border-radius: 30px;
    margin: 0;
}
.spotlight-portfolio a::before{
    border-radius: 30px;
}
.spartan-banner{
    background: url(../images/body-spartan/spartan-banner.webp) center top/ cover no-repeat;
    padding-top: 140px
}
.golden{
    color: #F1900E;
}
.spartan-banner {
    background: url(../images/body-spartan/spartan-banner.webp) center top/ cover no-repeat;
    padding-top: 140px;
    padding-bottom: 450px;
}
.spartan-img img{
    display: block;
    margin: auto;
    margin-top: -470px;
}
.spartan-services h5 {
    padding-top: 130px;
}
.gaining {
    max-width: 845px;
    position: relative;
    top: 14%;
    left: -18%;
    animation: img-bilink 500ms infinite alternate;
}
@keyframes img-bilink{
    0%{filter: inherit;}
    100%{filter: invert(1);}
}
.spartan-service-card .container {
    max-width: 1550px;
    background-color: var(--black);
    border-radius: 70px;
    position: relative;
    max-height: 460px;
    z-index: 999;
}
.spartan-card-img {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
}
.spartan-card-img li:nth-child(1) , .spartan-card-img li:nth-child(2), .spartan-card-img li:nth-child(3) {
    position: relative;
    top: 60px;
}
.spartan-card-img li {
    position: relative;
}

.spartan-card-img li::before {
    content: '';
    position: absolute;
    width: 65px;
    height: 65px;
    background-color: var(--orange);
    clip-path: circle(48%);
}
.spartan-card-img li:nth-child(1)::before {
    bottom: -6%;
    z-index: -1;
    left: -11%;
    animation: circle-hover 3s infinite alternate;
}
.spartan-card-img li:nth-child(2)::before {
    bottom: 7%;
    z-index: -1;
    left: 0;
    animation: circle-hover 5s infinite alternate;  
}
.spartan-card-img li:nth-child(3)::before {
    bottom: -6%;
    z-index: -1;
    left: -10%;
    animation: circle-hover 4s infinite alternate;  
}
@keyframes circle-hover{
    0%{   transform: translateY(-381px);};
    100%{  transform: translateY(-381px);};
}
.after-service-card {
    margin-top: 60px;
}
.spartan-cta{
    background: url(../images/body-spartan/cta-banner.webp) center top/ cover no-repeat;
    padding: 190px 0;
}
.lowercase{
    text-transform: lowercase;
}
.m-title {
    font-size: 170px;
    font-weight: 700;
    line-height: 1.2;
}
.spartan-portfolio .container{
    max-width: 1550px;
    background: url(../images/body-spartan/portfolio-bg.webp) center top/ cover no-repeat;
    padding: 70px 0;
    border-radius: 50px;
}
.wide-banner{
    background: url(../images/wide/wide-banner.webp) center top/ cover no-repeat;
    padding-top: 200px;
    padding-bottom: 210px;
}
.wide {max-width: 632px;}
.client-info{
    background: url(../images/wide/info-ing.webp) center top/ cover no-repeat;
    padding: 130px 0;
}
.after-line {
    width: 100px;
}
.client-after-img {
    position: absolute;
    right: 10%;
    top: 0;
}
.wide-cta{
    background: url(../images/wide/cta-bg.webp) center top/ cover no-repeat;
}
.after-wide-cta ul li{
    font-family: 'Plus Jakarta Sans', sans-serif; 
    font-size: 16px;
    list-style: disc;
    margin-left: 18px;
    padding-top: 10px;
    font-weight: 600;
    line-height: 21px;
}
.wide-service{
    background: url(../images/wide/service-bg.webp) center top/ cover no-repeat;
}
.left-content h6 {
    line-height: 70px;
}
.wide-portfolio img {
    max-width: 100%;
}
.wide-portfolio a::before {
    border-radius: 45px;
}
.wide-portfolio .container-fluid {
    max-width: 1770px;
    background-color: #27CBA4;  
    border-radius: 70px;
    padding-bottom: 60px;
}
.wide-portfolio .title h4 {
    font-size: 100px;
    font-weight: 700;
    padding-top: 80px;
    z-index: 999;
    position: relative;
}

.wide-portfolio .title h4:before {
    background-color: #F5DD2C;
    bottom: 5px;
}
.wide-after-text {
    color: black;
    -webkit-text-fill-color: #ffffff00;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffffff5c;
    font-size: 180px;
    position: absolute;
    font-weight: 700;
    left: 15%;
}