:root {
    /* 
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
*/
    /* Override Variables */
    --gray-dark: #3D3D3D;
    --purple: #533777;
    /* Custom Variables */
    --light-blue: #e1f7f5;
    --light-purple: #c290d2;
    --gold: #FFD700;
}

@font-face {
    font-family: 'quantum';
    src: URL('https://res.cloudinary.com/dotmi0hj2/raw/upload/v1625252097/Quantum_osz96e.ttf') format('truetype');
}

@font-face {
    font-family: 'futura';
    src: URL('https://res.cloudinary.com/dotmi0hj2/raw/upload/v1625252097/Futura-Medium_o6xqiq.woff') format('woff');
}

@font-face {
    font-family: 'nexa';
    src: URL('https://res.cloudinary.com/dotmi0hj2/raw/upload/v1625383647/Nexa_Light_ms97ks.otf') format('truetype');
}

@font-face {
    font-family: 'nexabold';
    src: URL('https://res.cloudinary.com/dotmi0hj2/raw/upload/v1625383647/Nexa_Bold_nnwh0k.otf') format('woff');
}

@font-face {
    font-family: 'raleway';
    src: URL('https://res.cloudinary.com/dotmi0hj2/raw/upload/v1625384165/Raleway-Regular_o2hizd.ttf') format('truetype');
}

@font-face {
    font-family: 'ralewaybold';
    src: URL('https://res.cloudinary.com/dotmi0hj2/raw/upload/v1625383863/Raleway-Bold_zqjgst.ttf') format('woff');
}

/* Animation */
.animated {
    visibility: visible !important;
}

body {
    background-color: none;
    font-family: futura;
    color: #3D3D3D;
}

body {
    -webkit-animation: moveFromTop .3s ease both;
    animation: moveFromTop .3s ease both;
}

@-webkit-keyframes moveFromTop {
    from {
        -webkit-transform: translateX(100%);
    }
}

