/*

 * What follows is the result of much research on cross-browser styling.

 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,

 * Kroc Camen, and the H5BP dev community and team.

 */

/* ==========================================================================

   Base styles: opinionated defaults

   ========================================================================== */

html {

    color: #222;

    font-size: 1em;

    line-height: 1.4;

}



/*

 * Remove text-shadow in selection highlight:

 * https://twitter.com/miketaylr/status/12228805301

 *

 * Vendor-prefixed and regular ::selection selectors cannot be combined:

 * https://stackoverflow.com/a/16982510/7133471

 *

 * Customize the background color to match your design.

 */

::selection {

    background: #b3d4fc;

    text-shadow: none;

}



/*

 * A better looking default horizontal rule

 */

hr {

    display: block;

    height: 1px;

    border: 0;

    border-top: 1px solid #ccc;

    margin: 1em 0;

    padding: 0;

}



/*

 * Remove the gap between audio, canvas, iframes,

 * images, videos and the bottom of their containers:

 * https://github.com/h5bp/html5-boilerplate/issues/440

 */

audio,

canvas,

iframe,

img,

svg,

video {

    vertical-align: middle;

}



/*

 * Remove default fieldset styles.

 */

fieldset {

    border: 0;

    margin: 0;

    padding: 0;

}



/*

 * Allow only vertical resizing of textareas.

 */

textarea {

    resize: vertical;

}



/* ==========================================================================

   Browser Upgrade Prompt

   ========================================================================== */

.browserupgrade {

    margin: 0.2em 0;

    background: #ccc;

    color: #000;

    padding: 0.2em 0;

}



/* ==========================================================================

   Author's custom styles

   ========================================================================== */

/* ==========================================================================

   Helper classes

   ========================================================================== */

/*

 * Hide visually and from screen readers

 */

.hidden {

    display: none !important;

}



/*

 * Hide only visually, but have it available for screen readers:

 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility

 *

 * 1. For long content, line feeds are not interpreted as spaces and small width

 *    causes content to wrap 1 word per line:

 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe

 */

.visuallyhidden {

    border: 0;

    clip: rect(0 0 0 0);

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

    width: 1px;

    white-space: nowrap;

    /* 1 */

}



/*

 * Extends the .visuallyhidden class to allow the element

 * to be focusable when navigated to via the keyboard:

 * https://www.drupal.org/node/897638

 */

.visuallyhidden.focusable:active,

.visuallyhidden.focusable:focus {

    clip: auto;

    height: auto;

    margin: 0;

    overflow: visible;

    position: static;

    width: auto;

    white-space: inherit;

}



/*

 * Hide visually and from screen readers, but maintain layout

 */

.invisible {

    visibility: hidden;

}



/*

 * Clearfix: contain floats

 *

 * For modern browsers

 * 1. The space content is one way to avoid an Opera bug when the

 *    `contenteditable` attribute is included anywhere else in the document.

 *    Otherwise it causes space to appear at the top and bottom of elements

 *    that receive the `clearfix` class.

 * 2. The use of `table` rather than `block` is only necessary if using

 *    `:before` to contain the top-margins of child elements.

 */

.clearfix:before,

.clearfix:after {

    content: " ";

    /* 1 */

    display: table;

    /* 2 */

}



.clearfix:after {

    clear: both;

}



/* ==========================================================================

   EXAMPLE Media Queries for Responsive Design.

   These examples override the primary ('mobile first') styles.

   Modify as content requires.

   ========================================================================== */

@media only screen and (min-width: 35em) {

    /* Style adjustments for viewports that meet the condition */

}



@media print,

(min-resolution: 1.25dppx),

(min-resolution: 120dpi) {

    /* Style adjustments for high resolution devices */

}



/* ==========================================================================

   Print styles.

   Inlined to avoid the additional HTTP request:

   https://www.phpied.com/delay-loading-your-print-css/

   ========================================================================== */

