*,html{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #C1C2D3;
    font-family: "Inter", sans-serif;
    transition: all 0.5s;
}

.container{
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    padding: 15px 20px;
}

body{
    background-color: #000319;
}

.hero{
    position: relative;
}




.links{
    color: #C1C2D3;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    text-decoration: none;
}

header{
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    justify-content: space-between;
    gap: 32px;
    background: linear-gradient(#04071D, #0C0E23);
    border: 2px solid #272A3C5E;
    padding: 24px;
    border-radius: 13px;
    margin-top: 50px;
}

.hero-matn{
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 5px;
    text-transform: uppercase;

}

.main-sarlavha{
    font-size: 72px;
    line-height: 100%;
    letter-spacing: -3.6px;
    font-size: 700;
    max-width: 938px;

}


.sarlavha-span{
    color: #cbacf9;
    font-size: 72px;
    letter-spacing: -3.6px;
}
.hero-matn-2{
    font-size: 24px;
    line-height: 120%;

}

.hero-tugma{
    background:linear-gradient(#161A31, #06091F);
    border: none;
    border: 2px solid #272A3C80;
    padding: 22px 40px;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    border-radius: 10px;
}

.hero-center{
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
    margin-top: 10%;
}

.second-page{
    width: 100%;
}
.wrapper-earth{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}
.earth-h2{
    position: absolute;
    font-size: 32px;
    font-weight: 700;
    max-width: 393px;
    text-align: start;
    top: 68%;
    left: 10%;
}
.earth-img, .earth-img2{
    position: absolute;
}
.earth-img2{
    top: 65%;
    left: 75%;
}
.earth-img{
    top: 20%;
    left: 10%;
}

.wrapper-map{
    background: linear-gradient(#04071D, #0C0E23);
    border: 1px solid #3637496E;
    max-width: 521px;
    border-radius: 10px;
    position: relative;

}

.earth-h3{
    max-width: 411px;
    padding-top: 40px;
    text-align: center;
    font-size: 30px;
}

.area{
    font-size: 16px;
    padding: 8px 15px;
    border-radius: 15px;
    background: linear-gradient(#161A31, #06091F);
    border: none;
    border: 2px solid #3637496E;
}
/* .map{
    z-index: -1;
} */

.wrapper-tugmalar{
    display: flex;
    justify-content: space-between;
    max-width: 450px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-bottom: 40px;
}

.area2{
    position: absolute;
    top: 80%;
    left: 40%;
}

.wrapper-btnss{
    background-image: url(./images/section\ input\ container.png);
    width: 100%;
    height: 100%;
}


.footer-btn{
    font-size: 14px;
    color: #ffffff;
    background-color: #10132E;
    border: transparent;
    border-radius: 5px;
    padding: 27px 45px;

}

.wrapper-footer-right{
    display: flex;
    gap: 13px;
}

.footer-right{
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.footer{
    background:linear-gradient(#04071D, #0C0E23);
    border: 1px solid #3637496E;
    max-width: 521px;
    display: flex;
    align-items: center;
    height: 255px;
    border-radius: 20px;
    overflow-y: hidden;
    position: relative;
}
.footer-matn{
    font-size: 14px;
    color: #C1C2D3;
}
.footer-h2{
    color: #ffffff;
    font-size: 32px;
    position: absolute;
    flex-grow: 1;
}

.footer-left{
    padding-left: 20px;
}
.rightt{
    margin-top: 20px;
}

.wrapper-second-header{
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: 100%;
}
.wrapper-2{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 49%;
}

.wrapper-earth{
    width: 49%;
}

.wrapper-earth-img{
    width: 100%;
    height: 580px;
}

.second-page{
    margin-top: 120px;
    margin-bottom: 80px;
}


.wrapper-footer-right{
    padding-right: 10px;
    max-height: 255px;
    overflow-y: auto;
    overflow-x: hidden;
}
button{
    cursor: pointer;
}
.wrapper-footer-right::-webkit-scrollbar{
    display: none;
    
}

.left-one{
    max-width: 351px;
    height: 210px;
    background-image: url(./images/Background\ \(1\).png);
    border: 1px solid #3637496E;
    border-radius: 20px;
    position: relative;
    overflow-y: hidden;
    padding-top: 25px;
    padding-right: 25px;
    padding-left: 25px;

}

.third-h3{
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    max-width: 301px;
    text-align: center;
    
}
.left-one-img{
    position: absolute;
    top: 44%;
    left: 25%;
    width: 250px;
    height: auto;
}


.third-link{
    background: linear-gradient(#161A31, #06091F);
    border: 2px solid #6971A266;
    padding: 12px 35px;
    border-radius: 10px;
}


.left-two{
    background-image: url(./images/backgroundblobservicepng.png);
    width: 351px;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 25px;
    padding-right: 25px;
    padding-left: 25px;
    padding-bottom: 15px;
    border: none;
    border: 1px solid #6971A266;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
}

.third-page-left{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.right-span{
    font-size: 16px;
    text-transform: uppercase;
    color: #E4ECFF;
    letter-spacing: 3px;

}

.right-h2{
    font-size: 32px;
    color: #ffffff;
    font-weight: 700;
    max-width: 311px;
}
.wrapper-right-left{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 48%;
}

.third-page-right{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #3637496E;
    padding-left: 20px;
    overflow-x: hidden;
    padding-top: 30px;
    border-radius: 20px;
    background-image: url(./images/Background\ \(2\).png);
}

.wrapper-back{
    width: 50%;
}
.right-img{
    width: 100%;
}

.third-page{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.third-page-right{
    margin-bottom: 100px;
}


.second-h1{
    font-size: 48px;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 40px;
}

.wrapper-card-img{
    background-image: url(./images/Image\ \(5\).png);
    max-width: 552px;
    max-height: 330px;
    padding: 30px 45px;
    /* background-size: cover; */
    border: 1px solid #3637496E;
    border-radius: 20px;

}

.card-img{
    width: 100%;
}

.card-sarlavha{
    font-size: 32px;
    margin-bottom: 20px;
    margin-top: 10px;
}

.card-matn{
    font-size: 20px;
    color: #BEC1DD;
    max-width: 552px;
}

.card-1{
    padding: 20px;
    background: linear-gradient(#04071D, #0C0E23);
    border: 2px solid  #3637496E;
    border-radius: 20px;
    max-width: 600px;
    max-height: 618px;
    position: relative;
}


.wrapper-logosss
{
    text-decoration: none;
}
.logos-rasm{
    width: 50px;
    height: auto;
}

.card-link{
    font-size: 20px;
    color: #CBACF9;
    text-decoration: none;


}

.card-footer{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 20px;
    margin-top: 10px;
    align-items: center;

}

.card-header{
    display: flex;
    gap: 30px;

}

.wrapper-cards{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.client-righ{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.wrapper-client-img{
    display: flex;
    gap: 15px;
    align-items: center;
}


.sar{
    margin-top: 150px;
    margin-bottom: 50px;
}

.client-matn{
    font-size: 20px;
    max-width: 810px;
    color: #ffffff;
    line-height: 1.9rem;
}

.client-opinions{
    min-width: 60vw;
    padding: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    background: linear-gradient(#04071D, #0C0E23);
    border: 1px solid #3637496E;
    border-radius: 20px;
}


.clients{
    display: flex;
    gap: 40px;
    /* margin-right: auto;
    margin-left: auto; */
    overflow-x: scroll;
    padding-right: 20px;
    padding-left: 20px;


}

.clients::-webkit-scrollbar{
    display: none;
}




.client-opinions{
    max-width: 910px;
    min-height: 300px;
}


.clients{
    max-width: 1400px;
    margin-right: auto;
    margin-left: auto;
}
.client-footer{
    display: flex;
    justify-content: space-between;
    margin-top: 5rem;
}
.client-footer-top, .client-footer-bottom{
    display: flex;
    justify-content: space-between;
    gap: 4.4rem;
}

.client-footer-logo{
    max-width: 177px;
    height: auto;
}

body{
    overflow-x: auto;
    transition: 0.5s;
}

.div1-sarlavha{
    font-size: 	1.625rem;
    color: #fff;
    font-weight: 700;
}
.div1-matn{
    color: #BEC1DD;
    font-size: 1rem;
    font-weight: 500;
}
.div1-left{
    width: 30%;
}
.div1-right{
    width: 68%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.div1{
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
    background: linear-gradient(#04071D, #0C0E23);
    border: 1px solid #3637497D;
    padding: 3.3rem;
    border-radius: 20px;
}
.wrapper-experience{
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}
  
.salomm{
    margin-top: 2rem;
}

.div1-rasm{
    width: 100%;
}
.salomm{
    margin-bottom: 	4.375rem;
}

.sarlav{
    margin-top: 3.85rem;
    padding-bottom: 1rem;
}
.phase-1{
    background: linear-gradient(#04071D, #0C0E23);
    border: 1px solid #3637497D;
    width: 30%;
    position: relative;
    border-radius: 20px;
    max-width: 620px;
}
.wrapper-tugm{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15rem;
    margin-bottom: 15rem;
}
.plus{
   
     max-width: 46px;
}
.tugmaaa{
    background: linear-gradient(#161A31, #06091F);
    border: 1px solid #6971A266;
    font-size: 	1.875rem;
    padding: 18px 25px;
    border-radius: 11px;
    font-weight: 700;
    color: #CBACF9;
}
.plusleft{
    position: absolute;
    right: -4%;
    top: -4%;
}

.plusright{
    position: absolute;
    left: -4%;
    top: -4%;
}
.plusbottomleft{
    position: absolute;
    bottom: -4%;
    left: -4%;
}
.plusbottomright{
    position: absolute;
    bottom: -4%;
    right: -4%;
}


.tugma1{
    background: linear-gradient(#161A31, #06091F);
    border: 1px solid #6971A266;
    font-size: 	1rem;
    padding: 18px 25px;
    border-radius: 11px;
    font-weight: 600;
    color: #CBACF9;
}
.phase-1-h1{
    font-size: 2rem;
    font-weight: 700;
    line-height: 2rem;
    text-align: center;
}
.phase-1-p{
    color: #E4ECFF;
    font-size: 1rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
.phase1-center{
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    text-align: center;
    line-height: 150%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 11.875rem 0rem;
}

.wrapper-approach{
    display: flex;
    justify-content: space-between;
    gap: 2.75rem;
}
.footer-sarlavha{
    font-size: 48px;
    max-width: 720px;
    line-height: 100%;
    text-align: center;
}
.footer-span{
    color: #CBACF9;
}
.footer-matn{

    color: #C1C2D3;
    font-size: 16px;
}
.footer-tugma{
    background: linear-gradient(#161A31, #06091F);
    border: 1px solid #6971A266;
    padding: 22px 40px;
    font-size: 18px;
    border-radius: 12px;
}

.footeer{
    margin-top: 15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.footerr-logo{
    max-width: 45px;
    cursor: pointer;
    max-height: 45px;
}
.footerr-right{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    width: 18%;
}
.footer-footer-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6rem;
}
.footerr-logo:hover{
    transform: scale(1.1);
    transition: all 0.1s;
}
.wrapper-card-img{
    overflow: hidden;
    padding-bottom: 0;
}

.card-img{
    rotate: 4deg !important;
    border-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

}
.links{
    border-bottom: 2px solid transparent;
}
.links:hover{
    border-bottom: 2px solid #BEC1DD;
    cursor: pointer;
}

.wrapper-card-img:hover{
    overflow: hidden;
    .card-img{
        transform: scale(1.3);
    }
}
.logos-rasm:hover{
    transform: scale(1.3);
}
.client-footer-logo:hover{
    transform: scale(1.1);
}
.phase-1:hover{
    transform: scale(1.1);
}
.phase-1-center:hover{
    transform: scale(1.1);
    .wrapper-approach{
        overflow: hidden;
    }
}
.footer-tugma:hover{

    background: linear-gradient(#C1C2D3);
    color: #000319;
}

header{
    position: sticky;
    top: 0;
}
.hero{
    position: relative;
}


@media (max-width: 768px){
    .main-sarlavha{
        text-align: center;
    }
    .hero-center{
        margin-top: 12%;
    }
    .wrapper-tugma{
        width: 100%;
    }
    .hero-tugma{
        width: 100%;
    }
    .wrapper-earth-img{
        width: 100%;
    }
    .earth-img2{
        left: 72%;
    }
    .wrapper-map{
        width: 100%;
    }
    .wrapper-second-header{
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        justify-content: center;
    }
    .wrapper-earth{
        width: 100%;
    }
    .wrapper-2{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        justify-content: center;
    }
    .third-page{
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        justify-content: center;
    }
    .left-one{
        max-width: 500px;
    }

    .third-page-right{
        margin-bottom: 50px;
    }

    .card-header{
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
        justify-content: center;
    }

    .card-1{
        width: 100%;
    }

    .card-sarlavha{
        font-size: 20px;
    }

    .card-matn{
        font-size: 14px;
        color: #BEC1DD;
    }

    .logos-rasm{
        width: 34px;
    }
    .card-link{
        font-size: 14px;
    }
    .card-footer{
        width: 100%;
        overflow-y: hidden;
        display: flex;
        align-items: center;
        padding: 10px;

    }
    .wrapper-logos{
        width: 60%;
    }
    .card-link{
        width: 40%;
    }

    .client-opinions{
        width: 100%;
    }


    /* .client-matn{
        font-size: 16px;
        max-width: 358px;
    } */
     
    .client-footer{
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
        justify-content: center;
    }
    .client-footer-logo{
        max-width: 133px;
        height: auto;
    }
    .client-matn{
        width: 100%;
    }
    .client-opinions{
        padding: 1rem;
    }
    .wrapper-experience{
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .div1{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    .wrapper-approach{
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .phase-1{
        width: 100%;
    }
    .footer-footer-wrap{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: center;
    }
    .footerr-right{
        width: 100%;
    }
    .footer-matn{
        text-align: center;
    }
    .footerr-right{
        display: flex;
        gap: 1rem;
    }
}




/* bu esa iphone moslashish */

@media (max-width: 500px){
    header{
        margin-top: 30px;
    }
    .main-sarlavha, .sarlavha-span{
        font-size: 48px;
        letter-spacing: -1.6px;
    }
    .hero-matn{
        font-size: 12px;
        text-align: center;
        
    }
    .hero-matn-2{
        font-size: 16px;
    }
    .hero-center{
        margin-top: 20%;
    }
    .earth-h2{
        font-size: 20px;
        max-width: 227px;

    }

    .wrapper-map{
        width: 100%;
    }
    .wrapper-tugmalar{
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 20px;
    }

    .links{
        font-size: 14px;
    }

    .footer{
        display: flex;
        align-items: center;
        gap: 20px;
        overflow-y: hidden;
        width: 100%;
        height: 195px;
        overflow-y: hidden;
    }

    .footer-btn{
        font-size: 10px;
        padding: 20px 30px;
    }
    .footer-h2{
        font-size: 20px;
    }
    .footer-matn{
        font-size: 10px;
    }
    .wrapper-earth-img{
        width: 100%;
        height: auto;
    }
    .left-one, .left-two{
        width: 100%
    }
    .wrapper-back{
        width: 50%;
        
    }
    .third-page-left{
        width: 100%;
    }
    .wrapper-right-left{
        width: 50%;
        position: relative;
    }
    .right-h2{
        font-size: 20px;  
   
    }
    .right-span{
        font-size: 10px;

    }
    
    .third-page-right{
        width: 100%;
    }
    .left-one{
        width: 100%;
    }

    .wrapper-card-img{
        padding: 15px;
        padding-bottom: 0;

    }

    .card-1{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        align-items: start;
        padding: 1.25rem;
    }
    .card-sarlavha{
        text-align: center;
    }
    .card-matn{
        text-align: center;
    }
    .card-footer{
        width: 100%;
    }
    .wrapper-logos{
        width: 50%;
    }
    header{
        max-width: 380px;
        margin-right: auto;
        margin-left: auto;
    }
    .logos-rasm{
        width: 25px;
    }
    .card-link{
        font-size: 10px;
    }
    .links{
        font-size: 12px;
    }

    .clients{
        padding: 10px 15px;
    }
    .client-matn{
        font-size: 14px;
    }
    
    .client-photo{
        width: 30px;
    }
    .client-opinions{
        width: 100vw;
    }
    .clients{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .clients{
        max-width: fit-content;
    }
    .client-footer-logo{
        max-width: 100px;
    }
    .client-footer-bottom{
        display: flex;
        gap: 2rem;
    }
    .phase-1{
        max-height: 600px;
    }
    .div1-sarlavha{
        font-size: 1.5rem;
    }
    
    
    

    .footer-footer-wrap{
        margin-top: 2rem;
    }
    .footerr-right{
        display: flex;
        gap: 1rem;
    }

    
    
}


@media (max-width: 450px){
    .client-footer-bottom{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}


@media (max-width: 400px){
    .card-sarlavha{
        font-size: 18px;
    }
    .logos-rasm{
        width: 30px;
    }

    .client-matn{
        font-size: px;
    }
    .client-footer-logo{
        max-width: 100px;
        object-fit: cover;
    }
    .client-footer-top, .client-footer-bottom{
        display: flex;
        gap: 1rem;
    }
    .client-footer-logo{
        max-width: 80px;
    }
    .client-footer-bottom{
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }
    header{
        gap: 0;
    }
    .div1{
        display: flex;
        flex-direction: column;
        gap: 2rem;
        justify-content: space-between;
        align-items: start;
    }
    .div1-left{
        width: 30%;
    }
    .div1-right{
        width: 100%;
    }
    .div1-sarlavha{
        font-size: 1.25rem;
    }
    .div1-matn{
        font-size: 14px;
    }
    .div1{
        padding: 1rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .div1-sarlavha{
        font-size: 	1.25rem;
    }
    
}