:root {
     --primary-color: #047aed;
     --secondary-color: #1c3fa8;
     --dark-color: #002240;
     --light-color: #f4f4f4;
     --success-color: #5cb85c;
     --error-color: #d9534f;
     --white-color: #fff;
     --black-color: #333;
}
* {
     margin: 0px;
     padding: 0px;
     box-sizing: border-box;
}
body {
     font-family: 'Lato',sans-serif;
     color: var(--black-color);
     line-height: 1.6;
}
h1,h2 {
     font-weight: 300;
     line-height: 1.2;
     margin: 10px 0px;
     text-transform: capitalize;
}
ul {
     list-style-type: none;
}
a {
     text-decoration: none;
     text-transform: capitalize;
     color: var(--black-color);
}
p {
     margin: 10px 0px;
     text-transform: capitalize;
}
img {
     width: 100%;
}
pre,code {
     background-color: var(--black-color);
     color: var(--white-color);
     padding: 10px;
     text-transform: capitalize;
}
.hidden {
     visibility: hidden;
     height: 0px;
}
.navbar {
     background-color: var(--primary-color);
     color: var(--white-color);
     height: 70px;
}
.navbar ul {
     display: flex;
}
.navbar a {
     color: var(--white-color);
     margin: 0px 5px;
     padding: 10px;
}
.navbar a:hover {
     border-bottom: 2px solid var(--white-color);
}
.navbar .flex {
     justify-content: space-between;
}
.showcase {
     height: 400px;
     position: relative;
     background-color: var(--primary-color);
     color: var(--white-color);
}
.showcase::before,.showcase::after {
     content: "";
     position: absolute;
     right: 0px;
     left: 0px;
     bottom: -70px;
     height: 100px;
     background-color: var(--white-color);
     transform: skewY(-3deg);
}
.showcase h1 {
     font-size: 40px;
}
.showcase p {
     margin: 20px 0px;
}
.showcase .grid {
     overflow: visible;
     grid-template-columns: 55% auto;
     gap: 30px;
}
.showcase-text {
     animation: slideInFromLeft 1s ease-in;
}
.showcase-form {
     position: relative;
     z-index: 100;
     width: 400px;
     padding: 40px;
     justify-self: flex-end;
     animation: slideInFromRight 1s ease-in;
}
.showcase-form .form-control {
     margin: 30px 0px;
}
.showcase-form input[type='text'],.showcase-form input[type='email'] {
     border: 0px;
     border-bottom: 1px solid #b4becb;
     width: 100%;
     padding: 3px;
     font-size: 16px;
}
.showcase-form input:focus {
     outline: none;
}
.stats {
     padding-top: 100px;
     animation: slideInFromBottom 1s ease-in;
}
.stats .grid h3 {
     font-size: 35px;
     text-transform: capitalize;
}
.stats .grid p {
     font-size: 20px;
     font-weight: bold;
}
.stats-heading {
     max-width: 500px;
     margin: auto;
}
.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;
}
.cli .grid .card h3 {
     text-transform: capitalize;
}
.cloud .grid {
     grid-template-columns: 4fr 3fr;
}
.languages .flex {
     flex-wrap: wrap;
}
.languages .card {
     text-align: center;
     margin: 18px 10px 40px;
     transition: transform 0.2s ease-in;
}
.languages .card:hover {
     transform: translateY(-15px);
}
.languages .card h4 {
     font-size: 20px;
     margin-bottom: 10px;
     text-transform: capitalize;
}
.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 > *:nth-child(1) {
     grid-column: 1 / span 3;
}
.features-main .grid > *:nth-child(2) {
     grid-column: 1 / span 2;
}
.docs-main h3 {
     margin: 20px 0px;
     text-transform: capitalize;
}
.docs-main .grid {
     grid-template-columns: 1fr 2fr;
     align-items: flex-start;
}
.docs-main nav li {
     font-size: 17px;
     margin-bottom: 5px;
     padding-bottom: 5px;
     border-bottom: 1px solid #ccc;
}
.docs-main a:hover {
     font-weight: bold;
}
.footer .social a {
     margin: 0px 10px;
}
@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%);}
}
@media only screen and (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;
          animation: slideInFromTop 1s ease-in;
     }
     .showcase-form {
          justify-self: center;
          margin: auto;
          animation: slideInFromBottom 1s ease-in;
     }
     .cli .grid > *:first-child {
          grid-column: 1;
          grid-row: 1;
     }
     .features-head,.features-sub-head,.docs-head {
          text-align: center;
     }
     .features-head img,.features-sub-head img,.docs-head img {
          justify-self: center;
     }
     .features-main .grid > *:nth-child(1),.features-main .grid > *:nth-child(2) {
          grid-column: 1;
     }
}
@media only screen and (max-width:500px){
     .navbar {
          height: 110px;
     }
     .navbar .flex {
          flex-direction: column;
     }
     .navbar ul {
          padding: 10px;
          background-color: rgba(0,0,0,0.1);
     }
     .showcase-form {
          width: 300px;
     }
}