@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

:root{
    --primary-color:#047aed;
    --secondary-color:#1c3fa8;
    --dark-color:#002240;
    --light-color:#f4f4f4;
    --success-color:#5cb85c;
    --error-color:#d9534f;
}



*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body{
    font-family:'Roboto', sans-serif ;
    color: #333;
    line-height:1.6;
}
ul{
    list-style-type: none;
}

a{
    text-decoration: none;
    color: #333;
}

h1,h2{
font-weight: 300;
line-height: 1.2;
margin: 10px 0; 
}
p{
    margin: 10px 0;
}
img{
    width: 100%;
}

code, pre{
    background: #333;
color: #fff;
padding: 10px;
}

.hidden{
    visibility: hidden;
    height: 0;
}

/*Navbar*/

.navbar{
    background-color: var(--primary-color) ;
    color: #fff;
    height: 70px;

}
.navbar ul{

    display: flex;
}
.navbar a{
    color: #fff;
    padding: 10px;
    margin: 0 5px;
}
.navbar a:hover{
    border-bottom: 2px #fff solid;
}
.navbar .flex{
    justify-content: space-between;
}

/*Showcase*/


.showcase{
    height:400px;
    Background-color:var(--primary-color);
    color:#fff;
    position: relative;
}

.showcase h1{
    font-size: 40px;
}

.showcase p{
    margin: 20px 0;
}

.showcase .grid{
    overflow: visible;
    grid-template-columns: 55% 45%;
    gap: 30px;
}

.showcase-text{
    animation: slideInFromLeft 1.5s ease-in;
}

.showcase-form{
    position: relative;
    top: 60px;
    height: 350px;
    width: 300px;
    padding: 40px;
    z-index: 100;
    justify-self: flex-end;
    animation: slideInFromRight 1.5s ease-in;
}
.showcase-form .form-control{
    margin: 30px 0;
}
.showcase-form input[type="text"]
.showcase-form input[type="email"]{
    border: 0;
    border-bottom: 1px solid #174d93;
    width: 100%;
    padding: 3px;
    font-size: 16px;

}
.showcase-form input:focus{
    outline: none;
}
.showcase::before, .showcase::after{
    content:'';
    position:absolute;
    height:100px;
    bottom:-70px;
    right:0;
    left:0;
    background:#fff;
transform:skewY(-3deg);
-webkit-transform:skewY(-3deg);
-moz-transform:skewY(-3deg);
-ms-transform:skewY(-3deg);


}

/* Stats*/

.stats{
    padding-top: 100px;
    animation: slideInFromBottom 1.5s ease-in;
}

.stats-heading{

    max-width: 500px;
    margin: auto;

}

.stats .grid h3{
font-size: 35px;
}

.stats .grid p{
    font-size: 20px;
    font-weight: bold;
}

/* Cli*/

.cli .grid{

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows:repeat(2, 1fr);
}

.cli .grid >*:first-child{
    grid-column: 1/span 2;
    grid-row: 1/ span 2;
}


/*Cloud*/

.cloud .grid{
    grid-template-columns: 4fr 3fr;
}


/*Languages*/

.languages .flex{
flex-wrap: wrap;
}
.languages .card {
text-align: center;
margin: 18px 10px 40px;
transition: transform 0.2s ease-in; }

.languages .card h4{
    font-size: 20px;
    margin-bottom: 10px;
}

.languages .card:hover{
    transform: translateY(-15px);
}


/*Features*/

.features-head img, .docs-head img{
    width: 200px;
    justify-self: flex-end;
}

.features-sub-head img{
    width: 300px;
    justify-self: flex-end;
}

.features-main .card> i{
    margin-right:20px ;
}

.features-main .grid{
    padding:30px;

}
.features-main .grid>*:first-child{
    padding:30px;
    grid-column: 1/span 3;
}
.features-main .grid>*:nth-child(2){
    padding:30px;
    grid-column: 1/span 2;
}


/*Docs*/

.docs-main h3{
    margin:20px 0;
    
}


.docs-main .grid{
    grid-template-columns: 1fr 2fr;
    align-items: flex-start;
}

.docs-main nav li{
    font-size: 17px;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc;
}



.docs-main a:hover{
    font-weight: bold;
}


/*Footer*/

.footer .social a{
    margin: 0 10px
}


/*Animations*/

@keyframes slideInFromLeft{

0%{
    transform: translateX(-100%);

}

100%{
    transform: translateX(0);
}


}

@keyframes slideInFromRight{

    0%{
        transform: translateX(100%);
    
    }
    
    100%{
        transform: translateX(0);
    }
    
    
    }
    

    @keyframes slideInFromTop{

        0%{
            transform: translateY(-100%);
        
        }
        
        100%{
            transform: translatex(0);
        }
        
        
        }
        
        @keyframes slideInFromBottom{

            0%{
                transform: translateY(100%);
            
            }
            
            100%{
                transform: translateX(0);
            }
            
            
            }
/*Tablets and under*/

@media(max-width:768px){
.grid
.showcase .grid,
.stats .grid,
.cli .grid,
.cloud .grid,
.features-main .grid,
.docs-main .grid
{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
} 

.showcase{
    height: auto;
}

.showcase-text{
    text-align: center;
    margin-top: 40px;
}

.showcase-form{
    justify-self: center;
    margin: auto;
}

.cli .grid >*:first-child{
    grid-column: 1;
    grid-row: 1;
}

.features-head
.features-sub-head
.docs-head{
    text-align: center;
}

.features-head
.features-sub-head
.docs-head img{
    justify-self:center ;
}

.features-main .grid> *:first-child
.features-main .grid> *:nth-child(2)
{
grid-column: 1;
}

}
/*Mobile*/

@media(max-width:500px){
    .navbar{
        height:110px
    }
    .navbar .flex{
        flex-direction: column;
    }

    .navbar ul{
        padding:10px;
        background-color: rgba(0, 0, 0, 0.1);
    }
}