/*banner*/

.banner{
    position: relative;
    background-color: var(--additional-color);
    height: 100vh;
}

.banner::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    /*background-image: url(../images/galexy.png);*/
    background-image: url(../images/galexy.webp);
    background-size: cover;
    background-repeat: no-repeat;
    right: 0;
    top: 0;
}



.banner-row{
    align-items: center;
    position: relative;
    height: 100%;
}

.main-banner{
    height: 87%;
    padding-top: 100px;
}

@media (min-width: 1500px) {
    .container.main-banner {
        max-width: 1089px;
    }
}


.banner-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.banner-content h5{
    font-family: var(--main-title-family);
    font-size: 33px;
    color: var(--text-white);
    margin-bottom: 31px;
    text-align: center;
}

.banner-content h1{
    font-family: var(--main-title-family);
    font-size: 45px;
    color: var(--text-white);
    margin-bottom: 31px;
    text-align: center;
}


.banner-btns{
    display: flex;
    align-items: center;
    gap: 10px;
}

.banner-text{
    margin-bottom: 30px;
    text-align: center;
}

.banner-text p{
    font-family: var(--text-family);
    font-size: 20px;
    line-height: 33px;
    color: var(--text-white);
    text-align: center;
}


.wal-robo{
    position: absolute;
    width: 345px;
    height: 345px;
    left: -32%;
    top: 22%;
    animation: smoothFly 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}


.wal-robo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}


@keyframes smoothFly {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}



/*banner*/


/*brands*/

.swiper-brands{
    padding-block: 20px;
}

.swiper-brands img {
    object-fit: contain;
    /*filter: grayscale(100%) brightness(500%) contrast(200%);*/
    width: 100px;
    height: 88px;
}

.swiper-brands .swiper-slide{
    display: flex;
    align-items: center;
    justify-content: center;
}


/*brands*/



/*about us*/


.aboutUs{
    padding-block: 110px 110px;
}


.whole-about{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.about-us-content{
    display: flex;
    justify-content: space-between;
}

.aboutUs-img a{
    width: 382px;
    height: 500px;
    display: block;
}

.aboutUs-img a img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.aboutUs-another-img a{
    width: 269px;
    height: 355px;
    display: block;
}

.aboutUs-another-img a img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}



.about-title span{
    color: var(--text-color);
    /* font-family: Inria Serif; */
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;

}

.about-title{
    margin-bottom: 65px;
    height: fit-content;
    display: flex;
    flex-direction: column;
}

.main-title span{
    /*color: var(--text-color);*/
    /*text-align: justify !important;*/
    /*!* font-family: Inria Serif !important; *!*/
    /*font-size: 15px !important;*/
    /*font-style: normal !important;*/
    /*font-weight: 300 !important;*/
    /*line-height: 32px !important;*/

}

.aboutUs-img img{
    border-radius: 1px;
}

