@font-face {
    font-family: poppins;
    src: url(fonts/poppins/Poppins-Light.ttf);
}

@font-face {
    font-family: poppins-bold;
    src: url(fonts/poppins/ubuntu-Bold.ttf);
}

@font-face {
    font-family: poppins-medium;
    src: url(fonts/poppins/Poppins-Medium.ttf);
}

@font-face {
    font-family: ubuntu;
    src: url(fonts/ubuntu/Ubuntu-Medium.ttf);
}

*{
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}

body{
    background-color: #fff;
    overflow-x: hidden;
    position: relative;
}

.section.loaded{
    animation: tra 1.3s forwards;
}

@keyframes tra{
    from{
        transform: translateX(100px);
    }

    to{
        transform: translateX(0);
    }
}

.loaders{
    display: grid;
    place-items: center;
    align-content: center;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #fff;
    z-index: 1000;
    top: 0;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
}

.loaders.loaded{
    animation: loaded forwards 1s ;
}

@keyframes loaded {
    to{
        height: 0vh;
        z-index: -1;
        visibility: hidden;
    }
}

.loaders img{
    height: 110px;
}

.loaders .load-left{
    height: 80px;
    width: 80px;
    border-radius: 50%;
    background-color: #693fbd;
    display: inline;
    margin-top: 30px;
    transform: translateX(10px);
    animation: transform-right 3s infinite forwards;
}

.loaders .flex{
    display: flex;
}

.loaders .load-right{
    height: 80px;
    width: 80px;
    border-radius: 50%;
    background-color: rgba(235, 235, 235,.6);
    display: inline;
    margin-top: 30px;
    backdrop-filter: blur(4px);
    transform: translateX(-10px);
    animation: transform-left 3s infinite forwards;
}

@keyframes transform-left{
    0%{
        transform: translateX(-10px);
    }
    50%{
        transform: translateX(-70px);
    }
    0%{
        transform: translateX(-10px);
    }
}


@keyframes transform-right{
    0%{
        transform: translateX(10px);
    }
    50%{
        transform: translateX(70px);
    }
    0%{
        transform: translateX(10px);
    }
}

section, .section{
    max-width: 1800px;
    margin: auto;
    overflow: hidden;
}

:root{
    --o-yellow:#fde305;
    --o-violet:rgb(105, 63, 189);
    --o-black : #263238;
    --o-white : #fff;
    --button-padding:15px 25px;
    --button-linear-gradient : linear-gradient(90deg,#fde305,#e8aa8c);
}

/*************************************** HEADER *******************************************************/

header{
    position: fixed;
    top: 20px;
    padding-block: 10px;
    z-index: 150;
    width: 100%;
    display: flex;
    justify-content: center;
    max-width: 1800px;
    left: 50%;
    transform: translateX(-50%);
}

header .header{
    /* border: 1px solid #fff; */
    height: 40px;
    padding-left: 50px;
    padding-right: 30px;
    padding-block: 35px;
    display: grid;
    grid-template-columns: 200px 1fr 240px;
    align-content: center;   
    top: 1%;
    align-items: center;
    z-index: 100;
    transition: all .4s ease-in-out;
    width: 100%;
}

header.view{
    position: fixed;
    top: 0;
}

header.viewx{
/*    box-shadow: .7px .7px 3px rgba(56, 56, 56, 0.3);*/
    top: 0;
    background-color:#fff;
    backdrop-filter: blur(10px);
}

header .logo{
    display: flex;
    padding-left: 30px;
    align-items: center;
    color: rgba(255, 255, 255, .99);
    text-shadow:1px 0px black;
}

header .logo.view{
    color: #000;
    text-shadow: unset;
}

header .logo img{
    height: 40px;
}

header .logo h1{
    font-family: ubuntu;
}

header .nav{
    display: flex;
    justify-content: center;
}

header .nav ul{
    display: flex;
    list-style: none;
    align-items: center;
    background-color: #fff;
    padding-block: 7px;
    border-radius: 10px;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);
}

header .nav ul li{
    margin-left: 30px;
}

header .nav ul li a{
    text-decoration: none;
    font-size: .9em;
    color: #000;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-family: ubuntu;
}

header .nav ul li a.active-page{
    color: var(--o-violet);
}

header .nav ul li a .fa-arrow-right{
    background-color: #fff;
    color: var(--o-violet);
    padding: 5px;
    margin-left: 8px;
    border-radius: 100%;
    font-size: .8em;
}

header .nav ul .contact{
    background-color: var(--o-violet);
    padding: 14px 17px;
    margin-right: 6px;
    border-radius: 5px;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);
}

header .nav ul .contact a{
    color: #fff;
}

header .more{
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    z-index: 0;
}

header .more button{
    cursor: pointer;
}

header .more .quote button{
    border: 0;
    background-color: var(--o-violet);
    padding-block: 14px;
    padding-inline:10px;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 16px), calc(100% - 18px) 100%, 0% 100%);
    font-size: .9em;
    cursor: pointer;
    border-radius:4px;
    color: white;
}

header .more .quote button:focus{
    outline: none;
}

header .more .quote button .fa-phone{
    color: #fff;
    border-radius: 50%;
    background-color: var(--o-violet);
    padding: 10px;
}

header .more .quote button span{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 20px;
}

header .more .nav-dropdown{
    position: relative;
}

header .more .nav-dropdown button{
    color: white;
    border: none ;
    padding-inline: 10px;
    background-color: var(--o-violet);
    font-size: 1.5em;
    position: relative;
    border-radius: 3px;
}

header .nav-drop{
    position: absolute;
    right: 30px;
    top: 10px;
    border-radius: 10px;
    background-color: #fff;
    color: black;
    list-style: none;
    width: 200px;
    padding-inline: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow: hidden;
    opacity: 1;
    transition: height,top .2s ease-in-out;
    padding-left: 30px;
    height: 0px;
}

header .nav-drop.open{
    overflow: unset;
    padding-inline: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
    top: 55px;
    opacity: 1;
    height: fit-content;
    border:1px solid var(--o-violet);
}

header .nav-drop.open ::before{
    content: "";
    position: absolute;
    top: -2%;
    left: -5px;
    z-index: 100;
    height: 50px;
    width: 50px;
    border-top: 6px solid var(--o-violet);
    border-left: 6px solid var(--o-violet);
    border-top-left-radius: 10px;
}

header .nav-drop.open ::after{
    content: "";
    position: absolute;
    bottom: -2%;
    right: -5px;
    z-index: 100;
    height: 50px;
    width: 50px;
    border-bottom: 6px solid var(--o-violet);
    border-right: 6px solid var(--o-violet);
    border-bottom-right-radius: 10px;
}

header .more .nav-dropdown .nav-drop li{
    margin-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}

header .more .nav-dropdown .nav-drop a{
    text-decoration: none;
    color: #000;
    font-size: 1em;
    text-transform: capitalize;
}

header .more .nav-dropdown .nav-drop  .fa-arrow-right{
    margin-right: 15px;
    background-color: var(--o-violet);
    color: #fff;
    border-radius: 50%;
    font-size: .6em;
    padding: 3px;
}

/*************************************** HEADER - RESPONSIVE *************************************/

@media (max-width:1190px){
    header .header{
        grid-template-columns: 1.2fr 1fr;
        padding-inline: 30px;
    }

    header .nav{
        display: none;
    }

    header .more{
        justify-content: space-between;
    }
    
}

@media (max-width:700px){
    header .header{
        grid-template-columns: 2.1fr 1fr;
        padding-inline: 15px;
    }
    header .more .quote{
        display: none;
    }    

    header .nav-drop{
        width: 250px;
    }

}

