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

Name:style.css
Version:1.5

----------------------------------

Table of Contents

1.  Reset
2.  Typography
3.  Background Color
4.  Custom Button
5.  Floats, Display and Margins
6.  Divider and width
7.  Loader
8.  Sections
9.  Header
10. Work
11. Work Popup
12. Blog
13. Blog Listing
14. Blog Details
15. Counter
16. Scroll To Top
17. Filter Tab
18. Team
19. Client Logos
20. Contact
21. Footer
22. Design Elements
23. Homepage Slider
24. Homepage Video
25. Coming Soon

*/
/* ==========================================================================
 Custom
========================================================================== */
/* Scoped to the 'about-services' section only */
/* Scoped to 'about-services' to prevent conflicts */


.carousel-logo {
    position: absolute;
    top: 45px; /* Adjust vertical positioning  45 */
    right: 70px; /* Adjust horizontal positioning 70 */
    z-index: 10; /* Ensure it stays above the carousel images */
}

.carousel-logo img {
    width: 150px; /* Adjust size as needed 150*/
    height: auto;
}
@media screen and (max-width: 768px) {
    .carousel-logo {
        display: none;
    }
}

.icon-logo {
    width: 130px; /* Adjust the size to match icons */
    padding-bottom: 5px;
    height: auto;
    vertical-align: middle;
    margin-right: 0px; /* Space between logo and text */
}


.about-services .about-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    text-align: left;
    transition: 0.3s;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0;
}

/* Ensure all items in the row have the same height */
.about-services .row.gy-4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Spacing between boxes */
.about-services .col-lg-4,
.about-services .col-md-6 {
    display: flex;
    padding: 10px;
}

/* Title style */
.about-services .about-item h3 {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #fff;
}

/* List inside boxes */
.about-services .about-list {
    list-style-type: disc; /* Normal bullet points */
    padding-left: 20px;
    text-align: left; /* Align text left for better readability */
    margin: auto;
    max-width: 90%;
}

/* List items */
.about-services .about-list li {
    font-size: 0.9rem;
    color: #ddd;
    line-height: 1.4;
    margin-bottom: 5px;
}
.about-services .about-list li::before {
    content: "●"; /* Unicode for bullet point */
    color: #fff; /* White bullet */
    font-size: 1rem;
    font-weight: bold;
    margin-right: 8px;
}
/* Icon Alignment */
.about-services .about-icon {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

/* Make sure the icon is aligned left */
.about-services .about-icon i {
    margin-right: 10px; /* Adds spacing between icon and text */
}

/* Ensure the title is properly aligned */
.about-services h3 {
    display: flex;
    align-items: center;
    gap: 10px; /* Spacing between icon and title */
}

@media (max-width: 768px) {
    .about-services .row.gy-4 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .about-services .about-item {
        min-height: 350px; /* Set a fixed height for uniformity */
        width: 100%; /* Ensure all boxes are the same width */
    }

    .about-services .col-md-6 {
        width: 100%; /* Make sure each box takes the full width */
        display: flex;
        justify-content: center;
    }
}


/* Success Message - Now matches the dark theme */
/* Success Message - Hidden by Default */
#success {
    display: none; /* Ensure it's hidden initially */
    color: #600b0c; /* Red text */
    font-weight: bold;
    padding: 10px 15px;
    border: 2px solid #600b0c; /* Red border */
    text-align: center;
    max-width: 400px;
    margin: 20px auto 0; /* Center it */
    display: none; /* Hide it properly */
    align-items: center;
    justify-content: center;
    border-radius: 0; /* Sharp corners */
    background: none; /* Transparent background */
}

/* About Section - Two Columns Layout */
.about-box {
    display: flex;
    justify-content: center;
    margin-bottom: 30px; /* Space between rows */
}

.about-content {
    display: flex;
    align-items: center;
    gap: 20px; /* Space between image and text */
    background-color: rgba(255, 255, 255, 0.1); /* Light background */
    padding: 20px;
    border-radius: 0px; /* Optional: Rounded corners */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); /* Soft shadow */
}

/* Make sure images are aligned properly */
.about-image img {
    width: 150px;
    height: auto;
    border-radius: 8px; /* Optional: Rounded corners for images */
}

/* Styling for the text */
.about-text {
    text-align: left;
    max-width: 400px; /* Prevents text from being too wide */
    color: white;
}

/* Make h4 stand out */
.about-text h4 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #ff4747; /* Example red color, change if needed */
}

/* Responsive: Stack on small screens */
@media screen and (max-width: 768px) {
    .about-content {
        flex-direction: column;
        text-align: center;
    }
    .about-text {
        max-width: 100%;
    }
}



/* ==========================================================================
1. Reset
========================================================================== */

