@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');


.download {
    background: red;
    padding: 10px;
    border-radius: 5px;
    border: none;
    color: #fff;
    cursor: pointer;
}

.project, .one{
    color:#fff;
    background: #111;
}
.project .title::before,
.one .title::before{
    background: #111;
}
.project .title::after,
.one .title::after{
    background: #fff;
    content: "what i project";
}
.project .serv-content .card{
    width: calc(25% - 20px);
    background: #222;
    text-align: center;
    border-radius: 6px;
    padding: 50px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.project .serv-content .card:hover{
    background: crimson;
}
.project .serv-content .card .box{
    transition: all 0.3s ease;
}
.project .serv-content .card:hover .box{
    transform: scale(1.05);
}
.project .serv-content .card i{
    font-size: 50px;
    color: crimson;
    transition: color 0.3s ease;
}
.project .serv-content .card:hover i{
    color: #fff;
}
.project .serv-content .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}

/* one */
.project1, .one{    
    font-family: Arial, Helvetica, sans-serif;
    color:#fff;
    background: #111;
}
.project1 .title::before,
.one .title::before{
    background: #fff;
}
.project1 .title::after,
.one .title::after{
    background: #111;
    content: "Android App";
}
.project1 .serv-content .card{
    width: calc(80% - 20px);
    background: #222;
    text-align: center;
    border-radius: 6px;
    padding: 50px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.project1 .serv-content .card:hover{
    background: crimson;
}
.project1 .serv-content .card .box{
    transition: all 0.3s ease;
}
.project1 .serv-content .card:hover .box{
    transform: scale(1.05);
}
.project1 .serv-content .card i{
    font-size: 50px;
    color: crimson;
    transition: color 0.3s ease;
}
.project1 .serv-content .card:hover i{
    color: #fff;
}
.project1 .serv-content .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}



/* two */
.project2, .one{
    font-family: Arial, Helvetica, sans-serif;
    color:#111;
    background: #fff;
}
.project2 .title::before,
.one .title::before{
    background: #111;
}
.project2 .title::after,
.one .title::after{
    background: #fff;
    content: "Android App";
}
.project2 .serv-content .card{
    width: calc(80% - 20px);
    background: red;
    text-align: center;
    border-radius: 6px;
    padding: 50px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
}
.project2 .serv-content .card:hover{
    background: crimson;
}
.project2 .serv-content .card .box{
    transition: all 0.3s ease;
}
.project2 .serv-content .card:hover .box{
    transform: scale(1.05);
}
.project2 .serv-content .card i{
    font-size: 50px;
    color: crimson;
    transition: color 0.3s ease;
}
.project2 .serv-content .card:hover i{
    color: #fff;
}
.project2 .serv-content .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}

/* three */
.project3, .two{
    font-family: Arial, Helvetica, sans-serif;
    color:#fff;
    background: #111;
}
.project3 .title::before,
.one .title::before{
    background: #fff;
}
.project3 .title::after,
.one .title::after{
    background: #111;
    content: "Desktop Game";
}
.project3 .serv-content .card{
    width: calc(80% - 20px);
    background: #222;
    text-align: center;
    border-radius: 6px;
    padding: 50px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.project3 .serv-content .card:hover{
    background: crimson;
}
.project3 .serv-content .card .box{
    transition: all 0.3s ease;
}
.project3 .serv-content .card:hover .box{
    transform: scale(1.05);
}
.project3 .serv-content .card i{
    font-size: 50px;
    color: crimson;
    transition: color 0.3s ease;
}
.project3 .serv-content .card:hover i{
    color: #fff;
}
.project3 .serv-content .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}


/* four */
.project4, .one{
    font-family: Arial, Helvetica, sans-serif;
    color:#111;
    background: #fff;
}
.project4 .title::before,
.one .title::before{
    background: #111;
}
.project4 .title::after,
.one .title::after{
    background: #fff;
    content: "Web App";
}
.project4 .serv-content .card{
    width: calc(80% - 20px);
    background: red;
    text-align: center;
    border-radius: 6px;
    padding: 50px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
}
.project4 .serv-content .card:hover{
    background: crimson;
}
.project4 .serv-content .card .box{
    transition: all 0.3s ease;
}
.project4 .serv-content .card:hover .box{
    transform: scale(1.05);
}
.project4 .serv-content .card i{
    font-size: 50px;
    color: crimson;
    transition: color 0.3s ease;
}
.project4 .serv-content .card:hover i{
    color: #fff;
}
.project4 .serv-content .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}


/* five */
.project5, .one{    
    font-family: Arial, Helvetica, sans-serif;
    color:#fff;
    background: #111;
}
.project5 .title::before,
.one .title::before{
    background: #fff;
}
.project5 .title::after,
.one .title::after{
    background: #111;
    content: "Android App";
}
.project5 .serv-content .card{
    width: calc(80% - 20px);
    background: #222;
    text-align: center;
    border-radius: 6px;
    padding: 50px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.project5 .serv-content .card:hover{
    background: crimson;
}
.project5 .serv-content .card .box{
    transition: all 0.3s ease;
}
.project5 .serv-content .card:hover .box{
    transform: scale(1.05);
}
.project5 .serv-content .card i{
    font-size: 50px;
    color: crimson;
    transition: color 0.3s ease;
}
.project5 .serv-content .card:hover i{
    color: #fff;
}
.project5 .serv-content .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}