.content-info span{
    color: var(--text-color);
    text-align: justify;

    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.content-info{
    margin: 5px 27px;
    max-width: 500px;
}

.aboutUs-info{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    padding-inline: 50px;
}

.title-info{
    margin-bottom: 55px;
}

.aboutUs-another-img{
    margin-top: 230px;
}



/*about us*/


/*portfolio*/

.single-project {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 23px;
    margin-bottom: 15px;
}

.single-project .website-link {
    width: 100%;
}

.single-project .website-link .single-project-item {
    width: 100%;
    height: 333px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    perspective: 2500px;
}

.single-project .website-link .single-project-item .item__wrapper {
    transition: all 0.5s;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.single-project .website-link .single-project-item .character {
    width: 100%;
    opacity: 1;
    transition: all 0.5s;
    position: absolute;
    z-index: -1;
}

.single-project .website-link .single-project-item:hover .item__wrapper {
    transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
    box-shadow: 2px 35px 32px -19px rgb(0 0 0 / 41%);
}

.single-project .website-link .single-project-item .item__wrapper::before, .single-project .website-link .single-project-item .item__wrapper::after {
    content: "";
    opacity: 0;
    width: 100%;
    height: 80px;
    transition: all 0.5s;
    position: absolute;
    left: 0;
}

.single-project .website-link .single-project-item .item__wrapper .item__wrapper-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    border-radius: 17px;
}

.single-project .website-link .single-project-item:hover .item__wrapper::after {
    height: 120px;
}

.single-project-item:hover .item__wrapper::before, .single-project-item:hover .item__wrapper::after {
    opacity: 1;
}

.single-project .website-link .single-project-item:hover .character {
    opacity: 1;
    transform: translate3d(0%, -30%, 100px);
}

.project-content{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-content p{
    font-size: var(--text-font);
    color: #23282c;
}

.project-name h5{
    font-family: 'kalame_bold';
    font-size: var(--main-text);
    margin-bottom: 0px;
    text-align: center;
    color: var(--text-color) !important;
}


.show-more-portfolio{
    justify-content: center;
    padding-top: 30px;
}



/*portfolio*/









/*logo portfolio*/

.logo-portfolio{
    padding-block: 0 120px;
}

.logo-portfolio .single-project .website-link .single-project-item {
    height: 274px;
}

.brands {
    margin-top: 15px;
    margin-bottom: 15px;
    perspective: 1000px;
}

.flip-box-inner, .flip-box-inner {
    width: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-box-inner ::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: hidden;
    opacity: -1;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-box-inner ::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: hidden;
    opacity: -1;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.brands-text {
    transition: 0.7s;
    position: absolute;
    top: 20px;
    left: 30px;
    visibility: hiden;
    opacity: 0;
}

.brands-text h2 {
    font-size: 35px;
    font-family: 'Montserrat-Bold';
}

span.arrow {
    font-size: 18px;
    display: flex;
    align-items: center;
}

.brands-text span.arrow {
    font-size: 15px !important;
    opacity: 2;
}

.brands:hover .flip-box-inner, .brands:hover .flip-box-inner {
    transform: rotateY(-15deg);
}

.brands:hover .brands-text {
    left: 0px;
    visibility: visible;
    opacity: 1.5;
}

.flip-box-inner a{
    display: block;
    width: 100%;
    height: 300px;
}

.flip-box-inner a img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*logo portfolio*/




/*text-satisfaction*/

.testimonials_component {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    background-color: var(--background-color--background-alternate);
    color: var(--text-color--text-alternate);
    border-radius: 2rem;
    grid-template-rows: auto;
    grid-template-columns: .8fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    overflow: hidden;
}

.image-5 {
    z-index: 0;
    opacity: .07;
    width: 94rem;
    max-width: none;
    position: absolute;
    inset: -5rem 0% auto -10%;
}

.div-block-23 {
    z-index: 2;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    flex-flow: column;
    flex: none;
    grid-template-rows: auto auto;
    grid-template-columns: .9fr;
    grid-auto-columns: 1fr;
    justify-content: center;
    place-items: flex-start start;
    height: 55rem;
    margin-right: 2rem;
    display: flex;
    position: relative;
}

.testimonials_component-124 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    background-color: var(--background-color--background-alternate);
    color: var(--text-color--text-alternate);
    border-radius: 2rem;
    grid-template-rows: auto;
    grid-template-columns: .8fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    overflow: hidden;
}

.div-block-28 {
    z-index: 2;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    flex-flow: column;
    display: flex;
    position: relative;
}

.div-block-24.is-fill {
    opacity: .3;
    height: 20rem;
}

.div-block-24 {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    background-color: #ffffff26;
    border: 1.5px solid #ffffff29;
    border-radius: 1rem;
    flex-flow: column;
    width: 23rem;
    padding: 1.5rem;
    display: flex;
}

.div-block-25 {
    grid-column-gap: .6rem;
    grid-row-gap: .6rem;
    justify-content: flex-start;
    align-items: center;
    display: flex;
}

.div-block-28 {
    z-index: 2;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1rem;
    flex-flow: column;
    display: flex;
    position: relative;
}

.container-large{
    padding-inline: 90px;
    background: var(--additional-color);
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    border-radius: 2rem;
    justify-content: space-between;
    align-items: center;
    max-width: 90rem;
    height: 51rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 3rem;
    display: flex;
    overflow: hidden;
    color: var(--white-color);
}


.testimonials_component img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.testimonials_component p{
    font-size: var(--text-font);
    color: var(--white-color);
    line-height: var(--line-height);
}

.text-block-5{
    color: var(--white-color);
    font-size: 14px;
}

.job-position{
    color: var(--white-color);
    font-size: 14px;
}


.satisfaction-content h4{
    font-family: 'kalame_bold';
    font-size: 31px;
    margin-bottom: 15px;
}




/*text-satisfaction*/




/*your-idea*/

.idea-items{
    padding: 0;
}

.show-detail{
    margin: 10px 0;
    margin-bottom: 60px;
}

.title-idea{
    margin-bottom: 10px;
}

.content-idea{
    margin-bottom: 10px;
}


.title-idea span{
    color: var(--text-color);
    /* font-family: Inter; */
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
}

.content-idea span{
    color: var(--text-color);
    text-align: justify;
    /* font-family: Inter; */
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 29px;
}

.each-item span{
    color: var(--text-color);
    /* font-family: Inter; */
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    font-family: 'kalame_bold';
}
.each-item a{
    text-decoration: none;
    display: flex;
    gap: 7px;
    align-items: center;
}

.each-item img{
    width: 34px;
    height: 34px;
    margin-right: 10px;
}




.btn:hover {
    color: #ffffff;
    text-decoration: none;
}

.round-circle{
    position: absolute;
    width: 423px;
    height: 377px;
    margin: auto;
    border-radius: 50%;
    /*border-top: 1px solid #FF5A24;*/
    /* border-color:linear-gradient(#00000000 0%, #FF5A24 100%, #00000000 0%) ; */
    transform: rotate(-90deg) translate(-33px);
}

.round{
    transform: rotate(90deg);
    position: relative;
    width: 100%;
    height: 100%;
}

/* .round::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

} */
.round:before {
    content: '';
    position: absolute;
    width: 498px;
    height: 516px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #FF5A24;
    z-index: -1;
    -webkit-mask-image: -webkit-gradient(linear,left top,right top,color-stop(80%,rgba(0,0,0,0)),to(rgba(0,0,0,1)));
    -webkit-mask-image: -webkit-linear-gradient(left,rgba(0,0,0,0) 80%,rgba(0,0,0,1));
    mask-image: -webkit-gradient(linear,left top,right top,color-stop(80%,rgba(0,0,0,0)),to(rgba(0,0,0,1)));
    mask-image: linear-gradient(to right,rgba(0,0,0,0) 80%,rgba(0,0,0,1));
    transform: rotate(178deg);
    top: -66px;
    left: -34%;
}
.photoFrame {
    position: relative;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 46px solid #04488500;
    /*background: var(--secondary-color);*/
    width: 38vw;
    height: 39vw;
    max-width: 425px;
    max-height: 425px;
    right: 49px;
    bottom: 27px;
    position: absolute;
    left: 0;
}

.goldTazhib {
    transform: rotate(70deg);
    transition: all 0.6s ease 0s;
    opacity: 1;
    position: absolute;
    /* width: -webkit-calc(100% + 94px); */
    width: -moz-calc(100% + 94px);
    width: 600px;
    height: 600px;
    height: -moz-calc(100% + 94px);
    top: -13%;
    right: -8%;
    /*background: #010101;*/
    /*background: -moz-linear-gradient(0deg, rgba(1, 1, 1, 1) 0%, rgba(1, 1, 1, 1) 70%, rgba(188, 137, 113, .7) 90%);*/
    /*background: -webkit-linear-gradient(0deg, rgba(1, 1, 1, 1) 0%, rgba(1, 1, 1, 1) 70%, rgba(188, 137, 113, .7) 90%);*/
    /*background: -webkit-gradient(linear, left bottom, left top, from(rgba(1, 1, 1, 1)), color-stop(70%, rgba(1, 1, 1, 1)), color-stop(90%, rgba(188, 137, 113, .7)));*/
    /*background: -webkit-linear-gradient(bottom, rgba(1, 1, 1, 1) 0%, rgba(1, 1, 1, 1) 70%, rgba(188, 137, 113, .7) 90%);*/
    /*background: -moz-linear-gradient(bottom, rgba(1, 1, 1, 1) 0%, rgba(1, 1, 1, 1) 70%, rgba(188, 137, 113, .7) 90%);*/
    /*background: -o-linear-gradient(bottom, rgba(1, 1, 1, 1) 0%, rgba(1, 1, 1, 1) 70%, rgba(188, 137, 113, .7) 90%);*/
    /*background: linear-gradient(270deg, rgb(31, 51, 85) 0%, var(--additional-color) 70%, var(--additional-color) 90%);*/
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#010101", endColorstr="#bc8971", GradientType=1);*/
    background: unset;
    /* z-index: -1; */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    /* opacity: 0; */
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    -o-transform: scale(0.85);
}


.gallery-idea{
    width: 395px;
    height: 395px;
    margin-left: 109px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.gallery-idea::before{
    /*-webkit-mask-image: -webkit-gradient(linear,left top,right top,color-stop(80%,rgba(0,0,0,0)),to(rgba(0,0,0,1)));*/
    /*-webkit-mask-image: -webkit-linear-gradient(right,rgba(0,0,0,0) 67%,rgb(0 0 0));*/
    /*content: '';*/
    /*position: absolute;*/
    /*width: 394px;*/
    /*height: 411px;*/
    /*-webkit-border-radius: 50%;*/
    /*-moz-border-radius: 50%;*/
    /*border-radius: 50%;*/
    /*border: 2px solid #f85b2d;*/
    /*float: right;*/
    /*transform: rotate(0deg);*/

}

.selector-tab{
    position: relative;
}

.selector-tab::before{
    -webkit-mask-image: -webkit-gradient(linear,left top,right top,color-stop(80%,rgba(0,0,0,0)),to(rgba(0,0,0,1)));
    -webkit-mask-image: -webkit-linear-gradient(right,rgba(0,0,0,0) 54%,rgb(0 0 0));
    content: '';
    position: absolute;
    width: 394px;
    height: 411px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #FF5A24;
    float: right;
    /*transform: rotate(0deg);*/
}

.item-inner:hover .nav-link{
    /*transform: rotate(0deg);*/
    /*transition: all 0.6s ease 0s;*/

    color: red !important;
}

.name-circle{
    position: absolute;
    bottom: -22%;
    background: transparent;
    padding: 11px 39px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0px -2px 4px 0px rgba(255, 90, 36, 0.31);
    border-radius: 4px;
    z-index: 5;
    left: 30%;
    border: 1px solid #ff5a24;
}


.image-services-circle{
    filter: drop-shadow(14px 11px 11px #000);
}
.name-circle h4{
    color: var(--text-color);
    font-weight: 500;
    text-wrap: nowrap;
    white-space: pre;
    font-size: var(--main-text);
}


.selector-tab {
    position: absolute;
    /* top: -15%; */
    /* left: -18%; */
    /*transform: translate(43px, -2px);*/
    transform: rotate(18deg);
    /*transition: all 0.6s ease 0s;*/
    position: absolute;
    width: -webkit-calc(100% + 94px);
    width: -moz-calc(100% + 94px);
    width: calc(100% + 94px);
    /* height: -webkit-calc(100% + 94px); */
    height: -moz-calc(100% + 94px);
    height: calc(100% + 94px);
    top: -47px;
    left: -47px;
    /* background: #010101; */
    /*background: -moz-linear-gradient(0deg,rgba(1,1,1,1) 0%,rgba(1,1,1,1) 70%,rgba(188,137,113,.7) 90%);*/
    /*!* background: -webkit-linear-gradient(0deg,rgba(1,1,1,1) 0%,rgba(1,1,1,1) 70%,rgba(188,137,113,.7) 90%); *!*/
    /*!* background: -webkit-gradient(linear,left bottom,left top,from(rgba(1,1,1,1)),color-stop(70%,rgba(1,1,1,1)),color-stop(90%,rgba(188,137,113,.7))); *!*/
    /*!* background: -webkit-linear-gradient(bottom,rgba(1,1,1,1) 0%,rgba(1,1,1,1) 70%,rgba(188,137,113,.7) 90%); *!*/
    /*background: -moz-linear-gradient(bottom,rgba(1,1,1,1) 0%,rgba(1,1,1,1) 70%,rgba(188,137,113,.7) 90%);*/
    /*background: -o-linear-gradient(bottom,rgba(1,1,1,1) 0%,rgba(1,1,1,1) 70%,rgba(188,137,113,.7) 90%);*/
    /*!* background: linear-gradient(0deg,rgba(1,1,1,1) 0%,rgba(1,1,1,1) 70%,rgba(188,137,113,.7) 90%); *!*/
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#010101",endColorstr="#bc8971",GradientType=1);*/
    /* z-index: -1; */
    /*-webkit-border-radius: 50%;*/
    /*-moz-border-radius: 50%;*/
    /*border-radius: 50%;*/
    /* opacity: 0; */
    /*-webkit-transform: scale(0.85);*/
    /*-moz-transform: scale(0.85);*/
    /*-ms-transform: scale(0.85);*/
    /*-o-transform: scale(0.85);*/
    /*transform: scale(0.85);*/
}


.selector-tab::after{
    content: '';
    position: absolute;
    background-image: url("../images/Group219.svg");
    background-repeat: no-repeat;
    background-position: 2px;
    width: 50px;
    height: 89px;
    left: -5%;
    /*transform: rotate(366deg);*/
    top: 37%;
}

.gallery-idea::after{
    /*content: '';*/
    /*position: absolute;*/
    /*background-image: url("../images/Group219.svg");*/
    /*background-repeat: no-repeat;*/
    /*background-position: 2px;*/
    /*width: 50px;*/
    /*height: 89px;*/
    /*left: -22%;*/
    /*transform: rotate(325deg);*/
}

.gallery-idea a{
    display: block;
}

.gallery-idea img{
    width: 100%;
    height: 100%;
}

.business-ideas{
    display: flex;
}

.business-idea-gallery{
    /*width: 50%;*/


    /*position: relative;*/
    /*display: flex;*/
    /*margin-top: 72px;*/


    position: relative;
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
}


.business-idea-content{
    /*width: 50%;*/
}

.round-item{
    transform: rotate(-90deg) translate(9rem) rotate(90deg);
    width: 100%;
    height: 100%;
    position: absolute;
}

.item-inner{
    position: absolute;
    top: 50%;
    left: -33%;
    /* transform: translate(-50%, -50%); */
    width:78px;
    height:78px;
    border-radius: 50%;
    background-color: #ffffff;
    cursor: pointer;
    /* transition: all 0.3s; */
    border: 1px solid #2c2f34;
    /* box-shadow: 0px 0px 16px rgba(255, 90, 36, 0.61); */

    display: flex;
    justify-content: space-around;
}


/*.item-inner:hover{*/
/*    box-shadow: 0px 0px 10px rgba(255, 90, 36, 0.61);*/
/*}*/
/*.item-inner.active{*/
/*    box-shadow: 0px 0px 10px rgba(255, 90, 36, 0.61);*/

/*}*/

.gallery-idea a img {
    -webkit-animation: float;
    -moz-animation: float;
    -o-animation: float;
    animation: float;
    -webkit-animation-duration: 5s;
    -moz-animation-duration: 5s;
    -o-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.gallery-idea a img {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    -o-transform: translateY(-8px);
    transform: translateY(-8px);
}

@keyframes float {
    0% {
        -webkit-transform: translateY(-8px);
        -moz-transform: translateY(-8px);
        -o-transform: translateY(-8px);
        transform: translateY(-8px);
    }
    50% {
        -webkit-transform: translateY(8px);
        -moz-transform: translateY(8px);
        -o-transform: translateY(8px);
        transform: translateY(8px);
    }
}




.item-inner-inner:hover:before, .item-inner-inner.active:before {
    opacity: .8;
}

.item-inner-inner:hover:after, .item-inner-inner.active:after {
    opacity: .35;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.item-inner-inner:before {
    content: '';
    position: absolute;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    top: 4px;
    left: 5px;
    border: 1px solid #bc8971;
    opacity: 0;
    -webkit-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;
}
.item-inner-inner:after {
    content: '';
    position: absolute;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 73px;
    height: 73px;
    top: 0px;
    left: 1px;
    border: 1px solid #bc8971;
    -webkit-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;
    opacity: 0;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
.item-inner-inner{
    width: 70px;
    height: 70px;
    border: 1px solid  #3d3d3d;
    border-radius: 50%;
    /* position: absolute;
    top: 50%;
    left: 50%; */
    display: flex;
    justify-content: space-around;
    align-self: center;
    align-items: center;
}

.item-inner-inner img{
    width: 45px;
    height: 45px;
}

.item-inner svg{
    /* transform: rotate(93deg); */
    align-self: center;
}

section.your-idea{
    margin-top: 100px;
}


/*your-idea*/



/*process*/

.design-process{
    position: relative;
    padding-block: 110px 38px;
    background: #fff;
    position: relative;
    z-index: 1;
}

.process-top-box{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
}

.each-process-box{
    width: 430px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border: 1px solid var(--additional-color);
    border-radius: 20px;
    height: 313px;
    position: relative;
    background: #fff;
}

/*.each-process-box::after{*/
/*    position: absolute;*/
/*    content: "";*/
/*    width: 2px;*/
/*    height: 62px;*/
/*    bottom: -62px;*/
/*    background-color: var(--additional-color);*/
/*    left: 50%;*/
/*}*/

/*.process-bottom-box .each-process-box::after{*/
/*    position: absolute;*/
/*    content: "";*/
/*    width: 2px;*/
/*    height: 62px;*/
/*    top: -62px;*/
/*    background-color: var(--additional-color);*/
/*    left: 50%;*/
/*}*/



.process-row{
    flex-direction: column;
    width: 100%;
    padding-block: 50px 0;
}


.process-icon{
    width: 70px;
    height: 70px;
    /*border-radius: 50%;*/
    /*background-color: #ffff;*/
    /*border: 2px solid var(--additional-color);*/
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(1);
    transition: .5s;
}



.process-icon svg{
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.process-icon-box{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-title{
    display: flex;
    align-items: center;
    gap: 7px;
}

.process-title h4{
    font-family: var(--main-title-family);
    font-size: 20px;
    color: var(--text-color);
}

.process-text p{
    line-height: var(--line-height);
    font-size: var(--text-font);
}


.process-number{
    position: absolute;
    font-family: 'Balonku';
    font-size: 100px;
    color: var(--text-color);
    z-index: -1;
    top: -90px;
    color: #cecece;
    transition: .5s;
}

.each-process-box{
    position: relative;
    height: 22.6rem;
    width: 400px;
    border-radius: 0.95rem;
    cursor: pointer;
    margin-bottom: 90px;
}





@media screen and (min-width: 768px){

    .each-process-box:hover .process-icon {

        filter: grayscale(0);
        transition: .5s;
    }

    .each-process-box:hover .process-number{
        color: var(--primary-color);
        transition: .5s;
    }

}




/*process*/

/*packages*/

.packages .wal-title h3{
    color: #fff;
}

.packages .main-title h2{
    color: #fff;
}


.packages{
    padding-block: 90px 120px;
    background: var(--additional-color);
}

.package-row{
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    position: relative;
    z-index: 1;
}


.each-pack{
    position: relative;
    background: linear-gradient(90deg, rgb(31 39 65 / 79%) 0%, rgb(22 31 49 / 82%) 35%, rgb(20 25 43) 100%);
    color: white;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    width: 250px;
    transition: transform 0.5s ease;
    border: 1px solid rgba(144, 157, 247, 0.58);
}

.each-pack .walvira-btn2{
    width: 100%;
}

.each-pack::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    filter: blur(7px);
    top: 0;
    right: 0;
    z-index: -1;
}

.each-pack.recommended-pack{
    width: 333px;
    box-shadow: 0 0 10px 1px #919ef9;
}

.pack-head{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(199, 199, 199, 0.44);
    margin-bottom: 20px;
}

.pack-name{
    text-align: center;
}

.pack-name span{
    font-size: 14px;
    line-height: var(--title-line-height);
    font-family: 'kalame_bold';
}

.recommended-pack .pack-name span{
    font-size: 21px;
}

.package-price{
    font-size: 23px;
    font-family: 'Samim-FD';
    font-weight: 600;
    display: flex;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 5px;
}

.package-price small{
    font-size: 71%;
}

.each-feature {
    text-align: center;
}

.last-pack .package-price{
    opacity: 0;
    /*display: none;*/
}

.package-features{
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding-bottom: 40px;
}

.each-feature span{
    font-size: var(--text-font);
}

.pack-button{
    display: flex;
    align-items: center;
    justify-content: center;
}

.pack-button a{
    color: #fff !important;
    border: 1px solid rgba(144, 157, 247, 0.58);
    padding: 10px 20px;
    width: 100%;
    text-align: center;
    border-radius: 25px;
}


@media screen and (min-width: 768px){

    .each-pack:hover{
        border: 1px solid var(--primary-color);
        box-shadow: 0 0 20px 2px var(--secondary);
        transition: .5s;
    }

}


.extra-light-box{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.extra-light{
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle at top center, rgba(159, 184, 240, 0.38), transparent 70%);
    z-index: 0;
    filter: blur(40px);
    border-radius: 40%;
}


/*services*/

.services{
    position: relative;
    padding-block: 0 20px;
}

.all-services{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    column-gap: 1rem;
    grid-row-start: 1;
    grid-column-start: 1;
    z-index: 1;
}

.each-service{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--additional-color);
    padding: 20px;
    width: 17vw;
    height: 20rem;
    border-radius: 6px;
    flex-shrink: 1;
    flex-grow: 0;
    transition: .7s;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;

}

.each-service::before{
    position: absolute;
    content: '';
    background-color: rgb(13 25 38 / 64%);
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 0;
}

.service-heading{
    position: relative;
}

.service-content{
    position: relative;
}



.each-service.active{
    flex-grow: 1;
    flex-shrink: 0;
    /*width: fit-content;*/
    transition: .7s;
}

.service-image{
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: -1;
    /*opacity: 0;*/
    transition: .6s;
    filter: grayscale(0);
}

.service-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.service-heading span{
    font-size: 14px;
    color: #fff;
}

.service-heading h3{
    font-size: var(--main-text);
    font-family: 'kalame_bold';
    line-height: var(--line-height);
    transition: .5s;
    color: #fff;
}

.service-content p{
    font-size: var(--text-font);
    line-height: var(--line-height);
    opacity: 0;
}

.each-service.active .service-heading h3{
    font-size: 25px;
    transition: .5s;
    color: #fff;
}

.each-service.active .service-image{
    opacity: 1;
    filter: grayscale(1);
}

.each-service.active .service-content p{
    opacity: 1;
    color: #fff;
    transition-delay: .6s;
}

.each-service.active .service-heading span {
    color: #fff;
}

/*services*/


/*faqs*/

.faqs_section{
    padding-block: 100px;
    position: relative;
}

.faq-image{
    width: 802px;
    height: 692px;
    position: absolute;
    left: -9%;
}

.faq-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.asked-questions{
    margin-top: 112px;
    margin-bottom: 45px;
}

.whole-accordion{
    display: flex;
    flex-direction: column;
}

.asked-title{
    position: relative;
    z-index: 2;
}

.asked-title img{
    position: absolute;
    z-index: -1;
    bottom: 24%;
    right: -37%;
}

.asked-title h2{
    font-family: LaleZar;
    font-size: 40px;
}
.asked-title span{
    position: absolute;
    bottom: -26%;
    left: -78px;
    color: #B3B3B3;
    text-align: right;
    font-size: 36px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 45px;
    font-family: LaleZar;
}


.asked-questions .row{
    justify-content: space-evenly;
}

.accordion-item-body-content span {
    font-size: 45px;
    font-family: 'Balonku';
    /*font-family: 'Baltimore';*/
    color: var(--extra-color2);
    width: 60px;

}


.accordion {
    width: 100%;
    max-width: 1185px;
    margin: 2rem auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.whole-accordion{
    position: relative;
    /*padding-top: 40px;*/
}

.accordion-item-body-content p {
    margin: 5px 19px;
    font-size: 15px;
}

.accordion-item {
    text-align: justify;
    font-style: normal;
    background: #fff;
    z-index: 2;
    border: unset;
    border-radius: 0;
    border-bottom: 1px solid #bbbbbb;
}

.accordion-item-header {
    padding: 0.3rem 0rem 0.3rem 4rem;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    color: var(--additional-color);
    text-align: justify;
    font-size: 15px;
    font-style: normal;
    line-height: 45px;
}


.accordion-item-header svg{
    margin-left: 8px;
    margin-right: 20px;
}

.accordion-item-header::after {
    content: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_169_54)"><path d="M10 1.63C14.62 1.63 18.37 5.38 18.37 10H20C20 4.48 15.52 0 10 0V1.63ZM1.63 10C1.63 5.38 5.38 1.63 10 1.63V0C4.48 0 0 4.48 0 10H1.63ZM10 18.37C5.38 18.37 1.63 14.62 1.63 10H0C0 15.52 4.48 20 10 20V18.37ZM18.37 10C18.37 14.62 14.62 18.37 10 18.37V20C15.52 20 20 15.52 20 10H18.37ZM10.61 12.13L7.17 8.3L5.96 9.39L9.4 13.22L10.61 12.13ZM12.84 8.3L9.4 12.13L10.61 13.22L14.05 9.39L12.84 8.3ZM7.17 8.3C6.87 7.96 6.35 7.94 6.02 8.24C5.68 8.54 5.66 9.06 5.96 9.39L7.17 8.3ZM10.01 12.67L9.4 13.22C9.55 13.39 9.78 13.49 10.01 13.49C10.24 13.49 10.46 13.39 10.62 13.22L10.01 12.67ZM14.06 9.39C14.36 9.05 14.33 8.54 14 8.24C13.66 7.94 13.15 7.97 12.85 8.3L14.06 9.39Z" fill="gray"/></g><defs><clipPath id="clip0_169_54"><rect width="20" height="20" fill="white"/></clipPath></defs></svg>');
    font-size: 1.8rem;
    position: absolute;
    left: 1.7rem;
    font-weight: 500;
    color: var(--primary-color);
}

.question-span{
    padding-right: 1.2rem;
    font-weight: 600;
}

.accordion-item-header.active::after {
    content: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_169_57)"><path d="M10 18.37C5.38 18.37 1.63 14.62 1.63 10H0C0 15.52 4.48 20 10 20V18.37ZM18.37 10C18.37 14.62 14.62 18.37 10 18.37V20C15.52 20 20 15.52 20 10H18.37ZM10 1.63C14.62 1.63 18.37 5.38 18.37 10H20C20 4.48 15.52 0 10 0V1.63ZM1.63 10C1.63 5.38 5.38 1.63 10 1.63V0C4.48 0 0 4.48 0 10H1.63ZM9.39 7.87L12.83 11.7L14.04 10.61L10.6 6.78L9.39 7.87ZM7.16 11.7L10.6 7.87L9.39 6.78L5.95 10.61L7.16 11.7ZM12.83 11.7C13.13 12.04 13.65 12.06 13.98 11.76C14.32 11.46 14.34 10.94 14.04 10.61L12.83 11.7ZM9.99 7.33L10.6 6.78C10.45 6.61 10.22 6.51 9.99 6.51C9.76 6.51 9.54 6.61 9.38 6.78L9.99 7.33ZM5.94 10.61C5.64 10.95 5.67 11.46 6 11.76C6.34 12.06 6.85 12.03 7.15 11.7L5.94 10.61Z" fill="gray"/></g><defs><clipPath id="clip0_169_57"><rect width="20" height="20" fill="white"/></clipPath></defs></svg>');
}

.accordion-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.accordion-item-body-content {
    padding: 0;
    border-top: unset;
    border-image: unset;
    display: flex;
    flex-direction: row;
    color: #000;
    text-align: justify;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    gap: 10px;
    align-items: center;
}

.accordion-item-body-content p{
    margin: 5px 19px;
    font-size: 15px;
}

/*faqs*/



/*why us*/

.why-us{
    padding-block: 100px;
    background-color: var(--additional-color);
}

.why-us .wal-title h3{
    color: #fff;
}

.why-us .main-title h2{
    color: #fff;
}


.slides-template {
    padding-top: 0rem;
    justify-items: center;
    margin-bottom: 10px;
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 1fr;
    margin-inline: auto;
    grid-gap: 15px;
}

.slides-left, .slides-right {
    width: 100%;
    height: 100%;
}

.slides-left{
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-gap: 20px;
}


.slides-right{
    display: grid;
    grid-template-rows: 1fr 1fr;
    height: 100%;
    grid-gap: 15px;
}

.slides-template .slides-right .each-row-slide {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    height: 100%;
    grid-gap: 15px;
}

.each-row-slide:first-child a:first-child {
    background-position: right !important;
}
.each-row-slide:first-child a:last-child {
    background-position: left !important;
}
.slides-template .slides-right .each-row-slide:last-child {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 15px;
}


.grid-layout-top .each-row-slide{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    height: 50%;
    grid-gap: 15px;
}

.whole-grid-layout{
    display: grid;
    grid-gap: 15px;
}




.each-reason{
    background: #ffff;
    box-shadow: 0 0 15px 0px #e7e7e7;
    border-radius: 13px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;

    position: relative;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 var(--card-box-shadow-1-y, 3px) var(--card-box-shadow-1-blur, 6px) var(--card-box-shadow-1, rgba(0, 0, 0, 0.05)), 0 var(--card-box-shadow-2-y, 8px) var(--card-box-shadow-2-blur, 15px) var(--card-box-shadow-2, rgba(0, 0, 0, 0.1));
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}


.each-reason::before, .each-reason::after {
    border-radius: inherit;
    content: "";
    height: 100%;
    left: 0px;
    opacity: 0.2;
    position: absolute;
    top: 0px;
    transition: opacity 500ms;
    width: 100%;
}


.each-reason::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.06), transparent 40%);
    z-index: 3;
}

.each-reason::after {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.4), transparent 40%);
    z-index: 1;
}


.reason-light{
    position: absolute;
    top: -74px;
    left: -21px;
    width: 78%;
    height: 69%;
    background: radial-gradient(circle at top left, rgb(255 0 128 / 17%), transparent 70%);
    z-index: 0;
    filter: blur(40px);
}

.reason-light1{
    position: absolute;
    bottom: -279px;
    right: -160px;
    width: 101%;
    height: 109%;
    background: radial-gradient(circle at top left, rgb(255 0 128 / 17%), transparent 70%);
    z-index: 0;
    filter: blur(40px);
}

.reason-light2{
    position: absolute;
    bottom: -279px;
    right: -6px;
    width: 101%;
    height: 109%;
    background: radial-gradient(circle at top left, rgb(255 0 128 / 17%), transparent 70%);
    z-index: 0;
    filter: blur(40px);
}



.reason-text h5{
    font-family: 'kalame_bold';
    font-size: var(--main-text);
    line-height: var(--line-height);
    color: #ffff;
}

.reason-text p{
    font-size: var(--text-font);
    line-height: var(--line-height);
    color: #ffff;
}

.reason-icon{
    width: 70px;
    height: 70px;
    filter: grayscale(1);
    transition: .4s;
}

.reason-icon svg{
    width: 100%;
    height: 100%;
}


@media screen and (min-width: 768px){

    .each-reason:hover::before {
        opacity: 1;
    }

    .each-reason:hover {
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow:
            0 var(--card-hover-box-shadow-1-y, 5px) var(--card-hover-box-shadow-1-blur, 10px) var(--card-hover-box-shadow-1, rgba(0, 0, 0, 0.04)),
            0 var(--card-hover-box-shadow-2-y, 15px) var(--card-hover-box-shadow-2-blur, 25px) var(--card-hover-box-shadow-2, rgba(0, 0, 0, 0.3));
    }

    .each-reason:hover .reason-icon{
        filter: grayscale(0);
        transition: .4s;
    }

}




/*why us*/

/*comments*/




.each-comment{
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.each-comment {
    display: none;
}


.each-comment.visible {
    display: block;
}




.client-comment{
    display: flex;
    gap: 10px;
    width: 100%;
    flex-direction: row;
}

.comment-content p{
    margin-bottom: 0;
}

.show-box{
    display: flex;
    align-items: center;
    justify-content: center;
}

.more-questions{
    color: var(--primary-color);
    font-size: 15px;
    text-decoration: underline;
    cursor: pointer;
}


.show-more-btn{
    cursor: pointer;
}

.comment-head{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.comment-info{
    display: flex;
    align-items: center;
    gap: 9px;
}

.comment-avatar{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.comment-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.client-name span{
    font-family: 'kalame_bold';
}

.comment-content{
    padding-right: 0px;
    display: flex;
    align-items: center;
}


.comment-answer{
    margin-right: 20px;
}

.comment-date{
    font-size: 14px;
}

.walvira-avatar{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.walvira-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.comment-answer{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
}

.comments{
    padding-block: 90px;
}

.all-comments{
    width: 100%;
}

.aside {
    /* max-width: 306px; */
    width: 430px;
    z-index: 3;
}

.posFix {
    position: fixed;
    top: 80px;
    width: 430px !important;
}

.posAbs {
    position: absolute;
    bottom: -57px;
    width: 430px !important;
}







.new-title h6{
    font-family: "danstevis";
    font-size: 20px;
    text-align: center;
}

.new-title p{
    font-size: 15px;
    text-align: center;
    font-family: "danstevis";
}

.add-new-button{
    display: flex;
    align-content: center;
    justify-content: center;
}

.accordion {
    width: 100%;
    max-width: 1185px;
    margin: 2rem auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.whole-accordion{
    position: relative;
    /*padding-top: 40px;*/
}

.accordion-item-body-content p {
    margin: 5px 19px;
    font-size: 15px;
}

.accordion-item {
    text-align: justify;
    font-style: normal;
    background: unset;
    z-index: 2;
    border: unset;
    border-radius: 0;
    border-bottom: 1px solid #bbbbbb;
}

.accordion-item-header1 {
    padding: 0.3rem 0rem 0.3rem 4rem;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    color: var(--additional-color);
    text-align: justify;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 45px;
}


.accordion-item-header1 svg{
    margin-left: 8px;
    margin-right: 20px;
}

.accordion-item-header1::after {
    content: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_169_54)"><path d="M10 1.63C14.62 1.63 18.37 5.38 18.37 10H20C20 4.48 15.52 0 10 0V1.63ZM1.63 10C1.63 5.38 5.38 1.63 10 1.63V0C4.48 0 0 4.48 0 10H1.63ZM10 18.37C5.38 18.37 1.63 14.62 1.63 10H0C0 15.52 4.48 20 10 20V18.37ZM18.37 10C18.37 14.62 14.62 18.37 10 18.37V20C15.52 20 20 15.52 20 10H18.37ZM10.61 12.13L7.17 8.3L5.96 9.39L9.4 13.22L10.61 12.13ZM12.84 8.3L9.4 12.13L10.61 13.22L14.05 9.39L12.84 8.3ZM7.17 8.3C6.87 7.96 6.35 7.94 6.02 8.24C5.68 8.54 5.66 9.06 5.96 9.39L7.17 8.3ZM10.01 12.67L9.4 13.22C9.55 13.39 9.78 13.49 10.01 13.49C10.24 13.49 10.46 13.39 10.62 13.22L10.01 12.67ZM14.06 9.39C14.36 9.05 14.33 8.54 14 8.24C13.66 7.94 13.15 7.97 12.85 8.3L14.06 9.39Z" fill="gray"/></g><defs><clipPath id="clip0_169_54"><rect width="20" height="20" fill="white"/></clipPath></defs></svg>');
    font-size: 1.8rem;
    position: absolute;
    left: 1.7rem;
    font-weight: 500;
    color: var(--primary-color);
}

.question-span{
    padding-right: 1.2rem;
    font-weight: 600;
}

.accordion-item-header1.active::after {
    content: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_169_57)"><path d="M10 18.37C5.38 18.37 1.63 14.62 1.63 10H0C0 15.52 4.48 20 10 20V18.37ZM18.37 10C18.37 14.62 14.62 18.37 10 18.37V20C15.52 20 20 15.52 20 10H18.37ZM10 1.63C14.62 1.63 18.37 5.38 18.37 10H20C20 4.48 15.52 0 10 0V1.63ZM1.63 10C1.63 5.38 5.38 1.63 10 1.63V0C4.48 0 0 4.48 0 10H1.63ZM9.39 7.87L12.83 11.7L14.04 10.61L10.6 6.78L9.39 7.87ZM7.16 11.7L10.6 7.87L9.39 6.78L5.95 10.61L7.16 11.7ZM12.83 11.7C13.13 12.04 13.65 12.06 13.98 11.76C14.32 11.46 14.34 10.94 14.04 10.61L12.83 11.7ZM9.99 7.33L10.6 6.78C10.45 6.61 10.22 6.51 9.99 6.51C9.76 6.51 9.54 6.61 9.38 6.78L9.99 7.33ZM5.94 10.61C5.64 10.95 5.67 11.46 6 11.76C6.34 12.06 6.85 12.03 7.15 11.7L5.94 10.61Z" fill="gray"/></g><defs><clipPath id="clip0_169_57"><rect width="20" height="20" fill="white"/></clipPath></defs></svg>');
}

.accordion-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.accordion-item-body-content {
    padding: 0;
    border-top: unset;
    border-image: unset;
    display: flex;
    flex-direction: row;
    color: #000;
    text-align: justify;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    gap: 10px;
    align-items: center;
}

.accordion-item-body-content p{
    margin: 5px 19px;
    font-size: 14px;;
}

.client-name span {
    font-size: 14px;
}

/*comments*/






/*packages*/

.btn-1:hover {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgb(255, 120, 80);
        filter: unset;
    }
    70% {
        box-shadow: 0 0 0 15px rgba(3, 168, 124, 0);
        filter: drop-shadow(0 0 0.6rem #f85b2d);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(3, 168, 124, 0);
        filter: unset;

    }
}


/*blog hover*/

#cards:hover > .blog-card::after {
    opacity: 1;
}

.blog-card {
    position: relative;
}

.blog-card:hover::before {
    opacity: 1;
}

.blog-card::before,
.blog-card::after {
    border-radius: inherit;
    content: "";
    height: 100%;
    left: 0px;
    opacity: 0.2;
    position: absolute;
    top: 0px;
    transition: opacity 500ms;
    width: 100%;
}

.blog-card::before {
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y),
        rgba(255, 255, 255, 0.06),
        transparent 40%
    );
    z-index: 3;
}

.blog-card::after {
    background: radial-gradient(
        600px circle at var(--mouse-x) var(--mouse-y),
        rgba(255, 255, 255, 0.4),
        transparent 40%
    );
    z-index: 1;
}








/*video section*/

.video-section{
    padding-block: 40px 100px;
}

.walvira-video{
    width: 773px;
    /*height: 650px;*/
}

.video-row{
    align-items: center;
    justify-content: center;
}

.video-title{
    font-size: 32px;
    text-align: center;
}

.whole-video{
    border: 4px solid #1c1c1c;
    padding: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url("../images/video-back.png");
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: -1px 8px 10px #cbcbcb;
}

.romeo .romeo-embed-main-frame {
    background-position: top right;
    background-size: contain;
    right: 0;
}

.h_iframe-aparat_embed_frame iframe {
    border-radius: 11px;
}

.video-row{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 23px;
}

.video-title{
    margin-bottom: 20px;
}

.video-title h3{
    font-size: 30px;
    font-family: 'kalame_bold';
    text-align: center;
    margin-bottom: 3px;
}

.video-title span{
    font-size: 16px;
    text-align: center;
}

.video-text{
    width: 773px;
    text-align: center;
}

.video-text p{
    text-align: center;
    font-size: var(--text-font);
    line-height: var(--line-height);
}

/*video section*/


/*modal form*/


.modalbox-form{
    position: fixed;
    inset: 0;
    max-width: 555px;
    height: max-content;
    max-height: 500px;
    display: none;
    z-index: 1100;
    margin: auto;
    border-radius: 20px;
    background-color: #fff;
    width: 100%;
    box-shadow: 0px -1px 42px 0px #0000001A;
    padding: 23px;
}

.modalbox-form.show{
    display: flex !important;
    background-repeat: no-repeat;
    width: 100%;
    flex-direction: column;
}

.my-modal-close {
    padding: 10px;
    text-align: right;
    width: max-content;
}

.modal-title{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.modal-title h6{
    font-family: "danstevis";
    font-size: 20px;
    text-align: center;
}

.modal-title p{
    font-size: 15px;
    text-align: center;
    font-family: "danstevis";
}

.my-modal-body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.modal-input{
    margin-bottom: 1rem !important;
    display: flex;
    justify-content: space-evenly;
}

.modal-input input, .modal-input textarea {
    border-radius: 31px !important;
    padding: 17px 17px !important;
    font-size: 15px !important;
    border: unset !important;
    width: 94% !important;
    border: 1px solid var(--text-color) !important;
}

.modal-input input::placeholder, .modal-input textarea::placeholder{
    font-size: 12px;
    color: #777777;
}


.button-form{
    display: flex;
    align-items: center;
    justify-content: center;
}





/*modal form*/












@media (max-width: 1000px) {
    body {
        align-items: flex-start;
        overflow: auto;
    }

    .blog-card {
        flex-shrink: 1;
        /*width: calc(50% - 4px);*/
    }
}

@media (max-width: 500px) {
    /*.blog-card {*/
    /*    height: 180px;*/
    /*}*/

}

@media (max-width: 320px) {
    .blog-card {
        width: 100%;
    }
}

/*blog hover*/








/*responsive*/
/*responsive*/
/*responsive*/
/*responsive*/
/*responsive*/

@media screen and (max-width: 1600px){
    .container.main-banner {
        max-width: 891px;
    }

    .each-pack {
        width: 203px;
    }

    .each-feature svg{
        width: 20px;
        height: 20px;
    }

    .package-features {
        gap: 12px;
    }

    .each-pack.recommended-pack {
        width: 255px;
    }

    .package-price {
        font-size: 17px;
    }

    .pack-name span {
        font-size: 18px;
    }

    .each-feature span {
        font-size: var(--text-mobile-font);
    }

    .pack-button a {
        font-size: 14px;
    }

    .faq-image {
        width: 709px;
        height: 599px;
        left: -16%;
    }
}

@media screen and (max-width: 1500px){

    .slides-template {
        grid-template-columns: 1fr;
    }

    .slides-left {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 2fr;
    }

    .container.main-banner {
        max-width: 821px;
    }

    .wal-robo {
        width: 288px;
        height: 288px;
    }

    .main-banner {
        height: 85%;
        padding-top: 150px;
    }


}

@media screen and (max-width: 1399px){

    .aside {
        /* max-width: 306px; */
        width: 370px;
        z-index: 3;
    }

    .posFix {
        position: fixed;
        top: 80px;
        width: 370px !important;
    }

    .posAbs {
        position: absolute;
        bottom: -57px;
        width: 370px !important;
    }

    .faq-image {
        width: 617px;
        height: 489px;
        left: -16%;
    }

    .banner-content h5 {
        font-size: 30px;
        margin-bottom: 31px;
    }

    .banner-content h1 {
        font-size: 41px;
        margin-bottom: 26px;
    }

    .banner-text p {
        font-size: 18px;
        text-align: center;
    }

    .each-process-box {
        height: 24.6rem;
    }

}

@media screen and (max-width: 1199px){

    .aside {
        width: 290px;
    }

    .posFix {
        width: 290px !important;
    }

    .posAbs {
        width: 290px !important;
    }

    .pack-name{
        text-align: center;
    }

    .grid-layout-top .each-row-slide {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }

    .slides-template .slides-right .each-row-slide {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }

    .slides-template .slides-right .each-row-slide:last-child {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }

    .slides-left {
        grid-template-columns: 1fr 1fr;
    }

    .faq-image {
        width: 278px;
        height: 230px;
        left: -16%;
        top: 32px;
    }

    .each-pack {
        width: 500px;
    }
    .each-pack.recommended-pack {
        width: 500px;
    }

    .all-services {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .each-service{
        margin-bottom: 25px;
        width: 49%;
    }

    .each-service.active {
        width: 49%;
        flex-shrink: 1;
        flex-grow: 0;
    }

    .each-service .service-image {
        opacity: 1;
    }

    .each-service .service-heading h3 {
        font-size: 25px;
        color: #fff;
    }

    .each-service .service-heading span {
        color: #fff;
    }

    .each-service .service-content p {
        opacity: 1;
        color: #fff;
    }




    .container.main-banner {
        max-width: 700px;
    }

    .wal-robo {
        width: 257px;
        height: 193px;
        left: -27%;
        top: 7%;
    }

    .banner-content h5 {
        font-size: 27px;
        margin-bottom: 19px;
    }

    .banner-content h1 {
        font-size: 35px;
        margin-bottom: 19px;
    }

    .banner-text p {
        font-size: 16px;
    }

    .banner-text {
        margin-bottom: 8px;
    }
    .each-process-box {
        height: 29.6rem;
    }

    .aboutUs-another-img {
        margin-top: 0;
    }

    .aboutUs {
        padding-block: 30px 70px;
    }

    .container-large{
        flex-direction: column;
        padding-top: 40px;
        padding-bottom: 30px;
        padding-inline: 80px;
    }

    .container-large {
        height: fit-content;
    }

    .div-block-24.is-fill {
        display: none;
    }

}

@media screen and (max-width: 991px){


    .aside {
        width: 100%;
    }

    .new-questions{
        margin-top: 40px;
    }

    .video-text {
        width: 500px;
    }

    .walvira-video {
        width: 500px;
    }

    .title-info{
        display: none;
    }

    .satisfaction-content h2{
        font-size: 24px;
        text-align: center;
    }

    .satisfaction-content p{
        font-size: 18px;
        text-align: center;
    }

    .accordion-item-body-content p {
        width: 89%;
    }

    .round-round-date span {
        font-size: 15px;
    }

    .round-round-date {
        width: 75px;
        height: 75px;
    }

    .round-date {
        width: 77px;
        height: 77px;
        top: 165px;
    }

    .blog-whole-contet {
        margin-top: 28px;
    }

    .blog-card {
        height: 475px;
    }

    .blog-img {
        height: 186px;
    }


    .logo-portfolio {
        padding-block: 9px 60px;
    }

    .satisfaction-content h4 {
        font-size: 24px;
    }


    .aboutUs-img a {
        width: 305px;
        height: 378px;
    }

    .aboutUs {
        padding-block: 20px 60px;
    }

    .testimonials_component {
        grid-column-gap: 2rem;
        grid-row-gap: 1rem;
        border-radius: 0;
        flex-flow: column;
        justify-content: center;
        align-items: flex-start;
    }

    .container-large {
        flex-direction: column;
        padding-block: 33px;
        height: fit-content;
        padding-inline: 70px;
    }

    .testimonials_component-124 {
        border-radius: 0;
        flex-flow: column;
    }

    .div-block-24.is-fill {
        display: none;
    }

    .div-block-24 {
        width: auto;
    }

    .single-project .website-link .single-project-item {
        height: 275px;
    }

    .faqs_section {
        padding-block: 60px;
    }

    .wal-robo {
        width: 257px;
        height: 193px;
        left: -12%;
        top: unset;
        bottom: 7%;
    }

    .banner-row {
        align-items: flex-start;
    }

    .main-banner {
        padding-top: 221px;
    }

    .process-top-box {
        flex-wrap: wrap;
        margin-bottom: 30px;
    }

    .each-process-box {
        height: fit-content;
        margin-bottom: 30px;
        width: 100%;
    }

    .design-process {
        padding-block: 65px 0;
    }

    .each-service.active {
        width: 48%;
    }

    .each-service {
        width: 48%;
    }

    .services {
        padding-block: 65px;
    }

    .text-satisfaction .container{
        width: 100%;
        max-width: 100%;
    }

    .blog-title h4 {
        font-size: 16px;
        height: 55px;
        line-height: var(--line-height);
    }

    .blog-content{
        font-size: 13px;
    }

    .read_more {
        font-size: 15px;
    }

}

@media screen and (max-width: 767px){

    .video-text {
        width: 300px;
    }
    .whole-video {
        border: 2px solid #1c1c1c;
    }
    .video-text p {
        font-size: var(--mobile-text-font);
    }

    .walvira-video {
        width: 300px;
    }

    .whole-video {
        padding: 40px 20px;
    }

    .video-title h3 {
        font-size: 22px;
        margin-bottom: 0px;
    }
    .video-title {
        margin-bottom: 11px;
        text-align: center;
    }

    .video-title span {
        font-size: 15px;
    }



    .satisfaction-content h2 {
        font-size: 18px;
    }

    .satisfaction-content p {
        font-size: 15px;
    }

    .extra-seo-section h1 {
        font-size: 21px;
    }

    .testimonials_component p {
        font-size: var(--mobile-text-font);
    }

    .project-name h5 {
        font-size: 16px;
    }

    .single-project {
        gap: 8px;
        margin-bottom: 45px;
    }

    .single-project .website-link .single-project-item .item__wrapper {
         transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
        box-shadow: 2px 35px 32px -19px rgb(0 0 0 / 41%);
    }

    .single-project .website-link .single-project-item .character {
        opacity: 1;
        transform: translate3d(0%, -30%, 100px);
    }

    .single-project .website-link .single-project-item {
        height: 293px;
        width: 79%;
    }

    .single-project .website-link {
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .accordion-item-body-content p {
        font-size: 13px;
        line-height: var(--line-height);
    }

    .reason-text h5 {
        font-size: 17px;
    }

    .reason-text p {
        font-size: var(--mobile-text-font);
    }

    .process-text p {
        line-height: var(--line-height);
        font-size: var(--mobile-text-font);
    }

    .service-content p {
        font-size: var(--mobile-text-font);
    }


    .each-service .service-heading h3 {
        font-size: 15px;
    }

    .each-service.active .service-heading h3 {
        font-size: 19px;
    }

    .grid-layout-top .each-row-slide {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .slides-template .slides-right .each-row-slide {
        grid-template-columns: 1fr;
    }

    .slides-template .slides-right .each-row-slide:last-child {
        grid-template-columns: 1fr;
    }

    .slides-left {
        grid-template-columns: 1fr;
    }

    .accordion-item-header {
        font-size: 12px;
    }

    .faq-image {
        display: none;
    }

    .main-banner {
        padding-top: 178px;
    }

    .wal-robo {
        width: 203px;
        height: 165px;
        left: 31%;
        top: unset;
        bottom: 0%;
    }

    .banner-content h5 {
        font-size: 25px;
        margin-bottom: 19px;
    }

    .banner-content h1 {
        font-size: 30px;
        margin-bottom: 15px;
    }

    .banner-text p {
        font-size: 15px;
    }
}

@media screen and (max-width: 575px){

    .modal-input input, .modal-input textarea {
        padding: 12px 17px !important;
        font-size: 13px;
    }

    .modalbox-form {
        padding: 15px;
    }

    .reason-head{
        display: flex;
        align-items: center;
    }


    .satisfaction-content h2 {
        font-size: 15px;
    }

    .satisfaction-content p {
        font-size: 13px;
    }

    .read_more {
        font-size: 13px;
    }

    .blog-title h4 {
        font-size: 14px;
        width: 99%;
    }

    .comment-date {
        font-size: 12px;
    }

    .text-block-5 {
        font-size: var(--mobile-text-font);
    }

    .job-position {
        color: var(--white-color);
        font-size: var(--mobile-text-font);
    }

    .process-row {
        padding-block: 19px 0;
    }

    .container.main-banner {
        padding-bottom: 67px;
    }

    .banner {
        height: auto;
    }

    .project-name h5 {
        font-size: 14px;
    }

    .banner-content h1 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .banner-content h5 {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .banner-text p {
        font-size: 14px;
    }

    .wal-title {
        gap: 0px;
    }

    .packages {
        padding-block: 50px 60px;
    }

    .services {
        padding-block: 30px 0;
    }

    .question-span {
        padding-right: 0.5rem;
    }

    .design-process {
        padding-block: 28px 0;
    }

    .why-us {
        padding-block: 50px;
    }

    .accordion-item-header {
        font-size: var(--mobile-text-font);
        line-height: 28px;
    }

    .extra-seo-section h1 {
        font-size: 19px;
    }


    .aboutUs {
        padding-block: 20px 0px;
    }

    .comments {
        padding-block: 62px 60px;
    }

    .show-more-portfolio {
        font-size: 12px;
        line-height: 25px;
    }

    .show-box {
        margin-top: 15px;
    }



    .accordion-item-body-content p {
        font-size: var(--mobile-text-font);
        line-height: 26px;
    }

    .accordion-item-header1 {
        font-size: var(--mobile-text-font);
        line-height: 29px;
    }

    .comment-avatar {
        width: 40px;
        height: 40px;
    }

    .walvira-avatar {
        width: 40px;
        height: 40px;
    }

    .comment-content p{
        margin-bottom: 0;
        line-height: 22px;
    }

    .process-top-box {
        margin-bottom: 30px;
    }

    .process-number {
        font-size: 68px;
        top: -65px;
    }

    .process-icon {
        width: 48px;
        height: 48px;
    }

    .process-title h4 {
        font-size: 17px;
        margin-bottom: 0;
    }

    .each-process-box {
        margin-bottom: 10px;
    }

    .process-text p {
        margin-bottom: 0;
    }

    .wal-robo {
        display: none;
    }

    .satisfaction-content h4 {
        font-size: 18px;
        margin-bottom: 7px;
    }

    .container-large {
        padding-inline: 15px;
    }


    .aboutUs-info {
        padding-inline: 0;
    }


    .accordion-item-header::after {
        left: 0;
    }

    .accordion-item-header {
        padding: 0.3rem 0rem 0.3rem 1.6rem;
    }

    .accordion {
        margin: 0rem auto;
    }



    .each-pack {
        width: 500px;
    }
    .each-pack.recommended-pack {
        width: 500px;
    }

    .navbar-toggler{
        padding: 0;
    }

    .each-service.active {
        width: 100%;
    }

    .each-service {
        width: 100%;
    }


}

@media screen and (max-width: 500px){

    .logo-portfolio .single-project .website-link .single-project-item {
        height: 190px;
        width: 72%;
    }

    .single-project .website-link .single-project-item {
        height: 216px;
        width: 66%;
    }



}

@media screen and (max-width: 425px){


    .video-title h3 {
        font-size: 18px;
    }

    .logo-portfolio .single-project .website-link .single-project-item {
        height: 209px;
        width: 83%;
    }

    .single-project .website-link .single-project-item {
        height: 229px;
        width: 83%;
    }

    .video-title span {
        font-size: 15px;
        line-height: 25px;
        height: fit-content;
        display: block;
    }

    .video-title h3 {
        margin-bottom: 17px;
    }
}

@media screen and (max-width: 375px){

    .walvira-video {
        width: 249px;
    }



    .video-text {
        width: 100%;
    }

    .walvira-avatar {
        width: 35px;
        height: 35px;
    }

    .comment-answer {
        margin-right: 10px;
    }

    .accordion-item-body-content p {
        width: 74%;
    }

    .banner-btns {
        flex-direction: column;
    }

    .logo-portfolio .single-project .website-link .single-project-item {
        height: 177px;
        width: 78%;
    }

    .single-project .website-link .single-project-item {
        height: 177px;
        width: 78%;
    }
}

@media screen and (max-width: 320px){

    .logo-portfolio .single-project .website-link .single-project-item {
        height: 160px;
        width: 100%;
    }

    .single-project .website-link .single-project-item {
        height: 160px;
        width: 100%;
    }

}


/*responsive*/
/*responsive*/
/*responsive*/
/*responsive*/
/*responsive*/