@media (max-width:660px){

}

@media (max-width:660px) {

    header .more{
        justify-content: flex-end;
    }

    header .more .socials{
        display: none;
    }

    header .more .quote{
        display: none;
    }
}

/*************************************** SECTION 1 *************************************/


#section1{
    position: relative;
    overflow: hidden;
    width: 98%;
    /* height: 90vh; */
    margin-top: 15px;
    z-index: 6;
}

@media   (max-width :800px){
    #section1{
        height: 400px;
    }
}

#section1 .carousel-item{
    padding-top: 170px;
    padding-bottom: 80px;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 1;
    overflow: hidden;
/*    background-size: 1500px;*/
    position: relative;
    width: 100%;
    visibility: hidden;
}

@media   (max-width :800px){
    #section1 .carousel-item{
    padding-bottom: 40px;
        padding-top:    127px;
    }
}

#section1 .carousel-item.active{
    background-size: 1500px;
    animation: zoomIn 4s  ease-out;
    visibility: visible;
}

@keyframes zoomIn{
    0%{
        filter: blur(5px);
        opacity: 1;
        background-size: 1740px;
    }

    18%{
        filter: blur(0px);
    }
    100%{
        filter: blur(0px);
        opacity: 1;
        background-size: 1500px;
    }

}

#section1 .carousel-item.active::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
/*    background-color: rgba(0, 0, 0, .5);*/
}

#section1 .carousel-item .logo-section1{
    height: 40px;
}

#section1 .carousel-item p{
    font-size: 1.6em;
    font-family: Edu;
    font-weight: 500;
}

#section1 .carousel-item h1{
    font-weight: 600;
    opacity: 0;
}

#section1 .carousel-item .goal{
    opacity: 0;
}

#section1 .carousel-item.active h1{
    animation: fadeInRight .8s forwards ease;
    font-size: 3em;
    line-height: 90px;
    font-family: ubuntu;
}

@media (max-width:900px) {
    #section1 .carousel-item.active h1{
        font-size: 2.9em;
        line-height:60px;
    }
}

@media (max-width:500px) {
    #section1 .carousel-item.active h1{
        font-size: 1.8em;
        line-height:40px;
    }
}

#section1 .carousel-item.active .goal{
    animation: fadeInLeft 3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes fadeInRight {
    0%{
        letter-spacing: -20px;
        opacity: 0;
    }

    100%{
        letter-spacing: 0px;
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    0%{
        transform: translateX(-30px);
        opacity: 0;
    }

    100%{
        transform: translateX(0px);
        opacity: 1;
    }
}


#section1 .carousel-item a{
    margin-top: 50px;
    color: var(--primary-white);
    font-weight: 600;
    cursor: pointer;
    z-index: 2;
    position: absolute;
    font-size: large;
}

#section1 .carousel-item a .fa-heart{
    color: var(--orange-logo);
}

#section1 .circle-design{
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--primary-white);
    height: 300px;
    width: 300px;
    top: 40%;
    left: 55%;
    transform: translate(-50%,-50%);
    z-index: 2;
    opacity: .4;
}

#section1 .circle-design2{
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--primary-white);
    height: 150px;
    width: 150px;
    top: 60%;
    left: 82%;
    transform: translate(-50%,-50%);
    z-index: 2;
    opacity: .3;
}

#section1 .carousel-control-prev{
    position: absolute;
    left: 85%;
    top: 70%;
    transform: translateX(-26px);
    background-color: var(--orange-logo);
    height: 2px;
}

#section1 .carousel-control-next{
    position: absolute;
    background-color: var(--blue-logo);
    height: 2px;
    top: 50%;
}

#section1 .carousel-control-prev .btn{
    border: 1px solid #fff;
    box-shadow: 3px 3px 30px rgba(255, 255, 255, .6);
    padding: 20px;
}

#section1 .carousel-control-next .btn{
    border: 1px solid #fff;
    box-shadow: 3px 3px 30px rgba(255, 255, 255, .6);
    padding: 20px;
}



.home-services-anim[data-scroll="in"]{
    opacity: 0;
    scale: .8;
    animation: home-services-anim .4s linear forwards;
}

.home-services-anim1[data-scroll="in"]{
    animation-delay: .3s;
}

.home-services-anim2[data-scroll="in"]{
    animation-delay: .6s;
}

.home-services-anim3[data-scroll="in"]{
    animation-delay: 1s;
}

@keyframes home-services-anim {
    100%{
        opacity: 1;
        scale: 1;
    }
}








#section1 .curved-edges{
    position: absolute;
    width: 20%;
    background-color: #fff;
    height: 90px;
    left: 80%;
    top: 0;
    z-index: 10;
    border-bottom-left-radius: 40px;
}


#section1 .curved-edges::after{
    position: absolute;
    right: 0%;
    height: 50px;
    width: 50px;
    background-color:transparent;
    bottom: -50px;
    border-top-right-radius: 40px;
    box-shadow: 1.2rem -.375rem #fff;
    content: "";
}

#section1 .curved-edges::before{
    position: absolute;
    left: -50px;
    height: 50px;
    width: 50px;
    background-color:transparent;
    top: 0px;
    border-top-right-radius: 40px;
    box-shadow: 1.2rem -.375rem #fff;
    content: "";
}

#section1 .curved-edges-two{
    position: absolute;
    width: 10%;
    background-color: #fff;
    height: 100px;
    left: 0%;
    bottom: 0;
    z-index: 5;
    border-top-right-radius: 20px;
    display: none;
}

#section1 .curved-edges-two::before{
    position: absolute;
    left: 0;
    height: 100px;
    width: 4vw;
    background-color:transparent;
    top: -100%;
    border-bottom-left-radius: 20px;
    box-shadow: -1.2rem .375rem #fff;
    content: "";
}

#section1 .curved-edges-two::after{
    position: absolute;
    right: -100px;
    height: 50px;
    width: 100px;
    background-color:transparent;
    bottom: 0;
    border-bottom-left-radius: 40px;
    box-shadow: -1.2rem .375rem #fff;
    content: "";
}

#section1 .curved-edges-two{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: #fff;
    background-color: #fff;
    z-index: 100;
}









#section1 .text{
/*    padding-top: 70px;*/
    padding-left: 140px;
    z-index: 6;
}


@media (max-width:870px){
    #section1 .text{
        padding-left: 10px;
    }
}

#section1 .text h2{
    color: black;
    font-weight: 400;
    font-family: ubuntu;
    font-size: .6em;
    color: var(--o-violet);
}

#section1 .text .h2 div{
    width: 90px;
    background-color: var(--o-violet);
    height: 2px;
    margin-right: 5px;
}

#section1 .text h1{
    font-size: 1em;
    padding-bottom: 16px;
    color: black;
    font-weight: 900;
    font-family: ubuntu;
    line-height: 84px;
}


#section1 .carousel-item .text button{
    position: relative;
    margin-top: 20px;
    margin-left: 20px;
    border-radius: 3px;
    font-size: .7em;
    font-weight: 600;
    display: flex;
    border: none;
    background-color: rgba(253, 227, 5,.5);
    color: black;
    padding: 20px 30px 20px 20px;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);
    opacity: 0;
}

#section1 .carousel-item.active .text button{
    opacity: 1;
    animation: appea .6s linear;
}

@keyframes appea {
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}



@media (max-width:600px){
    #section1 .text h1{
        /* font-size: 2em; */
    }
}

#section1 .text .design{
    display: flex;
    align-items: center;
}

