*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.container{
    width:80%;
    margin:auto;
}
main{
    background: rgb(0,9,93);
background: linear-gradient(90deg, rgba(0,9,93,1) 35%, rgba(11,11,33,1) 100%);
color:#fff;
font-family:'Josefin Sans',sans-serif;
padding-block-end:50px;
}
main header{
    margin-block-end:30px;
}
li{
    list-style-type: none;
}
a{
    text-decoration: none;
    color:#fff;
}
button{
    border:#fff 2px solid;
    border-radius:30px;
    outline:none;
    padding:15px 50px;
    background:transparent;
    color:#fff;
    font-family: 'Josefin Sans',sans-serif;
    cursor:pointer;
    font-size:20px;
    font-weight:600;
    display: flex;
    align-items: center;
}
header .logo img{
    width:150px;
}
header nav .container,.left{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.navigation ul{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.navigation ul li{
    padding-inline-end:30px;
}
.right button{
    transition:0.5s;
}
.right button:hover{
    color:#FF4495;
    background:#fff;
    opacity:0.8;
}
.preview .container{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}
.preview .container div{
    flex:1;
    width:50%;
}
.robot{
    width:100%;
    display:flex;
    justify-content: flex-end;
}
.preview img{
    width:400px;
    display:block;
}
.preview .info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 2em;
}
.info h1{
    font-size:2.5em;
    line-height:1.6em;
    padding-block-end:15px;
    font-weight: 600;
}
.info p{
    font-size:1.2em;
    line-height:2em;
}
.info button{
    margin-block-start: 30px;
    background: rgb(255,70,147);
background: linear-gradient(360deg, rgba(255,70,147,1) 23%, rgba(255,106,113,1) 65%);
border:none;
}
.info button:hover{
    opacity:0.9;
    box-sizing:border-box;
    box-shadow: -1px 2px 25px -14px rgba(0,0,0,0.75);
-webkit-box-shadow: -1px 2px 25px -14px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 2px 25px -14px rgba(0,0,0,0.75);
}

#services .container{
    display:flex;
    flex-direction: column;
    font-family:'Josefin Sans',sans-serif;
}
#services{
    padding-block-start:50px;
}
.services-boxes{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:3em;
}
.services-header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-block-end:50px;
    text-align:center;
}
.services-header h4{
    background: -webkit-linear-gradient(360deg, rgba(255,70,147,1) 23%, rgba(255,106,113,1) 65%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-block-end:20px;
    font-weight: 600;
    font-size:1.1em;
}
.services-header h2{
    font-weight: 600;
    color:#232F55;
    font-size:3em;
}
.wrapper{
    width:90%;
    margin-right:auto;
    display:flex;
    flex-direction: column;
    line-height:1.6em;
    text-align: center;
}
.wrapper img{
    width:40%;
    display:block;
    margin:auto;
    margin-block-end:50px;
    padding:5px;
    border:5px #fff solid;
}
#joinus{
    background-image: url("computer.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding:100px 0;
    margin-block-start:100px;
    color:#fff;
    font-family:'Josefin Sans',sans-serif;
    line-height:1.6em;
}
#joinus .container{
    display: flex;
    flex-direction: row;
}
.block:nth-of-type(2){
    display: flex;
    justify-content: flex-end;
}
.block i{
    font-size: 300px;
    color:#662C91;
    
}
.block{
    flex:1;
}
#joinus button:hover{
    opacity:0.7;
}
#joinus h2{
    font-size:2.5em;
    line-height: 1.6em;
    margin-block-end: 20px;
}
#joinus p{
    font-size:1.3em;
    line-height: 1.6em;
    margin-block-end:20px;
}
footer{
    background-color:rgb(246,249,252);
    color:#232F55;
    font-family:'Josefin Sans',sans-serif;
    padding-block-start:50px;
    padding-block-end:50px;
}
footer a{
    color:#232F55;
}
footer .media{
    display:grid;
    grid-template-columns: repeat(3,1fr);
}
footer .social{
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-block-start:15px;
}
footer .social a{
    padding-inline-end:15px;
    font-size:20px;
    transition: 1s;
}
footer .social i:hover{
    color:#FF4495;
}
footer .part{
    line-height:1.6em;
}
footer h2{
    font-weight:600;
    padding-block-end:20px;
}
footer .bottom-nav a:hover{
    color:#FF4495;
}
footer h3{
    font-weight: 500;
}
footer .copyrights{
    display:flex;
    justify-content: center;
    align-items: center;
    padding-block-start:50px;
}
#aboutus{
    font-family:'Josefin Sans',sans-serif;
    min-height:300px;
    padding-block-start: 50px;
    line-height:1.6em;
    color:#232F55;
}
@media(max-width:900px){
    img{
        display:inline-block;
        margin:auto;
    }
    .container{
        width:90%;
        margin:auto;
        display: flex;
    }
    .container div{
        width:100%;
    }
    nav .container,.left,.preview .container,#services .container .services-boxes,#joinus .container,footer .contacts,footer .media,footer .container{
        display:flex;
        flex-direction: column;
        line-height:1.6em;
    }
    .logo{
        display:flex;
        justify-content: center;
        margin-block-end:20px;
    }
    .navigation{
        margin-block-end:20px;
    }
    .preview .info{
        margin-block-end:100px;
        text-align: center;
    }
    .info div{
        display: flex;
        justify-content: center;
    }
    button{
        width:100%;
        display: flex;
        justify-content: center;
        height:60px;
    }
    .preview .container div{
        width:100%;
    }
    #services{
        padding-block-start:50px;
    }
    .services-boxes .box{
        margin-block-end:50px;
    }
    #joinus .block i{
        margin-block-start:70px;
        display:flex;
        flex-direction: row;
        justify-content: center;
    }
}