:root{
    --main-Green:#B9FF66;
    --main-Dark:#191A23;
    --main-Light:#F3F3F3;
    --Dark:#000;
    --font-size_H1: 6rem;
    --font-size_H2: 4rem;
    --font-size_H3: 3rem;
    --font-size_H4: 2rem;
    --font-size_P: 1.8rem;
    --SpaceGrotesk-Regular: "SpaceGrotesk-Regular";
    --SpaceGrotesk-Medium:"SpaceGrotesk-Medium";
    --box-shadow: 0 .5rem 0 var(--main-Dark);
}
html{
    box-sizing: border-box;
    font-size: 62.5%;
    overflow-x: auto; 
    scrollbar-width: none;
}
html::-webkit-scrollbar{
    width: 0;
    display: none;
}
*,
*::before,
*::after{
    box-sizing: inherit;
}
body{
    background-color: #fff;
    font-size: 1.6rem;
    height: 1.6rem;
    font-family: var(--SpaceGrotesk-Regular);
}
a{
    text-decoration: none;
    color: var(--main-Dark);
}
.header{
    margin-top: 4rem;
}
.nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header_img__logo{
    width: 21rem;
}
.header_wrapper_nav-btn{
    display: flex;
    align-items: center;
    font-size: var(--font-size_H4);
}
.header_menu{
    display: flex;
    align-items: center;
    gap: 4rem;
    padding-right: 4rem;
    
}
.header_menu__item{
    position: relative;
}

.header_menu__item::before{
    content: "";
    position: absolute;
    width:0;
    height: .1rem;
    left: 0;
    right: 0;
    top: 2.4rem;
    display: block;
    background-color: var(--main-Dark);
}
.header_menu__item:hover::before{
    width: 100%;
}
.header_menu__item__link{

}
.header_btn{
    padding: 2rem 3.5rem;
    border: .1rem solid var(--main-Dark);
    border-radius: 1.4rem;
    -webkit-border-radius: 1.4rem;
    -moz-border-radius: 1.4rem;
    -ms-border-radius: 1.4rem;
    -o-border-radius: 1.4rem;
    cursor: pointer;
}
.header_btn:hover{
    border: .1rem dashed var(--main-Light);
    background-color: var(--main-Dark);
    color: var(--main-Light);
}
/*
 ================================
        main_header
=================================
 */
.main_header{

}
.main_header__wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7rem;
}
.main_header__left{
    
}
.main_header__left__title{
    max-width: 53.1rem;
    font-family: var(--SpaceGrotesk-Medium);
    font-size: var(--font-size_H1);
    color: var(--Dark);
    line-height: 7.7rem;
}
.main_header__left__caption{
    margin-top: 3.5rem;
    max-width: 49.8rem;
    font-size: var(--font-size_H4);
    line-height: 2.8rem;
}
.main_header__left__btn{
    margin-top: 3.5rem;
    padding: 2.6rem 3.5rem;
    background-color: var(--main-Dark);
    color: var(--main-Light);
    border-radius: 1.4rem;
    -webkit-border-radius: 1.4rem;
    -moz-border-radius: 1.4rem;
    -ms-border-radius: 1.4rem;
    -o-border-radius: 1.4rem;
    max-width: 25.4rem;
    text-align: center;
    cursor: pointer;
}
.main_header__right{

}
.main_header__right__img{

}
.main_header__servise__bar{

}
.main_header__servise__bar__svg{
    color: var(--Dark);
}
.ticker{
    width: 100%;
    display: flex;
    
}
.main_header__ticker{
    display: flex;
    align-items: center;
    margin-top: 7rem;
    animation: scroll 15s linear infinite;
    -webkit-animation: scroll 15s linear infinite;
}
@keyframes scroll {
    0%{
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
}
    100%{
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
}
    
}
.main_header__servise__item{
    margin-right: 14.15rem;
}
.title__span__wrapper{
    display: flex;
    align-items: center;
    margin-top: 14rem;
    gap: 4rem;
}
.title__span{
    background-color: var(--main-Green);
    border-radius: .5rem;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    -ms-border-radius: .5rem;
    -o-border-radius: .5rem;
    font-size: var(--font-size_H2);
    padding: .3rem .7rem;
    font-family: var(--SpaceGrotesk-Medium);

}
.title__span__caption{
    font-size: var(--font-size_P);
    max-width: 58rem;
}
/*
 ================================
        main
=================================
 */