#section1 .text .design .circle{
    height: 30px;
    width: 200px;
    border-radius: 40px;
/*    border: 4px solid #cacaca;*/
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: 6px;
}

#section1 .text .design .circle .moving{
    width: 80%;
    height: 4px;
    border-radius: 30px;
    background-color: #fde305;
    display: flex;
    align-items: center;
    position: relative;
}

#section1 .text .design .circle .moving .round{
    height: 14px;
    border: 1px solid #9b9b9b;
    width: 14px;
    border-radius: 50%;
    background-color: #fde305;
    position: absolute;
    left: 0;
    animation: moving-circle linear 6s infinite;
}

@keyframes moving-circle {
    0%{
        left:0;
    }

    50%{
        left: 90%;
    }
    100%{
        left: 0%;
    }

}

#section1 .text p{
    padding-block: 30px;
    padding-inline: 10px;
    font-size: 1em;
    position: relative;
    z-index: 6;
    font-weight: 500;
    color: #3b3663;
}

@media (max-width:1100px){
    #section1 .text p{
        padding-block: 10px;
    }
}

#section1 .carousel-item .images{
/*      background-color: #000; */
     display: flex;
     padding-inline: 30px;
     padding-top:   80px;
     justify-content: center;  
     position: absolute;
     width: 50%;
     right: 0;
     height: 80%;
     top: 40%;
     opacity: 0;
     z-index: 6;
}

#section1 .carousel-item.active .images{
    opacity: 1;
    animation: appeas .6s linear;
}

@keyframes appeas {
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@media (max-width:870px){
    #section1 .carousel-item .images{
        display: none;
    }
}

#section1 .images .text2{
    transform: translateY(30px);
    font-family: ubuntu;
    font-weight: 700;
    color: #2F2F2F;
    background: rgba(255, 255, 255,.5);
    padding: 30px;
    border-radius: 5px;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 80px), calc(100% - 100px) 100%, 0% 100%);
}

#section1 .images .text2 p{
    font-family: ubuntu;
    font-size: 1em;
}

#section1 .images button{
    position: relative;
    margin-top: 30px;
    margin-left: 20px;
    border-radius: 3px;
    display: flex;
    border: none;
    font-size: .7em;
    background-color: rgba(105, 63, 189,.7);
    color: white;
    padding: 20px 30px 20px 20px;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);
}

/*#section1 .images .bannx{
     border-radius: 38% 62% 33% 67% / 39% 34% 66% 61%  ; 
    z-index: 4;
    height: 100vh;
    max-height: 700px;
}
*/

#section1 .text{
    position: relative;
}




/**************************** SECTION Y *************************************************************************/

.sectiony{
    display: flex;
    position: relative;
    justify-content: space-around;
    transform: translateY(-50px);
    z-index: 7;
}

@media(max-width:900px){
    .sectiony{
        transform: translateY(0px);
    }
}

.sectiony .row{
    display: flex;
    /* justify-content: center; */
    gap: 30px;
    position: relative;
    width: 100%;
}

.sectiony .row .div{
    background-color: white;
    border-radius: 4px;
}

.sectiony .row .div img{
    border-radius: 5px;
}

.sectiony .row .div h3{
    padding: 20px;
    font-size: 1.4em;
    font-weight: 600;
    border-bottom: 1px solid #C7C7C7;
}

.sectiony .row .div .img{
    padding-top: 20px;
}

.sectiony .row .div2{
    background-color: rgba(253, 227, 5,.5);
}

.sectiony .row .div2 ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    font-weight: 600;
    margin-top: 35px;
}



.sectiony .row .div3 p{
    font-weight: 600;
    font-size: .9em;
}






/**************************** SECTION 12 *************************************************************************/

.section12{
    background:linear-gradient(180deg,rgba(18, 16, 29,0),rgba(18, 16, 29,0));
    position: relative;
/*    height: 90vh;*/
    display: grid;
    grid-template-columns:.6fr 1fr;
    padding-top: 90px;
    padding-inline: 90px;
    animation: showUp both;
    animation-timeline: view(70% 5%);
/*    max-height: 650px;*/
}

.section12 .clip{
    position: absolute;
    height: 44%;
    width: 100%;
    background-color: rgb(247, 245, 239);
    bottom: 0;
    -webkit-clip-path: polygon(0% 0%, calc(100% - 140px) 0%, 100% 140px, 100% 100%, 0% 100%);
}

@keyframes showUp{
    from{
        opacity: .4;
        scale: .7;
    }
    to{
        opacity: 1;
        scale: 1;
    }

}

@media (max-width:1200px){
    .section12{
        display: block;
        padding-inline: 20px;
        padding-block: 30px;
/*        height: 70vh;*/
    }
}

@media (max-width:800px){
    .section12{
        height: unset;
        max-height: unset;
    }
}

.section12 .titl{
    position: absolute;
    top: 0;
    width: 100%;
    height: 250px;
    background-color: #aeaeae1a;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    overflow: hidden;
}

.section12 .titl div{
    transform: translateY(70px);
}

.section12 .titl h1{
    position: relative;
    z-index: 7;
    font-size: 8em;
    color: transparent;
    font-weight: 500;
    -webkit-text-stroke:#ddd 1px;
}

.section12 .image{
    position: relative;
    color: #fff;
    display: flex;
    align-items: flex-end;
    background-color: #000;
}

.section12 .image .auto-anim{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}

@media (max-width:1200px){
    .section12 .image  .auto-anim{
        opacity: .5;
    }
}

/*.auto-anim{
    animation: fade-in-slide-up both;
    animation-timeline: view(70% 5%);
}
*/
@keyframes fade-in-slide-up{
    from{
        scale: .7;
    }
    to{
        scale: 1;
    }

}


.section12 .image h1{
    font-weight: 900;
    font-size: 3em;
    padding-bottom: 70px;
    padding-top: unset;
    padding-right: unset;
    padding-left: 30px;
    font-family: ubuntu;
}

@media (max-width:1200px){
    .section12 .image h1{
        font-size: 3em;
        padding-top: 30px;
        padding-right: 10px;
    }
}

@media (max-width:800px){
    .section12 .image h1{
        font-size: 2em;
        padding-top: 30px;
        padding-right: 10px;
    }
}

.section12 .text{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: flex-end;
    justify-content: flex-end;
    padding-left: 60px;
    padding-bottom: 50px;
    column-gap: 30px;
}

@media (max-width:800px){
    .section12 .text{
        display: block;
        padding-left: 10px;
        padding-top: 20px;
    }
}


.section12 .text img{
    height: 40px;
    margin: auto;
}

.section12 .text .div1{
    padding-inline: 30px;
    padding-block: 20px;
    border-radius: 10px;
/*    background-color: rgba(204, 204, 204,.15);*/
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);
}

.section12 .text .div1 .top{
    border-bottom: 1px solid #ddd;
}


.section12 .text .div1 .icon{
/*    background-color: #8f6bd6;*/
    padding: 10px;
    text-align: center;
    width: 50px;
    height: 50px;
    margin-left: 20px;
}

.section12 .text .div1 .icon img{
    filter: invert(100%);
}

.section12 .text .div1 .sq{
    height: 20px;
    width: 20px;
    background-color: #eee;
}


.section12 .text .div1 h2{
    padding-top: 30px;
}

.section12 .text .div1 p{
    padding-block: 30px;
    font-size: 1em;
    color: #2F2F2F;
}