html { font-size: 100%; height: 100%; width: 100%; outline: none; }
body { background: #FFF; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 400; color: #373737; line-height: 26px; text-align: left; overflow-x: hidden; margin: auto; width: 100%; height: 100%; outline: none; }
/* Internet Explorer 10 in Windows 8 and Windows Phone 8 Bug fix */
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
a, 
button { -webkit-transition: all 400ms ease-in-out 0s; transition: all 400ms ease-in-out 0s; }
a:hover { text-decoration: none; color: #F96015; }
ul, 
ol { padding-left: 0; margin: 0 }
li { list-style: none; }
input[type="text"], 
input[type="email"], 
input[type="search"], 
input[type="password"] { box-shadow: none; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; }
.btn:focus, 
.btn:active { outline: inherit; }
textarea:focus, 
input:focus { color: #ffffff; }
iframe, 
embed, 
object { max-width: 100%; width: 100%; height: 100%; }
/* Other Fixes */
*, 
*:before, 
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
* { margin: 0; padding: 0; border: 0; border-radius: 0; -webkit-border-radius: 0; border-spacing: 0; -webkit-appearance: none; -moz-appearance: none; appearance: normal; -webkit-tap-highlight-color: transparent; outline: 0 !important; -webkit-touch-callout: none; transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; }
::selection { color: #fff; background: #a3a3a3; }
::-moz-selection { color: #fff; background: #a3a3a3; }
::-webkit-input-placeholder { color: #838383; text-overflow: ellipsis; }
:-moz-placeholder { color: #838383 !important; text-overflow: ellipsis; opacity: 1; }
::-moz-placeholder { color: #838383 !important; text-overflow: ellipsis; opacity: 1; }
:-ms-input-placeholder { color: #838383 !important; text-overflow: ellipsis; opacity: 1; }

/* ==========================================================================
2. Typography
========================================================================== */

h1, 
h2 { font-weight: normal; }
h1 { font-size: 45px; line-height: 60px; font-weight: 300; font-family: 'Oswald', sans-serif; text-transform: uppercase; }
h2 { font-size: 95px; line-height: 96px; font-weight: 300; font-family: 'Oswald', sans-serif; text-transform: uppercase; }
h3 { font-size: 30px; line-height: 38px; font-weight: 100; font-family: 'Oswald', sans-serif; text-transform: uppercase; }
h4 { font-size: 25px; line-height: 46px; font-weight: 400; font-family: 'Oswald', sans-serif; text-transform: uppercase; }
h5 { font-size: 22px; line-height: 30px; font-weight: 400; font-family: 'Oswald', sans-serif; text-transform: uppercase; }
h6 { font-size: 20px; line-height: 30px; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; }

/* Custom Typography */
h1.title { font-size: 65px; color: #FFF; margin-bottom: 50px; }
h2.title { vertical-align: middle; display: table-cell; letter-spacing: -2px; }
span.title { font-family: 'Oswald', sans-serif; font-size: 35px; font-weight: 300; color: #FFF; display: table; text-transform: uppercase; line-height: 23px; margin: 15px 0 0 0; }
.fetaure-details span { font-weight: 300; }
.count-box p { color: #fff; font-size: 16px; font-weight: 400; }
.description { font-size: 18px; vertical-align: middle; display: table-cell; font-weight: 300 }
.big { font-size: 45px; margin-bottom: 43px; line-height: 45px; }
.light { font-size: 20px; color: #5e5e5e; margin: 83px 0 0; }
.light-gray { color: #909090 }
.contact-title { font-size: 18px; font-weight: bold; display: table; margin-bottom: 6px; text-transform: uppercase; }
.title-text { height: 255px; display: inline-table; }
#testimonial .title { letter-spacing:-2px; margin-bottom: 53px; color: #FFF; font-size: 65px; font-weight:300; line-height: 60px; text-transform: uppercase; display: inline-block; margin-top:0 }
.contentarea { margin: 0 auto 20px; padding: 0; }
.medium { font-size: 18px; margin: 6px 0; display: inline-block; }
.white-text { color: #ffffff !important; }
.black-text { color: #000 !important; }
.light-gray-text { color: #9a9a9a !important; }
.cinza-text { color: #b6b6b6 !important; }
.gray-text { color: #757575 !important; }
.dark-gray-text { color: #555555 !important; }
.orange-text { color: #f96015; }
.dark-text { color: #e5e5e5; }
.content { font-size: 16px; color: #5e5e5e; line-height: 20px; width: 83%; margin: 0 auto; }
.content-white { font-size: 13px; color: #FFF; line-height: 18px; width: 80%; }
.simple-text { display: inline-table; float: none; height: 255px; letter-spacing: 0; margin: 0 auto; padding-left: 55px; width: 46%; }
.coming-soon h1 { background-color: #f96015; color: #fff; float: none !important; font-size: 45px; margin: 0 auto 5%; padding: 20px 0 22px 0; }

/* ==========================================================================
3. Background Color
========================================================================== */

.deep-dark-bg { background-color: #161616; }
.gray-bg { background-color: #f6f6f6; }
.mid-gray-bg { background-color: #3b3b3b; }
.dark-gray-bg { background-color: #1d1d1d; }
.orange-bg { background-color: #f96015; }
.black-bg { background-color: #000000; }
.white-bg { background-color: #ffffff; }
.red-bg { background-color: #600b0c; } /*#d52124 original #801719*/
.dark-blue-bg { background-color: rgb(5, 25, 53); }
.green-bg { background-color: #5b7a0b; }
.mid-green-bg { background-color: #364906; }
.dark-green-bg { background-color: #243104; }

.tw-bg { background-color: #1c1b17; }
.black-transparent-bg { background-color: rgba(0, 0, 0, 0.8) }
.color-overlay { background-color: rgba(0, 0, 0, 0.70); position: relative; height: 100%; width: 100% }
.black-overlay { background-color: rgba(0, 0, 0, 0.55); position: absolute; height: 100%; width: 100%; top: 0; left: 0 }
.black-overlay-dark { background-color: rgba(0, 0, 0, 0.70); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 1; }
.gradient-overlay { background: rgba(249, 96, 21, 0.95); background: -moz-linear-gradient(left, rgba(249, 96, 21, 0.95) 0%, rgba(225, 40, 15, 0.80) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(249, 96, 21, 0.95)), color-stop(100%, rgba(225, 40, 15, 0.80))); background: -webkit-linear-gradient(left, rgba(249, 96, 21, 0.95) 0%, rgba(225, 40, 15, 0.80) 100%); background: -o-linear-gradient(left, rgba(249, 96, 21, 0.95) 0%, rgba(225, 40, 15, 0.80) 100%); background: -ms-linear-gradient(left, rgba(249, 96, 21, 0.95) 0%, rgba(225, 40, 15, 0.80) 100%); background: linear-gradient(to right, rgba(249, 96, 21, 0.95) 0%, rgba(225, 40, 15, 0.80) 100%); }
.gradient-overlay-blue { background: rgba(0, 0, 60, 0.95); background: -moz-linear-gradient(left, rgba(0, 0, 60, 0.95) 0%, rgba(7, 104, 121, 0.80) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0, 0, 60, 0.95)), color-stop(100%, rgba(7, 104, 121, 0.80))); background: -webkit-linear-gradient(left, rgba(0, 0, 60, 0.95) 0%, rgba(7, 104, 121, 0.80) 100%); background: -o-linear-gradient(left, rgba(0, 0, 60, 0.95) 0%, rgba(7, 104, 121, 0.80) 100%); background: -ms-linear-gradient(left, rgba(0, 0, 60, 0.95) 0%, rgba(7, 104, 121, 0.80) 100%); background: linear-gradient(to right, rgba(0, 0, 60, 0.95) 0%, rgba(7, 104, 121, 0.80) 100%); }
.slider-overlay { height: 100%; position: absolute; top: 0; width: 100%; z-index: 1; background-color: rgba(0, 0, 0, 0.5); }
.slider-gradient-overlay { background: rgba(2, 18, 78, 0.7); background: -moz-linear-gradient(left, rgba(2, 18, 78, 0.7) 0%, rgba(222, 49, 12, 0.6) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(2, 18, 78, 0.7)), color-stop(100%, rgba(222, 49, 12, 0.6))); background: -webkit-linear-gradient(left, rgba(2, 18, 78, 0.7) 0%, rgba(222, 49, 12, 0.6) 100%); background: -o-linear-gradient(left, rgba(2, 18, 78, 0.7) 0%, rgba(222, 49, 12, 0.6) 100%); background: -ms-linear-gradient(left, rgba(2, 18, 78, 0.7) 0%, rgba(222, 49, 12, 0.6) 100%); background: linear-gradient(to right, rgba(2, 18, 78, 0.7) 0%, rgba(222, 49, 12, 0.6) 100%); height: 100%; position: absolute; top: 0; width: 100%; z-index: 1; }

/* ==========================================================================
4. Custom Button
========================================================================== */

/* Standard Button */
.standard-button, 
.standard-button2 { font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 300; border-radius: 2px; text-shadow: 0; color: #ffffff; min-width: 118px; border: 1px solid #FFF; padding: 10px 13px 9px; margin: 0 11px 0; text-transform: uppercase; display: block; }
.standard-button:hover, 
.standard-button2:hover { border-color: #f96015; }
.standard-button i, 
.standard-button2 i { vertical-align: inherit; margin-right: 8px; font-size: 20px; }

/* Small Button */
.small-button { display: inline-block; font-size: 11px; padding: 1px 13px; text-transform: uppercase; border: 2px solid #000; letter-spacing: 1px; text-decoration: none; color: #000; font-family: 'Oswald', sans-serif; font-weight: 400; margin: 20px 0; cursor: pointer; background-color: transparent; }
.small-button:hover { color: #FFF; background-color: #000; border-color: #000; text-decoration: none; }
.small-button-red { display: inline-block; font-size: 11px; padding: 1px 13px; text-transform: uppercase; border: 2px solid #bf1919; letter-spacing: 1px; text-decoration: none; color: #fff; font-family: 'Oswald', sans-serif; font-weight: 400; margin: 10px 10px 0 0; cursor: pointer; background-color: #bf1919; }
.small-button-red:hover { background-color: #000; border: 2px solid #000; color: #FFF; }
.small-button:focus { text-decoration: none; }
.small-button-white { border: 2px solid #ffffff !important; color: #ffffff; }
.small-button-dark-gray { border: 1px solid #505050 !important; color: #505050; font-family: 'Open Sans', sans-serif; }
.small-button-gray { display: inline-block; font-size: 11px; padding: 1px 13px; text-transform: uppercase; border: 2px solid #595959; letter-spacing: 1px; text-decoration: none; color: #fff; font-weight: 400; margin: 10px 10px 0 0; cursor: pointer; background-color: #595959; }
.small-button-gray:hover { background-color: #383838; border: 2px solid #383838; color: #FFF; }

/* Highlight Button */
.highlight-button, 
.highlight-button:focus { border: 2px solid #fff; color: #fff; font-family: "Oswald", sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 2px; padding: 8px 18px; text-decoration: none; text-transform: uppercase; }
.highlight-button:hover { background-color: #FFF; color: #000; border-color: #fff; }
.highlight-button-black { border: 2px solid #000; color: #000; display: inline-block; font-family: "Oswald", sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 2px; margin: 10px 0 0; padding: 6px 16px; text-decoration: none; text-transform: uppercase; }
.highlight-button-black:hover { background-color: #000; border-color: #000; color: #FFF; }

/* Primary Buttons */
i { color: #f96015; }
.standard-button { background: none; }
.standard-button2 { background: none; }
.standard-button2:hover { background: #f96015; }
.header-buttons { float: left; }
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active { background: #e04e06; border-color: #ce4401; outline: none; }
.colored-line, 
.colored-line-left { background: #008ed6; }
.main-color { color: #008ed6; }
.form-group button { margin-top: 0; }

/* ==========================================================================
5. Floats and Margins
========================================================================== */

/* Float */
.float-left { float: left !important; }
.float-right { float: right !important; }
.clear-both { clear: both !important; }

/* Margin */
.margin-top { margin-top: 30px !important; }
.margin-top-med { margin-top: 15px !important; }
.margin-top-100 { margin-top: 100px !important; }
.margin-bottom-100 { margin-bottom: 100px; }
.margin-top-50 { margin-top: 50px !important; }
.margin-bottom-50 { margin-bottom: 50px !important; }
.margin-top-70 { margin-top: 70px !important; }
.margin-bottom-70 { margin-bottom: 70px !important; }
.margin-left { margin-left: 30px !important; }
.margin-bottom { margin-bottom: 30px !important; }
.margin-bottom-med { margin-bottom: 15px !important; }
.margin-right { margin-right: 30px !important; }
.no-margin { margin: 0 !important; }
.no-margin-top { margin-top: 0 !important; }
.no-margin-bottom { margin-bottom: 0 !important; }
.margin-auto-center { margin-left: auto; margin-right: auto; display: block; float: none; }

/* Padding */
.no-padding { padding: 0; }
.no-padding-top { padding-top: 0 !important; }
.no-padding-bottom { padding-bottom: 0 !important; }
.no-padding-left { padding-left: 0; }
.no-padding-right { padding-right: 0; }
.padding-bottom-30 { padding-bottom: 30px; }
.padding-top-90 { padding-top: 90px; }
.padding-bottom-90 { padding-bottom: 90px; }
.padding-right { padding-right: 30px; }
.padding-left { padding-left: 30px; }
.padding-30 { padding: 30px; }
.padding-100 { padding: 100px; }
.padding-70 { padding: 70px; }
.display-inline-block { display: inline-block; }
.display-block { display: block; }
.display-inline { display: inline; }
.display-inline-table { display: inline-table; }

/* ==========================================================================
6. Divider and width
========================================================================== */

.divider { background-color: #dfdfdf; height: 1px; width: 85%; margin: 12px 0 12px; }
.divider-transparent { background-color: rgba(235, 235, 235, 0.3); height: 1px; width: 85%; margin: 12px 0 12px; }
.divider-dark { background-color: #dedede; height: 1px; width: 100%; margin: 65px 0; display: inline-block; }

/* Separator */
.black-line { background: #000; margin: 29px 0; width: 52px; height: 1px; }
.black-line-top { margin-top: 28px; margin-bottom: 2px; background: #000; width: 52px; height: 1px; }
.black-line-bottom { margin-bottom: 20px; margin-top: 2px; background: #000; width: 52px; height: 1px; }
.white-line-top { margin-top: 28px; margin-bottom: 2px; background: #fff; width: 52px; height: 1px; margin-left: auto; margin-right: auto; }
.white-line-bottom { margin-bottom: 20px; margin-top: 2px; background: #fff; width: 52px; height: 1px; margin-left: auto; margin-right: auto; }
.white-line { margin: 25px auto 23px; z-index: 1; width: 52px; height: 1px; background: #ffffff; }
.dark-gray-line { margin: 25px auto 23px; z-index: 1; width: 52px; height: 1px; background: #7c7c7c; }
.gray-line { margin: 8px auto 11px; z-index: 1; width: 32px; height: 1px; background: #ababab; }
.orange-line { background: #f96015; margin: 20px auto; width: 52px; height: 1px; }
.white-line-small { background: #fff; margin: 20px auto; width: 52px; height: 1px; }
.transparent-line { background-color: #FFF; height: 1px; width: 100%; opacity: 0.2; margin: 20px 0; }
.popup-line { width: 100%; background: #e5e5e5; height: 1px; margin: 20px 0; }

/* Border */
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.border-top { border-top: 1px solid #e5e5e5; }
.border-left { border-left: 1px solid #e5e5e5; }
.border-right { border-right: 1px solid #e5e5e5; }
.border-gray { border: 1px solid #373737 !important; }

/* Width and Height */
.width-100 { width: 100% !important; }
.height-auto { height: auto !important; }

/* ==========================================================================
7. Loader
========================================================================== */

.loader-running .main { opacity: 0; }
.loader-running .coming-soon { opacity: 0; }
.loader { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
/*.loader-done .loader { display: none; }*/
.loader-inactive { display: none; }

.loader .loader-progress { background-color: #f96015; position: fixed; z-index: 2000; top: 50%; left: 0; height: 6px; overflow: hidden; -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s; }
.loader .loader-progress-inner { position: absolute; top: 0; left: 0; right: -32px; bottom: 0; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -webkit-background-size: 32px 32px; -moz-background-size: 32px 32px; -o-background-size: 32px 32px; background-size: 32px 32px; -webkit-animation: pace-stripe-animation 500ms linear infinite; -moz-animation: pace-stripe-animation 500ms linear infinite; -ms-animation: pace-stripe-animation 500ms linear infinite; -o-animation: pace-stripe-animation 500ms linear infinite; animation: pace-stripe-animation 500ms linear infinite; }

/* ==========================================================================
8. Sections
========================================================================== */

section { overflow: hidden; padding-top: 90px; padding-bottom: 90px; }
#about { padding-top: 0; }
#work { padding: 0; }
#blog { padding: 0 0 60px; }
#testimonial { padding: 0 0; }
#expertise { padding: 0 0 0; }
#team { padding: 0 0 90px; }
#conter-box { padding: 0; }
.contact { padding: 0 0 65px; }
#conter-box .color-overlay { padding-top: 90px; padding-bottom: 90px; }
#testimonial .color-overlay { padding-top: 129px; padding-bottom: 120px; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.85) }
#blog-list { padding-top: 110px; }
#blog-details { padding-top: 110px; }
.map { padding:0 !important ; position: relative; }

/* ==========================================================================
9. Header
========================================================================== */

/* Header */



header { background: url(http://placehold.it/1920x1280) no-repeat center top; -webkit-background-size: cover; background-size: cover; height: 100%; -webkit-transition: ease-in-out; -moz-transition: ease-in-out; -o-transition: ease-in-out; transition: ease-in-out; overflow: hidden; }
.no-background { background: none }
header .full-screen { width: 100%; height: 100%; min-height: 1000px; }
.navbar-nav > li.blog:hover .dropdown-menu { display: block !important; }
.nav > li > a { margin: 10px 23px 10px; font-size: 18px; }
.nav > li.last > a { margin: 10px 0 10px 23px; }
.main-navigation .col-md-3 { padding-left: 0; }
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 285px; }


/* Sticky Navigation */
nav { width: 100%; top: 0px; z-index: 99; padding-top: 25px; padding-bottom: 10px; transition: all 400ms ease-in-out 0s; -webkit-transition: all 400ms ease-in-out 0s; -moz-transition: all 400ms ease-in-out 0s; }
.shrink-nav { min-height: 80px; padding-top: 14px; border-bottom: 1px solid #e5e5e5; }
.nav-transparent .logo-dark { display: none; }
.shrink-nav.nav-dark, 
.shrink-nav.nav-transparent { background: rgba(255, 255, 255, 1); }
.sticky-nav { position: fixed; top: 0px; background: rgba(255, 255, 255, 0); min-height: 80px; }
.sticky-navigation .main-navigation li a { line-height: 30px; font-weight: 400; font-size: 13px; text-transform: lowercase; max-height: 34px; letter-spacing: 0.5px; }

/* Main Navigation */
.logo-light { display: inline-block; float: none }
.navbar-fixed-top .nav > li > a:hover { color: #FFF; }
.shrink-nav .logo-light { display: none; }
.shrink-nav .logo-dark { display: inline-block; }
.logo-dark { width: 135px; }
.logo-white { width: 156px; }
.shrink-nav .navbar-nav > li > a { color: #000; margin-top: 13px; }
.shrink-nav .nav > li > a:hover { color: #000; }

/* Dropdown Menu */
.dropdown:hover .dropdown-menu { display:inline-table; }
.dropdown .dropdown-menu .sub-menu { float:left; display:none; right:auto; left:233px; top:0; }

/* Intro */
header .intro-section { margin: auto; padding-top: 50%; }
header .intro-section .intro { color: #ffffff; margin-bottom: 36px; letter-spacing: 1px; line-height: 90px }
header .intro-section .buttons { margin: 17px auto; float: none; display: inline-block; }
.highlight { font-size: 65px; font-weight: 400; background-color: #f96015; color: #fff; padding: 12px 34px }
.no-transition { -webkit-transition: height 0.01s; -moz-transition: height 0.01s; -ms-transition: height 0.01s; -o-transition: height 0.01s; transition: height 0.01s;}

/* ==========================================================================
10. Work
========================================================================== */

/* Isotop */
.isotope-filters { padding: 50px 0; }
.isotope-filters li { display: inline-block; padding: 0 1.3%; }
.isotope-filters li a { text-transform: uppercase; font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 400; color: #b6b6b6; cursor: pointer; }
.isotope-filters li a:hover, 
.isotope-filters li a:focus, 
.isotope-filters li a:active, 
.isotope-filters li a.active { text-decoration: none; color: #000; border-color: #000; }

/* Portfolio Figcaption */
.slideshow * { transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; -o-transition-duration: 0s; }
.portfolio-item { overflow: hidden; }
.grid { max-width: 100%; margin: 0 auto; list-style: none; text-align: left; }
.portfolio-figure figcaption { position: absolute; top: 0; left: 0; padding: 18px 25px; background: #FFF; color: #f96015; box-shadow: 0 -5px 0 0 rgba(0, 0, 0, 0.3); }
.portfolio-figure .title { color: #f96015; line-height: 37px; margin: 0 0 8px; padding: 0; }
.portfolio-figure figcaption span { font-size: 18px; color: #000; text-transform: uppercase; font-family: 'Oswald', sans-serif; font-weight: 400; }
.portfolio-figure figcaption a { display: inline-block; transition: all 400ms ease-in-out 0s; position: absolute; bottom: 20px; right: 20px; }
.portfolio-figure figcaption a:hover { color: #f96015; }
.portfolio-figure figcaption i { color: #b6b6b6; font-size: 60px; position: relative; top: -6px }
.portfolio-figure { overflow: hidden; background-color: #000; }
.portfolio-figure img { -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; max-width: 100%; }
.no-touch .portfolio-figure:hover img, 
.portfolio-figure.cs-hover img { -webkit-transform: translateY(-60px); -moz-transform: translateY(-60px); -ms-transform: translateY(-60px); transform: translateY(-60px); opacity: 0.4; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }
.portfolio-figure figcaption { height: 110px; width: 100%; top: auto; bottom: 0; opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s; }
.no-touch .portfolio-figure:hover figcaption, 
.portfolio-figure.cs-hover figcaption { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s; }
.portfolio { width: 100%; display: table; }
.portfolio-item { float: left; padding: 0 0; width: 24.96%; max-width: 25%; }

/* ==========================================================================
11. Work Popup
========================================================================== */

.grid-gallery { width: 100%; }

/* General Style */
.popup-slide { list-style: none; margin: 0; padding: 0; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 150px); transform: translate3d(0, 0, 150px); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; }
.popup-slide figure { margin: 0; }
.popup-slide figure img { display: block; float: left; }
.popup-slide .title { color: #f96015; display: inline-block; font-size: 50px; font-weight: 400; letter-spacing: 1px; margin: 0; padding: 0 0 20px; width: 100%; line-height: 60px; }

/* Grid Style */
.grid { margin: 0 auto; }
.grid li { float: left; cursor: pointer; }
.grid figure { -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }

/* Slideshow Style */
.slideshow { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; opacity: 0; visibility: hidden; overflow: hidden; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; padding: 0; background-color: #FFF; }
.slideshow-open .slideshow { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; }
.popup-slide.animatable li { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; }
.slideshow-open .popup-slide { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/* Popup Slide */
.popup-slide .popup-slideshow { right: 0; margin: 0; position: absolute; top: 0; visibility: hidden; width: 100%; height: 100%; display: none; }
.popup-slide .popup-slideshow.show { visibility: visible; }
.popup-slide .popup-slideshow.current:after { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s, visibility 0s 0.3s; transition: opacity 0.3s, visibility 0s 0.3s; }
.popup-slide figure { width: 100%; height: 100%; background: #fff; overflow: hidden; }
.popup-slide span { display: table; font-size: 14px; font-weight: 300; line-height: 20px; }
.popup-slide .category { display: inline-block; font-family: "Oswald", sans-serif; font-size: 30px; font-weight: 100; padding: 0 0 5px; text-transform: uppercase; width: 100%; color: #939393; line-height: 30px; }
.popup-slide .work-details { display: inline-block; font-size: 14px; font-weight: 400; padding: 0 0 5px; text-transform: uppercase; width: 100%; }
.popup-slide .client-speak { margin: 10px 0 0; }
.popup-slide .client-speak span { display: block; font-size: 11px; font-weight: 600; margin: 10px 0 0; text-transform: uppercase; }

/* Navigation */
.popup-navigation { width: 100%; position: fixed; border: 0 }
.popup-navigation span { position: fixed; z-index: 1000; color: #FFF; text-align: center; cursor: pointer; font-size: 30px; transition: all 400ms ease-in-out 0s; }
.popup-navigation span:hover { color: #f96015; }
.popup-navigation span.nav-prev { right: 48%; top: 50%; background-color: #000; font-size: 35px; padding: 4px 15px 5px 12px; transform: translateY(-50%); }
.popup-navigation span.nav-next { left: 51.9%; top: 50%; background-color: #000; font-size: 35px; padding: 4px 12px 5px 15px; transform: translateY(-50%); }
.popup-navigation span.nav-close { padding: 8px 12px; right: 5px; top: 2px; transition: all 400ms ease-in-out 0s; }
.icon:before, 
.icon:after { font-family: 'fontawesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
span.nav-prev:before { content: "\f104"; }
span.nav-next:before { content: "\f105"; }
span.nav-close:before { content: "X"; font-family: 'Open Sans', sans-serif; transform: scale(1.3, 1); -webkit-transform: scale(1.3, 1); display: inline-block; font-weight: 100; color: rgba(0, 0, 0, 0.4); }
.popup-slide .right-part { float: right; width: 48%; padding: 8%; }
.popup-slider { float: left; width: 52%; overflow: hidden; height: 100%; position: absolute; }

/* ==========================================================================
12. Blog
========================================================================== */

/* Blog Header */
.blog-header .intro-section { margin: auto; padding: 30% 0 25%; }
.blog-details-header .intro-section { padding: 20% 0 15%; }
.blog-header { background: url("http://placehold.it/1920x800") no-repeat center top fixed; -webkit-background-size: cover; background-size: cover; height: 100%; }
.blog-details-header { background: url("http://placehold.it/1920x800") no-repeat center top fixed; -webkit-background-size: cover; background-size: cover; height: 100%; }
.blog-content { position: relative; cursor: pointer; }
.blog-img { opacity: 1; transition: all 400ms ease-in-out 0s; height: 100%; width: 100%; }
.blog .active { margin-bottom: 0; }
.blog .active .blog-content-out { display: block !important; }
.blog-image { padding: 0; background-color: #000 }
.blog-day { background-color: #f96015; border: 2px solid #f96015; color: #fff; display: table-cell; font-family: 'Oswald', sans-serif; font-size: 50px; font-weight: 400; height: 94px; left: 3%; position: absolute; top: 59%; width: 94px; z-index: 9999; }
.blog-day span { left: 0; position: absolute; right: 0; top: 35px; vertical-align: middle; }
.blog-content:hover .blog-day { border: 4px solid #fff; background-color: #f96015; color: #fff; }
.blog-content:hover .blog-day span { top: 33px; }
.blog-header span.highlight { font-size: 65px; font-weight: 400; background-color: transparent; color: #fff; padding: 12px 34px }
.blog-header .intro-section .intro { line-height: 60px }

/* Frame Overlay */
.frameOverlay { color: #000; padding: 15px 15px 22px; transition: all 500ms ease-in-out 0s; cursor: default }
.frameOverlay .col-md-offset-2 { margin-left: 10.667%; }
.blog-content-out .content { line-height: 23px; width: auto; transition: all 400ms ease-in-out 0s; }
.month { width: 100%; display: inline-block; }
.blog-content .blog-title { margin-bottom: 19px; }
.blog-title .title { margin: 0 0 2px; line-height: 32px; }

/* Blog Active */
.blog-content.active .frameOverlay { background-color: #FFF; display: table; width: 100%; }
.buttons .small-button { display: inline-block; float: none; margin: 50px 0 0; }
.blog-content:hover .blog-image img { opacity: 0.5; }

/* Blog Group show */
.group { display: none; }
.group.show { display: block; }
#load-more.disable { color: #b7b7b7; text-decoration: none; cursor: default; border: 2px solid #b7b7b7 }
#load-more.disable:hover { background-color: transparent }

/* ==========================================================================
13. Blog Listing
========================================================================== */

/* Blog Page */
.blog-left { margin-right: 6%; }
.blog-page .footer { height: auto; }
.blog-page .blog-content { cursor: auto; margin: 40px 0; padding: 0; }
.blog-title .content { width: auto; margin-bottom: 30px; }
.blog-page .blog-content h6 { letter-spacing: 0; text-align: left; }
.search { border: 1px solid #cdcdcd; color: #838383; font-size: 13px; height: 40px; background: url(../images/icon-search.png) 95% no-repeat }

/* Blog Wrapper */
.blog-post li:first-child { margin-top: 0; }
.post-preview { display: table; margin: 40px 0; }
.blog-video { min-height: 410px; }
.blog-content { margin-bottom: 0; }

/* Blog Carousel */
.blog-wrapper .carousel { line-height: 12px; }
.blog-wrapper .carousel-caption { padding: 0; }

/* Post Preview */
.post-preview .blog-day { left: 30px; top: -70px; z-index: 0; }
.post-preview .blog-title { line-height: 26px; }

/* Pagination */
.pagerblock { display: inline-block; }
.pagerblock li { float: left; margin: 0 12px; background: #FFF; }
.pagerblock li a { border: 2px solid #e5e5e5; display: block; width: 50px; height: 50px; line-height: 45px; font-weight: 400; font-size: 16px }
.pagerblock li a i { color: #000; font-size: 22px; line-height: 35px; }
.pagerblock li.current a, 
.pagerblock li a:hover, 
.pagerblock li a:focus, 
.pagerblock li a:hover i, 
.pagerblock li a:focus i { color: #f96015; border-color: #f96015; text-decoration: none; }

/* Sidebar Block */
.sidebar-block { margin-bottom: 40px; font-size: 13px; }
.sidebar-block .divider { width: 100%; margin: 5px 0 20px; }
.comments-divider { margin: 5px 0 !important; }
.categories a:hover { color: #f96015; }
.categories li { padding: 8px 0; border-bottom: 1px solid #e5e5e5 }
.categories li span { display: block; color: #909090; position: relative; top: -4px }
#signup_form { margin-top: 10px; }
#subheader { line-height: 18px; }
.input_var .form-control { margin-bottom: 10px; background-color: #fbfbfb; }
.signup_submit button { display: table; font-size: 14px; margin: 0 auto; padding: 7px 0; width: 100%; }

/* Tag Cloud */
.tagcloud { display: table; }
.tagcloud a { background: #FFF; border: 1px solid #e5e5e5; display: inline-block; float: left; font-size: 13px; font-weight: 400; margin: 7px 7px 0 0; padding: 2px 11px 3px; }
.tagcloud a:hover, 
.tagcloud a:focus { background: #000; border-color: #000; color: #FFF; text-decoration: none; }
.comments li { font-size: 14px; line-height: 18px; margin: 10px 0 10px 7px; }

/* ==========================================================================
14. Blog Details
========================================================================== */

/* Blogpost */
.blog-share { display: inline-block; margin: 15px 0; width: 100%; }
.blogpost_share { float: right; margin: 7px 0 0 0 }
.blogpost_share span { color: #5e5e5e; float: left; }
.blogpost_share ul { float: left; }
.blogpost_share ul li { float: left; margin: 0 10px; }
.blogpost_share ul li:first-child { margin-left: 0; }
.blogpost_share ul li a { display: block; }
.blogpost_share ul li i { color: #000; transition: all 400ms ease-in-out 0s; font-size: 20px; }
.blogpost_share ul li.facebook a:hover i { color: #3c599f; }
.blogpost_share ul li.twitter a:hover i { color: #20b9ff; }
.blogpost_share ul li.linkedin a:hover i { color: #0085ae; }
.blogpost_share ul li.google-plus a:hover i { color: #d44132; }

/* Blog Details */
.blog-details .like, 
.blog-details .like i { color: #f96015; }
.recent-comments .divider { width: 100%; }
.recent-comments .content { width: 100%; }
.recent-comments p { margin: 25px 0; }
.top { margin-bottom: 25px; }
.blog-details-title { font-size: 45px; font-family: 'Oswald', sans-serif; line-height: 54px; text-transform: uppercase; color: #FFF; margin: 10px 0 }
.blog-details .blogpost_share { border-bottom: 2px solid #000; border-top: 1px solid #dfdfdf; clear: both; float: none; padding: 40px 0; text-align: center; margin-bottom: 60px }
.blog-details .blogpost_share ul { float: none }
.blog-details .blogpost_share ul li { float: none; display: inline-block; margin: 0 20px }
.blog-details .blogpost_share ul li i { font-size: 35px }
.sidebar-block h6, 
#comments .title { font-size: 14px; line-height: 30px; font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: 0px; }
.recent-comments .title { font-size: 25px; line-height: 30px; font-weight: 800; margin: 0; text-transform: uppercase; letter-spacing: 2px; text-align: center; margin-bottom: 35px }
.recent-comments input { border: 1px solid #cdcdcd; height: 50px; color: #838383; font-size: 15px }
.recent-comments textarea { border: 1px solid #cdcdcd; height: 50px; color: #838383; font-size: 15px; max-width: 100%; resize: none }

/* Comments */
.recent-comments { float: none; margin: 0 auto; }
.name { font-size: 16px; text-transform: uppercase; font-weight: 600; display: block }
.date { font-size: 14px; display: block }
.comments-details { border-bottom: 1px solid #dfdfdf; clear: both; float: left; margin-bottom: 40px; padding-bottom: 40px; }
.comments-details .small-button { margin: 10px 0 0 0 }
.comments-details:last-child { border-bottom: none; margin: 0 }
.comments-details .small-button { margin: 10px 0 0 0 }
.blog-comments .form-group { text-align: center; margin: 0 }

/* Media Object */
.media-object { border-radius: 100%; width: 80px; height: 80px; margin: 0 25px 0 0 }

/* ==========================================================================
15. Counter
========================================================================== */

.counterBoxNumber { font-size: 100px; color: #FFF; font-family: 'Oswald', sans-serif; line-height: 100px; }
.counterBoxDetails { text-transform: none; color: #FFF; font-size: 16px; font-weight: 400; font-family: 'Open Sans', sans-serif; letter-spacing: 0; }
.counterBox .orange-line { width: 40px; margin: 16px auto 9px; }

/* ==========================================================================
16. Scroll To Top
========================================================================== */

.scrollToTop { display: none; font-weight: bold; height: auto; padding: 0; position: fixed; right: 45px; text-align: center; text-decoration: none; top: 91%; width: auto; background-color: #161616; z-index: 9999; border-radius: 3px; border: 1px solid #000 }
.scrollToTop i { font-size: 18px; margin: 5px 8px 0; color: #FFF; }
.scrollToTop:hover { opacity: 0.5; }
.scrollToTop:hover i { position: relative; }
.scrollDownWrap { bottom: 40px; left: 0; margin: 0 auto; min-height: 41px; position: absolute; right: 0; text-align: center; width: 90px; z-index: 9; }
.scrollDown a { text-decoration: none; text-transform: uppercase; color: #fff; -moz-transition: color 500ms ease; -o-transition: color 500ms ease; -webkit-transition: color 500ms ease; transition: color 500ms ease; }
.scrollDown a:hover { color: #fff; -moz-transition: color 500ms ease; -o-transition: color 500ms ease; -webkit-transition: color 500ms ease; transition: color 500ms ease; }
.scrollDown i { display: block; margin: 0 auto; position: relative; -webkit-animation: iconFloat 0.8s infinite linear; -moz-animation: iconFloat 0.8s infinite linear; -ms-animation: iconFloat 0.8s infinite linear; -o-animation: iconFloat 0.8s infinite linear; animation: iconFloat 0.8s infinite linear; color: #000; padding: 0; color: #FFF; font-size: 45px; opacity: 0.7 }
.scrollDown:hover i { opacity: 0.3 }
.isotope, 
.isotope .portfolio-item, 
.isotope .post-item { -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -ms-transition-duration: .8s; -o-transition-duration: .8s; transition-duration: .8s; }
.scrollDown i:before { font-family: 'FontAwesome'; }

/* ==========================================================================
17. Filter Tab
========================================================================== */

.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }

/* ISOTOPE CSS3 TRANSACTIONS */
.isotope, 
.isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; }

/* DISABLE ISOTOPE CSS3 TRANSACTIONS */
.isotope.no-transition, 
.isotope.no-transition .isotope-item, 
.isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }

/* DISABLE ISOTOPE CSS3 TRANSACTIONS FOR CONTAINERS WITH INFINITE SCROLLING */
.isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }

/* ==========================================================================
18. Team
========================================================================== */

.team-details .our-team { opacity: 0.5; }
.team-details .namerol { background: #FFF; padding: 13px 0 17px; }
.team-details .namerol .orange-line { margin: 4px auto 6px; }
.namerol span { font-weight: bold; text-transform: uppercase; }
.namerol .content { text-transform: uppercase; font-size: 11px; }
.team-profile { /* max-height: 308px;  */ margin: 0; overflow: hidden; position: relative; }
.social i { color: #FFF; font-size: 25px; margin: 5px 9px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; }
.social i:hover { color: #f96015; position: relative; top: 0; -webkit-transition: all 400ms ease-in-out 0s; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; }
.team-profile .our-team { height: 100%; position: absolute; top: 600px; width: 100%; transition: all 400ms ease-in-out 0s; }
.our-team .text-center { margin: 0 auto; }
.team-details:hover .our-team { opacity: 1; }
.team-details:hover .our-team { top: 0px; background: rgba(0, 0, 0, 0.85); padding-top: 104px; }
.team .width { margin-top: 66px; margin-bottom: 73px; }
.our-team .content-white { width: 65%; }
.team-details .orange-line { width: 32px; margin: 15px auto 19px; }

/* ==========================================================================
19. Client Logos
========================================================================== */

.client-logos { padding:0 !important; background: url(http://placehold.it/1920x1000) no-repeat center top fixed; -webkit-background-size: cover; background-size: cover; }
.client-logos .color-overlay { padding: 94px 0 93px; }
.clients-slider li { display: inline-block; margin: 0 4%; width: 15%; }

/* ==========================================================================
20. Contact
========================================================================== */

.form-group form { transition: all 800ms ease-in-out 0s; -moz-transition: all 800ms ease-in-out 0s; -webkit-transition: all 800ms ease-in-out 0s; -o-transition-duration: all 800ms ease-in-out 0s; }
/* #success { background-color: #fff; border: 2px solid #f96015; color: #f96015; display: none; font-size: 20px; font-family: "Oswald",sans-serif; line-height: 58px; text-align: center; text-transform: uppercase; }*/
.contact-info { margin-top: 54px; }
.left-part { padding: 0 0; }
.contact-text { display: table; width: 57%; margin: 0 0; }
.address { margin: 0 0; }
.head { margin-bottom: 10px; margin-top: 57px; } /*57 original */
.icon-list li { font-size: 16px; }
.icon-list i { font-size: 20px; margin-right: 20px; }
.icon-list li a { color: #000; text-decoration: none; }
.icon-list li a:hover { text-decoration: underline; }
.right-part { padding: 0 0; }

/* Map */
#map { height: 113px; width: 100%; line-height: 22px }
.map-overlay { width: 100%; text-align: center; border-top: 1px solid #dfdfdf; background:rgba(255,255,255,.9); z-index: 2; position: absolute }
.map-overlay:hover { background:rgba(255,255,255,1); }
.map-button { font-family: "Oswald", sans-serif; font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; background-color: transparent; width: 100%; height: 113px; }
.map-button:hover, 
.map-button:focus { opacity: 1; }
.map-button:before { content: "\f041"; font-family: 'FontAwesome'; font-size: 19px; margin-right: 10px; color: #f96015 }
#googlemap * {transition-duration:0s; -moz-transition-duration:0s; -webkit-transition-duration:0s; -o-transition-duration: 0s; }
.openmap #map { height: 400px}

/* ==========================================================================
21. Footer
========================================================================== */

.bytebloom-link {
    color: white !important; /* Keep text white */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make it stand out */
    transition: color 0.3s ease-in-out; /* Smooth transition */
}

.bytebloom-link:hover {
    color: orange !important; /* Change to orange on hover */
    text-decoration: underline; /* Optional: Adds an underline on hover */
}


#footer { background: url("http://placehold.it/1920x197") no-repeat center top fixed; -webkit-background-size: cover; background-size: cover; }
footer .color-overlay { padding: 46px 0 0; }
.footer-social li { display: inline-block; margin: 0 1.8%; }
.footer-social li i { font-size: 40px; }
.copy { margin: 7px auto 25px; opacity: 0.8 }

/* ==========================================================================
22. Design Elements
========================================================================== */

.conter-box { background: url(http://placehold.it/1920x1000) no-repeat center top fixed; -webkit-background-size: cover; background-size: cover; }
.feature-content { margin-top: 86px; margin-bottom: 50px; }
.expertise-img img { -webkit-background-size: cover; background-size: cover; }
.service-icon i { font-size: 60px; }
.service-box { padding-top: 75px; padding-bottom: 91px; }
.service-box:hover { background-color: #FFF; }
.service-box:hover .service-icon i { position: relative; bottom: 5px; -webkit-animation: 0.8s linear 0s normal none infinite iconFloat; animation: 0.8s linear 0s normal none infinite iconFloat; }
.service-icon { margin-bottom: 28px; }
.model-box { background: url(http://placehold.it/1920x1071) no-repeat center top fixed; -webkit-background-size: cover; background-size: cover; }
.signature { width: auto; }

/* Work Count */
.work-count-box .title-top { color: #000; font-size: 45px; font-weight: bold; margin: 0; font-family: 'Oswald', sans-serif; }
.work-count-box .content-white { width: 75%; }

/* Testimonial */
.testimonial { background: url("http://placehold.it/1920x1048") no-repeat center top fixed; -webkit-background-size: cover; background-size: cover; }
.testimonial-int { background: url(http://placehold.it/1920x1048) no-repeat center top fixed; -webkit-background-size: cover; background-size: cover; }
.testimonial .container { overflow: hidden; line-height: 30px; }

/* Carousel */
.carousel-inner { overflow: visible; display: inline-table; }
.carousel-indicators { position: absolute; bottom: 10px; left: 0; z-index: 15; width: 100%; padding-left: 0; margin-left: 0; text-align: center; list-style: none; bottom: 50px; }
.testimonial .carousel-indicators { bottom: 0; margin: 0; }
.carousel-indicators li { display: inline-block; width: 17px; height: 17px; margin: 0 10px 0 0; text-indent: -99999px; cursor: pointer; border: 2px solid #fff; border-radius: 100%; visibility: visible; position: relative; left: inherit; }
.carousel-indicators li:first-child { margin-left: 0; }
.carousel-indicators li:last-child { margin-right: 0; }
.carousel-indicators li:after { left: inherit; content: inherit; }
.carousel-indicators .active { width: 17px; height: 17px; background-color: #fff; visibility: visible; }
.carousel-caption { position: inherit; width: 46%; margin: 0 auto; }
.carousel-caption p { font-size: 22px; font-weight: 300 }
.carousel-caption span { font-size: 16px; text-transform: uppercase; margin-bottom: 65px; display: inline-block; }
.carousel-inner iframe { display: block; height: 500px; margin-top: 19%; vertical-align: middle;  width: 100%;}

/* Feature */
.feature { display: table; margin-left: 8%; }
.icon-container { float: left; margin-right: 30px; min-height: 74px; }
.icon-container i { font-size: 50px; line-height: 78px; }
.feature:hover .icon-container i { position: relative; bottom: 10px; -webkit-animation: 1s linear 0s normal none infinite iconFloat; animation: 1s linear 0s normal none infinite iconFloat; }
.fetaure-details .title, 
.fetaure-details .content { float: left; }
.fetaure-details .content { width: 69%; }

/* Canvas */
canvas { width: 63%; }
.count-box .title { color: #FFF; font-weight: 300; margin-bottom: 0; }
.count .margin-top { margin-top: 16px; }
.chart, 
.chart2, 
.chart3, 
.chart4, 
.chart5, 
.chart6, 
.chart7, 
.chart8 { position: relative; margin: 0; left: 0%; width: 100%; }
.chart span, 
.chart2 span, 
.chart3 span, 
.chart5 span, 
.chart6 span, 
.chart7 span, 
.chart8 span { position: absolute; color: #FFF; font-size: 50px; font-family: 'Oswald', sans-serif; left: 0%; right: 0%; top: 40%; }
.chart4 span { position: absolute; color: #66b572; font-size: 40px; font-family: 'Oswald', sans-serif; left: 0%; right: 0%; top: 40%; }
.chart5 span { color: #12569b; font-weight: 100; font-size: 40px; }
.chart6 span { color: #aaaaaa; font-weight: 100; font-size: 40px; }
.chart7 span { color: #ffffff; font-weight: 100; font-size: 40px; }
.chart8 span { color: #909090; font-weight: 100; font-size: 40px; }

/* ==========================================================================
23. Homepage Slider
========================================================================== */

.fill { background-position: center center; background-size: cover; height: 100%; width: 100%; position: absolute; }
.slider-text { display: table; height: 65%; overflow: visible; width: 100%; z-index: 2; position: absolute; text-align: center; bottom: 0; }
.slider-text .col-md-6 { margin: 0 auto; float: none; }
.home-slider .carousel-inner .item { height: 100%; width: 100%; position: absolute; }
.home-slider .carousel-inner { overflow: hidden; position: absolute; width: 100%; height: 100%; }
.home-slider h1 { background-color: #fff; padding: 30px 45px; color: #f96015; font-size: 65px; font-weight: 400; display: inline-block; }
.home-slider span { font-family: "Oswald", sans-serif; font-size: 30px; font-weight: 100; display: block; text-transform: uppercase; color: #FFF; padding: 20px 0 55px; line-height: 35px; }
.home-slider .highlight-button { display: inline-block; }

/* ==========================================================================
24. Homepage Video
========================================================================== */

.home-slider iframe { width: 100%; max-width: 100%; height: 100%; position: absolute; top: -6px !important }
.video header { background: #000}

/* ==================================================================
25. Coming Soon
================================================================== */

.coming-soon #counter { color: #fff;  margin: 9% 0; }
.coming-soon .counter-container { display: table; margin: 0 auto; }
.coming-soon #counter .counter-box { display: block; width: 150px; text-align: center; padding: 15px 25px; float: left; margin: 0px 35px 0 0; border-left: 1px solid rgba(249, 96, 21, .2); border-right: 1px solid rgba(249, 96, 21, .2); }
.coming-soon #counter .last { border-right: 0px; width: 90px; padding: 15px 0 15px 25px; }
.coming-soon #counter .first { border-left: 0px; }
.coming-soon #counter .number { font-size: 60px; text-align: center; font-weight: 700; line-height: 60px; }
.coming-soon #counter span { display: block; font-size: 16px; text-align: center; font-weight: 400; }
.coming-soon { height: 100%; position: relative; width: 100%; }
.coming-soon #home { background: url("http://placehold.it/1920x976") center top scroll; width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; }
.coming-soon #home #counter { color: #ffffff; font-size: 50px; }
.coming-soon .home { margin: 0 auto; }
.coming-soon .home .text { color: #fff; font-size: 16px; font-weight: 300; margin-bottom: 5%; margin-left: auto; margin-right: auto; width: 500px; }
.coming-soon .home form { float: none; margin: 0 auto; border-radius: 0px; padding: 0px; }
.coming-soon .input-group { padding: 5px; border: 1px solid rgba(255, 255, 255, 0.7); }
.coming-soon .home form input { background-color: transparent; border: 0 none; border-radius: 0; color: #fff; padding: 7px; width: 576px; margin: 0; font-size: 14px; }
.coming-soon .home form .validation { background-color: #ff8f8f; }
.coming-soon #successmsg { margin-top: 17px; color: #fff; background-color: #f96015; padding: 10px 0 10px; font-family: 'Oswald', sans-serif; text-transform: uppercase; display: none; transition: all 800ms ease-in-out 0s; -moz-transition: all 800ms ease-in-out 0s; -webkit-transition: all 800ms ease-in-out 0s; -o-transition-duration: all 800ms ease-in-out 0s; }
.coming-soon #successmsg1 { margin-top: 25px; margin-bottom: 52px; font-size: 18px; color: #fff; background-color: #1dc607; padding: 10px 0 10px; font-family: 'Oswald', sans-serif; text-transform: uppercase; display: none; }
.coming-soon .home button { background-color: #ffffff; color: #000000; border: 0px; border-radius: 0px; padding: 4px 12px; cursor: pointer; width: 120px; height: 30px; float: right; }
.coming-soon .home button span { font-size: 12px; font-weight: bold; text-transform: uppercase; white-space: pre; }
.coming-soon .home button:hover { background-color: #f96015; color: #FFF; }
.coming-soon .social { clear: both; }
.coming-soon .social ul { margin: 5% 0 0 0; padding: 0; }
.coming-soon .social ul.contact { margin: 3.2% 0 0 0 }
.coming-soon .social ul li { display: inline-block; margin: 0 15px; }
.coming-soon .social ul li a { color: #FFF; font-size: 20px; display: inline-block; float: left; outline: none; }
.coming-soon .social ul li a i { margin: 0; }
.coming-soon .social ul li a:hover i { color: #f96015 !important; }
.coming-soon .home form input.not-valid { background-color: rgba(255, 0, 0,0.2); }
.coming-soon.main { display: table; width: 100%; margin: 0 auto; height: 100%; padding: 0px; }
.coming-soon .main .page { text-align: center; vertical-align: middle; position: relative; z-index: 9999; width: 100%; }
.coming-soon .container { width: 727px; margin: 4% auto 0; }
.coming-soon .logo { margin: 0 0 6%; }
.coming-soon .logo img { width: 201px; }
.coming-soon .align-center { text-align: center }
.coming-soon .center-block { display: block; margin-left: auto; margin-right: auto }
.coming-soon .slider-overlay { height: 100%; width: 100%; position: absolute; background: rgba(0, 0, 0, .7); z-index: 11; }

@media (max-width: 991px) {
  .navbar-hide {
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transition: transform 0.3s, -webkit-transform 0.3s;
  }
  .navbar {
    transition: transform 0.3s, -webkit-transform 0.3s;
  }
  .navbar-toggle {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 10001;
    display: block !important;
  }
}