/*======= COMMON CSS =======*/
body {
font-weight: 400;
font-style: normal;
overflow-x: hidden;
font-size: 15px;
line-height: 1.8;
font-family: $karla;
color: $text-color;
overflow-x: hidden;
}
* {
margin: 0;
padding: 0;
@include box-sizing(border-box);
}
img {
max-width: 100%;
@include transition(0.3s);
}
a:focus,
.slick-initialized .slick-slide:focus,
input:focus,
textarea:focus,
select:focus,
button:focus {
text-decoration: none;
outline: none;
box-shadow: none;
}
::-webkit-scrollbar {
background-color: #ccc;
width: 8px;
height: 4px;
}
::-webkit-scrollbar-thumb {
background-color: $secondary-color;
}
.slick-slide img {
display: inline-block;
}
a:focus,
a:hover {
text-decoration: none;
}
i,
span,
a {
display: inline-block;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
margin: 0px;
color: $secondary-color;
font-family: $gilroy;
}
ul,
ol {
margin: 0px;
padding: 0px;
list-style-type: none;
}
p {
margin: 0px;
&.text-color-2 {
color: $text-color-2;
}
&.text-color-3 {
color: $text-color-3;
}
&.fs-16 {
font-size: 16px;
}
}
a {
@include transition(0.3s);
color: $primary-color;
text-decoration: none;
}
/*======= Input Styles =======*/
input,
textarea,
select {
width: 100%;
height: 70px;
background-color: $white;
color: $text-color-2;
padding: 0 30px;
font-size: 16px;
border: none;
}
textarea {
height: 170px;
display: inherit;
padding-top: 20px;
}
::placeholder {
color: inherit;
opacity: 1;
}
input[type="search"]::-ms-clear {
display: none;
width: 0;
height: 0;
}
input[type="search"]::-ms-reveal {
display: none;
width: 0;
height: 0;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
input[type=checkbox], input[type=radio] {
height: auto;
width: auto;
}
.input-group {
position: relative;
input,
textarea,
select {
padding-right: 40px;
}
.icon {
position: absolute;
right: 30px;
z-index: 2;
top: 50%;
transform: translateY(-50%);
color: $text-color-2;
line-height: 1;
}
&.textarea-group {
.icon {
transform: translateY(0);
top: 20px;
}
}
}
/*======= Common Class =======*/
.container-1470 {
@include respond-above(xxl) {
max-width: 1470px;
}
}
.header-full-width {
.container-fluid {
@include respond-above(xl) {
padding-left: 30px;
padding-right: 30px;
}
}
}
.section-gap {
padding-top: 120px;
padding-bottom: 120px;
}
.section-gap-top {
padding-top: 120px;
}
.section-gap-bottom {
padding-bottom: 120px;
}
.section-title {
.title-tag {
color: $primary-color;
font-size: 16px;
font-weight: 700;
padding-bottom: 5px;
z-index: 1;
position: relative;
letter-spacing: 2px;
}
.title {
font-size: 55px;
font-weight: 700;
position: relative;
@include respond-between(lg, xl) {
font-size: 40px;
}
@include respond-below(lg) {
font-size: 40px;
}
@include respond-below(md) {
font-size: 35px;
}
@include respond-below(sm) {
font-size: 30px;
}
}
&.white-color {
.title-tag,
.title,
p {
color: $white;
}
}
&.with-right-border {
.title-tag {
letter-spacing: 0;
padding-right: 100px;
position: relative;
@include respond-below(sm) {
padding-right: 0;
padding-top: 10px;
}
&::before {
position: absolute;
content: "";
right: 0;
top: 50%;
height: 2px;
width: 70px;
background: $primary-color;
transform: translateY(-50%);
@include respond-below(sm) {
top: 0;
transform: translateY(0);
right: auto;
left: 0;
width: 50px;
}
}
}
}
}
.section-title-two {
position: relative;
z-index: 2;
.title-tag {
color: $primary-color;
font-size: 16px;
font-weight: 700;
padding-bottom: 5px;
}
.title {
font-size: 55px;
font-weight: 700;
@include respond-between(lg, xl) {
font-size: 40px;
}
@include respond-below(lg) {
font-size: 40px;
}
@include respond-below(sm) {
font-size: 30px;
}
}
.big-text {
position: absolute;
font-size: 180px;
font-family: "GilroyBold";
font-weight: 700;
bottom: 20px;
left: 0;
color: #f5f6f8;
z-index: -1;
line-height: 1;
@include respond-between(lg, xl) {
font-size: 140px;
}
@include respond-below(lg) {
font-size: 120px;
}
@include respond-below(sm) {
font-size: 100px;
}
}
&.text-center {
.big-text {
left: 50%;
transform: translateX(-50%);
}
}
&.text-right {
.big-text {
left: auto;
right: 0;
}
}
&.white-color {
.title-tag,
.title {
color: $white;
}
}
}
.soft-blue-bg {
.section-title-two .big-text {
color: #eaf2f8;
}
}
.soft-blue-bg {
background-color: $soft-blue;
}
.primary-bg {
background-color: $primary-color;
}
.secondary-bg {
background-color: $secondary-color;
}
.main-btn {
padding: 22px 45px;
background-color: $primary-color;
font-size: 16px;
font-weight: 600;
color: $white;
line-height: 1;
position: relative;
z-index: 1;
border: none;
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
z-index: -1;
background-color: $secondary-color;
@include transition(0.3s);
opacity: 0;
visibility: hidden;
}
&:hover {
color: $white;
&::before {
width: 100%;
opacity: 1;
visibility: visible;
}
}
i {
margin-right: 5px;
position: relative;
top: 2px;
}
&.main-btn-2 {
background-color: #b7c3d6;
}
&.main-btn-3 {
background-color: $white;
color: $primary-color;
&:hover {
color: $white;
}
}
&.small-size {
padding: 22px 40px;
font-size: 15px;
}
&.icon-right {
i {
margin-right: 0;
margin-left: 5px;
}
}
&.rounded-btn {
&,
&::before {
border-radius: 5px;
}
}
&.transparent-border-btn {
background-color: transparent;
color: $white;
border: 2px solid rgba($white, 0.2);
&::before {
background-color: $primary-color;
}
&:hover {
border-color: $primary-color;
}
}
}
.page-pagination {
display: flex;
justify-content: center;
flex-wrap: wrap;
li {
margin: 0 5px;
}
a {
border-radius: 50%;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-color: $white;
color: #70a3bb;
font-size: 14px;
font-weight: 700;
background-color: $white;
&.active,
&:hover {
background-color: $primary-color;
color: $white;
}
}
&.blog-pagination {
a {
background-color: $soft-blue;
&.active,
&:hover {
background-color: $primary-color;
color: $white;
}
}
}
}
.bg-cover {
background-size: cover;
background-position: center;
}
/*======= Preloader =======*/
div#preloader {
margin: auto;
position: fixed;
width: 100%;
height: 100%;
z-index: 9999999;
.image{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
max-width: 160px;
}
}
}
/*======= Margin Top =======*/
.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;
}
.mt-65 {
margin-top: 65px;
}
.mt-70 {
margin-top: 70px;
}
.mt-75 {
margin-top: 75px;
}
.mt-80 {
margin-top: 80px;
}
.mt-85 {
margin-top: 85px;
}
.mt-90 {
margin-top: 90px;
}
.mt-95 {
margin-top: 95px;
}
.mt-100 {
margin-top: 100px;
}
/*======= Margin Bottom =======*/
.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;
}
.mb-55 {
margin-bottom: 55px;
}
.mb-60 {
margin-bottom: 60px;
}
.mb-65 {
margin-bottom: 65px;
}
.mb-70 {
margin-bottom: 70px;
}
.mb-75 {
margin-bottom: 75px;
}
.mb-80 {
margin-bottom: 80px;
}
.mb-85 {
margin-bottom: 85px;
}
.mb-90 {
margin-bottom: 90px;
}
.mb-95 {
margin-bottom: 95px;
}
.mb-100 {
margin-bottom: 100px;
}
/*======= Padding Top =======*/
.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-35 {
padding-top: 35px;
}
.pt-40 {
padding-top: 40px;
}
.pt-45 {
padding-top: 45px;
}
.pt-50 {
padding-top: 50px;
}
.pt-55 {
padding-top: 55px;
}
.pt-60 {
padding-top: 60px;
}
.pt-65 {
padding-top: 65px;
}
.pt-70 {
padding-top: 70px;
}
.pt-75 {
padding-top: 75px;
}
.pt-80 {
padding-top: 80px;
}
.pt-85 {
padding-top: 85px;
}
.pt-90 {
padding-top: 90px;
}
.pt-95 {
padding-top: 95px;
}
.pt-100 {
padding-top: 100px;
}
/*======= Padding Bottom =======*/
.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-55 {
padding-bottom: 55px;
}
.pb-60 {
padding-bottom: 60px;
}
.pb-65 {
padding-bottom: 65px;
}
.pb-70 {
padding-bottom: 70px;
}
.pb-75 {
padding-bottom: 75px;
}
.pb-80 {
padding-bottom: 80px;
}
.pb-85 {
padding-bottom: 85px;
}
.pb-90 {
padding-bottom: 90px;
}
.pb-95 {
padding-bottom: 95px;
}
.pb-100 {
padding-bottom: 100px;
}
.mb-lg-gap-30 {
@include respond-below(xl) {
margin-bottom: 30px;
}
}
.mb-lg-gap-40 {
@include respond-below(xl) {
margin-bottom: 40px;
}
}
.mb-lg-gap-50 {
@include respond-below(xl) {
margin-bottom: 50px;
}
}
.mb-lg-gap-60 {
@include respond-below(xl) {
margin-bottom: 60px;
}
}
.mt-lg-gap-30 {
@include respond-below(xl) {
margin-top: 30px;
}
}
.mt-lg-gap-40 {
@include respond-below(xl) {
margin-top: 40px;
}
}
.mt-lg-gap-50 {
@include respond-below(xl) {
margin-top: 50px;
}
}
.mt-md-gap-60 {
@include respond-below(lg) {
margin-top: 60px;
}
}
.mb-lg-gap-30 {
@include respond-below(xl) {
margin-bottom: 30px;
}
}
.mb-md-gap-30 {
@include respond-below(lg) {
margin-bottom: 30px;
}
}
.mb-md-gap-40 {
@include respond-below(lg) {
margin-bottom: 40px;
}
}
.mb-md-gap-50 {
@include respond-below(lg) {
margin-bottom: 50px;
}
}
.mb-md-gap-60 {
@include respond-below(lg) {
margin-bottom: 60px;
}
}
.mt-md-gap-30 {
@include respond-below(lg) {
margin-top: 30px;
}
}
.mt-md-gap-40 {
@include respond-below(lg) {
margin-top: 40px;
}
}
.mt-md-gap-50 {
@include respond-below(lg) {
margin-top: 50px;
}
}
.mt-md-gap-60 {
@include respond-below(lg) {
margin-top: 60px;
}
}
.mb-xs-gap-30 {
@include respond-below(sm) {
margin-bottom: 30px;
}
}
.mb-xs-gap-40 {
@include respond-below(sm) {
margin-bottom: 40px;
}
}
/*======= Animations =======*/
@keyframes sticky {
0% {
top: -200px;
}
100% {
top: 0;
}
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@keyframes sk-foldCubeAngle {
0%,
10% {
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
transform: perspective(140px) rotateX(0);
opacity: 1;
}
100%,
90% {
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
@keyframes pulseBtnBefore {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
@keyframes pulseBtnAfter {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes rotate {
0% {
transform: rotate(-15deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotateTwo {
0% {
transform: rotate(15deg);
}
100% {
transform: rotate(-360deg);
}
}
@keyframes scale {
0% {
transform: scale(0);
}
50% {
transform: scale(2);
}
100% {
transform: scale(0);
}
}
.loader-center{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
img{
max-width: 120px;
}
}