.section12 .text .div2{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/**************************** SECTION X *************************************************************************/

.sectionx{
    background-color: #000;
    overflow: hidden;
    width: 100%;
    margin: auto;
/*    transform: rotate(-.6deg);*/
}

@keyframes movetext {
  0% {
    transform: translate(0,0);
  }
 100% {
    transform: translate(-170%,0);
  }
}

.sectionx ul{
    padding-inline: 20px;
    display: flex;
    list-style: none;
    white-space: nowrap;
    gap: 30px;
    padding-block: 10px;
    animation: movetext 80s linear infinite;
    align-items: center;
}

.sectionx ul li{
    font-size: 3em;
    font-weight: 400;
    -webkit-text-stroke: 1px #fff;
    color: transparent;
}


.sectionx ul span{
    font-size: 1em;
    color: #fff;
}




/**************************** SECTION X *************************************************************************/

.sectionxx{
    display: none;
    background-color: #fff;
    overflow: hidden;
    width: 100%;
}

@keyframes movetexto {
  0% {
    transform: translate(-100%,0);
  }
 100% {
     transform: translate(0,0);
  }
}

.sectionxx ul{
    padding-inline: 20px;
    display: flex;
    list-style: none;
    white-space: nowrap;
    gap: 30px;
    padding-block: 5px;
    animation: movetexto 70s linear infinite;
    align-items: center;
}

.sectionxx ul li{
    font-size: 3em;
    font-weight: 400;
    -webkit-text-stroke: 1px #693fbd;
    color: transparent;
}


.sectionxx ul span{
    font-size: 1em;
    color: #fff;
}






/**************************** SECTION 2 *************************************************************************/

.section2{
    height: 120vh;
    background-color:#000;
    position: relative;
    max-height: 850px;
}

@media (max-width:1400px){
    .section2{
        height: unset;
        max-height: unset;
    } 
}


.section2 .lin{
    position: absolute;
    top: 50%;
    left: 60%;
    background-color: #333333;
    padding: 20px;
    border-radius: 50%;
    height: 60px;
    width: 60px;
    cursor: pointer;
}

.circ{
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    transform: rotate(7deg);
    justify-content: center;
}

@media (max-width:1400px){
    .circ{
        opacity: .2;
    }
}


.circ .div{
    top: 20%;
}

.circ .divx{
    position: absolute;
    z-index: 1;
    height: 400px;
    width: 320px;
    transform:rotate(15deg) translateX(-50px) translateY(-100px);
    background: linear-gradient(90deg,rgba(255, 255, 255,0.5)  /*#fff9c0*/,transparent);
     border-radius: 50%; 
}

.circ .div1{
    z-index: 2;
    position: absolute;
    height: 400px;
    width: 260px;
    transform: rotate(193deg);
    background-color: /*#f6cac2*/ rgba(255, 255, 255,0.1) ;
     border-radius: 38% 62% 33% 67% / 39% 34% 66% 61%; 
}

.circ .div2{
    z-index: 2;
    position: absolute;
    height: 420px;
    width: 240px;
    transform: rotate(206deg) translateX(30%);
    background-color: /*#fd81ee*/ rgba(255, 255, 255,0.1);
     border-radius: 38% 62% 33% 67% / 39% 34% 66% 61%; 
}


.circ .div3{
    z-index: 2;
    position: absolute;
    height: 280px;
    width: 200px;
    transform:translate(-50%) rotate(230deg);
    left: 42%;
    top: 27%;
    background-color: /*var(--o-violet)*/ rgba(255, 255, 255,0.1);
     border-radius: 38% 62% 33% 67% / 39% 34% 66% 61%; 
     box-shadow: -70px 10px 25px /*rgba(105, 63, 189,0.7)*/ rgba(255, 255, 255,0.1);
     overflow: hidden;
}

.circ .div3 .div33{
    display: none;
    position: absolute;
    top: 6%;
    left: 50%;
    transform:rotate(10deg) translateX(-50%);
    width: 80%;
    height: 40%;
    background: linear-gradient(90deg,rgba(255, 255, 255,0.5),transparent);
    border-radius: 100%;
}

.section2>.div-cont{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 100px;
}

@media (max-width:1400px){
    .section2>.div-cont{
        display: flex;
        flex-direction: column-reverse;
    }
}

.section2>.div-cont .div1{
    color: #fff;
    transform: translateY(-30px);
    padding-inline: 30px;
    display: flex;
    align-items: center;
}

.section2>.div-cont .div1 h4{
    background-color: var(--o-white);
    padding: 8px;
    border-radius: 7px;
    color: var(--o-violet);
    width: 120px;
}

.section2>.div-cont .div1 h1{
    font-size: 2.6em;
/*    background: linear-gradient(180deg,transparent,#fff,#fff);*/
    -webkit-background-clip: text;
    color: white;
}

@media (max-width:768px){
   .section2>.div-cont .div1 h1{
    font-size: 2em;
   } 
}

.section2>.div-cont .div2{
    display:grid;
    place-items:center;
}

.section2>.div-cont .div2 p{
    color: #aeaeae;
    padding:80px 150px;
}

@media (max-width:768px){
    .section2>.div-cont .div2 p{
        padding: 80px 20px;
    }
}

.section2>.div-cont .div2 .images{
    position:relative;
    border: 1px solid #a3a3a3;
    border-top-color: #838383;
    border-bottom-color: #838383;
    display: flex;
    justify-content: center;
    border-radius: 40px;
    width: 220px;
    padding:8px;
}



.section2>.div-cont .div2 .images .img{
    transform: translateX(23px);
    display: flex;
}

.section2>.div-cont .div2 .images .head{
    border-radius: 50%;
    background-color: #fde305;
    display: grid;
    place-content: center;
    object-fit: cover;
    height: 64px;
    width: 64px;
}

.section2>.div-cont .div2 .images .head1{
    z-index:1;
}

.section2>.div-cont .div2 .images .head2{
    transform:translateX(-15px);
    z-index: 2;
}

.section2>.div-cont .div2 .images .head3{
    transform:translateX(-30px);
    z-index:3;
}

.section2>.div-cont .div2 .images .head4{
    transform:translateX(-45px);
    z-index:4;
}

.section2>.div-cont .div2 h3{
    color: #fff;
    position: absolute;
    bottom: -55%;
}

.section2>.div3{
    justify-content: center;
    display: flex;
    color:  #fff;
    position: absolute;
    bottom: 0%;
    width: 100%;
}

.section2>.div3 section{
    display: flex;
    padding-block: 80px;
    width: 100%;
}

@media (max-width:1400px){
  .section2>.div3 section{
    display: block;
    }
    .section2>.div3{
        position: relative;
    }

}

.section2>.div3 div{
    text-align: center;
    padding: 30px;
    margin-inline: 20px;
    border-radius: 100px;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);

}

.section2>.div3 div:nth-child(1){
    transform: translateY(-50px);
    border: 1px solid #838383;
}


.section2>.div3 div:nth-child(4){
    transform: translateY(-50px);
    border: 1px solid #838383;
}

.section2>.div3 div:nth-child(2){
    transform: translateY(-80px);
    border: 1px solid #838383;
}

