.bottom-img {
    max-width: none;
    max-height: 900px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -130px;
}

.arabic .bottom-img {
    max-height: 830px;
}

@media(max-width: 1260px) {
    .bottom-img {
        max-height: 800px;
        margin-top: -90px;
    }
}

@media(max-width: 991px) {
    .bottom-img {
        max-height: 600px;
        margin-top: -50px;
    }
}

@media(max-width: 767px) {
    .bottom-img {
        max-height: 420px;
        margin-top: -30px;
    }
}

@media(max-width: 576px) {
    .arabic .bottom-img {
        left: 40%;
    }
}

.img-block {
    padding: 0 15px;
}

.ai-text-p, .arabic .ai-text-p {
    font-family: 'Helveticaneuecyr-Black';
    font-size: 62vw;
    line-height: 0.7;
    text-transform: uppercase;
    text-align: center;
    margin-top: 60px !important;
    background-color: #2f8d46;
    background: url(../img/ai_bg2.jpg) no-repeat;
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: .4s;
}

@media(max-width: 991px) {
    .ai-text-p, .arabic .ai-text-p {
        font-size: 81vw;
    }
}

@media(max-width: 767px) {
    .ai-text-p, .arabic .ai-text-p {
        margin-top: 30px !important;
    }
}

.ai-text {
    width: 58vw;
}

@media(max-width: 1260px) {
    .ai-text {
        width: auto;
        max-height: 600px;
    }
}

.arabic .services h4 {
    min-height: 93px;
}

.arabic .services .item.w100 h4 {
    min-height: auto;
}

@media(max-width: 767px) {
    .arabic .services h4 {
        min-height: auto;
    }
}

.service4-logo {
    position: absolute;
    z-index: 2000;
    top: 82px;
    left: 51.5%;
    transform: translateX(-60%) scale(0.7) rotate(3deg);
}

@media(max-width: 1260px) {
    .service4-logo {
        transform: translateX(-60%) scale(0.59) rotate(3deg);
    }
}

@media(max-width: 991px) {
    .service4-logo {
        top: 70px;
        left: 52%;
        transform: translateX(-60%) scale(0.5) rotate(3deg);
    }
}

.anim3.show .service4-logo p {
    color: #4976d3;
    transition: .3s;
}

.anim3.show .service4-logo svg {
    fill: #4976d3;
    transition: .3s;
}

.cent {
    max-width: none;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: .4s;
}

.show.cent {
    top: 46%;
    transition: .4s;
}

@media(max-width: 1260px) {
    .cent {
        top: 63%;
    }
    .show.cent {
        top: 58%;
        transition: .4s;
    }
}

.service-abs {
    position: absolute;
    z-index: 3000;
    bottom: 0;
    left: 0;
    transition: .4s;
}

.hands {
    width: 100%;
}

.ai-btn {
    margin-top: 40px;
}

@media(min-width: 767px) {
    .ai-btn {
        margin-top: 70px;
    }
}

@media(min-width: 1520px) {
    .ai-btn {
        margin-top: 4.5vw;
    }
}

.idea-block {
    position: relative;
}

.idea-block img {
    max-height: 258px;
}

.idea-mob {
    position: relative;
    z-index: 100;
}

.idea-images {
    padding: 100px 0 230px 0;
}

.arabic .idea-images {
    padding: 60px 0 295px 0;
}

.idea-gradient {
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: radial-gradient(rgba(252,229,112,0.22), transparent 70%);
    transition: .4s;
}

.idea2 {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 5000;
    transition: .4s;
}

.anim3 .service-logo {
    opacity: 0;
    bottom: 20px;
    transition: .4s;
}

.anim3.show .service-logo {
    opacity: 1;
    bottom: 0;
    transition: .4s;
}

.anim3 .idea-gradient, .anim3 .idea2 {
    opacity: 0;
}

.show.anim3 .idea-gradient {
    opacity: 1;
    width: 800px;
    height: 800px;
    transition: .4s;
}

.show.anim3 .idea2 {
    opacity: 1;
    transition: .4s;
}

.people {
    max-width: none;
    position: absolute;
    bottom: 0;
    opacity: 0;
    transition-duration: .4s;
}

.img1 {
    max-height: 90%;
    right: 120%;
}

.img2 {
    max-height: 83%;
    left: 120%;
}

.img3 {
    max-height: 97%;
    left: 100%;
}

.show .img1, .show .img2, .show .img3 {
    transition: .4s;
    transition-delay: .5s;
}

