@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300); @import url(https://fonts.googleapis.com/css?family=Raleway:400,900,700,600,500,300,200,100,800); @import url(https://fonts.googleapis.com/css?family=Lobster); @import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300); /*@import url(https://fonts.googleapis.com/css?family=Playball);*/ body{ overflow-x: hidden; font-family: 'Open Sans', sans-serif; position: relative; color: #496174; } h1, h2, h3, h4, h5, h6 { color: #496174; } p{ font-family: 'Open Sans', sans-serif; font-size: 12.5px; line-height: 20px; font-weight: 100; } *{ outline-color: transparent !important; } /*===== common ====*/ .bg-color{ background-color: #01BF86 !important; } section{ padding-top: 40px; padding-bottom: 40px; } .p-l-0{ padding-left: 0; } .p-l-r-0{ padding-left: 0; padding-right: 0; } .tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} .small-tag { color: #777; font-family: "Raleway",sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; } h1.section-title { position: relative; font-family: "Raleway",sans-serif; font-size: 30px; font-weight: 800; margin-bottom: 30px; margin-top: 0; display: inline-block; text-transform: uppercase; word-spacing: 5px; } h1.section-title::after { border: 4px solid #01bf86; border-radius: 10px; content: ""; display: inline-block; margin-left: 3px; position: absolute; bottom: 7px; width: 5px; } .section-para{ color: #999; margin-left: auto; margin-right: auto; margin-bottom: 80px; } .btn.btn-default { background-color: #01bf86; border-color: transparent; border-radius: 30px; color: #fff; font-size: 13px; margin-bottom: 10px; margin-right: 10px; padding: 12px 25px; text-transform: uppercase; word-spacing: 3px; } .btn.btn-primary{ background-color: transparent; color: #fff; border-color: #fff; margin-bottom: 10px; border-radius: 30px; margin-right: 10px; padding: 12px 25px; text-transform: uppercase; font-size: 13px } .btn.btn-default:hover, .btn.btn-primary:hover{ background-color: #496174; border-color: #496174; color: #fff; } .btn.btn-primary, .btn.btn-default, .what-we-do .do-box, .service-overflow { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .expert-overflow, .service-overflow, .intro, single-work span i.fa{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; } /*===== header ====*/ header{ height: 70px; } .navbar.default-menu{ border-radius: 0; border: 0; margin-bottom: 0; min-height: 70px; background-color: #fff; border-bottom: 2px solid #0CB88E; box-shadow: inset 0 1px #fff, 0 2px 5px rgba(34,25,25,0.4); -moz-box-shadow: inset 0 1px #fff, 0 2px 5px rgba(34,25,25,0.4); -webkit-box-shadow: inset 0 1px #fff, 0 2px 5px rgba(34,25,25,0.4); } .default-logo i.fa{ float: left; font-size: 50px; line-height: 0.8; margin-right: 10px; } .default-logo { font-family: 'Titillium Web', sans-serif; font-size: 25px; font-weight: 100; line-height: 48px; padding: 11px 15px 15px; text-transform: uppercase; } .default-logo img{ width: 105px; float: left; margin-right: 10px; } .default-menu.navbar-default .navbar-toggle { border-radius: 0; border-width: 2px; margin-top: 16px; margin-bottom: 16px; } .default-menu.navbar-default .navbar-nav > li > a{ font-size: 11px; font-weight: 600; letter-spacing: 0; color: #476B78; line-height: 40px !important; font-family: "Raleway",sans-serif; letter-spacing: 0.3px; padding: 15px; text-transform: uppercase; } .default-menu.navbar-default .navbar-nav > li:last-child > a{ padding-right: 0; } .default-menu.navbar-default .navbar-nav > li > a i{ position: relative; line-height: 40px; } .default-menu.navbar-default .navbar-nav > li > a:active, .default-menu.navbar-default .navbar-nav > li > a:focus, .default-menu.navbar-default .navbar-nav > li > a:hover{ color: #01BF86; } .default-menu.navbar-default .navbar-nav > .active > a, .default-menu.navbar-default .navbar-nav > .active > a:focus, .default-menu.navbar-default .navbar-nav > .active > a:hover{ background-color: transparent; color: #01BF86; } .btn.btn-default.navbar-btn { background-color: #01bf86; border-radius: 4px; color: #ffffff; font-weight: 600; margin-top: 16px; padding: 8px 15px; } .btn.btn-default.navbar-btn:hover{ color: #fff; background-color: #01BF86; border-color: transparent; } /* media quaries */ @media screen and (max-width: 768px){ .default-menu.navbar-default .navbar-nav > li > a{ line-height: 12px; } .default-menu .navbar-nav > li .nav-search{ border-color: rgba(153, 153, 153, 0.1); } .nav-search .form-control{ text-align: center; width: 100%; padding-left: 40px; padding-right: 20px; } .nav-search .form-group i { color: #999; font-size: 12px; left: 20px; } .default-menu.navbar-default .navbar-nav > li:last-child > a{ padding-left: 20px !important; } .default-menu.navbar-default .navbar-nav > li:first-child > a{ padding-left: 20px !important; } } .default-menu.menu-4{ border-bottom: 0; } .default-menu.menu-4 .default-logo{ color: #496174; } .default-menu.menu-4 .navbar-nav > li > a{ color: #999; } .default-menu.menu-4 .navbar-nav > li > a:before, .default-menu.menu-4 .navbar-nav > li > a:after{ color: transparent; font-size: 13px; position: absolute; transition: all 0.5s ease-in-out; margin-top: -1px; } .default-menu.menu-4 .dropdown-menu{ margin-top: 0 !important; } @media screen and (max-width: 768px){ .default-menu.menu-4 .navbar-nav > li > a:hover:after, .default-menu.menu-4 .navbar-nav > li > a:hover:before{ color: transparent; } } /*===== intro ====*/ .intro{ height: 100vh; background: url("../images/intro-bg.jpg") no-repeat fixed top center/ cover; } .intro-content > h1 { color: #fff; font-size: 40px; font-weight: 900; margin-bottom: 25px; text-transform: uppercase; } .intro-content > a > i.lnr{ font-size: 10px; margin-left: 5px; } .intro-content > p { color: #f8f8f8; font-size: 15px; font-style: italic; line-height: 1.5; margin-bottom: 45px; max-width: 450px; } .intro .carousel-indicators { bottom: 0; margin-bottom: -20%; } .intro .carousel-indicators li { background-color: #01BF86; border: 2px solid #01BF86; height: 15px; width: 15px; margin: 4px; } .intro .carousel-indicators .active { background-color: #fff; border: 3px solid #fff !important; height: 13px; margin: 5px; width: 13px; } /*===== our-sponsors ====*/ .our-sponsors{ background-color: #F3F6FA; } .sponsor-logo{ margin-bottom: 40px; } .people{ position: relative; background: #ffffff; padding: 20px 25px; margin-bottom: 110px; } .people::before { border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 20px solid #ffffff; bottom: -20px; content: ""; display: inline-block; left: 41px; position: absolute; width: 20px; } .people .media { position: absolute; bottom: -85px; } .people .media img{ width: 55px; height: 55px; border-radius: 50%; } .people .media-body strong{ color: #999; font-weight: 400; } .people p{ font-size: 15px; font-style: italic; font-weight: 100; line-height: 1.6; } .people .media-body h3{ font-size: 18px; font-weight: 600; margin-top: 8px; margin-bottom: 3px; } /*===== what we do ====*/ .service .media-heading { font-size: 18px; font-weight: 600; margin-bottom: 15px; } .service .media-left { padding-right: 18px; } .service .media-left .lnr { color: #01BF86 !important; font-size: 25px; } .service .media{ margin-bottom: 40px; } /*===== about us ====*/ /*===== about us ====*/ .about-us{ background-color: #F3F6FA; padding-bottom: 50px; } .about-us .section-title{ margin-top: 80px; position: relative; } .default-bg{ background-color: #01BF86; } .about-content > p{ color: #707070; font-size: 16px; margin-bottom: 35px; line-height: 1.7; font-weight: 100; } /*===== our service ====*/ .work .single-work img{ width: 100%; } .single-work{ position: relative; margin-bottom: 30px; } .single-work img{ display: block; margin-left: auto; margin-right: auto; } .owl-theme .owl-controls .owl-page span { background: #01BF86; opacity: 0.3; border-radius: 0; height: 4px; width: 25px; -moz-transform: skewX(-45deg) skewY(0deg); -webkit-transform: skewX(-45deg) skewY(0deg); -o-transform: skewX(-45deg) skewY(0deg); -ms-transform: skewX(-45deg) skewY(0deg); transform: skewX(-45deg) skewY(0deg); } .owl-theme .owl-controls { margin-top: 35px; } .service-overflow{ width: 100%; height: 100%; background-color: rgba(1, 191, 134, 0.8); position: absolute; bottom: 0; opacity: 0; } .single-work::before { border-right: 35px solid transparent; border-top: 35px solid #fff; content: ""; display: inline-block; left: 0; opacity: 1; position: absolute; top: 0; z-index: 1000; } .single-work:hover .service-overflow{ opacity: 1; } .service-overflow h3{ color: #01BF86; margin-top: 0; } .service-overflow p{ color: #888; margin: 0 auto; max-width: 260px; } .work-links i { border: 1px solid #ffffff; border-radius: 0; color: #ffffff; cursor: pointer; display: block; font-size: 15px; height: 45px; padding-top: 14px; text-align: center; width: 45px; } .work-links i:hover { border-color: transparent; background-color: rgba(73, 97, 116, 0.9); color: #ffffff; } .work-links.list-inline > li { display: block-inline; } /*===== extra feature ====*/ .extra-feature{ padding-top: 100px; overflow: hidden; } .extra-feature .section-title{ line-height: 1.3; } .extra-feature .section-title > span{ color: #01BF86; } .extra-feature p{; margin-bottom: 30px; } .extra-feature .btn.btn-default{ margin-bottom: 30px; } .e-feature{ position: relative; height: 540px; } .feature-img { bottom: 0; top: 30px; width: 100%; } .platform{ margin-bottom: 60px; } .platform.list-inline > li span{ display: block; font-size: 15px; font-weight: 600; color: #466B77; margin-top: 15px; } .platform.list-inline > li { padding-left: 20px; padding-right: 20px; } .platform i { color: #01BF86; background: transparent; cursor: pointer; font-size: 31px; text-align: center; } /*===== our experts ====*/ .our-experts{ background-color: #F6F6F6; } .our-experts .btn.btn-primary{ margin-bottom: 30px; } .our-experts .expert-box img{ display: block; margin-left: auto; margin-right: auto; } .our-experts .expert-box img { width: 100%; } .expert-overflow{ background-color: rgba(1, 191, 134, 0.8); position: absolute; width: 100%; height: 100%; bottom: -100%; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.6s ease-in-out; } .expert-box{ position: relative; overflow: hidden; } .expert-overflow .list-inline > li { display: inline-block; padding-left: 2px; padding-right: 2px; } .our-experts .expert-box:hover .expert-overflow{ bottom: 0; } .expert-overflow i { border: 1px solid #ffffff; color: #ffffff; cursor: pointer; font-size: 13px; height: 40px; padding-top: 13px; width: 40px; border-radius: 50%; } .expert-overflow i:hover{ background-color: #496174; border-color: transparent; } .expert-overflow .list-inline{ margin: 0; } .expert-box .name-plate{ background-color: #ffffff; display: inline-block; width: 100%; position: relative; padding: 10px 10px 20px; z-index: 1000; } h3.expert-name { display: block; font-size: 18px; font-weight: 800; letter-spacing: 0; line-height: 0; margin-bottom: 14px; margin-top: 20px; text-transform: uppercase; } strong.expert-tag{ font-weight: 400; font-style: italic; font-size: 13px; } /*===== talk about us ====*/ .talk-about-us{ padding-bottom: 110px; padding-top: 100px; } .talk-about-us strong{ color: #01BF86; font-weight: 600; font-style: italic; } .talk-about-us .item > img{ width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; border: 2px solid #ccc; margin-bottom: 10px; } .talk-about-us .item > p{ max-width: 650px; margin: 0 auto; line-height: 1.9; margin-bottom: 20px; } .talk-about-us .carousel-indicators > li { background-color: #dcdcdc; border: 0 none; height: 10px; margin: 1px; width: 10px; border-radius: 0; margin: 0 5px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .talk-about-us .carousel-indicators li.active { background-color: #01BF86; } .talk-about-us .carousel-indicators { bottom: -70px; } /*===== our client ====*/ .support{ background: #01BF86; padding: 40px 0; } .support .media-left, .media > .pull-left > i{ font-size: 40px; color: #ffffff; } .support .media-left, .media > .pull-left { padding-right: 20px; } .support .media-body{ border-left: 1px solid #fff; padding-left: 20px; } .support h3 { color: #fff; display: block; font-size: 17px; font-weight: 800; line-height: 1; margin-bottom: 5px; margin-top: 7px; text-transform: uppercase; } .support p { color: #eee; font-size: 13px; font-weight: 600; } /*===== contact ====*/ .contact{ padding-top: 90px; } .contact .section-title{ margin-bottom: 30px; } .contact .border{ margin-bottom: 45px; } .contact .form-group{ margin-bottom: 22px; } .contact .form-control { background-color: transparent; background-image: none; border-radius: 0; box-shadow: none; color: #555; font-size: 13px; height: 45px; padding: 10px 15px; width: 100%; } .contact .btn{ margin-top: 20px; } .contact .textarea { min-height: 178px; width: 100% ; } .social-links { margin-bottom: 10px; margin-left: 0; margin-top: 15px; } .social-links .fa { color: #01bf86 ; cursor: pointer; height: 40px; padding-top: 13px; text-align: center; width: 40px; border: 1px solid #01bf86 ; } .social-links .fa:hover{ color: #ffffff; background-color: #496174; border-color: transparent; } /*===== footer ====*/ .footer{ background-color: #333; padding: 5px 0; } .footer p a{ color: #01bf86; text-decoration: none; } .footer p{ color: #707070; color: #aaa; line-height: 2.5; font-size: 12px; margin-bottom: 0px } .footer span i.lnr { background-color: #01BF86; color: #fff; cursor: pointer; float: right; font-size: 16px; height: 30px; margin-top: 0; padding: 7px; width: 30px; }