.section2>.div3 div:nth-child(3){
    background: linear-gradient(180deg,#693fbd,transparent,transparent,transparent);
}

@media (max-width:1400px){
    .section2>.div3 div{
        margin-block: 30px;
        font-size: 1.6em;
        padding: 55px;
    }

    .section2 .lin{
        display: none;
    }

  .section2>.div3 div:nth-child(1),.section2>.div3 div:nth-child(2),.section2>.div3 div:nth-child(4){
    transform: translateY(0px);
    }

}


@media (max-width:900px){
    .section2>.div3 div{
        padding: 40px;
        font-size: unset;
    }
}

@media (max-width:800px){
    .section2>.div3 div{
        padding: 30px;
        font-size: unset;
    }
}

.section2>.div3 h1{
    display: flex;
    gap: 10px;
}

.section2>.div3 span{
    background-color:#3d3d3d;
    padding:10px 20px;
    margin: auto;
    position: relative;
    border-radius: 3px;
    transition: all .3s ease;
    cursor: pointer;
    overflow: hidden;
} 

.section2>.div3 span:hover{
    background-color:#ffe608;
}

.section2>.div3 span::before{
    content: '';
    background-color: black;
    height: 24px;
    width: 20px;
    top: -18%;
    left: -15%;
    position: absolute;
    transform: rotate(45deg);
}  

.section2>.div3 span::after{
    content: '';
    background-color: black;
    height: 24px;
    width: 20px;
    bottom: -18%;
    right: -15%;
    position: absolute;
    transform: rotate(45deg);
}  


/*********************************************** SECTION 3 ********************************/

.section3{
    position: relative;
/*    padding: 70px;    */
    animation: mov-up both;
/*    animation-timeline: view();*/
/*    max-height: 1200px;*/
    background-color: #aeaeae1a;
}

.section3 .ap{
    position: absolute;
    z-index: 4;
    height: 40vh;
    top: 37%;
    left: 10%;
    transform: translate(-50%,0%);
    width: 16%;
    transform: translateX(-40%);
/*    background:url(images/b2.jpg);*/
    background-color: black;
    background-size: cover;
}

@media (max-width:1000px){
    .section3 .ap{
        display: none;
    }
}


.section3 .ap h1,.section3 .ap h1{
    font-family: ubuntu;
    font-weight: bolder;
}

.section3>h4{
    color:#797979;
    text-transform: uppercase;
}

.section3>h4 span{
    padding: 8px;
    color: var(--o-violet);
}


.section3 .dflex{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    padding: 50px 0px;
}

@media (max-width:1200px){
    .section3{

    }
   .section3 .dflex{
    display: block;
   } 

   .section3{
/*    padding: 20px;*/
   }
}

.section3 .dflex h1{
    font-weight: 700;
    font-family: ubuntu;
    font-size: 1.6em;
}

.section3 .dflex h1 span{
    color: var(--o-violet);
}

.section3 .dflex .div1{
    padding-left: 50px;
    font-size: 2em;
}

.section3 .dflex .ima{
    text-align: center;
}

@media (max-width:1200px){
    .section3 .dflex .ima{
        display: none;
    }
}

.section3 .dflex .ima img{
    height: 60vh;
    width: 30vw;
    margin: auto;
    border-top-right-radius: 230px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    object-fit: cover;
    box-shadow: -15px 20px var(--o-violet);
}

.section3>.div1{
    gap: 60px;
    width: 70%;
    margin: auto;
}

@media (max-width:900px){
    .section3>.div1{
        width: 100%;
    }
}


.section3>.div1 .img img{
    height: 100%;
    filter: grayscale(100%) contrast(90%);
    object-fit: cover;
}


.section3>.div1 button{
    margin-top: 30px;
    margin-left: 20px;
    border-radius: 3px;
    font-size: .7em;
    font-weight: 600;
    display: flex;
    border: none;
    background-color: rgba(253, 227, 5,.5);
    color: black;
    padding: 20px 30px 20px 20px;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);
}


.section3>.div2{
    margin: auto;
    width: 81.8%;
    float: right;
}

@media (max-width:900px){
    .section3>.div2{
        width: 100%;
    }
}

.section3>.div2>div{
    border: 1px solid #BCBCBC;
    padding-inline: 23px;
}

.section3>.div2 img{
    height: 60px;
    margin-bottom: 30px;
}


.section3>.div2 h3{
    margin-bottom: 50px;
}



/***************************************** SECTION 4 **********************************************/

.section4{
    padding-block: 20px;
    display: flex;
    justify-content: center;
    background-color: black;
    color: white;
    z-index:5;
    padding-inline:30px;
   gap: 100px;
}

.section4 .div1{
    background-color: rgba(255, 255, 255,0.1);
    padding: 30px;
}

.section4 .dflex{
    display: flex;
    align-items: flex-start;
    column-gap: 20px;
    border-bottom: 1px solid #484848;
    padding-bottom: 20px;
}

@media (max-width:900px){
    .section4{
        text-align: center;
    padding-inline:17px;
        display: block;
   } 

   .section4 .dflex{
        justify-content: center;
        border-bottom: unset;
   }
    .section4 .div1{
        margin-bottom: 80px;
    }

}

.section4 .dflex h1{
    font-size: 3em;
    font-weight: 900;
    font-family: ubuntu;
}

.section4 .dflex span{
    color: rgba(253, 227, 5,.5);
    font-size: 2em;
}


.section4 p{
    padding-top: 30px;
    font-size: 1.2em;
    color: #a5a5a5;
}


/******************************************************************** SERVICES PAGE *********************************/

.s-section1{
    position: relative;
    max-width: 1800px;
    padding-top: 70px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 30px;
    width: 98%;
    border-radius: 30px;
    background-image:linear-gradient(90deg,rgba(255, 255, 255,1),rgba(255, 255, 255, 0)),url(images/b21.jpg);
    background-position: center;
    background-size: cover;
    overflow: hidden;
    height: 60vh;
    max-height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.s-section1 .text{
    text-align: center;
}

.s-section1 .text h1{
    font-size: 4rem;
    color: #000;
    padding-block: 20px;
    font-weight: 700;
    font-family: ubuntu;
}

@media(max-width:500px){
    .s-section1{
        height: 56vh;
    }
    .s-section1 .text h1{
        font-size: 2rem;
    }
}

.s-section1 .text div{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-inline:5px;
    padding-top: 15px;
    padding-top: 11px;
    color: #000;
    font-weight: 600;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--o-violet);
}

.s-section1 .text div .triple-arrow{
    color: #fde305;
}

.s-section1 .curved-edges{
    position: absolute;
    width: 20%;
    background-color: #fff;
    height: 90px;
    left: 80%;
    top: 0;
    z-index: 5;
    border-bottom-left-radius: 40px;
}


.s-section1 .curved-edges::after{
    position: absolute;
    right: 0%;
    height: 50px;
    width: 50px;
    background-color:transparent;
    bottom: -50px;
    border-top-right-radius: 40px;
    box-shadow: 1.2rem -.375rem #fff;
    content: "";
}

.s-section1 .curved-edges::before{
    position: absolute;
    left: -50px;
    height: 50px;
    width: 50px;
    background-color:transparent;
    top: 0px;
    border-top-right-radius: 40px;
    box-shadow: 1.2rem -.375rem #fff;
    content: "";
}


/***************************************************************** SERVICES PAGES **********************************/

.s-section3{
    background-color: #000;
    padding-top: 10px;
    padding-inline: 5px;
    display: grid;
    grid-template-columns: .7fr 1fr;
    height: 135vh;
    max-height: 1000px;
    gap: 50px;

}

@media (max-width:1100px){
    .s-section3{
        height: unset;
        max-height: unset;
    }
}

@media (max-width:700px){
    .s-section3{
        display: block;
    }
}

.s-section3 .image{
    background: url(images/t8.jpg);
    background-size: cover;
    background-position: right;
    filter: grayscale(100%);
    position: relative;
}

.s-section3 .image::before{
    position: absolute;
    content: '';
    height: 29%;
    width: 15%;
    background-color: black;
    bottom: 0;
    right: 0;
    transform: rotate(20deg) translateY(10px) translateX(55px);
}

