/*------------------Documents ----------------------------------------------------- */

.docs-main h3 {
    margin: 20px 0;
}
  
.docs-main .grid {
    grid-template-columns: 1fr 2fr; /* this will set the introduction section bigger */
    align-items: flex-start; /* since this is a row align items will be along ythe y axis */
    animation: slideInFromBottom 1s ease-in;
}

.docs-head .text {
    animation: slideInFromLeft 1s ease-in;
}
.docs-head img {
    animation: fade-in 1s ease-in;
}

.docs-head img{
    width: 40%;
    justify-self: flex-end;
}

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

.card.bg-light.p-3,
.card.bg-light.p-3 nav ul li a{
    color: black;
}

/* --------------------------------------------------------------- Media Queries -----------------------------------------------*/
/* tablet view and under */
@media (max-width:768px){
    .showcase .grid,
    .stats .grid,
    .clid .grid,
    .cloud .grid,
    .features-main .grid,
    .docs-main .grid,
    .grid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr; /* this is used to make everything stack on top of each other as such we select all the grids */
    }

    .showcase {
        height: auto; /* by setting this to auto it will take the amount of the container */
    }

    .showcase-text {
        text-align: center;
        margin-top: 40px; /* this is to push it down a bit */
    }

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

    .cli .grid > *:first-child { /* this is so thhat the grid first child element will occupy one column and one row */
        grid-column: 1; 
        grid-row: 1;
    }
    .cli .grid {
        padding-top: 300px;
        height: 50vh;
    }

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

    .features-sub-head img,
    .docs-head img{
        justify-self: center; /* this is to make sure that the images within the head section of each page is aligned to the center when we shrink */
    }

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

@media (max-width:620px) {
    .features-head img {
        display: none;
    } 
}


@media (max-width:720px) {
    .cli .grid{
        display: none;
    }
}

/* mobile view */
@media (max-width:500px) {
    .navbar {
        height: 110px;
    }

    .navbar.flex {
        flex-direction: column;
    }

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

}

/* --------------------------------------------------------------- Key Frames and 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);
    }
}

@keyframes fade-in{
    from {
        opacity: 0;
    }
    
    to {
        opacity: 1;
    }
};