.show .img1 {
    opacity: 1;
    right: 100%;
}

.show .img2 {
    opacity: 1;
    left: 100%;
}

.show .img3 {
    opacity: 1;
    left: 50%;
}

@media(max-width: 767px) {
   .img3 {
      max-width: 100%;
      position: relative;
      left: 70%;
      transform: translateX(-50%);
   }
   .show .img3 {
      left: 40%;
   }
}

.idea-images {
    position: relative;
    width: 100%;
    max-width: 217px;
    margin: 0 auto;
}

.idea-logo {
    max-height: 41px;
}

.idea-logo2 {
    max-height: 50px;
}

.arabic .idea-images {
    margin: 0;
}

@media(max-width: 991px) {
    .idea {
        max-height: 200px;
    }
    .idea-images {
        max-width: 168px;
    }
}

.idea-mob {
    display: none;
}

@media(max-width: 767px) {
    .images-desc {
        display: none;
    }
    .idea-mob {
        display: block;
    }
    .arabic .idea-images {
        padding: 30px 0 0 0;
        margin: 0 auto;
    }
    .arabic .idea-mob {
        max-width: none;
        max-height: 390px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

.anim3 .service-abs {
    opacity: 0;
}

.anim3.show .service-abs {
    opacity: 1;
    transition: .4s;
}

.service1-text, .arabic .service1-text {
    position: absolute;
    top: 32.5%;
    left: 16%;
    color: #2a5d81;
    font-family: 'Futura-Bold';
    font-size: 115px;
    line-height: 0.8;
    text-transform: uppercase;
    transition: .4s;
}

.anim3 .service1-text {
    color: #2a5d81;
}

@media(max-width: 1260px) {
    .service1-text, .arabic .service1-text {
        font-size: 109px;
        top: 32.5%;
        left: 14.5%;
    }
}

@media(max-width: 991px) {
    .service1-text, .arabic .service1-text {
        font-size: 100px;
        left: 16.1%;
        top: 32.5%;
    }
}

@media(max-width: 767px) {
    .service1-text, .arabic .service1-text {
        font-size: 77px;
        left: 51px;
        top: 36.5%;
    }
}

.anim3.show .service1-text {
    color: #4976d3;
    transition: .4s;
}

.circle1 {
    border-radius: 10px;
    overflow: hidden;
    width: 70px;
    height: 70px;
    position: absolute;
    left: 24.4%;
    top: 41.7%;
    transform: rotateX(-9deg) rotateY(150deg);
    transform-style: preserve-3d;
    opacity: 0;
    border: double 10px transparent;
    border-radius: 50%;
    background-image: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0.6)), radial-gradient(circle at top left, #49d3c8 40%,#0f8bf4);
    background-origin: border-box;
    background-clip: content-box, border-box;
    display: inline-block;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    animation-name: rotate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.anim3 .circle1 {
    opacity: 0;
    transition: .4s;
}

.anim3.show .circle1 {
    opacity: 1;
    transition: .4s;
}

@keyframes rotate{
    from{ transform: rotateX(-9deg) rotateY(150deg) rotate(-360deg); }
    to{ transform: rotateX(-9deg) rotateY(150deg) rotate(360deg); }
}

@media(max-width: 1260px) {
    .circle1 {
        left: 20.6%; 
    }
}

@media(max-width: 991px) {
    .circle1 {
        width: 62px;
        height: 62px;
        left: 85px;
    }
}

@media(max-width: 767px) {
    .circle1 {
        width: 52px;
        height: 52px;
        left: 66px;
        top: 115px;
        border: double 7px transparent;
    }
}

.img-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: none;
    top: 0;
    left: 0;
}

/*keep
    width: 250px;
    height: 250px;
    border: double 10px transparent;
    border-radius: 50%;
    background-image: linear-gradient(white, transparent), radial-gradient(circle at top left, #f00,#3020ff);
    background-origin: border-box;
    background-clip: content-box, border-box;
    display: inline-block;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);*/


/*
.item-img .service4-logo {
    position: absolute;
    max-height: 24px;
    transform: rotate(2deg);
    left: 37.5%;
    z-index: 300;
    top: 21%;
}

@media(max-width: 1260px) {
    .item-img .service4-logo {
        max-height: 20px;
    }
}

@media(max-width: 991px) {
    .item-img .service4-logo {
        max-height: 16px;
        left: 36%;
    }
}*/