.s-section3 .dgrid{
    display: grid;
    padding-top: 40px;
    padding-bottom: 40px;
    grid-template-columns: repeat(2, 1fr);
    color: white;
    z-index: 6;
    gap: 70px;
}

@media (max-width:1000px){
    .s-section3 .dgrid{
        display: flex;
        flex-direction: column;
        gap: 70px;
    }
}


.s-section3 .dgrid .div1{
    row-gap: 30px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    }

.s-section3 .dgrid .div1 a{
    color: white;
    text-decoration: none;
    position: relative;
    transition: all .2s ease;
    width: 140px;
}

.s-section3 .dgrid .div1 a:hover{
    color: rgba(255, 255, 255,0.5);
}


.s-section3 .dgrid .div1 a::before{
    content: '';
    position: absolute;
    bottom: -10px;
    width: 30px;
    height: 1px;
    background-color: var(--o-yellow);
    transition: all.3s ease;
}

.s-section3 .dgrid .div1 a:hover::before{
    width: 80px;
}

.s-section3 .dgrid img{
    height: 60px;
}





/***************************************************************** SERVICES PAGES **********************************/

.service-section2{
    background:linear-gradient(180deg,rgba(0, 0, 0,.7),rgba(0, 0, 0,.7)), url(images/techai.png), rgb(18, 16, 29);
    background-size: contain;
    display: grid;
    grid-template-columns: .8fr 1fr;
    gap: 20px;
    padding:60px 20px 140px;
    margin: auto;
    position: relative;
    max-width: 1800px;
}

.service-section2 .images{
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    position: relative;
}

.service-section2 .images .dots{
    position: absolute;
    left: 40%;
    transform: translateY(20px) translateX(-50%);
    height: 60vh;
    width: 60%;
    border-radius: 140px;
    border: 1px dotted #e4ce06;
    z-index: 1;
}

.service-section2 .images .box1 img{
    height: 40px;
}

.service-section2 .images div{
    height: 60vh;
    max-height: 500px;
    width: 300px;
    position: relative;
    z-index: 2;
    border-radius: 10px;
}


@media (max-width:1200px){
    .service-section2 .images{
        gap: 10px;
    } 

    .service-section2 .images div{
        height: 40vh;
        width: 210px;
    }    
    
}

@media (max-width:900px){
    .service-section2{
        display: block;
    }
    .service-section2 .images{
        display: none;
    }    
    
}

.service-section2 .images .box1{
    position: absolute;
    left: 73%;
    top: 50%;
    transform:translateY(-50%);
    height: 150px;
    width: 150px;
    font-size: .8em;
    text-align: center;
    z-index: 3;
    background-color: rgba(70, 177, 249,.8);
    color: #fff;
    display: grid;
    place-items: center;
    border-radius: 7px;
}

.service-section2 .text h3{
    color: #693fbd;
}

.service-section2 .text h1{
    color: #fff;
    font-size: 2.5em;
    font-family: poppins-medium;
    padding-block: 15px;
    padding-inline: 10px;
}

.service-section2 .text h1 span{
    color: transparent;
    -webkit-text-stroke: 1px #e4ce06;
}

.service-section2 .text p{
    color: #cacaca;
    padding-block: 15px;
    /* padding-inline: 25px; */
}

.service-section2 .text>p{
    padding-inline: 25px;
}

.service-section2 .text .flex{
    display: flex;
    gap: 30px;
    color: #fff;
    margin-top: 40px;
}

.service-section2 ul{
    list-style: none;
    padding-top: 20px;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width:768px){
    .service-section2 ul{
        padding-left: 0px;
    }
}




/***************************************************************** ABOUT PAGE **********************************/


.a-section1{
    position: relative;
    max-width: 1800px;
    padding-top: 70px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-block: 30px;
    width: 98%;
    border-radius: 30px;
    background: linear-gradient(90deg,rgba(255, 255, 255, 0.2),rgba(40, 39, 43,0.8)),url(images/bannerxx.png);
    background-position: center;
    background-size: cover;
    overflow: hidden;
    height: 60vh;
    max-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.a-section1 .text{
    text-align: center;
}

.a-section1 .text h1{
    font-size: 4.4rem;
    color: #fff;
    padding-block: 20px;
}

@media(max-width:500px){
    .a-section1 .text h1{
        font-size: 3rem;
    }
}

.a-section1 .text div{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-inline:5px;
    padding-top: 15px;
    padding-top: 11px;
    color: #fff;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--o-violet);
}

.a-section1 .text div p:nth-child(2){
    color: #fde305;
}

.a-section1 .curved-edges{
    position: absolute;
    width: 20%;
    background-color: #fff;
    height: 90px;
    left: 80%;
    top: 0;
    z-index: 5;
    border-bottom-left-radius: 40px;
}


.a-section1 .curved-edges::after{
    position: absolute;
    right: 0%;
    height: 50px;
    width: 50px;
    background-color:transparent;
    bottom: -50px;
    border-top-right-radius: 40px;
    box-shadow: 1.2rem -.375rem #fff;
    content: "";
}

.a-section1 .curved-edges::before{
    position: absolute;
    left: -50px;
    height: 50px;
    width: 50px;
    background-color:transparent;
    top: 0px;
    border-top-right-radius: 40px;
    box-shadow: 1.2rem -.375rem #fff;
    content: "";
}



.a-section5{
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 95%;
    overflow: hidden;
}

@media (max-width:768px){
    .a-section5{
        padding-top: 0px;
        padding-bottom: 0px;
    }
}


@media (max-width:1000px){
    .a-section5{
        display: block;
    }
}



.a-section5 .images{
    height: 100%;
    background-color: #F7F7F7;
}

.a-section5 .images img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    filter: grayscale(90%) contrast(70%);
}

.a-section5 .images .wavy img:nth-child(2){
    transform: translateY(60px);
}

.a-section5 .wavy .bar{
    position: absolute;
    left: 5%;
    top: 0;
}


@media (max-width:1000px){
    .a-section5 .images .wavy{
        display: none;
    }
}

.a-section5 .text{
    position: relative;
    z-index: 10;
    padding-inline: 40px;
}

.a-section5 .text p{
    color: #525252;
    font-size: .9em;
}

.a-section5 .text h3{
    color:#693fbd;
    font-weight: 400;
    font-size: 1.2em;
    font-weight: 700;
}

.a-section5 .text h1{
    font-size: 3em;
    font-weight: 500;
    line-height: 50px;
    margin-top: 12px;
    margin-bottom: 32px;
}

@media (max-width:768px){
    .a-section5 .text h1{
        font-size: 2em;
        line-height: 40px;
    }
}

@media (max-width:500px){
    .a-section5 .text h1{
        font-size: 1.6em;
        line-height: 40px;
    }
}

.a-section5 .text button{
    margin-top: 20px;
    padding: 20px 16px;
    border-radius: 30px;
    background-color: #000;
    font-weight: 700;
    border: none;
    outline: none;
    color: #fff;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.a-section5 .text button span{
    position: relative;
    z-index: 2;
}

.a-section5 .text button::after{
    content: "";
    width: 80%;
    top: 0;
    height: 100%;
    left: 0;
    z-index: 0;
    position: absolute;
    background-color: #12101d;
    border-bottom-right-radius: 30px;
    transition: all .4s ease;
}

.a-section5 .text button:hover::after{
    width: 100%;
}

.a-section5 .text button .fa-arrow-right{
    margin-left: 10px;
    z-index: 2;
    position: relative;
}

