/* 
font-family: 'Fredoka',
sans-serif;
font-family: 'PT Sans',
sans-serif;
font-family: 'PT Sans Narrow',
sans-serif;
*/
html {
    scroll-behavior: smooth;
}

body {
    display: grid;
    grid-gap: .5em;
    background: #fdfdfd;
        /* background: linear-gradient(178deg, #4c7ab1, #bbe1e2, #256d97);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 10s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    animation: AnimationName 10s ease infinite; */
}

/* @-webkit-keyframes AnimationName {
    0%{background-position:0% 25%}
    50%{background-position:100% 76%}
    100%{background-position:0% 25%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 25%}
    50%{background-position:100% 76%}
    100%{background-position:0% 25%}
}
@keyframes AnimationName {
    0%{background-position:0% 25%}
    50%{background-position:100% 76%}
    100%{background-position:0% 25%}
} */

.ourservicesMain {
    padding-top: 64px;
    height: 80vh;
    padding-bottom: 50px;
}
.ourservicesMain h1 {
    display: grid;
    justify-content: center;
    font-family: Fredoka, sans-serif;
}

img {
    max-width: 100%;
}

.contactFooter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
    justify-content: center;
    padding-top: 100px;
    /* height: 50vh; */
    padding-bottom: 6px;
}

.ImgFooter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* width: 6vw; */
}

.DIV1 {
    display: grid;
    justify-content: left;
}

.DIV2 {
    display: grid;
    justify-content: right;
}
.ContactForm {
    display: grid;
    justify-content: right;
}

.ContactForm label {
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
}

.ContactForm input {
    font-family: 'PT Sans Narrow', sans-serif;
    width: -webkit-fill-available;
    color: antiquewhite;
}

.ContactUS {
    display: grid;
    justify-content: center;
}

.ContactUS a{
    text-decoration: none;
    color: antiquewhite;
    transition: all 0.3s ease 0s;
}

.ContactUS a:hover {
    color: rgb(158, 158, 158);
}

.ContactForm h1 {
    font-family: 'Fredoka', sans-serif;
}

.SocialMedia h2 {
    font-family: 'Fredoka', sans-serif;
}

/* .SocialMediaIcons {
    display: flex;
    justify-content: center;
} */

.SocialMediaIcons img {
    padding: 0em .5em 0em .5em;
}

.button {
    background-color: rgb(79, 79, 201);
    padding: .5em 1.5em .5em 1.5em;
    border-radius: 1em;
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    
}

button {
    background-color: rgb(79, 79, 201);
    padding: .5em 1.5em .5em 1.5em;
    border-radius: 1em;
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
}

.ProjectContainer {
    padding-top: 64px;
    /* height: 80vh; */
    padding-bottom: 50px;
}

.ProjectContainer section {
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 1em;
}

.ProjectContainer div {
    display: grid;
    justify-content: center;
}

.ProjectContainer h1 {
    display: grid;
    justify-content: center;
    font-family: 'Fredoka', sans-serif;
}

.ProjectContainer a {
    padding-top: .5em;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 1.2em;
    text-decoration: none;
    color: black;
    transition: all 0.3s ease 0s;
}

.ProjectContainer :hover {
    color: rgb(92, 87, 87);
}



nav a {
    font-family: 'Fredoka', sans-serif;
}

nav {
    overflow: hidden;
    background-color: rgba(237, 237, 237, 0.532);
    position: fixed;
    top: 0;
    width: 99%;
}

nav a{
    float: right;
    display: block;
    /* color: burlywood; */
    text-align: center;
    padding: 4vh 2.5vh 1vh 2vh;
    text-decoration: none;
    font-size: 1em;
}

/* header {
    /* display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 15px 30px; 
} */

nav #nav-title {
    float: left;
    display: block;
    font-size: larger;
}

.Top-logo img {
    max-width: 12vw;
    float: left;
    /* padding: 0.2em 0em -1em 0em;
    display: grid;
    align-items: center; */
}

.LOGObtn {
    float: left;
    padding: 1vh 1vh 1vh 1vh !important;
}

/* #nav-img {
    max-width: 15%;
    float: left;
} */


header h1 {
    font-family: 'Fredoka', sans-serif;
}

/* header li {
    /* list-style: none;
    display: inline-block;
    padding: 0 20px; 
} */

header a {
    text-decoration: none;
    color: black;
    transition: all 0.3s ease 0s;
}

header a:hover {
    color: rgb(92, 87, 87);
}

.videocontainer {
    display: grid;
    grid-template-columns: 1fr;
    margin: auto;
    align-items: center;
    columns: 1;
    padding-top: 100px;
    height: 80vh;
    padding-bottom: 50px;
}

.videocontainer h1 {
    font-family: 'Fredoka', sans-serif;
    display: grid;
    justify-content: center;
    height: 10vh;
    font-size: 3em;
}

.videobox {
    display: grid;
    grid-template-columns: 1fr;
    margin: auto;
    align-items: center;
    columns: 1;
}
.videobox iframe {
    align-items: center;
    margin: 0 auto;
}

.introvideo {
    padding-top: 40px;
}

video[poster]{
    object-fit: cover;
}

.Services {
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
    grid-gap: 1.5em;
    justify-content: center;
}

.Services article {
    display: grid;
    grid-template-rows: 1fr;
}

