/*------------------------------------------------------------------
 * Theme Name: CRE8
 * Theme URI: https://www.brandio.io/envato/cre8
 * Author: Brandio
 * Author URI: https://www.brandio.io/
 * Description: A Bootstrap Responsive HTML5 Template
 * Version: 1.0
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Bootstrap v4.1 (http://getbootstrap.com)
 * Copyright 2019 Brandio.
 -------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]

1. General Styles.
2. Header Styles
3. Box Contentt Styles
4. Default Content Styles
5. Clients Section Styles
6. Other Content Styles
7. Process Section Styles
8. Team Section Styles
9. Jobs Section Styles
10. Blog Section Styles
11. Post Section Styles
12. Few Contact Styles
13. Jobs Section Styles
14. Social Row Styles
15. Project Info Styles
16. Footer Styles
17. Responsive Styles.

-------------------------------------------------------------------*/

@import url("https://fonts.googleapis.com/css?family=Comfortaa&display=swap");
@import url("https://fonts.googleapis.com/css?family=Lalezar&display=swap");
/*@import url('https://cdn-uicons.flaticon.com/uicons-bold-rounded/css/uicons-bold-rounded.css');*/

/* -----------------------------------
    1 - General Styles
------------------------------------*/
::selection {
    background-color: rgba(137, 139, 145, 0.7);
}


*, body {
    font-family: 'Comfortaa', cursive;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Lalezar", cursive;
}

/* Explicit font-size rules to prevent deprecation warnings */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

