.ct-phone-info {
display: flex;
flex-wrap: wrap;
align-items: center;
.ct-phone-icon {
width: 50px;
min-width: 50px;
height: 50px;
@include border-radius(50px);
background-color: $secondary_color;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
margin-right: 22px;
&:hover {
background-color: $primary_color;
}
}
.label-phone {
font-size: 13px;
color: #a7aebe;
line-height: normal;
display: block;
margin-top: 3px;
}
.phone-number {
font-size: 20px;
color: #0d2252;
font-weight: 700;
@include font-family-heading($heading_default_font);
line-height: normal;
}
.ct-phone-inner {
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-right: 30px;
margin-top: 30px;
}
.ct-email-inner {
margin-top: 30px;
.btn {
@include border-radius(55px);
@include box-shadow(none);
i {
margin-left: 0px;
margin-right: 8px;
}
}
}
}
.ct-fancy-box-grid3 {
border: 1px solid rgba(#d9d9d9, 0.4);
background-color: #f6f8fb;
@include border-radius(1px);
padding: 10px 15px;
@include box-shadow(0 7px 13px rgba(#8b99b9, 0.2));
margin: 0;
.ct-grid-inner {
margin: 0 -15px;
}
.item--title {
margin-bottom: 0px;
font-size: 16px;
line-height: 26px;
}
.item--icon {
line-height: 1;
font-size: 50px;
color: #000000;
margin-right: 18px;
@media #{$max-md} {
margin-right: 0;
margin-bottom: 18px;
}
}
.item--inner {
display: flex;
flex-wrap: nowrap;
align-items: center;
@media #{$max-md} {
display: block;
}
}
.grid-item {
margin-top: 20px;
margin-bottom: 20px;
}
}
.ct-courses-carousel1 {
.item--title {
font-size: 24px;
margin-bottom: 12px;
@include transition(all 220ms linear 0ms);
}
.item--content {
line-height: 1.625;
padding-right: 12%;
@include transition(all 220ms linear 0ms);
@media #{$max-lg} {
padding-right: 0;
}
}
.item--featured {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
@include transition(all 220ms linear 0ms);
opacity: 0;
&:before {
content: '';
background-color: rgba(#0d2252, 0.8);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
}
.item--readmore {
position: absolute;
bottom: -23px;
left: 50px;
.btn {
@include border-radius(46px);
line-height: 46px;
padding: 0 22px;
@include box-shadow(0 7px 9px rgba($primary_color, 0.2) !important);
position: absolute;
bottom: 0;
left: 0;
transform: scaleX(0);
transform-origin: left;
opacity: 0;
z-index: 99;
i {
font-size: 18px;
margin-left: 4px;
}
&:hover {
@include box-shadow(0 7px 9px rgba($secondary_color, 0.2) !important);
}
}
.btn-more-plus {
font-size: 18px;
font-weight: 700;
color: #fff;
@include font-family-heading($heading_default_font);
height: 46px;
width: 46px;
@include border-radius(46px);
background-color: $primary_color;
display: inline-block;
@include box-shadow(0 7px 9px rgba($primary_color, 0.2));
line-height: 46px;
text-align: center;
}
}
.slick-dots {
margin-top: 32px;
}
.grid-item-inner {
border: 1px solid #eaeced;
background-color: #fff;
@include border-radius(1px);
padding: 30px 30px 58px 50px;
position: relative;
margin-bottom: 40px;
z-index: 1;
&:hover {
.item--featured {
opacity: 1;
}
.item--title, .item--content {
color: #fff;
}
.item--readmore {
.btn {
transform: scaleX(1);
opacity: 1;
}
.btn-more-plus {
opacity: 0;
}
}
}
}
}
.ct-point {
text-align: center;
.ct-point-image {
display: inline-block;
margin: auto;
position: relative;
}
.ct-point-meta {
background-color: #fff;
padding: 24px 24px 24px 30px;
@include border-radius(8px);
@include box-shadow(0 18px 16px rgba(12, 12, 12, 0.08));
text-align: left;
width: 290px;
font-size: 15px;
line-height: 25px;
position: absolute;
bottom: 100%;
left: 50%;
@include transform(translate(-50%, 0));
margin-bottom: 48px;
@include transition(all 300ms linear 0ms);
opacity: 0;
visibility: hidden;
@media #{$max-sm} {
display: none;
}
&:before {
content: '';
border-width: 12px;
border-color: #fff transparent transparent;
position: absolute;
bottom: -24px;
left: 50%;
@include transform(translate(-50%, 0));
border-style: solid;
}
> div + div {
margin-top: 6px;
}
}
.ct-point-icon {
cursor: pointer;
position: relative;
img {
max-height: 100px;
@media #{$max-sm} {
max-height: 60px;
}
}
}
.ct-point-item {
position: absolute;
top: 0;
left: 0;
&:hover {
z-index: 99;
.ct-point-icon + .ct-point-meta {
margin-bottom: 28px;
opacity: 1;
visibility: visible;
}
}
}
}
.ct-cta2 {
max-width: 975px;
background-color: $primary_color;
background-image: url(../images/bg-cta-01.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius: 310px 310px 0 0;
margin-right: 45px;
margin-left: 155px;
position: relative;
text-align: center;
padding: 62px 60px 65px;
@media #{$max-lg} {
margin-right: 0;
margin-left: 105px;
}
@media #{$max-sm} {
margin-left: 0;
border-radius: 110px 110px 0 0;
padding-left: 30px;
padding-right: 30px;
}
.item--image {
position: absolute;
bottom: 0;
left: -155px;
@media #{$max-lg} {
left: -105px;
img {
max-width: 80%;
}
}
@media #{$max-sm} {
display: none;
}
}
.item--subtitle {
font-size: 16px;
font-weight: 600;
color: #060f25;
@include font-family-heading($heading_default_font);
margin-bottom: 5px;
@media #{$max-sm} {
font-size: 14px;
}
}
.item--title {
margin-bottom: 30px;
font-size: 34px;
line-height: 1.12;
letter-spacing: -0.01em;
color: #fff;
padding: 0 10%;
@media #{$max-md} {
font-size: 24px;
}
@media #{$max-sm} {
font-size: 22px;
line-height: 1.2;
}
}
}
.ct-service-grid10 {
&.style1 {
.item--icon {
width: 68px;
min-width: 68px;
margin-right: 18px;
i {
font-size: 48px;
}
img {
max-width: 68px;
}
}
.item--title {
font-size: 20px;
line-height: 26px;
margin-bottom: 11px;
color: #1d0031;
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
.item--description {
font-size: 16px;
line-height: 25px;
color: #000000;
}
.item--readmore {
display: none;
margin-top: 7px;
}
.grid-item-inner {
background-color: #e9edf0;
position: relative;
@include border-radius(7px);
padding: 30px 20px 30px 27px;
display: flex;
flex-wrap: nowrap;
align-items: center;
@media #{$max-md} {
padding-left: 25px;
padding-right: 15px;
}
&:before {
content: '';
width: 5px;
background-color: $primary_color;
position: absolute;
left: 0;
top: 38px;
bottom: 38px;
}
}
.btn-line i {
margin-left: 4px;
}
.grid-item {
margin-bottom: 64px;
}
}
&.style2 {
.item--icon {
height: 90px;
width: 90px;
min-width: 90px;
@include border-radius(90px);
background-color: #fff;
position: relative;
font-size: 42px;
color: $secondary_color;
text-align: center;
margin-right: 24px;
@include transition(all 300ms linear 0ms);
@media #{$max-md} {
margin-right: 18px;
}
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
}
.item--title {
font-size: 20px;
color: #fff;
margin-top: -5px;
margin-bottom: 12px;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--description {
font-size: 15px;
line-height: 24px;
color: #cdcdcd;
padding-right: 10px;
@media #{$max-lg} {
padding-right: 0;
font-size: 14px;
}
}
.item--readmore {
display: none;
margin-top: 7px;
}
.ct-load-more {
margin-top: -15px;
.btn {
line-height: 47px;
border: 2px solid $primary_color;
background-color: transparent;
color: #fff;
padding: 0 28px;
@include border-radius(51px);
font-size: 15px;
&:hover {
background-color: $primary_color;
}
}
}
.grid-item-inner {
background-color: rgba(#fff, 0.11);
margin-bottom: 55px;
@include border-radius(8px);
padding: 30px 30px 24px 30px;
display: flex;
flex-wrap: nowrap;
position: relative;
@media #{$max-lg} {
padding-left: 20px;
}
@media #{$max-sm} {
padding-right: 15px;
}
&:before {
content: '';
height: 0px;
width: 9px;
top: 48px;
left: -5px;
background-color: $primary_color;
position: absolute;
@include transition(all 300ms linear 0ms);
opacity: 0;
}
&:hover {
.item--icon {
color: #fff;
background-color: $primary_color;
}
&:before {
opacity: 1;
height: 55px;
}
}
}
}
}
.ct-banner3 {
padding-left: 30px;
padding-bottom: 30px;
padding-right: 50px;
.ct-banner-imge {
position: relative;
img {
width: 100%;
}
&:before {
content: '';
position: absolute;
bottom: -30px;
left: -30px;
border-width: 48px;
border-style: solid;
border-color: transparent transparent $primary_color $primary_color;
z-index: 1;
}
&:after {
content: '';
position: absolute;
bottom: 0px;
left: 0px;
border-width: 30px;
border-style: solid;
border-color: transparent transparent #fff #fff;
}
}
.ct-banner-counter {
position: absolute;
top: 40px;
right: -50px;
background-color: #fff;
padding: 12px 24px 12px 15px;
border-radius: 20px;
@include box-shadow(0 18px 16px rgba(#0c0c0c, 0.08));
display: flex;
flex-wrap: nowrap;
align-items: center;
.counter-number {
font-size: 24px;
line-height: 1;
font-weight: 700;
color: #0d2252;
@include font-family-heading($heading_default_font);
}
.counter-icon {
width: 52px;
height: 52px;
min-width: 52px;
line-height: 52px;
text-align: center;
background-color: $primary_color;
border-radius: 52px;
color: #fff;
font-size: 24px;
margin-right: 14px;
}
.counter-title {
line-height: normal;
}
}
.ct-banner-number {
position: absolute;
bottom: -22px;
left: -20px;
font-size: 35px;
line-height: 1;
color: #fff;
font-weight: 600;
z-index: 9;
@include font-family-heading($heading_default_font);
}
.ct-banner-title {
margin: 8px 0 0;
font-size: 17px;
color: #0d2252;
font-weight: 600;
padding-left: 80px;
}
}
.ct-fancy-box-layout16 {
padding: 50px 20px 40px;
background-color: #fff;
@include box-shadow(0 0 21px rgba(#181c35, 0.2));
text-align: center;
position: relative;
z-index: 1;
.item--icon {
width: 80px;
height: 80px;
position: relative;
background-color: $primary_color;
@include border-radius(100%);
margin: 0 auto 18px auto;
@include transition(all 300ms linear 0ms);
color: #fff;
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
font-size: 45px;
}
svg {
height: 45px;
fill: #fff;
}
}
.item--title {
margin: 0 0 11px;
font-size: 24px;
color: #0d2252;
@include transition(all 300ms linear 0ms);
}
.item--description {
font-size: 16px;
line-height: 24px;
margin-bottom: 11px;
@include transition(all 300ms linear 0ms);
}
.item--button {
a {
font-size: 14px;
color: #0d2252;
font-weight: 600;
@include font-family-heading($heading_default_font);
line-height: 28px;
display: inline-flex;
padding: 0 16px;
align-items: center;
position: relative;
z-index: 1;
&:before {
content: '';
width: 28px;
height: 28px;
right: 16px;
background-color: $primary_color;
border-radius: 28px;
position: absolute;
top: 0;
z-index: -1;
@include transition(all 200ms linear 0ms);
opacity: 0;
}
&:hover:before {
@include box-shadow(0 7px 8px rgba($primary_color, 0.3));
}
}
i {
width: 28px;
height: 28px;
background-color: $primary_color;
border-radius: 28px;
line-height: 28px;
color: #fff;
font-size: 17px;
font-weight: normal;
margin-left: 6px;
}
}
.item--overlay {
background-color: #051435;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
@include transition(all 300ms linear 0ms);
opacity: 0;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(#051435, 0.5);
}
}
}
.ct-fancy-box-layout16:hover, .elementor-widget-ct_fancy_box.active .ct-fancy-box-layout16 {
.item--title, .item--description {
color: #fff;
}
.item--icon {
background-color: #fff;
color: $primary_color;
svg {
fill: $primary_color;
}
}
.item--overlay {
opacity: 1;
}
.item--button {
a {
color: #fff;
&:before {
width: calc( 100% - 16px );
width: -webkit-calc( 100% - 16px );
opacity: 1;
}
}
}
}
body {
img.mfp-img {
padding: 0 !important;
}
.mfp-fade.mfp-bg.mfp-ready {
opacity: 0.9;
}
.mfp-iframe-scaler .mfp-close {
position: absolute;
line-height: 40px;
padding: 0;
right: 0;
text-align: center;
top: -44px;
width: 40px;
@include border-radius(2px 2px 0 0);
background-color: #000;
&:hover {
background-color: $primary_color;
}
}
.mfp-bottom-bar {
margin-top: 0;
}
.mfp-wrap .mfp-container .mfp-arrow {
background-color: $primary_color;
width: 60px;
height: 120px;
opacity: 1;
&:before, &:after {
border: none;
}
&:before {
font-family: "Material-Design-Iconic-Font";
font-size: 20px;
color: #fff;
margin: 0;
padding: 0;
line-height: normal;
position: absolute;
top: 50%;
display: block;
@include transform(translate(-50%, -50%));
opacity: 1;
left: 50%;
width: auto;
height: auto;
}
&.mfp-arrow-left:before {
content: "\f2ea";
}
&.mfp-arrow-right:before {
content: "\f2ee";
}
}
@media #{$min-xl} {
.mfp-wrap .mfp-container {
padding: 0 120px;
}
}
.mfp-inline-holder .mfp-content {
max-width: 600px;
margin: auto;
.item--popup {
background-color: #fff;
@include border-radius(5px);
padding: 40px 30px;
margin: auto;
}
.mfp-close {
top: 0;
background-color: $primary_color;
background-image: none;
color: #fff;
height: 30px;
width: 30px;
line-height: 30px;
font-size: 20px;
border-radius: 0 5px 0 0;
}
}
}
.ct-background-animate, .ct-animate-inner {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.ct-background-animate {
overflow: hidden;
.ct-animate-overlay {
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
z-index: 1;
}
.ct-animate-inner {
background-position: left center;
background-repeat: repeat-x;
width: 200%;
animation-name: background-animate;
animation-duration: 70s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: background-animate;
-webkit-animation-duration: 70s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: background-animate;
-moz-animation-duration: 70s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: background-animate;
-ms-animation-duration: 70s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: background-animate;
-o-animation-duration: 70s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
+ .elementor-container {
z-index: 99;
}
}
#ct-mouse-move {
position: fixed;
z-index: 9999;
.circle-cursor {
position: fixed;
top: inherit;
left: inherit;
pointer-events: none;
}
.circle-cursor--inner {
width: 6px;
height: 6px;
background-color: $primary_color;
@include border-radius(6px);
margin-top: -5px;
margin-left: -4px;
}
.circle-cursor--outer {
width: 30px;
height: 30px;
border: 1px solid rgba($primary_color, 0.5);
@include border-radius(30px);
margin-top: -17px;
margin-left: -16px;
@include transition(all 50ms linear 0ms);
}
}
.revslider-initialised {
margin-bottom: 0 !important;
i {
font-weight: 900;
&.space-right {
margin-right: 12px;
}
}
.color-primary {
color: $primary_color;
}
cite {
color: $primary_color;
font-weight: 500;
}
.space-left {
margin-left: 8px;
}
.btn {
line-height: 65px !important;
padding: 0 40px !important;
font-size: 16px !important;
@media #{$max-xsx} {
padding: 0 30px !important;
}
&.btn-slider2 {
@include border-radius(56px);
line-height: 56px !important;
}
&.btn-slider3 {
line-height: 48px !important;
@include border-radius(3px);
padding: 0 32px;
color: #000000;
font-size: 15px !important;
&:hover, &:focus {
color: #fff;
background-color: $third_color;
border-color: $third_color;
}
}
&.btn-half-circle1 {
padding-left: 40px !important;
padding-right: 48px !important;
line-height: 56px !important;
&:hover {
padding-left: 44px !important;
padding-right: 44px !important;
}
}
&.btn-half-circle2 {
line-height: 56px !important;
padding-left: 34px !important;
padding-right: 58px !important;
}
&.btn-icon-fixed-right {
line-height: 50px !important;
font-size: 16px !important;
font-weight: 600 !important;
padding: 0 58px 0 28px !important;
@include border-radius(50px);
i {
margin: 0;
position: absolute;
top: 50%;
@include transform(translate(0, -50%));
right: 9px;
height: 32px;
width: 32px;
background-color: #fff;
border-radius: 100%;
line-height: 32px;
text-align: center;
color: $secondary_color;
font-size: 14px;
}
&:hover i {
color: #fff;
background-color: $primary_color;
}
}
&.btn-icon-fixed-right-s {
line-height: 56px !important;
font-size: 16px !important;
font-weight: 600 !important;
padding: 0 73px 0 42px !important;
@include border-radius(50px);
background-color: $secondary_color;
i {
margin: 0;
position: absolute;
top: 50%;
@include transform(translate(0, -50%));
right: 9px;
height: 44px;
width: 44px;
background-color: $primary_color;
border-radius: 100%;
line-height: 44px;
text-align: center;
color: #fff;
font-size: 16px;
}
&:hover {
background-color: $primary_color;
i {
color: $secondary_color;
background-color: #fff;
}
}
}
}
.rev-btn:not(hover) .color-main {
color: $primary_color;
}
.shap-slider-bottom {
transform:skew(-29deg) !important;
-webkit-transform:skew(-29deg) !important;
transform-origin: left bottom !important;
-webkit-transform-origin: left bottom !important;
}
.title-box-shadow {
text-shadow: 0px 3px 4px rgba(#000000, 0.29);
-webkit-text-shadow: 0px 3px 4px rgba(#000000, 0.29);
-ms-text-shadow: 0px 3px 4px rgba(#000000, 0.29);
-o-text-shadow: 0px 3px 4px rgba(#000000, 0.29);
}
.arrow-hidden {
opacity: 0 !important;
visibility: hidden !important;
}
.text-shadow-preset1 {
text-shadow: 6px 2px 0 $gradient_color_from;
-webkit-text-shadow: 6px 2px 0 $gradient_color_from;
}
.tp-leftarrow.custom, .tp-rightarrow.custom {
width: 77px !important;
height: 77px !important;
@include border-radius(77px !important);
background-color: rgba(#5f5f68, 0.67) !important;
@include transition(all 300ms linear 0ms);
opacity: 1 !important;
&:before {
font-size: 24px !important;
color: #fff !important;
font-family: "Font Awesome 5 Pro" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
@include transform(translate(-50%, -50%) !important);
font-weight: 900 !important;
}
&:hover {
background-color: #fff !important;
&:before {
color: #616161 !important;
}
}
@media #{$max-md} {
width: 50px !important;
height: 50px !important;
&:before {
font-size: 16px !important;
}
}
}
.tp-leftarrow.hesperiden, .tp-rightarrow.hesperiden {
width: 69px !important;
height: 69px !important;
@include border-radius(3px !important);
background-color: #dadbdc !important;
@include transition(all 300ms linear 0ms);
opacity: 1 !important;
&:before {
font-size: 24px !important;
color: #000000 !important;
font-family: "Font Awesome 5 Pro" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
@include transform(translate(-50%, -50%) !important);
font-weight: 400 !important;
}
&:hover {
background-color: #385b94 !important;
&:before {
color: #fff !important;
}
}
@media #{$max-xl} {
width: 50px !important;
height: 50px !important;
&:before {
font-size: 16px !important;
}
}
@media #{$max-sm} {
display: none !important;
}
}
.tp-leftarrow.custom:before, .tp-leftarrow.hesperiden:before {
content: '\f104' !important;
}
.tp-rightarrow.custom:before, .tp-rightarrow.hesperiden:before {
content: '\f105' !important;
}
.tp-leftarrow.persephone, .tp-rightarrow.persephone {
width: 66px !important;
height: 66px !important;
@include border-radius(0px !important);
background-color: #fff !important;
@include transition(all 300ms linear 0ms);
opacity: 1 !important;
border: none !important;
&:before {
font-size: 24px !important;
color: $primary_color !important;
font-family: "Font Awesome 5 Pro" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
@include transform(translate(-50%, -50%) !important);
font-weight: 400 !important;
}
&:hover {
background-color: $secondary_color !important;
&:before {
color: #fff !important;
}
}
@media #{$max-xl} {
width: 50px !important;
height: 50px !important;
&:before {
font-size: 16px !important;
}
}
@media #{$max-sm} {
display: none !important;
}
}
.tp-leftarrow.custom:before, .tp-leftarrow.persephone:before {
content: '\f104' !important;
}
.tp-rightarrow.custom:before, .tp-rightarrow.persephone:before {
content: '\f105' !important;
}
.tp-leftarrow.metis, .tp-rightarrow.metis {
width: 80px !important;
height: 80px !important;
@include border-radius(0px !important);
background-color: #fff !important;
@include transition(all 300ms linear 0ms);
opacity: 1 !important;
&:before {
font-size: 20px !important;
color: #000 !important;
font-family: "Flaticon-v2" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
@include transform(translate(-50%, -50%) !important);
font-weight: 300 !important;
content: '\f10e' !important;
}
&:hover {
background-color: $primary_color !important;
&:before {
color: #fff !important;
}
}
@media #{$max-lg} {
width: 50px !important;
height: 50px !important;
&:before {
font-size: 16px !important;
}
}
}
.tp-leftarrow.metis {
@media #{$max-lg} {
@include transform(translate(-100px, -50px) !important);
}
&:before {
@include transform(translate(-50%, -50%) scaleX(-1) !important);
}
}
.tp-rightarrow.metis {
@media #{$max-lg} {
@include transform(translate(-50px, -50px) !important);
}
}
.tp-leftarrow.hephaistos, .tp-rightarrow.hephaistos {
width: 47px !important;
height: 47px !important;
@include border-radius(0px !important);
background-color: #fff !important;
@include transition(all 300ms linear 0ms);
opacity: 1 !important;
&:before {
font-size: 20px !important;
color: #000 !important;
font-family: "Font Awesome 5 Pro" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
@include transform(translate(-50%, -50%) !important);
}
&:hover {
background-color: $primary_color !important;
&:before {
color: #fff !important;
}
}
}
.tp-leftarrow.hephaistos:before {
content: '\f104' !important;
}
.tp-rightarrow.hephaistos:before {
content: '\f105' !important;
}
.tparrows.slider-arrow-style1 {
width: 54px;
height: 54px;
background-image: none;
background-color: $primary_color;
@include border-radius(54px);
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
@media #{$max-lg} {
width: 46px;
height: 46px;
}
&:before {
font-size: 22px !important;
color: #fff !important;
font-family: "Font Awesome 5 Pro" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
@include transform(translate(-50%, -50%) !important);
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
&.tp-leftarrow:before {
content: '\f104' !important;
}
&.tp-rightarrow:before {
content: '\f105' !important;
}
}
.tp-bullets.custom .tp-bullet {
height: 18px;
width: 18px;
@include border-radius(18px);
border: 2px solid #fff;
background: transparent;
@media #{$max-md} {
width: 10px;
height: 10px;
}
&:before {
display: none;
}
&.selected {
background: #fff;
}
}
.tp-bullets.hermes .tp-bullet {
height: 14px !important;
width: 7px !important;
@include border-radius(7px !important);
border: none !important;
background: #b3b3b3 !important;
@include box-shadow(none !important);
&:before, &:after {
display: none !important;
}
&.selected {
background: $primary_color !important;
border: none !important;
}
}
.tp-bullets.ares {
.tp-bullet {
height: 16px !important;
width: 16px !important;
border: 2px solid #1d1b4c !important;
background-color: transparent !important;
box-sizing: inherit !important;
&:before {
@include transition(all 300ms linear 0ms);
content: '';
height: 12px;
width: 12px;
position: absolute;
top: 0px;
left: 0px;
background-color: $primary_color;
@include border-radius(11px);
opacity: 0;
}
&.selected {
background-color: #1d1b4c !important;
@include transform(scale(1.3));
&:before {
opacity: 1;
@include transform(scale(0.75));
}
}
}
.tp-bullet-title {
color: #1d1b4c !important;
}
}
.tp-bullets {
&.case_theme_number {
.tp-bullet {
width: 30px;
height: 30px;
@include border-radius(30px);
background-color: #fff;
line-height: 30px;
text-align: center;
@include transition(all 300ms linear 0ms);
&:before {
font-size: 16px;
font-weight: 700;
color: $secondary_color;
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
@include font-family-heading($heading_default_font);
@include transition(all 300ms linear 0ms);
}
&:after {
content: '';
@include transition(all 300ms linear 0ms);
width: 36px;
height: 36px;
border: 3px solid $primary_color;
@include border-radius(100%);
position: absolute;
top: -3px;
left: -3px;
opacity: 0;
}
&.selected {
background-color: transparent;
&:before {
color: #fff;
}
&:after {
opacity: 1;
}
}
&:nth-child(1):before {
content: '1';
}
&:nth-child(2):before {
content: '2';
}
&:nth-child(3):before {
content: '3';
}
&:nth-child(4):before {
content: '4';
}
&:nth-child(5):before {
content: '5';
}
&:nth-child(6):before {
content: '6';
}
&:nth-child(7):before {
content: '7';
}
&:nth-child(8):before {
content: '8';
}
&:nth-child(9):before {
content: '9';
}
&:nth-child(10):before {
content: '10';
}
}
}
&.case_theme_dot_one {
.tp-bullet {
height: 14px !important;
width: 14px !important;
border: 2px solid #c5c5c5;
@include border-radius(14px);
background-color: transparent;
&.selected {
border-color: $primary_color;
background-color: $primary_color;
}
+ .tp-bullet {
&:before {
content: '';
width: 2px;
height: 43px;
position: absolute;
left: 4px;
background-color: #4b4b4b;
top: -49px;
}
}
}
&.vertical {
&:before, &:after {
content: '';
width: 2px;
height: 34px;
background-color: #4b4b4b;
position: absolute;
left: 6px;
}
&:before {
top: -40px;
}
&:after {
bottom: -40px;
}
}
}
}
.tp-thumbs {
&.case_theme_thumb1 {
.tp-thumb-img-wrap {
padding: 0 !important;
border: 2px solid #fff;
.tp-thumb-image {
padding: 0 !important;
}
}
.selected .tp-thumb-img-wrap {
border-color: $primary_color;
}
}
}
.ct-video-button {
text-align: center !important;
height: 55px !important;
width: 55px !important;
line-height: 55px !important;
z-index: 1;
font-size: 12px !important;
color: #fff !important;
border: none !important;
@include border-radius(100%);
display: block;
text-indent: -99999px;
i {
text-indent: 0px;
}
&:before, &:after {
display: none;
}
.line-video-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid rgba($primary_color, 0.39);
@include border-radius(100%);
animation: squares 3.9s linear 0s infinite;
-webkit-animation: squares 3.9s linear 0s infinite;
-ms-animation: squares 3.9s linear 0s infinite;
-o-animation: squares 3.9s linear 0s infinite;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
opacity: 0;
&.line-video-2 {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
-o-animation-delay: 1.3s;
animation-delay: 1.3s;
}
&.line-video-3 {
-webkit-animation-delay: 2.6s;
-moz-animation-delay: 2.6s;
-o-animation-delay: 2.6s;
animation-delay: 2.6s;
}
}
&:hover .line-video-animation {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
&.video-size2 {
height: 65px !important;
width: 65px !important;
line-height: 65px !important;
font-size: 14px !important;
}
&.color1 {
@include background-gradient-bottom($gradient_color_from, $gradient_color_to);
.line-video-animation {
border-color: rgba($gradient_color_from, 0.39);
}
}
&.border-effect {
&:before {
content: "";
position: absolute;
z-index: 0;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba($primary_color, 0.63);
border-radius: 50%;
animation: pulse-border2 1500ms ease-out infinite;
-webkit-animation: pulse-border2 1500ms ease-out infinite;
z-index: -2;
}
&:after {
display: block;
content: '';
background-color: inherit;
background-image: inherit;
@include border-radius(inherit);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
&:hover, &:focus {
&:before {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
}
&.white {
color: #000 !important;
&:before {
background-color: rgba(#fff, 0.35);
}
&:after {
background: #fff;
}
}
}
&.video-style2 {
height: 56px !important;
width: 56px !important;
line-height: 56px !important;
&:before {
content: "";
position: absolute;
z-index: 0;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba($primary_color, 0.63);
border-radius: 50%;
animation: pulse-border 1500ms ease-out infinite;
-webkit-animation: pulse-border 1500ms ease-out infinite;
z-index: -1;
}
&:hover, &:focus {
&:before {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
}
}
&.video-style3 {
height: 65px !important;
width: 65px !important;
line-height: 65px !important;
background-color: #202424;
background-image: none;
font-size: 14px !important;
&:hover {
background-color: $primary_color;
}
@media screen and (max-width: 777px) {
height: 50px !important;
width: 50px !important;
line-height: 50px !important;
font-size: 12px !important;
}
}
}
.text-under-color1 {
u {
text-decoration: none;
position: relative;
&:before {
content: '';
height: 3px;
width: 100%;
@include background-horizontal($gradient_color_to, $gradient_color_from);
position: absolute;
bottom: 17%;
left: 0;
@media #{$max-sm} {
bottom: 15%;
}
}
}
}
.group-box-shadow rs-group.rs-layer {
@include box-shadow(0 8px 8px rgba(#0c0c0c, 0.19));
}
.slider-phone1 {
color: #fff;
&:hover {
color: #fff;
}
i {
font-weight: 400 !important;
margin-right: 10px;
color: $primary_color;
}
}
.subtitle-line {
padding-right: 78px;
position: relative;
&:before {
content: '';
width: 49px;
height: 4px;
background-color: $primary_color;
position: absolute;
top: 50%;
right: 0;
@include transform(translate(0, -50%));
}
@media #{$max-sm} {
padding-right: 54px;
&:before {
width: 34px;
height: 3px;
}
}
}
.icon-space-right {
margin-right: 12px;
}
.title-space-bottom {
padding-bottom: 10px;
}
.tp-thumbs.theme_custom1 {
max-width: 1170px !important;
padding: 0 !important;
width: 100% !important;
transform: translate(-50%, 0) !important;
left: 50% !important;
top: auto !important;
bottom: 0 !important;
height: auto !important;
@media #{$max-lg} {
display: none !important;
}
.tp-thumb-mask, .tp-thumbs-inner-wrapper {
width: 100% !important;
height: 85px !important;
max-width: 100% !important;
}
.tp-thumbs-inner-wrapper {
display: flex;
flex-wrap: nowrap;
}
.tp-thumb {
width: 33.33% !important;
height: auto !important;
left: auto !important;
position: static !important;
@include font-family-heading($heading_default_font);
font-size: 18px;
font-weight: 600;
color: rgba(#fff, 0.67);
text-align: center;
opacity: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
span {
display: inline-block;
line-height: 85px;
padding: 0 42px;
position: relative;
&:before {
content: '';
height: 4px;
width: 0%;
position: absolute;
top: 0;
left: 0;
@include background-horizontal($gradient_color_from, $gradient_color_to);
@include transition(all 300ms linear 0ms);
opacity: 0;
}
}
&.selected {
color: #fff;
span:before {
opacity: 1;
width: 100%;
}
}
}
}
}
.elementor-widget-slider_revolution.hide-arrow .tp-leftarrow {
opacity: 0 !important;
visibility: hidden !important;
}
.social-slider {
padding-top: 122px;
position: relative;
list-style: none;
margin-bottom: 0;
font-size: 0px;
text-align: center;
&:before {
content: '';
width: 3px;
height: 110px;
background-color: #686868;
position: absolute;
top: 0;
left: 50%;
@include transform(translate(-50%, 0));
}
i:before {
font-size: 20px;
color: #c7c7c7;
@include transition(all 300ms linear 0ms);
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
li {
margin-top: 13px;
position: relative;
height: 30px;
width: 30px;
&:hover i:before {
color: #0e0e0e;
}
}
br {
display: none;
}
@media #{$max-xxl} {
margin-left: -50px;
}
@media #{$max-xl} {
display: none;
}
}
.ct-navigation-menu1 {
&.tow-col-light ul.menu li {
margin-bottom: 12px;
}
&.one-col-light, &.tow-col-light {
ul.menu {
display: flex;
flex-wrap: wrap;
li {
&.megamenu {
display: none;
}
a {
color: #9d9d9d;
position: relative;
font-size: 14px;
padding-left: 16px;
margin-bottom: 12px;
&:before {
content: "\f105";
font-family: "Font Awesome 5 Pro";
font-weight: 900;
margin-right: 8px;
position: absolute;
top: 50%;
left: 0;
@include transform(translate(0, -50%));
}
&:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
left: 15px;
height: 1px;
background-color: #fff;
transform-origin: right center;
-webkit-transform-origin: right center;
@include transform(scale(0, 1));
@include transition(transform 0.25s cubic-bezier(0.37, 0.31, 0.2, 0.85));
}
}
&:hover > a,
&.current_page_item > a,
&.current-menu-item > a,
&.current_page_ancestor > a,
&.current-menu-ancestor > a {
margin-left: 8px;
color: #fff;
&:after {
transform-origin: left center;
-webkit-transform-origin: left center;
@include transform(scale(1, 1));
}
}
&:last-child {
margin-bottom: 0;
}
}
> li {
width: 50%;
@media #{$max-xs} {
width: 100%;
}
}
li {
a {
color: #9d9d9d;
}
&:hover > a,
&.current_page_item > a,
&.current-menu-item > a,
&.current_page_ancestor > a,
&.current-menu-ancestor > a {
color: #fff;
}
}
}
}
&.one-col-light ul.menu > li {
width: 100%;
}
&.default {
ul {
margin-top: -12px;
&.sub-menu {
margin-top: 0;
}
}
li {
&.megamenu {
display: none;
}
a {
margin-top: 12px;
display: block;
font-size: 18px;
font-weight: 600;
color: #0e0e0e;
padding: 22px 35px;
@media #{$max-lg} {
padding: 16px 30px 16px 20px;
}
&:before {
background-color: #ececec;
@include border-radius(1px);
border: 1px solid #d7d7d7;
}
&:after {
background-color: $secondary_color;
background-image: none;
}
i {
position: absolute;
top: 50%;
right: 29px;
@include transform(translate(0, -50%));
@media #{$max-lg} {
right: 20px;
}
}
}
&.current-menu-item > a {
color: #fff;
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
}
}
}
&.style-light1 {
li {
display: block;
&.megamenu {
display: none;
}
a {
font-size: 14px;
font-weight: 700;
color: #fff;
position: relative;
&:before {
content: '';
height: 1px;
position: absolute;
bottom: 0;
left: 0;
width: 0%;
background-color: rgba($primary_color, 0.45);
opacity: 0;
@include transition(all 300ms linear 0ms);
}
}
&:hover > a {
color: $primary_color;
margin-left: 10px;
&:before {
opacity: 1;
width: 100%;
}
}
+ li {
margin-top: 2px;
}
}
}
&.style-light2 {
a {
font-size: 14px;
color: #0e0e0e;
@include font-family-heading($heading_default_font);
&:before {
content: '\f105';
margin-right: 12px;
font-family: "Font Awesome 5 Pro";
@include transition(.3s cubic-bezier(.24,.74,.58,1));
font-weight: 900;
}
&:hover {
color: $primary_color;
padding-left: 17px;
&:before {
color: $primary_color;
}
}
}
}
}
.ct-title1 {
cite {
font-style: normal;
color: $primary_color;
}
&.style1 {
h3 {
font-size: 24px;
font-weight: 600;
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-bottom: 29px;
span {
display: inline-block;
margin-right: 20px;
}
i {
flex-grow: 1;
height: 1px;
background-color: rgba(#e9eaee, 0.15);
display: inline-block;
}
}
}
&.style2 {
h3 {
font-size: 36px;
padding-left: 76px;
position: relative;
@media #{$max-md} {
font-size: 30px;
}
i {
width: 50px;
height: 3px;
@extend .bg-gradient;
position: absolute;
top: 50%;
left: 0;
@include transform(translate(0, -50%));
@include box-shadow(0 7px 16px rgba(#0c0c0c, 0.22));
}
}
}
&.style3 {
margin-bottom: 30px;
h3 {
font-size: 24px;
padding-right: 54px;
position: relative;
display: inline-block;
margin-bottom: 0;
i {
width: 45px;
height: 2px;
background-color: $primary_color;
position: absolute;
top: 50%;
right: 0;
@include transform(translate(0, -50%));
}
}
}
&.style4 {
h3 {
a {
color: inherit;
display: block;
padding-right: 18px;
position: relative;
&:after {
content: '\f04b';
font-family: "Font Awesome 5 Pro";
position: absolute;
top: 50%;
right: 0;
@include transform(translate(0, -50%));
font-size: 12px;
}
span {
position: relative;
&:before {
content: '';
width: 0;
position: absolute;
left: 0;
bottom: 0;
height: 1px;
background-color: $primary_color;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
}
&:hover {
span:before {
width: 100%;
}
}
}
}
}
}
.ct-list-one {
list-style: none;
margin-bottom: 0;
margin-left: 12px;
font-weight: 700;
color: #000000;
li {
padding-left: 26px;
position: relative;
&:before {
content: '\f061';
font-weight: 400;
font-family: "Font Awesome 5 Pro";
position: absolute;
top: 0;
left: 0;
}
+ li {
margin-top: 18px;
}
}
}
.ct-list {
margin-left: 15px;
margin-bottom: 0;
list-style: none;
@media #{$max-lg} {
margin-left: 0;
}
.ct-list-item {
position: relative;
display: flex;
flex-wrap: nowrap;
h3 {
display: block;
font-size: 24px;
line-height: 1.2;
padding-bottom: 18px;
margin-bottom: 0;
@media #{$max-md} {
font-size: 20px;
}
}
+ .ct-list-item {
margin-top: 12px;
}
}
.ct-list-meta {
position: relative;
}
.item--link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
cite {
font-style: normal;
color: $primary_color;
}
&.style1 {
.ct-list-icon {
line-height: 1;
padding-bottom: 2px;
margin-right: 18px;
i {
@extend .text-gradient;
font-size: 22px;
}
}
.ct-list-desc {
font-size: 15px;
color: #636363;
}
}
&.style2 {
margin: 0 - 10px;
font-size: 16px;
line-height: 26px;
font-weight: 600;
color: #0e0e0e;
display: flex;
flex-wrap: wrap;
align-items: center;
.ct-list-icon {
margin-right: 10px;
i:before {
content: '\f101';
}
}
.ct-list-item {
padding: 0 10px;
width: 50%;
margin-top: 20px;
@media #{$max-lg} {
width: 100%;
}
}
&.one-column .ct-list-item {
width: 100%;
}
}
&.style3 {
margin: 0;
.ct-list-icon {
width: 9px;
height: 9px;
background-color: #000000;
@include border-radius(9px);
margin-right: 16px;
margin-top: 10px;
i {
display: none;
}
}
.ct-list-desc {
font-size: 18px;
line-height: 28px;
color: #000000;
}
}
&.style4 {
margin: 0;
font-size: 18px;
color: #283a57;
font-weight: 500;
.ct-list-icon {
margin-right: 12px;
i:before {
content: "\f134";
font-family: Flaticon-v5;
font-weight: 400;
color: $primary_color;
}
}
.ct-list-item + .ct-list-item {
margin-top: 3px;
}
}
&.style5 {
margin: 0;
.ct-list-icon {
display: none;
}
.ct-list-item {
padding-left: 26px;
position: relative;
&:before {
content: '';
width: 9px;
height: 9px;
@include border-radius(9px);
background-color: $primary_color;
position: absolute;
top: 12px;
left: 0;
}
}
.ct-list-item + .ct-list-item {
margin-top: 6px;
}
}
&.style7 {
margin: 0;
.ct-list-icon {
display: none;
}
.ct-list-meta {
padding-left: 46px;
position: relative;
&:before {
content: "\f105";
font-family: "Font Awesome 5 Pro";
position: absolute;
left: 0;
top: 50%;
@include transform(translate(0, -50%));
width: 29px;
height: 29px;
color: $primary_color;
border: 2px solid $primary_color;
border-radius: 29px;
text-align: center;
line-height: 25px;
font-size: 20px;
}
}
.ct-list-item + .ct-list-item {
margin-top: 29px;
}
}
}
.ct-newsletter1 {
&.style1, &.style3 {
form.newsletter {
position: relative;
}
.tnp-field-email {
.tnp-email {
border: none;
background-color: #464646;
@include border-radius(0px);
height: 46px;
font-size: 14px;
font-weight: 400;
color: #fff;
}
}
.tnp-field-button {
margin-bottom: 0;
height: 46px;
width: 62px;
position: absolute;
bottom: 0;
right: 0;
overflow: hidden;
&:before, &:after {
font-weight: 400;
font-family: "Font Awesome 5 Pro";
height: 46px;
width: 62px;
font-size: 14px;
position: absolute;
bottom: 0;
right: 0;
color: #fff;
text-align: center;
line-height: 46px;
z-index: 1;
}
&:before {
content: '';
@include background-horizontal($gradient_color_from, $gradient_color_to);
}
&:after {
z-index: 2;
content: '\f1d8';
}
.tnp-button {
@include border-radius(0px);
position: absolute;
bottom: 0;
right: 0;
height: 46px;
width: 62px;
padding: 0;
opacity: 0;
z-index: 3;
}
&:hover:after {
-o-animation: toRightFromLeft 0.3s forwards;
-ms-animation: toRightFromLeft 0.3s forwards;
-webkit-animation: toRightFromLeft 0.3s forwards;
animation: toRightFromLeft 0.3s forwards;
}
}
}
&.style2 {
max-width: 650px;
margin: auto;
form.newsletter {
display: flex;
flex-wrap: nowrap;
align-items: center;
@media #{$max-xs} {
display: block;
.tnp-field + .tnp-field {
margin-top: 10px;
}
.tnp-button {
width: 100%;
}
}
}
.tnp-field-email {
margin-right: 15px;
flex-grow: 1;
@media #{$max-xs} {
margin-right: 0;
}
.tnp-email {
border: 1px solid #dbe4fe;
@include border-radius(4px);
font-size: 15px;
color: #383838;
padding-left: 28px;
padding-right: 28px;
height: 62px;
@include box-shadow(0 0 57px rgba(#05298c, 0.1));
&:focus {
border-color: $gradient_color_from;
}
}
}
.tnp-button {
line-height: 62px;
padding: 0 38px;
border-radius: 4px;
background-color: $gradient_color_from;
background-image: none;
font-size: 15px;
&:hover, &:focus {
background-color: #000;
}
}
}
&.style3 {
.tnp-field-email {
.tnp-email {
background-color: #eeeeee;
color: #444444;
}
}
.tnp-field-button {
&:before {
background-image: none;
background-color: #0a0462;
}
}
}
&.style4 {
max-width: 855px;
margin: auto;
form.newsletter {
display: flex;
flex-wrap: nowrap;
align-items: center;
@media #{$max-sm} {
display: block;
max-width: 360px;
margin: auto;
}
}
.tnp-field-email {
margin-right: 15px;
@media #{$max-sm} {
margin-right: 0;
}
flex-grow: 1;
.tnp-email {
border: 2px solid #eceff4;
@include border-radius(4px);
font-size: 16px;
color: #636e80;
padding-left: 30px;
padding-right: 28px;
height: 62px;
@include box-shadow(none);
&:focus {
border-color: $third_color;
}
}
}
.tnp-button {
line-height: 62px;
padding: 0 38px;
@include border-radius(4px);
background-color: $third_color;
background-image: none;
font-size: 16px;
font-weight: 600;
@include box-shadow(none);
&:hover, &:focus {
background-color: $primary_color;
}
@media #{$max-sm} {
width: 100%;
margin-top: 20px;
}
}
}
&.type-vertical .tnp-field-button:before {
@include background-gradient-bottom($gradient_color_from, $gradient_color_to);
}
&.style5 {
padding: 0 60px 0 60px;
position: relative;
@include border-radius(30px);
position: relative;
z-index: 1;
display: flex;
flex-wrap: nowrap;
@media #{$max-sm} {
padding: 0 30px;
}
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(#01131e, 0.82);
z-index: -2;
@include border-radius(30px);
}
&:after {
content: '';
background-image: url(../images/bg-newsletter.png);
background-position: center right;
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@media #{$max-md} {
display: none;
}
}
.newsletter-holder {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 58px 0 68px;
max-width: 480px;
}
.newsletter-image {
margin-top: -50px;
flex-grow: 1;
text-align: center;
img {
margin: auto;
}
@media #{$max-lg} {
display: none;
}
}
.sub-title {
font-weight: 500;
color: $primary_color;
letter-spacing: 0.2em;
font-size: 16px;
}
.title {
font-size:36px;
line-height: 48px;
color: #fff;
margin-bottom: 7px;
@media #{$max-sm} {
font-size: 28px;
line-height: 34px;
margin-bottom: 15px;
}
}
.desc {
font-size: 15px;
line-height: 24px;
color: #e2e2e2;
padding-right: 10%;
margin-bottom: 19px;
@media #{$max-lg} {
padding-right: 0;
}
}
.newsletter {
display: flex;
flex-wrap: nowrap;
align-items: center;
max-width: 400px;
@media #{$max-sm} {
display: block;
}
.tnp-email {
height: 56px;
border: none;
color: #848687;
@include border-radius(5px 0 0 5px);
@media #{$max-sm} {
@include border-radius(5px);
margin-bottom: 20px;
}
}
.tnp-button {
line-height: 56px;
padding: 0 34px;
font-size: 15px;
@include border-radius(0 5px 5px 0);
@media #{$max-sm} {
@include border-radius(5px);
width: 100%;
}
&:hover {
background-color: darken($primary_color, 0.08);
}
}
.tnp-field-email {
flex-grow: 1;
}
}
}
&.style6 {
background-color: #ffffff;
@include border-radius(18px);
padding: 58px 70px;
@media #{$max-lg} {
padding-left: 50px;
padding-right: 50px;
}
@media #{$max-sm} {
padding: 40px 30px;
}
.newsletter-holder {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 -35px;
@media #{$max-sm} {
display: block;
}
}
.newsletter-meta, form.newsletter {
width: 50%;
padding: 0 35px;
@media #{$max-sm} {
width: 100%;
}
}
form.newsletter {
display: flex;
flex-wrap: nowrap;
align-items: center;
@media #{$max-lg} {
display: block;
}
}
.title {
margin-bottom: 14px;
font-size: 30px;
color: #282350;
@media #{$max-sm} {
font-size: 22px;
}
}
.desc {
font-size: 17px;
line-height: 28px;
@media #{$max-sm} {
font-size: 16px;
line-height: 1.625;
margin-bottom: 32px;
}
}
.tnp-email {
background-color: #ebeff3;
color: #aaaeb2;
border: none;
height: 53px;
@include border-radius(4px);
}
.tnp-field-email {
flex-grow: 1;
margin-right: 18px;
@media #{$max-lg} {
margin-right: 0;
margin-bottom: 20px;
}
}
.tnp-button {
line-height: 53px;
padding: 0 20px;
@include border-radius(4px);
@include box-shadow(none);
font-weight: 600;
@media #{$max-lg} {
width: 100%;
}
}
}
&.style7 {
background-position: left center;
overflow: hidden;
@include border-radius(3px);
padding: 23px 30px 38px;
text-align: center;
@include box-shadow(0 10px 40px rgba(#03337a, 0.06));
@media #{$max-md} {
background-position: center;
}
.newsletter-holder {
text-align: left;
margin: auto;
max-width: 710px;
padding-left: 160px;
@media #{$max-lg} {
margin-right: 30px;
margin-left: 20%;
}
@media #{$max-md} {
margin-left: auto;
margin-right: auto;
padding: 0;
max-width: 460px;
}
}
.newsletter-meta {
margin-bottom: 22px;
.title {
font-size: 26px;
margin-bottom: 9px;
color: #000c3f;
}
.desc {
font-size: 15px;
color: #41496b;
}
}
.newsletter {
display: flex;
flex-wrap: nowrap;
@media #{$max-sm} {
display: block;
}
.tnp-field-email {
flex-grow: 1;
margin-right: 10px;
@media #{$max-sm} {
margin-right: 0;
margin-bottom: 10px;
}
.tnp-email {
border-color: #fff;
@include box-shadow(0 0 21px rgba(#05298c, 0.06));
font-size: 15px;
color: #41496b;
@include border-radius(3px);
&:focus, &:hover {
border-color: $third_color;
}
}
}
.tnp-button {
@include background-gradient-button(90deg, $third_color 0%, $four_color 50%, $third_color);
@include box-shadow(0 6px 18px rgba($third_color, 0.25));
}
}
}
}
.ct-icon1 {
margin: 0;
list-style: none;
a {
display: inline-block;
i {
height: 29px;
width: 29px;
line-height: 29px;
display: inline-block;
@include border-radius(100%);
font-size: 17px;
color: $primary_color;
background-color: #fff;
text-align: center;
margin-right: 4px;
margin-top: 4px;
margin-bottom: 4px;
&.fa-facebook-f {
color: #16599b;
&:before {
content: "\f39e";
}
}
&.fa-dribbble {
color: #eb568f;
}
&.fa-twitter {
color: #03a9f4;
}
&.fa-behance {
color: #0d6fff;
}
}
&:hover {
@include transform(translateY(-4px));
}
}
&.style2 {
margin-left: -10px;
a {
i {
background-color: transparent;
}
}
}
&.style3 {
display: flex;
flex-wrap: wrap;
i {
width: 37px;
height: 37px;
line-height: 37px;
text-align: center;
background-color: $primary_color;
color: #fff !important;
@include border-radius(100%);
&.fa-facebook-f {
background-color: #166dc4;
}
&.fa-twitter {
background-color: #03a9f4;
}
&.fa-dribbble {
background-color: #ea4c89;
}
&.fa-behance {
background-color: #1644d8;
}
}
a {
margin-right: 8px;
&:hover {
@include transform(translateY(-4px));
}
}
}
}
.ct-contact-info1 {
list-style: none;
margin-bottom: 0;
font-size: 14px;
line-height: 24px;
i {
color: $primary_color;
}
li {
display: flex;
flex-wrap: nowrap;
+ li {
margin-top: 10px;
}
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.ct-contact-icon {
display: inline-block;
margin-right: 10px;
}
&.style2 {
li + li {
margin-top: 25px;
}
.ct-contact-icon {
min-width: 34px;
margin-top: 4px;
i {
font-size: 25px;
@extend .text-gradient;
}
}
.ct-contact-content {
font-size: 18px;
line-height: 30px;
color: #636363;
@media #{$max-md} {
font-size: 16px;
line-height: 26px;
}
}
}
}
.ct-contact-info2 {
border: 3px solid #d4ecfe;
padding: 27px 19px;
.ct-contact-icon {
line-height: 1;
height: 72px;
width: 72px;
min-width: 72px;
position: relative;
background-color: $primary_color;
@include border-radius(3px);
margin-right: 15px;
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
i {
font-size: 40px;
color: #fff;
}
img {
max-height: 40px;
}
}
.item--title {
margin-bottom: 5px;
font-size: 17px;
}
.item--content {
font-size: 14px;
line-height: 20px;
color: #000;
u {
font-weight: 700;
}
}
.ct-contact-link {
width: 35px;
height: 72px;
line-height: 72px;
color: #fff;
font-size: 16px;
text-align: center;
background-color: $primary_color;
position: absolute;
top: 50%;
right: -22px;
@include transform(translate(0, -50%));
&:hover i {
-webkit-animation: toRightFromLeft 0.3s forwards;
-moz-animation: toRightFromLeft 0.3s forwards;
animation: toRightFromLeft 0.3s forwards;
}
}
.item--inner {
display: flex;
flex-wrap: nowrap;
padding-right: 30px;
align-items: center;
position: relative;
+ .item--inner {
margin-top: 23px;
}
}
}
.ct-contact-info3 {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
@media #{$max-sm} {
margin-left: 15px;
}
.ct-contact-inner {
position: relative;
max-width: 360px;
background-color: #000;
padding: 60px 30px 64px;
background-image: url(../images/bg-contact-info.png);
@media #{$max-sm} {
padding-left: 20px;
padding-right: 15px;
}
&:before {
content: '';
border-color: transparent #676767 #676767 transparent;
border-width: 14px;
border-style: solid;
position: absolute;
top: 0;
left: -28px;
}
.wg-title {
margin-bottom: 33px;
font-size: 36px;
color: #fff;
@media #{$max-sm} {
font-size: 24px;
}
span {
display: inline-block;
position: relative;
padding-right: 55px;
&:before {
content: '';
width: 44px;
height: 3px;
background-color: $primary_color;
position: absolute;
right: 0;
top: 50%;
@include transform(translate(0, -50%));
}
}
}
.item--title {
margin-bottom: 0;
font-size: 17px;
line-height: 28px;
color: #b7b7b7;
font-family: "Nunito Sans";
font-weight: 400;
@media #{$max-sm} {
font-size: 15px;
}
}
.item--content {
font-size: 25px;
font-weight: 700;
color: #fff;
@include font-family-heading($heading_default_font);
line-height: 1.2;
margin-top: 3px;
@media #{$max-sm} {
font-size: 20px;
}
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.ct-contact-icon {
line-height: 1;
margin-right: 14px;
i {
font-size: 42px;
color: $primary_color;
}
img {
@media #{$max-sm} {
max-width: 36px;
}
}
}
.item--info {
display: flex;
flex-wrap: nowrap;
align-items: center;
position: relative;
.ct-contact-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
}
+ .item--info {
margin-top: 30px;
}
&:hover .ct-contact-icon {
i, img, svg {
animation: icon-bounce 800ms ease-out infinite;
-webkit-animation: icon-bounce 800ms ease-out infinite;
}
}
}
}
}
.ct-contact-info4 {
.ct-contact-icon {
width: 40px;
height: 40px;
min-width: 40px;
@include border-radius(5px);
position: relative;
color: #fff;
background-color: $primary_color;
margin-right: 12px;
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
i {
font-size: 22px;
}
}
.ct-contact-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
.item--title {
font-size: 14px;
font-weight: 400;
font-family: inherit;
color: #8d8d8d;
margin-top: -2px;
margin-bottom: 0px;
}
.item--content {
font-size: 16px;
font-weight: 600;
color: #fff;
@include font-family-heading($heading_default_font);
}
.item--inner {
display: flex;
flex-wrap: nowrap;
position: relative;
+ .item--inner {
margin-top: 15px;
}
}
}
.ct-client1 {
.client-image {
text-align: center;
a {
display: inline-block;
vertical-align: top;
@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
}
}
.slick-track {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.ct-clients-list-inner {
margin: 0 -15px;
.slick-slide {
padding: 0 15px;
}
}
&.style1 {
.client-image a {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.5;
&:hover {
opacity: 1;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
}
}
&.style2 {
.client-image a {
&:hover {
opacity: 0.87;
@include transform(scale(0.9));
}
}
}
&.style3 {
.client-image {
text-align: center;
padding: 0 15px;
@media #{$max-sm} {
padding: 0;
}
img {
@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
position: relative;
&:nth-child(1) {
opacity: 0.5;
}
&:nth-child(2) {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -150%));
opacity: 0;
}
}
a {
display: inline-block;
vertical-align: top;
@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
position: relative;
overflow: hidden;
&:hover img {
&:nth-child(1) {
@include transform(translateY(100%));
opacity: 0;
}
&:nth-child(2) {
@include transform(translate(-50%, -50%));
opacity: 1;
}
}
}
}
.ct-slick-carousel[data-arrows="true"] {
padding-bottom: 0;
padding-left: 75px;
padding-right: 75px;
@media #{$max-sm} {
padding-left: 35px;
padding-right: 35px;
}
.slick-arrow {
width: 38px;
height: 28px;
color: #919191;
border: 1px solid #d9d9d9;
@include border-radius(0px);
font-weight: 400;
z-index: 99;
@include box-shadow(none);
@include transform(translate(0, -50%));
margin: 0;
&:after {
display: none;
}
&:hover {
background-color: #152644;
border-color: #152644;
color: #fff;
}
&.slick-prev {
left: 15px;
right: auto;
@media #{$max-sm} {
left: 0;
}
}
&.slick-next {
right: 15px;
left: auto;
@media #{$max-sm} {
right: 0;
}
}
}
}
}
&.style4 {
.client-image {
text-align: center;
padding: 0 15px;
@media #{$max-sm} {
padding: 0;
}
a {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.5;
&:hover {
opacity: 1;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
}
img {
@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
position: relative;
&:nth-child(2) {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -150%));
opacity: 0;
}
}
a {
display: inline-block;
vertical-align: top;
@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
position: relative;
overflow: hidden;
&:hover img {
&:nth-child(1) {
@include transform(translateY(100%));
opacity: 0;
}
&:nth-child(2) {
@include transform(translate(-50%, -50%));
opacity: 1;
}
}
}
}
}
&.style5 {
.client-image {
text-align: center;
padding: 15px;
background-color: #f6f8fb;
display: inline-grid;
min-height: 74px;
align-items: center;
min-width: 200px;
justify-content: center;
@include box-shadow(0 7px 30px rgba(#8b99b9, 0.2));
@include transition(all 300ms linear 0ms);
margin: 30px 0;
&:hover {
@include box-shadow(0 7px 30px rgba(#8b99b9, 0.2));
}
a {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.5;
}
img {
@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
position: relative;
&:nth-child(2) {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -150%));
opacity: 0;
}
}
a {
display: inline-block;
vertical-align: top;
@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
position: relative;
overflow: hidden;
}
&:hover {
a {
opacity: 1;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
img {
&:nth-child(1) {
@include transform(translateY(100%));
opacity: 0;
}
&:nth-child(2) {
@include transform(translate(-50%, -50%));
opacity: 1;
}
}
}
@include box-shadow(0 16px 13px rgba(#546385, 0.2));
}
}
.slick-slide {
width: 300px;
justify-content: center;
align-items: center;
display: flex;
}
}
}
.ct-client-grid1 {
overflow: hidden;
padding: 0;
margin: 0;
.client-image {
padding: 41px 20px;
text-align: center;
@media #{$max-sm} {
padding: 30px 15px;
}
img {
@include transition(all 300ms linear 0ms);
}
&:hover img {
@include transform(scale(1.1));
}
}
.client-item-inner {
padding: 18px 22px 22px;
background-color: #000000;
@media #{$max-sm} {
padding-left: 15px;
padding-right: 15px;
}
.btn {
line-height: 30px;
padding: 0 10px;
font-size: 13px;
@include border-radius(3px);
font-weight: 600;
background-color: $gradient_color_to;
color: #000;
&:hover, &:focus {
background-color: $gradient_color_from;
color: #fff;
}
}
}
.client-desc {
font-size: 16px;
line-height: 22px;
color: #cbcbcb;
font-family: "Nunito Sans";
margin-bottom: 11px;
@media #{$max-sm} {
font-size: 13px;
line-height: 22px;
}
}
.ct-grid-inner {
margin: 0 -2px -2px 0;
.grid-item {
padding: 0;
border-right: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
}
}
.item--social .fa {
font-family: 'FontAwesome';
font-weight: normal;
}
.ct-cta1 {
@include border-radius(7px);
background-color: $secondary_color;
padding: 13px 59px;
display: flex;
flex-wrap: wrap;
align-items: center;
> div {
margin: 10px 0;
}
@media #{$max-lg} {
padding-left: 30px;
padding-right: 30px;
}
.item--holder {
flex-grow: 1;
margin-right: 30px;
.item--title {
@include font-family-heading($heading_default_font);
color: #fff;
font-size: 22px;
font-weight: 700;
}
.item--desc {
font-size: 18px;
color: #c6c6c6;
font-weight: 300;
}
}
.btn {
padding: 0 42px;
line-height: 55px;
font-size: 15px;
i {
margin-left: 0;
margin-right: 8px;
}
@media #{$max-sm} {
padding: 0 22px;
}
&:before, &:after {
@include border-radius(inherit);
}
}
}
.ct-history1 {
max-width: 970px;
margin: 0 auto;
padding-top: 34px;
padding-bottom: 140px;
position: relative;
direction: ltr;
@media #{$max-sm} {
padding-top: 114px;
}
&:before {
content: '';
width: 0;
height: 100%;
border-left: 1px dashed rgba(#fff, 0.3);
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
.ct-history--start {
text-align: center;
line-height: 101px;
width: 101px;
height: 101px;
color: #f6f6f6;
font-size: 28px;
font-weight: 700;
@include border-radius(101px);
@extend .bg-gradient;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
z-index: 99;
}
.ct-history--image {
max-width: 140px;
@include border-radius(140px);
border: 2px solid #474747;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
img {
@include border-radius(140px);
}
}
.ct-history--meta {
h3 {
font-size: 26px;
margin-bottom: 8px;
color: #f6f6f6;
font-weight: 600;
@media #{$max-sm} {
font-size: 18px;
}
@media #{$max-xs} {
font-size: 16px;
}
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
span {
font-size: 18px;
line-height: 26px;
color: #bcbcbc;
@media #{$max-sm} {
font-size: 14px;
line-height: 24px;
}
@media #{$max-xs} {
font-size: 13px;
}
}
}
.ct-history--item {
padding-right: 124px;
position: relative;
z-index: 1;
margin-bottom: 21px;
@media #{$max-sm} {
padding-right: 40px;
}
&:before {
content: '';
height: 0;
width: 114px;
border-bottom: 1px dashed rgba(#fff, 0.3);
position: absolute;
top: 15px;
right: 0;
z-index: -1;
@media #{$max-sm} {
width: 30px;
}
}
&:after {
content: '';
width: 21px;
height: 21px;
@include border-radius(21px);
@extend .bg-gradient;
position: absolute;
top: 4px;
right: -11px;
}
}
.ct-history--odd {
.ct-history--item {
text-align: right;
&:nth-child(1) {
margin-top: 80px;
}
&:nth-child(2) {
margin-bottom: 43px;
}
&:nth-child(3) {
margin-bottom: 98px;
}
&:nth-child(4) {
margin-bottom: 92px;
}
}
}
.ct-history--even {
text-align: left;
.ct-history--item {
padding-right: 0;
padding-left: 124px;
@media #{$max-sm} {
padding-left: 40px;
}
&:before {
right: auto;
left: 0;
}
&:after {
right: auto;
left: -11px;
}
&:nth-child(1) {
margin-bottom: 59px;
}
&:nth-child(2) {
margin-bottom: 80px;
}
&:nth-child(4) {
margin-bottom: 108px;
}
}
}
.ct-history--holder {
display: flex;
flex-wrap: wrap;
> div {
width: 50%;
}
}
}
.ct-portfolio-grid1, .ct-portfolio-carousel1 {
.item--video:hover {
@include box-shadow(0 0 0 10px rgba(#fff, 0.14));
}
.item--featured img {
@include transition(all 300ms linear 0ms);
width: 100%;
}
.item--title {
font-size: 18px;
color: #fff;
margin-bottom: 6px;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--category {
font-size: 14px;
color: #8d8d8d;
font-weight: 600;
@include font-family-heading($heading_default_font);
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--readmore {
a {
display: inline-block;
font-size: 30px;
color: #fff;
@include font-family-heading($heading_default_font);
height: 41px;
width: 41px;
line-height: 41px;
text-align: center;
@include background-gradient-button(90deg, $gradient_color_from 0%, $gradient_color_to 50%, $gradient_color_from);
background-size: 300%, 1px;
background-position: 0%;
@include border-radius(100%);
&:hover {
background-position: 100%;
}
}
}
.item--holder {
@include transition(all 300ms linear 0ms);
opacity: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 30px 24px 28px 30px;
z-index: 1;
display: flex;
flex-wrap: nowrap;
align-items: center;
&:before {
content: '';
width: 100%;
left: 0;
bottom: 0;
height: calc(100% + 70px);
height: -webkit-calc(100% + 70px);
@include background-gradient-bottom(rgba(#000409, 0.95), rgba(#000409, 0));
position: absolute;
z-index: -1;
}
.item--meta {
flex-grow: 1;
margin-right: 20px;
}
}
.ct-load-more {
margin-top: 0;
}
.grid-item-inner {
position: relative;
overflow: hidden;
@include border-radius(6px);
margin-bottom: 46px;
&:hover {
.item--holder {
opacity: 1;
}
.item--featured img {
@include transform(scale(1.1) rotate(3deg));
}
}
}
}
.ct-portfolio-grid2 {
.item--holder {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 99;
padding: 0;
@include transition(all 300ms linear 0ms);
@include transform(scaleX(0));
opacity: 0;
@media #{$max-lg} {
padding-left: 20px;
padding-right: 20px;
}
@media #{$max-xs} {
padding-left: 30px;
padding-right: 30px;
}
.item--holder-overlay {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.9;
background-color: #000000;
@include transition(all 300ms linear 0ms);
}
.item--title {
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
color: #fff;
@media #{$max-lg} {
font-size: 18px;
}
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--category {
font-size: 14px;
color: #8d8d8d;
font-weight: 600;
@include font-family-heading($heading_default_font);
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--readmore {
position: absolute;
bottom: 30px;
right: 30px;
line-height: 1;
a {
display: inline-block;
font-size: 32px;
color: #fff;
@include font-family-heading($heading_default_font);
height: 54px;
width: 54px;
line-height: 54px;
text-align: center;
@include background-gradient-button(90deg, $gradient_color_from 0%, $gradient_color_to 50%, $gradient_color_from);
background-size: 300%, 1px;
background-position: 0%;
@include border-radius(100%);
&:hover {
background-position: 100%;
}
}
}
.item--meta {
position: absolute;
top: 30px;
left: 30px;
}
}
.grid-item-inner {
margin-bottom: 30px;
position: relative;
overflow: hidden;
@include border-radius(7px);
&:hover .item--holder {
@include transform(scaleX(1));
opacity: 1;
}
}
.ct-load-more {
margin-top: 0;
}
@media #{$min-lg} {
.ct-grid-inner > .grid-item:nth-child(1) {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
.item--holder {
.item--meta {
top: 65px;
left: 50px;
}
.item--readmore {
bottom: 70px;
right: 40px;
}
}
}
}
}
.ct-portfolio-grid3 {
.item--featured {
margin-bottom: 20px;
position: relative;
overflow: hidden;
@include border-radius(5px);
img {
@include border-radius(5px);
@include transition(all 3000ms linear 0ms);
}
.item--category {
position: absolute;
top: 16px;
left: 16px;
background-color: $primary_color;
color: #fff;
padding: 0 13px;
@include border-radius(2px);
a {
color: inherit;
font-size: 13px;
line-height: 26px;
font-weight: 600;
display: inline-block;
@include font-family-heading($heading_default_font);
&:hover {
color: inherit;
}
}
}
}
.item--title {
margin-bottom: 0;
font-size: 24px;
line-height: 30px;
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
.grid-item-inner {
margin-bottom: 70px;
&:hover .item--featured img {
@include transform(scale(1.2));
}
}
}
.ct-portfolio-grid4 {
.grid-filter-wrap {
text-align: left;
margin-bottom: 24px;
span {
font-size: 14px;
color: #0d2252;
line-height: 37px;
padding: 0 22px;
&.active, &:hover {
color: #fff;
}
&:before {
@include border-radius(3px);
background-image: none;
background-color: $primary_color;
@include box-shadow(none);
}
@media #{$max-md} {
padding: 0 12px;
line-height: 34px;
font-size: 13px;
}
}
}
.item--holder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
@include transition(all 220ms linear 0ms);
@include transform(translateY(100%));
.item--readmore {
width: 100%;
background-color: rgba(#152644, 0.9);
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
flex-grow: 1;
a {
width: 47px;
height: 47px;
line-height: 47px;
@include border-radius(100%);
background-color: #fff;
text-align: center;
font-size: 17px;
color: #272727;
@include transform(translateY(-60px));
opacity: 0;
@include transition(all 220ms linear 0ms);
&:hover {
background-color: $primary_color;
color: #fff;
-webkit-transition-delay: 0s !important;
-moz-transition-delay: 0s !important;
transition-delay: 0s !important;
}
}
}
}
.item--meta {
@include background-horizontal($gradient_color_from, $gradient_color_to);
padding: 18px 30px;
text-align: center;
width: 100%;
.item--title {
font-size: 20px;
margin-bottom: 0;
color: #fff;
a {
color: inherit;
}
}
}
.grid-item-inner {
margin-bottom: 30px;
position: relative;
overflow: hidden;
&:hover {
.item--readmore a {
@include transform(translateY(0%));
opacity: 1;
-webkit-transition-delay: 0.12s;
-moz-transition-delay: 0.12s;
transition-delay: 0.12s;
}
.item--holder {
@include transform(translateY(0%));
}
}
}
.ct-load-more {
margin-top: 8px;
.btn {
padding: 0;
background-color: transparent;
background-image: none;
color: #152644;
line-height: normal;
@include box-shadow(none);
&:hover {
color: $primary_color;
}
&:focus {
background-image: none;
background-color: transparent;
}
.fac-redo {
margin-right: 0;
margin-left: 8px;
color: $primary_color;
&:not(.fa-spin)::before {
content: "\f061";
}
}
}
}
}
.ct-portfolio-grid5 {
&.ct-grid {
margin: 0;
}
.grid-item {
padding: 0;
}
.item--featured {
position: relative;
overflow: hidden;
img {
width: 100%;
@include transition(all 220ms linear 0ms);
}
}
.item--title {
font-size: 30px;
color: #283a57;
margin-bottom: 6px;
@media #{$max-xl} {
font-size: 22px;
}
@media #{$max-md} {
font-size: 20px;
}
@media #{$max-xs} {
font-size: 18px;
}
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
.item--category {
@include font-family-heading($heading_default_font);
color: #636e80;
line-height: normal;
a {
color: inherit;
}
@media #{$max-xs} {
font-size: 14px;
}
}
.item--meta {
margin-right: 20px;
flex-grow: 1;
padding: 17px 0;
}
.item--holder {
padding: 16px 40px;
background-color: #fff;
position: absolute;
bottom: 40px;
left: 40px;
right: 40px;
display: flex;
flex-wrap: wrap;
align-items: center;
@include transition(all 220ms linear 0ms);
opacity: 0;
@include transform(translateY(-60px));
@media #{$max-xl} {
padding-left: 30px;
padding-right: 30px;
}
@media #{$max-lg} {
bottom: 30px;
left: 30px;
right: 30px;
}
@media #{$max-sm} {
padding: 30px 20px;
}
@media #{$max-xs} {
bottom: 15px;
left: 15px;
right: 15px;
padding-top: 15px;
padding-bottom: 15px;
}
}
.item--readmore {
a {
display: inline-block;
@include font-family-heading($heading_default_font);
font-size: 30px;
font-weight: 600;
color: #fff;
background-color: $primary_color;
@include box-shadow(0 7px 18px rgba($primary_color, 0.19));
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
@include border-radius(60px);
&:hover {
background-color: $third_color;
}
@media #{$max-lg} {
height: 50px;
width: 50px;
line-height: 50px;
font-size: 24px;
}
}
}
.grid-item-inner {
position: relative;
overflow: hidden;
&:hover {
.item--holder {
opacity: 1;
@include transform(translateY(0px));
}
.item--featured img {
@include transform(scale(1.12));
}
}
}
}
.ct-portfolio-carousel1 {
.grid-item-inner {
margin-bottom: 0;
}
@media #{$min-lg} {
.ct-slick-carousel[data-arrows="true"] {
padding-bottom: 0;
padding-left: 90px;
padding-right: 90px;
@media #{$max-lg} {
padding-left: 80px;
padding-right: 80px;
}
.slick-arrow {
top: 50%;
@include transform(translate(0, -50%));
margin: 0;
&.slick-prev {
left: 15px;
}
&.slick-next {
right: 15px;
left: auto;
}
}
}
}
&.style2 {
.grid-item-inner {
@include border-radius(0px);
.item--featured {
position: relative;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(#000, 0.29);
z-index: 99;
}
}
.item--holder {
z-index: 101;
padding-top: 80px;
@media #{$min-xxl} {
padding-left: 50px;
padding-bottom: 70px;
padding-right: 40px;
.item--readmore a {
height: 58px;
width: 58px;
line-height: 58px;
}
}
}
.item--meta {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
.item--title {
margin-top: 5px;
font-size: 24px;
}
.item--category {
font-size: 16px;
@include font-family-default($body_default_font);
font-weight: 400;
a {
@extend .text-gradient;
}
}
}
}
.slick-dots {
display: flex;
margin-top: 40px;
margin-bottom: 12px;
justify-content: left;
margin-left: 15px;
li {
margin: 0 10px;
button {
@include background-horizontal($gradient_color_from, $gradient_color_to);
@include border-radius(0px);
&:before {
content: '';
height: 26px;
width: 26px;
@include border-radius(26px);
border: 2px solid #e9e9e9;
position: absolute;
left: -10px;
top: -10px;
opacity: 0;
@include transition(all 300ms linear 0ms);
}
}
&.slick-active button {
@include transform(scale(1));
&:before {
opacity: 1;
}
}
}
}
}
}
@media #{$min-xl} {
.portfolio-offser-left {
.ct-portfolio-carousel1 {
overflow: hidden;
.slick-list {
margin-left: -190px;
}
}
}
}
.ct-nav-slick {
width: 162px;
height: 70px;
background-color: #fff;
@include border-radius(5px);
@include box-shadow(0 25px 28px rgba(#1d1b4c, 0.19));
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: 0 auto;
.nav-prev, .nav-next {
width: 33px;
height: 33px;
@include border-radius(33px);
border: 2px solid $secondary_color;
color: $secondary_color;
margin: 0 6px;
cursor: pointer;
position: relative;
@include transition(all 300ms linear 0ms);
i {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
&:hover {
background-color: $secondary_color;
color: #fff;
}
}
}
.ct-portfolio-carousel2 {
.item--featured {
position: relative;
@include transform(scale(0.85));
@include transition(all 300ms linear 0ms);
&:before {
content: '';
height: 70%;
position: absolute;
left: 0;
right: 0;
@include background-gradient-bottom(rgba($secondary_color, 0.85) 30%, rgba($secondary_color, 0));
z-index: 1;
bottom: 0;
opacity: 0;
@include transition(all 300ms linear 0ms);
}
img {
-webkit-filter: grayscale(85%);
filter: grayscale(85%);
@include transition(all 300ms linear 0ms);
width: 100%;
}
}
.item--title {
font-size: 26px;
color: #fff;
margin-bottom: 3px;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--category {
font-size: 15px;
color: $primary_color;
a {
color: inherit;
}
}
.item--meta {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 30px 30px 46px 30px;
z-index: 2;
@include transition(all 300ms linear 0ms);
opacity: 0;
}
.grid-item-inner {
position: relative;
margin: 40px 0;
}
.carousel-item.slick-center {
position: relative;
z-index: 99;
.item--featured {
@include transform(scale(1.15));
@media #{$max-sm} {
@include transform(scale(1));
}
&:before {
opacity: 1;
}
img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
}
.item--meta {
opacity: 1;
}
}
.slick-list {
padding: 0 !important;
@media #{$max-md} {
padding: 0 200px !important;
}
@media #{$max-sm} {
padding: 0px !important;
}
}
.ct-nav-slick {
margin-top: -53px;
position: relative;
z-index: 99;
direction: ltr;
}
}
.ct-portfolio-detail {
margin-bottom: 0;
list-style: none;
li {
font-size: 15px;
color: #666666;
+ li {
margin-top: 8px;
}
i {
color: $gradient_color_from;
margin-right: 4px;
}
label {
font-weight: 600;
color: #222222;
}
}
}
.item--gap {
width: 76px;
height: 3px;
margin: auto;
position: relative;
&:before, &:after {
content: '';
height: 100%;
position: absolute;
top: 0;
@include background-horizontal($gradient_color_from, $gradient_color_to);
}
&:before {
left: 0;
width: 19px;
}
&:after {
right: 0;
width: 51px;
}
}
.more-plus {
height: 57px;
width: 57px;
line-height: 57px;
text-align: center;
background-color: #fff;
@include border-radius(57px);
font-size: 22px;
font-weight: 500;
color: #1a1a1a;
@include font-family-heading($heading_default_font);
display: inline-block;
&:hover, &:focus {
background-color: $primary_color;
color: #fff;
@include box-shadow(0 0 0 10px rgba($primary_color, 0.4));
}
}
.ct-service-grid1 .item--popup {
display: none;
}
.ct-service-grid1, .ct-service-carousel1 {
.item--featured {
position: relative;
&:before {
content: '';
width: 100%;
height: 80%;
left: 0;
bottom: 0;
position: absolute;
@include background-gradient-bottom(rgba(#000, 0.76), rgba(#000, 0));
}
img {
width: 100%;
}
}
.item--holder {
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 40px 50px;
@media #{$max-lg} {
padding-left: 30px;
padding-right: 30px;
}
@media #{$max-sm} {
padding-left: 20px;
padding-right: 20px;
}
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
@include transition(all 300ms linear 100ms);
@include transform(perspective(500px) rotateX(0deg));
.item--icon {
line-height: 1;
margin: 0 auto 26px auto;
i {
font-size: 74px;
@media #{$max-lg} {
font-size: 54px;
}
}
img {
max-height: 80px;
margin-left: auto;
margin-right: auto;
}
}
.item--icon-abs {
position: absolute;
bottom: -41px;
right: -43px;
line-height: 1;
i {
font-size: 126px;
opacity: 0.4;
}
}
.item--title {
font-size: 22px;
margin-bottom: 19px;
@media #{$max-lg} {
font-size: 20px;
}
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--content {
margin-top: 17px;
@media #{$max-lg} {
font-size: 14px;
line-height: 24px;
}
}
}
.item--meta {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #0e0e0e;
padding: 40px;
@media #{$max-lg} {
padding-left: 30px;
padding-right: 30px;
}
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
@include transition(all 300ms linear 0ms);
opacity: 0;
@include transform(perspective(500px) rotateX(-90deg));
.item--title {
font-size: 22px;
margin-bottom: 21px;
color: #fff;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
}
.grid-item-inner {
text-align: center;
background-color: $primary_color;
margin-bottom: 64px;
position: relative;
overflow: hidden;
@include box-shadow(0 8px 40px rgba(#0c0c0c, 0.1));
padding-top: 8px;
&:before {
content: '';
height: 8px;
position: absolute;
top: 0px;
left: 0;
width: 100%;
@include background-horizontal($gradient_color_from, $gradient_color_to);
}
.grid-item-over {
position: relative;
}
&:not(.active-featured) {
min-width: 420px;
}
&:hover {
.item--holder {
opacity: 0;
@include transform(perspective(500px) rotateX(-90deg));
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
@include transition(all 300ms linear 0ms);
}
.item--meta {
opacity: 1;
@include transform(perspective(500px) rotateX(0deg));
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
}
}
}
.ct-service-grid2 {
.item--featured {
position: relative;
&:before {
content: '';
@include background-gradient-bottom(rgba(#000409, 0.95), rgba(#000409, 0));
width: 100%;
height: 80%;
position: absolute;
bottom: 0;
left: 0;
}
}
.item--title {
font-size: 20px;
margin-bottom: 0;
@media #{$max-lg} {
font-size: 18px;
}
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--meta {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px 20px 39px;
@include transition(all 200ms linear 0ms);
.item--title {
color: #fff;
}
}
.item--holder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px 30px;
@media #{$max-lg} {
padding-left: 15px;
padding-right: 15px;
}
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
background-color: #e4eaee;
opacity: 1;
@include transform(translateY(100%));
@include transition(all 200ms linear 0ms);
.item--title {
margin-bottom: 12px;
}
.item--content {
margin-bottom: 22px;
@media #{$max-lg} {
margin-bottom: 16px;
}
@media #{$max-lg} {
font-size: 14px;
line-height: 24px;
}
}
.entry-readmore {
a {
font-size: 14px;
line-height: 43px;
padding: 0 28px;
}
}
}
.item--image {
opacity: 0;
}
.item--body {
padding: 20px;
position: absolute;
top: 50%;
left: 0;
right: 0;
@include transform(translate(0, -50%));
h3 {
font-size: 25px;
line-height: 36px;
font-family: inherit;
font-weight: 400;
margin-bottom: 42px;
@media #{$max-lg} {
font-size: 20px;
line-height: 1.3;
margin-bottom: 32px;
}
}
a {
display: inline-block;
width: 75px;
height: 75px;
line-height: 75px;
font-size: 30px;
color: #fff;
@include transition(all 300ms linear 0ms);
@include background-gradient-button(90deg, $gradient_color_from 0%, $gradient_color_to 50%, $gradient_color_from);
background-size: 300%, 1px;
background-position: 0%;
@include border-radius(75px);
@include font-family-heading($heading_default_font);
@media #{$max-lg} {
width: 55px;
height: 55px;
line-height: 55px;
}
&:hover {
color: #fff;
background-position: 100%;
}
}
}
.grid-item-inner {
text-align: center;
position: relative;
overflow: hidden;
@include border-radius(5px);
margin-bottom: 30px;
&:hover {
.item--holder {
opacity: 1;
@include transform(translateY(0%));
}
.item--meta {
opacity: 0;
}
}
}
}
.ct-service-grid3 {
.grid-item-holder {
position: relative;
.item--readmore {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
}
.grid-item-inner {
margin-bottom: 30px;
}
}
.ct-service-grid4 {
.item--title {
font-size: 20px;
margin-bottom: 8px;
color: #fff;
padding-left: 40px;
padding-right: 0px;
position: relative;
display: inline-block;
@include transition(all 300ms linear 0ms);
@media #{$max-lg} {
font-size: 18px;
}
i {
font-size: 28px;
font-weight: normal;
position: absolute;
top: 50%;
@include transform(translate(0, -50%));
@extend .text-gradient;
@include background-gradient-top($gradient_color_from, $gradient_color_to);
@include transition(all 300ms linear 0ms);
&.icon-left {
left: 0;
}
&.icon-right {
right: -40px;
opacity: 0;
}
}
}
.item--content {
font-size: 16px;
line-height: 26px;
color: #cacacb;
@media #{$max-lg} {
font-size: 14px;
line-height: 24px;
}
}
.item--readmore {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
.grid-item-inner {
background-color: #292929;
padding: 38px 30px 38px 40px;
margin-bottom: 30px;
position: relative;
@media #{$max-lg} {
padding-left: 20px;
padding-right: 20px;
}
&:before {
content: '';
height: 4px;
width: 0px;
margin: auto;
position: absolute;
left: 0;
bottom: -4px;
@include background-horizontal($gradient_color_from, $gradient_color_to);
@include transition(all 300ms linear 0ms);
}
&:hover {
&:before {
width: 100%;
}
.item--title {
padding-left: 0;
padding-right: 40px;
.icon-left {
left: -40px;
opacity: 0;
}
.icon-right {
opacity: 1;
right: 0;
}
}
}
}
.ct-load-more {
margin-top: 30px;
.btn {
padding: 0 24px;
overflow: hidden;
&:after {
content: '';
position: absolute;
top: 0;
left: -200%;
width: 200%;
height: 100%;
@include transform(skewX(-20deg));
background-image: -webkit-gradient(linear,left top,right top,from(transparent),color-stop(rgba(255,255,255,0.4)),to(transparent));
background-image: linear-gradient(to right,transparent,rgba(255,255,255,0.4),transparent);
display: none;
}
&:hover:after {
-webkit-animation: btn_shine 1.2s ease;
animation: btn_shine 1.2s ease;
-webkit-animation-delay: .1s;
animation-delay: .1s;
}
}
i {
display: none;
&.fa-spin {
display: inline-block;
}
}
}
}
.ct-service-grid5 {
.item--icon {
line-height: 1;
margin-right: 22px;
margin-top: 3px;
@media #{$max-md} {
margin-right: 18px;
}
i {
font-size: 70px;
color: $primary_color;
}
img {
max-width: 70px;
@media #{$max-md} {
max-width: 60px;
}
}
}
.item--title {
margin-bottom: 10px;
font-size: 22px;
line-height: 1.5;
@media #{$max-xs} {
font-size: 20px;
}
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--desc {
font-size: 16px;
line-height: 24px;
color: #000000;
@include transition(all 300ms linear 0ms);
@media #{$max-xs} {
font-size: 14px;
}
}
.grid-item-inner {
position: relative;
display: flex;
flex-wrap: nowrap;
padding: 40px 32px;
background-color: #fff;
@include box-shadow(0 0 16px rgba(#000000, 0.05));
@include border-radius(5px);
margin-bottom: 30px;
@include transition(all 300ms linear 0ms);
@media #{$max-md} {
padding-left: 30px;
padding-right: 20px;
}
.item--readmore {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
&:hover {
background-color: $third_color;
@include box-shadow(0 0 16px rgba($third_color, 0.05));
.item--desc, .item--title a {
color: #fff;
}
}
}
}
.ct-service-grid6 {
.item--featured {
position: relative;
overflow: hidden;
img {
width: 100%;
}
.ct-edge-hide, .ct-edge-hover {
height: 15px;
position: absolute;
bottom: -1px;
left: -3px;
right: -3px;
width: calc(100% + 6px);
width: -webkit-calc(100% + 6px);
@include transition(all 300ms linear 0ms);
}
.ct-edge-hover {
opacity: 0;
}
}
.item--title {
margin-bottom: 9px;
font-size: 20px;
line-height: 24px;
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
.item--meta {
background-color: #fff;
padding: 22px 30px 22px;
text-align: center;
}
.item-readmore {
display: none;
a {
font-size: 14px;
color: $primary_color;
font-weight: 600;
@include font-family-heading($heading_default_font);
padding-right: 30px;
position: relative;
&:hover {
padding-right: 40px;
}
}
i {
font-size: 22px;
position: absolute;
top: 50%;
right: 0;
@include transform(translate(0, -50%));
}
}
.grid-item-inner {
overflow: hidden;
@include border-radius(6px);
margin-bottom: 65px;
@include box-shadow(0 11px 16px rgba(#2d2576, 0.1));
@include transition(all 300ms linear 0ms);
&:hover {
@include transform(translateY(-17px));
@include box-shadow(0 27px 49px rgba(#2d2576, 0.3));
.item--featured {
.ct-edge-hide {
opacity: 0;
}
.ct-edge-hover {
opacity: 1;
}
}
}
}
}
.ct-service-grid7 {
.item--featured {
position: relative;
overflow: hidden;
img {
width: 100%;
}
.ct-edge-hover {
opacity: 0;
}
}
.item--title {
margin-bottom: 0;
font-size: 20px;
line-height: 24px;
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
.item--meta {
background-color: #fff;
padding: 26px 30px 26px;
text-align: center;
position: relative;
@include border-radius(0 0 6px 6px);
@include transition(all 300ms linear 0ms);
}
.item--desc {
font-size: 16px;
line-height: 22px;
color: #000;
margin-top: 12px;
margin-bottom: 15px;
display: none;
}
.item-readmore {
a {
position: absolute;
bottom: -25px;
left: 0;
right: 0;
margin: auto;
font-size: 25px;
font-weight: 600;
color: #fff;
line-height: 50px;
width: 50px;
height: 50px;
@include border-radius(50px);
background-color: $primary_color;
@include font-family-heading($heading_default_font);
@include transform(translateY(40px));
opacity: 0;
}
}
.grid-item-inner {
@include border-radius(0 0 6px 6px);
margin-bottom: 65px;
@include box-shadow(0 11px 16px rgba(#2d2576, 0.1));
@include transition(all 300ms linear 0ms);
&:hover {
@include transform(translateY(-17px));
@include box-shadow(0 27px 49px rgba(#2d2576, 0.3));
.item-readmore a {
@include transform(translateY(0px));
opacity: 1;
}
.item--meta {
margin-top: -30px;
}
}
}
}
.ct-service-grid8 {
.item--icon {
line-height: 1;
margin-bottom: 14px;
i {
font-size: 65px;
color: $primary_color;
}
* {
display: inline-block;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
}
}
.item--title {
font-size: 20px;
margin-bottom: 12px;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--content {
font-size: 15px;
line-height: 24px;
color: #000;
padding: 0;
}
.item--readmore {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.grid-item-inner {
background-color: #fafafa;
border: 1px solid #e9e7e7;
@include border-radius(5px);
padding: 28px 30px 24px;
text-align: center;
margin-bottom: 44px;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
position: relative;
&:hover {
@include box-shadow(0 29px 32px rgba(#000, 0.1));
.item--title a {
color: $primary_color;
}
.item--icon * {
@include transform(rotateY(360deg));
}
}
}
}
.ct-service-grid9, .ct-service-carousel5 {
.item--featured {
position: relative;
overflow: hidden;
img {
@include transition(all .3s cubic-bezier(.645,.045,.355,1));
}
&:hover img {
@include transform(scale(1.1));
}
}
.item--title {
font-size: 22px;
margin-bottom: 9px;
color: $primary_color;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--desc {
line-height: 1.625;
color: #0e0e0e;
margin-bottom: 17px;
}
.item--meta {
padding: 20px 15px 24px;
text-align: center;
}
.grid-item-inner {
padding: 21px;
background-color: #fff;
margin-bottom: 30px;
@include transition(all .3s cubic-bezier(.645,.045,.355,1));
&:hover {
@include transform(translateY(-15px));
@include box-shadow(0 20px 24px rgba(#0c0c0c, 0.08));
}
}
}
.ct-service-carousel1 {
.grid-item-inner {
margin-bottom: 50px;
}
.ct-slick-carousel[data-arrows="true"] {
padding-bottom: 0;
.slick-arrow {
top: 50%;
@include transform(translate(0, -50%));
margin: -25px 0 0;
z-index: 9;
width: 50px;
height: 50px;
line-height: 50px;
background-color: #eeeeee;
@include box-shadow(0 8px 13px rgba(#0c0c0c, 0.1));
@media #{$max-lg} {
opacity: 0.25;
}
&.slick-prev {
left: 20px;
@media #{$max-lg} {
left: 30px;
}
}
&.slick-next {
right: 20px;
left: auto;
@media #{$max-lg} {
right: 30px;
}
}
}
}
@media #{$max-lg} {
&:hover .ct-slick-carousel[data-arrows="true"] .slick-arrow {
opacity: 1;
}
}
.ct-slick-carousel {
margin: 20px -30px 0 -30px;
padding-left: 30px;
padding-right: 30px;
overflow: hidden;
.slick-list {
overflow: visible;
}
}
.slick-slide {
opacity: 0;
@include transition(all 300ms linear 0ms);
&.slick-active {
opacity: 1;
}
}
}
.ct-service-carousel2 {
.grid-item-inner {
margin-bottom: 50px;
}
.ct-slick-carousel[data-arrows="true"] {
padding-bottom: 0;
padding-left: 90px;
padding-right: 90px;
@media #{$max-lg} {
padding-left: 0px;
padding-right: 0px;
}
.slick-arrow {
top: 50%;
@include transform(translate(0, -50%));
margin: -25px 0 0;
z-index: 9;
@media #{$max-lg} {
opacity: 0.25;
}
&.slick-prev {
left: 15px;
@media #{$max-lg} {
left: 30px;
}
}
&.slick-next {
right: 15px;
left: auto;
@media #{$max-lg} {
right: 30px;
}
}
}
}
@media #{$max-lg} {
&:hover .ct-slick-carousel[data-arrows="true"] .slick-arrow {
opacity: 1;
}
}
.ct-slick-carousel {
margin: 20px -30px 0 -30px;
padding-left: 30px;
padding-right: 30px;
overflow: hidden;
.slick-list {
overflow: visible;
}
}
.slick-slide {
opacity: 0;
@include transition(all 300ms linear 0ms);
&.slick-active {
opacity: 1;
}
}
}
.ct-service-carousel2, .ct-service-grid3 {
.ct-slick-carousel {
margin: 0;
}
.item--icon {
line-height: 1;
margin: 0 auto 13px auto;
i {
font-size: 62px;
@include transition(all 200ms linear 0ms);
}
}
.item--icon-abs {
line-height: 1;
position: absolute;
bottom: 0;
right: 0;
@include transition(all 200ms linear 0ms);
i {
font-size: 70px;
opacity: 0.45;
}
}
.item--title {
font-size: 20px;
margin-bottom: 14px;
color: #fff;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--content {
font-size: 16px;
line-height: 26px;
color: #fff;
@media #{$max-lg} {
font-size: 14px;
line-height: 24px;
}
}
.grid-item-inner {
background-color: $secondary_color;
position: relative;
@include border-radius(5px);
text-align: center;
z-index: 1;
.grid-item-holder {
padding: 40px 28px 38px;
@media #{$max-lg} {
padding-left: 20px;
padding-right: 20px;
}
.item--overlay {
z-index: -1;
top: 0;
right: 0;
width: 100%;
height: 100%;
@include background-horizontal($gradient_color_from, $gradient_color_to);
@include border-radius(5px);
position: absolute;
@include transition(all 200ms linear 0ms);
opacity: 0;
&:before {
content: '';
top: 11px;
right: -11px;
@include background-horizontal($gradient_color_from, $gradient_color_to);
@include border-radius(5px);
position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
}
}
}
&:hover {
.item--icon i {
background-image: none;
text-fill-color: transparent;
-o-text-fill-color: #fff;
-ms-text-fill-color: #fff;
-moz-text-fill-color: #fff;
-webkit-text-fill-color: #fff;
}
.item--icon-abs {
opacity: 0;
}
.grid-item-holder {
.item--overlay {
opacity: 1;
}
}
}
}
&.style2 {
.grid-item-inner {
background-color: #fff;
@include box-shadow(0 8px 40px rgba(#0c0c0c, 0.1));
.item--title a {
color: #0e0e0e;
}
.item--content {
color: #383838;
@include transition(all 300ms linear 0ms);
}
&:hover {
.item--title a, .item--content {
color: #fff;
}
}
}
}
}
.ct-service-carousel3 {
.item--icon {
line-height: 1;
margin: 0 auto 13px auto;
display: inline-block;
i {
@extend .text-gradient;
font-family: 75px;
}
}
.item--title {
font-size: 22px;
margin-bottom: 18px;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.entry-readmore {
margin-top: 12px;
position: relative;
a {
font-size: 15px;
color: #0e0e0e;
font-weight: 700;
@include font-family-heading($heading_default_font);
@include transition(all 0ms linear 0ms);
i {
display: initial;
@include transition(all 300ms linear 0ms);
}
&.text-gradient {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
opacity: 0;
}
&:hover i {
margin-left: 6px;
}
}
}
.carousel-item {
margin-top: 25px;
}
.grid-item-inner {
background-color: #fff;
@include border-radius(5px);
position: relative;
overflow: hidden;
text-align: center;
padding: 45px 40px 38px;
@include transition(all 300ms linear 0ms);
&:before {
content: '';
width: 0;
height: 7px;
@include background-horizontal($gradient_color_from, $gradient_color_to);
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
@include transition(all 300ms linear 0ms);
}
&:hover {
@include transform(translateY(-25px));
.entry-readmore a {
&:not(.text-gradient) {
opacity: 0;
}
&.text-gradient {
opacity: 1;
}
}
&:before {
width: 100%;
}
}
}
.slick-dots {
max-width: 495px;
margin-top: 70px;
margin-left: auto;
margin-right: auto;
background-color: #434343;
height: 10px;
@include border-radius(10px);
padding: 0 40px;
flex-wrap: nowrap;
li {
margin: 0;
width: 50%;
button {
@include transform(scale(1));
height: 10px;
width: 100%;
@include border-radius(10px);
@include background-horizontal($gradient_color_from, $gradient_color_to);
opacity: 0;
&:hover, &:focus {
@include background-horizontal($gradient_color_from, $gradient_color_to);
background-position: inherit;
}
}
&.slick-active button {
opacity: 1;
}
}
}
}
.ct-service-carousel4 {
.item--featured {
a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba($gradient_color_from, 0.25);
@include transition(all 300ms linear 0ms);
}
img {
width: 100%;
}
}
.item--title {
margin: 0;
padding: 19px 25px;
background-color: $third_color;
font-size: 22px;
color: #fff;
@media #{$max-md} {
font-size: 16px;
}
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--icon {
margin-right: 18px;
line-height: 1;
color: #fff;
font-size: 50px;
@media #{$max-md} {
font-size: 40px;
margin-right: 15px;
}
}
.item--description {
font-size: 15px;
line-height: 24px;
color: #fff;
@media #{$max-md} {
font-size: 13px;
}
}
.item--meta {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 18px 20px 26px;
background-color: $gradient_color_from;
display: flex;
flex-wrap: nowrap;
align-items: center;
@include transition(all 300ms linear 0ms);
@include transform(translateY(-100%));
opacity: 0;
@media #{$max-md} {
padding-left: 15px;
padding-right: 15px;
}
}
.item--holder {
position: relative;
}
.item--readmore {
margin-top: 10px;
a {
font-size: 14px;
line-height: 1.4;
font-weight: 700;
@include font-family-heading($heading_default_font);
color: $third_color;
span {
display: inline-block;
border-bottom: 1px solid rgba($third_color, 0.5);
@include transition(all 300ms linear 0ms);
}
i {
margin-left: 14px;
}
&:hover {
color: $gradient_color_from;
span {
border-color: $gradient_color_from;
}
}
}
}
.grid-item-inner:hover {
.item--featured a {
opacity: 0;
}
.item--meta {
opacity: 1;
@include transform(translateY(0%));
}
}
.ct-slick-carousel[data-arrows="true"] {
padding-bottom: 0;
.slick-arrow {
width: 50px;
height: 50px;
line-height: 50px;
background-color: #eeeeee;
color: #383838;
@include box-shadow(0 8px 13px rgba(#0c0c0c, 0.1));
display: block;
position: absolute;
top: 50%;
bottom: auto;
margin: 0;
@include transform(translate(0, -50%));
z-index: 99;
&:after {
background-color: $third_color;
background-image: none;
}
&:hover {
@include box-shadow(0 8px 13px rgba($third_color, 0.1));
color: #fff;
background-color: $third_color;
}
&.slick-prev {
left: -47px;
@media #{$max-xl} {
left: -10px;
}
@media #{$max-lg} {
left: 35px;
}
}
&.slick-next {
left: auto;
right: -47px;
@media #{$max-xl} {
right: -10px;
}
@media #{$max-lg} {
right: 35px;
}
}
}
}
}
.ct-service-carousel5 {
.slick-slide {
margin-top: 15px;
}
.slick-dots {
margin: 15px 0 0;
li {
margin: 0 3px;
button {
background-color: #c4c9d1;
width: 12px;
height: 12px;
}
&.slick-active button {
@include transform(scale(1.2));
background-color: $primary_color;
}
}
}
}
.ct-service-carousel6, .ct-service-grid15 {
.item--featured {
position: relative;
a {
display: block;
position: relative;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(#0e0e0e, 0.2);
z-index: 1;
@include transition(all 200ms linear 0ms);
}
}
}
.item--featured-image {
position: relative;
overflow: hidden;
img {
@include transition(all 3s ease-out);
}
&:before, &:after {
position: absolute;
content: '';
background-color: rgba(0,0,0, 0.4);
left: 0;
width: 100%;
height: 0%;
@include transition(.4s ease);
z-index: 1;
opacity: 0;
}
&:before {
top: 0;
}
&:after {
bottom: 0;
}
}
.item--icon {
width: 75px;
height: 75px;
position: absolute;
top: 50%;
left: -46px;
@include transform(translate(0, -50%));
z-index: 99;
background-color: #fff;
@include transition(.4s ease);
@media #{$max-lg} {
left: 0;
}
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
i {
font-size: 40px;
color: $primary_color;
}
img {
max-height: 47px;
max-width: 53px;
}
}
.item--title {
margin-bottom: 13px;
font-size: 22px;
line-height: 28px;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--desc {
line-height: 1.625;
color: #000;
margin-bottom: 11px;
}
.entry-readmore {
svg {
height: 22px;
fill: $primary_color;
margin-left: 10px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
a {
font-size: 15px;
font-weight: 700;
@include font-family-heading($heading_default_font);
color: #000000;
display: inline-flex;
align-items: center;
&:hover svg {
@include transform(translateX(14px));
}
}
}
.item--meta {
padding: 20px 13px 25px 13px;
}
.grid-item-inner {
background-color: #fff;
border-width: 2px 2px 0 2px;
border-style: solid;
border-color: #ebebeb;
padding: 17px;
position: relative;
@include box-shadow(0 2px 43px rgba(#0c0c0c, 0.13));
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
&:before {
content: '';
height: 6px;
left: -2px;
right: -2px;
position: absolute;
bottom: 0;
background-color: $primary_color;
}
&:hover {
@include transform(translateY(-18px));
@include box-shadow(0 27px 41px rgba(#0c0c0c, 0.18));
.item--featured-image {
img {
@include transform(scale(1.075));
}
&:before, &:after {
height: 100%;
opacity: 1;
}
}
.item--icon {
left: 50%;
@include transform(translate(-50%, -50%));
}
}
}
.ct-carousel-inner {
margin: 0 -35px;
.slick-slide {
padding: 0 35px;
margin-top: 30px;
margin-bottom: 50px;
}
}
.slick-dots {
margin-top: 15px;
}
}
.ct-service-grid15 .grid-item-inner {
margin-bottom: 30px;
}
.ct-service-carousel7 {
.item--featured {
position: relative;
overflow: hidden;
}
.item--holder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
opacity: 0;
.item--holder-inner {
position: relative;
z-index: 1;
padding: 30px 40px 30px 45px;
display: flex;
flex-wrap: nowrap;
@media #{$max-sm} {
padding: 20px;
}
}
.item--title {
font-size: 20px;
margin-bottom: 9px;
color: $primary_color;
@media #{$max-sm} {
font-size: 18px;
}
}
.item--icon {
line-height: 1;
font-size: 48px;
color: #fff;
margin-right: 18px;
@media #{$max-sm} {
font-size: 36px;
margin-right: 15px;
}
}
.item--content {
font-size: 15px;
line-height: 24px;
color: #fff;
margin-bottom: 21px;
@media #{$max-sm} {
font-size: 13px;
line-height: 22px;
}
}
.item-readmore {
a {
display: inline-block;
font-size: 13px;
text-transform: uppercase;
color: #0d2252;
font-weight: 700;
line-height: 34px;
padding: 0 16px;
@include font-family-heading($heading_default_font);
@include border-radius(3px);
background-color: $primary_color;
&:hover {
background-color: #fff;
color: #0d2252;
}
}
}
}
.item--meta {
display: flex;
flex-wrap: nowrap;
align-items: center;
background-color: #fff;
padding: 11px 30px;
justify-content: center;
@include transition(all .2s cubic-bezier(.645,.045,.355,1));
@media #{$max-sm} {
padding-right: 20px;
}
.item--icon {
line-height: 1;
font-size: 48px;
margin-right: 18px;
@media #{$max-sm} {
font-size: 36px;
}
}
.item--title {
margin-bottom: 0;
font-size: 20px;
line-height: 28px;
@media #{$max-sm} {
font-size: 18px;
}
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
}
.item-overlay {
z-index: -1;
background-color: rgba(#152644, 0.9);
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 100%;
@include transition(all .2s cubic-bezier(.645,.045,.355,1));
&:before {
content: '';
@include transition(all .2s cubic-bezier(.645,.045,.355,1));
height: 4px;
width: 100%;
@include background-horizontal($gradient_color_from, $gradient_color_to);
position: absolute;
top: -4px;
left: 0;
}
}
.grid-item-inner {
margin-bottom: 30px;
&:hover {
.item-overlay {
top: 0;
&:before {
top: 0;
}
}
.item--holder {
opacity: 1;
}
.item--meta {
@include box-shadow(0 3px 12px rgba(#000, 0.08));
}
}
}
.ct-slick-carousel[data-arrows="true"] {
padding-bottom: 0;
.slick-arrow {
width: 38px;
height: 28px;
color: #919191;
border: 1px solid #d9d9d9;
@include border-radius(0px);
font-weight: 400;
z-index: 99;
@include box-shadow(none);
@include transform(translate(0, -50%));
margin: -15px 0 0;
top: 50%;
opacity: 0;
&:after {
display: none;
}
&:hover {
background-color: #152644;
border-color: #152644;
color: #fff;
}
&.slick-prev {
left: -73px;
right: auto;
}
&.slick-next {
right: -73px;
left: auto;
}
}
&:hover {
.slick-arrow {
&.slick-prev {
left: -53px;
opacity: 1;
@media #{$max-xl} {
left: -40px;
}
@media #{$max-lg} {
left: 30px;
}
}
&.slick-next {
right: -53px;
opacity: 1;
@media #{$max-xl} {
right: -40px;
}
@media #{$max-lg} {
right: 30px;
}
}
}
}
}
}
.ct-service-carousel8 {
.item--featured {
position: relative;
overflow: hidden;
img {
width: 100%;
}
&:before {
content: '';
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
@include transition(all 300ms linear 0ms);
}
&:after {
content: '';
height: 8px;
background-color: #1d1b4c;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
@include transition(all 300ms linear 0ms);
}
}
.item--holder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
padding: 30px 40px;
display: flex;
flex-wrap: wrap;
align-items: center;
@include transition(all 300ms linear 0ms);
.item--icon {
width: 62px;
margin-right: 20px;
min-width: 62px;
img {
max-width: 62px;
}
i {
font-size: 60px;
color: $primary_color;
}
}
.item--head {
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-bottom: 14px;
}
@media #{$max-lg} {
padding-left: 20px;
padding-right: 20px;
}
}
.item--title {
font-size: 22px;
color: #1d1b4c;
margin-bottom: 0;
@media #{$max-lg} {
font-size: 18px;
}
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--content {
line-height: 1.625;
@media #{$max-lg} {
font-size: 14px;
line-height: 23px;
}
}
.item--meta {
position: absolute;
top: 0;
left: 0;
z-index: 4;
width: 100%;
height: 100%;
padding: 30px 40px;
display: flex;
flex-wrap: wrap;
align-items: center;
opacity: 0;
visibility: hidden;
@include transition(all 300ms linear 0ms);
.item--meta-inner {
width: 100%;
}
@media #{$max-lg} {
padding-left: 20px;
padding-right: 20px;
}
}
.item--meta-head {
background-color: $primary_color;
display: flex;
flex-wrap: nowrap;
margin-bottom: 17px;
@include transform(translateY(-30px));
@include transition(all 300ms linear 0ms);
.item--icon {
width: 60px;
min-width: 60px;
background-color: #fff;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
img {
max-width: 45px;
}
i {
font-size: 42px;
color: $primary_color;
}
}
.item--title {
padding: 17px 18px;
display: flex;
align-items: center;
flex-grow: 1;
}
}
.item-readmore {
text-align: center;
@include transform(translateY(30px));
@include transition(all 300ms linear 0ms);
a {
font-size: 15px;
font-weight: 700;
@include font-family-heading($heading_default_font);
color: #fff;
display: inline-flex;
align-items: center;
svg {
width: 24px;
margin-left: 14px;
path {
fill: $primary_color;
}
}
&:hover {
color: $primary_color;
svg {
-o-animation: toRightFromLeft 0.3s forwards;
-ms-animation: toRightFromLeft 0.3s forwards;
-webkit-animation: toRightFromLeft 0.3s forwards;
animation: toRightFromLeft 0.3s forwards;
}
}
}
}
.ct-carousel-inner {
margin: 0;
.slick-slide {
padding: 0;
}
}
[data-centermode="true"] .slick-list {
padding: 0 !important;
}
.slick-center {
.item--featured {
&:before {
background-color: rgba(#131053, 0.8);
}
&:after {
background-color: $primary_color;
}
}
.item--meta {
opacity: 1;
visibility: visible;
}
.item--holder {
opacity: 0;
}
.item--meta-head, .item-readmore {
@include transform(translateY(0px));
}
}
}
.ct-service-carousel9 {
.item--icon {
width: 156px;
height: 156px;
@include border-radius(100%);
border: 20px solid #ebebeb;
position: absolute;
top: -75px;
left: 50%;
@include transform(translate(-50%, 0));
background-color: #fff;
@include transition(all .2s cubic-bezier(.645,.045,.355,1));
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
i {
font-size: 65px;
color: $primary_color;
}
img {
max-height: 65px;
}
}
.item--title {
font-size: 20px;
color: #1d1b4c;
margin-bottom: 13px;
@include transition(all .2s cubic-bezier(.645,.045,.355,1));
}
.item--content {
line-height: 1.625;
margin-bottom: 22px;
@include transition(all .2s cubic-bezier(.645,.045,.355,1));
}
.item-readmore {
.btn {
font-size: 14px;
line-height: 38px;
border-radius: 3px;
box-shadow: none;
padding: 0 20px;
color: #ebebeb;
background-color: $secondary_color;
@include transition(all .2s cubic-bezier(.645,.045,.355,1));
i {
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: 30px;
@include transition(all .2s cubic-bezier(.645,.045,.355,1));
opacity: 0;
}
&:hover {
padding-right: 38px;
i {
opacity: 1;
right: 20px;
}
}
}
}
.grid-item-inner {
background-color: #fff;
@include box-shadow(0 13px 14px rgba(#1d1b4c, 0.1));
padding: 30px;
text-align: center;
margin-bottom: 30px;
position: relative;
z-index: 1;
.item--featured {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
@include transition(all .2s cubic-bezier(.645,.045,.355,1));
opacity: 0;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba($secondary_color, 0.85);
}
}
&.item-icon-active {
margin-top: 75px;
padding-top: 107px;
}
&:hover {
.item--featured {
opacity: 1;
}
.item--icon {
border-color: $secondary_color;
}
.item--title {
color: #fff;
}
.item--content {
color: #ebebeb;
}
.item-readmore .btn {
background-color: $primary_color;
color: $secondary_color;
}
}
}
&.dot-style-u2 .slick-dots {
margin-top: 10px;
}
}
.ct-service-carousel10 {
.item--title {
font-size: 20px;
line-height: 26px;
color: #1d1b4c;
margin-bottom: 0;
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
.item--icon {
line-height: 1;
margin-bottom: 14px;
i {
font-size: 60px;
color: $primary_color;
}
img {
max-height: 60px;
margin: auto;
}
}
.item-readmore {
@include transition(all 220ms linear 0ms);
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
.btn {
line-height: 38px;
font-size: 14px;
color: #ebebeb;
padding: 0 20px;
@include border-radius(3px);
font-weight: 600;
&:hover {
color: #fff;
}
}
}
.grid-item-inner {
position: relative;
text-align: center;
padding: 40px 12px 88px;
margin-top: 24px;
margin-bottom: 40px;
@include transition(all 220ms linear 0ms);
z-index: 1;
&:before, &:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 44px;
@include box-shadow(0 13px 24px rgba(#1d1b4c, 0.1));
@include transition(all 220ms linear 0ms);
background-color: #fff;
z-index: -1;
}
&:after {
opacity: 0;
bottom: 0;
}
&:hover {
@include transform(translateY(-24px));
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
.item-readmore {
bottom: 34px;
opacity: 1;
}
}
}
.ct-slick-carousel {
margin: 0 -30px;
.slick-list {
padding-left: 30px;
padding-right: 30px;
.slick-slide {
opacity: 0;
@include transition(all 220ms linear 0ms);
&.slick-active {
opacity: 1;
}
}
}
}
.slick-dots {
margin-top: -10px;
}
}
.ct-gallery-carousel1 {
.slick-slide img {
@include border-radius(7px);
}
.ct-carousel-inner {
margin: 0 -3px;
.slick-slide {
padding: 0 3px;
}
}
.slick-dots li {
margin: 0 20px;
@media #{$max-md} {
margin: 0 -10px;
}
}
}
.ct-service-carousel11, .ct-service-grid14 {
.item--icon {
line-height: 1;
margin-bottom: 15px;
position: relative;
i {
font-size: 68px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
&.text-gradient {
@include background-gradient-bottom($gradient_color_from, $gradient_color_to);
}
&.icon-hover {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
opacity: 0;
}
}
img {
max-height: 68px;
}
svg {
height: 68px;
}
}
.service-shape {
position: absolute;
bottom: -30px;
right: -40px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
.item--title {
font-size: 24px;
color: #000c3f;
margin-bottom: 17px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
.item--link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
}
.item--title {
line-height: 1.625;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
@media #{$max-sm} {
font-size: 20px;
}
}
.item--content {
line-height: 1.625;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
.grid-item-inner {
padding: 44px 30px 72px;
text-align: center;
overflow: hidden;
position: relative;
z-index: 1;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
background-color: #fff;
@media #{$max-sm} {
padding-left: 20px;
padding-right: 20px;
}
&:before {
content: '';
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
@include background-gradient-rotate(190deg, $gradient_color_to, $gradient_color_from);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0%;
z-index: -1;
opacity: 0;
}
&:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
content: '';
border: 2px solid #e6ecfb;
}
&:hover {
@include box-shadow(0 8px 27px rgba($gradient_color_to, 0.19));
&:before {
opacity: 1;
height: 100%;
}
.service-shape {
bottom: -130px;
right: -140px;
}
.item--title, .item--content {
color: #fff;
}
.item--icon i {
&.icon-hover {
opacity: 1;
}
&.text-gradient {
opacity: 0;
}
}
}
}
}
.ct-service-grid14 .grid-item-inner {
margin-bottom: 30px;
}
.ct-download {
.item--download {
a {
display: flex;
color: #383838;
padding: 9px 30px;
flex-wrap: wrap;
align-items: center;
@media #{$max-lg} {
padding-left: 20px;
padding-right: 20px;
}
@media #{$max-md} {
font-size: 14px;
padding-left: 15px;
padding-right: 10px;
}
i {
font-size: 25px;
min-width: 38px;
@extend .text-gradient;
@media #{$max-lg} {
min-width: 32px;
}
}
&:before {
background-color: #fff;
border: 1px solid #cdcbcb;
}
&:hover {
color: #fff;
i {
background-image: none;
text-fill-color: transparent;
-o-text-fill-color: #fff;
-ms-text-fill-color: #fff;
-moz-text-fill-color: #fff;
-webkit-text-fill-color: #fff;
}
}
}
+ .item--download {
margin-top: 17px;
}
}
}
.ct-signature1 {
display: flex;
flex-wrap: nowrap;
align-items: center;
.signature-image {
margin-right: 48px;
@media #{$max-sm} {
margin-right: 20px;
}
}
.signature-meta {
h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 0;
}
}
&.style2 {
.signature-image {
margin-right: 25px;
+ .signature-meta {
position: relative;
padding-left: 25px;
&:before {
content: '';
width: 1px;
height: 48px;
position: absolute;
top: 50%;
left: 0;
@include transform(translate(0, -50%));
background-color: #7c7c7c;
}
}
}
.signature-meta {
h3 {
font-weight: 700;
margin-bottom: 3px;
}
span {
display: inline-block;
line-height: normal;
}
}
}
}
.about-call {
a {
text-decoration: underline !important;
}
span {
font-size: 24px;
font-weight: 700;
color: #0e0e0e;
@include font-family-heading($heading_default_font);
}
}
.about-call2 {
font-size: 18px;
line-height: 34px;
a {
color: inherit;
text-decoration: underline !important;
&:hover {
color: inherit;
}
}
i {
font-size: 26px;
color: #00e67f;
margin-right: 10px;
}
span {
font-size: 26px;
font-weight: 600;
@include font-family-heading($heading_default_font);
}
}
.about-call3 {
font-size: 18px;
line-height: 34px;
color: #000;
a {
color: inherit;
text-decoration: underline !important;
&:hover {
color: inherit;
}
}
i {
font-size: 26px;
color: $primary_color;
margin-right: 10px;
}
span {
font-size: 26px;
font-weight: 600;
@include font-family-heading($heading_default_font);
}
}
.ct-blog-grid-layout1, .ct-blog-carousel-layout1 {
.entry-featured {
img {
@include border-radius(6px);
-webkit-filter: grayscale(85%);
filter: grayscale(85%);
@include transition(all 300ms linear 0ms);
width: 100%;
}
+ .entry-body {
position: relative;
z-index: 1;
margin-top: -60px;
padding: 0 30px;
@media #{$max-lg} {
padding-left: 20px;
padding-right: 20px;
}
}
&.featured-default img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
}
.entry-title {
line-height: 1.3;
color: #383838;
margin-bottom: 2px;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.entry-readmore {
display: none;
a {
font-size: 15px;
line-height: 28px;
font-weight: 700;
@include font-family-heading($heading_default_font);
@extend .text-gradient;
i {
display: initial;
}
}
}
.entry-meta {
margin-top: 2px;
margin-bottom: 4px;
}
.entry-holder {
background-color: #fff;
@include border-radius(5px);
@include box-shadow(0 13px 29px rgba(#000000, 0.1));
padding: 20px 20px 22px 30px;
@include transition(all 300ms linear 0ms);
@media #{$max-sm} {
padding-left: 20px;
}
}
.grid-item-inner {
margin-bottom: 60px;
&:hover {
.entry-featured img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.entry-holder {
@include box-shadow(0 20px 29px rgba(#000000, 0.2));
}
}
}
.grid-item.col-xl-3 {
.entry-featured + .entry-body {
padding-left: 15px;
padding-right: 15px;
}
.entry-holder {
padding-right: 15px;
padding-left: 20px;
}
.entry-title {
font-size: 18px;
}
}
}
.ct-blog-grid-layout2 {
.ct-video-overlay {
background-color: rgba(#0e0e0e, 0.66);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@include transition(all 300ms linear 0ms);
opacity: 0;
.ct-video-button {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
width: 77px;
height: 77px;
font-size: 14px;
}
}
.entry-featured {
margin-bottom: 12px;
position: relative;
overflow: hidden;
@include border-radius(5px);
background-color: #0e0e0e;
img {
@include border-radius(5px);
@include transition(all 300ms linear 0ms);
}
}
.entry-title {
margin-bottom: 3px;
font-size: 20px;
line-height: 26px;
color: #383838;
&:hover a {
text-decoration: underline;
}
}
.entry-meta {
font-size: 15px;
color: #383838;
margin-bottom: 6px;
li {
position: relative;
margin-right: 8px;
padding-right: 8px;
&:before {
content: '';
width: 1px;
height: 15px;
background-color: #909090;
position: absolute;
top: 50%;
right: 0;
@include transform(translate(0, -50%));
}
&:last-child {
margin-right: 0;
padding-right: 0;
&:before {
display: none;
}
}
}
}
.entry-readmore {
display: flex;
flex-wrap: wrap;
align-items: center;
a {
font-size: 15px;
font-weight: 600;
@include font-family-heading($heading_default_font);
@extend .text-gradient;
@include background-horizontal($gradient_color_from, $gradient_color_to);
position: relative;
&:before {
content: '';
position: absolute;
bottom: 4px;
left: 0;
width: 0;
height: 1px;
@include transition(all 300ms linear 0ms);
@include background-horizontal($gradient_color_from, $gradient_color_to);
}
i {
display: initial;
margin-left: 4px;
}
&:hover:before {
width: 100%;
}
}
}
.item--content {
font-size: 18px;
line-height: 32px;
}
.grid-item-inner {
margin-bottom: 43px;
&:hover {
.entry-featured img {
@include transform(scale(1.1));
opacity: 0.35;
}
.ct-video-overlay {
opacity: 1;
}
}
&.item-lg {
.entry-featured {
margin-bottom: 21px;
}
.entry-title {
font-size: 30px;
line-height: 37px;
color: #0e0e0e;
@media #{$max-sm} {
font-size: 20px;
line-height: 26px;
}
a:hover {
color: #0e0e0e;
}
}
.entry-meta {
border-bottom: 1px solid #ebebeb;
padding-bottom: 13px;
margin-bottom: 6px;
}
&:hover {
.entry-featured img {
opacity: 1;
}
}
}
}
&.style-light {
.entry-title {
color: #fff;
a:hover {
color: inherit;
}
}
.grid-item-inner.item-lg .entry-title {
color: #fff;
a:hover {
color: inherit;
}
}
.item--content {
color: #fff;
}
.entry-meta {
color: #b8b8b8;
}
.grid-item-inner.item-lg .entry-meta {
border: none;
}
}
}
.ct-blog-carousel-layout1 {
.grid-item-inner {
margin-bottom: 40px;
}
.slick-dots {
margin-top: 20px;
}
.ct-slick-carousel[data-arrows="true"] {
padding-bottom: 80px;
}
&.style4 {
.entry-title {
font-size: 20px;
color: #fff;
}
.entry-holder {
background-color: #000;
}
.slick-dots {
margin-top: 0;
}
}
}
.ct-blog-grid-layout3 {
margin: 0 -40px;
@media #{$max-md} {
margin: 0 -15px;
}
.entry-category {
font-size: 14px;
font-weight: 500;
color: rgba(#000, 0.7);
line-height: 20px;
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
.entry-title {
margin-bottom: 0;
font-size: 20px;
line-height: 1.2;
@media #{$max-md} {
font-size: 16px;
}
}
.entry-featured {
margin-bottom: 13px;
position: relative;
}
.entry-date {
position: absolute;
top: 23px;
right: 23px;
left: auto;
line-height: 28px;
height: inherit;
min-width: 110px;
@include border-radius(2px);
padding: 0 8px;
font-size: 14px;
font-weight: 500;
}
.grid-item-inner {
border-bottom: 1px solid #e4e4e4;
padding-bottom: 17px;
margin-bottom: 15px;
}
.grid-item {
padding: 0 40px 0 60px;
width: 50%;
@media #{$max-md} {
padding-left: 15px;
padding-right: 15px;
}
@media #{$max-sm} {
width: 100%;
}
&.item-lg {
padding-right: 0px;
padding-left: 40px;
@media #{$max-md} {
padding-left: 15px;
padding-right: 15px;
}
.entry-category {
margin-bottom: 4px;
}
.entry-title {
font-size: 24px;
line-height: 32px;
margin-bottom: 13px;
}
.item--content {
font-size: 16px;
line-height: 27px;
color: #000;
}
.grid-item-inner {
border-bottom: none;
}
}
&:last-child .grid-item-inner {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
}
.grid-sizer {
width: 33.33%;
}
}
.ct-blog-carousel-layout2 {
.item--featured {
position: relative;
overflow: hidden;
@include border-radius(7px 7px 0 0);
img {
-webkit-filter: grayscale(85%);
filter: grayscale(85%);
@include transition(all 300ms linear 0ms);
}
}
.item--meta {
font-size: 14px;
color: #939393;
margin-bottom: 8px;
list-style: none;
text-transform: capitalize;
position: relative;
padding-bottom: 6px;
&:before {
content: '';
width: 47px;
height: 3px;
@include background-horizontal($gradient_color_to, $gradient_color_from);
position: absolute;
bottom: 0;
left: 0;
}
li {
display: inline-block;
margin-right: 16px;
@include font-family-heading($heading_default_font);
i {
margin-right: 8px;
}
a {
color: inherit;
&:hover {
color: inherit;
text-decoration: underline;
}
}
}
}
.item--title {
font-size: 20px;
line-height: 30px;
margin-bottom: 10px;
a {
color: inherit;
&:hover {
color: inherit;
text-decoration: underline;
}
}
}
.item--content {
font-size: 15px;
line-height: 24px;
}
.item--body {
background-color: #fff;
padding: 22px 25px 39px;
@include box-shadow(0 0px 18px rgba(#000000, 0.12));
@include transition(all 260ms linear 0ms);
}
.item--readmore {
margin-top: 12px;
a {
font-weight: 700;
@include font-family-heading($heading_default_font);
i {
margin-left: 4px;
}
}
}
.grid-item-inner {
margin-bottom: 60px;
&:hover {
.item--body {
@include box-shadow(0 15px 35px rgba(#000000, 0.22));
}
.item--featured img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
}
}
.ct-slick-carousel {
margin: 0 -40px;
.slick-list {
padding-left: 40px;
padding-right: 40px;
.slick-slide {
opacity: 0;
@include transition(all 220ms linear 0ms);
&.slick-active {
opacity: 1;
}
}
}
}
&.style2 {
.ct-slick-carousel[data-arrows="true"] {
padding-bottom: 60px;
}
@media #{$min-xl} {
.ct-slick-carousel[data-arrows="true"] {
padding-bottom: 0;
padding-left: 220px;
}
}
@media #{$mm-xl} {
.ct-slick-carousel[data-arrows="true"] {
padding-left: 170px;
}
}
.item--featured {
@include border-radius(0px);
img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
}
.item--title {
font-size: 20px;
line-height: 26px;
}
.item--meta {
margin-bottom: 0;
padding-bottom: 2px;
&:before {
display: none;
}
}
.item--body {
padding-bottom: 27px;
padding-top: 29px;
padding-left: 30px;
}
@media #{$min-xl} {
.slick-arrow {
width: 84px;
height: 84px;
@include border-radius(0px);
@include box-shadow(none);
top: 0;
z-index: 9;
left: 40px;
@include transform(translate(0,0));
margin: 0;
right: auto;
bottom: auto;
&:after {
@include border-radius(0px);
}
&.slick-prev {
&:before {
content: '\f060';
}
}
&.slick-next {
left: 130px;
&:before {
content: '\f061';
}
}
}
}
@media #{$mm-xl} {
.slick-arrow {
width: 60px;
height: 60px;
&.slick-next {
left: 110px;
}
}
}
}
}
.ct-blog-carousel-layout3 {
.item--title {
font-size: 20px;
line-height: 26px;
margin-bottom: 7px;
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
.item--holder {
background-color: #fff;
max-width: 355px;
position: absolute;
bottom: 0px;
left: 0;
padding: 30px 30px 30px 35px;
@include transition(all 260ms linear 0ms);
@include transform(translateX(-100%));
@media #{$max-sm} {
padding-left: 20px;
padding-right: 20px;
}
.entry-meta {
color: #474747;
margin-bottom: 8px;
}
}
.item--readmore {
font-size: 14px;
line-height: 24px;
@include font-family-heading($heading_default_font);
font-weight: 600;
i {
color: $primary_color;
margin-left: 6px;
font-weight: 900;
}
span {
border-bottom: 1px solid #000000;
@include transition(all 300ms linear 0ms);
}
a {
color: #000000;
&:hover {
color: $primary_color;
span {
border-color: $primary_color;
}
}
}
}
.item--featured {
position: relative;
overflow: hidden;
margin-bottom: 80px;
img {
@include transition(all 260ms linear 0ms);
}
}
.grid-item-inner {
position: relative;
overflow: hidden;
&:hover {
.item--featured img {
@include transform(scale(1.12));
}
.item--holder {
@include transform(translateX(0%));
}
}
}
.slick-arrow {
height: 45px;
width: 45px;
border: none;
@include box-shadow(none);
color: #fff;
background-color: #3e3e3e;
margin: 0 5px;
&:after {
display: none;
}
&:hover, &:focus {
background-color: $primary_color;
color: #fff;
}
&.slick-prev {
margin-left: -27px;
}
&.slick-next {
margin-left: 27px;
}
}
.ct-slick-carousel[data-arrows="true"] {
padding-bottom: 62px;
}
}
.ct-blog-carousel-layout4 {
.item--featured {
position: relative;
overflow: hidden;
margin-bottom: 23px;
img {
@include transition(all 300ms linear 0ms);
}
&:hover img {
@include transform(scale(1.1));
}
.item--category {
position: absolute;
bottom: 14px;
right: 13px;
background-color: $primary_color;
font-size: 14px;
font-weight: 500;
color: #ffffff;
line-height: 27px;
padding: 0 15px;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
}
.item--meta {
list-style: none;
font-size: 14px;
color: #707070;
display: flex;
flex-wrap: wrap;
text-transform: capitalize;
margin: 0 0 6px;
li {
margin-right: 28px;
i {
color: $primary_color;
margin-right: 4px;
}
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
}
.item--title {
font-size: 22px;
line-height: 28px;
margin-bottom: 9px;
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
.item--content {
color: #000;
line-height: 1.625;
margin-bottom: 22px;
}
.btn-arrow i {
font-weight: 700;
}
.grid-item-inner {
padding: 21px 21px 53px 21px;
background-color: #fff;
margin-bottom: 30px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
&:hover {
@include transform(translateY(-20px));
@include box-shadow(0 20px 24px rgba(#0c0c0c, 0.1));
}
}
.slick-slide {
margin-top: 20px;
}
&.style1 {
.slick-dots {
margin: 4px 0 0;
li {
margin: 0 3px;
button {
background-color: #c4c9d1;
width: 12px;
height: 12px;
}
&.slick-active button {
@include transform(scale(1.2));
background-color: $primary_color;
}
}
}
}
&.style2 {
.btn-arrow {
i {
@include border-radius(0 37px 37px 0);
}
span:before {
@include border-radius(37px 0 0 37px);
}
}
.item--featured a {
position: relative;
display: block;
&:before {
content: '';
@include transition(.3s cubic-bezier(.24,.74,.58,1));
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(#000, 0.2);
opacity: 0;
}
}
.grid-item-inner {
border: 2px solid #ebebeb;
@include box-shadow(0 2px 43px rgba(#0c0c0c, 0.13));
&:hover {
@include box-shadow(0 37px 51px rgba(#0c0c0c, 0.18));
.item--featured a:before {
opacity: 1;
}
}
}
.ct-slick-carousel {
margin: 0 -40px 0 -40px;
padding-left: 40px;
padding-right: 40px;
overflow: hidden;
.slick-list {
overflow: visible;
}
.slick-slide {
opacity: 0;
margin-top: 30px;
margin-bottom: 20px;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
&.slick-active {
opacity: 1;
}
}
}
.slick-dots {
margin-top: 0;
}
}
&.style3 {
.btn-arrow {
flex-direction: row-reverse;
i {
@include border-radius(3px);
}
span {
padding-right: 20px;
padding-left: 12px;
&:before {
right: auto;
left: 0;
@include border-radius(0 3px 3px 0);
}
}
&:hover i {
@include border-radius(3px 0 0 3px);
}
}
.item--meta {
list-style: none;
font-size: 14px;
color: #707070;
font-weight: 500;
display: flex;
flex-wrap: wrap;
text-transform: capitalize;
margin: 0 0 5px;
i {
display: none;
}
li {
margin-right: 18px;
position: relative;
&:after {
content: '';
width: 4px;
height: 4px;
@include border-radius(4px);
background-color: $primary_color;
position: absolute;
top: 50%;
@include transform(translate(0, -50%));
right: -11px;
}
&.item-author a {
color: #0e0e0e;
&:hover {
color: $primary_color;
}
}
&:last-child:after {
display: none;
}
}
}
.grid-item-inner {
padding-bottom: 30px;
.item--category {
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
&:hover {
.item--featured .item--category {
bottom: 34px;
}
}
}
.slick-dots {
height: 13px;
width: auto;
display: inline-block;
margin: 10px 0 0;
position: relative;
left: 50%;
@include transform(translate(-50%, 0));
li {
display: inline-block;
vertical-align: top;
margin: 0;
width: 14px;
height: 14px;
position: relative;
button {
width: 13px;
height: 13px;
border-radius: 13px;
background-color: #e0e0e0;
background-image: none;
@include transform(scale(1));
position: absolute;
top: 0;
left: 0;
&:before, &:after {
display: none;
}
}
&.slick-active button {
background-color: $primary_color;
}
+ li {
margin-left: 8px;
}
}
}
}
}
.ct-blog-carousel-layout5 {
.entry-body {
padding: 0 !important;
}
.entry-featured {
max-width: 55px;
min-width: 55px;
margin-right: 15px;
}
.entry-title {
margin-bottom: 5px;
margin-top: -6px;
font-size: 16px;
line-height: 24px;
color: #ffffff;
font-weight: 400;
font-family: inherit;
a:hover {
color: $primary_color;
}
}
.item-date {
font-size: 13px;
color: #b9c1da;
font-family: Lato;
i {
margin-right: 9px;
color: $primary_color;
}
}
.grid-item-inner {
display: flex;
flex-wrap: nowrap;
}
.slick-arrow {
width: 20px;
height: 20px;
background-image: none;
background-color: transparent;
color: #fff;
top: 50%;
@include transform(translate(0, -50%));
margin: 0;
&:hover {
color: $primary_color;
}
&.slick-prev {
left: 8px;
right: auto;
}
&.slick-next {
right: 8px;
left: auto;
}
&:before {
font-weight: 400;
font-size: 16px;
}
&:after {
display: none;
}
}
.ct-slick-carousel[data-arrows="true"] {
padding: 0 22px;
}
}
.ct-blog-carousel-layout6 {
.item--featured {
position: relative;
overflow: hidden;
img {
@include transition(all 240ms linear 0ms);
}
}
.item-date {
font-size: 13px;
color: #152644;
font-weight: 700;
margin-bottom: 8px;
@include font-family-heading($heading_default_font);
i {
margin-right: 7px;
}
}
.item--title {
font-size: 18px;
margin-bottom: 0;
color: #fff;
position: relative;
overflow: hidden;
z-index: 1;
padding: 15px 40px 15px 26px;
white-space: pre;
text-overflow: ellipsis;
a {
color: inherit;
}
&:before, &:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
@include transition(all 240ms linear 0ms);
}
&:before {
@include background-horizontal($gradient_color_from, $gradient_color_to);
}
&:after {
background-color: $secondary_color;
opacity: 0;
}
}
.item--content {
font-size: 15px;
line-height: 24px;
color: #4e4e4e;
margin-bottom: 12px;
}
.item--readmore {
a {
@include font-family-heading($heading_default_font);
font-size: 13px;
text-transform: uppercase;
color: $primary_color;
font-weight: 700;
&:hover {
color: $secondary_color;
}
i {
margin-left: 4px;
}
}
}
.item--holder {
background-color: #fff;
border-width: 0 1px 1px 1px;
border-color: #e8eaef;
border-style: solid;
padding: 26px 26px 18px 26px;
@include transition(all 300ms linear 0ms);
position: relative;
&:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-width: 7px;
border-style: solid;
border-color: $primary_color transparent transparent $primary_color;
top: 0;
left: 26px;
@include transition(all 240ms linear 0ms);
}
}
.grid-item-inner {
@include transition(all 300ms linear 0ms);
&:hover {
@include box-shadow(0 29px 43px rgba(#1c1c1c, 0.16));
.item--title {
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
}
.item--holder {
border-color: #fff;
&:before {
border-color: $secondary_color transparent transparent $secondary_color;
}
}
.item--featured img {
@include transform(scale(1.14));
}
}
}
.ct-slick-carousel {
margin: 0 -20px 0 -20px;
padding-left: 20px;
padding-right: 20px;
overflow: hidden;
.slick-list {
overflow: visible;
}
}
.slick-slide {
opacity: 0;
margin: 0px 0 50px;
@include transition(all 300ms linear 0ms);
&.slick-active {
opacity: 1;
}
}
.blog-layout6-default .slick-dots {
height: 14px;
background-color: #dae3e8;
border-radius: 14px;
width: auto;
display: inline-block;
margin: 0;
top: -10px;
position: relative;
left: 50%;
@include transform(translate(-50%, 0));
li {
display: inline-block;
vertical-align: top;
margin: 0;
width: 14px;
height: 14px;
position: relative;
button {
width: 14px;
height: 14px;
border-radius: 14px;
background-color: #dae3e8;
background-image: none;
@include transform(scale(1));
position: absolute;
top: 0;
left: 0;
&:before, &:after {
display: none;
}
}
&.slick-active button {
background-color: $primary_color;
}
+ li {
margin-left: 10px;
}
}
}
.dot-style-u8 .slick-dots {
margin-top: 0;
}
}
.blog-layout6-custom1 {
.ct-blog-carousel-layout6 .slick-slide {
margin-bottom: 35px;
}
.ct-blog-carousel-layout6 .grid-item-inner:hover {
@include box-shadow(0 0 43px rgba(#060a09, 0.05));
}
}
.ct-blog-carousel-layout7 {
.item--featured {
width: 47%;
position: relative;
overflow: hidden;
@media #{$max-md} {
width: 100%;
min-height: 280px;
}
a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@include transition(all 500ms ease-out 0s);
}
}
.item--title {
margin-bottom: 12px;
font-size: 22px;
line-height: 1.45;
color: #000000;
@media #{$max-lg} {
font-size: 18px;
}
a {
color: inherit;
&:hover {
color: #444;
}
}
}
.item--category {
font-size: 12px;
text-transform: uppercase;
color: #010101;
font-weight: 500;
font-family: "Rubik";
line-height: 25px;
background-color: #eee8e4;
padding: 0 12px;
display: inline-block;
margin-bottom: 14px;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--content {
font-size: 16px;
line-height: 26px;
color: #5c5c5e;
font-family: "Nunito Sans";
margin-bottom: 23px;
}
.item--readmore a {
font-size: 14px;
font-weight: 600;
box-shadow: none;
padding: 0 20px;
line-height: 48px;
background-color: #000;
@include border-radius(3px);
&:hover, &:focus {
background-color: $primary_color;
}
}
.item--date {
position: absolute;
z-index: 1;
height: 62px;
width: 62px;
background-color: $primary_color;
@include border-radius(3px);
top: 16px;
left: 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
span {
display: block;
line-height: 1;
font-size: 22px;
font-weight: 700;
color: #fff;
@include font-family-heading($heading_default_font);
+ span {
font-size: 20px;
}
}
}
.item--body {
width: 53%;
padding: 30px;
@media #{$max-md} {
width: 100%;
}
}
.grid-item-inner {
display: flex;
flex-wrap: wrap;
background-color: #fff;
@include box-shadow(0 2px 30px rgba(#041445, 0.1));
margin-top: 30px;
margin-bottom: 45px;
&:hover {
.item--featured a {
@include transform(scale3d(1.1, 1.1, 1.1));
}
}
}
.ct-slick-carousel {
margin: 0 -30px 0 -30px;
padding-left: 30px;
padding-right: 30px;
overflow: hidden;
.slick-list {
overflow: visible;
}
}
.slick-slide {
@include transition(all 200ms linear 0ms);
opacity: 0;
&.slick-active {
opacity: 1;
}
}
.slick-dots {
margin-top: 0;
}
&.style2 {
.item--body {
padding-right: 20px;
}
.item--date {
text-align: center;
color: $secondary_color;
span {
color: inherit;
}
}
.item--content {
font-size: 15px;
line-height: 24px;
color: #3a4268;
@media #{$max-lg} {
font-size: 14px;
}
}
.item--title {
color: #281a48;
}
.item--category {
background-color: #e0e2e7;
color: $secondary_color;
}
.item--readmore a {
background-color: $secondary_color;
padding-left: 18px;
padding-right: 58px;
i {
margin: 0;
position: absolute;
top: 50%;
right: 8px;
transform: translate(0, -50%);
width: 32px;
height: 32px;
background-color: $primary_color;
@include border-radius(3px);
line-height: 32px;
font-size: 15px;
color: $secondary_color;
@include transition(all 200ms linear 0ms);
}
&:hover, &:focus {
background-color: $primary_color;
color: $secondary_color;
i {
background-color: $secondary_color;
color: #fff;
}
}
}
}
&.style3 {
.item--date {
text-align: center;
}
.item--category {
color: #1f323e;
background-color: #d7e3e3;
}
.item--title {
color: #1d1b4c;
}
.item--content {
color: #696b6d;
}
.item--readmore .btn {
line-height: 48px;
@include border-radius(5px);
padding: 0 38px;
background-color: #1f323e;
font-size: 14px;
&:hover, &:focus {
background-color: $primary_color;
}
i {
display: none;
}
}
.item--body {
padding-right: 20px;
}
.slick-dots {
margin-bottom: 8px;
}
}
&.style4 {
.item--date {
text-align: center;
}
.item--category {
color: #1f323e;
background-color: #f6f8fb;
}
.item--title {
color: #0d2252;
a:hover {
color: $primary_color;
}
}
.item--content {
color: #0d2252;
}
.item--readmore .btn {
line-height: 48px;
@include border-radius(48px);
padding: 0 38px;
font-size: 14px;
background-color: $secondary_color;
&:hover, &:focus {
background-color: $primary_color;
}
i {
display: none;
}
}
.item--body {
padding-right: 20px;
}
.slick-dots {
margin-bottom: 8px;
}
}
}
.ct-blog-carousel-layout8 {
.item--featured {
margin-bottom: 30px;
}
.item--category {
font-size: 16px;
color: #585476;
margin-bottom: 12px;
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
.item--title {
margin-bottom: 39px;
font-size: 24px;
line-height: 34px;
color: #161b39;
padding-right: 10%;
@media #{$max-lg} {
padding-right: 0;
}
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
.item--meta {
margin-bottom: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: 18px;
color: #282350;
.item-author {
margin-right: 20px;
flex-grow: 1;
img {
max-width: 43px;
@include border-radius(43px);
margin-right: 14px;
@media #{$max-sm} {
display: none;
}
}
a {
display: flex;
flex-wrap: nowrap;
align-items: center;
color: inherit;
label {
margin-right: 4px;
}
span {
font-weight: 700;
color: $primary_color;
}
}
}
}
}
.ct-career-grid1 {
.item--feature .fa {
font-family: 'FontAwesome';
font-weight: normal;
}
}
.ct-career-grid1 {
.item--image {
height: 67px;
width: 67px;
min-width: 67px;
@include border-radius(67px);
background-color: #ebf2fd;
position: relative;
margin-right: 22px;
img {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
}
.item--title {
font-size: 20px;
margin-bottom: 8px;
@media #{$max-lg} {
font-size: 19px;
}
}
.item--feature {
font-size: 14px;
color: #939393;
list-style: none;
margin-bottom: 0;
@include font-family-heading($heading_default_font);
i {
margin-right: 4px;
}
li + li {
margin-top: 4px;
}
}
.item-desc {
font-size: 15px;
line-height: 28px;
margin-bottom: 18px;
}
.item--holder {
display: flex;
flex-wrap: nowrap;
margin-bottom: 7px;
}
.item--inner {
padding: 40px 34px;
background-color: #fff;
@include border-radius(7px);
@include box-shadow(0 0 20px rgba(#0c0c0c, 0.14));
@include transition(all 300ms linear 0ms);
margin-bottom: 60px;
@media #{$max-lg} {
padding-left: 30px;
padding-right: 20px;
}
@media #{$max-xs} {
padding-left: 20px;
}
&:hover {
@include box-shadow(0 20px 20px rgba(#0c0c0c, 0.14));
}
}
}
.ct-feature-layout1 {
.item--title {
font-size: 20px;
color: #383838;
@media #{$max-md} {
font-size: 16px;
}
i {
color: $gradient_color_from;
margin-right: 6px;
}
}
&.style2 {
background-color: #fafafa;
padding: 52px 50px 48px;
position: relative;
@media #{$max-lg} {
padding-left: 30px;
padding-right: 30px;
}
@media #{$max-md} {
padding-left: 20px;
padding-right: 20px;
}
&:before {
content: '';
width: 0px;
height: 4px;
position: absolute;
bottom: 0;
left: 0;
@include background-horizontal($gradient_color_from, $gradient_color_to);
@include transition(all 300ms linear 0ms);
}
.item--title {
font-family: 22px;
margin-bottom: 12px;
i {
display: none;
}
}
&:hover:before {
width: 100%;
}
}
&.style3 {
background-color: #fafafa;
padding: 52px 50px 48px;
position: relative;
z-index: 1;
@media #{$max-lg} {
padding-left: 30px;
padding-right: 30px;
}
@media #{$max-md} {
padding-left: 20px;
padding-right: 20px;
}
&:before {
content: '';
width: 100%;
height: 0%;
position: absolute;
bottom: 0;
left: 0;
background-color: $secondary_color;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
z-index: -1;
}
.item--title {
font-family: 22px;
margin-bottom: 12px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
i {
display: none;
}
}
.item--desc {
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
&:hover {
.item--title, .item--desc {
color: #fff;
}
&:before {
height: 100%;
}
}
}
}
.ct-piechart-layout1 {
text-align: center;
.item--value {
position: relative;
display: flex;
margin: 0 auto 17px auto;
justify-content: center;
span {
font-size: 27px;
font-weight: 700;
@include font-family-heading($heading_default_font);
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
}
.item--title {
font-size: 22px;
color: #383838;
margin-bottom: 12px;
}
.item--desc {
font-size: 15px;
line-height: 26px;
}
&.style2 {
.item--value span {
font-size: 30px;
color: #000000;
font-weight: normal;
font-family: inherit;
}
.item--title {
color: #000000;
font-size: 22px;
font-weight: 600;
padding-top: 5px;
@media #{$max-xl} {
font-size: 18px;
}
}
}
}
.ct-piechart-layout2 {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
.item--holder {
max-width: 175px;
text-align: center;
position: absolute;
top: 0;
left: 50%;
@include transform(translate(-50%, 0));
width: 100%;
height: 100%;
padding: 0 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
span {
font-size: 35px;
line-height: 1;
@extend .text-gradient;
font-weight: 700;
@include font-family-heading($heading_default_font);
}
}
.item--title {
margin-top: 2px;
margin-bottom: 0;
font-size: 17px;
line-height: 24px;
font-weight: 400;
font-family: inherit;
}
}
.ct-award1 {
position: relative;
overflow: hidden;
img {
width: 100%;
@include transition(all 300ms linear 0ms);
}
.ct-award-bg {
min-height: 150px;
@media #{$max-sm} {
min-height: 180px;
}
@include transition(all 300ms linear 0ms);
span {
position: absolute;
width: 100%;
height: 100%;
}
}
.ct-award-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
font-size: 14px;
line-height: 1.25;
margin-bottom: 0;
font-weight: 600;
color: #fff;
text-align: center;
padding: 15px 20px 25px;
z-index: 1;
@include transition(all 300ms linear 0ms);
&:before {
content: '';
z-index: -1;
width: 100%;
height: 300%;
position: absolute;
bottom: 0;
left: 0;
@include background-gradient-bottom(#0f0f0f,rgba(#000, 0));
}
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.ct-award-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
&:hover {
img, .ct-award-bg {
@include transform(scale(1.1));
}
.ct-award-title {
opacity: 1;
}
}
}
.ct-banner1 {
padding-left: 142px;
position: relative;
z-index: 1;
@media #{$max-sm} {
padding-left: 60px;
}
&:before {
content: '';
width: 280px;
height: 135px;
background-image: url(../images/dots.png);
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 55px;
left: 0;
z-index: -1;
}
.ct-banner-imge {
margin-right: -18px;
position: relative;
@media #{$max-sm} {
margin-right: 0;
}
}
.ct-banner-title {
position: absolute;
font-size: 26px;
line-height: 1.2;
margin-bottom: 0;
padding: 22px 55px;
@include background-gradient-bottom($gradient_color_to, $gradient_color_from);
color: #fff;
transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
@include transform(translateX(45px) rotate(-90deg));
bottom: 34px;
left: -70px;
@media #{$max-md} {
padding: 22px 25px;
font-size: 18px;
}
@media #{$max-sm} {
bottom: 0;
}
}
}
.ct-banner2 {
.ct-banner-imge {
padding-left: 47px;
padding-top: 47px;
position: relative;
z-index: 1;
@media #{$max-md} {
padding-left: 24px;
padding-top: 24px;
}
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 47px;
right: 47px;
background-color: $primary_color;
@include box-shadow(0 0 79px rgba(#000000, 0.45) inset);
z-index: -1;
}
> img {
width: 100%;
}
+ .ct-banner-holder {
margin-top: -90px;
}
}
.ct-banner-icon {
min-width: 54px;
margin-right: 15px;
@media #{$max-md} {
margin-right: 10px;
}
@media #{$max-xs} {
margin-right: 0;
margin-bottom: 12px;
}
img {
max-width: 54px;
@media #{$max-md} {
max-width: 42px;
}
}
}
.ct-banner-title {
font-size: 24px;
margin-top: 2px;
margin-bottom: 8px;
@media #{$max-md} {
font-size: 20px;
}
}
.ct-banner-desc {
font-size: 15px;
line-height: 22px;
}
.ct-banner-holder {
display: flex;
flex-wrap: nowrap;
padding: 25px 27px 33px;
background-color: #fff;
@include border-radius(30px 30px 0 0);
margin-right: 18px;
margin-left: 65px;
position: relative;
z-index: 1;
@include box-shadow(0 8px 65px rgba(#0c0c0c, 0.19));
@media #{$max-md} {
margin-left: 34px;
margin-right: 10px;
padding-left: 20px;
padding-right: 20px;
}
@media #{$max-xs} {
display: block;
}
&:before {
content: '';
position: absolute;
top: -11px;
left: 0;
right: 0;
height: 100%;
@include border-radius(30px 30px 0 0);
background-color: $primary_color;
z-index: -2;
}
&:after {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
@include border-radius(30px 30px 0 0);
}
}
}
.ct-fancy-box-grid1 {
text-align: center;
margin: 0;
.item--icon {
line-height: 1;
margin-bottom: 10px;
i {
color: #192743;
font-size: 51px;
@include transition(all 200ms linear 0ms);
}
}
.item--title {
font-size: 16px;
line-height: 26px;
color: #334870;
margin-bottom: 0;
font-weight: 600;
@include transition(all 200ms linear 0ms);
}
.item-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
}
.row {
margin: 0;
.grid-item {
padding: 0;
}
}
.item-line {
background-color: #75a1fb;
position: absolute;
opacity: 0;
@include transition(all 200ms linear 0ms);
z-index: 99;
}
.item-line-top {
top: -1px;
}
.item-line-bottom {
bottom: -1px;
}
.item-line-top, .item-line-bottom {
width: calc(100% + 160px);
width: -webkit-calc(100% + 160px);
height: 2px;
left: -80px;
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(to right, rgba(#75a1fb, 0), #75a1fb, rgba(#75a1fb, 0));
background: rgba(0, 0, 0, 0) -ms-linear-gradient(to right, rgba(#75a1fb, 0), #75a1fb, rgba(#75a1fb, 0));
background: rgba(0, 0, 0, 0) -o-linear-gradient(to right, rgba(#75a1fb, 0), #75a1fb, rgba(#75a1fb, 0));
background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(#75a1fb, 0), #75a1fb, rgba(#75a1fb, 0));
}
.item-line-left {
left: -1px;
}
.item-line-right {
right: -1px;
}
.item-line-left, .item-line-right {
height: calc(100% + 160px);
height: -webkit-calc(100% + 160px);
width: 2px;
top: -80px;
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(to top, rgba(#75a1fb, 0), #75a1fb, rgba(#75a1fb, 0));
background: rgba(0, 0, 0, 0) -ms-linear-gradient(to top, rgba(#75a1fb, 0), #75a1fb, rgba(#75a1fb, 0));
background: rgba(0, 0, 0, 0) -o-linear-gradient(to top, rgba(#75a1fb, 0), #75a1fb, rgba(#75a1fb, 0));
background: rgba(0, 0, 0, 0) linear-gradient(to top, rgba(#75a1fb, 0), #75a1fb, rgba(#75a1fb, 0));
}
.item--inner {
border: 1px solid #122445;
padding: 32px 20px 23px;
margin-left: -1px;
margin-top: -1px;
position: relative;
@include transition(all 200ms linear 0ms);
&:hover, &.active {
.item-line {
opacity: 1;
}
.item--title {
color: #fff;
}
.item--icon i {
color: #75a1fb;
}
}
.item--holder {
height: 100%;
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
justify-content: center;
}
}
}
.ct-fancy-box-grid2 {
.item--icon {
line-height: 1;
margin-bottom: 26px;
i {
font-size: 65px;
@extend .text-gradient;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
svg {
height: 65px;
width: 100%;
}
img {
max-height: 65px;
}
}
.item--title {
font-size: 20px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
.item--desc {
font-size: 16px;
line-height: 26px;
color: #000000;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
.item-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
.row {
margin: 0 14px 0 16px;
.grid-item {
padding: 0;
&:hover {
z-index: 99;
}
}
}
.item--shadow {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
margin: auto;
height: 75%;
width: 83%;
z-index: -1;
@include transition(all 300ms linear 0ms);
@include box-shadow(0 10px 40px rgba(#050c67, 0.28));
opacity: 0;
}
.item--inner {
text-align: center;
border: 1px solid #ebeffc;
background-color: #f9fbfd;
padding: 55px 40px 48px;
margin-top: -1px;
margin-left: -1px;
@include transition(all 300ms linear 0ms);
position: relative;
z-index: 1;
@media #{$max-sm} {
padding-left: 30px;
padding-right: 30px;
}
&:hover {
background-color: #fff;
z-index: 99;
+ .item--shadow {
opacity: 1;
}
}
}
}
.ct-case-study-grid1, .ct-case-study-carousel-layout1 {
.item--featured {
@include border-radius(5px);
overflow: hidden;
img {
@include border-radius(5px);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
}
}
.item--title {
font-size: 20px;
line-height: 26px;
margin-bottom: 0px;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--category {
font-size: 15px;
color: #383838;
margin-bottom: 7px;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--readmore a {
position: absolute;
top: 0;
right: 0;
@include border-radius(0 5px 0 5px);
font-size: 26px;
color: #fff;
font-weight: 400;
@include font-family-heading($heading_default_font);
width: 41px;
height: 39px;
line-height: 39px;
z-index: 1;
text-align: center;
&:before, &:after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
@include transition(all 300ms linear 0ms);
@include border-radius(0 5px 0 5px);
}
&:before {
background-color: #0e0e0e;
}
&:after {
@include background-horizontal($gradient_color_from, $gradient_color_to);
opacity: 0;
}
&:hover {
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
}
}
.item--meta {
padding: 20px 25px 20px 35px;
background-color: #fff;
@include border-radius(5px);
@include box-shadow(0 5px 38px rgba(#051b2e, 0.2));
position: relative;
overflow: hidden;
@include transition(all 300ms linear 0ms);
@media #{$max-xl} {
padding-left: 30px;
}
@media #{$max-sm} {
padding-left: 20px;
}
}
.item--holder {
position: relative;
padding: 0 40px;
margin-top: -70px;
@media #{$max-xl} {
padding: 0 25px;
}
}
.grid-item-inner {
margin-bottom: 65px;
&:hover {
.item--meta {
@include box-shadow(0 12px 38px rgba(#051b2e, 0.3));
}
.item--featured {
img {
@include transform(scale(1.1));
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
}
}
}
}
.ct-case-study-carousel-layout1.style2 {
.item--featured {
@include border-radius(0px);
position: relative;
z-index: 1;
&:before {
content: '';
height: 50%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
@include background-gradient-bottom(rgba(#000, 0.8) 50%, rgba(#000, 0));
z-index: 1;
@include transition(all 300ms linear 0ms);
}
img {
@include border-radius(0px);
}
}
.item--meta {
@include border-radius(0px);
z-index: 2;
}
.item--readmore a {
@include border-radius(0px);
&:before, &:after {
@include border-radius(0px);
}
&:after {
background-image: none;
}
}
.grid-item-inner:hover {
.item--featured {
&:before {
@include background-gradient-bottom(rgba(darken($primary_color, 0.2), 0.9) 50%, rgba(#000, 0));
}
}
.item--readmore a:after {
opacity: 1;
}
}
}
.ct-case-study-carousel-layout2 {
.item--title {
font-size: 22px;
margin-bottom: 10px;
color: #ffffff;
@media #{$max-sm} {
font-size: 20px;
}
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--holder {
background-color: #0e0e0e;
max-width: 382px;
position: absolute;
bottom: 0px;
left: 0;
padding: 30px 30px 30px 35px;
@include transition(all 260ms linear 0ms);
@include transform(translateX(-100%));
@media #{$max-sm} {
padding-left: 20px;
padding-right: 20px;
}
}
.item--category {
font-size: 15px;
line-height: 24px;
color: #ffffff;
margin-bottom: 20px;
label {
color: $gradient_color_from;
}
a {
color: inherit;
&:hover {
color: $gradient_color_from;
}
}
}
.item--readmore {
font-size: 14px;
line-height: 24px;
@include font-family-heading($heading_default_font);
i {
color: $gradient_color_from;
margin-left: 6px;
}
a {
color: #fff;
&:hover {
color: $gradient_color_from;
}
}
}
.item--featured {
position: relative;
overflow: hidden;
margin-bottom: 80px;
img {
@include transition(all 260ms linear 0ms);
}
}
.grid-item-inner {
position: relative;
overflow: hidden;
&:hover {
.item--featured img {
@include transform(scale(1.12));
}
.item--holder {
@include transform(translateX(0%));
}
}
}
.slick-arrow {
height: 45px;
width: 45px;
border: 2px solid #cecfe3;
@include box-shadow(none);
color: #b7bce9;
margin: 0 5px;
&:after {
display: none;
}
&:hover, &:focus {
border-color: #0e0e0e;
background-color: #0e0e0e;
color: #fff;
}
&.slick-prev {
margin-left: -27px;
}
&.slick-next {
margin-left: 27px;
}
}
.ct-slick-carousel[data-arrows="true"] {
padding-bottom: 62px;
}
&.arrow-style2 {
.slick-arrow {
border-color: #3e3e3e;
background-color: #3e3e3e;
color: #fff;
&:hover, &:focus {
background-color: $primary_color;
border-color: $primary_color;
color: #fff;
}
}
}
}
.ct-case-study-carousel-layout3 {
.item--featured {
max-width: 140px;
position: absolute;
top: -70px;
left: 0;
right: 0;
margin: auto;
img {
@include border-radius(140px);
}
+ .item--holder {
padding-top: 34px;
}
}
.item--title {
margin-bottom: 12px;
font-size: 22px;
line-height: 30px;
a {
color: inherit;
&:hover {
color: #333;
text-decoration: underline;
}
}
}
.item--category {
font-family: 'Muli';
color: #0e0e0e;
font-size: 14px;
margin-bottom: 7px;
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
.item--desc {
font-size: 16px;
line-height: 26px;
color: #000000;
}
.item--readmore {
position: absolute;
bottom: -27px;
right: 32px;
a {
width: 54px;
height: 54px;
@include background-gradient-bottom($gradient_color_from, $gradient_color_to);
display: block;
line-height: 54px;
color: #fff;
@include border-radius(54px);
font-size: 14px;
text-align: center;
opacity: 0;
&:hover i {
-o-animation: toRightFromLeft 0.3s forwards;
-ms-animation: toRightFromLeft 0.3s forwards;
-webkit-animation: toRightFromLeft 0.3s forwards;
animation: toRightFromLeft 0.3s forwards;
}
}
}
.grid-item-inner {
background-color: #ecf1f5;
padding: 50px 40px 44px;
@include box-shadow(0 0 16px rgba(#000000, 0.05));
position: relative;
margin-top: 70px;
margin-bottom: 30px;
@media #{$max-lg} {
padding-left: 30px;
padding-right: 30px;
}
&:hover {
.item--readmore a {
opacity: 1;
@include transform(rotateY(360deg));
}
}
}
.ct-carousel-inner {
margin: 0;
.carousel-item {
padding: 0;
}
}
}
.ct-case-study-carousel-layout4 {
.item--title {
font-size: 20px;
line-height: 26px;
margin-bottom: 5px;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--featured {
margin-bottom: 19px;
a {
display: block;
position: relative;
&:before {
content: '';
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: rgba(#000, 0.2);
}
}
}
.item--holder {
text-align: center;
padding-bottom: 23px;
}
.item--desc {
font-size: 15px;
line-height: 24px;
color: #000;
margin-bottom: 24px;
}
.btn-arrow2 {
span:not(.ct-button-icon) {
font-size: 14px;
line-height: 37px;
padding-right: 12px;
}
i {
width: 37px;
height: 37px;
line-height: 37px;
}
}
.grid-item-inner {
background-color: #fff;
padding: 21px;
@include box-shadow(0 7px 14px rgba(#0c0c0c, 0.06));
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
&:hover {
@include box-shadow(0 27px 24px rgba(#0c0c0c, 0.08));
@include transform(translateY(-15px));
.item--featured a:before {
opacity: 1;
}
}
}
.slick-slide {
margin-top: 20px;
margin-bottom: 50px;
}
.slick-dots {
margin-top: 0;
}
}
.cta-custom-bg {
> .elementor-column-wrap {
z-index: 1;
&:before {
content: '';
z-index: -1;
height: 100%;
width: 5000px;
position: absolute;
background-color: #fafafa;
top: 0;
left: 0;
@include border-radius(5px 0 0 5px);
}
}
+ .elementor-element {
z-index: 1;
}
&.box-shadow > .elementor-column-wrap:before {
@include box-shadow(0 12px 38px rgba(#051b2e, 0.3));
@media #{$max-sm} {
@include box-shadow(none);
background-color: transparent;
}
}
}
.ct-divider1 {
width: 244px;
height: 5px;
@include background-horizontal($gradient_color_from, $gradient_color_to);
@media #{$max-sm} {
width: 120px;
}
}
.ct-typing-out {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 0;
.ct-sub-title {
font-size: 30px;
font-weight: 400;
font-style: italic;
font-family: "Playfair Display";
margin-right: 4px;
display: inline-block;
}
}
@media #{$min-md} {
.box-offset-01 > .elementor-container > .elementor-row > .elementor-column,
.box-offset-01 > .elementor-container > .elementor-column {
width: calc(100% + 195px);
width: -webkit-calc(100% + 195px);
display: block;
margin-right: -195px;
position: relative;
z-index: 99;
}
}
.logo-landing img {
max-height: 120px;
}
.ct-showcase1 {
margin-top: 15px;
@include transition(all 300ms linear 0ms);
position: relative;
.ct-showcase-image {
@include box-shadow(0 0 15px rgba(#0e0e0e, 0.19));
@include transition(all 300ms linear 0ms);
overflow: hidden;
position: relative;
label {
@include box-shadow(0 6px 18px rgba(#000, 0.15));
line-height: 33px;
height: 33px;
font-size: 13px;
font-weight: 700;
color: #fff;
background-color: $primary_color;
position: absolute;
width: 180px;
padding: 0 10px;
@include transform(rotate(-45deg));
top: 25px;
left: -48px;
@include font-family-heading($heading_default_font);
text-align: center;
text-transform: uppercase;
}
}
.ct-showcase-meta {
text-align: center;
h3 {
margin-top: 56px;
margin-bottom: 0;
font-size: 18px;
font-weight: 600;
@media #{$max-md} {
font-size: 17px;
}
cite {
color: $primary_color;
font-style: normal;
}
}
}
.ct-showcase-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(#000000, 0.49);
z-index: 2;
@include transition(all 300ms linear 0ms);
opacity: 0;
}
.ct-showcase-link {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
font-size: 15px;
font-weight: 600;
line-height: 63px;
padding: 0 60px;
@include background-gradient-button(90deg, $gradient_color_from 0%, $gradient_color_to 50%, $gradient_color_from);
z-index: 3;
@include border-radius(60px);
opacity: 0;
@media #{$max-md} {
padding: 0 40px;
line-height: 55px;
}
}
&:hover {
@include transform(translateY(-15px));
.ct-showcase-overlay, .ct-showcase-link {
opacity: 1;
}
}
}
.el-max-width {
.ct-fancy-box-layout3.style2 {
max-width: 410px;
}
}
.ct-fancy-box-carousel1 {
position: relative;
z-index: 1;
&:before {
content: '';
z-index: -1;
width: 100%;
top: 0;
bottom: 50px;
background-color: #fafafa;
@include box-shadow(0 2px 40px rgba(#222223, 0.15));
position: absolute;
}
.item--icon {
line-height: 1;
margin-bottom: 18px;
i {
font-size: 60px;
color: $gradient_color_from;
}
}
.item--title {
font-size: 22px;
margin-bottom: 15px;
}
.item--description {
font-size: 16px;
line-height: 26px;
color: #000000;
}
.item--link a {
position: absolute;
line-height: 45px;
padding: 0 50px;
background-color: $gradient_color_from;
width: 100%;
color: #fff;
font-weight: 700;
bottom: -45px;
left: 0;
transform-origin: 0 0 0;
-webkit-transform-origin: 0 0 0;
-ms-transform-origin: 0 0 0;
-o-transform-origin: 0 0 0;
@include transform(scaleY(0));
i {
margin-left: 8px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
&:hover, &:focus {
background-color: $gradient_color_to;
color: #fff;
i {
@include transform(translateX(4px));
}
}
}
.item--inner {
padding: 50px 50px 47px;
position: relative;
@media #{$max-sm} {
padding-left: 30px;
padding-right: 30px;
}
&:before {
content: '';
width: 0px;
height: 140px;
border-right: 1px dashed #d0d0d0;
position: absolute;
top: 50%;
@include transform(translate(0, -50%));
right: -1px;
opacity: 0;
}
&:hover {
.item--link a {
@include transform(scaleY(1));
}
}
}
.slick-active .item--inner:before {
opacity: 1;
}
.slick-list {
padding: 0 0 50px;
}
&.ct-slick-slider .ct-carousel-inner {
margin: 0;
.slick-slide {
padding: 0;
}
}
.item--inner {
height: 100%;
}
.slick-list, .slick-track {
display: flex;
flex-wrap: nowrap;
}
}
.feature-offset > .elementor-container{
width: calc(100% + 90px);
}
.ct-particle-animate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@media #{$max-md} {
&.hide-md {
display: none;
}
}
img {
width: 100% !important;
height: auto;
}
div {
position: absolute;
top: 0;
left: 0;
}
.shape-animate1 {
animation: animationFramesTwo 12s infinite linear alternate;
}
.shape-animate2 {
animation: animationFramesOne 15s infinite linear alternate;
}
.shape-animate3 {
animation: animationFramesOne 12s infinite linear alternate;
}
.shape-animate4 {
animation: animationFramesFour 12s infinite linear alternate;
}
.shape-animate5 {
animation: animationFramesThree 12s infinite linear alternate;
}
.shape-animate6 {
animation: animationFramesFive 12s infinite linear alternate;
}
.shape-right-left {
animation: NewsletterAnimated1 12s infinite linear alternate;
}
.shape-left-right {
animation: NewsletterAnimated2 12s infinite linear alternate;
}
.shape-top-bottom {
animation: particleToptoBottom 10s infinite linear alternate;
@media screen and (min-width: 2400px) {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
}
.shape-rotate-3d {
animation: rotate-3d 6s linear infinite;
@media screen and (min-width: 2400px) {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
}
.ct-type-bg {
width: 100%;
height: 100%;
}
}
.ct-effect1 {
animation: particleToptoBottom 12s infinite linear alternate;
}
.ct-effect2 {
animation: NewsletterAnimated2 12s infinite linear alternate;
}
.h6-icon-phone {
font-size: 0px;
margin-right: 9px;
color: $gradient_color_from;
&:before {
font-size: 18px;
@include transform(scaleX(-1));
display: inline-block;
}
}
.color-gradient-from {
color: $gradient_color_from;
}
.ct-text-box-layout1 {
.item--sub-title {
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
color: #0e0e0e;
margin-bottom: 14px;
}
.item--title {
margin-bottom: 20px;
font-size: 32px;
line-height: 37px;
letter-spacing: -0.01em;
@media #{$max-lg} {
font-size: 24px;
line-height: 28px;
}
@media #{$max-md} {
font-size: 20px;
line-height: 26px;
}
}
.item--description {
font-size: 15px;
line-height: 26px;
color: #fff;
padding-right: 15px;
margin-bottom: 25px;
@media #{$max-md} {
font-size: 14px;
line-height: 24px;
}
}
.item--button {
a {
font-size: 14px;
padding: 0 14px;
line-height: 36px;
color: #0e0e0e;
border: 2px solid #fff;
background-color: #fff;
background-image: none;
@include border-radius(0px);
@include box-shadow(none);
&:hover {
background-color: transparent;
color: #fff;
}
}
}
.ct-text-box-inner {
background-color: $primary_color;
padding: 47px 35px 60px 50px;
@media #{$max-lg} {
padding-left: 30px;
padding-right: 20px;
}
@media #{$max-md} {
padding-left: 20px;
}
}
}
.ct-row-boxed-space {
max-width: 1720px;
margin: auto
}
.title-big {
.ct-heading h3.item--title {
font-size: 72px;
line-height: 82px;
letter-spacing: -0.01em;
}
}
.ct-image-single {
.ct-image-bg {
min-height: 300px;
display: inline-block;
width: 100%;
}
}
.shape-hide-lg .ct-particle-animate {
@media #{$max-lg} {
display: none;
}
}
.gm-custom1 .elementor-custom-embed, .gm-custom1 .ct-google-map {
overflow: hidden;
@include border-radius(600px);
@include box-shadow(0 1px 46px rgba(#0c0c0c, 0.22));
@media #{$max-lg} {
@include border-radius(0);
}
}
.h9-section-01 {
.h9-section-gradient {
width: 300px;
@include background-horizontal($gradient_color_from, $gradient_color_to);
position: absolute;
top: 0;
left: 0;
height: 100%;
}
> .elementor-container.elementor-column-gap-no {
max-width: 1920px;
padding-left: 94px;
@media #{$min-4xl} {
max-width: 100%;
}
@media #{$max-xl} {
padding-left: 54px;
}
@media #{$max-md2} {
padding-left: 0;
}
.ct-icon1.style1 {
position: absolute;
left: -94px;
bottom: 0;
background-color: #fff;
width: 94px;
text-align: center;
padding: 45px 0;
@media #{$max-xl} {
width: 54px;
left: -54px;
}
@media #{$max-md2} {
display: none;
}
a {
display: block;
width: 94px;
line-height: 58px;
@media #{$max-xl} {
width: 54px;
}
i {
margin: 0;
font-size: 21px;
}
}
}
.elementor-widget-ct_icon {
z-index: 99;
}
}
}
.h9-section-02 {
> .elementor-container {
z-index: 1;
}
.h9-section-overlay {
position: absolute;
top: 0;
left: 100px;
right: 0;
bottom: 0;
@include background-horizontal($gradient_color_from, $gradient_color_to);
@media #{$max-lg} {
left: 0 !important;
}
}
}
.h9-section-03 {
> .elementor-container.elementor-column-gap-no {
@media #{$min-xl} {
max-width: 1920px;
> .elementor-element {
&:nth-child(1) {
width: 100%;
}
&:nth-child(2) {
flex-grow: 1;
}
}
}
@media #{$min-4xl} {
max-width: 100%;
}
}
> .elementor-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
@media #{$min-xl} {
> .elementor-container > .elementor-row {
flex-wrap: nowrap;
.elementor-inner-section > .elementor-container {
left: 0 !important;
transform: translate(0%, 0%) !important;
}
}
}
}
.slider-contact {
padding: 26px 30px 30px;
background-color: rgba(#fff, 0.75);
@include box-shadow(0 0 10px rgba(#1d2f3c, 0.31));
width: 395px;
@media #{$max-lg} {
width: 320px;
}
.slider-contact-meta {
margin-bottom: 14px;
white-space: normal;
@media #{$max-lg} {
width: 260px;
}
h3 {
margin-bottom: 12px;
font-size: 24px;
@media #{$max-lg} {
font-size: 20px;
}
}
p {
font-size: 16px;
line-height: normal;
color: #454545;
margin-bottom: 0;
}
}
.wpcf7-form-control {
&:not(.wpcf7-submit) {
height: 43px;
border-color: #dde1e6;
font-size: 12px;
padding-left: 12px;
color: #5d5d5d;
&:focus {
border-color: $primary_color;
}
}
&.wpcf7-textarea {
height: 114px;
}
}
.wpcf7-form-control-wrap {
margin-bottom: 10px;
}
.wpcf7-submit.btn {
margin-top: 7px;
background-color: #1d2f3c;
background-image: none !important;
@include border-radius(4px);
font-size: 14px !important;
line-height: 41px !important;
padding: 0 22px !important;
@include box-shadow(0 6px 8px rgba(#1d2f3c, 0.19) !important);
&:hover {
background-color: $primary_color;
@include box-shadow(none !important);
}
}
+ .wpcf7-response-output {
margin-top: 3px;
@include border-radius(0px);
padding-top: 5px;
padding-bottom: 5px;
}
}
.ct-offer-carousel1 {
position: relative;
.item--image {
flex-grow: 1;
min-height: 200px;
}
.item--title {
font-size: 22px;
color: $primary_color;
margin: 0 0 13px;
}
.item--description {
font-style: 16px;
line-height: 24px;
color: #ffffff;
margin-bottom: 17px;
}
.item--button {
a {
display: block;
line-height: 39px;
@include box-shadow(0 5px 6px rgba(0, 0, 0, 0.17));
@include border-radius(3px);
color: #000;
&:hover {
background-color: $third_color;
color: #fff;
}
i {
margin-right: 4px;
font-style: 14px;
}
}
}
.item--holder {
padding: 23px 26px 33px 20px;
max-width: 395px;
}
.item--inner {
background-color: #3a3d5f;
display: flex;
flex-wrap: wrap;
@media #{$max-sm} {
flex-direction: column-reverse;
}
}
.ct-slick-carousel[data-arrows="true"] {
@media #{$min-md} {
padding: 0 118px;
.slick-arrow {
top: 50%;
bottom: auto;
@include transform(translate(0, -50%));
margin: 0;
z-index: 99;
height: 52px;
width: 52px;
@include box-shadow(none !important);
background-color: #efefef;
&:after {
display: none;
}
&:hover {
background-color: #000a93;
background-image: none;
color: #fff;
}
&.slick-prev {
left: 55px;
right: auto;
}
&.slick-next {
left: auto;
right: 55px;
}
}
}
@media #{$max-sm} {
padding-bottom: 65px;
.slick-arrow {
bottom: 15px;
}
}
}
.ct-slick-carousel {
margin: 0 -40px 0 -40px;
padding-left: 40px;
padding-right: 40px;
overflow: hidden;
.slick-slide {
opacity: 0;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
&.slick-active {
opacity: 1;
}
}
}
}
.ct-angle {
svg {
position: absolute;
left: 0;
right: 0;
z-index: 2;
height: 90px;
fill: #fff;
}
@media #{$max-md2} {
&.hide-md {
display: none;
}
}
@media #{$max-sm} {
&.hide-sm {
display: none;
}
}
&.ct-angle-top svg {
@include transform(rotate(180deg));
}
}
.btn-icon-lg.rev-btn {
display: flex;
align-items: center;
i {
font-size: 20px;
}
}
.btn-icon-xl.rev-btn {
display: flex;
align-items: center;
i {
font-size: 24px;
font-weight: 400;
}
}
.section-boxshadow {
z-index: 1;
&:before {
content: '';
position: absolute;
top: 0;
left: -10%;
z-index: 1;
width: 120%;
height: 100%;
@include box-shadow(0 0 79px rgba(0, 0, 0, 0.15) inset);
}
> .elementor-container {
z-index: 1;
}
}
.section-boxshadow2 {
z-index: 1;
&:before {
content: '';
position: absolute;
top: 0;
left: -10%;
z-index: 1;
width: 120%;
height: 100%;
@include box-shadow(0 0 33px rgba(0, 0, 0, 0.11) inset);
}
> .elementor-container {
z-index: 1;
}
}
.ct-menu-item {
list-style: none;
margin-bottom: 0;
a {
display: inline-block !important;
cite {
background-color: $primary_color;
color: #fff;
@include border-radius(18px);
text-transform: capitalize;
font-style: normal;
font-size: 10px;
padding: 0 5px;
font-weight: 700;
line-height: 16px;
display: inline-block;
margin-left: 4px;
position: relative;
top: -8px;
}
}
i {
font-size: 94%;
margin-right: 4px;
display: inline-block;
min-width: 14px;
}
}
.ct-mailchimp1 {
&.style1 {
input:not([type="submit"]) {
background-color: transparent;
color: #858fae;
font-size: 13px;
border: 1px solid #445169;
@include border-radius(2px);
height: 34px;
padding-left: 15px;
&:focus {
border-color: $primary_color;
}
}
input[type="submit"] {
font-size: 14px;
font-weight: normal;
line-height: 34px;
padding: 0 22px;
@include border-radius(2px);
}
.mc4wp-response {
margin-top: 12px;
.mc4wp-notice {
font-size: 13px;
line-height: 22px;
color: #999;
}
}
.field-group {
display: flex;
flex-wrap: nowrap;
.field-input + .field-input {
margin-left: 5px;
}
}
}
&.style2 {
.mc4wp-form {
.mc4wp-response {
font-size: 14px;
line-height: 24px;
margin-top: 15px;
color: #999;
p {
margin-bottom: 0;
}
}
.mc4wp-form-fields {
position: relative;
overflow: hidden;
input[type="email"], input[type="text"] {
border: none;
background-color: #eeeeee;
@include border-radius(0px);
height: 46px;
font-size: 14px;
font-weight: 400;
color: #262626;
padding-left: 50px;
padding-right: 72px;
}
.fac-envelope {
position: absolute;
top: 50%;
left: 20px;
@include transform(translate(0, -50%));
color: #646464;
}
input[type="submit"] {
@include border-radius(0px);
position: absolute;
bottom: 0;
right: 0;
height: 46px;
width: 62px;
padding: 0;
opacity: 0;
z-index: 3;
}
&:before, &:after {
font-weight: 400;
font-family: "Font Awesome 5 Pro";
height: 46px;
width: 62px;
font-size: 14px;
position: absolute;
bottom: 0;
right: 0;
color: #fff;
text-align: center;
line-height: 46px;
z-index: 1;
overflow: hidden;
@media #{$max-md} {
width: 46px;
}
}
&:before {
content: '';
background-color: $primary_color;
@include box-shadow(0 3px 21px rgba(#000, 0.35) inset);
}
&:after {
z-index: 2;
content: '\f1d8';
}
&:hover:after {
-o-animation: toTopFromBottom 0.3s forwards;
-ms-animation: toTopFromBottom 0.3s forwards;
-webkit-animation: toTopFromBottom 0.3s forwards;
animation: toTopFromBottom 0.3s forwards;
}
}
}
}
&.style3, &.style4 {
.mc4wp-form {
.mc4wp-response {
font-size: 14px;
line-height: 24px;
margin-top: 15px;
color: #999;
p {
margin-bottom: 0;
}
}
.mc4wp-form-fields {
position: relative;
overflow: hidden;
input[type="email"], input[type="text"] {
border: none;
background-color: #464646;
@include border-radius(0px);
height: 46px;
font-size: 14px;
font-weight: 400;
color: #fff;
padding-left: 20px;
padding-right: 70px;
}
.fac-envelope {
position: absolute;
top: 50%;
left: 20px;
@include transform(translate(0, -50%));
color: #646464;
}
input[type="submit"] {
@include border-radius(0px);
position: absolute;
bottom: 0;
right: 0;
height: 46px;
width: 62px;
padding: 0;
opacity: 0;
z-index: 3;
}
&:before, &:after {
font-weight: 400;
font-family: "Font Awesome 5 Pro";
height: 46px;
width: 62px;
font-size: 14px;
position: absolute;
bottom: 0;
right: 0;
color: #fff;
text-align: center;
line-height: 46px;
z-index: 1;
overflow: hidden;
@media #{$max-md} {
width: 46px;
}
}
&:before {
content: '';
background-color: $primary_color;
}
&:after {
z-index: 2;
content: '\f1d8';
}
&:hover:after {
-o-animation: toTopFromBottom 0.3s forwards;
-ms-animation: toTopFromBottom 0.3s forwards;
-webkit-animation: toTopFromBottom 0.3s forwards;
animation: toTopFromBottom 0.3s forwards;
}
}
}
}
&.style4 {
.mc4wp-form .mc4wp-form-fields {
input[type="email"], input[type="text"] {
background-color: #eeeeee;
color: #39385a;
}
&:before {
background-color: $secondary_color;
}
}
}
}
.elementor-widget-wp-widget-mks_flickr_widget {
ul.flickr {
list-style: none;
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
margin-left: -5px;
margin-right: -5px;
li {
margin: 0;
width: 16.6666666666%;
padding: 0 5px;
img {
opacity: 1;
@include transition(all 300ms linear 0ms);
&:hover {
opacity: 0.8;
}
}
}
}
}
.ct-slider-prev, .ct-slider-next {
width: 43px;
height: 43px;
background-color: #152644;
@include transition(all 300ms linear 0ms);
cursor: pointer;
&:hover {
background-color: $primary_color;
}
span {
font-size: 14px;
color: #ffffff;
font-weight: 500;
position: absolute;
top: 50%;
@include transform(translate(0, -50%));
}
&:before {
content: '';
width: 48px;
height: 10px;
background-image: url(../images/slider-arrow-white.png);
position: absolute;
top: 16.5px;
background-repeat: no-repeat;
background-position: center;
}
}
.ct-slider-prev {
span {
left: -24px;
}
&:before {
left: 19px;
@include transform(scaleX(-1));
}
}
.ct-slider-next {
span {
right: -24px;
}
&:before {
right: 19px;
}
}
.case-love {
color: #e9015e;
}
.ct-statistics {
display: flex;
flex-wrap: wrap;
min-width: 157px;
@media #{$max-md} {
min-width: 100%;
margin: 0 -10px;
}
.ct-counter-wrap {
font-size: 24px;
color: #fff;
font-weight: 700;
@include font-family-heading($heading_default_font);
height: 57px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 0 20px;
min-width: 157px;
background-color: $primary_color;
@include border-radius(3px 3px 0 0);
@media #{$max-md} {
min-width: 100%;
width: 100%;
font-size: 20px;
}
}
h4 {
margin-bottom: 0;
font-size: 15px;
color: #17161a;
background-color: #e9edf0;
padding: 7px 20px;
font-weight: 400;
font-family: inherit;
@include border-radius(0 0 3px 3px);
@media #{$max-md} {
font-size: 14px;
}
}
.ct-item {
margin-top: 20px;
text-align: center;
margin-right: 20px;
@media #{$max-md} {
margin-right: 0;
padding: 0 10px;
width: 50%;
}
}
}
.ct-feature-list {
display: flex;
flex-wrap: wrap;
.ct-feature-item {
text-align: center;
padding: 0 15px;
min-height: 243px;
position: relative;
@media #{$max-sm} {
width: 50%;
}
@media #{$max-xs} {
width: 100%;
}
&:before {
content: '';
width: 176px;
height: 47px;
position: absolute;
background-image: url(../images/feature-shape1.png);
background-repeat: no-repeat;
}
img {
margin-bottom: 11px;
max-width: 100px;
}
h4 {
margin-bottom: 10px;
font-size: 22px;
@media #{$max-md} {
font-size: 18px;
}
}
p {
margin-bottom: 6px;
font-size: 16px;
line-height: 24px;
color: #000000;
@media #{$max-md} {
font-size: 14px;
}
}
.btn-line i {
margin-left: 4px;
}
+ .ct-feature-item {
margin-top: 48px;
@media #{$max-sm} {
margin-top: 0;
}
@media #{$max-xs} {
margin-top: 32px;
}
}
}
.ct-item-center {
width: 46%;
text-align: center;
padding: 25px 15px 0 15px;
@media #{$max-md} {
padding-top: 85px;
}
@media #{$max-sm} {
width: 100%;
padding-top: 32px;
padding-bottom: 32px;
}
img {
width: auto;
position: relative;
z-index: 1;
}
}
.ct-item-left, .ct-item-right {
width: 27%;
@media #{$max-sm} {
width: 100%;
display: flex;
flex-wrap: wrap;
}
}
.ct-item-left {
.ct-feature-item:before {
right: -88px;
top: 44px;
@media #{$max-sm} {
display: none;
}
}
.ct-feature-item + .ct-feature-item:before {
background-image: url(../images/feature-shape2.png);
top: 17px;
}
}
.ct-item-right {
.ct-feature-item:before {
left: -88px;
top: 44px;
@include transform(scaleX(-1));
@media #{$max-sm} {
display: none;
}
}
.ct-feature-item + .ct-feature-item:before {
background-image: url(../images/feature-shape2.png);
top: 17px;
}
}
.text-box {
background-color: $primary_color;
color: #fff;
max-width: 430px;
margin: auto;
padding: 10px;
@include border-radius(50px);
background-repeat: no-repeat;
background-position: bottom right;
text-align: center;
margin-top: 53px;
}
}
.ct-emergency {
background-color: #00132b;
max-width: 775px;
margin: auto;
padding: 47px 50px 46px;
color: #fff;
@include border-radius(13px);
@media #{$max-md} {
padding-left: 30px;
padding-right: 30px;
}
@media #{$max-sm} {
padding: 40px 20px;
}
.item--title {
margin-bottom: 10px;
color: #fff;
font-size: 24px;
@media #{$max-xs} {
font-size: 22px;
}
cite {
font-style: normal;
color: #e30b0b;
}
}
ul {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
list-style: none;
margin-bottom: 0;
margin-left: -15px;
margin-right: -15px;
li {
width: 50%;
padding: 0 15px;
display: flex;
flex-wrap: nowrap;
@media #{$max-sm} {
width: 100%;
}
}
svg {
height: 22px;
fill: #4eff00;
margin-right: 10px;
min-width: 22px;
margin-top: 4px;
}
}
}
.ct-fancy-box-layout13 {
background-color: #36af11;
@include border-radius(60px);
overflow: hidden;
display: flex;
flex-wrap: nowrap;
padding: 17px 40px 17px 17px;
background-image: url(../images/fanybox-shape1.png);
background-repeat: no-repeat;
background-position: top right;
@media #{$max-lg} {
padding-right: 20px;
}
@media #{$max-md} {
display: block;
padding: 40px 20px;
text-align: center;
}
.item--icon {
width: 80px;
height: 80px;
min-width: 80px;
background-color: #fff;
position: relative;
@include border-radius(80px);
margin-right: 22px;
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
@include transition(.6s cubic-bezier(.24,.74,.58,1));
display: inline-block;
}
img {
max-width: 40px;
}
i {
font-size: 45px;
color: $primary_color;
}
@media #{$max-md} {
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
}
}
.item--title {
font-size: 18px;
color: #fff;
margin-top: 4px;
margin-bottom: 5px;
}
.item--description {
font-size: 16px;
line-height: 24px;
color: #fff;
}
&:hover .item--icon * {
@include transform(translate(-50%, -50%) rotateY(360deg));
}
}
.ct-fancy-box-layout14 {
position: relative;
border: 1px solid #e9eaf6;
padding: 16px;
background-color: #fff;
@include transition(all 200ms linear 0ms);
display: flex;
flex-wrap: nowrap;
align-items: center;
@media #{$max-md} {
display: block;
}
.item--icon {
width: 67px;
min-width: 67px;
height: 71px;
position: relative;
background-color: #fff;
margin-right: 17px;
@media #{$max-md} {
margin: 0 0 12px;
}
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
img {
max-height: 52px;
}
i {
font-size: 52px;
color: $primary_color;
}
}
.item--title {
margin-bottom: 6px;
font-size: 20px;
color: #082680;
@include transition(all 200ms linear 0ms);
@media #{$max-md} {
font-size: 18px;
}
}
.item--description {
font-size: 15px;
color: #3a4268;
@include transition(all 200ms linear 0ms);
}
.item-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
&:hover {
background-color: $secondary_color;
border-color: $secondary_color;
@include box-shadow(0 13px 29px rgba($secondary_color, 0.27));
.item--title {
color: #fff;
}
.item--description {
color: #d4d7e8;
}
}
}
.ct-fancy-box-layout15 {
position: relative;
z-index: 1;
padding: 40px 50px 48px 50px;
text-align: center;
@media #{$max-lg} {
padding-left: 30px;
padding-right: 30px;
}
&:before {
content: '';
position: absolute;
top: 0;
left: -1px;
width: 100%;
height: 100%;
background-color: #fff;
@include transition(all 220ms linear 0ms);
@include box-shadow(0 26px 73px rgba(#0c0c0c, 0.1));
z-index: -1;
opacity: 0;
}
.item--icon {
position: relative;
margin: 0 auto 25px auto;
width: 96px;
height: 96px;
background-color: rgba($primary_color, 0.14);
@include border-radius(96px);
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
i {
font-size: 40px;
color: $primary_color;
}
}
.item--title {
font-size: 22px;
margin-bottom: 19px;
@media #{$max-lg} {
font-size: 20px;
}
}
.item--description {
font-size: 17px;
line-height: 1.64;
color: #636e80;
margin-bottom: 22px;
@media #{$max-lg} {
font-size: 15px;
}
}
&:hover:before {
opacity: 1;
}
}
.icon-check-round, .icon-times-round {
width: 44px;
position: relative;
height: 44px;
line-height: 32px;
text-align: center;
background-color: #72bc2c;
border: 6px solid #fff;
@include border-radius(44px);
color: #fff !important;
font-size: 16px;
@include box-shadow(0 0 8px rgba(#000000, 0.07));
margin-right: 12px;
display: inline-block;
vertical-align: middle;
top: -2px;
font-family: "Font Awesome 5 Pro" !important;
}
.icon-times-round {
background-color: #e80000;
}
.ct-service-grid11 {
margin-top: 30px;
.item--featured {
position: relative;
&:before, &:after {
content: '';
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
position: absolute;
top: 0;
height: 100%;
}
&:before {
background-color: rgba(#000000, 0.75);
right: 0;
width: 100%;
}
&:after {
@include background-horizontal($gradient_color_from, $gradient_color_to);
left: 0;
width: 0;
}
}
.item--icon {
line-height: 1;
margin-bottom: 13px;
i {
font-size: 56px;
@extend .text-gradient;
@include transition(all 240ms linear 0ms);
@media #{$max-md} {
font-size: 48px;
}
@media #{$max-sm} {
font-size: 42px;
}
}
}
.item--title {
margin-bottom: 14px;
font-size: 22px;
line-height: 26px;
color: #fff;
@media #{$max-md} {
font-size: 20px;
margin-bottom: 10px;
}
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--desc {
font-size: 16px;
line-height: 26px;
color: #eff7fb;
@media #{$max-sm} {
font-size: 14px;
line-height: 24px;
}
}
.item--holder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px 40px;
display: flex;
flex-wrap: wrap;
align-items: center;
text-align: center;
@media #{$max-lg} {
padding-left: 20px;
padding-right: 20px;
}
}
.item--readmore {
a {
position: absolute;
height: 44px;
width: 44px;
background-color: #fff;
border-radius: 100%;
line-height: 44px;
color: #000;
font-size: 22px;
font-weight: 600;
@include font-family-heading($heading_default_font);
left: 0;
right: 0;
margin: auto;
bottom: -22px;
text-align: center;
@include transform(translateY(34px));
z-index: 99;
opacity: 0;
visibility: hidden;
@include transition(all 200ms linear 0ms);
span {
display: inline-block;
}
&:hover span {
-o-animation: toRightFromLeft 0.3s forwards;
-ms-animation: toRightFromLeft 0.3s forwards;
-webkit-animation: toRightFromLeft 0.3s forwards;
animation: toRightFromLeft 0.3s forwards;
}
}
}
.grid-item-inner {
position: relative;
z-index: 1;
margin-bottom: 38px;
&:hover {
.item--featured {
&:before {
width: 0;
}
&:after {
width: 100%;
}
}
.item--icon i {
background-image: none;
background-color: transparent;
text-fill-color: transparent;
-o-text-fill-color: #fff;
-ms-text-fill-color: #fff;
-moz-text-fill-color: #fff;
-webkit-text-fill-color: #fff;
}
.item--readmore a {
@include transform(translateY(0px));
opacity: 1;
visibility: visible;
-webkit-transition-delay: 0.14s;
-moz-transition-delay: 0.14s;
transition-delay: 0.14s;
}
}
}
.grid-sizer + .grid-item {
.item--image-bg {
position: absolute;
top: -27px;
left: -27px;
width: 100%;
height: 100%;
z-index: -1;
background-position: top left;
background-repeat: no-repeat;
}
}
.grid-item:last-child {
.item--image-bg {
position: absolute;
bottom: -27px;
right: -27px;
width: 100%;
height: 100%;
z-index: -1;
background-position: bottom right;
background-repeat: no-repeat;
}
}
.ct-load-more {
margin-top: 2px;
.btn {
@include border-radius(3px);
line-height: 44px;
padding: 0 23px;
font-size: 14px;
}
}
}
.ct-service-grid12 {
.item--icon {
width: 76px;
height: 76px;
@include border-radius(76px);
position: relative;
background-color: $primary_color;
margin-bottom: 23px;
color: #fff;
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
i {
font-size: 45px;
}
}
.item--title {
font-size: 24px;
color: #283a57;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--description {
font-size: 16px;
line-height: 26px;
color: #636e80;
margin-bottom: 18px;
}
.item--readmore {
.btn {
font-size: 14px;
color: #283a57;
background-color: rgba($primary_color, 0.14);
line-height: 36px;
padding: 0 23px;
&:hover {
background-color: $primary_color;
color: #fff;
}
i {
font-weight: 400;
}
}
}
.grid-item-inner {
margin-top: 58px;
padding: 39px 33px 32px 33px;
background-color: #fff;
@include box-shadow(0 26px 73px rgba(#0c0c0c, 0.1));
@include border-radius(10px);
@include transition(all 230ms linear 0ms);
&:hover {
@include transform(translateY(-20px));
@include box-shadow(0 26px 29px rgba(#001847, 0.17));
}
}
}
.ct-service-grid13 {
.item--icon {
margin-bottom: 30px;
line-height: 1;
i {
font-size: 70px;
color: $primary_color;
}
img {
max-height: 70px;
}
}
.item--title {
font-size: 20px;
color: #161b39;
margin-bottom: 13px;
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
.item--description {
font-size: 16px;
line-height: 26px;
padding: 0 20px;
@media #{$max-lg} {
padding: 0;
}
}
.item--readmore {
position: absolute;
bottom: 0;
left: 0;
right: 0;
.btn {
line-height: 38px;
font-size: 14px;
color: #ebebeb;
font-weight: 600;
padding: 0 20px;
@include border-radius(3px);
background-color: $secondary_color;
opacity: 0;
@include transform(translateY(40px));
&:hover {
background-color: $primary_color;
color: #fff;
}
i {
display: none;
}
}
}
.grid-item-inner {
text-align: center;
margin-top: 55px;
@include transition(all 300ms linear 0ms);
&.btn-added {
padding-bottom: 42px;
position: relative;
}
&:hover {
@include transform(translateY(-20px));
.item--icon {
animation: icon-bounce 800ms ease-out infinite;
-webkit-animation: icon-bounce 800ms ease-out infinite;
}
.item--readmore .btn {
opacity: 1;
@include transform(translateY(20px));
}
}
}
}
.ct-cover-boxes1 {
margin: 0 -30px 0 0;
display: flex;
flex-wrap: wrap;
@media #{$max-lg} {
margin: 0 -15px;
}
.item--image {
width: 100%;
position: relative;
@media #{$max-sm} {
width: 100%;
}
}
.item--icon {
position: absolute;
bottom: 0;
right: 0;
width: 80px;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 40px;
color: #fff;
z-index: 1;
font-weight: 400;
@include transition(.4s cubic-bezier(.24,.74,.58,1));
background-color: $primary_color;
svg {
fill: #fff;
}
i, svg {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
@media #{$max-lg} {
width: 60px;
height: 60px;
line-height: 60px;
font-size: 32px;
}
}
.item--title {
margin-bottom: 12px;
font-size: 22px;
line-height: 30px;
color: #fff;
@media #{$max-md} {
font-size: 18px;
}
}
.item--readmore {
margin-top: 17px;
a {
font-size: 14px;
line-height: 24px;
color: #fff;
font-weight: 600;
@include font-family-heading($heading_default_font);
display: inline-flex;
align-items: center;
i {
color: $primary_color;
font-weight: normal;
margin-left: 10px;
}
&:hover i {
animation: icon-bounce-right 800ms ease-out infinite;
-webkit-animation: icon-bounce-right 800ms ease-out infinite;
}
}
}
.item--content {
overflow: hidden;
position: relative;
@media #{$max-sm} {
width: 100%;
}
.item--content-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 25px 22px 20px;
font-size: 16px;
line-height: 24px;
color: rgba(#fff, 0.67);
font-family: "Nunito Sans";
@media #{$max-lg} {
padding-left: 15px;
padding-right: 15px;
font-size: 14px;
}
}
}
.ct-cover-inner {
border: 8px solid #fff;
background-color: #000000;
display: flex;
flex-wrap: wrap;
width: 277px;
}
.ct-cover-item {
width: 277px;
display: none;
margin-right: 30px;
overflow: hidden;
@include transition(.4s cubic-bezier(.24,.74,.58,1));
@include box-shadow(0 0 43px rgba(#000, 0.2));
&:nth-child(1) {
animation-delay: 50ms;
-webkit-animation-delay: 50ms;
display: block;
}
&:nth-child(2) {
animation-delay: 100ms;
-webkit-animation-delay: 100ms;
display: block;
}
&:nth-child(3) {
animation-delay: 150ms;
-webkit-animation-delay: 150ms;
display: block;
}
&.active {
width: 554px;
@include box-shadow(0 19px 40px rgba(#000, 0.26));
@media #{$max-lg} {
@include box-shadow(0 19px 40px rgba(#000, 0));
}
.ct-cover-inner {
width: 554px;
}
.item--image {
width: calc(50% - 8px);
width: -webkit-calc(50% - 8px);
}
.item--content {
width: 50%;
}
.item--icon {
bottom: 50%;
@include transform(translate(0, 50%));
}
}
@media #{$max-lg} {
width: 33.33% !important;
margin-right: 0;
padding: 0 15px;
@include box-shadow(0 0 43px rgba(#000, 0));
.ct-cover-inner {
width: 100% !important;
@include box-shadow(0 0 43px rgba(#000, 0.2));
margin: 30px 0;
display: block;
}
.item--content .item--content-inner {
position: static;
}
&.active {
width: 33.33%;
.item--image, .item--content {
width: 100% !important;
}
}
}
@media #{$max-sm} {
width: 100% !important;
&.active {
width: 100%;
}
}
}
}
body:not(.elementor-editor-active) .ct-cover-boxes1 .ct-cover-item {
&:hover {
width: 554px;
.ct-cover-inner {
width: 554px;
}
.item--image {
width: calc(50% - 8px);
width: -webkit-calc(50% - 8px);
@media #{$max-sm} {
width: 100%;
}
}
.item--content {
width: 50%;
@media #{$max-sm} {
width: 100%;
}
}
.item--icon {
bottom: 50%;
@include transform(translate(0, 50%));
}
}
}
.ct-get-quote1 {
background-color: #000000;
padding: 27px 40px;
@include border-radius(5px);
background-image: url(../images/bg-get-quote.png);
display: flex;
flex-wrap: wrap;
align-items: center;
@media #{$max-lg} {
padding-left: 15px;
padding-right: 15px;
}
@media #{$max-sm} {
padding-left: 5px;
padding-right: 5px;
}
.ct-quote-meta, .ct-quote-form {
width: 50%;
padding: 0 15px;
@media #{$max-sm} {
width: 100%;
}
}
.ct-quote-meta {
@media #{$max-sm} {
margin-bottom: 32px;
}
h4 {
margin-bottom: 12px;
color: #fff;
font-size: 24px;
@media #{$max-lg} {
font-size: 22px;
}
}
p {
font-size: 16px;
font-family: "Nunito Sans";
color: #bbb;
line-height: 24px;
margin-bottom: 0px;
@media #{$max-lg} {
font-size: 14px;
}
i {
width: 22px;
height: 21px;
background-image: url(../images/like.png);
background-position: center;
background-repeat: no-repeat;
display: inline-block;
background-size: cover;
margin-left: 15px;
position: relative;
bottom: -2px;
@media #{$max-sm} {
display: none;
}
}
}
}
.wpcf7-form .input-filled {
display: flex;
flex-wrap: nowrap;
align-items: center;
@media #{$max-lg} {
display: block;
}
.wpcf7-form-control-wrap {
margin-bottom: 0;
margin-right: 10px;
width: auto;
@media #{$max-lg} {
margin-bottom: 10px;
margin-right: 0;
}
}
.wpcf7-form-control {
&:not(.wpcf7-submit) {
height: 46px;
background-color: #292929;
border-color: #292929;
font-size: 15px;
color: #dedede;
font-family: "Nunito Sans";
padding: 0 22px;
@include border-radius(3px);
}
}
.btn {
line-height: 46px;
padding: 0 23px;
@include border-radius(3px);
font-weight: 600;
font-size: 14px;
&:hover {
background-color: darken($primary_color, 0.08);
}
i {
margin-right: 0;
font-size: 13px;
}
}
}
}
.ct-about-us {
display: flex;
flex-wrap: nowrap;
@media #{$max-sm} {
display: block;
}
.ct-about-left {
width: 300px;
min-width: 300px;
background-image: url(../images/dot-box1.png);
background-repeat: repeat;
background-position: top left;
position: relative;
@media #{$max-md} {
width: 120px;
min-width: 120px;
}
@media #{$max-sm} {
width: 100%;
min-width: 100%;
padding: 90px 15px;
}
}
.ct-about-holder {
background-color: #1d1b4c;
padding: 65px 70px 93px 160px;
@media #{$max-lg} {
padding: 65px 50px 93px 120px;
}
@media #{$max-md} {
padding-right: 30px;
}
@media #{$max-sm} {
padding: 50px 20px 100px 30px;
}
}
.ct-about-imge {
max-width: 306px;
border: 15px solid #fff;
overflow: hidden;
@include border-radius(300px);
@include box-shadow(0 4px 40px rgba(#1d1b4c, 0.32));
overflow: hidden;
position: absolute;
top: 50%;
left: 75px;
right: -110px;
@include transform(translate(0, -50%));
img {
@include border-radius(300px);
}
@media #{$max-md} {
left: 15px;
right: -90px;
}
@media #{$max-sm} {
position: static;
@include transform(translate(0, 0%));
}
}
.ct-about-subtitle {
font-size: 16px;
font-weight: 500;
color: $primary_color;
span {
position: relative;
padding-right: 60px;
&:before {
content: '';
width: 44px;
height: 2px;
position: absolute;
top: 50%;
right: 0;
@include transform(translate(0, -50%));
background-color: $primary_color;
}
}
}
.ct-about-title {
font-size: 36px;
color: #fff;
margin-top: 2px;
margin-bottom: 12px;
@media #{$max-sm} {
font-size: 30px;
}
}
.ct-about-desc {
font-size: 16px;
line-height: 26px;
color: #e3e5ef;
}
.ct-about-meta {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
max-width: 560px;
}
.ct-box-item {
width: 50%;
padding: 0 15px;
margin-top: 52px;
display: flex;
flex-wrap: nowrap;
@media #{$max-xs} {
width: 100%;
}
.ct-box-icon {
line-height: 1;
margin-right: 15px;
i {
font-size: 30px;
color: $primary_color;
@include transition(all 300ms linear 0ms);
display: inline-block;
}
}
.ct-box-title {
font-size: 16px;
margin-bottom: 7px;
color: #fff;
font-weight: 700;
@media #{$max-md} {
font-size: 14px;
}
}
.ct-box-desc {
font-size: 15px;
line-height: 23px;
color: #e3e5ef;
@media #{$max-md} {
font-size: 13px;
}
}
&:hover .ct-box-icon i {
@include transform(rotateY(360deg));
}
}
}
body #bbpress-forums {
.bbp-breadcrumb, .bbp-search-form {
display: none;
}
ul.bbp-forums, ul.bbp-lead-topic, ul.bbp-replies, ul.bbp-search-results, ul.bbp-topics {
font-size: 16px;
line-height: 26px;
.bbp-forum-title {
@include font-family-heading($heading_default_font);
color: #0e0e0e;
font-weight: 600;
font-size: 18px;
&:hover {
color: $primary_color;
}
}
.bbp-forum-content {
font-size: 14px;
line-height: 24px;
color: #383838;
}
}
li.bbp-footer, li.bbp-header {
padding: 20px 30px;
}
.forum-titles li {
font-weight: 700;
color: #000;
font-size: 18px;
@include font-family-heading($heading_default_font);
}
li.bbp-body ul.forum, li.bbp-body ul.topic {
padding: 20px 30px;
}
.bbp-forum-topic-count, .bbp-forum-reply-count {
color: #0e0e0e;
font-weight: 500;
}
.bbp-forum-freshness {
font-size: 14px;
color: #333;
}
.bbp-author-name {
text-transform: capitalize;
color: #666;
}
.bbp-forum-freshness a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
.bbp-search-form {
#bbp-search-form {
position: relative;
z-index: 1;
&:before {
content: "\f002";
font-family: "Font Awesome 5 Pro";
z-index: -1;
width: 50px;
height: 50px;
line-height: 50px;
position: absolute;
top: 0;
right: 0;
text-align: center;
}
}
#bbp_search_submit {
padding: 0;
border: none;
line-height: 50px;
height: 50px;
width: 53px;
position: absolute;
top: 0;
right: 0;
color: #222222;
font-size: 15px;
@include border-radius(0px);
@include box-shadow(none);
background-color: transparent;
background-image: none;
border-left: 1px solid #ececf0;
text-indent: -9999px;
&:before, &:after {
display: none;
}
&:hover {
background-color: transparent;
color: #fff;
}
}
#bbp_search {
@include border-radius(0px);
border: 1px solid #ececf0;
padding: 0 22px;
color: #222222;
font-size: 15px;
background-color: transparent;
&:focus {
border-color: $primary_color;
+ #bbp_search_submit {
border-color: $primary_color;
}
}
}
}
.elementor-widget-wp-widget-bbp_login_widget,
.elementor-widget-wp-widget-bbp_topics_widget {
.elementor-widget-container > h5 {
font-size: 20px;
font-weight: 600;
margin-bottom: 30px;
padding-bottom: 11px;
position: relative;
&:before {
content: '';
width: 40px;
height: 3px;
@include background-horizontal($gradient_color_from, $gradient_color_to);
position: absolute;
bottom: 0;
left: 0;
}
}
}
.ct-higlighted1 {
padding: 5px 0;
background-color: $primary_color;
color: #fff;
}
.ct-higlighted2 {
padding: 5px 0;
background-color: #d8d8d8;
}
.ct-higlighted3 {
padding: 5px 0;
background-color: #000;
color: #fff;
}
.ct-text-editor {
.first-letter {
font-weight: 600;
display: inline-block;
float: left;
margin: 5px 20px 0 0;
width: 45px;
height: 45px;
text-align: center;
color: #282828;
font-size: 40px;
line-height: 45px;
}
.first-letter.style2 {
font-size: 25px;
@include border-radius(100%);
background-color: $secondary_color;
color: #fff;
}
.first-letter.style3 {
background-color: $primary_color;
color: #fff;
font-size: 25px;
}
}
.elementor-alert button {
@include box-shadow(none !important);
}
.image-effect-white a {
position: relative;
overflow: hidden;
display: block;
&:before {
content: '';
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
width: 50%;
height: 100%;
background: -o-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);
background: -webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),to(rgba(255,255,255,.3)));
background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);
@include transform(skewX(-25deg));
}
}
.grid-item-inner:hover .image-effect-white a:before {
-webkit-animation: shine 1s;
animation: shine 1s;
}
// IE
//--------------------------------------------------
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
body .text-gradient,
body blockquote cite,
body .ct-header-popup-wrap .ct-header-meta .h-item-icon,
body .post-previous-next a span:nth-child(1),
body .comment-content:hover .comment-date,
body .ct-list.style1 .ct-list-icon i,
body .ct-contact-info1.style2 .ct-contact-icon i,
body .ct-fancy-box-layout1.style3 .item--icon i,
body .ct-fancy-box-layout1.style4 .item--icon i,
body .ct-fancy-box-layout2 .item--icon i,
body .ct-fancy-box-layout5 .item--icon i,
body .ct-fancy-box-layout5 .item--list i,
body .ct-service-grid4 .item--title i,
body .ct-service-carousel3 .item--icon i,
body .ct-download .item--download a i,
body .ct-blog-grid-layout1 .entry-readmore a,
body .ct-blog-carousel-layout1 .entry-readmore a,
body .ct-blog-grid-layout2 .entry-readmore a,
body .ct-counter-layout2 .ct-counter-icon i,
body .ct-counter-layout3 .ct-counter-number .ct-counter-number-prefix,
body .ct-counter-layout3 .ct-counter-number .ct-counter-number-suffix,
body .ct-process1.style1 .ct-process-button a, .widget_products .amount,
body.woocommerce ul.products li.product .price .amount,
body.woocommerce ul.products li.product .price ins,
body.single-product #primary div.product .entry-summary .price ins,
body.single-product #primary div.product .woocommerce-tabs .woocommerce-Tabs-panel--reviews #reviews ol.commentlist li.review .meta .woocommerce-review__published-date,
body #yith-quick-view-modal #yith-quick-view-content .entry-summary .price ins,
body.text-gradient2,
body.ct-text-gradient .elementor-text-editor,
body .ct-counter-layout8 .ct-counter-number {
text-fill-color: $primary_color;
-o-text-fill-color: $primary_color;
-ms-text-fill-color: $primary_color;
-moz-text-fill-color: $primary_color;
-webkit-text-fill-color: $primary_color;
background-clip: $primary_color;
-o-background-clip: $primary_color;
-ms-background-clip: $primary_color;
-webkit-background-clip: $primary_color;
background-image: none;
}
} |