.main{
    padding-bottom: 10rem;
    margin-top: 8rem;
}
/*
 ================================
        Servises
=================================
 */

.Services__boxs{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4rem;
}
.Services__box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60rem;
    box-shadow:var(--box-shadow);
    border-radius: 4.5rem;
    -webkit-border-radius: 4.5rem;
    -moz-border-radius: 4.5rem;
    -ms-border-radius: 4.5rem;
    -o-border-radius: 4.5rem;
    border: .1rem solid var(--main-Dark);
    padding: 5rem;
    background-color: var(--main-Light);
    flex-grow: 1;

}
.Services__box__left{

}
.Services__box__img{

}
.Services__box__right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 9.3rem;
}
.Services__box__title{
    font-family: var(--SpaceGrotesk-Medium);
    font-size: var(--font-size_H3);
}
.Services__box__title span{
    background-color: var(--main-Green);
    border-radius: .7rem;
    -webkit-border-radius: .7rem;
    -moz-border-radius: .7rem;
    -ms-border-radius: .7rem;
    -o-border-radius: .7rem;
}

.Services__box__btn{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: var(--font-size_H4);
}
/*
 ================================
        Boxes
=================================
 */

.Services__box img {
    transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
}
.Services__box2{
    background-color: var(--main-Green);
}
.Services__box2 span{
    background-color: var(--main-Light);
    transition: 300ms;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    -o-transition: 300ms;
}
.Services__box3{
    background-color: var(--main-Dark);
}
.Services__box3 span{
    background-color: var(--main-Light);
}
.Services__box3 p{
    color: var(--main-Light);
}
.Services__box5{
    background-color: var(--main-Green);
}
.Services__box5 span{
    background-color: var(--main-Light);
}
.Services__box6{
    background-color: var(--main-Dark);
}
.Services__box6 span{
    background-color: var(--main-Green);
}
.Services__box6 p{
    color: var(--main-Light);
}
.Services__box:hover .Services__box__img{
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
}
/*
 ================================
        CTA
=================================
 */
 .CTA{
    
 }
 .box_card{
    min-width: 1rem;
    height: 34.7rem;
    background-color: var(--main-Light);
    border-radius: 4.5rem;
    -webkit-border-radius: 4.5rem;
    -moz-border-radius: 4.5rem;
    -ms-border-radius: 4.5rem;
    -o-border-radius: 4.5rem;
    margin-top: 12.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6rem;

}
 .box_card__right{
    display: flex;
    flex-direction: column;
    gap: 2.6rem;
 }
 .title__box_card__right{
    font-family: var(--SpaceGrotesk-Medium);
    font-size: var(--font-size_H3);
   
 }
 .caption__box_card__right{
    max-width: 40rem;
 }
 .btn__box_card__right{
    display: block;
    background-color: var(--main-Dark);
    color: var(--main-Light);
    width: 28.8rem;
    height: 6.8rem;
    text-align: center;
    line-height: 6.8rem;
    border-radius: 1.4rem;
    -webkit-border-radius: 1.4rem;
    -moz-border-radius: 1.4rem;
    -ms-border-radius: 1.4rem;
    -o-border-radius: 1.4rem;
    font-size: var(--font-size_P);
}
 .box_card__left{
    margin-right: 10rem;
 }
 /*
 ================================
        Case_studies
=================================
 */
 .Case_studies{
    min-width: 1rem;
    height: 32.6rem;
    border-radius: 4.5rem;
    background-color: var(--main-Dark);
    -webkit-border-radius: 4.5rem;
    -moz-border-radius: 4.5rem;
    -ms-border-radius: 4.5rem;
    -o-border-radius: 4.5rem;
    margin-top: 8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7rem 6rem;
    position: relative;
}
.Case_studies_box__detail{
    max-width: 26.8rem;
    
}
.Case_studies_box__caption{
    color: var(--main-Light);
    font-size: var(--font-size_P);
    margin-bottom: 2rem;
    line-height: initial;
}
.Case_studies_box__more{
    display: flex;
    gap: 1rem;
    cursor: pointer;
}
.Case_studies_box__more h5{
    color: var(--main-Green);
    font-size: var(--font-size_H4);
}
.Case_studies_box__detail--before::before{
    content: "";
    display: block;
    position: absolute;
    background-color:var(--main-Light);
    width: .1rem;
    height: 16.8rem;
    z-index: 1000;
    bottom: 0;
    top: 0;
    right: 45rem;
    margin: auto 0;
}
.Case_studies_box__detail--before::after{
    content: "";
    display: block;
    position: absolute;
    background-color:var(--main-Light);
    width: .1rem;
    height: 16.8rem;
    z-index: 1000;
    left: 45rem;
    bottom: 0;
    top: 0;
    margin: auto 0;
}   
 /*
 ================================
        Our Working Process (According)
=================================
 */
