style.css

@import "utility.css";

:root{ 
     --primary:#5DA9E9; 
     --bgDark:rgb(12,12,12); 
     --white:rgb(250,250,250); 
     --secondary:rgb(0,59,50); 
     --bgLight:rgb(190,181,181); 
 } 
  
 *{ 
     padding: 0; 
     margin: 0; 
     box-sizing: border-box; 
 } 
  
 header{ 
     background-color: var(--bgDark); 
 } 
  
 .container{ 
     padding: 0 15px; 
     margin: 0 auto; 
 } 
  
 header nav .left a{ 
     color: var(--white); 
     text-decoration: none; 
     margin-right: 2rem; 
     text-transform: uppercase; 
     transition: all 0.25s ease; 
 } 
  
 header nav .left a:hover{ 
     color: var(--primary); 
 } 
  
 header nav{ 
     padding: 2rem 0; 
     margin-left: 10rem; 
 } 
  
 header nav .logo{ 
     margin-right: 3rem; 
     margin-top: -1rem; 
     font-size: 20px; 
 } 
 .hero{ 
     padding-top:2rem ; 
     padding-bottom: 3rem; 
 } 
 .hero .left img{ 
     width: 400px; 
     border-radius: 5rem; 
     margin-left:10rem 
 } 
  
 .hero .right{ 
     color: var(--white); 
     margin: 0 auto; 
 } 
  
 .hero .right h1{ 
     font-size: 4rem; 
     font-weight: 100; 
     line-height: 1.25; 
     margin-bottom: 2rem; 
 } 
  
 .hero .right h2{ 
     font-size: 1.6rem; 
     color: var(--primary); 
     margin-bottom: 0.5rem; 
 } 
  
 .hero .right h1 span{ 
     color: var(--primary); 
 } 
  
 .hero .right p{ 
     line-height:2; 
     margin-bottom: 2rem; 
 } 
  
 .btn{ 
     padding: 0.5rem 2rem; 
     font-size: 1rem; 
     font-weight: 600; 
     color: var(--primary); 
     background-color: var(--bgDark); 
     border: 2px solid var(--primary); 
     border-radius:2rem; 
     transition: all 0.25s ease; 
 } 
  
 .btn:hover{ 
     background-color: var(--primary); 
     color:white; 
     cursor: pointer; 
     padding: 0.75rem 2.25rem; 
 }

 section{
    padding: 1rem;
 }

 section.about h1{
    margin-bottom: 1rem;
    font-size: 1.75rem;
    font-weight: 600;
    margin-top: 8rem;
 }

section.about h1 span{
    color: var(--primary);
    
}
section.about h3{
    font-size: 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

section.about p{
    color: var(--secondary);
    line-height: 2;
    margin-bottom: 2rem;
    font-weight: 500;
}

section.about .socials a{
    display: flex;
    align-items: center;
    margin-right: 2rem;
}

section.about .right{
    margin-left: 10rem;
}

section.about .left{
    margin-left: 5rem;
    margin-top: 3rem;
}

section.about .left img{
    border-radius: 3rem;
}

section.services{
    background-color: var(--bgDark);
}

section.services .services-head{
    color: var(--primary);
    text-align: center;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.services-head+p{
    color: var(--white);
    text-align: center;
    margin-bottom: 5rem;
    font-weight: 400;
}

.card img{
    background-color: var(--white);
}

section.services .card-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    column-gap: 3;
}

section.services .card-grid .card{
    background-color: var(--white);
    margin: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    transition: all 0.25s ease;
}

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

section.services .card-grid .card p{
    color: var(--secondary);
    line-height: 1.5;
}

section.services .card-grid .card:hover{
    background-color: #5DA9E9;
    cursor: pointer;
    color: var(--white);
}

section.services .card-grid .card:hover h2{
    color: var(--white);
}

section.services .card-grid .card:hover p{
    color: var(--white);
}

.contact-form{
    max-width: 1200px;
    margin: 0 auto;
}

.contact-form h2{
    margin-bottom: 2rem;
    color: var(--primary);
    font-size: 2.5rem;
    font-weight: 100;
}

.form_input{
    width: 100%;
    padding: 0.5rem;
    outline: none;
    border: 1px solid #ccc;
    margin-bottom: 1rem;
}

label>span{
    font-size: 1.2rem;
    color: var(--primary);
}

.submit_button{
    background-color: var(--primary);
    color: var(--white);
}