/*================
Template Name: AgencyCo Digital Agency and Marketing
Description: AgencyCo is digital agency and marketing template.
Version: 1.0
Author: https://themeforest.net/user/themetags
=======================*/
/*TABLE OF CONTENTS*/
/*=====================
01. RESET CSS
02. BASE TYPOGRAPHY
03. PRE DEFINE CLASS CSS
04. HEADER CSS
05. HERO SECTION CSS
06. PAGE HEADER CSS
07. PROMO SECTION CSS
08. ABOUT US CSS
09. FEATURE SECTION CSS
10. VIDEO PROMO CSS
11. COUNTER CSS
12. PRICING CSS
13. TESTIMONIAL CSS
14. CONTACT FORM CSS
15. FOOTER CSS
=======================*/
/* -----------------------------------------
01. RESET CSS
-------------------------------------------- */
/* 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;
}
html{
overflow-y: scroll;
font-size: 15px;
}
/* -----------------------------------------
02. BASE TYPOGRAPHY
-------------------------------------------- */
body, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, .btn, .btn-simple, a, .td-name, td {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
background-color: #ffffff;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
color: #707070;
font-weight: 400;
line-height: 1.75;
}
p:not(:last-child) {
margin-bottom: 1.25em;
}
h1, h2, h3, h4, h5 {
margin: 0 0 1rem;
font-family: 'Comfortaa', sans-serif;
font-weight: 600;
line-height: 1.21;
color: initial;
}
h1 {
margin-top: 0;
font-size: 3.052em;
font-weight: 900;
}
h2 {
font-size: 2.441em;
}
h3 {
font-size: 1.953em;
}
h4 {
font-size: 1.563em;
}
h5 {
font-size: 1.25em;
}
small, .text_small {
font-size: 0.8em;
}
strong, b{
font-weight: 600;
font-family: 'Comfortaa', sans-serif;
}
/*========================================
03. PRE DEFINE CLASS CSS
==========================================*/
.ptb-100{
padding: 100px 0;
}
.pt-100{
padding-top: 100px;
}
.pb-100{
padding-bottom: 100px;
}
.mt--120{
margin-top: -120px;
}
.gray-light-bg{
background: #f5f5f5;
}
.primary-bg{
background: #00438b;
}
.secondary-bg{
background: #f70;
}
.color-primary{
color: #00438b;
}
.color-secondary{
color: #f70
}
.white-bg{
background: #ffffff;
}
a {
color: #00438b;
}
a:hover {
color: #f70;
text-decoration: none;
}
.bg-color-1{
background: #399fb6;
}
.bg-color-2{
background: #0ba077;
}
.bg-color-3{
background: #6582ed;
}
.bg-color-4{
background: #399fb6;
}
.icon-color-1{
background: #efdff7;
color: #b17cc6;
}
.icon-color-2{
background-color: #c6e6fd;
color: #63b0e3;
}
.icon-color-3{
background-color: #efe3e3;
color: #ed7265;
}
.icon-color-4{
background-color: #ddedea;
color: #45d7ba;
}
.icon-color-5{
background-color: #ffe0e3;
color: #bd2130;
}
.icon-color-6{
background-color: #e2e8ff;
color: #6582ed;
}
.outline-btn, .solid-btn, .primary-solid-btn, .primary-outline-btn{
padding: .75rem 1.85rem;
font-family: 'Comfortaa', sans-serif;
font-size: 14px;
font-weight: 600;
transition: all .25s ease-in-out;
}
.primary-solid-btn{
border-color: #00438b;
background: #00438b;
color: #ffffff;
}
.primary-solid-btn:hover{
background: transparent;
color: #081d43;
border-color: #081d43;
}
.solid-btn{
background: #f70;
color: #ffffff;
border-color: #f70;
}
.solid-btn:hover{
background: #ff8657;
border-color: #ff8657;
color: #ffffff;
}
.primary-outline-btn {
position: relative;
display: inline-block;
color: #00438b;
border: 1px solid #00438b;
}
.primary-outline-btn:hover {
color: #ffffff;
background: #00438b;
}
.outline-btn{
border-color: #0062cc;
color: #fff;
background: rgba(0, 98, 204, 0.51);
}
.outline-btn:hover{
background: #ffffff;
color: #00438b;
border-color: #ffffff;
}
.primary-bg h1, .primary-bg p{
color: #fff;
}
.ratting-color{
color: #ff743e;
}
/*form field css*/
.form-control{
border-color: #ebebeb;
padding: .675rem 0.85rem;
}
.form-control:focus{
outline: none;
box-shadow: none;
}
input[type]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder,
select.form-control.has-value{
color: #9a9a9a !important;
font-size: 14px;
}
input[type]:-moz-placeholder,
textarea:-moz-placeholder,
select:-moz-placeholder,
select.form-control.has-value{
/* Firefox 18- */
color: #9a9a9a;
font-size: 14px;
}
input[type]::-moz-placeholder,
textarea::-moz-placeholder,
select::-moz-placeholder,
select.form-control.has-value{
/* Firefox 19+ */
color: #9a9a9a;
font-size: 14px;
}
input[type]:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder,
select.form-control.has-value{
color: #9a9a9a;
font-size: 14px;
}
.form-control {
border-color: #ebebeb;
padding: .75rem 0.85rem;
height: calc(2.356em + .75rem + 2px);
}
/*icon size*/
.icon-sm {
font-size: 30px;
line-height: 30px;
}
.icon-md {
font-size: 40px;
line-height: 40px;
}
.icon-lg {
font-size: 50px;
line-height: 50px;
}
/*=========================================
04. HEADER CSS
============================================*/
.main-menu{
position: inherit;
top: inherit;
left: inherit;
right: inherit;
width: auto;
height: auto;
transition: all .3s ease-in-out;
}
.main-menu ul{
text-align: left;
padding: 0;
margin: 0;
}
.main-menu ul li{
padding: 16px 0;
}
.main-menu ul>li a{
margin: 0 0 0 20px;
font-size: 14px;
color: #363232;
display: block;
font-weight: 400;
background-color: transparent;
border-radius: 0;
padding: 0;
}
.main-menu ul>li .submenu{
width: 250px;
background-color: #ffffff;
border: 1px solid #ebebeb;
border-radius: 4px;
position: absolute;
top: 55px;
left: -4.2em;
right: 0;
visibility: hidden;
opacity: 0;
transition: all .3s ease-in-out;
transform: rotateX(-90deg) rotateY(0);
transform-origin: 0 0;
}
.main-menu ul>li .submenu.dropdown-menu{
margin: 0;
padding: 0;
}
.main-menu ul>li:hover .submenu{
visibility: visible;
opacity: 1;
transform: rotateX(0) rotateY(0);
}
.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown>.dropdown-toggle:active {
pointer-events: none;
}
.main-menu ul>li .submenu>a {
padding: 0;
display: block;
}
.main-menu ul>li .submenu> a{
padding: 8px 15px;
margin: 0;
color: #363232;
}
.main-menu ul>li .submenu> a:hover{
background: #ebebeb;
}
.main-menu ul>li .submenu> a:active{
background: inherit;
}
.main-menu ul>li .submenu:before,
.main-menu ul>li .submenu:after{
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border: 12px solid transparent;
border-bottom: 12px solid #f4f7fa;
top: -25px;
left: calc(50% - 12px);
}
.main-menu ul li.dropdown .dropdown-toggle::after{
position: relative;
top: 2px;
}
.navbar-brand{
font-size: inherit;
height: auto;
padding: 20;
margin-bottom: -8px;
}
.navbar-toggler{
background: transparent;
padding: .5rem .75rem;
font-size: inherit;
transition: all .3s ease-in-out;
}
.navbar-toggler span{
color: #ffffff;
opacity: 0.8;
font-size: 17px;
}
.navbar-toggler:focus, .navbar-toggler:hover{
outline: none;
opacity: 1;
}
.custom-nav ul li a{
color: #fafafa;
}
.affix {
background-color: #00438b;
-webkit-transition:padding 0.2s ease-out;
-moz-transition:padding 0.2s ease-out;
-o-transition:padding 0.2s ease-out;
transition:padding 0.2s ease-out;
}
.white-bg.affix, .custom-nav.affix{
background: #ffffff;
border-bottom: 1px solid #ebebeb;
}
.white-bg.custom-nav ul li a, .custom-nav ul li a{
color: #081d43 !important;
}
.white-bg.custom-nav ul li a:hover, .custom-nav ul li a:hover{
color: #00438b!important;
}
.bg-transparent ul li a{
color: #ffffff;
opacity: 0.8;
}
.bg-transparent ul li a:hover{
opacity: 1;
}
.bg-transparent.affix{
background: rgba(0, 67, 139, 0.95) !important;
}
.navbar{
padding: 0.12rem 1rem;
transition: all .3s ease-in-out;
}
@media (min-width: 320px) and (max-width: 992px){
.navbar{
background: #00438b !important;
padding: .95rem 1rem;
}
.white-bg.affix, .custom-nav.affix, .navbar.white-bg{
background: #ffffff !important;
border-bottom: 1px solid #ebebeb;
}
.white-bg.custom-nav ul li a, .custom-nav ul li a{
color: #081d43 !important;
}
.white-bg.navbar .navbar-toggler span{
color: #00438b;
}
.main-menu ul>li .submenu{
left: 0;
top: 10px;
position: relative;
}
.main-menu ul li{
padding: 15px 0 0;
}
.main-menu ul>li a{
margin: 0;
}
.main-menu ul>li .submenu:before, .main-menu ul>li .submenu:after{
left: 15px;
}
.ptb-100{
padding: 55px 0;
}
.pt-100{
padding-top: 55px;
}
.pb-100{
padding-bottom: 55px;
}
}
@media (min-width: 992px){
.navbar{
border-bottom: 1px solid rgba(0, 0, 0, 0);
background: transparent;
-o-transition: border-bottom .3s ease-in-out,background .3s ease-in-out,padding .3s ease-in-out;
-webkit-transition: border-bottom .3s ease-in-out,background .3s ease-in-out,padding .3s ease-in-out;
-moz-transition: border-bottom .3s ease-in-out,background .3s ease-in-out,padding .3s ease-in-out;
transition: border-bottom .3s ease-in-out,background .3s ease-in-out,padding .3s ease-in-out;
-webkit-backface-visibility: hidden;
}
}
/*=========================================
05. HERO SECTION CSS
============================================*/
@media (min-width: 992px){
.hero-animation-img {
position: relative;
display: block;
width: 100%;
}
.animation-one {
-webkit-animation: move-one 7s ease-in-out infinite;
animation: move-one 7s ease-in-out infinite;
}
@keyframes move-one {
0% {
-webkit-transform: translateX(0) translateY(5px);
transform: translateX(0) translateY(5px)
}
50% {
-webkit-transform: translateX(0) translateY(-5px);
transform: translateX(0) translateY(-5px)
}
100% {
-webkit-transform: translateX(0) translateY(5px);
transform: translateX(0) translateY(5px)
}
}
@-webkit-keyframes move-one {
0% {
-webkit-transform: translateX(0) translateY(5px);
transform: translateX(0) translateY(5px)
}
50% {
-webkit-transform: translateX(0) translateY(-5px);
transform: translateX(0) translateY(-5px)
}
100% {
-webkit-transform: translateX(0) translateY(5px);
transform: translateX(0) translateY(5px)
}
}
.animation-two {
position: absolute;
bottom: -10px;
-webkit-animation: move-two 8s ease-in-out infinite;
animation: move-two 8s ease-in-out infinite;
}
@-webkit-keyframes move-two {
0% {
-webkit-transform: translateX(-25px) translateY(-225px);
transform: translateX(-25px) translateY(-225px)
}
50% {
-webkit-transform: translateX(-25px) translateY(-205px);
transform: translateX(-25px) translateY(-205px)
}
100% {
-webkit-transform: translateX(-25px) translateY(-225px);
transform: translateX(-25px) translateY(-225px)
}
}
@keyframes move-two {
0% {
-webkit-transform: translateX(-25px) translateY(-225px);
transform: translateX(-25px) translateY(-225px)
}
50% {
-webkit-transform: translateX(-25px) translateY(-205px);
transform: translateX(-25px) translateY(-205px)
}
100% {
-webkit-transform: translateX(-25px) translateY(-225px);
transform: translateX(-25px) translateY(-225px)
}
}
.animation-three {
position: absolute;
-webkit-animation: move-three 9s ease-in-out infinite;
animation: move-three 9s ease-in-out infinite
}
@-webkit-keyframes move-three {
0% {
-webkit-transform: translateX(-45px) translateY(-225px);
transform: translateX(-45px) translateY(-225px)
}
50% {
-webkit-transform: translateX(-45px) translateY(-205px);
transform: translateX(-45px) translateY(-205px)
}
100% {
-webkit-transform: translateX(-45px) translateY(-225px);
transform: translateX(-45px) translateY(-225px)
}
}
@keyframes move-three {
0% {
-webkit-transform: translateX(-45px) translateY(-225px);
transform: translateX(-45px) translateY(-225px)
}
50% {
-webkit-transform: translateX(-45px) translateY(-205px);
transform: translateX(-45px) translateY(-205px)
}
100% {
-webkit-transform: translateX(-45px) translateY(-225px);
transform: translateX(-45px) translateY(-225px)
}
}
.animation-four {
position: absolute;
-webkit-animation: move-four 6s ease-in-out infinite;
animation: move-four 6s ease-in-out infinite
}
.animation-new{
position: absolute;
bottom: 10px;
}
@-webkit-keyframes move-four {
0% {
-webkit-transform: translateX(330px) translateY(-215px);
transform: translateX(330px) translateY(-215px)
}
50% {
-webkit-transform: translateX(330px) translateY(-240px);
transform: translateX(330px) translateY(-240px)
}
100% {
-webkit-transform: translateX(330px) translateY(-215px);
transform: translateX(330px) translateY(-215px)
}
}
@keyframes move-four {
0% {
-webkit-transform: translateX(330px) translateY(-215px);
transform: translateX(330px) translateY(-215px)
}
50% {
-webkit-transform: translateX(330px) translateY(-240px);
transform: translateX(330px) translateY(-240px)
}
100% {
-webkit-transform: translateX(330px) translateY(-215px);
transform: translateX(330px) translateY(-215px)
}
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.animation-four, .animation-new{
display: none !important;
}
}
.hero-content-left, .sign-up-form-wrap{
z-index: 2;
}
.bottom-img{
position: relative;
bottom: -10px;
width: 100%;
}
.bottom-img img{
width: 100%;
}
.shape-bg{
bottom: -8px;
}
.section-shape{
bottom: -8px;
left: 0;
right: 0;
}
.section-shape img{
width: 100%;
}
.hero-7{
width: 100%;
position: relative;
}
.hero-7:after {
content: ' ';
background-image: url("../img/hero-bg-2.jpg");
background-size: cover;
background-position: center center;
position: absolute;
width: 100%;
border-radius: 0;
transform: skewY(-5deg);
top: -180px;
right: 0;
bottom: 140px;
z-index: -1;
}
.hero-7:before{
position: absolute;
content: '';
background: rgba(0, 67, 139, 0.85);
width: 100%;
height: 100%;
left: 0;
transform: skewY(-5deg);
top: -140px;
right: 0;
bottom: -50px;
}
/*dot indicator css*/
.dot-indicator-center .owl-dots {
position: absolute;
width: 100%;
margin-top: 0 !important;
bottom: 15px;
}
.dot-indicator-center.owl-theme .owl-dots .owl-dot span {
width: 30px;
height: 5px;
}
.dot-indicator-center.owl-theme .owl-dots .owl-dot.active span, .dot-indicator-center.owl-theme .owl-dots .owl-dot:hover span {
background: #00438b;
}
.dot-indicator-center.owl-theme .owl-dots button.owl-dot:focus {
outline: none !important;
}
/*custom dot style*/
.custom-dot.owl-theme .owl-dots, .custom-arrow.owl-theme .owl-nav{
position: absolute;
}
.custom-dot.dot-right-center.owl-theme .owl-dots{
margin: 0 !important;
top: 40%;
right: 10%;
}
.custom-dot.dot-bottom-center.owl-theme .owl-dots{
width: 100%;
margin: 10px auto;
}
.custom-dot.dot-bottom-center.owl-theme .owl-dots button{
margin: 0 4px;
border: 1px dashed #00438b;
}
.custom-dot.dot-right-center.owl-theme .owl-dots button{
display: block;
border: 1px dashed #ebebeb;
margin: 6px 0;
}
.custom-dot.custom-dot-2.owl-theme .owl-dots button{
margin: 0 4px;
border: 1px dashed #ebebeb;
}
.custom-dot.custom-dot-2.owl-theme .owl-dots{
right: 15px;
top: auto;
bottom: -10%;
}
.custom-dot.owl-theme .owl-dots button{
border-radius: 100%;
border: 1px dashed #00438b;
margin: 0 4px;
}
.custom-dot.owl-theme .owl-dots button:focus, .custom-arrow.owl-theme .owl-nav button:focus{
outline: none;
}
.custom-dot.owl-theme .owl-dots button.owl-dot.active, .custom-dot.owl-theme .owl-dots button.owl-dot span{
background: #ffffff;
}
.custom-dot.owl-theme .owl-dots button.owl-dot span:hover{
background: #ff8657;
}
.custom-dot.owl-theme .owl-dots button.owl-dot.active span{
background: #ff8657;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);
}
.custom-dot.owl-theme .owl-dots .owl-dot span{
margin: 2px;
}
/*custom arrow*/
.custom-arrow.owl-theme .owl-nav button{
width: 30px;
background: transparent;
border: 1px dashed #ebebeb;
line-height: 26px;
}
.custom-arrow.owl-theme .owl-nav button:hover{
background: #ff8657;
border-color: #ff8657;
}
.custom-arrow.owl-theme .owl-nav button:hover span{
color: #ffffff;
}
.custom-arrow.owl-theme .owl-nav button span{
font-size: 25px;
color: #ff8657;
}
.custom-arrow-bottom-center.owl-theme .owl-nav{
width: 100%;
margin: auto;
margin-top: 8px;
}
.custom-arrow-left-right.owl-theme .owl-nav{
width: 100%;
top: 25%;
}
.custom-arrow-left-right.owl-theme .owl-nav button.owl-prev, .custom-arrow-left-right.owl-theme .owl-nav button.owl-next{
position: absolute;
}
.custom-arrow-left-right.owl-theme .owl-nav button.owl-prev{
left: -35px;
}
.custom-arrow-left-right.owl-theme .owl-nav button.owl-next{
right: -35px;
}
/*=========================================
06. PAGE HEADER CSS
============================================*/
.page-header-content .breadcrumb{
background: none;
margin: 0 0 8px 2px;
padding: 0;
position: relative;
z-index: 1;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.page-header-content .breadcrumb > li {
display: inline-block;
text-shadow: none;
font-size: 14px;
}
.page-header-content .breadcrumb > li a{
color: inherit;
}
.page-header-content .breadcrumb > li + li:before {
color: inherit;
opacity: 0.5;
font-family: 'themify';
content: "\e649";
padding: 0 7px 0 5px;
font-size: 10px;
}
/*=========================================
07. PROMO SECTION CSS
============================================*/
.single-promo{
display: block;
overflow: hidden;
}
.single-promo span{
font-size: 45px;
line-height: 50px;
margin-bottom: 20px;
display: inline-block;
}
.single-promo-1{
box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.12);
border-radius: 1.5rem !important;
}
.single-promo-1 span{
font-size: 35px;
line-height: initial;
background: #00438b;
padding: 20px;
border-radius: 50%;
}
.single-promo img{
display: block;
}
.promo-info{
padding: 30px;
}
.single-promo-hover{
transition: all .2s ease-out;
will-change: transform;
}
.single-promo-hover:hover {
transform: translateY(-3px);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12);
border-radius: 6px;
}
/*client section css*/
.client-section-wrap ul{
display: block;
margin: 0 auto;
}
.client-section-wrap ul li{
padding-right: 50px;
margin: 5px 0;
}
.client-section-wrap ul li img{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
transition: all 0.3s ease-in;
}
.client-section-wrap ul li img:hover{
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
filter: none;
-webkit-filter: grayscale(0%);
}
.client-section-wrap ul li:last-child{
padding-right: 0;
}
.single-client {
display: -ms-grid;
display: grid;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-grid-column-align: center;
justify-items: center;
width: 60%;
height: auto;
-webkit-transition: -webkit-transform .5s ease-in;
transition: -webkit-transform .5s ease-in;
transition: transform .5s ease-in;
transition: transform .5s ease-in,-webkit-transform .5s ease-in;
margin: 8px auto;
}
.single-client img {
max-width: 100%;
max-height: 100%;
-webkit-filter: opacity(50%);
/* Safari 6.0 - 9.0 */
filter: opacity(90%);
width: 100%;
}
.single-client:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.single-client:hover .client-img {
-webkit-filter: none;
filter: none;
opacity: 1;
}
/*=========================================
08. ABOUT US CSS
============================================*/
.switchable {
position: relative;
}
.imageblock-section {
position: relative;
padding: 0;
}
.imageblock-section .imageblock-section-img {
position: absolute;
height: 100%;
top: 0;
z-index: 2;
padding: 0;
}
.switchable.switchable-content div[class*='col-']:first-child {
float: right;
right: 0;
left: auto;
}
.switchable > div[class*='col-'] {
padding: 0;
}
.background-image-holder {
position: absolute;
height: 100%;
top: 0;
left: 0;
background-size: cover !important;
background-position: 50% 50% !important;
z-index: 0;
transition: opacity .3s linear;
-webkit-transition: opacity .3s linear;
opacity: 0;
background: #252525;
}
.background-image-holder:not([class*='col-']) {
width: 100%;
}
.switchable div[class*='col-']:first-child {
float: left;
right: auto;
}
@media (max-width: 767px){
.switchable .imageblock-section-img[class*='col-'] {
float: none !important;
}
}
.switchable > div[class*='col-'] {
padding: 0;
}
@media (max-width: 767px){
.imageblock-section .imageblock-section-img {
position: relative;
min-height: 18.57142857em;
}
}
@media (min-width: 768px){
.switchable .container > .row {
flex-flow: row-reverse;
}
.switchable.switchable-content .container > .row {
flex-flow: row;
}
}
.single-card {
width: calc(50% - 25px);
margin-left: 25px;
margin-bottom: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: box-shadow .3s ease-in-out 0s;
box-sizing: border-box;
box-shadow: 0 8px 20px 0 rgba(16,66,97,.07);
padding: 35px 15px;
border-radius: 10px;
float: left;
text-align: center;
}
.single-card:nth-child(2n) {
position: relative;
top: 40px;
}
.single-card h3 {
font-size: 34px;
color: inherit!important;
margin: 0;
line-height: 34px;
font-weight: 700;
position: relative;
}
.single-card span{
font-size: 2.95714286em;
line-height: 1.75125468em;
}
.counter-card{
float: none;
display: block;
overflow: hidden;
width: auto;
margin: auto;
}
.box-animation-1{
animation: animation-1 5s ease-out infinite;
}
.box-animation-2{
animation: animation-2 4s ease-out infinite;
}
.box-animation-3{
animation: animation-3 5s ease-out infinite;
}
.box-animation-4{
animation: animation-4 4s ease-out infinite;
}
@keyframes animation-1 {
50% {
transform: translate(0, 20px);
}
}
@keyframes animation-2 {
50% {
transform: translate(0, 35px);
}
}
@keyframes animation-3 {
50% {
transform: translate(0, 25px);
}
}
@keyframes animation-4 {
50% {
transform: translate(0, 40px);
}
}
@keyframes shrink {
0% {
width: 90%;
margin: 0 5%;
}
50% {
width: 60%;
margin: 0 18%;
}
100% {
width: 90%;
margin: 0 5%;
}
}
/*=========================================
09. FEATURE SECTION CSS
============================================*/
.icon-md{
font-size: 32px;
line-height: 35px;
}
.icon-lg{
font-size: 70px;
line-height: 75px;
}
.single-feature .icon{
font-size: 20px;
line-height: 21px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.single-feature-hover{
z-index: 0;
position: relative;
background: #ffffff;
box-shadow: 0 0 0 1px #ebebeb;
padding: 10px;
box-sizing: border-box;
-webkit-transition: box-shadow 0.3s ease,z-index 0s 0.3s ease,-webkit-transform 0.3s ease;
transition: box-shadow 0.3s ease,z-index 0s 0.3s ease,-webkit-transform 0.3s ease;
transition: box-shadow 0.3s ease,transform 0.3s ease,z-index 0s 0.3s ease;
transition: box-shadow 0.3s ease,transform 0.3s ease,z-index 0s 0.3s ease,-webkit-transform 0.3s ease;
}
.single-feature-hover:hover{
z-index: 1;
box-shadow: 0 8px 50px rgba(0,0,0,0.2);
-webkit-transform: scale(1.05);
transform: scale(1.05);
border-radius: 4px;
-webkit-transition: box-shadow 0.1s ease,z-index 0s 0.1s ease,-webkit-transform 0.1s ease;
transition: box-shadow 0.1s ease,z-index 0s 0.1s ease,-webkit-transform 0.1s ease;
transition: box-shadow 0.1s ease,transform 0.1s ease,z-index 0s 0.1s ease;
transition: box-shadow 0.1s ease,transform 0.1s ease,z-index 0s 0.1s ease,-webkit-transform 0.3s ease;
}
.border{
border-color: #ebebeb;
}
.single-services span{
margin-bottom: 15px;
display: block;
}
.feature-list li {
position: relative;
padding: 0 0 10px 22px;
margin: 0 0 10px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.feature-list li:before{
content: "\e6af";
position: absolute;
top: 1px;
left: 0;
font-family: 'themify';
font-weight: 400;
color: #ff8657;
}
/*services feature css*/
.features-box {
position: relative;
display: block;
}
.features-box-icon {
display: table-cell;
vertical-align: top;
}
.features-box-content {
display: table-cell;
padding-left: 20px;
}
/*=========================================
10. VIDEO PROMO CSS
============================================*/
.background-img{
position: relative;
width: 100%;
display: block;
}
.background-img:before{
position: absolute;
content: '';
background: rgba(0, 67, 139, 0.85);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.video-promo-content{
transition: all 800ms ease-in-out;
}
.video-promo-content a img{
transition: all 800ms ease-in-out;
}
.video-promo-content a img:hover{
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.video-promo-content h5{
color: #ffffff;
}
.video-play-icon {
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
z-index: 4;
display: inline-block;
border: 2px solid #ffffff;
cursor: pointer;
background: #ffffff;
}
.video-play-icon:before{
position: absolute;
top: 50%;
margin-top: -5px;
left: 50%;
margin-left: -4px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 12px;
border-color: transparent transparent transparent #ffffff;
border-color: transparent transparent transparent #00438a;
}
.video-promo-content a:hover{
border-width: 22px;
border-color: #ff8657;
}
.video-promo-content a.video-play-icon{
border-radius: 50%;
display: block;
-webkit-animation: ripple-white 1s linear infinite;
animation: ripple-white 1s linear infinite;
-webkit-transition: .5s
}
@-webkit-keyframes ripple-white {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1)
}
100% {
-webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 30px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 30px rgba(255, 255, 255, 0)
}
}
@keyframes ripple-white {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1)
}
100% {
-webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 30px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 30px rgba(255, 255, 255, 0)
}
}
/*=========================================
11. COUNTER CSS
============================================*/
.counter-wrap{
background: #ffffff;
width: 100%;
display: block;
position: relative;
bottom: -60px;
padding: 30px 0;
border-radius: 6px;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.12);
}
.counter-wrap{
-ms-flex-wrap: wrap;
flex-wrap: wrap;
grid-auto-flow: dense;
display: grid;
grid-template-columns: repeat(auto-fill,minmax(255px,1fr));
}
.counter-wrap li{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
text-align: center;
border-right: 1px solid #ebebeb;
margin: 10px 0 !important;
}
.counter-wrap li:last-child{
border-right: none;
margin-right: 0 !important;
}
.single-counter span{
font-weight: bold;
font-family: 'Comfortaa', sans-serif;
color: #00438b;
font-size: 25px;
line-height: 28px;
}
/*=========================================
12. PRICING CSS
============================================*/
.card.single-pricing-pack {
transition: all 0.2s ease 0s;
box-shadow: 0 0 0 1px #ebebeb;
border-radius: 1rem !important;
border: 2px solid transparent;
}
.card.single-pricing-pack:hover {
z-index: 2;
}
.single-pricing-pack:hover {
box-shadow: 0 1rem 3rem rgba(31, 45, 61, .125) !important;
transform: translate(0, -5px);
border-top: 2px solid #00438b;
}
.single-pricing-pack .card-body {
color: rgb(132, 146, 166);
flex: 1 1 auto;
padding: 1.5rem;
}
.pricing-header {
position: relative;
background: transparent;
}
.pricing-header .price {
font-size: 35px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
color: #00438b;
}
.pricing-header .price span {
font-size: 14px;
margin-left: 4px;
}
.pricing-header::after {
content: "";
display: block;
width: 80%;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -40%;
height: 1px;
background: radial-gradient(at center center, rgb(222, 228, 239) 0px, rgba(255, 255, 255, 0) 75%);
}
.pricing-feature-list li {
font-size: 14px;
line-height: 30px;
}
.pricing-feature-list li span {
font-weight: 700;
font-family: 'Montserrat', sans-serif;
color: #5a5a5a;
font-size: 13px;
}
.popular-price {
box-shadow: 0 1rem 3rem rgba(31, 45, 61, .125) !important;
border: 2px solid #00438b !important;
}
.popular-price:hover {
border-top: 4px solid #00438b !important;
}
/*=========================================
13. TESTIMONIAL CSS
============================================*/
.testimonial-wrap{
border: 1px solid #ebebeb;
border-radius: 4px;
padding: 40px;
margin-bottom: 25px;
}
.testimonial-wrap span.icon{
font-size: 35px;
color: #00438b;
}
.testimonial-wrap blockquote{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
height: 127px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
margin-bottom: 0;
}
.author-info h5{
color: #00438b;
}
.author-img{
width: 3.425rem;
height: 3.425rem;
}
.dot-indicator.owl-theme button.owl-dot span{
display: inline-block;
width: 12px;
height: 12px;
box-sizing: border-box;
background: #d8d8d8;
border-radius: 50%;
-webkit-transform: scale(0.8);
transform: scale(0.8);
transition: 0.3s;
}
.dot-indicator.owl-theme button.owl-dot:focus{
border: none;
outline: none;
}
.dot-indicator.owl-theme button.owl-dot.active span{
background: #ff8657;
border: 2px solid transparent;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.testimonial-single{
display: block;
position: relative;
}
.testimonial-single:after{
content: '';
width: 0;
height: 0;
border-top: 30px solid #f7f7f7;
border-right: 30px solid transparent;
position: absolute;
bottom: -30px;
}
/*owl carousel slider*/
.owl-carousel .owl-item .client-img img{
width: 60px;
display: initial;
}
.client-ratting-list li:not(:last-child){
margin-right: 0;
line-height: 14px;
}
.client-ratting-list li span{
font-size: 12px;
}
/*=========================================
14. CONTACT FORM CSS
============================================*/
.sign-up-form-wrap{
display: block;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);
}
.shadow-lg{
box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}
.list-creative>li+li {
border-top: 1px solid #ebebeb;
}
@media (min-width: 992px){
.list-creative>li {
padding: 30px 0;
}
}
.list-terms-medium {
position: relative;
padding-left: 30px;
}
.list-terms-medium::before {
content: '';
position: absolute;
top: 2px;
left: 0;
bottom: 2px;
width: 4px;
}
.list-terms-medium dt {
letter-spacing: .1em;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
color: #565656;
}
.list-creative .address::before {
background: #ff8657;
}
.list-creative .phone::before {
background: #00438b;
}
.list-creative .email::before {
background: #007bff;
}
.list-terms-medium a,.list-terms-medium p, .list-terms-medium a:active, .list-terms-medium a:focus {
color: #9b9b9b;
text-decoration: none;
}
.list-terms-medium a:hover {
color: #ff8657;
}
.google-map{
height:100%;
margin-bottom: -8px;
}
.google-map iframe{
width:100%;
border:0;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
-webkit-filter: grayscale(99%); /* Chrome 19+ & Safari 6+ */
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
.form-check .form-check-input{
margin-top: 0.1rem;
}
/*our team css*/
.single-team-member .team-info {
background-color: rgba(0, 67, 139, 0.85);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s, visibility 0.3s;
transition: opacity 0.3s, visibility 0.3s;
}
.team-image img{
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
.team-info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.team-info h5 {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
color: inherit;
}
.team-info h6{
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.team-info h5, .team-info h6, .team-info .team-social {
-webkit-transform: translateY(25px);
transform: translateY(25px);
opacity: 0;
-webkit-transition: opacity 0.45s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
transition: opacity 0.45s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.45s cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.45s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
.single-team-member:hover .team-info {
opacity: 1;
visibility: visible;
}
.single-team-member:hover .team-info h6 {
opacity: 1;
}
.single-team-member:hover .team-info h5, .single-team-member:hover .team-info h6, .single-team-member:hover .team-info .team-social {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.team-social li a{
text-decoration: none;
color: inherit;
opacity: 0.8;
}
.team-social li a:hover{
opacity: 1;
}
.team-social li a span{
padding: 6px;
}
/*=========================================
15. FOOTER CSS
============================================*/
.footer-top {
padding: 65px 0;
}
.security-icon-list li{
margin: 0 15px 12px 0;
}
@media (min-width: 320px) and (max-width: 567px) {
.footer-top {
padding: 50px 0;
}
}
.footer-nav-wrap h4 {
font-size: 14px;
margin-bottom: 1.4rem;
font-weight: 700;
}
.footer-nav-wrap ul li a {
font-size: 14px;
line-height: 24px;
padding: 3px 0;
color: inherit;
opacity: 0.8;
}
.footer-nav-wrap ul li a:hover, .copyright-text a:hover, .social-list li a:hover {
opacity: 1;
text-decoration: none;
}
.payment-method ul {
display: inline-flex;
align-items: center;
}
.payment-method ul li img {
max-width: 60px;
}
.payment-method ul li:last-child img {
margin-right: 0;
}
.copyright-text {
font-size: 13px;
}
.social-list li a {
padding: 6px 10px;
}
.footer-nav-list li a span {
font-size: 12px;
vertical-align: middle;
}
.bottom-sticky-footer {
position: absolute;
bottom: 1px;
width: 100%;
height: 55px;
}
.social-nav ul li a{
opacity: 0.8;
transition: all 0.3s ease-in;
}
.tooltip-hover{
position: relative;
}
.tooltip-hover a{
display: block;
}
.tooltip-item{
position: absolute;
background-color: rgb(255, 255, 255);
pointer-events: none;
color: rgb(51, 51, 51);
font-size: 13px;
bottom: 90%;
left: 50%;
opacity: 0;
white-space: nowrap;
visibility: hidden;
z-index: 999;
box-shadow: rgba(0, 0, 0, 0.2) 0 4px 15px;
transform: translate3d(-50%, 0px, 0px);
padding: 0.4rem 0.8rem;
border-radius: 3px;
transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
.tooltip-item:after{
content: "";
position: absolute;
width: 0;
height: 0px;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
border-top: 6px solid rgb(255, 255, 255);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.tooltip-hover:hover .tooltip-item{
opacity: 1;
visibility: visible;
bottom: calc(100% + 5px);
}
.get-in-touch-list li{
font-size: 14px;
}
.get-in-touch-list li span{
font-size: 14px;
margin-right: 10px;
}