.wrapper_according{
    margin-top: 8rem;
}
.box__according{
    min-width: 5rem;
    border-radius: 4.5rem;
    background-color: var(--main-Light);
    -webkit-border-radius: 4.5rem;
    -moz-border-radius: 4.5rem;
    -ms-border-radius: 4.5rem;
    -o-border-radius: 4.5rem;
    padding: 4rem 6rem;
    box-shadow: var(--box-shadow);
    border: .1rem solid var(--main-Dark);
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}
.box__according__wrapper__title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.box__content{
    display: flex;
    align-items: center;
    gap: 2.5rem;
}
.box__content h3{
    font-family: var(--SpaceGrotesk-Medium);
    font-size: var(--font-size_H1);
}
.box__content h6{
    font-family: var(--SpaceGrotesk-Medium);
    font-size: var(--font-size_H3);
}
input[type="radio"]{
    display: none;
}
.box__according__caption{
    max-height: 0;
    overflow: hidden;
    transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    font-size: var(--font-size_P);
}
.content__img{
   position: absolute;
   right: 6rem;
}
input[type="radio"]:checked + .box__according__wrapper__title + .box__according__caption{
    max-height: 4rem;
    margin: 6rem 0 4rem;
}
input[type="radio"]:checked + .box__according__wrapper__title + .box__according__caption::before{
    width: 100%;
    height: 100%;
    position: absolute;
    content: "";
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 4.5rem;
    -webkit-border-radius: 4.5rem;
    -moz-border-radius: 4.5rem;
    -ms-border-radius: 4.5rem;
    -o-border-radius: 4.5rem;
    background-color: var(--main-Green);
    z-index: -1;
}
.SSS:checked + .content__img {
    opacity: 0;
}

 /*
 ================================
        Group-of-cards
=================================
 */
.wrapper__Group-of-cards{
    margin-top: 8rem;
    display: flex;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
}
.Group-of-cards__box{
    width: 38.7rem;
    height: 33.1rem;
    border: .1rem solid var(--main-Dark);
    border-radius: 4.5rem;
    -webkit-border-radius: 4.5rem;
    -moz-border-radius: 4.5rem;
    -ms-border-radius: 4.5rem;
    -o-border-radius: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4rem 3.5rem 6rem;
    flex-direction: column;
    box-shadow: var(--box-shadow);
    flex-grow: 1;
    transition: 300ms;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    -o-transition: 300ms;
}
.Group-of-cards__box:hover{
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}

.Group-of-cards__box__top{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: .72rem;
    position: relative;
}
.Group-of-cards__box__top::before{
    content: "";
    width: 100%;
    height: .1rem;
    background-color: var(--main-Dark);
    position: absolute;
    top: 13.6rem;
    bottom: 0;
}
.Group-of-cards__box__top--profile{
    display: flex;
    gap: 2rem;
    align-items: flex-end;
}
.Social-icon{
    width: 3.4rem;
    height: 3.4rem;
}
.Group-of-cards__box__top--profile h3{
    font-family: var(--SpaceGrotesk-Medium);
    font-size: var(--font-size_H4);
}
h3 p{
    font-size: var(--font-size_P);
    font-family: var(--SpaceGrotesk-Regular);
    margin-top: .5rem;
}
.Group-of-cards__box__down p {
    font-size: var(--font-size_P);
    line-height: 2.2rem;
}
.btn__see-all{
    display: block;
    width: 26.9rem;
    height: 6.8rem;
    background-color: var(--main-Dark);
    margin-top: 4rem;
    border-radius: 1.4rem;
    -webkit-border-radius: 1.4rem;
    -moz-border-radius: 1.4rem;
    -ms-border-radius: 1.4rem;
    -o-border-radius: 1.4rem;
    color: var(--main-Light);
    font-size: var(--font-size_P);
    text-align: center;
    line-height: 6.8rem;
    margin-left: auto;
}
 /*
 ================================
        Testimonials-block
=================================
 */
 .Testimonials_block{
    margin-top: 8rem;
    height:62.5rem;
    background-color: var(--main-Dark);
    border-radius: 4.5rem;
    -webkit-border-radius: 4.5rem;
    -moz-border-radius: 4.5rem;
    -ms-border-radius: 4.5rem;
    -o-border-radius: 4.5rem;
}
 .Testimonials_block__top{

 }
 .Testimonials_block__down{

 }
