@import 'utilities.css';

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    -webkit-font-smoothing : antialiased;
}

body {
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth;
}

header {
    background-color: black;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 70% 91%, 0% 100%);
}

section.services .container .card .rock-paper {
    text-decoration: none;
}

section.services .container .card .my-website {
    text-decoration: none;
}

section.services .container .card .banking-system {
    text-decoration: none;
}

section.services .container .card .atm-machine {
    text-decoration: none;
}

section.services .container .card .parking-system {
    text-decoration: none;
}

section.services .container .card .static-website {
    text-decoration: none;
}

header nav {
    padding: 2rem 0;
}
.container {
    width: 1152px;
    padding: 0px 15px;
    margin: 0px auto;
}
header .container .branding{
    margin-right: 10rem;
}

header nav .left a {
    color: #FFFFFF;
    text-decoration: none;
    margin-right: 2rem;
    text-transform: uppercase;
    transition: all .3s ease;
}

header nav .left a:hover {
    color: #3DCFD3;
}
header nav .branding {
    margin: 3rem;
}

.btn-primary {
    background-color: #3DCFD3;
    text-transform: uppercase;
}

.btn-primary:hover {
    background-color: transparent;
    border-color: #3DCFD3;
    color: #3DCFD3;
}

.hero {
    padding: 3rem 0;
}
.hero .left img {
    width: 400px;
}

.hero .right {
    color : white;
    margin-top: -1.7rem;
}

.hero .right h6{
    font-size: 1.6rem;
    color: #3DCFD3;
    margin-bottom: 0.5rem;
}

.hero .right h1{
    font-size: 4rem;
    font-weight: 100;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.hero .right h1 span{
    color: #3DCFD3;
}

.hero .right p {
    line-height: 1.9;
    margin-bottom: 2rem;
}

.btn-secondary {
    background-color: transparent;
    color : #3DCFD3;
    border-color: #3DCFD3;
}

.btn-secondary:hover {
    background-color: #3DCFD3;
    color: black;
    transition: all 0.3s ease;
}

section {
    padding: 6rem 0;
}

section.about .about-me-image {
    height: 450px;
}

section.about h1 {
    margin-bottom: 1rem;
    font-size: 1.6rem;
}

section.about h1 span{
    color: #3DCFD3;
}

section.about h3{
    font-size: 1rem;
    margin-bottom: 1rem;
}

section.about p{
    font-family: 'Lato', sans-serif;
    color: #898989;
    line-height: 1.9;
    margin-bottom: 2rem;
}

section.about .social {
    display: flex;
}

section.about .social a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50px;
    margin-right: 0.6rem;
}


section.about .social .website{
    width: 38px;
}

section.about .social .facebook{
    width: 38px;
}

section.about .social .linkedin{
    width: 38px;
}

section.about .social .instagram{
    width: 38px;
}

section.about .social .twitter{
    width: 38px;
}

section.about .social .social-github{
    width: 3
    8px;
}

.section-heading {
    color: #070606;
    text-align: center;
    margin-bottom: 1rem;
    line-height: 0.5;
}

.section-heading span{
    color: #3DCFD3;
}

section .card-wrapper .cardImage {
    width: 105px;
}
.section-heading + p{
    color: #898989;
    font-family: 'Lato', sans-serif;
    margin-bottom: 8rem;
    text-align: center;
}

section.services {
    background-color: #F2F2F2;
}
section.services .card-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 2rem;
    grid-row-gap: 6rem;
}

section.services .card-wrapper .card {
    background-color: #FFFFFF;
    padding: 3rem 2rem;
    position: relative;
    padding-top: 5rem;
    text-align: center;
    transition: all .3s ease;
}

section.services .card-wrapper .card img {
    position: absolute;
    top: -3.5rem;
    left: 50%;
    transform: translateX(-50%);
}

section.services .card-wrapper .card h2{
    font-weight: 500;
    font-family: 'IBM Plex Sans',sans-serif;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

section.services .card-wrapper .card p{
    font-family: 'Lato',sans-serif;
    color: #898989;
    line-height: 1.6;
}

section.services .card-wrapper .card:hover {
    background-color: #161616;
}

section.services .card-wrapper .card:hover h2, section.services .card-wrapper .card:hover p {
    color: #FFFFFF;
}

section.contact .card-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 3rem;
}

section.contact .card-wrapper .card {
    text-align: center;
}

section.contact .card-wrapper .card img {
    margin-bottom: 2.3rem;
}

section.contact .card-wrapper .card h1 {
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 1rem;
}

section.contact .card-wrapper .card h6 {
    font-size: 1rem;
    color: #898989;
    font-weight: 400;
    margin-bottom: 4rem;
}

section.contact .input-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
    margin-bottom: 2rem;
}

section.contact .input-wrap-2 {
    display: flex;
    flex-direction: column;
}

section.contact .input-wrap-2 input {
    margin-bottom: 2rem;
}
section.contact input {
    padding: 0.5rem;
    border: 1px solid #F2F2F2;
    font-size: 1rem;
}

section.contact .input-wrap-2 textarea {
    padding: 0.5rem;
    border: 1px solid #F2F2F2;
    font-size: 1rem;
}

section.contact input:focus , section.contact .input-wrap-2 textarea:focus  {
    outline: none;
}

section.contact .btn-wrapper {
    text-align: center;
    margin-top: 2rem;
}

footer .footer-socials .footer-images {
    width: 38px;
}

footer .footer-socials .footer-github {
    width: 40px;
}

footer {
    background-color: #161616;
    text-align: center;
    padding: 5rem 0;
}

footer .footer-logo {
    margin-bottom: 3rem;
}

footer .footer-socials a{
    margin-right: 1rem;
}

footer .footer-socials {
    margin-bottom: 3rem;
    margin-right: -1rem;
}

footer .copyright {
    color: #898989;
}