.a-section2{
    position: relative;
    max-width: 1800px;
    /* padding-top: 70px; */
    /* background: linear-gradient(90deg,rgba(0, 0, 0, 0.6),#28272b),url(../images/team8.jpg); */
    background-position: center;
    background-size: cover;
    overflow: visible;
    /* height: 60vh; */
    max-height: 600px;
    
}
.a-section2>h1{
    display: none;
    color: #fff;
    font-size: 3.5em;
    font-weight: 400;
    padding-left: 40px;
}

.a-section2 .contact{
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* padding-inline: 50px; */
    padding-block: 70px;
    border-radius: 20px;
    background:linear-gradient(90deg,rgba(255, 255, 255, .6),rgba(255, 255, 255, .6),transparent), url(images/104.jpg);
    background-size: cover;
    background-position: bottom;
    width: 90%;
    margin-inline: auto;
    /* transform: translateY(40px); */
}


.a-section2 .contact h1{
    color: #000;
    font-size: 3em;
}

@media (max-width:600px){
    .a-section2 .contact{
        display: block;
        padding-block: 30px;
        padding-inline: 10px;
    }
    .a-section2 .contact h3{
        font-size: .9em;
    }


    .a-section2 .contact h1{
        font-size: 1.4em;
        line-height: 40px;
    }
}


.a-section2 button{
    margin-top: 20px;
    padding: 20px 16px;
    border-radius: 30px;
    background-color: #000;
    font-weight: 700;
    border: none;
    outline: none;
    color: #fff;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    font-size: 1em;
}

.a-section2 button span{
    position: relative;
    z-index: 2;
}

.a-section2 button::after{
    content: "";
    width: 80%;
    top: 0;
    height: 100%;
    left: 0;
    z-index: 0;
    position: absolute;
    background-color: #12101d;
    border-bottom-right-radius: 30px;
    transition: all .4s ease;
}

.a-section2 button:hover::after{
    width: 100%;
}

.a-section2 button .fa-arrow-right{
    margin-left: 10px;
    z-index: 2;
    position: relative;
}



.a-section3{
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    overflow: hidden;
}

@media (max-width:1000px){
    .a-section3{
        display: block;
    }
}



.a-section3 .images{
    padding-block: 40px;
}
.a-section3 .images .wavy{
    z-index: 5;
    left: 0%;
    height: 90vh;
    max-height: 900px;
    width: 85%;
    background: linear-gradient(90deg,rgba(255, 255, 255, .6),transparent),url(images/vector-pc.png);
    background-size: cover;
    background-position: center;
    position: relative;
}

.a-section3 .images .wavy1{
    max-height: 800px;
    border-radius: 70% 30% 33% 67% / 68% 34% 66% 32%   ;
    position: absolute;
    transform: rotate(-30deg);
    z-index: 4;
    opacity: .5;
    top: 20%;
    left: 0;
    height: 60vh;
    width: 90%;
    background: var(--o-violet);
}

@media (max-width:1000px){
    .a-section3 .images .wavy{
        display: none;
    }
}

.a-section3 .images .circ{
    position: absolute;
    z-index: -1;
    height: 400px;
    width: 400px;
    border-radius: 50%;
    right: -20%;
    opacity: .5;
    top: 10%;
    background-color: #693fbd;
}



.a-section3 .text{
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    padding-inline: 60px;
}

@media (max-width:768px){
    .a-section3 .text{
        padding-top: 30px;
        padding-inline: 20px;
    }
}

.a-section3 .text .p1{
    padding: 5px;
    border-radius: 40px;
    border: 1px solid black;
    width: 44%;
    text-align: center;
    text-transform: uppercase;
}

.a-section3 .text h3{
    color: #e4ce06;
}

.a-section3 .text h1{
    font-size: 2.6em;
    line-height: 50px;
    margin-top: 12px;
    margin-bottom: 32px;
}

@media (max-width:400px){
    .a-section3 .text h1{
        font-size: 1.5em;
        line-height: 40px;
        margin-bottom: 15px;
    }
}

.a-section3 .text p{
    color: #3f3f3f;
    padding-bottom: 20px;
}

.a-section3 .text .why{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding-block: 30px;
    gap: 10px;
    font-weight: 600;
    font-size: .9em;
}

.a-section3 .text .why img{
    height: 20px;
}

.a-section3 .text button{
    margin-top: 20px;
    padding: 20px 16px;
    border-radius: 30px;
    background-color: #000;
    font-weight: 700;
    border: none;
    outline: none;
    color: #fff;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.a-section3 .text button span{
    position: relative;
    z-index: 2;
}

.a-section3 .text button::after{
    content: "";
    width: 80%;
    top: 0;
    height: 100%;
    left: 0;
    z-index: 0;
    position: absolute;
    background-color: #12101d;
    border-bottom-right-radius: 30px;
    transition: all .4s ease;
}

.a-section3 .text button:hover::after{
    width: 100%;
}

.a-section3 .text button .fa-arrow-right{
    margin-left: 10px;
    z-index: 2;
    position: relative;
}


/******************************************** SECTION-REASON **********************************/

.section6{
    background: linear-gradient(90deg,white,rgba(243, 243, 243,1),rgba(243, 243, 243,.3),transparent),url(images/h5.jpg);
    background-size: cover;
    padding-block: 80px;
    background-position: top;
}

.section6>div{
    padding: 20px 10px;
    background-color: white;
    width: 30vw;
    display: flex;
    align-items: center;
    margin-block: 20px;
    border-radius: 7px;
    -webkit-clip-path: polygon(0% 0%, calc(100% - 24px) 0%, 100% 24px, 100% 100%, 0% 100%);
}

@media (max-width:900px){
    .section6>div{
        width: 60vw ;
    }
}

@media (max-width:650px){
    .section6>div{
        width: unset;
    }
}


.section6 h1 span{
    color: var(--o-violet);
    padding-right: 25px;
}

.section6>div div{
    display: flex;
    gap: 30px;
}

.section6>div div span{
    background-color: rgb(243, 243, 243);
    padding:4px 10px;
    font-family: ubuntu;
    cursor: pointer;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section6>div div span:hover{
    background-color: rgba(243, 243, 243,.7);
}


.section6 button{
    cursor: pointer;
    position: relative;
    margin-top: 30px;
    margin-left: 20px;
    border-radius: 3px;
    display: flex;
    border: none;
    background-color:rgba(63, 35, 119,.86);
    color: white;
    padding: 20px 30px 20px 20px;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);
}