.cr-btn {
    display: inline-block;
    font-family: "Lalezar", cursive;
    font-size: 1.45rem;
    color: #fff;
    text-transform: uppercase;
    padding: 1.3rem 2.1rem 1rem;
    border-radius: 10rem;
    -webkit-box-shadow: inset 0 0 0 0.25rem #fff;
    box-shadow: inset 0 0 0 0.25rem #fff;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .cr-btn:hover, .cr-btn:focus {
        color: #232931;
        text-decoration: none;
        -webkit-box-shadow: inset 0 0 0 3.25rem #fff;
        box-shadow: inset 0 0 0 3.25rem #fff;
    }

    .cr-btn.primary {
        color: rgb(168, 207, 69) !important;
        background-color: transparent !important;
        border: 4px solid rgb(168, 207, 69) !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

        .cr-btn.primary:hover, .cr-btn.primary:focus {
            color: #fff !important;
            background-color: rgb(168, 207, 69) !important;
            border: 4px solid rgb(168, 207, 69) !important;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
        }

    .cr-btn.black {
        color: #000;
        -webkit-box-shadow: inset 0 0 0 0.28rem #000;
        box-shadow: inset 0 0 0 0.28rem #000;
    }

        .cr-btn.black:hover, .cr-btn.black:focus {
            color: #fff;
            -webkit-box-shadow: inset 0 0 0 3.25rem #000;
            box-shadow: inset 0 0 0 3.25rem #000;
        }

    .cr-btn.ex-padding {
        padding: 1.3rem 3.7rem 1rem;
    }

body {
    overflow-x: hidden;
    -webkit-transition: all 500ms cubic-bezier(1, -0.02, 0.25, 0.75);
    transition: all 500ms cubic-bezier(1, -0.02, 0.25, 0.75);
}

    body.menu-open {
        padding-left: 30rem;
    }

.menu-toggle {
    position: fixed;
    z-index: 99999;
    width: 1.8rem;
    height: 2.2rem;
    cursor: pointer;
    left: 3.5rem;
    top: 50%;
    margin-top: -1.1rem;
    mix-blend-mode: difference;
    -webkit-transition: all 500ms cubic-bezier(1, -0.02, 0.25, 0.75);
    transition: all 500ms cubic-bezier(1, -0.02, 0.25, 0.75);
}

    .menu-toggle .icon {
        position: absolute;
        display: inline-block;
        /*top: 0;
        left: 0;*/
        width: 100%;
        height: 3px;
        background-color: #4ECCA3;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
        
        right: 0;
        width: 80%;
    }

        .menu-toggle .icon:before, .menu-toggle .icon:after {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #4ECCA3;
            -webkit-transform-origin: center;
            -moz-transform-origin: center;
            -ms-transform-origin: center;
            transform-origin: center;
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }

        .menu-toggle .icon:before {
            /*top: 1rem;*/
            top: 10px;
        }

        .menu-toggle .icon:after {
            /*top: 2rem;*/
            top: 20px;
        }

    .menu-toggle.open {
        left: 29.1rem;
    }

        .menu-toggle.open .icon {
            background-color: transparent;
        }

            .menu-toggle.open .icon:before {
                -webkit-transform: rotate(45deg) scaleX(1.4);
                -moz-transform: rotate(45deg) scaleX(1.4);
                -ms-transform: rotate(45deg) scaleX(1.4);
                transform: rotate(45deg) scaleX(1.4);
            }

            .menu-toggle.open .icon:after {
                top: 1rem;
                -webkit-transform: rotate(-45deg) scaleX(1.4);
                -moz-transform: rotate(-45deg) scaleX(1.4);
                -ms-transform: rotate(-45deg) scaleX(1.4);
                transform: rotate(-45deg) scaleX(1.4);
            }

.main-menu {
    position: fixed;
    top: 0;
    left: -30rem;
    height: 100%;
    width: 30rem;
    /*background-color: #393E46;*/
    background-image: url("../images/gradient.png");
    background-size: cover;
    text-align: right;
    padding: 3rem 4rem;
    overflow-y: hidden;
    z-index: 9999;
    -webkit-transition: all 500ms cubic-bezier(1, -0.02, 0.25, 0.75);
    transition: all 500ms cubic-bezier(1, -0.02, 0.25, 0.75);
}

    .main-menu.opened {
        left: 0;
    }

    .main-menu .contant-info {
        margin-bottom: 4rem;
    }

        .main-menu .contant-info div {
            font-family: "Lalezar", cursive;
            font-size: 1.3rem;
            color: #777A80;
        }

            .main-menu .contant-info div a {
                font-family: "Lalezar", cursive;
                font-size: 1.3rem;
                color: #777A80;
                -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }

                .main-menu .contant-info div a:hover, .main-menu .contant-info div a:focus {
                    color: #4ECCA3;
                    text-decoration: none;
                }

    .main-menu .menu-links {
        margin-bottom: 6rem;
    }

        .main-menu .menu-links ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }

            .main-menu .menu-links ul li {
                overflow: hidden;
                padding-top: 0.5rem;
            }

                .main-menu .menu-links ul li a {
                    display: inline-block;
                    font-size: 5.3rem;
                    line-height: 3.4rem;
                    font-family: "Lalezar", cursive;
                    /*color: #14181C;*/
                    color:#d1d1d1 ;
                    text-transform: uppercase;
                    -webkit-transition: all 0.5s ease;
                    transition: all 0.5s ease;
                }

                    .main-menu .menu-links ul li a:hover, 
                    .main-menu .menu-links ul li a:focus {
                        /*color: #fff;*/
                        color: #a8cf45;
                        text-decoration: none;
                    }

    .main-menu .social-media {
        display: inline-block;
        opacity: 1;
        pointer-events: all;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

        .main-menu .social-media .social-link-holder {
            text-align: right;
        }

            .main-menu .social-media .social-link-holder a {
                font-size: 1.2rem;
                font-family: "Lalezar", cursive;
                color: #A8AAAD;
                -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }

                .main-menu .social-media .social-link-holder a:hover, .main-menu .social-media .social-link-holder a:focus {
                    color: #8b8d91;
                    text-decoration: none;
                }

/* -----------------------------------
    2 - Header Styles
------------------------------------*/
.cnav {
    position: fixed;
    width: 100%;
    z-index: 999;
    padding: 4rem 3.5rem;
    pointer-events: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

    .cnav .logo-holder {
        display: inline-block;
        pointer-events: all;
    }

        .cnav .logo-holder img {
            width: 13.4rem;
        }

    .cnav .social-media {
        display: inline-block;
        opacity: 1;
        pointer-events: all;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

        .cnav .social-media .social-link-holder {
            text-align: left;
        }

            .cnav .social-media .social-link-holder a {
                font-size: 1.2rem;
                font-family: "Lalezar", cursive;
                color: #fff;
                -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }

                .cnav .social-media .social-link-holder a:hover, .cnav .social-media .social-link-holder a:focus {
                    color: #898b91;
                    text-decoration: none;
                }

        .cnav .social-media.hide {
            -webkit-transform: translateY(-13rem);
            -moz-transform: translateY(-13rem);
            -ms-transform: translateY(-13rem);
            transform: translateY(-13rem);
        }

    .cnav.blend {
        mix-blend-mode: difference;
    }

.header {
    background-color: #232931;
    text-align: center;
    padding: 16rem 3.5rem 14rem;
}

    .header .mouse-scroll {
        position: absolute;
        display: inline-block;
        bottom: 3rem;
        left: 50%;
        margin-left: -0.8rem;
        width: 1.6rem;
        height: 2.4rem;
        border-radius: 2rem;
        background-color: rgba(255, 255, 255, 0.15);
        pointer-events: none;
        -webkit-box-shadow: 0 0.3rem 5rem rgba(0, 0, 0, 0.24);
        box-shadow: 0 0.3rem 5rem rgba(0, 0, 0, 0.24);
        -webkit-transition: all 0.6s ease;
        transition: all 0.6s ease;
    }

        .header .mouse-scroll:before {
            position: absolute;
            content: "";
            top: 0.5rem;
            left: 50%;
            margin-left: -0.1rem;
            width: 0.2rem;
            height: 0.4rem;
            border-radius: 1rem;
            background-color: rgba(255, 255, 255, 0.21);
            -webkit-animation: m-an 2s ease infinite;
            -moz-animation: m-an 2s ease infinite;
            -ms-animation: m-an 2s ease infinite;
            animation: m-an 2s ease infinite;
        }

        .header .mouse-scroll.hide {
            opacity: 0;
        }

            .header .mouse-scroll.hide:before {
                opacity: 0;
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none;
                -webkit-transition: all 0.6s ease;
                transition: all 0.6s ease;
            }

@-webkit-keyframes m-an {
    0% {
        top: 0.5rem;
        height: 0.2rem;
        opacity: 0;
    }

    15% {
        top: 0.7rem;
        height: 0.6rem;
        opacity: 1;
    }

    50% {
        top: 0.9rem;
        height: 0.6rem;
        opacity: 1;
    }

    70% {
        top: 1rem;
        height: 0.5rem;
        opacity: 1;
    }

    90% {
        top: 1.2rem;
        height: 0.5rem;
        opacity: 0;
    }

    100% {
        top: 1.2rem;
        height: 0.5rem;
        opacity: 0;
    }
}

@-moz-keyframes m-an {
    0% {
        top: 0.5rem;
        height: 0.2rem;
        opacity: 0;
    }

    15% {
        top: 0.7rem;
        height: 0.6rem;
        opacity: 1;
    }

    50% {
        top: 0.9rem;
        height: 0.6rem;
        opacity: 1;
    }

    70% {
        top: 1rem;
        height: 0.5rem;
        opacity: 1;
    }

    90% {
        top: 1.2rem;
        height: 0.5rem;
        opacity: 0;
    }

    100% {
        top: 1.2rem;
        height: 0.5rem;
        opacity: 0;
    }
}

@-ms-keyframes m-an {
    0% {
        top: 0.5rem;
        height: 0.2rem;
        opacity: 0;
    }

    15% {
        top: 0.7rem;
        height: 0.6rem;
        opacity: 1;
    }

    50% {
        top: 0.9rem;
        height: 0.6rem;
        opacity: 1;
    }

    70% {
        top: 1rem;
        height: 0.5rem;
        opacity: 1;
    }

    90% {
        top: 1.2rem;
        height: 0.5rem;
        opacity: 0;
    }

    100% {
        top: 1.2rem;
        height: 0.5rem;
        opacity: 0;
    }
}

@keyframes m-an {
    0% {
        top: 0.5rem;
        height: 0.2rem;
        opacity: 0;
    }

    15% {
        top: 0.7rem;
        height: 0.6rem;
        opacity: 1;
    }

    50% {
        top: 0.9rem;
        height: 0.6rem;
        opacity: 1;
    }

    70% {
        top: 1rem;
        height: 0.5rem;
        opacity: 1;
    }

    90% {
        top: 1.2rem;
        height: 0.5rem;
        opacity: 0;
    }

    100% {
        top: 1.2rem;
        height: 0.5rem;
        opacity: 0;
    }
}

.extra-lg-text {
    color: #fff;
    text-align: center;
    font-family: "Lalezar", cursive;
    font-size: 6.9rem;
    line-height: 5rem;
    text-transform: uppercase;
}

    .extra-lg-text span {
        display: inline-block;
        font-family: "Lalezar", cursive;
    }

    .extra-lg-text .other-color {
        color: rgb(168, 207, 69) !important;
        font-family: "Lalezar", cursive;
    }

/*
.inner-page{
    .header{
        background-color: #393E46;
    }
}
*/
/* -----------------------------------
    3 - Box Contentt Styles
------------------------------------*/
.box-content {
    padding: 0;
}

    .box-content .row {
        margin: 0;
    }

        .box-content .row div[class^="col"] {
            padding: 0;
        }

.boxy {
    position: relative;
    height: 100%;
    padding: 12rem 6rem;
}

    .boxy h1.title {
        font-family: "Lalezar", cursive;
        font-size: 4.1rem;
        line-height: 3.4rem;
        margin: 0;
        margin-bottom: 3rem;
    }

    .boxy .text ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .boxy .text ul li {
            font-family: "Lalezar", cursive;
            text-transform: uppercase;
            font-size: 1.2rem;
        }

    .boxy .bottom-text {
        text-align: center;
    }

        .boxy .bottom-text .link {
            font-family: "Lalezar", cursive;
            text-transform: uppercase;
            color: #fff;
            font-size: 1.3rem;
        }

            .boxy .bottom-text .link a {
                font-family: "Lalezar", cursive;
                text-transform: uppercase;
                color: #fff;
                font-size: 1.3rem;
                -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }

                .boxy .bottom-text .link a:hover, .boxy .bottom-text .link a:focus {
                    color: #abadb3;
                    text-decoration: none;
                }

        .boxy .bottom-text .text {
            color: #fff;
            font-size: 1.2rem;
        }

    .boxy .project-link-full {
        position: absolute;
        display: inline-block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .boxy.c1-color {
        background-color: #EEEEEE;
    }

        .boxy.c1-color h1.title {
            color: #232931;
        }

        .boxy.c1-color .text {
            color: rgba(0, 0, 0, 0.66);
        }

        .boxy.c1-color .slg-text {
            color: #232931;
        }

        .boxy.c1-color .normal-lg-text p {
            color: rgba(0, 0, 0, 0.66);
        }

    .boxy.primary-color {
        background-color: #4ECCA3;
    }

        .boxy.primary-color h1.title {
            color: #232931;
        }

        .boxy.primary-color .text {
            color: rgba(0, 0, 0, 0.66);
        }

        .boxy.primary-color .slg-text {
            color: #fff;
        }

        .boxy.primary-color .normal-lg-text p {
            color: #fff;
        }

    .boxy.default-color {
        background-color: #232931;
    }

        .boxy.default-color h1.title {
            color: #EEEEEE;
        }

        .boxy.default-color .text {
            color: rgba(216, 216, 216, 0.66);
        }

        .boxy.default-color .slg-text {
            color: black;
        }

        .boxy.default-color .normal-lg-text p {
            color: #000000db;
        }

    .boxy.c2-color {
        background-color: #393E46;
    }

        .boxy.c2-color h1.title {
            color: #EEEEEE;
        }

        .boxy.c2-color .text {
            color: rgba(216, 216, 216, 0.66);
        }

        .boxy.c2-color .slg-text {
            color: #fff;
        }

        .boxy.c2-color .normal-lg-text p {
            color: rgba(255, 255, 255, 0.66);
        }

    .boxy.img-box {
        position: relative;
        padding: 4rem;
        min-height: 652px;
        z-index: 1;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        -moz-align-items: flex-end;
        -webkit-align-items: flex-end;
        -ms-align-items: flex-end;
        align-items: flex-end;
        overflow: hidden;
    }

        .boxy.img-box:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #232931;
            opacity: 0;
            z-index: -1;
            -webkit-transform-origin: center center;
            -moz-transform-origin: center center;
            -ms-transform-origin: center center;
            transform-origin: center center;
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            transform: scale(0.9);
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }

        .boxy.img-box .img img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .boxy.img-box .img {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            -webkit-transform-origin: center center;
            -moz-transform-origin: center center;
            -ms-transform-origin: center center;
            transform-origin: center center;
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -webkit-transition: all 2s ease;
            transition: all 2s ease;
        }

        .boxy.img-box:hover .img, .boxy.img-box:focus .img {
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.1);
            -ms-transform: scale(1.1);
            transform: scale(1.1);
        }

        .boxy.img-box:hover:before, .boxy.img-box:focus:before {
            opacity: 0.8;
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
        }

/* -----------------------------------
    4 - Default Content Styles
------------------------------------*/
.default-content {
    background-color: #1a202c;
    text-align: center;
    padding: 10rem 6.0rem 8rem;
}

    .default-content .lg-text {
        margin-bottom: 2.2rem;
    }

    .default-content p {
        color: rgba(255, 255, 255, 0.66);
        font-size: 1.26rem;
    }

    .default-content .normal-text {
        margin-bottom: 5rem;
    }

.lg-text {
    color: #fff;
    text-align: center;
    font-family: "Lalezar", cursive;
    font-size: 5.3rem;
    font-size: 4.9rem;
    line-height: 3.9rem;
    text-transform: uppercase;
    margin-bottom: 2.2rem;
}

    .lg-text span {
        font-family: "Lalezar", cursive;
        display: inline-block;
    }

    .lg-text .other-color {
        color: #a8cf45 !important;
        font-family: "Lalezar", cursive;
    }

.normal-text p {
    color: rgba(255, 255, 255, 0.66);
    font-size: 1.26rem;
}

.slg-text {
    color: #fff;
    text-align: center;
    font-family: "Lalezar", cursive;
    font-size: 5rem;
    line-height: 3.9rem;
    text-transform: uppercase;
    margin-bottom: 5rem;
}

    .slg-text span {
        font-family: "Lalezar", cursive;
        display: inline-block;
    }

    .slg-text .other-color {
        color: #4ECCA3;
        font-family: "Lalezar", cursive;
    }

.normal-lg-text {
    text-align: center;
}

    .normal-lg-text p {
        font-family: "Lalezar", cursive;
        color: rgba(255, 255, 255, 0.66);
        font-size: 2.5rem;
        line-height: 3.3rem;
    }

        .normal-lg-text p a {
            font-family: "Lalezar", cursive;
            color: rgba(255, 255, 255, 0.66);
            font-size: 2rem;
            line-height: 3.3rem;
        }

/* -----------------------------------
    5 - Clients Section Styles (Tailwind-first)
------------------------------------*/
.clients-section {
    background-color: #fff;
    text-align: left;
    /* mobile-first padding; scale up at breakpoints */
    padding: 4rem 1rem 2rem;
}

@media (min-width: 640px) { /* sm */
    .clients-section {
        padding: 6rem 2rem 3rem;
    }
}

@media (min-width: 1024px) { /* lg */
    .clients-section {
        padding: 10rem 6rem 3rem;
    }
}

.clients-section .lg-text {
    color: #000;
    margin-bottom: 2.2rem;
}

.clients-section p {
    color: rgba(0, 0, 0, 0.66);
}

.clients-section .normal-text {
    margin-bottom: 5rem;
}

/* Let Tailwind control the layout for .clients-logos.
   Do NOT set display or grid-template-columns here. */
.clients-section .clients-logos {
    width: 100%;
    max-width: 100%; /* avoid accidental overflow */
}

    /* Cells & images: size relative to the grid cell */
    .clients-section .clients-logos .logo-holder {
        /* No fixed width/height; allow the grid to size cells */
        margin-bottom: 0;
        /* If you want extra safety for centering when place-items-center isn't used: */
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .clients-section .clients-logos .logo-holder img {
            display: block;
            max-width: 100%;
            height: auto;
            max-height: 60px; /* keeps logos visually consistent */
        }

/* If you still use .default-content elsewhere, keep it.
   It should not affect the clients section since that block isn't inside .default-content.
   You can leave these rules as-is or remove them if unneeded. */
.default-content .clients-logos {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -moz-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    width: 100%;
}

    .default-content .clients-logos .logo-holder {
        -moz-flex: 1 1 25%;
        -webkit-flex: 1 1 25%;
        -ms-flex: 1 1 25%;
        flex: 1 1 25%;
        margin-bottom: 5rem;
    }

        .default-content .clients-logos .logo-holder img {
            max-height: 2.8rem;
        }

/* -----------------------------------
    6 - Other Content Styles
------------------------------------*/
.other-content {
    background-color: #393E46;
    text-align: center;
    padding: 9rem 3.5rem 7rem;
}

    .other-content .lg-text {
        margin-bottom: 2.2rem;
    }

    .other-content p {
        color: rgba(255, 255, 255, 0.66);
        font-size: 1.26rem;
        line-height: 2.5rem;
    }

    .other-content .normal-text {
        margin-bottom: 4rem;
    }

/* -----------------------------------
    7 - Process Section Styles
------------------------------------*/
.process-section {
    background-color: #fff;
    text-align: left;
    padding: 8rem 12rem 3rem;
}

    .process-section .lg-text {
        text-align: left;
    }

    .process-section p {
        color: rgba(0, 0, 0, 0.66);
        margin-bottom: 6rem;
    }

    .process-section > .row {
        margin-right: -40px;
        margin-left: -40px;
    }

        .process-section > .row > div[class^="col"] {
            padding-right: 40px;
            padding-left: 40px;
        }

.text-box {
    margin-bottom: 4rem;
}

    .text-box .title {
        font-family: "Lalezar", cursive;
        font-size: 2.4rem;
        margin-bottom: 0.8rem;
    }

    .text-box p {
        color: rgba(0, 0, 0, 0.66);
        font-size: 1.26rem;
        line-height: 2.5rem;
    }

/* -----------------------------------
    8 - Team Section Styles
------------------------------------*/
.team-section {
    position: relative;
    background-color: #393E46;
    padding: 10rem 8rem 12rem;
    z-index: 10;
}

    .team-section .team-photos {
        position: absolute;
        left: 0;
        bottom: -12.25rem;
        width: 100%;
        padding-bottom: 5rem;
        overflow: hidden;
        white-space: nowrap;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        .team-section .team-photos .photo-holder {
            position: relative;
            display: inline-block;
            margin: 0 2.4rem;
        }

            .team-section .team-photos .photo-holder img {
                border-radius: 10rem;
                width: 14.5rem;
            }

            .team-section .team-photos .photo-holder:nth-child(odd) {
                bottom: -3.5rem;
            }

@-webkit-keyframes photos-move {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-140%);
        -moz-transform: translateX(-140%);
        -ms-transform: translateX(-140%);
        transform: translateX(-140%);
    }
}

@-moz-keyframes photos-move {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-140%);
        -moz-transform: translateX(-140%);
        -ms-transform: translateX(-140%);
        transform: translateX(-140%);
    }
}

