File: /home/ratbustersflorida/public_html/lp/assets/css/style.scss
/*------------------------------------------------------------------
[Table of contents]
@File: Aila Template Style
[ DEFULT INDEX NUMBER ]
1. Defult css with Helper css
-- Before this comment ( START MAIN CSS STYLE ) defult css continue .
2. Preloader
3. Navbar
4. Header
................
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Typography]
[ This template has one font typography ]
Typography 1: 'Arimo', sans-serif Font;
-------------------------------------------------------------------*/
// Google font
// Arimo font
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,700;1,400;1,700&display=swap');
// color variable
$navy-blue: #0b2154;
$navy-blue2: #1a1153;
$violet: #78729d;
$orange: #ff7200;
$gray: #606060;
$gradient-orange-dark: #f20f10;
$gradient-orange-light: #ec600d;
$gradient-blue-dark: #0856e6;
$gradient-blue-light: #2f74f4;
@mixin orange-gradient {
background: linear-gradient(90deg, $gradient-orange-dark 0%, $gradient-orange-light 100%);
}
@mixin blue-gradient {
background: linear-gradient(90deg, $gradient-blue-dark 0%, $gradient-blue-light 100%);
}
$box-shadow1: 0px 11px 95.12px 5.88px rgba(196, 196, 196, 0.21);
// default css
body {
margin: 0;
padding: 0;
font-family: 'Arimo', sans-serif;
position: relative;
background-color: #fff;
}
// helper css
.mt-5 {
margin-top: 5px;
}
.mt-10 {
margin-top: 10px;
}
.mt-15 {
margin-top: 15px;
}
.mt-20 {
margin-top: 20px;
}
.mt-25 {
margin-top: 25px;
}
.mt-30 {
margin-top: 30px;
}
.mt-35 {
margin-top: 35px;
}
.mt-40 {
margin-top: 40px;
}
.mt-45 {
margin-top: 45px;
}
.mt-50 {
margin-top: 50px;
}
.mt-55 {
margin-top: 55px;
}
.mt-60 {
margin-top: 60px;
}
.mb-5 {
margin-bottom: 5px;
}
.mb-10 {
margin-bottom: 10px;
}
.mb-15 {
margin-bottom: 15px;
}
.mb-20 {
margin-bottom: 20px;
}
.mb-25 {
margin-bottom: 25px;
}
.mb-30 {
margin-bottom: 30px;
}
.mb-35 {
margin-bottom: 35px;
}
.mb-40 {
margin-bottom: 40px;
}
.mb-45 {
margin-bottom: 45px;
}
.mb-50 {
margin-bottom: 50px;
}
.mr-2 {
margin-right: 2px;
}
.mr-3 {
margin-right: 3px;
}
.mr-10 {
margin-right: 10px;
}
.mr-15 {
margin-right: 15px;
}
.mr-20 {
margin-right: 20px;
}
.mr-25 {
margin-right: 25px;
}
.mr-30 {
margin-right: 30px;
}
.mr-35 {
margin-right: 35px;
}
.mr-40 {
margin-right: 40px;
}
.mb-45 {
margin-bottom: 45px;
}
.mr-50 {
margin-right: 50px;
}
.ml-2 {
margin-left: 2px;
}
.ml-3 {
margin-left: 3px;
}
.ml-10 {
margin-left: 10px;
}
.ml-15 {
margin-left: 15px;
}
.ml-20 {
margin-left: 20px;
}
.ml-25 {
margin-left: 25px;
}
.ml-30 {
margin-left: 30px;
}
.ml-35 {
margin-left: 35px;
}
.ml-40 {
margin-left: 40px;
}
.ml-45 {
margin-left: 45px;
}
.ml-50 {
margin-left: 50px;
}
.mrl-10-neg {
margin-left: -10px;
margin-right: -10px;
}
.pt-10 {
padding-top: 10px;
}
.pt-15 {
padding-top: 15px;
}
.pt-20 {
padding-top: 20px;
}
.pt-25 {
padding-top: 25px;
}
.pt-30 {
padding-top: 30px;
}
.pt-40 {
padding-top: 40px;
}
.pt-50 {
padding-top: 50px;
}
.pt-60 {
padding-top: 60px;
}
.pt-70 {
padding-top: 70px;
}
.pt-80 {
padding-top: 80px;
}
.pt-90 {
padding-top: 90px;
}
.pt-100 {
padding-top: 100px;
}
.pl-5 {
padding-left: 5px;
}
.pl-10 {
padding-left: 10px;
}
.pl-15 {
padding-left: 15px;
}
.pl-20 {
padding-left: 20px;
}
.pl-25 {
padding-left: 25px;
}
.pl-30 {
padding-left: 30px;
}
.pl-35 {
padding-left: 35px;
}
.pl-40 {
padding-left: 40px;
}
.pl-45 {
padding-left: 45px;
}
.pl-50 {
padding-left: 50px;
}
.pl-55 {
padding-left: 55px;
}
.pl-60 {
padding-left: 60px;
}
.pr-5 {
padding-right: 5px;
}
.pr-10 {
padding-right: 10px;
}
.pr-15 {
padding-right: 15px;
}
.pr-20 {
padding-right: 20px;
}
.pr-25 {
padding-right: 25px;
}
.pr-30 {
padding-right: 30px;
}
.pr-35 {
padding-right: 35px;
}
.pr-40 {
padding-right: 40px;
}
.pr-45 {
padding-right: 45px;
}
.pr-50 {
padding-right: 50px;
}
.pr-55 {
padding-right: 55px;
}
.pr-60 {
padding-right: 60px;
}
.pb-5 {
padding-bottom: 5px;
}
.pb-10 {
padding-bottom: 10px;
}
.pb-15 {
padding-bottom: 15px;
}
.pb-20 {
padding-bottom: 20px;
}
.pb-25 {
padding-bottom: 25px;
}
.pb-30 {
padding-bottom: 30px;
}
.pb-35 {
padding-bottom: 35px;
}
.pb-40 {
padding-bottom: 40px;
}
.pb-45 {
padding-bottom: 45px;
}
.pb-50 {
padding-bottom: 50px;
}
.pb-60 {
padding-bottom: 60px;
}
.pb-70 {
padding-bottom: 70px;
}
.pb-80 {
padding-bottom: 80px;
}
.pb-90 {
padding-bottom: 90px;
}
.pb-100 {
padding-bottom: 100px;
}
.p-5 {
padding: 5px;
}
.p-tb-50 {
padding: 50px 0;
}
.p-tb-70 {
padding: 70px 0;
}
.p-tb-80 {
padding: 80px 0;
}
.p-tb-120 {
padding: 120px 0;
}
.p-tb-100 {
padding: 100px 0;
}
.section-mtb-40 {
margin-top: 40px;
margin-bottom: 40px;
display: flex;
}
p {
margin: 0;
color: #5c5c5c;
}
a {
text-decoration: none;
&:hover, &:active {
text-decoration: none;
}
}
ul, ol {
padding: 0;
margin: 0;
li {
list-style: none;
}
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
text-transform: capitalize;
}
label {
margin: 0;
}
.bg-off-white {
background: #f5f7fd;
}
.bg-white {
background: #fff;
}
.fluid-height {
height: calc(100% - 30px);
margin-bottom: 30px;
}
.full-height {
height: 100%;
}
.full-width {
width: 100%;
}
.scale-one-half {
transform: scale(1.5);
}
.scale-one-zero-six {
transform: scale(1.06);
}
.scale-one-zero-one {
transform: scale(1.01);
}
.text-italic {
font-style: italic;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.border-radius-5 {
border-radius: 5px;
}
.img-shadow {
box-shadow: 0px 11px 94.94px 6.06px rgba(188, 188, 188, 0.22);
}
button {
border: 0;
outline: 0;
&:focus, &:active {
border: 0;
outline: 0;
}
}
.btn1 {
padding: 15px 25px;
border-radius: 5px;
background: #fff;
color: $navy-blue;
font-size: 16px;
font-weight: 400;
}
.btn-with-image {
}
// $default-prefixes: webkit moz ms o;
// @mixin prefix($attr, $value, $prefixes: webkit moz ms o) {
// // Output each prefixed rule
// @each $prefix in $prefixes {
// -#{$prefix}-#{$attr}: #{$value};
// }
// // Non prefixed rule
// #{$attr}: #{$value};
// }
// @mixin transition($attr: all, $delay: .2s, $fx: ease-in-out) {
// $value: $attr $delay $fx;
// @include prefix('transition', $value);
// }
// @mixin transform($attr, $value) {
// $property: str_insert($attr, '()', -1);
// $prop: str_insert($property, #{$value}, -2);
// @include prefix('transform', $prop);
// }
// @mixin prefix($map, $vendors: webkit moz ms o) {
// @each $prop, $value in $map {
// @if $vendors {
// @each $vendor in $vendors {
// #{"-" + $vendor + "-" + $prop}: #{$value};
// }
// }
// // Dump regular property anyway
// #{$prop}: #{$value};
// }
// }
.btn-with-image {
display: flex;
align-items: center;
position: relative;
overflow: hidden;
img {
flex: 0 0 21px;
-ms-flex: 0 1 auto;
max-width: 21px !important;
width: 21px;
margin-right: 10px;
transition: all 0.3s ease-in-out;
&:nth-child(2) {
transform: translate(25px, 25px);
position: absolute;
opacity: 0;
left: 0;
}
}
i {
flex: 0 0 21px;
-ms-flex: 0 1 auto;
max-width: 21px;
width: 21px;
margin-right: 10px;
margin-left: 0;
transition: all 0.3s ease-in-out;
font-size: 21px;
&:before {
margin-left: 0;
margin-right: 0;
font-size: 21px;
}
&:nth-child(2) {
transform: translate(25px, 25px);
position: absolute;
opacity: 0;
left: 0;
}
}
&:hover {
img {
&:nth-child(1) {
transform: translateY(-25px);
opacity: 1;
}
&:nth-child(2) {
transform: translate(25px, 0);
opacity: 1;
}
}
i {
&:nth-child(1) {
transform: translateY(-25px);
opacity: 0;
}
&:nth-child(2) {
transform: translate(25px, 0);
opacity: 1;
}
}
}
}
.orange-gradient {
@include orange-gradient();
}
.blue-gradient {
@include blue-gradient();
}
.section-title {
max-width: 610px;
text-align: center;
margin: auto;
margin-bottom: 60px;
h2 {
color: $navy-blue;
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
}
p {
font-size: 18px;
font-weight: 400;
}
&.section-title-lg {
max-width: 820px;
}
}
.status-blue {
background-color: rgba(12, 89, 231, 0.2);
}
.status-orange {
background-color: rgba(241, 24, 16, 0.2);
}
.status-green {
background-color: rgba(12, 231, 187, 0.2);
}
// keyframes
@keyframes horizontal-ride {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-340px);
}
100% {
transform: translateX(0);
}
}
@keyframes vertical-ride {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-200px);
}
100% {
transform: translateY(0);
}
}
@keyframes scale {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes client-border-radius {
0% {
border-radius: 50% / 50%;
}
25% {
border-radius: 40% 25% 50% 50% / 50% 50% 50% 50%;
}
50% {
border-radius: 50% 50% 25% 50% / 50% 50% 50% 50%;
}
75% {
border-radius: 50% 50% 50% 25% / 50% 50% 50% 50%;
}
100% {
border-radius: 50% / 50%;
}
}
@keyframes carousel-left {
0% {
transform: translate(0, -50%);
}
50% {
transform: translate(-10%, -50%);
}
100% {
transform: translate(0, -50%);
}
}
@keyframes carousel-right {
0% {
transform: translate(0, -50%);
}
50% {
transform: translate(10%, -50%);
}
100% {
transform: translate(0, -50%);
}
}
@keyframes mobile-vertical-ride {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-5%);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-5%);
}
100% {
transform: translateY(0);
}
}
// preloader
.preloader {
height: 100%;
width: 100%;
position: fixed;
overflow: visible;
z-index: 99999;
top: 0;
left: 0;
}
.preloader .preloader-wrapper {
width: 100%;
height: 100%;
position: relative;
}
.preloader-grid {
width: 80px;
height: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-wrap: wrap;
.preloader-grid-item {
flex: 0 0 33.33%;
-ms-flex: 0 1 auto;
max-width: 33.33%;
width: 33.33%;
height: 33.33%;
background-color: white;
animation: preloader-delay 1.3s infinite ease-in-out;
}
.preloader-grid-item-1 {
animation-delay: 0.2s;
}
.preloader-grid-item-2 {
animation-delay: 0.3s;
}
.preloader-grid-item-3 {
animation-delay: 0.4s;
}
.preloader-grid-item-4 {
animation-delay: 0.1s;
}
.preloader-grid-item-5 {
animation-delay: 0.2s;
}
.preloader-grid-item-6 {
animation-delay: 0.3s;
}
.preloader-grid-item-7 {
animation-delay: 0s;
}
.preloader-grid-item-8 {
animation-delay: 0.1s;
}
.preloader-grid-item-9 {
animation-delay: 0.2s;
}
}
@keyframes preloader-delay {
0%, 70%, 100% {
transform: scale3D(1, 1, 1);
}
35% {
transform: scale3D(0, 0, 1);
}
}
@keyframes about-img-riding {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.pre-loaded .preloader {
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
.pre-loaded .loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
// navbar
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.navbar-area {
.is-sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
margin: auto;
z-index: 999;
background-color: #0000008c !important;
box-shadow: $box-shadow1;
animation: 500ms running fadeInDown;
transition: all .5s;
width: 100% !important;
height: auto;
}
}
.main-nav {
background: #fff;
nav {
padding: 0;
.navbar-nav {
.nav-item {
a {
color: $navy-blue;
font-weight: 400;
font-size: 17px;
text-transform: none;
transition: all 0.2s linear;
&.dropdown-toggle {
&:after {
content: "\e9e2";
font-family: 'boxicons'!important;
margin-left: 5px;
font-size: 15px;
}
}
&.active {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
&.dropdown-toggle {
&:after {
content: "\e9e2";
font-family: 'boxicons'!important;
margin-left: 5px;
font-size: 15px;
}
}
}
}
&:hover {
&>a {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.dropdown-menu {
background: #fff;
border: 0;
padding: 5px 0;
border-radius: 0;
box-shadow: $box-shadow1;
li {
a {
color: $navy-blue;
font-weight: 400;
font-size: 16px;
padding: 8px 20px;
display: flex;
align-items: center;
justify-content: space-between;
&.dropdown-toggle {
&:after {
content: "\e9e4";
font-family: 'boxicons'!important;
margin-left: 0;
}
}
}
&:hover {
&>a {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.dropdown-menu {
top: 0 !important;
}
}
.dropdown-menu {
left: 100%;
top: 10px !important;
li {
a {
color: $navy-blue;
}
}
}
}
}
}
}
}
}
.mean-bar {
box-shadow: $box-shadow1;
}
.mean-container .mean-nav {
float: left;
width: 100%;
background: #ffffff;
margin-top: 59px;
ul {
li {
a {
color: $navy-blue;
border-top: 1px solid #d8d8d8;
&.active {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
}
.navbar-brand {
position: relative;
flex: 0 0 157px;
-ms-flex: 0 1 auto;
max-width: 157px;
width: 157px;
img {
width: 100%;
}
}
.navbar-collapse {
flex-basis: 100%;
flex-grow: 0;
align-items: center;
}
.dropdown-toggle {
&:after {
display: inline-block;
margin-left: 10px;
vertical-align: 0;
content: "\f078";
font-family: "Font Awesome 5 Free";
font-weight: 600;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
font-size: 15px;
}
}
.navbar-option {
display: flex;
align-items: center;
padding-left: 15px;
}
.navbar-option-item {
margin-left: 20px;
padding-top: 3px;
padding-bottom: 3px;
&:first-child {
margin-left: 0;
}
.btn1 {
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
}
.dropdown-menu {
background: #fff;
border: 0;
padding: 5px 0;
border-radius: 0;
box-shadow: $box-shadow1;
display: block;
transform: translateY(10px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.2s ease-in-out;
&.show {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: all;
}
}
.dropdown-item {
display: flex;
align-items: center;
color: $navy-blue;
font-size: 15px;
padding: 7px 15px;
&:hover {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
img {
flex: 0 0 22px;
-ms-flex: 0 1 auto;
max-width: 22px;
width: 22px;
height: 22px;
border-radius: 50%;
overflow: hidden;
margin-right: 7px;
}
}
}
.language-option {
background: transparent;
color: $navy-blue;
font-size: 15px;
font-weight: 400;
display: flex;
align-items: center;
img {
flex: 0 0 25px;
-ms-flex: 0 1 auto;
max-width: 25px;
width: 25px;
height: 25px;
border: 2px solid #fff;
border-radius: 50%;
overflow: hidden;
margin-right: 7px;
box-shadow: 0px 5px 15px 0 rgba(11, 33, 84, 0.2);
}
i {
margin-left: 5px;
}
}
.mean-container .mean-nav ul li a.mean-expand {
right: 15px;
}
// header
.header-bg {
background-image: url("../images/header-bg.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 242px 0 140px;
position: relative;
.container-fluid {
height: 100%;
}
}
.header-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding: 0 3rem;
position: relative;
}
.header-content {
max-width: 720px;
padding-top: 0;
display: flex;
flex-direction: column;
width: 100%; // for ie
h1 {
color: #fff;
font-size: 70px;
font-weight: 400;
text-transform: capitalize;
margin-bottom: 14px;
width: 100%; // for ie
}
p {
color: #fff;
font-size: 20px;
font-weight: 400;
margin-bottom: 35px;
width: 100%; // for ie
}
}
.section-button {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-left: -12px;
margin-right: -12px;
li {
padding-right: 12px;
padding-left: 12px;
margin-bottom: 20px;
&:last-child {
margin-right: 0;
}
.btn1 {
font-weight: 400;
color: $navy-blue;
span {
flex: 0 0 24px;
-ms-flex: 0 1 auto;
max-width: 24px;
width: 24px;
font-size: 24px;
margin-right: 10px;
}
&.orange-gradient {
color: #fff;
}
&.blue-gradient {
color: #fff;
}
}
}
}
// header-support
.header-suuport {
box-shadow: $box-shadow1;
}
.header-support-group {
padding: 30px 0;
}
// support-group-item
.support-group-item {
display: flex;
align-items: center;
padding: 15px 0;
}
.support-thumb {
max-width: 60px;
margin-right: 20px;
img {
width: 100%;
}
}
.support-details {
h3 {
color: $navy-blue2;
font-size: 18px;
font-weight: 400;
margin-bottom: 5px;
text-transform: none;
a {
color: $navy-blue2;
}
}
p {
color: $violet;
font-size: 16px;
font-weight: 400;
}
}
// support-bank
.support-bank {
position: relative;
margin-bottom: 15px;
}
// support-bank-info
.support-bank-info {
padding: 30px;
box-shadow: $box-shadow1;
position: absolute;
background: #fff;
z-index: 10;
left: 0;
bottom: 100%;
transform: translateY(60%);
display: flex;
flex-direction: column;
width: 100%; //for ie
.review-star {
margin-bottom: 10px;
}
p {
margin-bottom: 10px;
font-weight: 400;
font-size: 16px;
color: $gray;
width: 100%; //for ie
}
}
.support-logo {
max-width: 145px;
img {
width: 100%;
}
}
.review-star {
display: flex;
li {
font-size: 20px;
margin-right: 10px;
line-height: 0;
&.full-star {
color: $orange;
}
}
}
// feature
.feature-margin-60 {
margin-top: 60px;
}
.feature-section-one {
margin-top: 165px;
padding-bottom: 75px;
}
.home-feature {
.owl-stage-outer {
overflow: visible;
}
.owl-stage {
padding-left: 0 !important;
display: flex;
.item {
height: 100%;
}
}
.owl-theme .owl-controls {
margin: 0;
}
}
.feature-carousel-content {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding: 40px 35px;
overflow: hidden;
border-radius: 3px;
z-index: 1;
background: #fff;
&:before {
content: "";
position: absolute;
width: 0;
height: 100%;
@include orange-gradient();
left: 0;
top: 0;
transition: width 0.7s;
background-position: left;
}
}
.feature-carousel-thumb {
padding: 22px;
border-radius: 10px;
transition: all 0.8s linear;
position: relative;
img {
width: 57px;
}
}
.feature-carousel-details {
text-align: center;
margin-top: 23px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%; //for ie
h3 {
font-size: 22px;
color: #221668;
font-weight: 700;
transition: color 0.45s linear;
margin-bottom: 23px;
}
p {
margin-bottom: 23px;
color: #6f6f6f;
font-size: 16px;
font-weight: 400;
transition: color 0.45s linear;
width: 100%; //for ie
}
.btn1 {
margin-top: auto;
color: #fff;
transition: all 0.4s linear;
position: relative;
overflow: hidden;
&:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
@include orange-gradient();
transition: all 0.4s linear;
}
&:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #fff 0%, #fff 100%);
transition: all 0.4s linear;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
span {
position: relative;
z-index: 1;
}
}
}
.home-feature-carousel {
display: flex;
.item {
flex: 0 0 100%;
-ms-flex: 0 1 auto;
max-width: 100%;
width: 100%;
box-shadow: $box-shadow1;
position: relative;
cursor: pointer;
display: flex;
justify-content: center;
&:after {
content: "";
position: absolute;
width: 90%;
height: 10px;
top: 100%;
background: linear-gradient(90deg, rgba(241, 21, 16, 0.55) 0%, rgba(235, 90, 13, 0.5) 60%);
border-radius: 0 0 3px 3px;
transform: translate(-50%, -12px);
opacity: 0;
transition: all 0.4s ease-in-out;
left: 50%;
}
&:hover {
&:after {
transform: translate(-50%, 0);
opacity: 1;
}
.feature-carousel-content {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding: 40px 35px;
&:before {
width: 100%;
opacity: 1;
}
}
&:before {
opacity: 1;
}
.status-blue {
background-color: rgba(255, 255, 255, 1);
}
.status-orange {
background-color: rgba(255, 255, 255, 1);
}
.status-green {
background-color: rgba(255, 255, 255, 1);
}
.feature-carousel-details {
h3 {
color: #fff;
}
p {
color: #fff;
}
.btn1 {
color: #f20f10;
&:before {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
&:after {
opacity: 1;
visibility: visible;
pointer-events: all;
}
}
}
}
}
&.owl-theme {
.owl-nav {
display: flex;
flex-direction: row-reverse;
justify-content: center;
margin-top: 30px;
button {
padding: 0;
margin: 0;
margin-right: 45px;
position: relative;
line-height: 1;
&:first-child {
margin-right: 0;
}
&:hover {
background: transparent;
span {
&:before {
color: #f11a10;
}
}
}
span {
&:before {
margin-left: 0;
font-size: 40px;
color: #2b71f3;
transition: all 0.2s linear;
}
}
&:before {
content: "";
border-width: 1px;
border-color: rgb(182, 182, 182);
border-style: solid;
border-radius: 50%;
width: 38px;
height: 38px;
position: absolute;
top: 50%;
transform: translate(0px, -50%);
transition: all 0.7s ease-in-out;
}
&:first-child {
&:before {
right: 45%;
animation: carousel-left 3s infinite alternate linear;
}
}
&:last-child {
&:before {
left: 45%;
animation: carousel-right 3s infinite alternate linear;
}
}
}
}
}
}
// home about
.home-about-item {
position: relative;
height: auto;
}
.home-about-details {
padding-right: 10px;
}
.home-about-title {
color: $navy-blue;
font-size: 50px;
font-weight: 400;
margin-bottom: 22px;
}
.home-about-para {
font-size: 17px;
margin-bottom: 22px;
}
.home-about-list {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
align-items: flex-start;
}
.home-about-list-item {
color: #221668;
font-size: 18px;
font-weight: 400;
padding: 5px 10px;
display: flex;
align-items: flex-start;
flex: 0 0 50%;
-ms-flex: 0 1 auto;
max-width: 50%;
width: 50%;
text-transform: capitalize;
img {
flex: 0 0 20px;
-ms-flex: 0 1 auto;
max-width: 20px;
width: 20px;
margin-right: 13px;
margin-top: 5px;
}
}
.home-animation-item {
position: absolute;
img {
width: auto !important;
}
&:nth-child(1) {
bottom: -20%;
left: 45%;
animation: horizontal-ride 8s infinite linear;
}
&:nth-child(2) {
bottom: -20%;
right: 0;
animation: vertical-ride 10s infinite linear;
}
}
.about-image-ellipsis {
.home-image-content {
position: relative;
&:before {
content: "";
width: 90%;
height: 100%;
background: url(../images/ellipsis.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
}
.about-image-shape {
.home-image-content {
position: relative;
&:before {
content: "";
width: 100%;
height: 100%;
background: url(../images/shape.png);
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
}
.about-image-rectangle {
.home-image-content {
position: relative;
&:before {
content: "";
width: 55%;
height: 65%;
background: url(../images/rectangle.png);
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
left: 50%;
transform: translate(-28%, -10%);
bottom: 0;
}
}
}
.home-image-content {
position: relative;
img {
width: 100%;
position: relative;
}
}
// counter
.counter-section {
background: url("../images/counter-bg.png");
background-position: center 85%;
background-size: cover;
}
.counter-content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.counter-item {
text-align: center;
padding-bottom: 30px;
flex: 0 0 25%;
-ms-flex: 0 1 auto;
max-width: 25%;
width: 25%;
position: relative;
h3 {
font-weight: 700;
@include blue-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
.counter {
font-size: 60px;
}
.counter-text-lg {
font-size: 60px;
}
.counter-text-sm {
font-size: 40px;
}
}
p {
font-size: 18px;
font-weight: 400;
color: #221668;
}
}
.counter-loader {
display: flex;
position: absolute;
left: 0;
top: 50%;
transform: translate(-50%, -50%);
span {
width: 8px;
height: 8px;
background: #b9d2ff;
border-radius: 50%;
margin: 0 5px;
animation-name: scale;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
&:nth-child(1) {
animation-delay: .2s;
}
&:nth-child(2) {
animation-delay: .4s;
}
&:nth-child(3) {
animation-delay: .6s;
}
}
}
// home service
.home-service-section {
background: url("../images/home-service-bg.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.home-service-start {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%; // for ie
h2 {
font-size: 46px;
color: $navy-blue;
font-weight: 400;
margin-bottom: 35px;
width: 100%; // for ie
}
p {
font-size: 17px;
font-weight: 400;
margin-bottom: 35px;
width: 100%; // for ie
&:last-child {
margin-bottom: 0;
}
a {
&.blue-gradient {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
&:hover {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
&.orange-gradient {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
&:hover {
@include blue-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
.blue-gradient, .orange-gradient {
color: #fff;
}
}
.home-service-details {
padding: 35px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: $box-shadow1;
background: #fff;
border-radius: 3px;
}
.home-service-image {
img {
width: 100%;
}
}
.home-service-text {
text-align: center;
margin-top: 20px;
width: 100%; // for ie
h3 {
color: #221668;
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
width: 100%; // for ie
}
p {
color: #7a7a7a;
font-size: 15px;
font-weight: 400;
margin-bottom: 20px;
width: 100%; // for ie
}
a {
font-size: 15px;
font-weight: 400;
display: inline-block;
transition: all 1s linear;
position: relative;
color: transparent;
&:before {
content: "Read More +";
position: absolute;
@include blue-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 100%;
height: 100%;
transition: all 0.2s linear;
opacity: 1;
visibility: visible;
left: 0;
}
&:after {
content: "Read More +";
position: absolute;
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 100%;
height: 100%;
transition: all 0.2s linear;
opacity: 0;
visibility: hidden;
left: 0;
}
&:hover {
&:before {
opacity: 0;
visibility: hidden;
}
&:after {
opacity: 1;
visibility: visible;
}
}
}
}
// home pricing
.home-pricing-category {
box-shadow: 0px 11px 96.82px 6.18px rgba(113, 113, 113, 0.16);
border-radius: 3px;
table {
width: 100%;
thead {
tr {
th {
text-align: center;
color: #fff;
font-size: 18px;
font-weight: 400;
text-transform: capitalize;
padding: 15px 20px;
white-space: nowrap;
&.t-align-left {
text-align: left;
}
&.t-align-right {
text-align: right;
}
}
}
}
tbody {
tr {
border-bottom: 0;
padding-left: 0;
padding-right: 0;
&:last-child {
border-bottom: 0;
td {
border-bottom: 0;
}
}
td {
text-align: center;
font-size: 18px;
font-weight: 400;
text-transform: capitalize;
padding: 12px 20px;
border-bottom: 2px solid rgb(235, 235, 235);
&.t-align-left {
text-align: left;
}
&.t-align-right {
text-align: right;
}
.price-availability {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
&.pricing-name {
color: #fff;
border-bottom: 0;
text-align: left;
white-space: nowrap;
}
img {
flex: 0 0 22px;
-ms-flex: 0 1 auto;
max-width: 22px;
width: 22px;
margin-right: 14px;
}
}
}
}
}
}
.price-availability {
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 18px;
}
.availability-orange-dark {
background: #f20f10;
color: #fff;
}
.availability-orange-light {
background: #f44336;
color: #fff;
}
.availability-blue {
background: #0c59e7;
color: #fff;
}
.availability-green {
background: #009655;
color: #fff;
}
// home facility
.home-facility-section {
position: relative;
}
.home-facility-overview {
max-width: 487px;
}
.contact-block-area {
max-width: 100%;
}
.home-facility-item {
position: relative;
img {
width: 100%;
}
}
.home-facility-animation {
.home-animation-item {
&:nth-child(1) {
top: -35px;
left: 25%;
}
&:nth-child(2) {
top: 100px;
right: 65%;
}
}
}
// home quick contact
.section-minus-margin {
margin-bottom: -290px;
margin-top: 70px;
}
.home-quick-contact {
border-radius: 5px;
padding: 100px 70px 80px;
position: relative;
}
.quick-contact-inner {
text-align: center;
position: relative;
h2 {
color: #fff;
font-size: 37px;
font-weight: 400;
margin-bottom: 20px;
}
p {
font-size: 18px;
font-weight: 400;
color: #fff;
margin-bottom: 20px;
a {
color: #fff;
display: inline-block;
position: relative;
&:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 3px;
background: #fff;
}
}
}
.section-button {
justify-content: center;
margin-left: -12px;
margin-right: -12px;
margin-top: 0;
li {
padding: 0 12px;
}
}
.orange-gradient, .blue-gradient {
color: #fff;
}
}
.logo-bg-item {
position: absolute;
&:nth-child(1) {
top: 50%;
width: 150px;
transform: translateY(-50%);
left: 70px;
}
&:nth-child(2) {
top: 50%;
width: 150px;
transform: translateY(-50%);
right: 70px;
}
img {
width: 100%;
}
}
// home logo
.home-logo-section {
padding: 393px 0 100px;
}
.home-logo-content {
display: flex;
flex-wrap: wrap;
border-radius: 3px;
overflow: hidden;
padding-bottom: 1px;
position: relative;
}
.home-logo-item {
flex: 0 0 20%;
-ms-flex: 0 1 auto;
max-width: 20%;
width: 20%;
border: 1px solid #e5e5e5;
margin-right: -1px;
margin-bottom: -1px;
a {
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
img {
width: 100%;
opacity: 0.45;
transition: all 0.3s linear;
}
}
&:hover {
a {
img {
opacity: 1;
}
}
}
}
// home clients
.client-carousel-thumb {
position: relative;
width: 350px;
height: 350px;
margin-left: 20px;
}
.carousel-icon-item {
position: absolute;
&:nth-child(1) {
top: -50px;
left: 40%;
transform: translateX(-100%);
img {
max-width: 100px;
}
}
&:nth-child(2) {
bottom: 40px;
left: 10%;
transform: translateX(-100%);
img {
max-width: 55px;
}
}
&:nth-child(3) {
bottom: 0;
right: 0;
img {
max-width: 93px;
}
}
}
.client-carousel-img {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
animation: client-border-radius 8s linear infinite alternate forwards;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0 25%;
}
}
.client-caption-para {
color: #64607c;
font-size: 22px;
font-weight: 400;
margin-bottom: 30px;
}
.client-caption-title {
color: #414141;
font-size: 22px;
font-weight: 700;
margin-bottom: 15px;
}
.client-caption-designation {
color: #838383;
font-size: 17px;
font-weight: 400;
}
.client-carousel {
.owl-stage-outer {
padding: 50px 0;
}
.owl-controls {
position: absolute;
left: 41.66%;
top: 100%;
transform: translateY(-100%);
}
}
.client-carousel-control {
display: flex;
align-items: center;
margin-top: 55px;
}
.carousel-control-item {
padding: 0;
margin: 0;
margin-right: 45px;
position: relative;
line-height: 1;
cursor: pointer;
&:last-child {
margin-right: 0;
}
&:hover {
background: transparent;
span {
i {
&:before {
color: #f11a10;
}
}
}
}
span {
i {
&:before {
margin-left: 0;
font-size: 40px;
color: #2b71f3;
transition: all 0.2s linear;
background: #fff;
}
}
}
&:before {
content: "";
border-width: 1px;
border-color: rgb(182, 182, 182);
border-style: solid;
border-radius: 50%;
width: 38px;
height: 38px;
position: absolute;
top: 50%;
transform: translate(0px, -50%);
transition: all 0.7s ease-in-out;
}
&:first-child {
&:before {
left: 45%;
animation: carousel-left 3s infinite alternate linear;
}
}
&:last-child {
&:before {
right: 45%;
animation: carousel-right 3s infinite alternate linear;
}
}
}
// home download
.home-download-section {
background: url(../images/download-bg.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.download-option {
p {
font-size: 20px;
font-weight: 400;
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.download-option-list {
display: flex;
align-items: center;
li {
flex: 0 0 90px;
-ms-flex: 0 1 auto;
max-width: 90px;
width: 90px;
height: 90px;
border-radius: 50%;
overflow: hidden;
margin-right: 14px;
&:last-child {
margin-right: 0;
}
a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
img {
max-width: 30px;
position: absolute;
transition: all 0.3s ease-in-out;
left: 50%;
&:nth-child(1) {
top: 50%;
transform: translate(-50%, -50%);
opacity: 1;
visibility: visible;
pointer-events: all;
}
&:nth-child(2) {
top: 50%;
transform: translate(-50%, 100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
}
&.orange-gradient, &.blue-gradient {
color: #fff;
}
}
i {
&:before {
font-size: 30px;
}
}
&:hover {
a {
img {
&:nth-child(1) {
transform: translate(-50%, -100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
&:nth-child(2) {
transform: translate(-50%, -50%);
opacity: 1;
visibility: visible;
pointer-events: all;
}
}
}
}
}
}
.home-download-image {
img {
width: 100%;
animation: mobile-vertical-ride 10s infinite alternate;
}
}
// home contact
.home-contact-section {
position: relative;
}
.home-contact-circle-item {
position: absolute;
top: 100%;
transform: translateY(-50%);
&:nth-child(1) {
left: 0;
top: 100%;
transform: translateY(-35%);
}
&:nth-child(2) {
right: 0;
top: 0;
}
img {
max-width: 500px;
}
}
.home-contact-inner {
@extend .quick-contact-inner;
max-width: 600px;
margin: 0 auto;
h2 {
font-size: 40px;
margin-bottom: 12px;
}
}
// footer
.footer-bg {
background: $black;
position: relative;
padding-top: 100px;
padding-bottom: 30px;
}
.home-footer-circle-item {
position: absolute;
top: 100%;
transform: translateY(-50%);
&:nth-child(1) {
left: 0;
top: 0;
transform: translateY(-36%);
}
img {
max-width: 500px;
}
}
.footer-content-item {
margin-bottom: 30px;
}
.footer-logo {
max-width: 164px;
a {
display: block;
}
img {
width: 100%;
}
}
.footer-details {
margin-top: 25px;
p {
font-size: 15px;
color: #fff;
font-weight: 400;
}
}
.footer-content-list {
padding-left: 30px;
}
.footer-content-title {
h3 {
font-size: 20px;
font-weight: 400;
color: #fff;
}
}
.footer-list {
li {
font-size: 15px;
font-weight: 400;
color: #fff;
margin-bottom: 12px;
a {
color: #e1e6f2;
}
span {
color: #cadafe;
a {
color: #cadafe;
}
}
&:last-child {
margin-bottom: 0;
}
}
}
.footer-lower {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 50px;
}
.footer-lower-item {
padding: 10px 0;
}
.footer-copyright-text {
p {
color: #d8d8d8;
font-size: 15px;
a {
color: #fff;
text-decoration: underline;
}
}
}
.footer-social-list {
display: flex;
flex-wrap: wrap;
li {
flex: 0 0 30px;
-ms-flex: 0 1 auto;
max-width: 30px;
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
margin-left: 7px;
transform: translateY(0);
transition: all 0.2s ease-in-out;
&:first-child {
margin-left: 0;
}
a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 16px;
}
&:hover {
transform: translateY(-3px);
}
}
}
.social-btn {
&.social-btn-fb {
a {
background: #3b5998;
color: #fff;
}
}
&.social-btn-tw {
a {
background: #55acee;
color: #fff;
}
}
&.social-btn-ins {
a {
background: #3f729b;
color: #fff;
}
}
&.social-btn-pin {
a {
background: #ff0000;
color: #fff;
}
}
&.social-btn-yt {
a {
background: #c80000;
color: #fff;
}
}
&.social-btn-ld {
a {
background: #2867b2;
color: #fff;
}
}
}
// *****index-2
// header bg 2
.header-bg-2 {
background-image: url("../images/header-bg-2.png");
background-repeat: no-repeat;
background-position: 100% -15px;
background-size: 40% 100%;
background-color: #fff;
padding: 130px 0 110px;
position: relative;
.container-fluid {
height: 100%;
}
.row {
width: 100%;
}
}
.header-shape-2-item {
position: absolute;
&:nth-child(1) {
max-width: 78px;
top: 100%;
transform: translateY(-50%);
}
img {
width: 100%;
}
}
.header-content-2 {
max-width: 610px;
display: flex;
flex-direction: column;
width: 100%; // for ie
h1 {
color: #212529;
font-size: 70px;
font-weight: 400;
margin-bottom: 20px;
width: 100%; // for ie
}
p {
color: #535353;
font-size: 20px;
font-weight: 400;
margin-bottom: 35px;
width: 100%; // for ie
}
}
.header-content-2-img {
img {
width: 100%;
}
}
// navbar 2
.main-nav-2 {
background-color: transparent;
.language-option {
color: #fff;
}
.navbar-option-item {
.btn1 {
border: 1px solid #fff;
background-color: transparent;
transition: all 0.3s linear;
&:hover {
background-color: #fff;
color: #f20f10;
}
}
}
&.is-sticky {
.language-option {
color: $navy-blue;
}
.navbar-option-item {
.btn1 {
border: 1px solid #f20f10;
@include orange-gradient();
transition: all 0.3s linear;
color: #fff;
}
}
}
}
// home logo 2
.home-logo-section-2 {
position: relative;
padding-top: 0;
padding-bottom: 100px;
}
// home about 2
.home-about-animated-img {
max-width: 180px;
position: absolute;
img {
width: 100% !important;
animation: about-img-riding 5s alternate infinite;
}
&.home-animated-table-img {
max-width: 285px;
}
}
.home-animated-img-right {
bottom: 0;
right: 0;
}
.home-animated-img-left {
bottom: 0;
left: 0;
transform: translate(-10%, 0%);
}
// home facility 2
.home-facility-2-img {
margin-right: -20px;
}
// home quick contact
.home-quick-contact-2 {
padding-left: 0;
padding-right: 0;
}
// home client 2
.client-details-carousel {
.owl-stage-outer {
padding: 10px 0 0;
}
&.owl-theme {
.owl-nav {
display: flex;
flex-direction: row-reverse;
position: absolute;
margin: 0;
top: 12px;
right: 0;
button {
padding: 0;
margin: 0;
margin-right: 45px;
position: relative;
line-height: 1;
&:first-child {
margin-right: 0;
}
&:hover {
background: transparent;
span {
&:before {
color: #f11a10;
}
}
}
span {
&:before {
margin-left: 0;
font-size: 40px;
color: #2b71f3;
transition: all 0.2s linear;
}
}
&:before {
content: "";
border-width: 1px;
border-color: rgb(182, 182, 182);
border-style: solid;
border-radius: 50%;
width: 38px;
height: 38px;
position: absolute;
top: 50%;
transform: translate(0px, -50%);
transition: all 0.7s ease-in-out;
}
&:first-child {
&:before {
right: 45%;
animation: carousel-left 3s infinite alternate linear;
}
}
&:last-child {
&:before {
left: 45%;
animation: carousel-right 3s infinite alternate linear;
}
}
}
}
}
}
.home-client-details-2 {
max-width: 880px;
margin-bottom: 30px;
.client-caption-para {
color: $navy-blue;
font-size: 30px;
position: relative;
margin-bottom: 0;
&:before {
content: "“";
margin-right: 3px;
font-size: 60px;
line-height: 0;
}
}
}
.home-client-thumbnail-section {
margin-top: 70px;
}
.client-thumbnail-content {
display: flex;
align-items: center;
}
.client-thumbnail-img {
flex: 0 0 73px;
-ms-flex: 0 1 auto;
max-width: 73px;
width: 73px;
height: 73px;
overflow: hidden;
border-radius: 50%;
margin-right: 20px;
transition: all 0.3s linear;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.client-thumbnail-info {
.client-caption-title {
font-size: 20px;
margin-bottom: 10px;
}
}
.client-thumbnail-carousel {
.owl-stage-outer {
overflow: visible;
}
.owl-item {
opacity: .47;
cursor: pointer;
transition: all 0.8s linear;
&.current {
opacity: 1;
.client-thumbnail-img {
transform: scale(1.2);
}
}
}
}
// home download 2
.home-download-section-2 {
background: url(../images/home-download-2-shape.png);
background-position: -18% top;
background-size: contain;
background-repeat: no-repeat;
}
.download-feature {
width: 100%;
display: flex;
flex-flow: row wrap;
margin-left: -10px;
margin-right: -10px;
margin-bottom: 35px;
}
.download-feature-item {
flex: 1;
-ms-flex: 1;
max-width: 100%;
width: 100%;
padding: 15px 10px 0;
}
.download-feature-item-inner {
padding-left: 30px;
border-left: 1px dashed #6a6a6a;
padding-top: 8px;
padding-bottom: 8px;
position: relative;
height: 100%;
text-align: left;
&:before {
content: "";
width: 0;
height: 0;
border-color: transparent transparent transparent #fe4a55;
border-style: solid;
border-width: 15px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
h3 {
font-size: 30px;
color: $navy-blue;
font-weight: 400;
margin-bottom: 13px;
}
p {
font-size: 16px;
color: #767676;
font-weight: 400;
margin-bottom: 0;
}
}
// *****index-3
// header 3
.header-bg-3 {
background-image: url("../images/header-bg-3.png");
background-position: top left;
background-size: 100% 100%;
background-color: #fff;
padding-bottom: 34%;
position: relative;
.container-fluid {
height: 100%;
}
.row {
align-items: flex-end;
}
}
.header-content-3 {
padding-top: 170px;
max-width: 800px;
padding-bottom: 40px;
margin-left: auto;
margin-right: auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
width: 100%; // for ie
h1 {
color: #fff;
font-size: 70px;
font-weight: 400;
margin-bottom: 30px;
width: 100%; // for ie
}
p {
color: #fff;
font-size: 20px;
font-weight: 400;
margin-bottom: 35px;
width: 100%; // for ie
}
}
.header-3-shape-item {
position: absolute;
bottom: 0;
img {
width: 100%;
}
&:nth-child(1) {
width: 33%;
left: 0;
transform: translate(-19%, -5%)
}
&:nth-child(2) {
width: 33%;
left: 0;
transform: translate(54%, 15%);
}
&:nth-child(3) {
width: 43%;
left: 50%;
transform: translate(-19%, 15%);
}
&:nth-child(4) {
width: 48%;
right: 0;
transform: translate(50%, 18%);
}
}
// navbar 3
.main-nav-3 {
background-color: transparent;
nav {
.navbar-nav {
.nav-item {
& > a {
color: #d2d2d2;
&.active {
color: #fff;
background: transparent;
-webkit-text-fill-color: #fff;
}
}
&:hover {
& > a {
color: #fff;
background: transparent;
-webkit-text-fill-color: #fff;
}
}
.dropdown-menu {
.nav-item {
a {
&.active {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
}
}
}
.language-option {
color: #fff;
}
.navbar-option-item {
.btn1 {
border: transparent;
background-color: #fff;
transition: all 0.3s linear;
color: #010327;
&:hover {
background-color: #fff;
color: #f20f10;
}
}
}
&.is-sticky {
nav {
.navbar-nav {
.nav-item {
& > a {
color: $navy-blue;
&.active {
color: transparent;
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
&:hover {
& > a {
color: transparent;
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.dropdown-menu {
.nav-item {
a {
&.active {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
}
}
}
.language-option {
color: $navy-blue;
}
.navbar-option-item {
.btn1 {
border: 1px solid #f20f10;
@include orange-gradient();
transition: all 0.3s linear;
color: #fff;
}
}
.navbar-brand-3 {
img {
&:nth-child(1) {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.2s linear;
}
&:nth-child(2) {
opacity: 1;
visibility: visible;
pointer-events: all;
}
}
}
}
}
.navbar-brand-3 {
img {
&:nth-child(2) {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.3s linear;
position: absolute;
left: 0;
}
}
}
// home feature section 3
.home-feature-box-3 {
padding: 100px 30px 70px;
box-shadow: $box-shadow1;
margin: 0 -40px;
}
.home-feature-item-3 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 10px 30px;
.feature-carousel-details {
p {
color: #5c5c5c;
margin-bottom: 0;
}
}
}
.feature-item-img-3 {
img {
width: 100%;
}
}
// home about section 3
.home-about-section-3 {
.home-about-animated-img {
transform: translate(20px, -60px);
}
}
// home logo section 3
.home-logo-section-3 {
background: #0b0241;
padding: 50px 0;
}
.home-logo-carousel-img {
img {
height: 60px;
object-fit: contain;
}
}
// home service
.home-service-details-2 {
padding: 25px;
display: flex;
flex-direction: column;
align-items: flex-start;
box-shadow: $box-shadow1;
background: #fff;
border-radius: 3px;
}
.home-service-text-2 {
@extend .home-service-text;
text-align: left;
display: flex;
flex-direction: column;
height: 100%;
h3 {
font-size: 17px;
font-weight: 700;
margin-bottom: 15px;
}
p {
color: #5c5c5c;
margin-top: auto;
margin-bottom: 0;
}
}
.home-service-image-2 {
img {
width: 100%;
}
}
// home client section 3
.home-client-section-3 {
overflow: hidden;
position: relative;
background: url("../images/business-section-bg.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
.section-title {
position: relative;
h2 {
color: #fff;
}
p {
color: #fff;
}
}
}
.owl-carousel {
.owl-item {
.client-carousel-img-2 {
position: relative;
img {
width: 100%;
}
}
.client-carousel-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
button {
width: 75px;
height: 75px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
img {
width: 21px;
margin: 0;
position: absolute;
transition: all 0.3s ease-in-out;
left: 50%;
&:nth-child(1) {
top: 50%;
transform: translate(-50%, -50%);
opacity: 1;
visibility: visible;
pointer-events: all;
}
&:nth-child(2) {
top: 50%;
transform: translate(-50%, 100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
}
i {
margin-right: 0;
}
}
a {
width: 75px;
height: 75px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
img {
width: 21px;
margin: 0;
position: absolute;
transition: all 0.3s ease-in-out;
left: 50%;
&:nth-child(1) {
top: 50%;
transform: translate(-50%, -50%);
opacity: 1;
visibility: visible;
pointer-events: all;
}
&:nth-child(2) {
top: 50%;
transform: translate(-50%, 100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
}
i {
margin-right: 0;
}
}
&:hover {
button, a {
img {
&:nth-child(1) {
transform: translate(-50%, -100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
&:nth-child(2) {
transform: translate(-50%, -50%);
opacity: 1;
visibility: visible;
pointer-events: all;
}
}
}
}
.blue-gradient, .orange-gradient {
color: #fff;
}
}
}
}
.client-carousel-caption-2 {
padding-top: 60px;
padding-right: 10px;
.client-caption-para {
color: #fff;
font-size: 30px;
}
.client-caption-title {
color: #fff;
}
.client-caption-designation {
color: #ded8ff;
}
}
.business-carousel {
.owl-stage-outer {
padding: 20px 0;
}
&.owl-theme {
.owl-nav {
display: flex;
flex-direction: row-reverse;
position: absolute;
margin: 0;
top: 50px;
left: 0;
button {
padding: 0;
margin: 0;
margin-right: 45px;
position: relative;
&:first-child {
margin-right: 0;
}
&:hover {
background: transparent;
span {
&:before {
color: #f11a10;
}
}
}
span {
&:before {
margin-left: 0;
font-size: 40px;
color: #fff;
transition: all 0.2s linear;
}
}
&:before {
content: "";
border-width: 1px;
border-color: rgb(182, 182, 182);
border-style: solid;
border-radius: 50%;
width: 38px;
height: 38px;
position: absolute;
top: 50%;
transform: translate(0px, -50%);
transition: all 0.7s ease-in-out;
}
&:first-child {
&:before {
right: 40%;
animation: carousel-left 3s infinite alternate linear;
}
}
&:last-child {
&:before {
left: 40%;
animation: carousel-right 3s infinite alternate linear;
}
}
}
}
}
}
// retail section
.retail-section-bg {
background: url("../images/retails-bg.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 100px 0 200px;
}
// counter middle section
.counter-middle-section {
margin-top: -130px;
margin-bottom: -130px;
}
.counter-content-box {
background-color: #0b0241;
padding: 60px 60px 40px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-radius: 3px;
}
.counter-item-white {
h3 {
background: transparent;
color: #fff;
-webkit-text-fill-color: unset;
}
p {
color: #b9d2ff;
}
}
// review section
.review-section {
padding: 220px 0 70px;
}
.review-section-content {
margin-top: 50px;
}
.holder-name {
font-size: 19px;
font-weight: 700;
color: #414141;
}
.holder-designation {
font-size: 16px;
font-weight: 400;
color: #838383;
}
.holder-para {
font-size: 18px;
font-weight: 400;
color: #373636;
}
.review-text {
display: flex;
flex-direction: column;
height: 100%;
width: 100%; // for ie
.holder-name {
margin-bottom: 15px;
width: 100%; // for ie
}
.holder-designation {
margin-top: auto;
margin-bottom: 15px;
width: 100%; // for ie
}
.holder-para {
margin-top: auto;
margin-bottom: 25px;
width: 100%; // for ie
}
.review-star {
margin-top: auto;
}
}
// *****header background for inner pages
// page bg
.page-bg {
background-repeat: no-repeat;
background-position: 40% 100%;
background-size: cover;
padding: 210px 0 120px;
position: relative;
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.2);
}
}
.page-title-inner {
position: relative;
.section-title {
margin-bottom: 0;
h1 {
font-size: 50px;
font-weight: 400;
color: #fff;
margin-bottom: 20px;
}
}
}
// page breadcrumbs
.page-breadcrumbs {
display: flex;
justify-content: center;
li {
font-size: 16px;
padding: 0px 8px;
color: #fff;
font-weight: 400;
position: relative;
line-height: 17px;
a {
color: #fff;
}
&:not(:first-child) {
&:before {
content: "";
position: absolute;
width: 1px;
height: 100%;
background: #fff;
left: 0;
top: 0;
}
}
}
}
// *****about-us page
// video section
.about-img {
img {
width: 100%;
}
}
// worker section
.worker-section {
.home-about-content {
position: relative;
}
}
.worker-grid-item {
&:nth-child(1) {
margin-top: 20px;
}
&:nth-child(4) {
margin-top: -20px;
}
}
.worker-grid-content {
box-shadow: $box-shadow1;
position: relative;
&:hover {
.worker-content-layout {
opacity: 1;
visibility: visible;
pointer-events: all;
}
}
}
.worker-content-img {
img {
width: 100%;
}
}
.worker-shape-item {
position: absolute;
&:nth-child(1) {
bottom: 0;
left: 15%;
transform: translate(0, 0);
img {
max-width: 220px;
}
}
}
.worker-social-link {
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
li {
font-size: 15px;
padding: 0 10px;
a {
color: #fff;
}
}
}
.worker-content-layout {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(0deg, rgba(8, 86, 230, 0.9) 0%, transparent 60%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 20px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.4s linear;
.client-caption-title {
color: #fff;
text-transform: capitalize;
}
.client-caption-designation {
color: #fff;
}
}
// about logo
.about-logo-content {
padding: 40px;
background: #fff;
display: flex;
flex-wrap: wrap;
border-radius: 3px;
overflow: hidden;
box-shadow: $box-shadow1;
}
// about download
.about-download-content {
.home-download-image {
img {
animation: none;
}
}
}
// *****blog-details page
// blog details
.article-img {
overflow: hidden;
border-radius: 3px;
margin-bottom: 20px;
img {
width: 100%;
}
}
.blog-details-content {
margin-top: 20px;
p {
font-size: 16px;
font-weight: 400;
color: #6f6f6f;
line-height: 28px;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
&.blog-tag-name {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
line-height: 18px;
display: flex;
align-items: flex-end;
&:before {
content: "";
display: flex;
width: 30px;
height: 1px;
@include orange-gradient();
bottom: 3px;
position: relative;
margin-right: 8px;
}
}
}
h2 {
color: #0e1d2d;
font-size: 25px;
font-weight: 700;
margin-bottom: 20px;
}
}
.blog-quote {
padding: 25px;
border-radius: 3px;
display: flex;
flex-direction: column;
margin-bottom: 20px;
width: 100%; // for ie
&.blog-quote-center {
align-items: center;
justify-content: center;
text-align: center;
}
.blog-quote-icon {
i {
font-size: 20px;
color: #fff;
}
}
h3 {
font-size: 24px;
font-weight: 700;
text-transform: capitalize;
width: 100%; // for ie
}
p {
margin-top: 20px;
font-size: 23px;
width: 100%; // for ie
&.blog-tag-name {
font-size: 14px;
text-transform: uppercase;
margin-top: 0;
width: auto; // for ie
}
&.blog-quote-para-small {
font-size: 17px;
}
}
&.blue-gradient {
h3 {
color: #fff;
}
p {
color: #fff;
&.blog-tag-name {
background: transparent;
color: #fff;
-webkit-text-fill-color: #fff;
&:before {
background: #fff;
}
}
}
.service-choosing-list {
li {
color: #fff;
}
}
}
&.orange-gradient {
h3 {
color: #fff;
}
p {
color: #fff;
&.blog-tag-name {
background: transparent;
color: #fff;
-webkit-text-fill-color: #fff;
&:before {
background: #fff;
}
}
}
.service-choosing-list {
li {
color: #fff;
}
}
}
}
.service-choosing-list {
li {
font-size: 16px;
font-weight: 400;
display: flex;
align-items: flex-start;
padding: 5px 0;
text-align: left;
img {
width: 17px;
margin-right: 10px;
margin-top: 3px;
}
}
}
.blog-details-img-item {
overflow: hidden;
border-radius: 3px;
img {
width: 100%;
}
}
.blog-details-list {
display: flex;
flex-wrap: wrap;
text-align: left;
margin-bottom: 20px;
li {
font-size: 18px;
color: #1d2f42;
position: relative;
display: flex;
align-items: center;
padding: 14px 0;
margin-right: 25px;
img {
flex: 0 0 20px;
-ms-flex: 0 1 auto;
max-width: 20px;
width: 20px;
margin-right: 12px;
}
}
}
.blog-details-tag {
border: 1px dashed #2948ff;
background: #f3f5ff;
padding: 10px 20px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border-radius: 3px;
margin-top: 60px;
}
.blog-tag-item {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 10px 0;
h4 {
margin-right: 17px;
color: #162c44;
font-size: 17px;
}
}
.blog-tag-list {
display: flex;
align-items: center;
flex-wrap: wrap;
li {
margin-right: 13px;
font-size: 15px;
a {
color: #2948ff;
}
}
}
.blog-tag-social {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
li {
flex: 0 0 30px;
-ms-flex: 0 1 auto;
max-width: 30px;
width: 30px;
height: 30px;
border-radius: 50%;
margin-left: 7px;
overflow: hidden;
&:first-child {
margin-left: 0;
}
a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 16px;
}
}
}
// blog-comment-area
.blog-comment-area {
margin-top: 70px;
}
.sub-section-title {
color: #1b2b37;
font-size: 20px;
span {
color: #8fa5b5;
}
}
// blog-people-comment
.blog-people-comment-item {
border-bottom: 1px solid #ededed;
padding: 45px 0;
&:last-child {
border-bottom: 0;
}
}
.blog-people-comment-main {
display: flex;
flex-wrap: wrap;
}
.blog-people-comment-reply {
display: flex;
flex-wrap: wrap;
margin-top: 25px;
padding-left: 132px;
.blog-people-comment-thumb {
flex: 0 0 80px;
-ms-flex: 0 1 auto;
max-width: 80px;
width: 80px;
height: 80px;
margin-right: 20px;
}
.blog-people-comment-details {
margin-top: 10px;
}
}
.blog-people-comment-thumb {
flex: 0 0 102px;
-ms-flex: 0 1 auto;
max-width: 102px;
width: 102px;
height: 102px;
border-radius: 50%;
overflow: hidden;
margin-right: 30px;
img {
width: 100%;
height: 100%;
}
}
.blog-people-comment-content {
flex: 1;
margin-top: 15px;
}
.blog-people-comment-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.blog-people-comment-bio {
margin-bottom: 10px;
}
.blog-post-name {
color: #131f27;
font-size: 16px;
text-transform: capitalize;
}
.blog-post-date {
color: #7b7b7b;
font-size: 15px;
}
.blog-people-reply-action {
margin-bottom: 10px;
p {
font-size: 15px;
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
cursor: pointer;
}
}
.blog-people-comment-details {
margin-top: 20px;
p {
color: #6f6f6f;
font-size: 16px;
}
}
// input
.input-group {
border: 1px solid #d8d8d8;
background: #fff;
border-radius: 3px;
padding: 15px 20px;
align-items: baseline;
}
.form-control {
color: $navy-blue;
height: auto;
font-size: 15px;
font-weight: 400;
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
color: $navy-blue;
background-color: transparent;
border-color: transparent;
outline: 0;
box-shadow: none;
padding: 0;
resize: none;
&:focus {
color: $navy-blue;
background-color: #fff;
border-color: transparent;
outline: 0;
box-shadow: none;
}
&::placeholder {
color: #7f7f7f;
}
}
.input-group-text {
border: 0;
border-radius: 0;
padding: 0;
background: transparent;
color: #7f7f7f;
font-size: 15px;
margin-right: 10px;
i {
&:before {
margin-left: 0;
font-size: 15px;
}
}
}
.help-block {
margin-top: 5px;
&.with-errors {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 14px;
}
}
.submit-post-info {
text-align: center;
margin-top: 10px;
font-size: 20px;
margin-bottom: 0;
&.text-success {
@include blue-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent !important;
}
&.text-danger {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent !important;
}
}
.input-area {
border: 1px solid #d8d8d8;
background: #fff;
border-radius: 3px;
position: relative;
display: flex;
padding: 15px 20px;
width: 100%;
}
.input-label-icon {
color: #7f7f7f;
flex: 0 0 19px;
-ms-flex: 0 1 auto;
max-width: 19px;
width: 19px;
margin-right: 10px;
span {
width: 100%;
font-size: 16px;
i {
font-size: 16px;
&:before {
font-size: 16px;
margin-left: 0;
}
}
}
}
.muted-text {
font-size: 14px;
margin-top: 5px;
&.muted-text-orange {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.material-input-label {
color: #7f7f7f;
font-size: 15px;
margin: 0;
font-weight: 400;
position: absolute;
left: 20px;
top: 25px;
transform: translateY(-50%);
z-index: 1;
transition: all 0.3s ease-in-out;
display: flex;
span {
padding: 0 5px;
}
i {
margin-right: 8px;
&:before {
font-size: 15px;
margin: 0;
}
}
}
.input-full {
width: 100%;
padding: 0;
margin: 0;
border: 0;
outline: 0;
resize: none;
color: $navy-blue;
font-size: 15px;
&:active, &:focus {
border: 0;
outline: 0;
}
&::placeholder {
color: #7f7f7f;
}
}
.blog-comment-input-area {
.orange-gradient {
color: #fff;
}
.btn1 {
margin-left: auto;
margin-right: auto;
}
}
.blog-comment-leave-area {
background: #f3f3f3;
border-radius: 3px;
padding: 65px 45px 55px;
.sub-section-title {
font-size: 30px;
color: #221668;
}
}
// blog sidebar
.blog-sidebar {
.sub-section-title {
color: #162c44;
}
}
.blog-sidebar-item {
box-shadow: 0px 11px 61.1px 3.9px rgba(193, 193, 193, 0.22);
margin-bottom: 30px;
}
.blog-sidebar-item-details {
padding: 0 25px;
}
.blog-sidebar-item-header {
border-bottom: 1px solid #efefef;
padding: 25px;
}
.blog-search-area {
padding-top: 25px;
padding-bottom: 25px;
}
.blog-search-area {
.input-area {
padding: 0;
padding-left: 10px;
overflow: hidden;
border-radius: 3px;
}
.btn1 {
padding: 12px 15px;
border-radius: 3px;
}
.btn-with-image {
img {
margin-right: 0;
flex: 0 0 16px;
-ms-flex: 0 1 auto;
max-width: 16px !important;
width: 16px;
}
}
}
// blog recent item
.blog-recent-item {
border-bottom: 1px solid #efefef;
&:last-child {
border-bottom: 0;
}
a {
display: flex;
justify-content: space-between;
padding: 25px 0;
&:hover {
.blog-recent-thumb {
img {
transform: scale(1.1);
}
}
.blog-post-name {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
.blog-recent-thumb {
flex: 0 0 75px;
-ms-flex: 0 1 auto;
max-width: 75px;
width: 75px;
height: 101px;
border-radius: 3px;
overflow: hidden;
margin-right: 17px;
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s linear;
}
}
.blog-recent-data {
.blog-post-date {
color: #2948ff;
font-size: 14px;
}
.blog-post-name {
color: #162c44;
font-weight: 700;
font-size: 15px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-people-comment-details {
margin-top: 10px;
p {
font-size: 15px;
color: #6a6a6a;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
}
.blog-category-details {
padding-top: 10px;
padding-bottom: 10px;
}
.blog-category-item {
padding: 15px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.blog-category-name {
font-size: 15px;
color: #898989;
flex: 1;
-ms-flex: 1;
a {
color: #898989;
&:hover {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
.blog-category-number {
font-size: 15px;
color: #2948ff;
}
.blog-cateogory-divider {
flex: 0 0 55%;
-ms-flex: 0 1 auto;
max-width: 55%;
width: 55%;
height: 1px;
background: #efefef;
margin-right: 20px;
}
.blog-sidebar-tag-details {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-sidebar-tag-list {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
li {
color: #777777;
margin-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
&.blog-sidebar-tag-lg {
font-size: 16px;
}
&.blog-sidebar-tag-sm {
font-size: 15px;
}
a {
color: #777777;
&:hover {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
// *****pricing page
// pricing section
.pricing-box-grid {
box-shadow: $box-shadow1;
display: flex;
margin-left: 25px;
margin-right: 25px;
flex-wrap: wrap;
}
.pricing-grid-item {
border-radius: 5px;
flex: 0 0 33.33%;
-ms-flex: 0 1 auto;
max-width: 33.33%;
width: 33.33%;
transition: all 0.3s linear;
&:hover {
box-shadow: $box-shadow1;
.pricing-item-amount {
&:before {
width: 100%;
transition: all 0.5s ease-in-out;
opacity: 1;
}
h4 {
color: #fff;
}
}
}
}
.pricing-grid-item-inner {
display: flex;
flex-direction: column;
height: 100%;
}
// pricing-item-header
.pricing-item-header {
padding: 30px;
text-align: center;
h3 {
font-size: 30px;
color: #252525;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
img {
flex: 0 0 27px;
-ms-flex: 0 1 auto;
max-width: 27px;
width: 27px;
margin-right: 13px;
}
}
}
// pricing-item-amount
.pricing-item-amount {
padding: 30px;
background-color: rgba(41, 72, 255, 0.2);
text-align: center;
transition: all 0.3s linear;
position: relative;
&:before {
content: "";
position: absolute;
width: 0;
height: 100%;
top: 0;
left: 0;
@include blue-gradient();
opacity: 0;
transition: all 0.5s ease-in-out;
}
h4 {
font-size: 49px;
font-weight: 400;
color: #2948ff;
position: relative;
transition: all 0.5s linear;
small {
font-size: 22px;
}
span {
font-size: 30px;
}
}
}
// pricing-item-body
.pricing-item-body {
padding: 35px;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
.btn1 {
color: #fff;
margin-top: auto;
}
}
.pricing-item-list {
margin-bottom: 20px;
li {
color: #636363;
font-size: 18px;
display: flex;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
.pricing-list-arrow {
flex: 0 0 15px;
-ms-flex: 0 1 auto;
max-width: 15px;
width: 15px;
margin-right: 12px;
font-size: 15px;
&:before {
font-size: 15px;
}
}
.pricing-list-info {
color: #b6b6b6;
font-size: 19px;
margin-left: 17px;
display: flex;
i {
&:before {
font-size: 19px;
}
}
}
}
}
// *****contact-us page
// contact address section
.box-card {
box-shadow: $box-shadow1;
border-radius: 5px;
}
.box-card-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
}
.box-card-icon {
img {
width: 100%;
// height: 100%;
}
span {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
i {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
&:before {
font-size: 50px;
margin: 0;
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
.box-card-details {
margin-top: auto;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%; // for ie
}
.box-card-title {
color: #221668;
font-size: 23px;
font-weight: 700;
width: 100%; // for ie
}
.box-card-para {
font-size: 17px;
color: #6f6f6f;
font-weight: 400;
width: 100%; // for ie
.link-us {
color: #6f6f6f;
}
}
.box-card-link {
margin-top: auto;
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 18px;
}
.comment-block-img {
display: block;
margin: auto;
width: 80%;
}
.contact-comment-leave-area {
background: #fff;
box-shadow: 0px 11px 61.1px 3.9px rgba(193, 193, 193, 0.22);
}
// *****faq page
// faq section
// faq-accordion
.faq-accordion-item {
box-shadow: $box-shadow1;
border-radius: 5px;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.faq-accordion-header {
padding: 25px;
position: relative;
cursor: pointer;
border-radius: 5px;
overflow: hidden;
&:before {
content: "\f109";
font-family: Flaticon;
font-size: 22px;
font-weight: 400;
position: absolute;
right: 25px;
top: 20px;
transition: all 0.5s linear;
opacity: 1;
visibility: visible;
pointer-events: all;
}
&:after {
content: "\f10a";
font-family: Flaticon;
font-size: 22px;
font-weight: 400;
position: absolute;
right: 25px;
top: 20px;
transition: all 0.5s linear;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
}
.faq-accordion-header-overlay {
position: absolute;
width: 0;
height: 100%;
@include orange-gradient();
top: 0;
left: 0;
transition: all 0.8s ease-in-out;
}
.faq-accordion-item-active {
.faq-accordion-header {
&:before {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
&:after {
opacity: 1;
visibility: visible;
pointer-events: all;
color: #fff;
}
.faq-accordion-header-overlay {
width: 100%;
}
.faq-accordion-title {
color: #fff;
}
}
.faq-accordion-body {
max-height: 250px;
transition: all 0.8s ease-in-out;
}
}
.faq-accordion-title {
font-size: 18px;
color: #221668;
font-weight: 400;
padding-right: 35px;
transition: all 0.3s linear;
position: relative;
z-index: 10;
text-transform: none;
}
.faq-accordion-body {
max-height: 0;
overflow: hidden;
transition: all 0.8s ease-in-out;
}
.faq-accordion-body-inner {
padding: 25px;
}
.faq-accordion-para {
font-size: 16px;
color: #7a7a7a;
font-weight: 400;
}
// *****authentication page
// authentication section
.authentication-section {
background: #fff;
}
.authentication-grid {
display: flex;
height: 100vh;
}
.authentication-grid-lost {
height: 100vh;
overflow: auto;
}
.authentication-item {
flex: 0 0 50%;
-ms-flex: 0 1 auto;
max-width: 50%;
width: 50%;
}
.authentication-user-panel {
padding: 50px 100px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.authentication-user-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
img {
width: 160px;
}
h1 {
font-size: 30px;
color: #2a2a2a;
font-weight: 400;
margin-top: 20px;
}
}
.authentication-user-body {
width: 100%;
p {
font-size: 15px;
font-weight: 400;
text-align: center;
}
}
.authentication-tab {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
}
.authentication-tab-item {
color: #5f5f5f;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
padding: 15px 60px;
border-bottom: 1px solid #d5d5d5;
cursor: pointer;
img {
height: 19px;
margin-right: 8px;
}
&.authentication-tab-active {
border-bottom: 1px solid #ff743c;
}
}
.authentication-tab-details-item {
display: none;
&.authentication-tab-details-active {
display: block;
}
}
.authentication-form {
margin-top: 40px;
.input-area {
background: #f7f7f7;
.input-full {
background-color: transparent;
}
}
.orange-gradient {
color: #fff;
}
}
.authentication-account-access {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.authentication-account-access-item {
padding: 10px 0;
}
.authentication-checkbox {
label {
position: relative;
font-size: 15px;
color: #828282;
padding-left: 27px;
cursor: pointer;
&:before {
content: "";
width: 17px;
height: 17px;
border: 2px solid #d5d5d5;
left: 0;
top: 2px;
position: absolute;
transition: all 0.2s linear;
}
&:after {
content: "\e9da";
font-family: "boxicons" !important;
font-size: 15px;
position: absolute;
left: 0;
top: 0px;
transform: translate(1px, 0px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.2s linear;
color: #f14300;
}
}
input {
display: none;
&:checked {
&~label {
&:after {
opacity: 1;
visibility: visible;
pointer-events: all;
}
}
}
}
}
.authentication-link {
a {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration: underline;
border-bottom: 1px solid #f14300;
font-size: 14px;
font-weight: 400;
}
}
.authentication-divider {
position: relative;
display: flex;
justify-content: center;
span {
font-size: 15px;
color: #5f5f5f;
background: #fff;
padding: 10px;
z-index: 1;
}
&:before {
content: "";
width: 100%;
height: 1px;
background: #d5d5d5;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
}
.authentication-social-access {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-right: -10px;
margin-left: -10px;
}
.authentication-social-item {
padding-right: 10px;
padding-left: 10px;
flex:0 0 33.33%;
-ms-flex: 0 1 auto;
max-width: 33.33%;
width: 33.33%;
transition: all 0.3s linear;
transform: translateY(0);
a {
display: flex;
justify-content: center;
text-align: center;
padding: 15px 30px;
border-radius: 35px;
}
&:hover {
transform: translateY(-3px);
}
}
.authentication-img-bg {
background-image: url("../images/authentication-bg.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100vh;
}
// *****404 page
// error page section
.error-page-section {
height: 100vh;
padding: 50px 0;
.container {
height: 100%;
}
}
.error-page-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
h1 {
font-size: 250px;
font-weight: 700;
color: $navy-blue;
letter-spacing: 30px;
}
h3 {
font-size: 25px;
color: $navy-blue2;
margin-top: 25px;
}
p {
font-size: 17px;
margin-top: 25px;
}
.btn1 {
margin-top: 25px;
}
.orange-gradient {
color: #fff;
}
}
// *****service page
// pagination
.pagination {
display: flex;
justify-content: center;
}
.pagination-list {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
li {
height: 33px;
margin-right: 5px;
margin-bottom: 5px;
box-shadow: $box-shadow1;
a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 8px 9px;
border-radius: 2px;
background: #fff;
font-size: 15px;
color: #f14300;
transition: all 0.3s linear;
i {
font-size: 19px;
}
&:hover {
background: #f14300;
color: #fff;
}
}
&.active {
a {
background: #f14300;
color: #fff;
}
}
&.disable {
a {
opacity: 0.5;
cursor: not-allowed;
background: #fff;
color: #f14300;
}
}
}
}
// service page
.service-quote {
padding: 25px;
border-radius: 3px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
.blog-quote-icon {
i {
font-size: 20px;
color: #fff;
}
}
p {
margin-top: 17px;
font-size: 23px;
&.blog-tag-name {
font-size: 14px;
}
}
&.blue-gradient {
p {
color: #fff;
&.blog-tag-name {
background: transparent;
color: #fff;
-webkit-text-fill-color: #fff;
&:before {
background: #fff;
}
}
}
}
}
// *****blog page
// blog post thumb
.blog-post-item {
border-radius: 5px;
box-shadow: $box-shadow1;
overflow: hidden;
margin-bottom: 30px;
text-align: left;
&:hover {
.blog-post-thumb {
a {
img {
transform: scale(1.1);
}
}
}
.blog-post-title {
a {
@include orange-gradient();
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
.blog-post-para {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
}
.blog-post-thumb {
overflow: hidden;
a {
display: block;
img {
width: 100%;
transform: scale(1);
transition: all 0.3s linear;
}
}
}
.blog-post-details {
padding: 25px;
}
.blog-post-entry {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
li {
font-size: 15px;
color: #2948ff;
font-weight: 400;
padding: 4px 10px;
position: relative;
&:before {
content: "\f111";
font-family: "Font Awesome 5 Free";
font-weight: 600;
position: absolute;
right: -2px;
font-size: 4px;
top: 12px;
color: #a0a0a0;
}
&:last-child {
&:before {
content: none;
}
}
}
}
.blog-post-title {
font-size: 24px;
font-weight: 700;
color: #102030;
a {
color: #102030;
}
}
.blog-post-para {
font-size: 17px;
font-weight: 400;
color: #6a6a6a;
}
// *****terms-conditions page
// terms privacy section
.terms-privacy {
.sub-section-title {
font-size: 22px;
font-weight: 700;
display: inline-block;
margin-bottom: 20px;
}
p {
font-size: 16px;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
}
.terms-privacy-list {
margin-bottom: 5px;
display: inline-block;
width: 100%;
li {
margin-bottom: 15px;
p {
font-size: 16px;
display: flex;
strong {
color: #414141;
margin-right: 10px;
}
}
}
}
// ie fixing
@media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {
// navbar in ie
.main-nav {
nav {
.navbar-nav {
.nav-item {
a {
&.active {
color: #f20f10;
background: transparent;
}
}
&:hover {
&>a {
color: #f20f10;
background: transparent;
}
}
.dropdown-menu {
li {
&:hover {
&>a {
color: #f20f10;
background: transparent;
}
}
}
}
}
}
}
}
.main-nav-3 {
background-color: transparent;
nav {
.navbar-nav {
.nav-item {
& > a {
color: #d2d2d2;
&.active {
color: #fff;
background: transparent;
}
}
&:hover {
& > a {
color: #fff;
background: transparent;
}
}
.dropdown-menu {
.nav-item {
a {
&.active {
color: #f20f10;
background: transparent;
}
}
}
}
}
}
}
&.is-sticky {
nav {
.navbar-nav {
.nav-item {
& > a {
color: $navy-blue;
&.active {
color: #f20f10;
background: transparent;
}
}
&:hover {
& > a {
color: #f20f10;
background: transparent;
}
}
.dropdown-menu {
.nav-item {
a {
&.active {
color: #f20f10;
background: transparent;
}
}
}
}
}
}
}
}
}
// meannav
.mean-container .mean-nav {
float: left;
width: 100%;
background: #ffffff;
margin-top: 59px;
ul {
li {
a {
&.active {
color: #f20f10;
background: transparent;
}
}
}
}
}
// navbar option item
.navbar-option-item {
.dropdown-menu {
background: #fff;
border: 0;
padding: 5px 0;
border-radius: 0;
box-shadow: $box-shadow1;
display: block;
transform: translateY(10px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.2s ease-in-out;
}
.dropdown-item {
&:hover {
color: #f20f10;
background: transparent;
}
}
}
// counter item text color
.counter-item {
h3 {
color: #0856e6;
background: transparent;
}
}
// counter-item-white
.counter-item-white {
h3 {
color: #fff;
background: transparent;
}
}
// home-service-text
.home-service-text {
a {
&:before {
color: #0856e6;
background: transparent;
}
&:after {
color: #f20f10;
background: transparent;
}
}
}
// download option
.download-option {
p {
color: #f20f10;
background: transparent;
}
}
// home service start
.home-service-start {
p {
a {
&.blue-gradient {
color: #0856e6;
background: transparent;
&:hover {
color: #f20f10;
background: transparent;
}
}
&.orange-gradient {
color: #f20f10;
background: transparent;
&:hover {
color: #0856e6;
background: transparent;
}
}
}
}
}
// help block
.help-block {
&.with-errors {
color: #f20f10;
background: transparent;
}
}
// submit post info
.submit-post-info {
&.text-success {
color: #0856e6;
background: transparent;
}
&.text-danger {
color: #f20f10 !important;
background: transparent;
}
}
// authentication link
.authentication-link {
a {
color: #f20f10;
background: transparent;
}
}
// blog post item
.blog-post-item {
&:hover {
.blog-post-title {
a {
color: #f20f10;
background: transparent;
}
}
}
}
// blog details content
.blog-details-content {
p {
&.blog-tag-name {
color: #f20f10;
background: transparent;
}
}
}
// blog people reply action
.blog-people-reply-action {
p {
color: #f20f10;
background: transparent;
}
}
// blog sidebar tag list
.blog-sidebar-tag-list {
li {
a {
&:hover {
color: #f20f10;
background: transparent;
}
}
}
}
}