.Testimonials_block{
    padding: 8.4rem 0;
}
.Testimonials_block__top{
    display: flex;
    align-items: center;
    gap: 5rem;
    overflow-x: auto;
    scrollbar-width: none;
    position: relative;
    padding-left: 3rem;
    padding-right: 3rem;
}
.Testimonials_block__top__bubble{
    animation: AAA 40s linear infinite;
    -webkit-animation: AAA 40s linear infinite;
}
@keyframes AAA {
0%{
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}
100%{
    transform: translateX(-200%);
    -webkit-transform: translateX(-200%);
    -moz-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    -o-transform: translateX(-200%);
}
}
.img_aaa{
    background: url(../Image/Icon/Bubble.png);
    width: 60.6rem;
    height: 26.6rem;
    padding: 4.8rem 5.2rem 8rem;
    margin-bottom: 2rem;
}

.Testimonials_block__top::-webkit-scrollbar{
    width: 0;
    display: none;
}
.Testimonials_block__down{

}
.Testimonials_block__top__bubble__caption1{
    max-width: 50.2rem;
    color: var(--main-Light);
    font-size: var(--font-size_P);
    line-height: 2.3rem;
}
.Testimonials_block__top__bubble__name{
    padding-left: 7.5rem;
}
.Testimonials_block__top__bubble h3{
    color: var(--main-Green);
    font-size: var(--font-size_H4);
    margin-bottom: 1rem;
}
.Testimonials_block__top__bubble__name p{
    font-size: var(--font-size_P);
    color: var(--main-Light);
}
.Testimonials_block__navigtion{
    margin: 12.4rem auto 0;
    display: block;
}
 /*
 ================================
        Sing-up form
=================================
 */