@-ms-keyframes photos-move {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-140%);
        -moz-transform: translateX(-140%);
        -ms-transform: translateX(-140%);
        transform: translateX(-140%);
    }
}

@keyframes photos-move {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-140%);
        -moz-transform: translateX(-140%);
        -ms-transform: translateX(-140%);
        transform: translateX(-140%);
    }
}

/* -----------------------------------
    9 - Jobs Section Styles
------------------------------------*/
.jobs-section {
    background-color: #fff;
    text-align: left;
    padding: 10rem 10rem 3rem;
}

    .jobs-section .lg-text {
        text-align: left;
        margin-bottom: 7rem;
    }

    .jobs-section .job-box-row {
        margin-bottom: 5rem;
    }

        .jobs-section .job-box-row:last-child {
            margin-bottom: 0;
        }

    .jobs-section .job-box .title {
        font-family: "Lalezar", cursive;
        font-size: 2.4rem;
        line-height: 2.5rem;
        text-transform: uppercase;
    }

    .jobs-section .job-box .subtitle {
        color: rgba(0, 0, 0, 0.66);
        font-size: 1.26rem;
        line-height: 2.5rem;
    }

    .jobs-section .btn-holder {
        text-align: right;
    }

.padding-for-team {
    padding-top: 17rem !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

/* -----------------------------------
    10 - Blog Section Styles
------------------------------------*/
.blog-section {
    padding: 6rem;
    background-color: #fff;
}

.post-box {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    background-color: #EEEEEE;
    margin-bottom: 5rem;
}

    .post-box:last-child {
        margin-bottom: 0;
    }

    .post-box .text-holder {
        padding: 6.5rem 5rem;
    }

        .post-box .text-holder .title {
            display: inline-block;
            color: #232931;
            text-align: left;
            font-family: "Lalezar", cursive;
            font-size: 5.3rem;
            line-height: 3.9rem;
            text-transform: uppercase;
            margin-bottom: 2.2rem;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

            .post-box .text-holder .title:hover, .post-box .text-holder .title:focus {
                text-decoration: none;
                color: #60666d;
            }

        .post-box .text-holder .text {
            color: rgba(0, 0, 0, 0.66);
            font-size: 1.26rem;
            line-height: 2.5rem;
        }

    .post-box .img-holder img {
        width: 29rem;
    }

/* -----------------------------------
    11 - Post Section Styles
------------------------------------*/
.post-section {
    background-color: #fff;
    padding: 0;
}

    .post-section > .row {
        margin: 0;
    }

        .post-section > .row > div[class^="col"] {
            padding: 0;
        }

    .post-section .post-header {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

        .post-section .post-header .post-info-holder {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            margin-bottom: 4rem;
        }

            .post-section .post-header .post-info-holder .link-holder {
                -moz-flex: 1;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }

                .post-section .post-header .post-info-holder .link-holder a {
                    font-family: "Lalezar", cursive;
                    font-size: 1.7rem;
                    color: #393E46;
                    text-transform: uppercase;
                    -webkit-transition: all 0.3s ease;
                    transition: all 0.3s ease;
                }

                    .post-section .post-header .post-info-holder .link-holder a:hover, .post-section .post-header .post-info-holder .link-holder a:focus {
                        color: #60666d;
                        text-decoration: none;
                    }

            .post-section .post-header .post-info-holder .post-info {
                -moz-flex: 1;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
                text-align: right;
            }

                .post-section .post-header .post-info-holder .post-info .date {
                    display: inline-block;
                    color: rgba(0, 0, 0, 0.66);
                    font-size: 1.26rem;
                    margin-right: 1rem;
                }

                .post-section .post-header .post-info-holder .post-info .auther {
                    display: inline-block;
                    color: rgba(0, 0, 0, 0.66);
                    font-size: 1.26rem;
                }

        .post-section .post-header .text-holder {
            padding: 4rem 9.5rem;
        }

            .post-section .post-header .text-holder .title {
                display: inline-block;
                color: #232931;
                text-align: left;
                font-family: "Lalezar", cursive;
                font-size: 5.3rem;
                line-height: 3.9rem;
                text-transform: uppercase;
                margin-bottom: 2.2rem;
                -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }

            .post-section .post-header .text-holder .text {
                color: rgba(0, 0, 0, 0.66);
                font-size: 1.26rem;
                line-height: 2.5rem;
            }

        .post-section .post-header .img-holder img {
            width: 29rem;
        }

    .post-section .post-content {
        padding: 4rem 9.5rem;
    }

        .post-section .post-content h1 {
            margin-bottom: 1rem;
        }

        .post-section .post-content p {
            color: rgba(0, 0, 0, 0.66);
            font-size: 1.12rem;
            line-height: 2.5rem;
            margin-bottom: 4rem;
        }

/* -----------------------------------
    12 - Few Contact Styles
------------------------------------*/
.few-contact {
    padding: 4rem 8rem;
    background-color: #fff;
}

    .few-contact .contact-info-holder {
        text-align: left;
    }

        .few-contact .contact-info-holder .title {
            font-family: "Lalezar", cursive;
            font-size: 1.6rem;
            color: #777A80;
        }

        .few-contact .contact-info-holder .contact-info {
            font-family: "Lalezar", cursive;
            color: #232931;
            font-size: 4.8rem;
        }

            .few-contact .contact-info-holder .contact-info a {
                font-family: "Lalezar", cursive;
                color: #4ECCA3;
                font-size: 4.8rem;
                -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }

                .few-contact .contact-info-holder .contact-info a:hover, .few-contact .contact-info-holder .contact-info a:focus {
                    color: #777A80;
                    text-decoration: none;
                }

/* -----------------------------------
    13 - Jobs Section Styles
------------------------------------*/
.our-people-section {
    background-color: #fff;
    text-align: left;
    padding: 10rem 10rem;
}

    .our-people-section .extra-lg-text {
        color: #393E46;
        margin-bottom: 11rem;
    }

    .our-people-section .lg-text {
        text-align: left;
        margin-bottom: 2rem;
    }

    .our-people-section .normal-text {
        margin-bottom: 5rem;
    }

        .our-people-section .normal-text p {
            color: rgba(0, 0, 0, 0.66);
        }

    .our-people-section .people-box-row {
        margin-bottom: 5rem;
    }

        .our-people-section .people-box-row:last-child {
            margin-bottom: 0;
        }

    .our-people-section .people-box .title {
        font-family: "Lalezar", cursive;
        font-size: 2.4rem;
        line-height: 2.5rem;
        text-transform: uppercase;
    }

    .our-people-section .people-box .subtitle {
        color: rgba(0, 0, 0, 0.66);
        font-size: 1.26rem;
        line-height: 2.5rem;
    }

    .our-people-section .btn-holder {
        text-align: right;
    }

/* -----------------------------------
    14 - Social Row Styles
------------------------------------*/
.social-row {
    background-color: #393E46;
    text-align: center;
    padding: 5rem 5.5rem;
}

    .social-row .social-media .social-link-holder {
        display: inline-block;
        margin: 0 1rem;
    }

        .social-row .social-media .social-link-holder a {
            font-family: "Lalezar", cursive;
            font-size: 2.5rem;
            color: #fff;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

            .social-row .social-media .social-link-holder a:hover, .social-row .social-media .social-link-holder a:focus {
                color: #4ECCA3;
                text-decoration: none;
            }

/* -----------------------------------
    15 - Project Info Styles
------------------------------------*/
.project-info {
    background-color: #fff;
    padding: 6rem 8rem 2rem;
}

    .project-info h2 {
        color: #393E46;
        margin-bottom: 1rem;
    }

    .project-info .lg-text {
        color: #000;
        text-align: left;
        margin-bottom: 2rem;
    }

    .project-info .normal-text {
        margin-bottom: 5rem;
    }

        .project-info .normal-text p {
            color: rgba(0, 0, 0, 0.66);
        }

    .project-info .text-box .title {
        color: #393E46;
        font-size: 1.9rem;
        margin-bottom: 1.4rem;
    }

.project-imgs {
    background-color: #fff;
    padding: 3.5rem;
}

    .project-imgs .img-holder {
        margin-bottom: 4rem;
    }

        .project-imgs .img-holder img {
            width: 100%;
        }

/* -----------------------------------
    16 - Footer Styles
------------------------------------*/
.footer {
    background-color: #232931;
    text-align: center;
    padding: 10rem 8rem 8rem;
}

    .footer .lg-text {
        color: #4ECCA3;
        margin-bottom: 2.2rem;
    }

    .footer p {
        color: rgba(255, 255, 255, 0.66);
        font-size: 1.26rem;
    }

    .footer .normal-text {
        margin-bottom: 30px;
    }

    .footer .contact-info-holder {
        text-align: left;
    }

        .footer .contact-info-holder .title {
            font-family: "Lalezar", cursive;
            font-size: 1.6rem;
            color: #777A80;
        }

        .footer .contact-info-holder .contact-info {
            font-family: "Lalezar", cursive;
            color: #fff;
            font-size: 4.8rem;
        }

            .footer .contact-info-holder .contact-info a {
                font-family: "Lalezar", cursive;
                color: #fff;
                font-size: 4.8rem;
                -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }

                .footer .contact-info-holder .contact-info a:hover, .footer .contact-info-holder .contact-info a:focus {
                    color: #4ECCA3;
                    text-decoration: none;
                }

        .footer .contact-info-holder .social-media {
            display: inline-block;
            opacity: 1;
            pointer-events: all;
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

            .footer .contact-info-holder .social-media .social-link-holder {
                text-align: left;
                display: inline-block;
                margin-right: 0.5rem;
            }

                .footer .contact-info-holder .social-media .social-link-holder a {
                    font-size: 1.2rem;
                    font-family: "Lalezar", cursive;
                    color: #fff;
                    -webkit-transition: all 0.3s ease;
                    transition: all 0.3s ease;
                }

                    .footer .contact-info-holder .social-media .social-link-holder a:hover, .footer .contact-info-holder .social-media .social-link-holder a:focus {
                        color: #898b91;
                        text-decoration: none;
                    }

    .footer.one-word {
        padding: 14rem 8rem 13rem;
    }

        .footer.one-word .lg-text {
            color: #fff;
        }

/* -----------------------------------
    17 - Responsive Styles
------------------------------------*/
@media (max-width: 1200px) {
    body.menu-open {
        padding-left: 0;
    }

    .clients-section .clients-logos .logo-holder img {
        max-height: 55px;
    }

    .footer .contact-info-holder .contact-info, .few-contact .contact-info-holder .contact-info {
        font-size: 4rem;
    }

        .footer .contact-info-holder .contact-info a, .few-contact .contact-info-holder .contact-info a {
            font-size: 4rem;
        }

    .post-box {
        margin-bottom: 3rem;
    }

        .post-box:last-child {
            margin-bottom: 0;
        }

        .post-box .text-holder {
            padding: 4rem 4rem;
        }

            .post-box .text-holder .title {
                font-size: 4rem;
                line-height: 2.8rem;
                margin-bottom: 1.2rem;
            }

            .post-box .text-holder .text {
                font-size: 1.2rem;
                line-height: 2rem;
            }

        .post-box .img-holder img {
            width: 23rem;
        }

    .post-section .post-header .post-info-holder {
        margin-bottom: 3rem;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

        .post-section .post-header .post-info-holder .post-info {
            text-align: left;
        }

    .post-section .post-header .text-holder .title {
        font-size: 3.6rem;
        line-height: 2.5rem;
        margin-bottom: 2.2rem;
    }

    .post-section .post-header .img-holder img {
        width: 24rem;
    }
}

@media (max-width: 992px) {
    .extra-lg-text {
        font-size: 4.8rem;
        line-height: 3.4rem;
    }

    .lg-text {
        font-size: 4rem;
        line-height: 2.8rem;
    }

    .normal-text p {
        font-size: 1.1rem;
        line-height: 1.8rem;
    }

    .slg-text {
        font-size: 2.6rem;
        line-height: 1.9rem;
        margin-bottom: 3rem;
    }

    .normal-lg-text p {
        font-size: 1.8rem;
        line-height: 2rem;
    }

    .boxy {
        padding: 5rem 6rem;
    }

        .boxy h1.title {
            font-size: 3rem;
            line-height: 2.4rem;
            margin-bottom: 2rem;
        }

        .boxy.img-box {
            padding: 3.2rem;
            min-height: 370px;
        }

        .boxy .bottom-text .link {
            font-size: 1rem;
        }

            .boxy .bottom-text .link a {
                font-size: 1rem;
            }

        .boxy .bottom-text .text {
            font-size: 0.9rem;
        }

        .boxy.simple-data {
            padding: 7rem 6rem;
        }

    .clients-section {
        padding: 6rem 6.5rem 5rem;
    }

        .clients-section .clients-logos .logo-holder {
            -moz-flex: 1 1 25%;
            -webkit-flex: 1 1 25%;
            -ms-flex: 1 1 25%;
            flex: 1 1 25%;
            margin-bottom: 3rem;
        }

            .clients-section .clients-logos .logo-holder img {
                max-height: 1.8rem;
            }

    .process-section {
        padding: 6rem 6.5rem;
    }

        .process-section p {
            margin-bottom: 4rem;
        }

    .text-box {
        margin-bottom: 2rem;
    }

        .text-box .title {
            font-size: 2rem;
            margin-bottom: 0.6rem;
        }

        .text-box p {
            font-size: 1.1rem;
            line-height: 1.8rem;
        }

    .team-section {
        padding: 6rem 2rem 6rem;
    }

        .team-section .team-photos {
            bottom: -10.25rem;
            padding-bottom: 5rem;
        }

            .team-section .team-photos .photo-holder {
                margin: 0 1.5rem;
            }

                .team-section .team-photos .photo-holder img {
                    width: 10rem;
                }

                .team-section .team-photos .photo-holder:nth-child(odd) {
                    bottom: -2rem;
                }

    .jobs-section {
        padding: 6rem 6.5rem;
    }

        .jobs-section .lg-text {
            margin-bottom: 4rem;
        }

        .jobs-section .job-box-row {
            margin-bottom: 4rem;
        }

            .jobs-section .job-box-row:last-child {
                margin-bottom: 0;
            }

        .jobs-section .job-box .title {
            font-size: 2rem;
            line-height: 2.5rem;
            text-transform: capitalize;
        }

        .jobs-section .job-box .subtitle {
            font-size: 1.1rem;
            line-height: 2.5rem;
            margin-bottom: 0.5rem;
        }

        .jobs-section .btn-holder {
            text-align: right;
        }

            .jobs-section .btn-holder .cr-btn {
                padding: 1rem 2rem 0.7rem;
            }

    .padding-for-team {
        padding-top: 12rem !important;
    }

    .project-info {
        padding: 4rem 6.5rem 0;
    }

        .project-info h2 {
            font-size: 2rem;
            line-height: 1.8rem;
        }

        .project-info .normal-text {
            margin-bottom: 2rem;
        }

        .project-info .text-box .title {
            font-size: 1.9rem;
            margin-bottom: 0.2rem;
        }

    .blog-section {
        padding: 4rem 6.5rem;
    }

    .post-box {
        margin-bottom: 3rem;
    }

        .post-box:last-child {
            margin-bottom: 0;
        }

        .post-box .text-holder {
            padding: 4rem 3rem;
        }

            .post-box .text-holder .title {
                font-size: 2.9rem;
                line-height: 2rem;
                margin-bottom: 1.2rem;
            }

            .post-box .text-holder .text {
                font-size: 1rem;
                line-height: 1.8rem;
            }

        .post-box .img-holder img {
            width: 20rem;
        }

    .post-section .post-header .post-info-holder {
        margin-bottom: 3rem;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

        .post-section .post-header .post-info-holder .link-holder a {
            font-size: 1.4rem;
        }

        .post-section .post-header .post-info-holder .post-info {
            text-align: left;
        }

            .post-section .post-header .post-info-holder .post-info .date {
                font-size: 1.1rem;
            }

            .post-section .post-header .post-info-holder .post-info .auther {
                font-size: 1.1rem;
            }

    .post-section .post-header .text-holder {
        padding: 3rem 6.5rem 0rem;
    }

        .post-section .post-header .text-holder .title {
            font-size: 2.6rem;
            line-height: 2rem;
            margin-bottom: 2.2rem;
        }

        .post-section .post-header .text-holder .text {
            font-size: 1rem;
            line-height: 1.8rem;
        }

    .post-section .post-header .img-holder img {
        width: 20rem;
    }

    .post-section .post-content {
        padding: 3rem 6.5rem;
    }

        .post-section .post-content h1 {
            font-size: 2rem;
            line-height: 2rem;
            margin-bottom: 1rem;
        }

        .post-section .post-content p {
            font-size: 1rem;
            line-height: 1.8rem;
            margin-bottom: 3rem;
        }

    .our-people-section {
        padding: 6rem 6.5rem;
    }

        .our-people-section .extra-lg-text {
            margin-bottom: 5rem;
        }

        .our-people-section .lg-text {
            margin-bottom: 2rem;
        }

        .our-people-section .normal-text {
            margin-bottom: 3rem;
        }

        .our-people-section .people-box-row {
            margin-bottom: 3rem;
        }

            .our-people-section .people-box-row:last-child {
                margin-bottom: 0;
            }

        .our-people-section .people-box .title {
            font-size: 2rem;
            line-height: 2.5rem;
        }

        .our-people-section .people-box .subtitle {
            font-size: 1.2rem;
            line-height: 2rem;
            margin-bottom: 1rem;
        }

        .our-people-section .btn-holder {
            text-align: right;
        }

            .our-people-section .btn-holder .cr-btn {
                padding: 1.1rem 2rem 0.9rem;
            }
}

@media (max-width: 768px) {
    .menu-toggle {
        left: 2rem;
    }

    .main-menu {
        overflow: scroll;
        left: -100%;
    }

        .main-menu .menu-links ul li a {
            font-size: 4.8rem;
            line-height: 3rem;
        }

    .cnav {
        padding: 2rem 2rem;
    }

        .cnav .logo-holder img {
            width: 2.2em;
        }

    .cr-btn {
        font-size: 1.3rem;
    }

    .header {
        padding: 11.5rem 2rem 10rem;
    }

    .extra-lg-text {
        font-size: 3.8rem;
        line-height: 2.6rem;
    }

    .lg-text {
        font-size: 2.6rem;
        line-height: 1.9rem;
    }

    .normal-text p {
        font-size: 1rem;
        line-height: 1.8rem;
        text-align: center;
    }

    .boxy {
        padding: 5rem 5rem;
    }

    .clients-section {
        padding: 6rem 5rem 5rem;
    }

        .clients-section .clients-logos .logo-holder img {
            max-height: 1.5rem;
        }

    .default-content {
        padding: 10rem 2rem 8rem;
    }

    .other-content {
        padding: 6rem 2rem;
    }

    .footer {
        padding: 6rem 2rem 6rem;
    }

        .footer .contact-info-holder {
            text-align: center;
        }

            .footer .contact-info-holder .title {
                font-size: 1.8rem;
            }

            .footer .contact-info-holder .contact-info {
                font-size: 2.2rem;
                margin-bottom: 3rem;
            }

                .footer .contact-info-holder .contact-info a {
                    font-size: 2.2rem;
                }

            .footer .contact-info-holder .social-media .social-link-holder a {
                font-size: 0.9rem;
            }

        .footer.one-word {
            padding: 8rem 8rem 7rem;
        }

    .process-section {
        padding: 6rem 5rem;
    }

        .process-section p {
            margin-bottom: 4rem;
        }

    .text-box {
        margin-bottom: 2rem;
    }

        .text-box .title {
            font-size: 2rem;
            margin-bottom: 0.6rem;
        }

        .text-box p {
            font-size: 1rem;
            line-height: 1.8rem;
            margin-bottom: 2rem;
        }

    .team-section {
        padding: 6rem 2rem 6rem;
    }

        .team-section .team-photos {
            bottom: -8.25rem;
            padding-bottom: 5rem;
        }

            .team-section .team-photos .photo-holder {
                margin: 0 1rem;
            }

                .team-section .team-photos .photo-holder img {
                    width: 8rem;
                }

                .team-section .team-photos .photo-holder:nth-child(odd) {
                    bottom: -2rem;
                }

    .jobs-section {
        padding: 6rem 5rem 6rem;
    }

    .padding-for-team {
        padding-top: 8rem !important;
    }

    .project-info {
        padding: 4rem 5rem 0;
    }

    .project-imgs {
        padding: 2rem;
    }

        .project-imgs .img-holder {
            margin-bottom: 2.5rem;
        }

    .blog-section {
        padding: 3rem 5rem;
    }

    .post-box {
        margin-bottom: 3rem;
        -moz-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

        .post-box:last-child {
            margin-bottom: 0;
        }

        .post-box .text-holder {
            padding: 3rem;
        }

        .post-box .img-holder img {
            width: 100%;
        }

    .post-section .post-header {
        -moz-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

        .post-section .post-header .text-holder {
            padding: 3rem 5rem 0rem;
        }

            .post-section .post-header .text-holder .title {
                font-size: 2.9rem;
            }

        .post-section .post-header .img-holder img {
            width: 100%;
        }

    .post-section .post-content {
        padding: 3rem 5rem;
    }

    .few-contact {
        padding: 4rem 2rem;
    }

        .few-contact .contact-info-holder {
            text-align: center;
        }

            .few-contact .contact-info-holder .title {
                font-size: 1.8rem;
            }

            .few-contact .contact-info-holder .contact-info {
                font-size: 2.2rem;
                margin-bottom: 0;
            }

                .few-contact .contact-info-holder .contact-info a {
                    font-size: 2.2rem;
                }

    .our-people-section {
        padding: 6rem 5rem;
    }

        .our-people-section .extra-lg-text {
            margin-bottom: 4rem;
        }

        .our-people-section .lg-text {
            margin-bottom: 2rem;
        }

        .our-people-section .normal-text {
            margin-bottom: 3rem;
        }

        .our-people-section .people-box-row {
            margin-bottom: 3rem;
        }

            .our-people-section .people-box-row:last-child {
                margin-bottom: 0;
            }

        .our-people-section .people-box .title {
            font-size: 2rem;
            line-height: 2.5rem;
        }

        .our-people-section .people-box .subtitle {
            font-size: 1.2rem;
            line-height: 2rem;
            margin-bottom: 1rem;
        }

        .our-people-section .btn-holder {
            text-align: right;
        }

            .our-people-section .btn-holder .cr-btn {
                padding: 1.1rem 2rem 0.9rem;
            }

    .social-row {
        padding: 5rem 5.5rem;
    }

        .social-row .social-media .social-link-holder a {
            font-size: 1.5rem;
        }
}

@media (max-width: 575px) {
    .menu-toggle {
        left: inherit;
        right: 1.5rem;
        top: 3.1rem;
    }

        .menu-toggle.open {
            left: inherit;
            right: 1.5rem;
            top: 3.1rem;
        }

    .main-menu {
        width: 100%;
        padding: 2rem;
        text-align: left;
    }

        .main-menu .menu-links {
            margin-bottom: 4rem;
        }

            .main-menu .menu-links ul li {
                overflow: hidden;
                padding-top: 0.5rem;
            }

                .main-menu .menu-links ul li a {
                    font-size: 4.8rem;
                    line-height: 3rem;
                }

        .main-menu .social-media .social-link-holder {
            text-align: left;
        }

    .cnav {
        padding: 2rem 1.5rem;
    }

        .cnav .logo-holder img {
            width: 2rem;
        }

        .cnav .social-media {
            display: none;
        }

    .extra-lg-text {
        font-size: 2.8rem;
        line-height: 2rem;
    }

    .boxy {
        padding: 5rem 3.5rem;
    }

    .clients-section {
        padding: 6rem 2rem;
    }

        .clients-section .clients-logos .logo-holder {
            -moz-flex: 1 1 50%;
            -webkit-flex: 1 1 50%;
            -ms-flex: 1 1 50%;
            flex: 1 1 50%;
            margin-bottom: 3rem;
        }

            .clients-section .clients-logos .logo-holder img {
                max-height: 1.5rem;
            }

    .footer .contact-info-holder .social-media .social-link-holder a {
        font-size: 0.7rem;
    }

    .process-section {
        padding: 6rem 2rem;
    }

        .process-section > .row {
            margin-right: 0;
            margin-left: 0;
        }

            .process-section > .row > div[class^="col"] {
                padding-right: 0;
                padding-left: 0;
            }

    .jobs-section {
        padding: 6rem 2rem 6rem;
    }

        .jobs-section .btn-holder {
            text-align: left;
        }

    .project-info {
        padding: 4rem 2rem 0;
    }

    .project-imgs .img-holder {
        margin-bottom: 1rem;
    }

    .blog-section {
        padding: 2rem;
    }

    .post-box .text-holder {
        padding: 2rem;
    }

    .post-section .post-header .text-holder {
        padding: 3rem 2rem 0rem;
    }

    .post-section .post-content {
        padding: 3rem 2rem;
    }

    .our-people-section {
        padding: 6rem 2rem;
    }

        .our-people-section .btn-holder {
            text-align: left;
        }

    .social-row .social-media .social-link-holder a {
        font-size: 2rem;
    }
}


/* --------------------------------------------------------------------------------------
    MHS Custom Styling
    -----------------------------------------------------------------------*/
.form-control {
    background-clip: inherit;
}

.header .btn-holder {
    margin-top: 50px;
}

.pad-sides {
    padding: 0rem 6.8rem;
}

.process .normal-text {
    margin-bottom: 0px;
}

.quoting-info {
    color: rgba(255, 255, 255, 0.66);
    font-family: 'Comfortaa', cursive;
    text-align: left;
    margin-top: 85px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.quote-num {
    font-family: "Lalezar", cursive;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 6px 16px;
    background-color: #1a202c;
    border: 3px solid #4ecca3;
    border-radius: 50px;
    margin-right: 10px;
}

.quote-num-1 {
    font-family: "Lalezar", cursive;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 4px 16px;
    background-color: #1a202c;
    border: 3px solid #4ecca3;
    border-radius: 50px;
    margin-right: 10px;
}

.quoting-title {
    font-family: "Lalezar", cursive;
    font-size: 2.2rem;
    line-height: 0.5rem;
    font-weight: 400;
}

.chemistry {
    padding-left: 64px;
    line-height: 1;
    font-family: "Lalezar", cursive;
    font-size: 2.0rem;
    font-weight: 400;
}

.document {
    padding-left: 154px;
    line-height: 1;
    font-family: "Lalezar", cursive;
    font-size: 2.0rem;
    font-weight: 400;
}

.quoting-sub {
    font-family: "Lalezar", cursive;
    font-size: 1.0rem;
    font-weight: 100;
}

.first {
    padding-left: 150px;
}

.second {
    padding-left: 140px;
}

.third {
    padding-left: 178px;
}

.fourth {
    padding-left: 364px;
}

.quoting-text {
    font-size: 0.9rem;
    margin-top: 25px;
    max-width: 466px;
}

.text-1 {
    font-family: "Lalezar", cursive;
    text-transform: none;
    font-size: 1.2rem;
    font-size: 1.26rem;
    line-height: 2.5rem;
    font-family: 'Comfortaa', cursive;
    font-weight: 400;
}

.tech-img {
    max-width: 40px;
}

.clients-section.web-section.features-area {
    background-image: url("../images/clouds.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    background-color: #2d3748 !important;
}

    .web-section .lg-text,
    .web-section .normal-text p {
        color: white;
    }

    .web-section .normal-text p {
        color: #ffffffde;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .web-section .normal-text {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

.spacer {
    height: 300px;
}

.blend .logo-holder {
    display: none;
}

.default-content .btn-holder {
    margin-top: 80px;
}

.process .btn-holder {
    margin-top: 130px;
}

.tech-section.normal-text p {
    font-size: 1.2rem;
}


/* ------------------------------------------------------------- Hustbee Styling ----------------------------------------------*/

.rtl-row > div[class^="col-"] {
    float: right;
}

.main-slider .img-holder {
    text-align: center;
}

    .main-slider .img-holder img {
        display: inline-block;
        width: 100%;
        max-width: 500px;
        margin-top: -70px;
    }

.img-holder {
    position: relative;
    background-image: url("/images/cloud-bg-sm.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    text-align: center;
    padding: 30px 0;
    margin-left: auto;
    margin-right: auto;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .img-holder img {
        width: 80%;
        max-width: 346px;
        position: relative;
        z-index: 2;
    }


.def-aligned {
    text-align: right;
}

.img-holder {
    background-image: url(/images/cloud-bg-sm.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    text-align: center;
    padding: 30px 0;
}

/* 17. CONTACT FORM STYLING */

.contact {
}

    .contact h3 {
        margin: 0px 0px 30px;
        letter-spacing: 3px;
        text-transform: uppercase;
        font-size: 17px;
        font-weight: 500;
    }

#contactForm {
}

.form-control:focus {
    border-color: #a8cf45;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transform: rotate(2deg) scale(1.1, 1.1);
    background-color: #a8cf45;
    color: white;
    box-shadow: none;
}

.form-wrapper input {
    padding: 15px 20px;
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 400;
    width: 100%;
    margin: 0 0 20px;
    border: 1px solid #e5e5e5;
    border-radius: 25px;
}

.form-wrapper textarea {
    height: 130px;
    padding: 20px;
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 400;
    width: 100%;
    margin: 0 0 20px;
    border: 1px solid #e5e5e5;
    border-radius: 25px;
}

.checkb-cont {
    color: white !important;
}

    .checkb-cont a {
        color: #4ecca3;
    }

.btn-holder input {
    background-color: transparent;
}

.error-info {
    padding: 180px 0;
}

    .error-info h1 {
        font-size: 200px;
    }

    .error-info p {
        padding: 0px 25%;
    }


input::-webkit-input-placeholder {
    color: #999999;
}

input:focus::-webkit-input-placeholder {
    color: #999999;
}

/* Firefox < 19 */
input:-moz-placeholder {
    color: #999999;
}

input:focus:-moz-placeholder {
    color: #999999;
}

/* Firefox > 19 */
input::-moz-placeholder {
    color: #999999;
}

input:focus::-moz-placeholder {
    color: #999999;
}

/* Internet Explorer 10 */
input:-ms-input-placeholder {
    color: #999999;
}

input:focus:-ms-input-placeholder {
    color: #999999;
}

textarea::-webkit-input-placeholder {
    color: #999999;
}

textarea:focus::-webkit-input-placeholder {
    color: #999999;
}

/* Firefox < 19 */
textarea:-moz-placeholder {
    color: #999999;
}

textarea:focus:-moz-placeholder {
    color: #999999;
}

/* Firefox > 19 */
textarea::-moz-placeholder {
    color: #999999;
}

textarea:focus::-moz-placeholder {
    color: #999999;
}

/* Internet Explorer 10 */
textarea:-ms-input-placeholder {
    color: #999999;
}

textarea:focus:-ms-input-placeholder {
    color: #999999;
}


.statusMessage, .successmessage, .errormessage {
    display: none;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e5e5;
    margin: 0px auto 15px;
    padding: 20px;
    border-radius: 0px;
}

    .errormessage p, .statusMessage p, .successmessage p {
        margin: 0px !important;
        color: #999;
        font-size: 14px;
        margin: 0 !important;
    }

.success-ico {
    background: url(../images/success.png);
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    position: relative;
    top: 0px;
    background-size: 25px;
}

.error-ico {
    background: url(../images/error.png);
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    position: relative;
    top: 0px;
    background-size: 25px;
}

#sendingMessage i {
    color: #00BCD4;
    font-size: 18px;
    margin-right: 10px;
}

footer form {
    max-width: 470px;
    margin-left: auto;
    margin-right: auto;
}

.clients-section.custom-bg {
    background-color: #1a202c !important;
    padding-bottom: 10rem;
    /*background-image: url("../images/shapes/2.png");*/
    background-repeat: no-repeat;
    background-position: bottom;
}

.normal-text p {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.spec-doc {
    color: white;
    width: 100%;
    margin-top: 30px;
    background: transparent;
    padding: 0;
    display: none; /* Initially hidden */
}

.spec-doc ol {
    counter-reset: item;
    padding: 0;
    margin: 0;
    list-style: none;
}

.spec-doc ol li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.spec-doc ol li:last-child {
    border-bottom: none;
}

.spec-doc ol li:before {
    content: "0" counter(item);
    counter-increment: item;
    font-family: "Lalezar", cursive;
    font-size: 1.3rem;
    font-weight: bold;
    color: #f6ad55;
    margin-right: 20px;
    min-width: 45px;
    flex-shrink: 0;
    text-align: left;
    line-height: 1.2;
}

.spec-doc.show {
    display: block !important;
    visibility: visible !important;
}

.view-more-link {
    background-color: #4ecca3;
    color: white;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 15px;
    margin-top: 10px;
    padding: 8px 18px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    user-select: none;
    border: 2px solid #4ecca3;
    letter-spacing: 0.5px;
}

.view-more-link:hover {
    background-color: #93d732;
    border-color: #93d732;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(78, 204, 163, 0.3);
}

.portfolio-container {
    color: white;
}

.tech-counter {
    padding: 50px 23px;
    color: #ffffffa8;
    border: solid #93d732 9px;
    border-radius: 200px;
    margin-top: 140px;
    display: inline-block;
}

.percentage {
    font-size: 50px;
    font-weight: bolder;
}

.max-w {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.max-w1000 {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.cust-btn {
    margin-top: 15px;
    display: inline-block;
    font-family: "Lalezar", cursive;
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
    padding: 11px 13px 5px 13px;
    border-radius: 10rem;
    -webkit-box-shadow: inset 0 0 0 0.25rem #fff;
    box-shadow: inset 0 0 0 0.25rem #fff;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    float: left;
}

    .cust-btn:hover, .cust-btn:focus {
        color: #232931;
        text-decoration: none;
        -webkit-box-shadow: inset 0 0 0 3.25rem #fff;
        box-shadow: inset 0 0 0 3.25rem #fff;
    }

    .cust-btn.primary {
        color: #fff;
        -webkit-box-shadow: inset 0 0 0 0.15rem #4ECCA3;
        box-shadow: inset 0 0 0 0.15rem #4ECCA3;
    }

        .cust-btn.primary:hover, .cust-btn.primary:focus {
            color: #fff;
            -webkit-box-shadow: inset 0 0 0 3.25rem #4ecca3;
            box-shadow: inset 0 0 0 3.25rem #4ecca3;
        }

.clients-section .clients-logos .logo-holder {
    text-align: center;
}


/* ============================================================== 
     # Tech spec doc styling
=================================================================== */


.spec-doc ul {
    counter-reset: index;
    padding: 0;
    max-width: 300px;
}

/* List element */
.spec-doc li {
    counter-increment: index;
    display: flex;
    align-items: center;
    padding: 12px 0;
    box-sizing: border-box;
}

    /* Element counter */
    .spec-doc li::before {
        content: counters(index, ".", decimal-leading-zero);
        font-size: 1.5rem;
        font-weight: bold;
        min-width: 50px;
        padding-right: 12px;
        font-variant-numeric: tabular-nums;
        align-self: flex-start;
        background-image: linear-gradient(to bottom, aquamarine, orangered);
        background-attachment: fixed;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.spec-doc li {
    border-top: 1px solid rgba(255,255,255,0.2);
    text-align: left;
}

.grecaptcha-badge {
    display: none;
}



/* ============================================================== 
     # "Our work" list styling
=================================================================== */



.tilesWrap {
    padding: 0;
    margin: 65px auto;
    list-style: none;
    text-align: center;
}

    .tilesWrap li {
        display: inline-block;
        width: 20%;
        min-width: 200px;
        max-width: 230px;
        padding: 80px 20px 40px;
        position: relative;
        vertical-align: top;
        margin: 10px;
        font-family: 'helvetica', san-serif;
        min-height: 44vh;
        background: #262a2b;
        border: 1px solid #252727;
        text-align: left;
    }

        .tilesWrap li h2 {
            font-size: 114px;
            margin: 0;
            position: absolute;
            opacity: 0.2;
            top: 50px;
            right: 10px;
            transition: all 0.3s ease-in-out;
        }

        .tilesWrap li h3 {
            font-size: 20px;
            /*color: #b7b7b7;*/
            color: white;
            margin-bottom: 10px;
        }

        .tilesWrap li p {
            font-size: 14px;
            line-height: 18px;
            color: #ffffff;
            margin-top: 5px;
        }

        .tilesWrap li button {
            background: transparent;
            border: 1px solid #b7b7b7;
            padding: 10px 20px;
            color: #b7b7b7;
            border-radius: 3px;
            position: relative;
            transition: all 0.3s ease-in-out;
            transform: translateY(-40px);
            opacity: 0;
            cursor: pointer;
            overflow: hidden;
        }

            .tilesWrap li button::before {
                content: '';
                position: absolute;
                height: 100%;
                width: 120%;
                background: #b7b7b7;
                top: 0;
                opacity: 0;
                left: -140px;
                border-radius: 0 20px 20px 0;
                z-index: -1;
                transition: all 0.3s ease-in-out;
            }

        .tilesWrap li:hover button {
            transform: translateY(5px);
            opacity: 1;
        }

        .tilesWrap li button:hover {
            color: #262a2b;
        }

            .tilesWrap li button:hover::before {
                left: 0;
                opacity: 1;
            }

        .tilesWrap li:hover h2 {
            top: 0px;
            opacity: 0.6;
        }

        .tilesWrap li::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            z-index: -1;
            background: #fff;
            transform: skew(2deg, 2deg);
        }

        .tilesWrap li::after {
            content: '';
            position: absolute;
            width: 40%;
            height: 100%;
            left: 0;
            top: 0;
            background: rgba(255, 255, 255, 0.02);
        }

        .tilesWrap li:nth-child(1)::before {
            background: #C9FFBF;
            background: -webkit-linear-gradient(to right, #FFAFBD, #C9FFBF);
            background: linear-gradient(to right, #FFAFBD, #C9FFBF);
        }

        .tilesWrap li:nth-child(2)::before {
            background: #f2709c;
            background: -webkit-linear-gradient(to right, #ff9472, #f2709c);
            background: linear-gradient(to right, #ff9472, #f2709c);
        }

        .tilesWrap li:nth-child(3)::before {
            background: #c21500;
            background: -webkit-linear-gradient(to right, #ffc500, #c21500);
            background: linear-gradient(to right, #ffc500, #c21500);
        }

        .tilesWrap li:nth-child(4)::before {
            background: #FC354C;
            background: -webkit-linear-gradient(to right, #0ABFBC, #FC354C);
            background: linear-gradient(to right, #0ABFBC, #FC354C);
        }

        .welcome-img {
            max-width: 120%;
        }

        .normal-text p {
            line-height: 1.2;
            font-size: 1.05rem;
        }



/* ============================================================== 
     # Features 
=================================================================== */

.features-area.bottom-small {
    padding-bottom: 65px;
}

.features-area.default-padding.bottom-none {
    padding-bottom: 30px;
}

.features-area .item .icon {
    display: table-cell;
    vertical-align: top;
}

.web-section .item {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.features-area .item .info {
    display: table-cell;
    padding-left: 25px;
    vertical-align: top;
}

.features-area .item .icon i {
    background: #ffffff70 none repeat scroll 0 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #4ecca3;
    display: inline-block;
    font-size: 50px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 100px;
}

    .features-area .item .icon i:before {
        line-height: inherit;
    }

.features-area .normal-text p {
    text-align: center;
}

.features-alt .item .icon i {
    background: #dbe1ee9c none repeat scroll 0 0;
}

.features-area .item .info h4 {
    font-weight: 500;
    text-transform: capitalize;
}

.features-area .item .info p {
    margin: 0;
}

.features-area .single-item {
    margin-bottom: 50px;
}

.features-area.cell-items .features-thumb,
.features-area.cell-items .features-items {
    display: table-cell;
    float: none;
    vertical-align: middle;
}

.features-area.cell-items .features-thumb {
    padding-right: 35px;
}

.features-area.cell-items .features-items .single-item {
    margin-bottom: 0;
    margin-top: 50px;
}

    .features-area.cell-items .features-items .single-item:first-child,
    .features-area.cell-items .features-items .single-item:nth-child(2) {
        margin-top: 0;
    }

.features-area.features-list .features-items h2 {
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 25px;
}

.features-area.features-list .features-items li {
    color: #666666;
    display: block;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 25px;
    text-transform: capitalize;
}

    .features-area.features-list .features-items li:last-child {
        margin: 0;
    }

    .features-area.features-list .features-items li i {
        background: #4ac4f3 none repeat scroll 0 0;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        color: #ffffff;
        float: left;
        font-size: 12px;
        height: 30px;
        line-height: 30px;
        margin-right: 15px;
        margin-top: 5px;
        position: relative;
        text-align: center;
        width: 30px;
        z-index: 1;
    }

        .features-area.features-list .features-items li i::after {
            background: #4ac4f3 none repeat scroll 0 0;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            content: "";
            height: 40px;
            left: 0;
            margin-left: -5px;
            margin-top: -5px;
            opacity: 0.5;
            position: absolute;
            top: 0;
            width: 40px;
            z-index: -1;
        }

.features-area.features-list .features-thumb {
    padding-right: 35px;
}

    .features-area.features-list .features-thumb.order-lg-last {
        padding-right: 15px;
        padding-left: 35px;
    }

.features-area.features-list .features-items li .icon {
    display: table-cell;
    vertical-align: top;
}

.features-area.features-list .features-items li .info {
    display: table-cell;
    padding-left: 5px;
    vertical-align: top;
}

    .features-area.features-list .features-items li .info h4 {
        margin-bottom: 10px;
    }

.features-area.features-list .features-items ul {
    margin-top: 30px;
    padding-right: 50px;
}

.features-area.features-list .features-items li .info p {
    color: #666666;
    margin: 0;
}

.features-area.features-list .features-item.reverse .features-thumb {
    float: right;
    padding-right: 15px;
}

.features-area.features-list .features-item.reverse .features-items {
    padding-left: 15px;
}

.features-area.features-list .features-item {
    margin-top: 80px;
}

    .features-area.features-list .features-item:first-child {
        margin: 0;
    }

.h-white h4 {
    color: white;
}

.h-white p {
    color: white;
}

.info p {
    font-size: 14px;
}

.tech-spec-header {
    font-family: "Lalezar", cursive;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.3rem;
    margin-bottom: 25px;
    margin-top: 20px;
    text-align: left;
}

.projects-text {
    /*font-family: "Lalezar", cursive;*/
    font-family: 'Comfortaa', cursive;
    /*font-size: 1.2rem;*/
    font-size: 1.0rem;
    line-height: 1.2;
    max-width: 400px;
}

/* ============================================================== 
     Font Awesome Animations
=================================================================== */

.fa-bounce-hover:hover {
    -webkit-animation: spin 2s infinite linear;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}


/* ============================================================== 
     # Owl carousel styling
=================================================================== */

.clients-section .row {
    align-items: center;
    align-self: center;
    display: flex;
    justify-content: center;
    vertical-align: middle;
}

.clients-section .clients-items img {
    width: auto;
    margin: auto;
    padding: 5px;
    max-width: 180px;
}

.clients-section .clients-items .owl-nav {
    margin: 0;
}

    .clients-section .clients-items .owl-nav .owl-prev,
    .clients-section .clients-items .owl-nav .owl-next {
        background: transparent none repeat scroll 0 0;
        color: #4ac4f3;
        font-size: 30px;
        height: 35px;
        left: 0;
        line-height: 35px;
        margin-top: -18px;
        padding: 0;
        position: absolute;
        text-align: center;
        top: 50%;
        width: 35px;
    }

    .clients-section .clients-items .owl-nav .owl-next {
        left: auto;
        right: 0;
    }

    .projects-header {
        padding-top: 230px;
    }


/* ===================================================================================================== 
    Tech list styling  
    =================================================================================================*/


.et_pb_counters, .et_pb_pricing, .et_pb_tabs_controls, .et_pb_widget_area ul {
    padding: 0 !important;
    list-style: none !important;
}

.w98 {
    width: 98%;
}


.et_pb_counter_container {
    display: block;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    color: #fff;
    background-color: #ddd;
}

.et_pb_counters span.et_pb_counter_amount_number {
    display: inline-block;
    padding: 0 10px;
}

.green {
    background-color: #93d732;
}

.gray {
    background-color: #4d6678;
}

.error-text {
    color: #e34040;
    padding-top: 15px;
}

.et_pb_counter_amount {
    display: block;
    float: left;
    overflow: hidden;
    z-index: 2;
    min-height: 6px;
    padding: 1px;
    opacity: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6em;
    text-align: right;
}

    .et_pb_counter_amount.overlay {
        overflow: visible;
        position: absolute !important;
        z-index: 1;
        top: 0;
        left: 0;
        color: #2ea3f2;
        background-color: transparent !important;
    }

.et_pb_counter_10 .et_pb_counter_amount.overlay {
    color: #93d732;
}

.et-animated li span .et_pb_counter_amount {
    position: relative;
    opacity: 1;
    -webkit-animation: slideWidth 1s 1 cubic-bezier(.77,0,.175,1);
    -moz-animation: slideWidth 1s 1 cubic-bezier(.77,0,.175,1);
    -o-animation: slideWidth 1s 1 cubic-bezier(.77,0,.175,1);
    animation: slideWidth 1s 1 cubic-bezier(.77,0,.175,1);
}

.et_pb_counter_title {
    display: block;
    font-size: 12px;
    line-height: 1.6em;
    text-align: left;
    color: white;
}

.et_pb_circle_counter .percent p, .et_pb_slide_content .et_pb_circle_counter .percent p:last-of-type {
    position: relative;
    padding: 49% 0;
    font-size: 40px;
    font-weight: 500;
    line-height: .1em;
}

.et_pb_circle_counter canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: auto !important;
}


/*================================================================================================================================
                                    Some good old media queries
    =============================================================================================================================*/

/* -------------Mobile screen sizes  -------------------*/

@media (max-width: 442px) {
    .welcome-img {
        max-width: 90%;
    }

    .main-menu .menu-links ul li a {
        font-size: 4.2rem;
        line-height: 2.8rem;
    }

    .features-area .item .info {
        display: inherit;
    }

        .features-area .item .icon,
        .features-area .item .info h4,
        .features-area .item .info p {
            display: inherit;
            text-align: center;
        }

    .header {
        padding: 17.5rem 0.2rem 10rem;
        height: 100vh;
    }

    .extra-lg-text {
        font-size: 41px;
        line-height: 1.9rem;
    }

    .lg-text {
        font-size: 2rem;
        line-height: 1.5rem;
    }

    .cnav .logo-holder img {
        width: 6rem;
    }

    .cr-btn {
        font-size: 20px;
        padding: 13px 20px 10px 20px;
    }

    .info p {
        font-size: 12px;
    }

    .features-area .item .icon {
        margin-bottom: 20px;
    }

    .features-area .item .info {
        padding-left: 0px
    }

    .spacer {
        height: 0px;
    }

    .web-section .normal-text p {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .normal-text p {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .clients-section .normal-text {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .pad-sides {
        padding: 0px 0px;
    }

    .spec-doc {
        padding-left: 15px;
        padding-right: 15px;
    }

    .spec-doc ol {
        padding-left: 0px;
        font-size: 12px;
    }

    .form-wrapper input {
        padding: 15px 20px;
        font-size: 11px;
        margin: 0 0 13px;
    }

    .show-lt422 {
        display: inherit;
    }

    .hide-lt-422 {
        display: none;
    }

    .tech-counter {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .welcome-img {
        max-width: 95%;
        margin-top: 15px;
    }

    .boxy.simple-data {
        padding: 7rem 2rem;
    }

    .default-content .btn-holder {
        margin-top: 35px;
    }

    default-content .normal-text {
        margin-bottom: 1rem;
    }

    .img-holder img {
        width: 39%;
    }

    .img-holder {
        padding: 0px;
        background-position: center right;
        text-align: right;
    }

    .quoting-text {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .quoting-info {
        margin-top: 115px;
    }

    .cust-btn {
        margin-left: auto;
        margin-right: auto;
    }

    .no-pad {
        
    }

    .clients-section .clients-logos .logo-holder img {
        max-height: 2.5rem;
    }

    .vodacom img {
        max-height: 65px;
    }

    .pure {
        max-width: 80px;
    }

    .fourth {
        padding-left: 178px;
    }

    .third {
        padding-left: 96px;
    }

    .projects-header {
        padding-top: 100px;
    }

    .projects-text {
        font-size: 13px;
    }

    .process .cust-btn {
        margin-top: 25px;
    }

    .process .btn-holder {
        margin-top: 15px;
    }

    .boxy.img-box:before {
        background: initial;
        background-repeat: repeat-x;
        background-image: -webkit-linear-gradient(0deg, rgba(35, 41, 49, 0.6), rgba(35, 41, 49, 0));
        background-image: -o-linear-gradient(0deg, rgba(35, 41, 49, 0.6), rgba(35, 41, 49, 0));
        background-image: linear-gradient(0deg, rgba(35, 41, 49, 0.6), rgba(35, 41, 49, 0));
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    .boxy h1.title {
        font-size: 2.5rem;
        line-height: 2.1rem;
        margin-bottom: 1.8rem;
    }

    .boxy h3.title {
        font-family: "Lalezar", cursive;
        font-size: 2.5rem !important;
        line-height: 2.3rem;
        margin: 0;
        margin-bottom: 1.5rem;
        font-weight: 600;
    }

    .boxy.c1-color h3.title {
        color: #fff;
    }

    .boxy.primary-color h3.title {
        color: #fff;
    }

    .boxy.default-color h3.title {
        color: #393e46;
    }

    .boxy.c2-color h3.title {
        color: #fff;
    }

}

@media (max-width: 768px) {
    .boxy h3.title {
        font-size: 2.2rem !important;
        line-height: 2.0rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .boxy h3.title {
        font-size: 1.8rem !important;
        line-height: 1.6rem;
        margin-bottom: 0.5rem;
    }
}

/* ------------- Tablet-ish screen sizes  -------------------*/

@media (min-width: 442px) and (max-width: 768px) {
    .welcome-img {
        max-width: 90%;
    }

    .show-lt-422 {
        display: none;
    }

    .pad-sides {
        padding: 0px 0px;
    }

    .img-holder {
        margin-top: 58px;
    }

    .tech-counter {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .boxy.simple-data {
        padding: 7rem 2rem;
    }

    .cnav .logo-holder img {
        width: 7.4rem;
    }

    .spacer {
        height: 150px;
    }

    .fourth {
        padding-left: 178px;
    }

}

/* -------------- Medium sized screens -----------------*/

@media (min-width: 769px) and (max-width: 992px) {
    .welcome-img {
        max-width: 100%;
    }

    .show-lt-422 {
        display: none;
    }

    .features-area .item .info {
        display: inherit;
    }

    .features-area .item .icon {
        display: inherit;
        text-align: center;
    }

    .features-area .item .info h4 {
        text-align: center;
    }

    .features-area .item .info p {
        text-align: center;
    }

    .pad-sides {
        padding: 0px 0px;
    }

    .fourth {
        padding-left: 168px;
    }

    .img-holder {
        margin-top: 58px;
    }

    .spacer {
        height: 150px;
    }
}

/* -------------- Larger sized screens -----------------*/

@media (min-width: 993px) and (max-width: 1200px) {
    

    .pad-sides {
        padding: 0px 0px;
    }

    .fourth {
        padding-left: 290px;
    }

    .show-lt-422 {
        display: none;
    }
}

/* ------------ universally applicable queries --------------------- */

@media (min-width: 1200px) {


    .pad-sides {
        padding: 0px 0px;
    }

    .show-lt-422 {
        display: none;
    }
}

@media (min-width: 0px) and (max-width: 1199px) {
    .quoting-title {
        font-family: "Lalezar", cursive;
        font-size: 2.0rem;
        line-height: 0.5rem;
        font-weight: 400;
    }
}

@media (min-width: 0px) and (max-width: 1007px) {
    .show-lt-1000 {
        display: inherit;
    }

    .hide-lt-1000 {
        display: none;
    }

    .third {
        padding-left: 96px;
    }

}

@media (min-width: 1008px) {
    .show-lt-1000 {
        display: none;
    }

    .hide-lt-1000 {
        display: inherit;
    }
}

@media (min-width: 0px) and (max-width: 768px) {
    .hide-lt-768 {
        display: none;
    }
}

@media (min-width: 769px) {
    .show-lt-768 {
        display: none;
    }

    .img-holder {
        margin-top: 45px;
        max-width: 290px
    }
}


/*================================================================================================================================
                  MHS Original green theming. Comment out to fall back to template green
    =============================================================================================================================*/
.cr-btn.primary {
    color: rgb(168, 207, 69) !important;
    background-color: transparent !important;
    border: 4px solid rgb(168, 207, 69) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

    .cr-btn.primary:hover, .cr-btn.primary:focus {
        color: #fff !important;
        background-color: rgb(168, 207, 69) !important;
        border: 4px solid rgb(168, 207, 69) !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

.menu-toggle .icon {
    background-color: #a8cf45;
}

    .menu-toggle .icon:before, .menu-toggle .icon:after {
        background-color: #a8cf45;
    }

.main-menu .contant-info div a:hover, .main-menu .contant-info div a:focus {
    color: #a8cf45;
}

.extra-lg-text .other-color {
    color: rgb(168, 207, 69) !important;
}

.boxy.primary-color {
    background-color: #a8cf45;
}

.lg-text .other-color {
    color: #a8cf45;
}

.slg-text .other-color {
    color: #a8cf45;
}

.few-contact .contact-info-holder .contact-info a {
    color: #a8cf45;
}

.social-row .social-media .social-link-holder a:hover, .social-row .social-media .social-link-holder a:focus {
    color: #a8cf45;
}

.footer .lg-text {
    color: #a8cf45;
}

.footer .contact-info-holder .contact-info a:hover, .footer .contact-info-holder .contact-info a:focus {
    color: #a8cf45;
}

.quote-num {
    border: 4px solid #a8cf45;
}

.quote-num-1 {
    border: 4px solid #a8cf45;
}

.checkb-cont a {
    color: #a8cf45;
}

.cust-btn.primary {
    -webkit-box-shadow: inset 0 0 0 0.15rem #a8cf45;
    box-shadow: inset 0 0 0 0.15rem #a8cf45;
}

    .cust-btn.primary:hover, .cust-btn.primary:focus {
        -webkit-box-shadow: inset 0 0 0 3.25rem #a8cf45;
        box-shadow: inset 0 0 0 3.25rem #a8cf45;
    }

.features-area .item .icon i {
    color: #a8cf45;
}

.cust-btn.primary {
    -webkit-box-shadow: inset 0 0 0 0.15rem #bdbdbd;
}

.features-items .single-item {
    display: flex;
    justify-content: center;
    align-items: stretch; 
}

    .features-items .single-item .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: 100%;
        padding: 1rem 0;
    }

        .features-items .single-item .item .icon {
            width: 96px;
            height: 96px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
        }

        .features-items .single-item .item .info {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            min-height: 220px; /* Adjust this value to match your tallest content */
            padding: 0 1rem;
        }

        .features-items .single-item .item .info h4 {
            color: white;
        }

        .features-items .single-item .item .info p {
            color: white;
        }

            .features-items .single-item .item .info p {
                flex-grow: 1;
                margin: 0; /* Ensure uni*

                    a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
            }

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}