style.css

 *{
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: 'Kumbh Sans', sans-serif;
 }

 .navbar{
     background: #131313;
     height: 80px;
     display:flex;
     justify-content: center;
     align-items: center;
     font-size: 1.2rem;
     position: sticky;
     top:0;
     z-index: 999;
 }

 .navbar_container{
     display: flex; 
     justify-content: space-between;
     height: 80px;
     z-index: 1;
     width: 100%;
     max-width: 1300px;
     margin: 0 auto;
     padding: 0 50px;

 }
 
 #navbar_logo{
     background-color: #ff8177  ;
     background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
     background-size: 100%;
     -webkit-background-clip: text;
     -moz-background-clip: text;
     -webkit-text-fill-color:transparent;
     -moz-text-fill-color:transparent;
     display: flex;
     align-items: center;
     cursor: pointer;
     text-decoration: none;
     font-size: 2rem;


 }

 .fa-gem{
     margin-right: 0.5rem; 
 }

 .navbar_menu{
     display: flex;
     align-items: center;
     list-style: none;
     text-align: center;
 }

 .navbar_item {
     height: 80px;
 }

 .navbar_links{
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     padding: 0 1rem;
     height: 100%;
 }

 .navbar_btn{
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0 1rem;
     width: 100%;
 }

 .button{
     display:flex;
     justify-content: center;
     align-items: center;
     text-decoration: none;
     padding: 10px 20px;
     height: 100%;
     width: 100%;
     border: none;
     border-radius: 4px;
     background: #f77062;
     color: white;

 }

 .button:hover{
     background: #4837ff;
     transition: all 0.3s ease;
 }

 .navbar_links:hover{
     color: #f77062;
     transition: all 0.3s ease;
 }

 @media screen and (max-width: 960px){
     .navbar_container{
         display: flex;
         justify-content: space-between;
         height: 80px;
         z-index: 1;
         width: 100%;
         max-width: 1300px;
         padding:0;
     }
     .navbar_menu{
         display: grid;
         grid-template-columns: auto;
         margin:0;
         width:100%;
         position: absolute;
         top: -1000px;
         opacity: 0;
         transition:all 0.5s ease;
         height: 50vh;
         z-index:-1;
         background: #131313;
     }
     .navbar_menu.active{
         background: #131313;
         top: 100%;
         opacity: 1;
         transition: all 0.5s ease;
         z-index: 99;
         height: 50vh;
         font-size: 1.6rem;
     }

     #navbar_logo{
         padding-left: 25px;
         
    }
    .navbar_toggle .bar {
        width: 25px;
        height:3px;
        margin: 5px auto;
        transition: all 0.3s ease-in-out;
        background: white;
    }

    .navbar_item{
        width: 100%;
    }

    .navbar_links{
        text-align: center;
        padding: 2rem;
        width: 100%;
        display: table;
    }

    #mobile-menu{
        position: absolute;
        top:20%;
        right: 5%;
        transform: translate(5% ,20%);
    }

    .button{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: 80px;
        margin: 0;
    }

    .navbar_toggle .bar {
        display:block;
        cursor:pointer;
    }

    #mobile-menu.is-active .bar:nth-child(2){
        opacity: 0;
    }

    #mobile-menu.is-active .bar:nth-child(1){
       transform: translateY(8px) rotate(45deg);

    }
    #mobile-menu.is-active .bar:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }
 }

 /* Services Section CSS*/

 .services {
     background-color: #141414;
     background-image: url('images/endless_loop.gif');
     background-repeat: repeat-x;
     background-attachment: fixed;
     background-size: cover;
     display: flex;
     flex-direction: column;
     align-items: center;
     height: 100vh;
 }

 .services h1 {
     background-color: #ff8177;
     background-image: linear-gradient(to right, #ff8177 0%,#ff867a 0%,#ff8c7f 21%,
     #f99185 52%,#cf556c 78%,#b12a5b 100%);
     background-size: 100%;
     margin-bottom:5rem;
     font-size: 2.5rem;
     -webkit-background-clip: text;
     -moz-background-clip: text;
     -webkit-text-fill-color:transparent;
     -moz-text-fill-color:transparent;

 }

 .services_container{
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
 }

 .services_card{
     margin: 1rem;
     height: 525px;
     width: 400px;
     border-radius: 4px;
     background-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(17,17,17,0.6) 100%), url('/images/algoPic1.jpg') ;
     background-size:cover;
     position: relative;
     color:white;
 }
 .services_card:nth-child(2){
    background-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(17,17,17,0.6) 100%),
    url('/images/algoPic2.jpg') ;
    background-size:cover;

 }
 .services h2 {
     position:absolute;
     top: 350px;
     left:30px;

 }

 .services_card p{
     position:absolute;
     top: 400px;
     left: 30px;
 }
 .services_card button{
     color:white;
     padding:10px 20px;
     border:none;
     outline: none;
     border-radius: 4px;
     background: #f77062;
     position: absolute;
     top:440px;
     left:30px;
     font-size: 1rem;
     cursor: pointer;
    
 }

 .services_card:hover{
     transform: scale(1.075);
     transition: 0.2s ease-in;
     cursor: pointer;
 }

 @media screen and (max-width: 960px){
    .services{
        height: 1600px;
    }

    .services h1{
        font-size: 2rem;
        margin-top: 12rem;
    }
 }

 @media screen and (max-width: 480px){
    .services{
        height: 1400px;
    }

    .services h1{
        font-size: 1.2rem;
    }

    .services_card{
        width: 300px;
    }


 }

 /*Footer styles*/

 .footer_container{
     background-color: #141414;
     padding: 5rem 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 #footer_logo{
     color:white;
     display: flex;
     align-items:center;
     cursor: pointer;
     text-decoration: none;
     font-size: 2rem;
 }

 .footer_links{
     width: 100%;
     max-width: 1000px;
     display: flex;
     justify-content: center;
 }

 .footer_links--wrapper{
     display: flex;
 }
 .footer_links--items{
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     margin: 16px;
     text-align: left;
     width:160px;
     box-sizing: border-box;
 } 

 .footer_links--items h2{
     margin-bottom: 16px;
 }

 .footer_links--items > h2 {
     color:white;
 }

 .footer_links--items a {
     color: white;
     text-decoration: none;
     margin-bottom: 0.5rem;
 }
 .footer_links--items a:hover{
    color:white;
    transition: 0.3s ease-out;
 }

 /* Social Icons */
.social_icon--link{
    color:#fff;
    font-size: 24px;
    margin-left: 10%;
}

.social_media{
    max-width: 1000px;
}

.social_media--wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:90%;
    max-width: 1000px;
    margin: 50px auto 0 auto;
}

.social_icons{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 240px;
}

.social_logo{
    color:white;
    justify-self: flex-start;
    margin-left: 30px;
    cursor: pointer;
    text-decoration: none;
    font-size: 2rem;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}


 .website_rights{
     color: white;
     text-align: center;
 }

 @media screen and (max-width:820px){
     .footer_links{
         padding-top: 2rem;;
     }

     #footer_logo{
         margin-bottom:2rem;
     }

     .website_rights{
         margin-bottom: 2rem;
     }
     .footer_link--wrapper{
         flex-direction: column;

     }
     .social_media--wrap{
         flex-direction: column;
     }

     .social_icon--link{
        color:#fff;
        font-size: 24px;
        text-align: center;
    }


}
     
@media screen and (max-width: 480px){
    .footer_links--items{
        margin: 0;
        padding: 10px;
        width: 100%;
    }




}