@media print {



    *,

    *:before,

    *:after {

        background: transparent !important;

        color: #000 !important;

        /* Black prints faster */

        box-shadow: none !important;

        text-shadow: none !important;

    }



    a,

    a:visited {

        text-decoration: underline;

    }



    a[href]:after {

        content: " ("attr(href) ")";

    }



    abbr[title]:after {

        content: " ("attr(title) ")";

    }



    /*

     * Don't show links that are fragment identifiers,

     * or use the `javascript:` pseudo protocol

     */

    a[href^="#"]:after,

    a[href^="javascript:"]:after {

        content: "";

    }



    pre {

        white-space: pre-wrap !important;

    }



    pre,

    blockquote {

        border: 1px solid #999;

        page-break-inside: avoid;

    }



    /*

     * Printing Tables:

     * http://css-discuss.incutio.com/wiki/Printing_Tables

     */

    thead {

        display: table-header-group;

    }



    tr,

    img {

        page-break-inside: avoid;

    }



    p,

    h2,

    h3 {

        orphans: 3;

        widows: 3;

    }



    h2,

    h3 {

        page-break-after: avoid;

    }

}



html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

b,

u,

i,

center,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

embed,

figure,

figcaption,

footer,

header,

hgroup,

menu,

nav,

output,

ruby,

section,

summary,

time,

mark,

audio,

p,

video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

}



/* HTML5 display-role reset for older browsers */

p {

    margin-bottom: 0 !important;

}



article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

    display: block;

}



body {

    line-height: 1;

}



ol,

ul {

    list-style: none;

}



blockquote,

q {

    quotes: none;

}



blockquote:before,

blockquote:after,

q:before,

q:after {

    content: '';

    content: none;

}



* {

    margin: 0;

    padding: 0

}



table {

    border-collapse: collapse;

    border-spacing: 0;

}



a:hover {

    text-decoration: none;

}



.hide {

    display: none;

}



/*-----------------popup------------------------*/

.popup {

    width: 100%;

    height: 100%;

    display: none;

    position: fixed;

    top: 0px;

    left: 0px;

    z-index: 4;

    background: rgba(0, 0, 0, 0.75);

}



/* Inner */

.popup-inner {

    max-width: 1000px;

    width: 90%;

    padding: 40px;

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    box-shadow: 0px 2px 6px rgba(0, 0, 0, 1);

    border-radius: 10px;

    background: #fff;

}



/* Close Button */

.popup-close {

    width: 30px;

    height: 30px;

    padding-top: 4px;

    display: inline-block;

    position: absolute;

    top: 0px;

    right: 0px;

    transition: ease 0.25s all;

    -webkit-transform: translate(50%, -50%);

    transform: translate(50%, -50%);

    border-radius: 1000px;

    background: rgba(0, 0, 0, 0.8);

    font-family: Arial, Sans-Serif;

    font-size: 20px;

    text-align: center;

    line-height: 100%;

    color: #fff;

}



/*

.popup-close:hover {

    -webkit-transform: translate(50%, -50%) rotate(180deg);

    transform: translate(50%, -50%) rotate(180deg);

    background: rgba(0, 0, 0, 1);

    text-decoration: none;

}

*/

:-moz-placeholder {

    color: #909;

}



/*-----------------popup------------------------*/

/*-----------------globel------------------------*/

h1,

h2,

h3,

h4,

h5,

h6,

a,

button {

    font-family: 'Poppins', sans-serif !IMPORTANT;

}



p,

input {

    font-family: 'Roboto', sans-serif !IMPORTANT;

}



.page-btn a,

.page-btn button {

    background: #690e39;

    border: 2px solid #690e39 !important;

    width: 320px;

    color: #fff;

    text-align: center;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 120px;

    font-size: 26px;

    margin-top: 25px !important;

    outline: none;

    cursor: pointer;

    transition: all.5s;

}



.page-btn a:hover,

.page-btn button:hover,

.what-we-do section.about-sec .page-btn a:hover {

    background: transparent;

    color: #690e39;

}



.page-btn.wight-bg a:hover {

    background: transparent;

    color: #fff;

    border: 2px solid #fff !important;

}



