html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
font-family: 'Rubik', system-ui, -apple-system, sans-serif;
}
.theme-overlay[data-overlay-dark]:before {
background: #4e54c8;
background: -webkit-linear-gradient(-45deg, #4e54c8, #8089ff);
background: -moz-linear-gradient(-45deg, #4e54c8, #8089ff);
background: -o-linear-gradient(-45deg, #4e54c8, #8089ff);
background: linear-gradient(-45deg, #263238, #49c2bf) ;
}
.text-theme-color {
color: #4e54c8
}
.text-content-big p {
font-weight: 400;
line-height: 200%;
margin-bottom: 25px;
font-size: 15px
}
.shadow-primary {
-webkit-box-shadow: 0 20px 40px rgba(0,0,0,0.2);
box-shadow: 0 20px 40px rgba(0,0,0,0.2)
}
[data-overlay-dark], [data-overlay-light] {
position: relative
}
[data-overlay-dark] .position-unset, [data-overlay-light] .position-unset {
position: unset !important
}
[data-overlay-dark] .container, [data-overlay-light] .container {
position: relative;
z-index: 2
}
[data-overlay-dark]:before, [data-overlay-light]:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1
}
[data-overlay-dark]:before {
background: #000
}
[data-overlay-light]:before {
background: #fff
}
[data-overlay-dark="0"]:before, [data-overlay-light="0"]:before {
opacity: 0
}
[data-overlay-dark="1"]:before, [data-overlay-light="1"]:before {
opacity: 0.1
}
[data-overlay-dark="2"]:before, [data-overlay-light="2"]:before {
opacity: 0.2
}
[data-overlay-dark="3"]:before, [data-overlay-light="3"]:before {
opacity: 0.3
}
[data-overlay-dark="4"]:before, [data-overlay-light="4"]:before {
opacity: 0.4
}
[data-overlay-dark="5"]:before, [data-overlay-light="5"]:before {
opacity: 0.5
}
[data-overlay-dark="6"]:before, [data-overlay-light="6"]:before {
opacity: 0.6
}
[data-overlay-dark="7"]:before, [data-overlay-light="7"]:before {
opacity: 0.7
}
[data-overlay-dark="8"]:before, [data-overlay-light="8"]:before {
opacity: 0.8
}
[data-overlay-dark="9"]:before, [data-overlay-light="9"]:before {
opacity: 0.9
}
[data-overlay-dark="10"]:before, [data-overlay-light="10"]:before {
opacity: 1
}
.parallax {
position: relative;
background-size: cover;
overflow: hidden;
background-attachment: fixed
}
.fix-background {
position: relative;
background-size: cover;
animation-duration: 0s;
animation-fill-mode: none;
-webkit-animation-duration: 0s;
-webkit-animation-fill-mode: none;
-moz-animation-duration: 0s;
-moz-animation-fill-mode: none;
-ms-animation-duration: 0s;
-ms-animation-fill-mode: none;
-o-animation-fill-mode: none;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed
}
.cover-background {
position: relative !important;
background-size: cover !important;
overflow: hidden !important;
background-position: center !important;
background-repeat: no-repeat !important
}
.background-size-inherit {
background-size: inherit
}
.background-attachment-inherit {
background-attachment: inherit
}
.background-position-left {
background-position: left center
}
.background-position-left-bottom {
background-position: left bottom
}
.background-position-right {
background-position: right center
}
.background-position-top {
background-position: center top !important
}
.up-down-ani {
display: table;
position: relative;
-webkit-animation-name: up-down-animation;
-webkit-animation-duration: .7s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: .7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-name: up-down-animation;
-moz-animation-duration: .7s;
-moz-animation-timing-function: linear;
-moz-animation-delay: .7s;
-moz-animation-iteration-count: infinite;
-ms-animation-name: up-down-animation;
-ms-animation-duration: .7s;
-ms-animation-timing-function: linear;
-ms-animation-delay: .7s;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: alternate;
-o-animation-direction: alternate;
-o-animation-name: up-down-animation;
-o-animation-duration: .7s;
-o-animation-timing-function: linear;
-o-animation-delay: .7s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
animation-direction: alternate;
animation-name: up-down-animation;
animation-duration: .7s;
animation-timing-function: linear;
animation-delay: .7s;
animation-iteration-count: infinite;
animation-direction: alternate;
margin: 0 auto
}
.background-position-x-50 {
background-position-x: 50% !important
}
.background-size-contain {
background-size: contain
}
.main-banner-area {
overflow: hidden;
position: relative
}
.main-banner-area:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: none;
z-index: 3
}
.main-banner-area .right-bg {
float: right;
width: 55.5%;
right: 1px;
overflow: hidden;
position: relative;
z-index: 1
}
.main-banner-area .right-bg:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
opacity: 0.8;
background: #4e54c8;
background: -webkit-linear-gradient(-45deg, #4e54c8, #8089ff);
background: -moz-linear-gradient(-45deg, #4e54c8, #8089ff);
background: -o-linear-gradient(-45deg, #4e54c8, #8089ff);
background: linear-gradient(-45deg, #4e54c8, #8089ff)
}
.main-banner-area .header-shape-bg {
position: absolute;
top: 0px;
min-height: 500px;
z-index: 2;
width: 100%
}
.main-banner-area .header-text {
position: absolute;
width: 100%;
top: 50%;
transform: perspective(1px) translateY(-50%);
z-index: 4
}
.main-banner-area .header-text h1 {
font-weight: 700;
font-size: 36px;
color: #4e54c8;
line-height: 44px;
letter-spacing: 1.4px;
margin-bottom: 25px
}
.main-banner-area .header-text p {
font-weight: 400;
font-size: 16px;
line-height: 28px;
letter-spacing: 1px;
margin-bottom: 30px
}
.main-banner-area .header-text .email-box {
width: 85%;
position: relative;
background: none;
overflow: hidden
}
.main-banner-area .header-text .email-box input {
width: 99%;
height: 45px;
margin-bottom: 7px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
border: 1px solid rgba(78,78,84,0.2);
outline: none;
padding-left: 20px;
padding-right: 120px;
z-index: 1;
font-weight: 500;
font-size: 12px;
letter-spacing: 0.67px
}
.main-banner-area .header-text .email-box .butn {
position: absolute;
top: 0;
right: 0px;
z-index: 2;
font-weight: 700;
font-size: 12px;
line-height: 20px;
color: #fff;
outline: none;
cursor: pointer;
padding: 13px 18px;
border-top-left-radius: 0;
box-shadow: none;
border-bottom-left-radius: 0
}
.main-banner-area .header-text .email-box .butn:hover:before, .main-banner-area .header-text .email-box .butn:focus:before {
padding: 14px 18px 14px 18px;
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.main-banner-area .header-text .email-box .input .butn:active:before {
padding: 14px 18px 14px 18px;
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.main-banner-area .header-text .email-box span {
display: block;
font-size: 13px;
padding-left: 5px
}
.main-banner-area .play-button-wrapper {
position: absolute;
width: 100%;
top: 45%;
transform: perspective(1px) translateY(-45%);
z-index: 4;
width: 55.5%;
right: 0px
}
.main-banner-area .play-button-wrapper .btn-play {
width: 60px;
height: 60px;
line-height: 56px;
text-align: center;
font-size: 22px;
color: #fff;
margin: auto;
left: 14%;
right: 0px;
display: block;
border: 2px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
transform: perspective(1px) translateY(-50%);
z-index: 3
}
.main-banner-area .play-button-wrapper .btn-play:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: #fff;
opacity: .19;
z-index: 1
}
.main-banner-area .play-button-wrapper .btn-play i {
padding-left: 5px;
position: relative;
z-index: 2
}
@media screen and (max-width: 1199px) {
.main-banner-area .right-bg {
right: 0
}
.main-banner-area .header-text {
top: 70%;
transform: perspective(1px) translateY(-70%)
}
.main-banner-area .header-text h1 {
font-size: 32px;
line-height: 42px
}
.main-banner-area .header-text .email-box {
width: 100%
}
}
@media screen and (max-width: 991px) {
.main-banner-area .right-bg {
width: 100%;
max-height: 550px;
height: 100%;
min-height: 410px
}
.main-banner-area .right-bg:before {
opacity: 0.8
}
.main-banner-area .header-shape-bg {
display: none
}
.main-banner-area .header-text {
top: 50%;
transform: perspective(1px) translateY(-50%)
}
.main-banner-area .header-text h1 {
font-weight: 600;
font-size: 26px;
line-height: 34px;
margin-bottom: 10px;
color: #fff;
text-align: center
}
.main-banner-area .header-text p {
color: #fff;
text-align: center;
margin-bottom: 20px;
line-height: 24px;
font-size: 14px
}
.main-banner-area .header-text .email-box {
width: 100%
}
.main-banner-area .header-text .email-box span {
color: #fff;
text-align: center
}
.main-banner-area .play-button-wrapper {
display: none
}
}
@media screen and (max-width: 767px) {
.main-banner-area .right-bg img {
width: auto;
max-width: 144%
}
.main-banner-area .header-text h1 {
font-size: 24px;
line-height: 30px
}
}
.banner-area {
background: #f5fafe
}
.banner-area .banner-img img {
position: absolute;
left: 0;
top: 23%
}
.banner-area .header-text {
margin-top: 40%;
padding-bottom: 10%
}
.banner-area .btn-play {
width: 50px;
height: 50px;
line-height: 46px;
text-align: center;
font-size: 18px;
color: #4e54c8;
margin: auto;
display: inline-block;
border: 2px solid #4e54c8;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
position: relative;
z-index: 3
}
.banner-area .btn-play:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: #fff;
opacity: .19;
z-index: 1
}
.banner-area .btn-play i {
padding-left: 5px;
position: relative;
z-index: 2
}
@media screen and (max-width: 991px) {
.banner-area .header-text {
margin: 0;
padding: 50px 0px
}
.banner-area .banner-img img {
position: relative;
width: auto;
float: none !important
}
}
@media screen and (max-width: 767px) {
.banner-area .btn-play {
width: 40px;
height: 40px;
line-height: 36px;
font-size: 16px
}
}
.banner-creative {
background: #f5fafe;
padding: 15% 0
}
.banner-creative .banner-img img {
position: absolute;
top: -96%
}
.banner-creative .btn-play {
width: 50px;
height: 50px;
line-height: 46px;
text-align: center;
font-size: 18px;
color: #fff;
margin: auto;
display: inline-block;
border: 2px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
position: relative;
z-index: 3
}
.banner-creative .btn-play:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: #fff;
opacity: .19;
z-index: 1
}
.banner-creative .btn-play i {
padding-left: 5px;
position: relative;
z-index: 2
}
.header-shape {
margin-top: -3.9%;
z-index: 9;
position: relative;
}
@media screen and (max-width: 1199px) {
.banner-creative .banner-img img {
top: -18%
}
}
@media screen and (max-width: 991px) {
.banner-creative {
padding: 50px 0 50px 0
}
.banner-creative .banner-img img {
position: relative;
width: auto;
float: none !important;
left: 0
}
}
@media screen and (max-width: 767px) {
.banner-creative {
padding: 30px 0
}
.banner-creative .btn-play {
width: 40px;
height: 40px;
line-height: 36px;
font-size: 16px
}
}
.section-gap-full {
padding: 120px 0;
}
/* =================================== */
/* Portfolio Styles
/* =================================== */
.portfolio-section .single-portfolio {
margin-bottom: 30px;
text-align: center;
overflow: hidden;
position: relative;
border-radius: 3px;
}
.portfolio-section .single-portfolio {
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
width: 100%;
}
.portfolio-section .single-portfolio .box-content {
width: 100%;
padding: 40px 0;
background: rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 0px;
opacity: 0;
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.portfolio-section .single-portfolio:hover .box-content {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.portfolio-section .single-portfolio:hover {
-webkit-transform: translateY(-8px);
-ms-transform: stranslateY(-8px);
transform: translateY(-8px);
}
.portfolio-section .single-portfolio .box-content .title {
font-size: 20px;
font-weight: 600;
color: #fff;
margin: 0 0 5px 0;
}
.portfolio-section .single-portfolio .box-content .post {
display: inline-block;
font-size: 15px;
color: #fff;
text-transform: capitalize;
}
.portfolio-section .primary-btn {
margin-top: 20px;
}
.google-maps iframe {
position: relative;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}