@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700');
body{ padding: 0px; margin: 0px; font-family: 'Poppins', sans-serif; font-weight: 400;}
h1, h2, h3, h4, h5, h6, ol, li, ul, a, img, p, span, strong{ padding: 0px; margin: 0px;}
a:hover,a:focus{ outline: none;}
section{ float: left; width: 100%;}
.pad0{ padding: 0;}
img { max-width: 100%;}
/************** Header *****************/
.header-top { background-color: #00baff; padding: 10px 0;}
.header-top .top-count > li { color: #fff; display: inline-block; font-size: 16px; list-style: none; padding: 0 20px 0 0;}
.header-top .social > li { display: inline-block; font-size: 16px; list-style: none;}
.header-top .social a { color: #fff; display: inline-block; font-size: 18px; padding: 0 11px;}
.header-top .social { text-align: right;}

.header .navbar.navbar-default .navbar-brand { height: auto; margin: 0; padding: 15px;}
.header nav.navbar.navbar-default { border: 0 none; border-radius: 0; box-shadow: 0 0; margin: 0;}
.header .navbar-default .navbar-nav > .active > a,
.header .navbar-default .navbar-nav > li:hover > a{ background: transparent none repeat scroll 0 0; color: #00baff;}
.header .navbar-default .navbar-nav > li > a { color: #0c0c0c; font-size: 15px; padding: 8px 20px; position: relative;}
.header .navbar-default .navbar-nav > .active > a::after, .header .navbar-default .navbar-nav > li:hover > a::after { background-color: #00baff; content: ""; height: 2px; left: 50%; 
        position: absolute; top: 100%; transform: translate(-50%, 0px); width: 20px;}
.header .nav.navbar-nav.navbar-right { padding: 25px 0;}

.slider { background-image: url("../images/slider.png"); background-position: center center; background-size: cover; padding: 100px 0 50px;}
.slide-content h2 { color: #fff; font-size: 39px; font-weight: bold; text-shadow: 0 0 2px #000;}
.slide-content h2 span { color: #00baff;}
.slide-content h3 { color: #eee9d5; font-size: 25px; line-height: 37px; margin: 35px 0;}
.slide-content h4 { color: #eee9d5; font-size: 41px; margin: 50px 0 30px; font-weight: 400;}
.slide-content { max-width: 660px; text-align: center;}
.slide-content > a { color: #ff6c00; font-size: 60px; font-weight: 600; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);text-decoration: none;}

.how-it-work { padding: 70px 0; text-align: center;}
.how-it-work h2 { color: #000; font-size: 39px; font-weight: bold; margin-bottom: 10px;}
.how-it-work h2 span { color: #00baff;}
.how-it-work .line-sm { background-color: #00baff; display: block; height: 3px; margin: 15px auto 40px; width: 100px;}
.how-it-work p { color: #565656; font-size: 17px; margin: 0 auto; max-width: 640px;}

.proccess { float: left;margin-top: 60px; width: 100%;}
.proccess .col-md-3.col-sm-6 { padding: 0 3px;}
.p-step { background-color: #eaeaea; min-height: 324px; padding: 70px 10px 50px; position: relative; transition: all 0.5s ease 0s;}
.p-step img { margin-bottom: 30px;}
.p-step:hover{background-color: #00baff;}
.p-step:hover p { color: #fff;}
.p-step:hover::after { border-left: 2px solid #fff; border-top: 2px solid #fff; content: ""; height: 70px; left: 6px; position: absolute; top: 6px; width: 70px;}
.p-step:hover::before { border-right: 2px solid #fff; border-bottom: 2px solid #fff; content: ""; height: 70px; right: 6px; position: absolute; bottom: 6px; width: 70px;}

.turst-safety { background-image: url("../images/trust.png"); background-position: center center; background-size: cover; padding: 40px 0; text-align: center;}
.turst-safety h2 { color: #fff; font-size: 39px; font-weight: bold; margin-bottom: 10px;}
.turst-safety h2 span { color: #00baff;}
.turst-safety .line-sm { background-color: #fff; display: block; height: 3px; margin: 15px auto 20px; width: 100px;}
.turst-safety p { color: #fff; font-size: 21px; margin: 30px auto 10px; max-width: 870px;}
.turst-safety .btn.btn-primary { background-color: #00baff; border: 0 none; font-size: 21px; margin-top: 20px; padding: 10px 20px;}

.member-saying { padding: 70px 0; text-align: center;}
.member-saying h2 { color: #000; font-size: 39px; font-weight: bold; margin-bottom: 10px;}
.member-saying h2 span { color: #00baff;}
.member-saying .line-sm { background-color: #00baff; display: block; height: 3px; margin: 15px auto 40px; width: 100px;}
.member p { color: #696969; font-size: 15px; margin: 25px 0; text-align: justify; font-weight: 500;}

.date-name { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 10px 0; text-align: left;}
.date-name h3 b { color: #062c3a; font-size: 20px; font-weight: 500;}
.date-name span { color: #696969; display: inline-block; float: right; font-size: 15px; font-weight: 400; padding: 5px 0;}

.footer { background-color: #062c3a; padding: 50px 0 30px;}
.foot1 p { color: #fff; font-weight: 300; margin-top: 20px; max-width: 320px;}
.foot2 li { list-style: outside none none; padding: 5px 0;}
.foot2 a { color: #fff; text-decoration: none;}

.copyright { background-color: #031d27; color: #fff; font-size: 13px; padding: 20px 0;}

@media(max-width: 1199px){
.how-it-work p { font-size: 14px;}

}

@media(max-width: 991px){
.header-top .top-count > li { font-size: 15px;}
.header .navbar-brand > img { width: 140px;}
.header .navbar-default .navbar-nav > li > a { padding: 8px 14px;}
.p-step { margin-bottom: 6px; min-height: 265px;}
.member-saying h2, .how-it-work h2, .turst-safety h2 { font-size: 29px;}
.turst-safety p { font-size: 15px;}
.turst-safety .btn.btn-primary { font-size: 15px;}
.date-name span { float: none;}
.date-name { text-align: center;}

}

@media(max-width: 767px){
.header-top .top-count > li { display: block; margin-bottom: 6px; padding: 0; text-align: center;}
.header .navbar-default .navbar-nav > .active > a::after, .header .navbar-default .navbar-nav > li:hover > a::after{display: none;}
.slide-content h2 { font-size: 29px;}
.slide-content h3 { font-size: 15px; line-height: 27px; margin: 15px 0;}
.slide-content h4 { font-size: 21px; margin: 10px 0 30px;}
.slide-content > a { font-size: 30px;}
.date-name h3 b { display: block;}
.member { margin: 0 auto 30px;max-width: 365px;}
.member p { font-size: 13px;}
.header-top .social { text-align: center;}
}