.page-title h2 {

    font-weight: bold;

    font-size: 25px;

    color: #690e39;

}



.page-title p {

    font-weight: 500;

    font-size: 17px;

    margin-top: 25px;

    line-height: 28px;

}



input {

    border: 1px solid #ccc;

    width: 100%;

    border-radius: 10px;

    padding: 14px 35px;

    outline-color: #690e39;

    margin: 10px 0;

}



input::placeholder {

    color: #686868;

}



.hex-bg-color {

    background: #f9f9f9;

}



.banner-sec-row,

.clients-sec-row,

.about-sec-row,

.services-sec-row {

    display: flex;

    float: left;

    width: 100%;

    align-items: center;

    padding: 30px 0;

}



/*-----------------end off globel------------------------*/

/*_ _ _ _ _ _ _wrappers_ _ _ _ _ _ _*/

.wrappers {

    margin: 0 auto;

}



/*_ _ _ _ _ _ _container _ _ _ _ _ _*/

.container-fluid {

    margin: 0;

    padding: 0;

}



.container {

    max-width: 1170px;

}



.container .row {

    margin: 0 !important;

}



section {

    padding: 100px 0;

    float: left;

    width: 100%;

}



/*-----------------header------------------------*/

header .header-baar {

    float: left;

    width: 100%;

    text-align: center;

    padding: 40px 0;

}



header .header-baar a {

    display: inline-block;

}



header .header-baar a img {

    width: 240px;

}



/*-----------------header------------------------*/

/*-----------------footer------------------------*/

footer {

    float: left;

    width: 100%;

    padding: 39px 0 !important;

    background: #3a3a3c;

}



footer span.footer-info-c {

    padding: 0 30px;

    text-align: left;

    display: flex;

    position: relative;

}



footer span.footer-info-c,

footer span.footer-info-c a {

    line-height: 25px;

    font-size: 15px;

    font-family: 'Roboto', sans-serif !IMPORTANT;

    color: #fff !important;

}



footer span.footer-info-c:before {

    content: "";

    position: absolute;

    top: 0px;

    left: 0px;

    font-family: FontAwesome;

    font-size: 14px !important;

}



footer span.footer-info-c.location:before {

    content: "\f041";

}



footer span.footer-info-c.email:before {

    content: "\f003";

}



.copy-content {

    align-items: center;

    display: flex;

    margin-top: -20px;

    justify-content: center;

}



.footer-copyright {

    padding-top: 25px;

}



.footer-logo.left {

    text-align: right;

}



.footer-info {

    padding-bottom: 25px;

    border-bottom: 1px solid #fff;

}



footer .copy-right p {

    font-size: 14px;

    color: #fff;

}



footer span.footer-info-c.phone:before {

    content: "\f095";

    transform: rotate(90deg);

}



.footer-social ul {

    display: flex;

    justify-content: center;

    align-items: center;

}



.footer-social ul li {

    margin: 0 5px;

}



.footer-social {

    margin-top: 0px;

}



.footer-social ul a {

    color: #fff;

    border: 1px solid #fff;

    border-radius: 100%;

    width: 40px;

    height: 40px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 15px;

}



/*-----------------footer------------------------*/

/*-----------------page-title-banner------------------------*/

.page-title-banner .banner-title {

    width: 100%;

    text-align: center;

    position: relative;

}



.page-title-banner {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    position: relative;

    height: 500px;

    display: flex;

    align-items: center;

}



.page-title-banner:before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    background: #000;

    width: 100%;

    height: 100%;

    opacity: .6;

}



.page-title-banner .banner-title h1 {

    font-size: 45px;

    color: #fff;

    margin-bottom: 25px;

    font-weight: bold;

}



.page-title-banner .banner-title a {

    font-family: 'Roboto', sans-serif !IMPORTANT;

    color: #fff;

    font-size: 17px;

}



.page-title-banner .banner-title a i {

    color: #690e39;

    font-size: 10px;

    padding: 5px;

}



/*-----------------page-title-banner------------------------*/