.form__wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5rem;
    height: 77.3rem;
    background-color: var(--main-Light);
    border-radius: 4.5rem;
    -webkit-border-radius: 4.5rem;
    -moz-border-radius: 4.5rem;
    -ms-border-radius: 4.5rem;
    -o-border-radius: 4.5rem;
    margin-top: 8.5rem;
}
.form__left{
padding: 6rem 0 8rem 10rem;
}
.radio__form{
display: flex;
align-items: center;
}
.radio__form label{
    font-size: var(--font-size_P);
    padding-left: 4.5rem;
    position: relative;
    margin-right: 4rem;
    display: inline-flex;
    align-items: center;
}
.radio__form label::before{
    content: "";
    width: 2.8rem;
    height: 2.8rem;
    position: absolute;
    left: 0;
    display: block;
    border: 1px solid var(--main-Dark) ;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
label::after{
    content: "";
    width: 1.8rem;
    height: 1.8rem;
    background-color: var(--main-Green);
    position: absolute;
    left: 5px;
    display: block;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    opacity: 0;
}
.radio__form__btn:checked + label::after{
    opacity: 1;
}
.informaiton__form{
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
}
.information__label{
margin-bottom: 1.5rem;
}
.input__information{
    margin-bottom: 3rem;
    width: 55.6rem;
    height: 5.9rem;
    padding: 1.8rem;
    border-radius: 1.4rem;
    -webkit-border-radius: 1.4rem;
    -moz-border-radius: 1.4rem;
    -ms-border-radius: 1.4rem;
    -o-border-radius: 1.4rem;
    border: 1px solid var(--main-Dark);
}
.message__information{
    height: 19rem;
    padding-bottom: 14rem;
}
.btn__form{
    height: 6.8rem;
    background-color: var(--main-Dark);
    font-size: var(--font-size_H4);
    border: none;
    color: var(--main-Light);
    font-family: var(--SpaceGrotesk-Medium);
    border-radius: 1.4rem;
    -webkit-border-radius: 1.4rem;
    -moz-border-radius: 1.4rem;
    -ms-border-radius: 1.4rem;
    -o-border-radius: 1.4rem;
}
.form__right{
    position: relative;
}
.form__right img{
   position: absolute;
   display: block;
   right:-324px;
   top: 0;
   bottom: 0;
   margin:  auto 0;
}
 /*
 ================================
        Footer
=================================
 */

.footer{

}
.wrapper__footer{
    height: 51.4rem;
    background-color: var(--main-Dark);
    border-radius: 4.5rem 4.5rem 0 0;
    -webkit-border-radius: 4.5rem 4.5rem 0 0;
    -moz-border-radius: 4.5rem 4.5rem 0 0;
    -ms-border-radius: 4.5rem 4.5rem 0 0;
    -o-border-radius: 4.5rem 4.5rem 0 0;
    padding: 5.5rem 6rem;
}
.header__footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.header__footer::before{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--main-Light);
    border-radius: 3rem;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    -ms-border-radius: 3rem;
    -o-border-radius: 3rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 34.1rem;
    margin: 0 auto;
}
.header__footer__logo{

}
.header__footer__menu{
    display: flex;
    align-items: center;
    gap: 4rem;
}
.header__footer__item{

}
.header__footer__item__link{
    color: var(--main-Light);
    text-decoration: underline;
    font-size: var(--font-size_P);
}
.header__footer__sotial{
    display: flex;
    align-items: center;
    gap: 2rem;
}
.header__footer__sotial img{
    cursor: pointer;
}
.mian__footer{
    display: flex;
    margin-top: 7.7rem;
    justify-content: space-between;
}
.mian__footer__left{

}
.mian__footer__left h3{
    background-color: var(--main-Green);
    padding: .3rem;
    border-radius: .7rem;
    -webkit-border-radius: .7rem;
    -moz-border-radius: .7rem;
    -ms-border-radius: .7rem;
    -o-border-radius: .7rem;
    display: inline-block;
    font-size: var(--font-size_H4);
    font-family: var(--SpaceGrotesk-Medium);
    margin-bottom: 2.7rem;
}
.mian__footer__left p{
    margin-bottom: 2rem;
    color: var(--main-Light);
    font-size: var(--font-size_P);
    line-height: 2rem;
}
.mian__footer__right{

}
.mian__footer__right form{
    max-width:63.4rem;
    height: 18.4rem;
    background-color: #292A32;
    border-radius: 1.4rem;
    -webkit-border-radius: 1.4rem;
    -moz-border-radius: 1.4rem;
    -ms-border-radius: 1.4rem;
    -o-border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 0 4rem;
}
.input__Email{
    background-color: #292A32;
    height: 6.7rem;
    padding: 0 3.5rem;
    border: 2px solid var(--main-Light);
    border-radius: 1.4rem;
    -webkit-border-radius: 1.4rem;
    -moz-border-radius: 1.4rem;
    -ms-border-radius: 1.4rem;
    -o-border-radius: 1.4rem;
    color: var(--main-Light);
    font-size: var(--font-size_p);
    min-width: 24.9rem;
}
.input__Email::placeholder{
    color:var(--main-Light);
}
.input__Btn{
    height: 6.8rem;
    background-color: var(--main-Green);
    border-radius: 1.4rem;
    -webkit-border-radius: 1.4rem;
    -moz-border-radius: 1.4rem;
    -ms-border-radius: 1.4rem;
    -o-border-radius: 1.4rem;
     min-width: 24.9rem;
    border: none;
    font-family: var(--SpaceGrotesk-Regular);
    font-size: var(--font-size_H4);
}
.footer__footer{
    margin-top: 10rem;
    font-size: var(--font-size_P);
    color: var(--main-Light);
    display: flex;
    align-items: center;
    gap: 5rem;
}
.footer__footer span{
    text-decoration: underline;
}