.servicecards {
    display: grid;
    justify-content: center;
}

.servicecards h2 {
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    margin-bottom: .125em;
}

.servicecards p{
    max-width: 25rem;   
    font-family: 'PT Sans Narrow', sans-serif;
}

.imageholder img {
    width: 100%;
    object-fit: cover;
}

.spacer {
    background-color: rgb(179, 179, 179);
}

#Projects {
    column-count: 1;
    column-gap: 1em;
}

#Projects h1 {
    font-size: 32px;
}

.aboutContainer {
    padding-top: 64px;
    /* height: 100vh; */
    padding-bottom: 100px;
    display: grid;
    justify-content: center;
    grid-template-rows: .25fr .75fr;
}

.aboutContainer section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2em;
}

.aboutContainer section div.aboutimg {
    display: grid;
    justify-content: right;
    align-items: right;
    padding-right: 15px;
    grid-template-rows: 1fr;
}

.aboutContainer h1 {
    font-family: 'Fredoka', sans-serif;
    display: grid;
    justify-content: center;
}

.aboutContainer h2 {
    font-family: 'PT Sans',sans-serif;
}

.aboutContainer p {
    font-family: 'PT Sans Narrow', sans-serif;
    max-width: 35rem;
}

.DIV3 {
    display: none;
}
@media (min-width: 320px) {
    #Projects {
        grid-template-columns: 1fr;
    }
    .Services {
        grid-template-columns: 1fr;
    }
    .aboutContainer {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 576px) {
    #Projects {
        grid-template-columns: 1fr;
    }
    .Services {
        grid-template-columns: 1fr;
    }
    .aboutContainer {
        grid-template-columns: 1fr;
    }

}

@media (min-width: 576px) {
    #Projects {
        grid-template-columns: 1fr;
    }
    .Services {
        grid-template-columns: 1fr;
    }
    .aboutContainer {
        grid-template-columns: 1fr;
    }
    /* img {
        height: 60vh !important;
        object-fit: cover;
    } */
}

@media (min-width: 640px) {
    #Projects {
        grid-template-columns: 1fr;
    }
    .Services {
        grid-template-columns: 1fr;
    }
    .aboutContainer {
        grid-template-columns: 1fr;
    }
    .Services {
    grid-template-columns: 1fr;
    display: grid;
    grid-gap: 1.5em;
    justify-content: center;
    }
    /* img {
    height: 94vh ! important; 
    object-fit: cover;
    } */
    /* img {
    max-width: 10%;
    } */
}

@media (min-width: 768px) {
    #Projects {
        grid-template-columns: 1fr 1fr;
    }
    .Services {
        grid-template-columns: 1fr 1fr;
    }
    .aboutContainer {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) {
    #Projects {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .Services {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    #Projects {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .Services {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Mobile devices (portrait and landscape) */
@media only screen and (max-width: 767px) {
    body {
        font-size: 14px;
        /* Adjust font size for smaller screens */
    }

    header {
        padding: 10px;
        /* Adjust header padding for smaller screens */
    }

    nav a {
        padding: 2vh 2.5vh 1vh 2vh;
        /* Adjust navigation link padding for smaller screens */
    }

    .Top-logo img {
        max-width: 30%;
        /* Adjust logo size for smaller screens */
    }

    .videocontainer h1 {
        font-size: 2em;
        /* Adjust video container heading font size for smaller screens */
    }

    .Services {
        grid-template-columns: 1fr;
        /* Display services in a single column for smaller screens */
    }

    .serviceIMG {
        height: 50vh;
    }

    #Projects {
        grid-template-columns: 1fr;
        /* Display projects in a single column for smaller screens */
    }

    .aboutContainer section {
        grid-template-columns: 1fr;
        /* Display about section in a single column for smaller screens */
    }
    
    .ProjectContainer {
        margin-top: 800px;
        padding-bottom: 0;
    }

    .aboutContainer p {
    font-family: 'PT Sans Narrow', sans-serif;
    max-width: 25rem;
    }

    .aboutContainer section div.aboutimg {
        justify-content: center;
        display: grid;
    }

    .aboutContainer section div.aboutbio {
        justify-content: center;
        display: grid;
    }

    .aboutContainer {
        grid-template-columns: 1fr;
        display: grid;
        grid-gap: 1.5em;
        justify-content: center;
        padding-top: 0;
    }


    /* .ProjectContainer,
    .aboutContainer,
    .contactFooter {
        margin-bottom: 20px;
    } */

    .ContactForm {
        display: grid;
        justify-content: center;
    }

    .contactFooter {
        grid-template-columns: 1fr;
        display: grid;
        grid-gap: 1.5em;
        justify-content: center;
        padding-top: 0;
    }

    .SocialMedia {
        display: grid;
        grid-gap: 1.5em;
        justify-content: center;
    }

    .TwitterIcon,
    .YTIcon {
        width: 20% !important;
    }

    .ImgFooter {
        display: grid;
        grid-template-columns: 1fr;
    }

    .DIV3 {
        display: grid;
        justify-content: center;
        max-width: 100%;
            /* Ensure the image doesn't exceed the width of its container */
        height: auto;
            /* Maintain the aspect ratio of the image */
        }
    
        /* You can also hide the original image in responsive mode if needed */
        .ImgFooter .DIV1 img,
        .ImgFooter .DIV2 img {
            display: none;
        }
}