@font-face {
    font-family: 'Odin Rounded - Light';
    src: url('../fonts/Odin Rounded - Light.otf') format('opentype');
}

@font-face {
    font-family: 'Oswald-ExtraLight';
    src: url('../fonts/Oswald-ExtraLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Oswald-Regular';
    src: url('../fonts/Oswald-Regular.ttf') format('truetype');
}
/*custom body padding top so that navbar doesn't block first element*/
body {
    padding-top: 8% !important;
}

.Service-Banner {
    width: 100%;
    max-width: 100%;
    height: auto;
    background-color: white;
}

    .Service-Banner img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .Service-Banner p {
        text-align: center;
        color: black;
        font-family: 'Odin Rounded - Light';
        font-size: 3rem;
        padding: 0;
        margin: 0;
    }

.Services {
    background-color: white;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 10%;
}

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    background-image: linear-gradient(180deg, #660606, #b40d0d);
}

    .flip-card-front h1 {
        color: white;
        text-align: center;
        font-family: 'Odin Rounded - Light';
        font-size: 3rem;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 25%;
    }

.flip-card-back {
    background-image: linear-gradient(180deg, #32383e, #67727d);
    color: white;
    transform: rotateY(180deg);
}

    .flip-card-back ul {
        list-style: none;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 50%;
    }

    .flip-card-back li {
        font-family: Oswald-ExtraLight;
        font-size: 1.5rem;
    }

.Tech-Section {
    width: 100%;
    max-width: 100%;
    height: auto;
    background-color: #32383e;
    padding: 5%;
}

    .Tech-Section .Tech-Icon {
        margin: auto;
        padding: 2%;
    }

        .Tech-Section .Tech-Icon img {
            width: 50%;
            max-width: 100%;
            height: auto;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

    .Tech-Section .Tech-Section-Title {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 2%;
    }

        .Tech-Section .Tech-Section-Title h1 {
            font-family: 'Odin Rounded - Light';
            color: white;
            font-size: 2rem;
            text-align: center;
        }
/*tablets devices*/
@media screen and (max-width: 820px) and (min-width:540px) {
    /*custom body padding top so that navbar doesn't block first element*/
    body {
        padding-top: 18% !important;
    }
}

/*Mobile devices*/
@media screen and (max-width: 480px) {

    /*custom body padding top so that navbar doesn't block first element*/
    body {
        padding-top: 19% !important;
    }

    .Service-Banner p {
        font-size: 1.5rem;
    }
}