/******************************************** FOOTER **********************************/
footer{
    max-width: 1840px;
    margin: auto;
    position: relative;
    background: linear-gradient(to top, rgba(0, 0, 0,0.9)50%,rgba(0, 0, 0,0.9)50%),url(images/t2.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

footer .content{
    padding-inline: 60px;
    margin: auto;
    position: relative;
    padding-top: 70px;
    border-radius: 3px;
}

@media (max-width:768px){
    footer .content{
        padding-inline: 20px;
        padding-inline: 30px;
    }    

}

.s-footer{
    padding-top: 0px;
}

.slid{
    background-color: transparent;
    overflow: hidden;
    position: relative;
    font-size: 2.2em;
    padding-block:15px;
    border:1px solid #373737;

}


footer::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 120px;
    width: 90px;
    background-color: white;
    z-index: 100;
    transform: rotate(-30deg) translateX(67px) translateY(0px);
}







.slid span{
    background-color:#3d3d3d;
    padding:10px 30px;
    display: flex;
    justify-content: center;
    margin: auto;
    position: relative;
    border-radius: 3px;
    transition: all .3s ease;
    cursor: pointer;
    overflow: hidden;
} 

.slid ul:hover span{
    cursor: pointer;
    background-color:rgba(253, 227, 5,.5);
}

.slid span::before{
    content: '';
    background-color: black;
    height: 24px;
    width: 20px;
    top: -18%;
    left: -15%;
    position: absolute;
    transform: rotate(45deg);
}  

.slid span::after{
    content: '';
    background-color: black;
    height: 24px;
    width: 20px;
    bottom: -18%;
    right: -15%;
    position: absolute;
    transform: rotate(45deg);
}












@keyframes movetext {
  0% {
    transform: translate(0,0);
  }
 100% {
    transform: translate(-170%,0);
  }
}

.slid ul{
    cursor: pointer;
    padding-inline: 20px;
    display: flex;
    list-style: none;
    white-space: nowrap;
    gap: 30px;
    padding-block: 10px;
    animation: movetext 80s linear infinite;
    align-items: center;
}

.slid ul li{
    font-size: 3em;
    font-weight: 400;
    -webkit-text-stroke: 1px #fff;
    color: transparent;
}


.slid ul span{
    font-size: 1em;
    color: #fff;
}



footer .content .grid{
    display: grid;
    padding-top: 30px;
    padding-bottom: 20px;
    grid-template-columns: 1.3fr 1fr 1fr;
    color: #fff;
}

@media (max-width:870px){
    footer .content .grid{
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width:767px){
    footer .content .grid{
        display: block;
    }
}

footer .content .grid>div h1 img{
    height: 140px;
    opacity: .4;
}

footer .content .grid>div h3{
    padding-bottom: 17px;
    margin-bottom: 22px;
    position: relative;
}

footer .content .grid>div h3::before{
    content: '';
    position: absolute;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: white;
    z-index: 2;
}


footer .content .grid>div h3::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 130px;
    height: 1.5px;
    background-color:  #373737;
    left: 0;
    z-index: 1;
}

footer .content .grid>div{
    padding-inline: 20px;
}

footer .content .grid>div p{
    padding-block: 10px;
    color: #757779;
    font-size: .9em;
}

footer .content .grid>div li{
    list-style: none;
    color: #c7c7c7;
    font-size: 1.1em;
    position: relative;
    margin-bottom: 25px;
}

footer .content .grid>div li::before{
    position: absolute;
    left: -5%;
    top: 50%;
    transform: translateY(-50%);
    height: 7px;
    width: 7px;
    content: '';
    background-color: rgba(253, 227, 5,.5);
}


footer p{
    width: 100%;
    padding-block: 30px;
    color: #c7c7c7;
    /* font-weight: 600; */
    text-align: center;
    border-top: 1px solid rgba(117, 119, 121,.1);
}

footer p a{
    text-decoration: none;
    color: var(--o-violet);
}



footer .content .grid .b2{
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 15px;
    background-color: #1c192e;
    font-weight: 700;
    border: none;
    outline: none;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: none;
    cursor: pointer;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 17px), calc(100% - 24px) 100%, 0% 100%);
}

footer .content .grid .b2 span{
    position: relative;
    z-index: 4;
}

footer .content .grid .b2::after{
    content: "";
    width: 100%;
    top: 0;
    height: 100%;
    right: 0;
    position: absolute;
    background-color: var(--o-violet);
    transition: all .4s ease;
}

footer .content .grid .b2:hover::after{
    width: 0%;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;

}

footer .content .grid .b2 .fa-arrow-right{
    margin-left: 20px;
    z-index: 2;
    position: relative;
}

@keyframes aos-show {
    0%{
        opacity: 0;
        transform: translateY(40px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }

}

@keyframes aos-hide {
    0%{
        opacity: 1;
        transform: translateY(0px);
    }
    100%{
        opacity: 0;
        transform: translateY(40px);
    }


}


h1.aos-show,h2.aos-show,h3.aos-show,p.aos-show{
    animation: aos-show 1s forwards;
}

h1.aos-hide,h2.aos-hide,h3.aos-hide,p.aos-hide{
    animation: aos-hide 1s forwards;
}

.section5{
/*    height: 130vh;*/
/*    max-height: 900px;*/
    background: url(images/h5.jpg);
    background-size: cover;
    padding-inline: 50px;
    background-position: left;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 100px), calc(100% - 54px) 100%, 0% 100%);
}

.section5 .text{
    height: 100%;
    width: 45%;
    background: rgba(255, 255, 255,.94);
    padding: 25px;
    box-shadow: 120px 70px  rgba(255, 255, 255,0.4);
}

.section5 .text h1{
    font-size: 2em;
    font-family: ubuntu;
    margin-bottom: 30px;
}

.section5 .text h3{
    font-family: ubuntu;
    margin-bottom: 20px;
}

@media (max-width:1000px){
    .section5{
        padding-inline: 10px;
    }

    .section5 .text{
        width: 100%;
    }
}


.section5 .text ul{
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    padding-inline: 20px;
    margin-bottom: 40px;
}

.section5 .text ul li{
    font-family: ubuntu;
    border-radius: 6px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 10px;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0,.04);
}

.section5 .text #forms{
    padding: 20px;
    position: relative;
}

.section5 .text #forms .input{
    display: flex;
    flex-direction: column;
    font-family: ubuntu;
    gap: 15px;
}

.section5 .text #forms .input input, .section5 .text #forms textarea{
    border: 0;
    position: relative;
    background-color: transparent;
}

.section5 .text #forms .input label,.section5 .text #forms label{
    position: relative;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #dadada;
    padding: 16px 5px;
    font-size: .7em;
    text-transform: uppercase;
    font-family: ubuntu;

}

.section5 .text #forms textarea{
 font-family: ubuntu;
}

.section5 .text #forms label::before{
    position: absolute;
    bottom: -1%;
    left: 0;
    content: '';
    height: 2px;
    background-color: var(--o-yellow);
    width: 5px;
    z-index: 10;
    transition: all .4s ease;
}

.section5 .text #forms .input input{
    padding-top: 6px;
    padding-left: 6px;
    font-size: 1.36em;
}

.section5 .text #forms textarea{
    font-size: 1.36em;
}

.section5 .text #forms .input input:focus,.section5 .text #forms textarea:focus{
    outline: none;
    font-size: 1.3em;
}

.section5 .text #forms .input input::placeholder,.section5 .text #forms textarea::placeholder{
    font-size: 1.3em;
    font-family: ubuntu;
    transition: all .4s ease;
}

.section5 .text #forms .input input:focus::placeholder,.section5 .text #forms textarea:focus::placeholder{
    font-family: ubuntu;
    font-size: 1.3em;
}

.section5 .text #forms .input label:has(input:focus)::before,.section5 .text #forms label:has(textarea:focus)::before{
    width: 140px;
}


.section5 .g-recaptcha{
    margin-block: 30px;
    overflow: hidden;
    height: 100px;
}



.section5 button{
    cursor: pointer;
    position: relative;
    margin-top: 30px;
    margin-left: 20px;
    border-radius: 3px;
    display: flex;
    border: none;
    background-color:rgba(63, 35, 119,.86);
    color: white;
    padding: 20px 30px 20px 20px;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);
}



.section5 button span{
    position: relative;
    z-index: 4;
}

.section5 button::after{
    content: "";
    width: 100%;
    top: 0;
    height: 100%;
    right: 0;
    position: absolute;
    background-color: var(--o-violet);
    transition: all .4s ease;
}

.section5 button:hover::after{
    width: 0%;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;

}

.section5 button .fa-arrow-right{
    margin-left: 20px;
    z-index: 2;
    position: relative;
}