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

:root {
    --primary-color: #FF8707;
    --secondary-color: #333;
    --dark-color: #E14F00;
    --light-color: #f4f4f4;
    --success-color: #5cb85c;
    --error-color: #d9534f;
    --overlay-color: rgba(112, 2, 2, 1);
}

.btn {
    display: inline-block;
    padding: 10px 30px;
    cursor: pointer;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
}


.btn-outline {
    background-color: transparent;
    border: 1px #fff solid;
}

.btn:hover {
    transform: scale(0.98);
}

/* Backgrounds & colored buttons */
.bg-primary,
.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
}

.bg-secondary,
.btn-secondary {
    background-color: var(--secondary-color);
    color: #fff;
}

.bg-dark,
.btn-dark {
    background-color: var(--dark-color);
    color: #fff;
}

.bg-light,
.btn-light {
    background-color: var(--light-color);
    color: #333;
}

.bg-primary a,
.btn-primary a,
.bg-secondary a,
.btn-secondary a,
.bg-dark a,
.btn-dark a {
    color: #fff;
}

/* Text colors */
.text-primary {
    color: var(--primary-color);
}

.text-secondary {
    color: var(--secondary-color);
}

.text-dark {
    color: var(--dark-color);
}

.text-light {
    color: var(--light-color);
}

a {
    text-decoration: none;
    color: var(--primary-color);
}

form, body, html {
    height: 100%;
    margin: 0;
    font-size: 25px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.5em;
    color: #666666;
}

.pimg1, .pimg2, .pimg3, .pimg4, .pimg5, .pimg6, .pimg7 {
    position: relative;
    opacity: 0.90;
    background-position: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-shadow: -3px 3px #000000;
    /*
    fixed = parallax
    scroll = normal
  */
    background-attachment: fixed;
}

.pimg1 {
    background-image: url('../images/image1.jpg');
    min-height: 100%;
}

.pimg2{
    background-image: url('../images/image2.jpg');
    min-height: 400px;
}

.pimg3{
    background-image: url('../images/image3.jpg');
    min-height: 400px;
}

.pimg4{
    background-image: url('../images/image4.jpg');
    min-height: 400px;
}

.pimg5 {
    background-image: url('../images/image5.jpg');
    min-height: 400px;
}

.pimg6 {
    background-image: url('../images/image6.jpg');
    min-height: 400px;
}

.pimg7 {
    background-image: url('../images/image7.jpg');
    min-height: 100%;
}

.section{
    text-align: center;
    padding: 50px 80px;
}

.section-light{
    background-color: #f4f4f4;
    color: #666;
}

.section-dark{
    background-color: #282e34;
    color: #ddd;
}

.ptext{
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #000;
    font-size: 26px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

    .ptext .border{
        background-color: #015704;
        color: #fff;
        padding: 8px;
    }


        .ptext .border.trans{
            background-color: transparent;
        }


/* 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;
}




 /*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;
        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 > *:first-child,
    .features-main .grid > *:nth-child(2) {
        grid-column: 1;
    }
}








@media(max-width:568px){
    .pimg1, .pimg2, .pimg3, .pimg4, .pimg5, .pimg6, .pimg7 {
        background-attachment: scroll;
        background-size:cover;
        min-height: 400px;
    }
    form, body, html {
        height: 100%;
        margin: 0;
        font-size: 20px;
        font-family: "Lato", sans-serif;
        font-weight:100;
        line-height: 1.1em;
        color: #666666;
    }
}