File: /var/www/apran-mwa-mozil.org/wp-content/themes/itfirm/assets/scss/elements.scss
.revslider-initialised {
.slider-text-shadow1 {
text-shadow: 0 3px 4px rgba(#0d0d0d, 0.29);
-webkit-text-shadow: 0 3px 4px rgba(#0d0d0d, 0.29);
}
.slider-color1 {
color: #e3471f;
}
.slider--item-flex {
display: flex;
}
.btn {
line-height: 54px;
}
.custom.tparrows {
background-color: #e8e8e8 !important;
width: 38px !important;
height: 38px !important;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
&:before {
color: #2e2d2d !important;
font-family: "Caseicon" !important;
font-size: 12px !important;
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%,-50%));
}
&.tp-leftarrow:before {
content: "\f103" !important;
}
&.tp-rightarrow:before {
content: "\f104" !important;
}
&:hover {
background-color: $primary_color !important;
&:before {
color: #fff !important;
}
}
}
.hesperiden.tparrows {
background-color: transparent !important;
width: 70px !important;
height: 70px !important;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
border: 2px solid #e7ebed;
@include border-radius(100%);
@media #{$max-xxl} {
width: 50px !important;
height: 50px !important;
}
&:before {
color: #fff !important;
font-family: "Caseicon" !important;
font-size: 20px !important;
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%,-50%));
@media #{$max-xxl} {
font-size: 16px !important;
}
}
&.tp-leftarrow:before {
content: "\f103" !important;
}
&.tp-rightarrow:before {
content: "\f104" !important;
}
&:hover {
background-color: #fff !important;
border-color: #fff !important;
&:before {
color: #000 !important;
}
}
}
.slider-title-shadow1 {
text-shadow: 0 3px 4px rgba(#0d0d0d, 0.29);
}
.btn-effect1 {
overflow: hidden;
text-shadow: none;
&:after {
content: "";
background: #fff;
-webkit-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
position: absolute;
height: 120%;
width: 15px;
opacity: .2;
left: -35%;
top: -10%;
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
}
&:hover, &:focus {
background: $primary_color;
&:after {
left: 130%;
}
}
}
.rev-btn {
i {
font-weight: 400;
}
.space-left {
margin-left: 10px;
}
}
.rs-layer cite {
font-style: normal;
color: $primary_color;
}
.case-arrow-slider1.tparrows {
width: 80px;
height: 80px;
background-color: #e9effb;
@include border-radius(80px);
@media #{$max-xl} {
width: 60px;
height: 60px;
}
&:before {
color: $primary_color;
font-family: "Caseicon";
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%,-50%));
z-index: 99;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
@media #{$max-xl} {
font-size: 16px;
}
}
&.tp-leftarrow:before {
content: "\f103";
}
&.tp-rightarrow:before {
content: "\f104";
}
.tp-arr-imgholder {
@include border-radius(80px);
@include transition(.3s cubic-bezier(.24,.74,.58,1));
z-index: 88;
@include transform(scale(0));
opacity: 0;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@include border-radius(80px);
background-color: rgba($primary_color_hex, 0.8);
}
}
&:hover {
&:before {
color: #fff;
}
.tp-arr-imgholder {
@include transform(scale(1));
opacity: 1;
}
}
}
.case-arrow-slider2.tparrows {
width: 41px;
height: 41px;
background-color: transparent;
@include border-radius(41px);
border: 2px solid $primary_color;
&:before {
color: $primary_color;
font-family: "Caseicon";
font-size: 13px;
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%,-50%));
z-index: 99;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
}
&.tp-leftarrow:before {
content: "\f103";
}
&.tp-rightarrow:before {
content: "\f104";
}
&:hover {
background-color: $primary_color;
&:before {
color: #fff;
}
}
}
}
.ct-slider-boxtext {
background-color: #fff;
@include border-radius(12px);
padding: 20px 26px;
@include box-shadow(0 8px 29px rgba(#212180, 0.1));
margin-right: 10px;
margin-top: 10px;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
position: relative;
width: 180px;
display: flex;
align-items: center;
flex-wrap: nowrap;
@media #{$max-lg} {
padding: 0;
height: 64px;
width: 64px;
justify-content: center;
}
.item--link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
.item--icon {
line-height: 1;
margin-right: 21px;
position: relative;
@media #{$max-lg} {
margin-right: 0;
}
&:before {
content: '';
height: 11px;
width: 1px;
background-color: #b4b4b4;
position: absolute;
top: 50%;
right: -10px;
@include transform(translate(0, -50%));
@include transition(.3s cubic-bezier(.24,.74,.58,1));
@media #{$max-lg} {
display: none;
}
}
i {
font-size: 25px;
color: $primary_color;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
@media #{$max-lg} {
font-size: 32px;
}
}
}
.item--content {
font-size: 14px;
line-height: 18px;
color: #181f44;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
white-space: normal;
@media #{$max-lg} {
display: none;
}
}
&:hover {
background-color: $primary_color;
@include box-shadow(none);
.item--content, .item--icon i {
color: #fff;
}
.item--icon:before {
background-color: #fff;
}
}
}
.el-empty:empty {
display: none !important;
}
.ct-icon1.style1 {
a {
font-size: 14px;
+ a {
margin-left: 10px;
}
}
}
.ct-icon1.style2 {
a {
width: 37px;
height: 41px;
border: 1px solid $primary_color;
background-color: #fff;
color: #747474;
font-size: 16px;
line-height: 39px;
text-align: center;
display: inline-block;
&:hover {
color: $primary_color;
}
+ a {
margin-left: -5px;
}
}
}
.ct-mailchimp1 {
.mc4wp-form {
.mc4wp-response {
font-size: 14px;
margin-top: 15px;
color: #999;
p {
margin-bottom: 0;
}
}
}
&.style1 {
position: relative;
.ct-field-group {
position: relative;
overflow: hidden;
&:before, &:after {
content: '';
height: 46px;
width: 62px;
font-size: 15px;
position: absolute;
bottom: 0;
right: 0;
color: #fff;
text-align: center;
line-height: 46px;
}
&:before {
@include background-horizontal-right($gradient_color_from, $gradient_color_to);
}
&:after {
content: '\f1d8';
font-weight: 400;
font-family: "Font Awesome 5 Free";
}
&:hover:after {
animation: toTopFromBottom 0.3s forwards;
}
}
[type="email"] {
font-size: 14px;
color: #fff;
padding-left: 24px;
height: 46px;
border: none;
background-color: #0f0f35;
}
[type="submit"] {
@include border-radius(0px);
font-size: 0px;
padding: 0;
position: absolute;
top: 0;
right: 0px;
width: 62px;
height: 46px;
background: none;
z-index: 99;
}
}
&.style2 {
form {
max-width: 590px;
margin: auto;
position: relative;
@media #{$max-md} {
max-width: 480px;
}
[type="email"] {
color: #9a9a9a;
font-size: 17px;
font-weight: 700;
padding: 0 34px;
height: 80px;
@include border-radius(10px);
border: none;
@include box-shadow(0 0 46px rgba(#071a62, 0.08));
@media #{$max-md} {
height: 60px;
font-size: 16px;
padding-left: 28px;
}
}
[type="submit"] {
position: absolute;
top: 0;
right: 0;
font-size: 17px;
font-family: inherit;
font-weight: 700;
line-height: 80px;
padding: 0 60px;
border-radius: 10px;
background: $primary_color;
@media #{$max-md} {
font-size: 16px;
padding: 0 32px;
line-height: 60px;
}
@media #{$max-sm} {
position: static;
margin-top: 30px;
}
&:hover {
background: $third_color;
}
}
}
}
}
.ct-contact-form .ct-contact-meta {
margin-bottom: 30px;
}
.ct-contact-form-layout1 {
&.style1 {
.input-filled > label, .wpcf7-form-control-wrap label {
font-size: 15px;
color: #00060f;
display: block;
margin-bottom: 7px;
}
.wpcf7-form-control {
&:not(.wpcf7-submit) {
border-color: #ffffff;
color: #656565;
font-size: 14px;
padding-left: 18px;
&:focus {
border-color: $primary_color;
color: #000;
}
}
}
.wpcf7-form .wpcf7-form-control-wrap {
margin-bottom: 30px;
}
.nice-select span.current {
line-height: 35px;
}
}
&.style2 {
.wpcf7-form-control {
&:not(.wpcf7-submit) {
border-color: #e7e7e7;
background-color: #fafafa;
@include border-radius(3px);
color: #888888;
font-size: 18px;
padding-left: 18px;
height: 55px;
font-weight: 600;
@include font-family-heading($heading_default_font);
&:focus {
border-color: $primary_color;
color: #000;
}
}
&.wpcf7-textarea {
height: 220px;
}
}
.wpcf7-form .wpcf7-form-control-wrap {
margin-bottom: 20px;
}
.wpcf7-submit {
line-height: 55px;
padding: 0 26px;
}
}
&.style3 {
.wpcf7-form-control {
&:not(.wpcf7-submit) {
border-color: #eaeaea;
background-color: #fafafa;
@include border-radius(5px);
color: #666666;
font-size: 15px;
padding-left: 18px;
height: 55px;
font-weight: normal;
&:focus {
border-color: $primary_color;
color: #000;
}
}
&.wpcf7-textarea {
height: 205px;
}
}
.wpcf7-form .wpcf7-form-control-wrap {
margin-bottom: 20px;
}
.wpcf7-submit {
line-height: 55px;
padding: 0 32px;
@include border-radius(5px);
font-family: "Poppins", Sans-serif;
}
}
&.style4 {
.wpcf7-form-control {
&:not(.wpcf7-submit) {
border: none;
border-bottom: 2px solid #e9e9e9;
background-color: transparent;
@include border-radius(0px);
color: #000000;
font-size: 15px;
font-weight: 500;
padding-left: 0;
height: 55px;
&:focus {
border-color: $primary_color;
color: #000;
}
}
&.wpcf7-textarea {
height: 110px;
padding-top: 15px;
}
}
.wpcf7-form .wpcf7-form-control-wrap {
margin-bottom: 16px;
}
.wpcf7-submit {
line-height: 52px;
padding: 0 25px;
@include border-radius(52px);
margin-top: 4px;
@include box-shadow(0 6px 27px rgba($primary_color_hex, 0.34));
}
}
}
.ct-client-carousel1.style1 {
.ct-client--image {
text-align: center;
padding: 0 15px;
margin: 28px 0;
position: relative;
overflow: hidden;
a {
display: inline-block;
vertical-align: top;
}
img {
@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
position: relative;
width: auto;
&.ct-client--imghover {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -150%));
opacity: 0;
}
}
&.img-hover-active:hover {
.ct-client--imgmain {
@include transform(translateY(100%));
opacity: 0;
}
.ct-client--imghover {
@include transform(translate(-50%, -50%));
opacity: 1;
}
}
}
}
.ct-client-carousel1 .slick-track {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.ct-client-carousel1.style2 {
.ct-client--image {
text-align: center;
padding: 0 15px;
a {
display: inline-block;
vertical-align: top;
@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
}
img {
@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
position: relative;
&.image-two {
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;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.5;
&:hover {
opacity: 1;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
img {
&.image-one {
@include transform(translateY(100%));
opacity: 0;
}
&.image-two {
@include transform(translate(-50%, -50%));
opacity: 1;
}
}
}
}
}
}
.ct-client-grid1 {
margin: 0;
overflow: hidden;
padding: 0 50px;
width: calc(100% + 100px);
margin-left: -50px;
.ct-client--image {
text-align: center;
padding: 0 15px;
position: relative;
overflow: hidden;
min-height: 100px;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
a {
display: inline-block;
vertical-align: top;
}
img {
@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
position: relative;
width: auto;
max-height: 80px;
}
.ct-client--imghover {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
opacity: 0;
width: 100%;
height: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
padding: 0 15px;
@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
}
&.img-hover-active:hover {
background-color: #fff;
@include box-shadow(0 15px 55px rgba(#8a8a8a, 0.3));
.ct-client--imgmain {
opacity: 0;
}
.ct-client--imghover {
opacity: 1;
}
}
}
.ct-grid-inner {
padding: 70px 0;
.grid-item {
padding: 0;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
margin-top: -1px;
@media #{$max-lg} {
border: none;
}
&.col-xl-4:nth-child(1),
&.col-xl-4:nth-child(2),
&.col-xl-4:nth-child(4),
&.col-xl-4:nth-child(5),
&.col-xl-4:nth-child(7),
&.col-xl-4:nth-child(8),
&.col-xl-4:nth-child(10),
&.col-xl-4:nth-child(11),
&.col-xl-4:nth-child(13),
&.col-xl-4:nth-child(14),
&.col-xl-4:nth-child(16),
&.col-xl-4:nth-child(17) {
&:before {
content: '';
top: -40px;
height: 180px;
right: 0;
width: 1px;
background-color: #f2f2f2;
position: absolute;
left: 100%;
@media #{$max-lg} {
display: none;
}
}
}
}
}
}
.ct-image-single {
position: relative;
@include border-radius(inherit !important);
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #000;
opacity: 0;
z-index: 88;
}
a {
display: block;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
}
img {
@include border-radius(inherit !important);
width: auto;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
}
.img-hover {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
opacity: 0;
}
.ct-image-single--inner {
display: inline-block;
position: relative;
}
}
.ct-text-editor {
.first-letter {
display: inline-block;
float: left;
margin: 5px 16px 0 0;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
@include box-shadow(0 10px 30px rgba($primary_color_hex, 0.45));
color: #fff;
background-color: $primary_color;
@include border-radius(5px);
font-size: 30px;
font-weight: 600;
@include font-family-heading($heading_default_font);
}
}
.ct-list {
.ct-list-icon i {
display: inline-flex;
}
.ct-list-item {
display: flex;
flex-wrap: nowrap;
font-size: 17px;
color: #666666;
line-height: 1.76;
i {
font-size: 15px;
margin-right: 10px;
@extend .text-gradient;
}
+ .ct-list-item {
margin-top: 24px;
}
}
}
.ct-list-single {
color: #454347;
display: flex;
flex-wrap: nowrap;
.ct-list-number {
min-width: 27px;
height: 27px;
width: 27px;
line-height: 27px;
text-align: center;
font-size: 16px;
color: #fff;
font-weight: 700;
@include background-horizontal-right($gradient_color_from, $gradient_color_to);
@include border-radius(100%);
@include box-shadow(0 10px 13px rgba($gradient_to_hex, 0.21));
margin-right: 14px;
}
}
.ct-case-studies1 {
.item--image {
img {
width: 100%;
}
&.bg-image {
height: 600px;
}
position: relative;
&:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-position: bottom center;
background-size: cover;
background-repeat: no-repeat;
background-image: url(../images/case-overlay.png);
@media #{$max-sm} {
height: 140%;
}
}
}
.item--subtitle {
font-size: 18px;
font-weight: 700;
color: $primary_color;
display: inline-flex;
align-items: center;
margin-bottom: 23px;
svg {
margin-left: 22px;
}
}
.item--title {
margin-bottom: 20px;
font-size: 30px;
color: #fff;
@media #{$max-lg} {
font-size: 24px;
}
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--description {
color: #e1e1e1;
margin-bottom: 24px;
}
.item--readmore {
a {
height: 52px;
width: 52px;
background-color: $primary_color;
display: inline-block;
line-height: 52px;
text-align: center;
@include border-radius(52px);
color: #fff;
font-size: 18px;
overflow: hidden;
i {
display: inline-block;
}
&:hover i {
-o-animation: toRightFromLeft 0.6s forwards;
-ms-animation: toRightFromLeft 0.6s forwards;
-webkit-animation: toRightFromLeft 0.6s forwards;
animation: toRightFromLeft 0.6s forwards;
}
}
}
.item--holder {
position: absolute;
bottom: 0;
left: 11%;
padding: 30px 30px 40px 30px;
max-width: 580px;
z-index: 99;
@media #{$max-xxl} {
left: 0;
max-width: 500px;
}
@media #{$max-lg} {
padding-bottom: 80px;
padding-right: 50px;
}
@media #{$max-sm} {
padding-left: 20px;
}
}
.item--inner {
position: relative;
}
.slick-dots {
position: absolute;
right: 15px;
bottom: 0;
background-color: rgba(lighten($primary_color_hex, 0.1), 0.78);
margin: 0;
padding: 30px 62px 30px 137px;
display: block;
min-width: 46px;
@media #{$max-xxl} {
padding-left: 62px;
}
@media #{$max-lg} {
background-color: transparent;
padding-left: 0;
padding-right: 42px;
padding-bottom: 20px;
}
li {
justify-content: center;
margin: 14px 0;
button {
background-color: #fff;
&:before {
color: #fff;
}
&:after {
border-color: rgba(#fff, 0.9);
}
}
&.slick-active {
button {
background-color: transparent;
height: 46px;
width: auto;
}
}
}
}
}
.ct-link1 {
&.style1 {
a {
display: block;
background-color: #e6ebf4;
font-size: 18px;
color: #000917;
font-weight: 700;
@include font-family-heading($heading_default_font);
padding: 14px 40px;
position: relative;
@media #{$max-md} {
padding-left: 30px;
padding-right: 20px;
font-size: 16px;
}
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
height: 0;
background-color: $third_color;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
width: 4px;
}
&:hover {
color: #fff;
background-color: $primary_color;
padding-left: 60px;
@media #{$max-md} {
padding-left: 40px;
}
&:before {
content: '-';
margin-right: 4px;
}
&:after {
height: 100%;
}
}
}
li + li {
margin-top: 10px;
}
.ct-link-items {
list-style: none;
margin-bottom: 0;
}
}
&.style2 {
a {
color: #fff;
font-weight: 700;
position: relative;
&:before {
content: '';
width: 8px;
height: 2px;
background-color: $primary_color;
position: absolute;
top: 50%;
left: -20px;
@include transform(translate(0, -50%));
@include transition(.3s cubic-bezier(.24,.74,.58,1));
opacity: 0;
}
&:hover {
padding-left: 18px;
&:before {
opacity: 1;
left: 0;
}
}
}
li + li {
margin-top: 10px;
}
.ct-link-items {
margin: 0;
list-style: none;
}
}
}
.ct-slider-video {
width: 92px;
min-width: 92px;
height: 92px;
display: inline-block;
background-color: #fff;
@include border-radius(92px);
position: relative;
line-height: 92px;
text-align: center;
font-size: 20px;
color: $primary_color;
@media #{$max-md} {
min-width: 80px;
width: 80px;
height: 80px;
line-height: 80px;
font-size: 18px;
}
@media #{$max-sm} {
min-width: 70px;
width: 70px;
height: 70px;
line-height: 70px;
font-size: 17px;
}
&:before {
content: "";
position: absolute;
z-index: 0;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(#fff, 0.63);
border-radius: 50%;
animation: pulse-border2 1500ms ease-out infinite;
-webkit-animation: pulse-border2 1500ms ease-out infinite;
z-index: -2;
}
&:hover, &:focus, &:active {
color: $primary_color;
&:before {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
}
}
.ct-button-video1 {
a {
font-size: 16px;
padding-left: 28px;
padding-right: 68px;
line-height: 72px;
overflow: visible !important;
}
span {
position: absolute;
top: 50%;
@include transform(translate(0, -50%));
right: -31px;
width: 77px;
height: 77px;
background-color: #fff;
@include border-radius(77px);
line-height: 77px;
text-align: center;
font-size: 18px;
color: #000000;
}
}
.ct-button-video2 {
padding-top: 56px;
padding-right: 60px;
position: relative;
max-width: 394px;
z-index: 1;
@media #{$max-sm} {
padding-top: 30px;
padding-right: 30px;
}
.ct-video-image img {
width: 100%;
@include border-radius(20px);
}
.ct-video-shape {
position: absolute;
top: 0;
right: 0;
z-index: -1;
animation: animationFramesTwo 12s infinite linear alternate;
}
.el-btn-video {
position: absolute;
right: 30px;
bottom: 56px;
z-index: 99;
width: 56px;
height: 56px;
font-size: 14px;
line-height: 56px;
text-align: center;
@include background-horizontal-right($gradient_color_from, $gradient_color_to);
color: #fff;
@include border-radius(56px);
@media #{$max-sm} {
right: 2px;
}
&:before {
content: "";
position: absolute;
z-index: 0;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba($primary_color_hex, 0.63);
border-radius: 50%;
animation: pulse-border2 1500ms ease-out infinite;
-webkit-animation: pulse-border2 1500ms ease-out infinite;
z-index: -2;
}
&:hover, &:focus, &:active {
&:before {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
}
}
}
.ct-banner1 {
.ct-banner-image {
position: relative;
img {
width: 100%;
}
}
.item--icon {
line-height: 1;
margin-right: 14px;
i {
font-size: 64px;
color: $secondary_color;
@media #{$max-lg} {
font-size: 54px;
}
}
}
.item--title {
font-size: 24px;
margin-bottom: 8px;
margin-top: 8px;
@media #{$max-lg} {
font-size: 20px;
}
}
.item--desc {
font-size: 15px;
line-height: 22px;
color: #888;
}
.ct-banner-holder {
background-color: #fff;
position: absolute;
bottom: -38px;
left: 18px;
right: 18px;
@include box-shadow(0 8px 65px rgba(#0c0c0c, 0.19));
@include border-radius(30px 30px 0 0);
padding: 20px 30px;
display: flex;
flex-wrap: nowrap;
@media #{$max-lg} {
position: static;
border-radius: 0px;
padding-left: 20px;
padding-right: 20px;
}
}
.ct-banner-counter {
position: absolute;
padding: 27px 20px 27px 26px;
width: 170px;
top: -48px;
left: -45px;
z-index: 99;
@include background-horizontal-right($gradient_color_from, $gradient_color_to);
z-index: 1;
@media #{$max-sm} {
left: 0;
}
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: url(../images/counter-dots.png);
background-position: top right;
background-repeat: no-repeat;
}
.ct-counter-number-value {
line-height: 1;
font-size: 60px;
font-weight: 700;
color: #fff;
@include font-family-heading($heading_default_font);
margin-bottom: 4px;
}
.ct-counter-title {
font-size: 20px;
line-height: 24px;
font-weight: 700;
color: #fff;
letter-spacing: -0.01em;
}
}
.ct-banner-inner {
padding-top: 90px;
margin-right: 100px;
position: relative;
z-index: 1;
@media #{$max-lg} {
margin-right: 30px;
padding-top: 30px;
}
@media #{$max-sm} {
margin-right: 0px;
}
&:before {
content: '';
width: 550px;
height: 550px;
border: 66px solid $primary_color;
position: absolute;
top: 0px;
right: -100px;
z-index: -1;
@include border-radius(100%);
animation: el-bounce 3s infinite linear alternate;
@media #{$max-lg} {
width: 360px;
height: 360px;
border-width: 40px;
right: -30px;
}
@media #{$max-sm} {
width: 280px;
height: 280px;
border-width: 32px;
right: -50px;
}
}
}
}
.ct-banner2 {
.ct-banner-image {
position: relative;
z-index: 99;
padding-top: 42px;
padding-right: 64px;
padding-left: 44px;
@media #{$max-md2} {
padding-top: 30px;
padding-left: 30px;
padding-right: 40px;
}
@media #{$max-sm} {
padding: 0 20px 0 0;
}
img {
width: 100%;
@include box-shadow(0 25px 18px rgba(#000945, 0.28));
@include border-radius(30px);
}
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 184px;
bottom: 75px;
@include border-radius(30px);
z-index: -1;
background-color: #f4f9fd;
}
}
.ct-banner-shape {
position: absolute;
top: 0;
right: 0;
z-index: 88;
animation: animationFramesFive 12s infinite linear alternate;
}
.ct-banner-inner {
position: relative;
}
}
.ct-banner3 {
height: 590px;
position: relative;
z-index: 1;
margin-left: 80px;
@media #{$max-lg} {
margin-left: 48px;
}
@media #{$max-sm} {
margin-left: 0px;
height: 420px;
}
&:before {
content: '';
width: 100%;
height: 100%;
@include background-horizontal-right($gradient_color_from, $gradient_color_to);
position: absolute;
top: 0;
left: 0;
@include border-radius(465px 0px 5px 5px);
z-index: -2;
@media #{$max-sm} {
@include border-radius(225px 0px 5px 5px);
}
}
&:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
@include border-radius(465px 0px 5px 5px);
z-index: -1;
overflow: hidden;
background-image: url(../images/overlay-shape3.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
@media #{$max-sm} {
@include border-radius(225px 0px 5px 5px);
}
}
.ct-banner-image {
position: absolute;
top: 45px;
left: -75px;
right: 74px;
border: 10px solid #fff;
@include border-radius(100%);
img {
@include border-radius(100%);
}
@media #{$max-sm} {
left: 0px;
}
}
.ct-banner-counter {
position: absolute;
top: -10px;
left: -90px;
width: 170px;
height: 170px;
border: 10px solid #fff;
border-radius: 170px;
overflow: hidden;
@include background-horizontal-right($gradient_color_from, $gradient_color_to);
@include box-shadow(0 10px 60px rgba(#000a50, 0.15));
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
@media #{$max-sm} {
left: 0px;
}
.ct-counter-title {
font-size: 18px;
text-transform: uppercase;
color: #fff;
line-height: 1;
white-space: nowrap;
margin-bottom: 10px;
}
.ct-counter-number-value {
font-size: 44px;
color: #fff;
font-weight: 700;
line-height: 1;
}
}
.item--title {
position: absolute;
bottom: 50px;
right: 18px;
font-size: 24px;
color: #fff;
font-weight: 700;
white-space: nowrap;
@include transform(rotate(-90deg) translate(100%, 0));
transform-origin: right bottom;
@media #{$max-sm} {
right: 0;
left: 20px;
white-space: inherit;
@include transform(rotate(0deg) translate(0%, 0));
bottom: 30px;
font-size: 20px;
line-height: normal;
}
}
}
.ct-history-carousel1 {
.item--image {
display: inline-block;
margin: 0 auto;
background-color: transparent;
width: 113px;
height: 128px;
position: relative;
z-index: 1;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
.item--mask {
content: '';
width: 100%;
height: 100%;
mask-image: url(../images/bg-history.png);
-webkit-mask-image: url(../images/bg-history.png);
-ms-mask-image: url(../images/bg-history.png);
-o-mask-image: url(../images/bg-history.png);
position: absolute;
top: 0;
left: 0;
-webkit-mask-repeat: no-repeat;
-ms-mask-repeat: no-repeat;
-o-mask-repeat: no-repeat;
-webkit-mask-position: center top;
-ms-mask-position: center top;
-o-mask-position: center top;
mask-position: center top;
display: inline-block;
}
}
.item--title {
font-size: 20px;
line-height: 26px;
margin-top: 17px;
margin-bottom: 12px;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
}
.item--year {
font-size: 20px;
color: #fff;
font-weight: 700;
@include font-family-heading($heading_default_font);
line-height: 54px;
position: relative;
background-color: $primary_color;
margin: 11px 24px 0;
&:before {
content: '';
border-color: transparent transparent transparent $primary_color;
border-width: 27px;
border-style: solid;
position: absolute;
top: 0;
right: -54px;
}
span {
&:before, &:after {
content: '';
border-width: 27px;
border-style: solid;
position: absolute;
left: -27px;
}
&:before {
top: 0;
border-color: $primary_color $primary_color transparent transparent;
}
&:after {
bottom: 0;
border-color: transparent $primary_color $primary_color transparent;
}
}
}
.item--description {
font-size: 15px;
line-height: 22px;
color: #6a6a6a;
}
.item--inner {
text-align: center;
margin-top: 15px;
&:hover {
.item--title {
color: $primary_color;
}
.item--image {
animation: icon-bounce 800ms ease-out infinite;
-webkit-animation: icon-bounce 800ms ease-out infinite;
}
}
}
.ct-slick-carousel[data-arrows="true"] {
padding: 0 80px;
z-index: 1;
@media #{$max-lg} {
padding-left: 60px;
padding-right: 60px;
}
@media #{$max-sm} {
padding-left: 45px;
padding-right: 45px;
}
&:before {
content: '';
height: 0;
left: 15px;
right: 15px;
z-index: -1;
border-bottom: 2px dotted #cec7b9;
position: absolute;
top: 188px;
}
.slick-arrow {
margin: 0;
top: 173px;
transform: translate(0, 0);
bottom: auto;
height: 30px;
width: 30px;
background-color: #f0f3f7;
border: 3px solid $primary_color;
color: #191919;
&:before {
font-size: 10px;
}
&.slick-prev {
left: 0;
right: auto;
@media #{$max-lg} {
left: 15px;
}
}
&.slick-next {
left: auto;
right: 0;
@media #{$max-lg} {
right: 15px;
}
}
&:hover {
color: #191919;
border-color: $primary_color;
background-color: $primary_color;
&:before {
color: #fff;
}
}
}
}
}
.ct-particle-animate {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
@media #{$max-md} {
display: none;
}
&.img-above-content {
z-index: 99;
}
img {
width: 100% !important;
height: auto;
}
div {
position: absolute;
&.top-left {
top: 0;
left: 0;
}
&.top-right {
top: 0;
right: 0;
}
}
.shape-animate1 {
animation: animationFramesTwo 12s infinite linear alternate;
}
.shape-animate2 {
animation: animationFramesOne 12s infinite linear alternate;
}
.shape-animate3 {
animation: animationFramesFour 12s infinite linear alternate;
}
.shape-animate4 {
animation: animationFramesThree 12s infinite linear alternate;
}
.shape-animate5 {
animation: animationFramesFive 12s infinite linear alternate;
}
.shape-animate6 {
animation: particleToptoBottom 10s infinite linear alternate;
}
}
.el-square-gradient .slick-dots {
&:before {
content: '';
position: absolute;
top: 100%;
left: 100%;
z-index: 99;
width: 72px;
height: 72px;
@include background-horizontal-right($gradient_color_from, $gradient_color_to);
}
}
.ct-pricing-single1 {
background-color: #fff;
@include border-radius(5px);
overflow: hidden;
@include box-shadow(0 17px 50px rgba(#000a50, 0.05));
text-align: center;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
&:hover {
@include box-shadow(0 17px 50px rgba(#000a50, 0.15));
}
.pricing--holder {
padding: 25px 20px 40px 20px;
}
.pricing--meta {
padding: 42px 20px 152px 20px;
position: relative;
z-index: 99;
.item--image {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba($primary_color_hex, 0.8);
}
}
svg {
height: 84px;
fill: #fff;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
}
.pricing--title {
font-size: 36px;
margin-bottom: 0;
color: #fff;
@media #{$max-lg} {
font-size: 24px;
}
}
.pricing--icon {
position: absolute;
bottom: -4px;
left: 50%;
@include transform(translate(-50%, 0));
height: 104px;
width: 104px;
border: 3px solid $primary_color;
background-color: #fff;
@include border-radius(100%);
i {
font-size: 60px;
@extend .text-gradient;
}
}
.pricing--price {
@include font-family-heading($heading_default_font);
font-size: 36px;
font-weight: 700;
color: #333;
margin-bottom: 12px;
@media #{$max-lg} {
font-size: 24px;
}
}
.pricing--feature {
list-style: none;
font-size: 18px;
color: #888888;
margin-bottom: 24px;
@media #{$max-lg} {
font-size: 15px;
}
li {
i {
font-size: 13px;
margin-right: 4px;
}
+ li {
margin-top: 10px;
}
}
}
.pricing--button {
.btn {
font-weight: 600;
color: #333;
background: transparent;
border: 2px solid $primary_color;
line-height: 41px;
padding: 0 26px;
&:hover {
background: $primary_color;
color: #fff;
}
}
}
}
.ct-pricing-single2 {
background-color: #fafdff;
@include border-radius(15px);
padding: 50px 30px 68px 30px;
@include box-shadow(0 15px 18px rgba(2, 0, 103, 0.05));
@include transition(.3s cubic-bezier(.24,.74,.58,1));
text-align: center;
.pricing--title {
font-size: 30px;
color: #06163a;
margin-bottom: 26px;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
@media #{$max-lg} {
font-size: 24px;
}
}
.pricing--price {
font-size: 33px;
color: #06163a;
font-weight: 700;
height: 120px;
width: 120px;
position: relative;
@include border-radius(120px);
z-index: 1;
line-height: 120px;
margin: 0 auto 24px auto;
right: 12px;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
cite {
font-size: 18px;
font-style: normal;
}
span {
position: absolute;
top: 3px;
right: -28px;
width: 58px;
height: 58px;
line-height: 58px;
font-size: 22px;
background-color: #fff;
@include border-radius(58px);
@include transition(.3s cubic-bezier(.24,.74,.58,1));
}
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@include border-radius(120px);
@include box-shadow(0 6px 19px rgba(#000000, 0.2));
z-index: -1;
background-color: #fff;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
}
&:after {
content: '';
@include box-shadow(0 6px 19px rgba(#000000, 0.2));
position: absolute;
top: 3px;
right: -28px;
width: 58px;
height: 58px;
background-color: #fff;
z-index: -2;
@include border-radius(58px);
@include transition(.3s cubic-bezier(.24,.74,.58,1));
}
}
.pricing--feature {
font-size: 16px;
color: #244080;
margin-bottom: 40px;
list-style: none;
li + li {
margin-top: 20px;
}
@media #{$max-lg} {
font-size: 15px;
}
}
.pricing--button {
.btn {
line-height: 54px;
padding: 0 44px;
@include border-radius(10px);
background: #06163a;
font-size: 16px;
}
}
&:hover {
@include box-shadow(0 18px 40px rgba(#585bff, 0.11));
background-color: #fff;
.pricing--title {
color: $primary_color;
}
.pricing--price {
color: #fff;
@include box-shadow(none);
&:before {
background-color: $primary_color;
}
span, &:after {
background-color: #e3471f;
@include box-shadow(none);
}
}
.pricing--button .btn {
background-color: #e3471f;
}
}
}
.ct-pricing-layout1 {
.ct-pricing-body {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
align-items: flex-end;
&.ct-pricing-hide {
display: none;
}
}
.ct-pricing-item {
margin-bottom: 30px;
}
.pricing-1-column .ct-pricing-item {
width: 100%;
padding: 0 15px;
}
.pricing-2-column .ct-pricing-item {
width: 50%;
padding: 0 15px;
}
.pricing-3-column .ct-pricing-item {
width: 33.33%;
padding: 0 15px;
@media #{$max-sm} {
width: 50%;
}
@media #{$max-xs} {
width: 100%;
}
}
.pricing-4-column .ct-pricing-item {
width: 25%;
padding: 0 15px;
@media #{$max-md} {
width: 50%;
}
@media #{$max-xs} {
width: 100%;
}
}
.pricing-5-column .ct-pricing-item {
width: 20%;
padding: 0 15px;
@media #{$max-md} {
width: 50%;
}
@media #{$max-xs} {
width: 100%;
}
}
.ct-pricing-tab-title {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-bottom: 35px;
.ct-pricing-tab-item {
font-size: 18px;
line-height: 28px;
color: #1a1e66;
@include font-family-heading($heading_default_font);
margin: 0 8px;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
cursor: pointer;
padding-left: 29px;
font-weight: 700;
@media #{$max-xs} {
font-size: 16px;
padding-left: 24px;
}
&:before, &:after {
content: '';
position: absolute;
top: 50%;
@include transform(translate(0, -50%));
@include transition(all 300ms linear 0ms);
}
&:before {
left: 0;
width: 18px;
height: 18px;
@include border-radius(18px);
border: 2px solid #b8b5b5;
}
&:after {
width: 6px;
height: 6px;
opacity: 0;
@include border-radius(6px);
left: 6px;
background-color: $primary_color;
}
&.active {
&:before {
border-color: $primary_color;
}
&:after {
opacity: 1;
}
}
span {
font-size: 12px;
font-weight: 500;
color: #1a1e66;
padding: 0 14px;
background-color: #e3e6fb;
border-radius: 2px;
line-height: 27px;
font-style: normal;
display: inline-block;
margin-left: 10px;
@media #{$max-xs} {
padding: 0 8px;
}
}
}
}
.item-popular {
font-size: 15px;
border-radius: 8px 8px 0 0;
background-color: #e3e6fb;
font-weight: 500;
color: #0e0e0e;
text-align: center;
padding: 10px 20px;
}
.ct-pricing-title {
font-size: 20px;
color: #0e0e0e;
margin-bottom: 10px;
}
.ct-pricing-subtitle {
color: #67687a;
@media #{$max-md} {
font-size: 14px;
}
}
.ct-pricing-top {
padding: 20px 27px 24px 27px;
@media #{$max-md} {
padding-left: 15px;
padding-right: 15px;
}
}
.ct-pricing-meta {
@include background-horizontal-right($gradient_color_from, $gradient_color_to);
padding: 2px 20px;
text-align: center;
font-size: 16px;
color: #ffffff;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
.ct-pricing-price {
font-weight: 700;
@include font-family-heading($heading_default_font);
font-size: 36px;
margin-right: 8px;
}
.ct-pricing-time {
margin-top: 10px;
}
}
.ct-pricing-features-list {
list-style: none;
margin-left: 20px;
margin-right: 20px;
margin-top: 14px;
margin-bottom: 16px;
list-style: none;
@media #{$max-md} {
margin-left: 15px;
margin-right: 15px;
font-size: 14px;
}
li {
color: #67687a;
padding: 12px 16px;
&.active {
background-color: #eef2fb;
}
i {
color: $primary_color;
font-size: 12px;
margin-right: 6px;
}
}
}
.ct-pricing-button {
padding: 0 20px 27px 20px;
@media #{$max-md} {
padding-left: 15px;
padding-right: 15px;
}
.btn {
width: 100%;
line-height: 48px;
font-size: 14px;
border-radius: 48px;
}
}
.ct-pricing-item-inner {
background-color: #fff;
@include border-radius(8px);
@include box-shadow(0 1px 10px rgba(#000000, 0.06));
}
}
.ct-showcase {
.item--image {
position: relative;
margin-bottom: 20px;
@include box-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(#000, 0.67);
@include transition(.3s cubic-bezier(.24,.74,.58,1));
opacity: 0;
}
img {
width: 100%;
}
.ct-btn-group {
position: absolute;
top: 50%;
left: 0;
right: 0;
@include transform(translate(0%, -50%));
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 30px;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
opacity: 0;
}
.btn {
z-index: 99;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
margin: 10px;
color: #fff;
line-height: 42px;
padding: 0 22px;
@include border-radius(55px);
font-size: 14px;
}
}
.item--title {
font-size: 16px;
font-weight: 700;
text-align: center;
span {
color: $primary_color;
}
}
&:hover {
.item--image {
&:before {
opacity: 1;
}
.ct-btn-group {
opacity: 1;
margin-top: 0;
}
}
}
&.style1 {
.item--image .btn {
margin: 5px;
}
&.yes-soon {
.item--image {
&:before {
opacity: 1;
}
.ct-btn-group {
opacity: 1;
margin-top: 0;
}
}
}
&.no-soon {
.ct-btn-group {
display: flex;
left: 50%;
flex-wrap: nowrap;
right: auto;
transform: translate(-50%, -50%);
@include border-radius(5px);
overflow: hidden;
.btn {
margin: 0;
font-size: 14px;
padding: 0 10px;
@include border-radius(0px);
background: #fff;
color: #000;
&.active {
background: $primary_color;
color: #fff;
}
}
}
}
}
&.style2 {
.item--title {
font-size: 18px;
}
.item--image .btn {
margin: 5px;
}
&.yes-soon {
.item--image {
&:before {
opacity: 1;
}
.ct-btn-group {
opacity: 1;
margin-top: 0;
}
}
}
&.no-soon {
.ct-btn-group {
display: flex;
left: 50%;
flex-wrap: nowrap;
right: auto;
transform: translate(-50%, -50%);
@include border-radius(5px);
overflow: hidden;
.btn {
margin: 0;
font-size: 16px;
padding: 0 24px;
line-height: 60px;
@include border-radius(0px);
background: #fff;
color: #000;
@media #{$max-lg} {
padding: 0 14px;
line-height: 48px;
font-size: 14px;
}
&.active {
background: $primary_color;
color: #fff;
}
}
}
}
&.yes-soon {
.ct-btn-group .btn {
font-size: 24px;
@media #{$max-lg} {
font-size: 18px;
&:hover, &:focus {
outline: none;
}
}
}
}
}
&.style3 {
@include transition(.3s cubic-bezier(.24,.74,.58,1));
.item--image .btn {
line-height: 55px;
border-radius: 55px;
font-size: 20px;
padding: 0 40px !important;
box-shadow: 0 0 4px rgba(0,0,0,0.49) inset !important;
}
.item--title {
font-size: 24px;
}
&:hover {
@include transform(translateY(-18px));
}
&.yes-soon {
.item--image {
&:before {
opacity: 1;
}
.btn {
font-size: 38px;
letter-spacing: 0.1em;
background: none !important;
color: $primary_color;
box-shadow: none !important;
text-decoration: underline;
text-decoration-thickness: 2px;
opacity: 1;
margin-top: 0;
}
}
}
}
}
.ct-search-form1 {
position: relative;
max-width: 152px;
@media #{$max-xl} {
max-width: 122px;
}
.search-field {
height: 54px;
padding: 0;
border: none;
font-size: 16px;
color: #71819d;
}
.search-submit {
padding: 0 5px 0 20px;
line-height: 54px;
background: none !important;
color: #71819d;
position: absolute;
top: 0;
right: 0;
font-size: 18px;
}
}
.ct-search-popup1 {
&.style1 {
width: 45px;
height: 45px;
background-color: #d8d5ff;
line-height: 45px;
@include border-radius(5px);
text-align: center;
font-size: 22px;
cursor: pointer;
i {
@extend .text-gradient;
}
}
&.style2 {
font-size: 20px;
line-height: 1;
color: #71819d;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
cursor: pointer;
&:hover {
color: $primary_color;
}
}
}
.ct-language-switcher1 {
font-size: 16px;
color: #71819d;
font-weight: 700;
position: relative;
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
ul {
margin: 0;
list-style: none;
position: absolute;
top: 100%;
left: 0;
@media #{$max-xl} {
left: auto;
right: 0;
}
min-width: 160px;
padding: 20px 30px;
background-color: #fff;
z-index: 99;
@include box-shadow(0 18px 43px rgba(#5a5a5a, 0.14));
@include border-radius(5px);
margin-top: 30px;
opacity: 0;
visibility: hidden;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
li {
padding: 4px 0;
}
}
.current--item {
line-height: 113px;
display: flex;
flex-wrap: nowrap;
align-items: center;
cursor: pointer;
svg {
fill: #71819d;
margin-right: 12px;
@media #{$max-xl} {
margin-right: 0;
}
}
label {
cursor: pointer;
@media #{$max-xl} {
width: 0;
overflow: hidden;
opacity: 0;
}
&:after {
content: "\f102";
font-family: Caseicon;
font-size: 9px;
margin-left: 8px;
line-height: 1;
}
}
}
&:hover .current--item + ul {
opacity: 1;
visibility: visible;
margin-top: 0;
}
&.dr-right ul {
left: auto;
right: 0;
}
}
body .el-flex-grow {
flex-grow: 1;
}
.el-bounce.bounce-active i {
animation: el-icon-bounce 600ms ease-out infinite;
-webkit-animation: el-icon-bounce 600ms ease-out infinite;
}
.ct-social-icon1 {
a {
width: 32px;
height: 32px;
background-color: #fff;
line-height: 32px;
text-align: center;
font-size: 18px;
color: #000;
position: relative;
z-index: 1;
display: inline-block;
@include border-radius(32px);
margin-right: 10px;
&:before {
content: '';
width: 32px;
height: 32px;
@include border-radius(32px);
z-index: -1;
@include background-horizontal-right($gradient_color_from, $gradient_color_to);
position: absolute;
top: 0;
left: 0;
opacity: 0;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
}
&:hover {
background-color: transparent;
color: #fff;
&:before {
opacity: 1;
}
}
}
}
.ct-social-icon2 {
width: 50px;
a {
width: 50px;
height: 50px;
background-color: transparent;
line-height: 46px;
text-align: center;
font-size: 22px;
color: #000;
position: relative;
z-index: 1;
display: inline-block;
@include border-radius(50px);
border: 2px solid #000;
margin: 0 0 15px;
&:before {
content: '';
width: 50px;
height: 50px;
@include border-radius(50px);
z-index: -1;
@include background-horizontal-right($gradient_color_from, $gradient_color_to);
position: absolute;
top: -2px;
left: -2px;
opacity: 0;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
}
&:hover {
border-color: transparent;
color: #fff;
&:before {
opacity: 1;
}
}
}
label {
font-size: 18px;
line-height: 24px;
font-weight: 700;
color: #08203a;
white-space: nowrap;
padding-left: 50px;
position: relative;
@include transform(rotate(90deg));
transform-origin: top left;
left: 38px;
&:before {
content: '';
width: 40px;
height: 3px;
background-color: $primary_color;
position: absolute;
top: 50%;
left: 0;
@include transform(translate(0, -50%));
}
}
}
.ct-social-icon3 {
a {
color: #b1b1b1;
&:hover {
color: $primary_color;
}
+ a {
margin-left: 14px;
}
}
}
.ct-gallery-carousel1 {
&.style1 {
.slick-list:before {
z-index: -1;
content: '';
position: absolute;
top: 35px;
left: 20px;
right: 20px;
bottom: 65px;
background-color: #fff;
@include border-radius(10px);
}
.item--inner {
background-color: #fff;
overflow: hidden;
padding: 9px;
@include border-radius(10px);
@include box-shadow(0 10px 50px rgba(#000a50, 0.15));
margin-top: 30px;
margin-bottom: 60px;
img {
@include border-radius(10px);
}
}
.slick-dots {
margin: 0 0 10px;
position: relative;
top: -20px;
}
}
&.style2 {
img {
width: 100%;
}
}
}
.ct-video-player {
position: relative;
img {
width: 100%;
}
.ct-video-holder + .ct-video-button {
@extend .ct-center;
}
}
.ct-video-button {
&.style1 {
width: 60px;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #fff;
font-size: 18px;
display: inline-block;
text-align: center;
position: relative;
z-index: 1;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@include background-horizontal-right($gradient_color_from, $gradient_color_to);
@include border-radius(100%);
z-index: -1;
}
&:after {
content: "";
position: absolute;
z-index: 0;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: $primary_color;
border-radius: 50%;
animation: pulse-border2 1500ms ease-out infinite;
-webkit-animation: pulse-border2 1500ms ease-out infinite;
z-index: -2;
opacity: 0.65;
}
&:hover {
&:after {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
}
}
&.style2 {
width: 55px;
height: 55px;
line-height: 55px;
text-transform: uppercase;
color: #fff;
font-size: 16px;
display: inline-block;
text-align: center;
position: relative;
z-index: 1;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $primary_color;
@include border-radius(100%);
z-index: -1;
}
&:after {
content: "";
position: absolute;
z-index: 0;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba($primary_color_hex, 0.67);
border-radius: 50%;
animation: pulse-border2 1500ms ease-out infinite;
-webkit-animation: pulse-border2 1500ms ease-out infinite;
z-index: -2;
opacity: 0.55;
}
&:hover {
&:after {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
}
.ct-video-text {
position: absolute;
top: 50%;
left: 100%;
margin-left: 18px;
font-weight: 700;
color: #2e2d2d;
text-transform: uppercase;
letter-spacing: 0.1em;
white-space: nowrap;
transform: translate(0, -50%);
}
}
&.style-n {
.line-video-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid $primary_color;
@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.3;
&.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;
}
}
}
}
.ct-sidebar-cart1 {
font-size: 22px;
line-height: 1;
position: relative;
cursor: pointer;
.widget_cart_counter {
position: absolute;
top: -4px;
right: -14px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: 500;
background-color: #f90000;
color: #fff;
font-size: 14px;
@include border-radius(21px);
}
}
.elementor-editor-active .ct-sidebar-cart1 .widget_cart_counter {
display: none;
}
.ct-cta1 {
position: relative;
z-index: 1;
&:before {
content: '';
z-index: -1;
position: absolute;
left: 30px;
height: 100%;
right: 30px;
bottom: -17px;
@include border-radius(90px);
background-color: #ccd3de;
@media #{$max-sm} {
@include border-radius(20px);
}
}
.item--image {
width: 60px;
min-width: 60px;
margin-right: 24px;
img {
max-width: 60px;
@include border-radius(60px);
}
}
.item--author {
display: flex;
flex-wrap: nowrap;
align-items: center;
@media #{$max-lg} {
min-width: 280px;
}
.item--autitle {
font-size: 20px;
margin-bottom: 2px;
color: #fff;
@media #{$max-lg} {
font-size: 18px;
}
}
.item--position {
font-size: 15px;
color: #8ba5cc;
}
}
.item--wgtitle {
flex-grow: 1;
text-align: center;
font-size: 30px;
line-height: 1.23;
@include font-family-heading($heading_default_font);
color: #fff;
font-weight: 700;
@media #{$max-lg} {
font-size: 24px;
}
@media #{$max-sm} {
text-align: left;
margin-top: 20px;
margin-bottom: 30px;
}
}
.item--button a {
font-size: 16px;
line-height: 52px;
@include border-radius(52px);
}
.ct-cta--inner {
background-color: #002358;
padding: 17px 30px;
@include border-radius(90px);
display: flex;
flex-wrap: nowrap;
align-items: center;
@media #{$max-lg} {
padding-left: 10px;
padding-right: 10px;
}
@media #{$max-sm} {
display: block;
@include border-radius(20px);
padding-bottom: 30px;
padding-top: 30px;
}
> div {
padding: 0 15px;
}
}
}
.ct-support-button {
position: fixed;
top: 150px;
z-index: 999;
height: 51px;
background-color: $primary_color;
display: flex;
white-space: nowrap;
border-radius: 51px 0 0 51px;
align-items: center;
padding-left: 57px;
padding-right: 12px;
color: #fff;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
@include transform(translateX(100%));
right: 51px;
i {
position: absolute;
top: 50%;
left: 9px;
@include transform(translate(0, -50%));
width: 36px;
height: 36px;
line-height: 36px;
@include border-radius(36px);
background-color: #1612a7;
font-size: 20px;
text-align: center;
}
.item--text {
font-size: 16px;
font-weight: 500;
}
a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
&.active, &:hover {
right: 0;
@include transform(translateX(0%));
}
}
.ct-effect1 {
animation: particleToptoBottom2 12s infinite linear alternate;
}
.ct-effect2 {
animation: NewsletterAnimated2 12s infinite linear alternate;
}