/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
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, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
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; }
table { border-collapse: collapse; border-spacing: 0; }

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.btn:focus, .btn:active:focus, .btn.active:focus { outline: none; outline: none; outline-offset: 0; box-shadow: none; }
input:focus, textarea:focus, select:focus { outline: none; }
a:focus, a:hover, a:active { outline: none !important; }


/* -------- Quicware --------  */
@font-face {
    font-family: 'Arial';
    src: url('../fonts/Arial-BoldMT.woff2') format('woff2'),
        url('../fonts/Arial-BoldMT.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arial';
    src: url('../fonts/ArialMT.woff2') format('woff2'),
        url('../fonts/ArialMT.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
body {
	font-family: 'Arial';
	font-size: 18px;
	line-height: normal;
	color: #000;
}
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
h1 { font-size: 4.2rem; line-height: 110%; margin: 2.8rem 0 1.68rem 0 }
h2 { font-size: 3.56rem; line-height: 110%; margin: 2.3733333333rem 0 1.424rem 0 }
h3 { font-size: 2.92rem; }
h4 { font-size: 2.28rem; }
h5 { font-size: 1.64rem; }
h6 { font-size: 1.15rem; }

strong, b{ font-weight:bold; }
.container {
	max-width: 1200px;
	margin: 0 auto;
    padding: 0 20px;
}


.header { position: absolute; width: 100%; padding: 20px 0; top: 0; left: 0; z-index: 11;}
.fixed-header .header { position: fixed; background: #1a78f2; }




 .header .container { display: flex; justify-content: space-between; }
.header a.call-btn { color: #fff; text-decoration: none; display: block; border: 1px solid #fff; padding: 10px 20px; border-radius: 5px; }
.header a.call-btn:hover { background: #fff; color: #004eb3; }

.header a.call-btn{ display:none; }
.fixed-header .header a.call-btn{ display:block; }
.text-center {text-align: center;}


/* --------- Banner --------- */
/* -------------------------- */
#banner { text-align: center; background: url(../images/banner.png) no-repeat;background-size: 100% 100%; position:relative; }
#banner .container { padding: 80px 0; min-height: 100vh; display: flex; justify-content: center; flex-direction: column;}
.bnr-text h1 { color: #fff; font-size: 58px; }
.bnr-sub { border-radius: 10px; padding: 20px; padding-left: 160px; text-align: left; position: relative; color:#fff;max-width: 950px; margin: 0 auto; }
.bnr-sub .usr-img { width: 118px; position: absolute; top: 20px; left: 20px; }
.bnr-sub h3 { font-size: 26px; font-weight: normal; margin-bottom: 20px; }

.bnr-sub .check-list {display: flex; justify-content: space-between; }
.bnr-sub .check-list li { padding: 10px; padding-left: 30px;  background-position: 0px 7px; }

.book-call { text-align: center; padding: 40px 0 20px; }
.book-call a.bok-call { color: #fff; text-decoration: none; display: inline-block; border: 2px solid #fff; padding: 20px 40px; border-radius: 5px; font-size: 32px; color:#1978F2; background:#fff; }
.book-call a.bok-call img { -moz-transition: all .4s ease; transition: all .4s ease; }
.book-call a.bok-call:hover img { transform: translate(14px, 0px); }

.mouse { position: absolute; width: 100%; left: 0; bottom: 0; padding: 20px 0; text-align: center; }


.section{
	padding: 80px 0;
}
h2.title{
	font-size: 42px;
	text-align: center;
	color: #1978F2;
    margin: 40px 0 60px;
}

/* --------- About --------- */
/* -------------------------- */
#about-wrap .box { border: 1px solid #DCDDDC; margin: 30px 0; padding: 30px; position: relative; display: flex; border-radius: 15px; box-shadow: 0px 0px 20px #0000002b; line-height: 26px; }
#about-wrap .user-info {padding: 10px;min-width: 280px;margin-right: 30px;display: flex;justify-content: center;flex-direction: column;}

#about-wrap .user-info .inner{position: relative;padding-left: 100px;}
#about-wrap .user-info img {position: absolute;width: 80px;left: 0;top: -6px;}
#about-wrap .user-info img.customer-photo {border-radius: 50%;}
#about-wrap .user-info h3 { font-size: 16px; }
#about-wrap .user-info p {font-size: 14px;color: #2E2D2D;line-height: normal;margin-top: 6px}
#about-wrap .user-info img.linkedin { position: relative; width: 17px; top: 3px; left: auto; }

/* --------- face-wrap --------- */
/* -------------------------- */
ul.dot-list li { background: url(../images/dot.svg) no-repeat; padding: 16px; padding-left: 26px; background-position: 0px 24px; font-size: 23px; }

#face-wrap { background: #EEF1FF; }
#face-wrap .dot-list { display: inline-block; text-align: left; }

/* --------- Healp wrap --------- */
/* -------------------------- */
#help-wrap {
    background: #E5E6FF;
}
#help-wrap .col-2 { display: flex; justify-content: space-between; }
#help-wrap .col-2 .item { width: 48%; background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0px 0px 20px rgb(0 0 0 / 24%); }
#help-wrap .col-2 .head-wrp { background: #1a78f2; color: #fff; text-align: center; padding: 20px 100px; }
#help-wrap .head-wrp h3 { font-size: 32px; margin-bottom: 20px; }
#help-wrap .head-wrp p { font-size: 22px; font-weight: normal; }
#help-wrap .col-2 .content { padding: 20px 40px; }
.check-list li { background: url(../images/check.svg) no-repeat; padding: 16px; padding-left: 36px; background-position: 0px 15px; }
#help-wrap .shadow-box { background: #fff; padding: 40px 20px; border-radius: 15px; margin-top: 40px; box-shadow: 0px 0px 20px rgb(0 0 0 / 24%); text-align: center; }
#help-wrap .shadow-box h3 { font-size: 26px; margin-bottom: 16px; color:#1978F2; }
#help-wrap .shadow-box h3.normal { font-weight: normal; color:#000; }
#help-wrap .shadow-box h3:before { content: ''; display: inline-block; width: 36px; height: 30px; background: url(../images/check.svg) no-repeat; background-position: 0px 7px; position: relative; top: 2px; }
#help-wrap .shadow-box h2 { font-size: 36px; margin-top: 16px; color:#1978F2; }
#help-wrap hr { max-width: 310px; margin: 20px auto; border: none; background: #CDDAFC; display: block; height: 1px; }
#help-wrap .check-list li{ font-size:22px }
#help-wrap .shadow-box p{ font-size:22px }
/* --------- why-wrp --------- */
/* -------------------------- */

#why-wrp {
    background: #EEF1FF;
}
.trail-call { text-align: center; position: relative; top: 120px; }
.trail-call a, .blue-gradient-btn { color: #fff; text-decoration: none; display: inline-block; padding: 24px 40px; font-weight: bold; border-radius: 5px; font-size: 32px; background: linear-gradient(90deg, #0044ae 0%, #00b1f3 100%); }
.blue-gradient-btn { margin-top: 10px; margin-bottom: 10px; padding: 15px 30px; font-size: 20px }
.blue-gradient-btn img { width: 22px; margin-left: 5px }
.trail-call a:hover, .blue-gradient-btn:hover { background: #004995; }
.trail-call a img, .blue-gradient-btn img { -moz-transition: all .4s ease; transition: all .4s ease; }
.trail-call a:hover img, .blue-gradient-btn:hover img { transform: translate(8px, 0px); }
#why-wrp .box { border: 1px solid #DCDDDC; margin: 30px 0; padding: 20px; position: relative; border-radius: 6px; box-shadow: 0px 0px 20px rgb(0 0 0 / 17%); line-height: 26px; background: #fff; }
#why-wrp .box h3 { font-size: 32px; margin: 0 0 16px; }
#why-wrp .box { position: relative; padding-left: 210px; min-height:178px; font-size:18px }
#why-wrp .box p{font-size:18px }


#why-wrp .box img { position: absolute; width: 165px; top: 20px; left: 20px; }

#works-wrap { position: relative; padding-top: 140px; }
#works-wrap .container { position: relative; z-index: 9; }
#works-wrap img.topimg { width: 18%; position: absolute; top: 3%; right: 5%; }
#works-wrap img.btmimg { position: absolute; width: 20%; bottom: 0; left: 14%; }

/* --------- works --------- */
/* -------------------------- */
#works-wrap  .box-wrap { max-width: 740px; margin: 0 auto; }
#works-wrap .box { padding: 20px; padding-left: 140px; position: relative; }
#works-wrap .box b { display: block; width: 95px; height: 95px; background: #EEF1FF; color: #004995; border-radius: 50%; font-size: 32px; text-align: center; padding-top: 30px; position: absolute; top: 12px; left: 21px; }
#works-wrap .box h3 { font-size: 32px; margin-bottom: 11px; }
#works-wrap .box p { font-size: 18px; line-height: 26px; }
#works-wrap .book-call a { color: #fff; text-decoration: none; display: inline-block; padding: 20px 40px; border-radius: 5px; font-size: 32px; background: linear-gradient(90deg, #0044ae 0%, #00b1f3 100%); }
#works-wrap .book-call a:hover { background: #004995; }
#works-wrap .book-call a img { -moz-transition: all .4s ease; transition: all .4s ease; }
#works-wrap .book-call a:hover img { transform: translate(14px, 0px); }


#footer { background: #EEF1FF; }

#footer .container{ display:flex; justify-content:space-between }

#footer { padding: 40px 0;}
#footer .quimg { margin-bottom: 20px; }
#footer a { color: #000; text-decoration: none; display: inline-block;  }
#footer .linkedin { width: 40px; position: fixed; right: 30px; bottom: 30px; border-radius: 100%; transition: linear 1s ease all; z-index: 1000 }
#footer .linkedin:hover { box-shadow: 4px 4px 7px #333 }
#footer p{ line-height:28px; }


@media (max-width:768px) {
    .book-call a.bok-call{ font-size:22px; margin:0 20px; }
    .book-call a.bok-call img { position: relative; top: 5px; }
    .bnr-sub .check-list { display: block; }
    .bnr-text h1 { font-size: 32px; margin-left: 20px; margin-right: 20px; line-height: 40px }
    .bnr-sub { padding: 20px }
    .bnr-sub .usr-img { position: relative; top: auto; left: auto;    display: block; margin: 0 auto; }
    .bnr-sub h3 { font-size: 18px; padding: 20px 0 0 }
    #about-wrap .user-info { min-width: auto; padding-bottom: 30px; }
    #about-wrap .box { display: block; }
    #help-wrap .col-2 { display: block; }
    #help-wrap .col-2 .item { width: 100%; margin-bottom: 20px; }
    #why-wrp .box { padding: 20px }
    #why-wrp .box img { position: relative; top: auto; left: auto; width: 100% }
    #works-wrap .box { padding-left: 60px }
    #works-wrap .box b { display: block; width: 45px; height: 45px; font-size: 22px; padding-top: 12px; position: absolute; top: 24px; left: 0px; }
    #works-wrap .box h3 { font-size: 22px }
    #works-wrap img.topimg { width: 38%; }
    #works-wrap img.btmimg { position: absolute; width: 40%; left: 0; }
    .logo-wrap img { width: 120px; padding-top: 10px; }
    .header a.call-btn { padding: 6px 20px; }
    .trail-call a, .blue-gradient-btn { font-size:22px; }
    .trail-call a img, .blue-gradient-btn img { display:none; }
    .section {padding: 40px 0;}
    .trail-call {top: auto;margin-top: 30px;}
    #works-wrap {padding-top: 140px;padding-bottom: 140px;}
    #about-wrap {padding-top: 40px;}
    #footer .container{ display:block;}
    #help-wrap .col-2 .head-wrp {padding: 20px ; }
}