@import 'utlity.css';
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --primary: #2ab9dd;
    --dark: #161616;
    --pure:#FFFFFF;
    --ternary: #898989;
    --light: #F2F2F2;
}
body{
    font-family: 'Nunito', sans-serif;
}
header{
    background-color: var(--dark);
    display: block;
    box-sizing: border-box;
    clip-path: ellipse(144% 100% at 22.74% 0%);
}
.container{
    max-width: 900px;
    padding: 0 15px;

}
 
header nav .left{
    margin:0 auto;
}
header nav .left a{
    text-decoration: none;
    color: var(--pure);
    text-transform: uppercase;
    transition: all .3s ease;
}
header nav .left a:hover{
    color: var(--primary);
}


header nav .branding a{
    margin-right: 1rem;
}

.info .left img{
    width: 300px;
    height: 380px;
}

.info .right {
    color: var(--pure);
}

.info .right h5{
    font-size: 1.2rem;
    color: var(--primary);
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.info .right h1{
    font-size: 3rem;
    margin-bottom: 0.3rem;
}

.info .right h1 span{
    color: var(--primary);
}

.info .right p{
    line-height: 1.2rem;
    margin-bottom: 1rem;
}


.info .right{
    margin-left: 5rem;
}

.info .left{
    margin-left: 10rem;
} 

section{
    padding: 6rem 6rem;
}

.about .left__about img{
    width: 300px;
    height: 380px;
}

.about .right__about h1{
    margin-bottom: 0.8rem;
}

.about .right__about h3{
    margin-bottom: 0.5rem;
}

.about .right__about p{
    line-height: 1.5rem;
    font-size: 0.9rem;
}

.about .right__about{
    margin-left: 8rem;
}

.about .social{
    display: flex;
}

.about .social a{
    color: var(--dark);
    font-size: 2rem;
    margin-top: 1rem;
    margin-left: 0.3rem;
}

.about .social a:hover{
    cursor: pointer;
    color: var(--primary);
}

.projects{
    background: var(--light);
}

.projects .single__card{
    background-color: white;
    padding: 1rem 3rem;
    justify-content: center;

}

.projects .single__card:hover{
    background: var(--dark);
    color: var(--light);
}
.projects h1{
    display: flex;
    justify-content: center;
    align-items: center;
}

.projects p{
    display: flex;
    justify-content: center;
    align-items: center;
}
.cards .single__card h3{
    font-weight: bold;
}
.projects .cards{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    margin-left: 3rem;
    margin-top: 2rem;

}
.cards .single__card img{
    width: 100px;
    height: 100px;
    margin-left: 1rem;
}
.blog .container h1{
    display: flex;
    justify-content: center;
    text-align: center;
}

.blog.container p{
    display: flex;
    justify-content: center;
    text-align: center;
}

.blog-wrapper .card img{
    width: 250px;
    height: 200px;
} 

.blog-wrapper{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: 1rem;

}
.blog .blog-wrapper .card{
    background-color: var(--pure);
    margin-left: 3rem;
}

.blog .container p{
    display: flex;
    justify-content: center;
}

.blog .blog-wrapper .card {
    background-color: var(--light);
    padding: rem;

}
.blog{
    background-color: var(--dark);
}
.blog h1{
    color: var(--light);
    font-size: 3rem;
}
.blog p{
    color: var(--light);
    font-size: 1rem;

}
.blog .blog-wrapper .card__content h3{
    margin-bottom: 1rem;
    font-size: 1rem;
}
.blog .blog-wrapper .card__content p{
    color: var(--dark);
    font-weight: bold;
    margin-bottom: 3rem;
    font-size: 0.9rem;
}

.blog .blog-wrapper .card .card__content a{
    margin-bottom: 1rem;
    text-decoration: none;
    color: var(--dark);
    font-weight: bold;
}

.blog .card .card__content{
    padding: 0.5rem;
}