@keyframes moveFromTop {
    from {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

.logo {
    height: 20%;
    width: 20%;
}

.carousel-caption {
    position: absolute;
    background-color: #6bc873;
    opacity: 0.8;
    top: 0%;
    left: 0%;
    height: 99%;
    width: 55%;
}

.bg-custom {
    left: 10%;
    padding-top: 35%;
    width: 100%;
}

    .bg-custom a {
        font-size: 1.5em;
        color: white;
    }

    .bg-custom p {
        font-family: futura;
        font-size: 3.5em;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: white;
    }

.home_vid {
    height: 50%;
    width: 100%;
}

/* Site header */

.site-header {
    min-height: 25vh;
}

.site-nav.inbody {
    background: #6bc873;
}

.whats_new_gif {
    height: 40px;
}

.navbar-light .navbar-nav .nav-link {
    color: white;
    padding-right: 2em;
    padding-left: 2em;
    letter-spacing: 0.1em;
    font-weight: bold;
}

.navbar-nav .nav-item:hover {
    background-color: #f3c50d;
    color: #ffffff;
    border-radius: 20px;
}

.navbar-brand .firstname {
    font-family: quantum;
    color: #3D3D3D;
    font-size: 1.5em;
}

.navbar-brand .lastname {
    font-family: quantum;
    color: #c39c15; /*#c39c15*/
    font-size: 1.5em;
}

@media screen and (max-width: 768px) {
    .site-header {
        min-height: 12vh;
    }

    .bg-custom p {
        font-size: 4em;
    }
}

@media screen and (max-width: 414px) {
    .site-header .navbar-collapse {
        background-color: rgba(160,159,159,0.8);
        padding: 10px;
    }

    .carousel-caption {
        height: 98%;
    }

    .bg-custom {
        padding-top: 25%;
    }

        .bg-custom a {
            font-size: 0.7em;
        }

        .bg-custom p {
            font-size: 1.5em;
        }

    .navbar-brand .firstname {
        font-size: 0.9em;
    }

    .navbar-brand .lastname {
        font-size: 0.9em;
    }
}

/* Text for all */
.section-header {
    font-family: futura;
    font-size: 2em;
    font-weight: 400;
    padding-bottom: 20%;
}

.section-title {
    color: #3D3D3D;
    font-size: 1.3em;
}

.section-text {
    font-size: 1.2em;
    text-align: justify;
}

@media screen and (max-width: 768px) {
    .section-header {
        font-family: futura;
        font-size: 1.9em;
    }

    .section-title {
        font-size: 1.4em;
    }

    .section-text {
        font-size: 1.3em;
    }
}

@media screen and (max-width: 414px) {
    .section-header {
        font-family: futura;
        font-size: 1.5em;
    }

    .section-title {
        font-size: 1.1em;
    }

    .section-text {
        font-size: 1em;
    }
}

/* icons */
.icon {
    margin-right: 3%;
    font-size: 1.3em;
    text-align: right;
}

@media screen and (max-width: 768px) {
    .icon {
        margin-right: 3%;
        font-size: 1em;
    }
}

.rotate-45-left {
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* Highlights */
#page-highlights {
    background: url('https://res.cloudinary.com/dotmi0hj2/image/upload/v1625259154/SEC_2_3_BG_v1hnbp.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.imghigh {
    width: 80%;
}


/* Our Services */
/* */
#page-services {
    background-color: transparent;
    /*background: url('https://res.cloudinary.com/dotmi0hj2/image/upload/v1625259184/CIRCUIT-bg_h4cq2r.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;*/
}


.card {
    text-align: center;
    background-color: white;
    height: 40vh;
    width: 90%;
    border: none;
    border-radius: 0%;
    left: 5%;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.flipper {
    padding-left: 0px;
    padding-right: 0px;
    perspective: 1000px;
}

    .flipper.flip .card {
        transform: rotateY(180deg);
    }

.front,
.back {
    padding: 5px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.front {
    z-index: 2;
    transform: rotateY(0deg);
    height: 94.5%;
    top: 19px;
    padding-left: 4%;
    padding-right: 4%;
    box-shadow: 0 .5rem .5rem rgba(0, 0, 0, .1);
}

.back {
    transform: rotateY(180deg);
    height: 100%;
    font-size: x-large;
    padding-right: 50px;
    padding-top: 20px;
    box-shadow: 1rem .5rem .5rem rgba(0, 0, 0, .1);
}

.back_content {
    padding-top: 30px;
}

.fa-chevron-circle-up {
    position: absolute;
    color: #6bc873;
    bottom: 10px;
    right: 240px;
    cursor: pointer;
    backface-visibility: hidden;
}

.fa-chevron-circle-down {
    color: #6bc873;
    position: absolute;
    bottom: 30px;
    right: 20px;
    cursor: pointer;
}

.imgserv {
    height: 70%;
    width: 70%;
    transition: all 0.3s ease-out;
}

    .imgserv:hover {
        transform: scale(1.1) translate(-3px)
    }

.services {
    background-color: transparent;
    height: 310px;
    padding-top: 2%;
    padding-bottom: 2%;
}


.servicestitle {
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: bold;
    color: #3D3D3D;
    text-align: center;
}

.servicesimg {
    background-color: transparent;
    color: #3D3D3D;
    text-align: center;
    padding-top: -30%;
}

@media screen and (max-width: 834px) {
    .services {
        height: 420px;
        padding-bottom: 2%;
    }

    .servicestitle {
        font-size: 1.2em;
    }

    .serviceslist {
        font-size: 1em;
    }
}

@media screen and (max-width: 768px) {
    .services {
        height: 400px;
        padding-bottom: 2%;
    }

    .servicestitle {
        font-size: 1.2em;
    }

    .serviceslist {
        font-size: 1em;
    }
}

@media screen and (max-width: 414px) {

    .services {
        height: 360px;
        padding-bottom: 2%;
    }

    .servicestitle {
        font-size: 1em;
    }

    .serviceslist {
        font-size: 0.9em;
    }

    .card {
        height: 40vh;
        width: 90%;
    }

    .back {
        font-size: large;
    }
}

/*P.A.K*/
.page-new {
    background: url('https://res.cloudinary.com/dotmi0hj2/image/upload/v1625259219/CIRCUIT_FOR_SEC_4_6_jqvfss.png');
}

.new-header {
    font-family: futura;
    font-size: 2em;
    text-align: center;
    letter-spacing: 100px;
    padding-left: 14%;
}

.btn-custom {
    color: #6bc873;
    background-color: transparent;
    border: 3px solid #6bc873;
    border-radius: 5em;
    font-size: large;
    margin-top: -.2em;
    padding-left: 3%;
    padding-right: 3%;
}

    .btn-custom:hover {
        background: #6bc873;
        color: white;
    }

.btn-enqform {
    color: #6bc873;
    background-color: transparent;
    border: 3px solid #6bc873;
    border-radius: 5em;
    font-size: large;
    margin-top: -.2em;
    padding-left: 3%;
    padding-right: 3%;
}

.wcu {
    color: #6bc873;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
}

.paktext {
    color: #3D3D3D;
    font-size: 1.2em;
    font-weight: bold;
}

.whts_new_mob {
    width: 90%;
}

.reason {
    font-size: 1.2em;
}

.fa-check-square {
    color: #6bc873;
}

@media screen and (max-width: 834px) {
}

@media screen and (max-width: 414px) {
    .new-header {
        font-size: 1em;
    }

    .wcu {
        font-size: 1.1em;
    }

    .paktext {
        font-size: 1.1em;
    }

    .reason {
        font-size: 1em;
    }

    .btn-custom {
        border-radius: 2em;
    }
}

/* Our Story */
#page-story {
    background: url('https://res.cloudinary.com/dotmi0hj2/image/upload/v1625259251/BG_FOR_SEC5_awftbl.jpg');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
/*Our Clients*/

.client {
    height: 130px;
    width: 300px;
    padding-right: 20%;
}

.client_logo {
    width: 100px;
}

.clients {
    display: flex;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 2%;
}

/* Contact Us */
#page-contact {
    background: url('https://res.cloudinary.com/dotmi0hj2/image/upload/v1625259154/SEC_2_3_BG_v1hnbp.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% 90%;
}

.contactmap {
    background-color: transparent;
    width: 90%;
    height: auto;
    position: relative;
    margin: 0 auto;
    margin-top: 3%;
}

.imgmap {
    height: 600px;
    width: 100%;
    border-radius: 20px;
}

.contact-form
.form-field {
    position: relative;
    margin: 10px 10px 10px 10px;
    left: 10px;
    right: 10px;
    float: left;
}

.contact-form
.input-text {
    display: block;
    width: 100%;
    height: 45px;
    border-width: 0 0 0 0;
    border-color: #c6ddb3;
    box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.1);
    font-size: 1em;
    line-height: 26px;
    font-weight: 400;
}

    .contact-form
    .input-text:focus + .label,
    .contact-form
    .input-text.not-empty + .label {
        transform: translateY(-28px);
    }

    .contact-form
    .input-text:focus {
        outline: none;
    }

.contact-form
.label {
    position: absolute;
    left: 30px;
    bottom: 5px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    cursor: text;
    text-transform: capitalize;
    transition: transform 0.2s ease-in-out;
}

.contact-form
.submit-btn {
    background-color: #6bc873;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    padding: 8px;
    border: none;
    width: 80px;
    cursor: pointer;
}

.contactlabel {
    /*background: rgb(231,229,180);*/
    width: auto;
    height: auto;
    margin: 0 auto;
    margin-top: 4%;
    margin-left: 2%;
    font-size: 1.2em;
    font-weight: bold;
    color: #6bc873;
    text-align: center;
    /*padding-left: 10%;*/
    /*border-radius: 20px;*/
}

    .contactlabel
    .contactlabel-header {
        font-family: futura;
        font-size: 1.5em;
        font-weight: 400;
        color: #3D3D3D;
        position: relative;
    }

.contacttext {
    width: auto;
    height: auto;
    margin: 0 auto;
    margin-top: 4%;
    margin-left: 2%;
    font-size: 1.2em;
    font-weight: normal;
    color: #6bc873;
    text-align: center;
}

.contacticon {
    width: auto;
    height: auto;
    margin: 0 auto;
    margin-top: 4%;
    margin-left: 2%;
    font-size: 1.5em;
    font-weight: bold;
    color: #6bc873;
    text-align: center;
}

.text {
    text-align: left;
}

img.imgmap {
    height: 20vh;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .contactlabel {
        font-size: 0.9em;
    }
}

@media screen and (max-width: 414px) {
    .contactlabel {
        font-size: 0.7em;
    }

    .contacttext {
        font-size: 1em;
    }
}

/* FOOTER */
.site-footer {
    background-color: #6bc873;
}

.footertext {
    color: white;
    font-size: 1.2em;
}


.imgflogo {
    width: 50%;
}

.footerlist {
    List-style-type: none;
    text-align: right justify;
}

    .footerlist .list-item a {
        color: #ffffff;
    }

        .footerlist .list-item a:hover {
            color: #f3c50d;
            font-size: 1.2em;
            text-decoration: none;
        }

.site-footer .firstname {
    font-family: quantum;
    color: #ffffff;
    font-size: 1em;
}

.site-footer .lastname {
    font-family: quantum;
    color: #f3c50d;
    font-size: 1em;
}


.site-footer .layout-icon {
    font-size: 1.5em;
    transition: all 0.3s ease-out;
}

    .site-footer .layout-icon:hover {
        transform: scale(1.1) translate(-3px);
        color: #f3c50d;
        text-decoration: none;
    }

.site-footer .copyright {
    color: #3D3D3D;
    font-size: 1.2em;
}

@media screen and (max-width: 834px) {
    .imgflogo {
        width: 40%;
    }

    .layout-social .layout-icon {
        font-size: 1.2em;
    }

    .site-footer .copyright {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 414px) {
    .imgflogo {
        width: 40%;
    }

    .layout-social .layout-icon {
        font-size: 1.2em;
    }

    .site-footer .copyright {
        font-size: 0.8em;
    }

    .footertext {
        font-size: 0.8em;
    }
}


/* CLIENT SLIDER */

.brands_slider_container {
    height: 25vh;
    border: solid 1px #e8e8e8;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    padding-left: 10%;
    padding-right: 10%;
    background: #ffffff;
}

.brands_slider {
    height: 90%;
    margin-top: 5%;
}

.brands_item {
    height: 50%;
}

    .brands_item img {
        max-width: 100%
    }

.brands_nav {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 5px;
    cursor: pointer;
}

    .brands_nav i {
        color: #e5e5e5;
        -webkit-transition: all 200ms ease;
        -moz-transition: all 200ms ease;
        -ms-transition: all 200ms ease;
        -o-transition: all 200ms ease;
        transition: all 200ms ease
    }

    .brands_nav:hover i {
        color: #676767;
    }

.brands_prev {
    left: 40px;
}

.brands_next {
    right: 40px;
}

@media screen and (max-width: 414px) {
    .brands_item img {
        max-width: 80%;
    }

    .brands_slider_container {
        height: 20vh;
    }
}