.ct-tabs--layout1 {
.ct-tab-content {
display: none;
}
&.style1 {
.ct-tabs-title {
display: flex;
flex-wrap: wrap;
width: 100%;
border-bottom: 1px solid #d7d7d7;
.ct-tab-title {
font-size: 18px;
line-height: 30px;
font-weight: 700;
text-transform: uppercase;
color: #222222;
cursor: pointer;
padding: 5px 34px;
position: relative;
z-index: 1;
margin-right: 30px;
@media #{$max-lg} {
margin-right: 0;
padding-left: 20px;
padding-right: 20px;
}
@media #{$max-md} {
font-size: 16px;
}
&:before {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
@extend .bg-gradient;
opacity: 0;
position: absolute;
z-index: -1;
}
&.active {
color: #fff;
&:before {
opacity: 1;
}
}
}
}
.ct-tabs-content {
.ct-tab-content {
font-size: 16px;
line-height: 27px;
padding-top: 30px;
p {
margin-bottom: 28px;
&:last-child {
margin-bottom: 0;
}
}
}
}
}
&.style2 {
.ct-tab-title {
font-size: 18px;
color: #181818;
padding-left: 29px;
position: relative;
margin: 0 10px 10px 10px;
cursor: pointer;
@media #{$max-sm} {
font-size: 16px;
}
&:before {
content: '';
width: 18px;
height: 18px;
@include border-radius(18px);
border: 2px solid #b8b5b5;
position: absolute;
top: 50%;
left: 0;
@include transform(translate(0, -50%));
@include transition(all 300ms linear 0ms);
}
&:after {
content: '';
height: 6px;
width: 6px;
@include border-radius(6px);
position: absolute;
top: 50%;
left: 6px;
@include transform(translate(0, -50%));
background-color: $primary_color;
opacity: 0;
@include transition(all 300ms linear 0ms);
}
&.active {
@include font-family-heading($heading_default_font);
font-weight: 700;
&:before {
border-color: $primary_color;
}
&:after {
opacity: 1;
}
}
span {
line-height: 27px;
padding: 0 10px;
color: #373737;
font-size: 12px;
@include border-radius(3px);
background-color: #eeeeee;
display: inline-block;
margin-left: 3px;
position: relative;
top: -1px;
font-weight: normal;
@include font-family-default($body_default_font);
@media #{$max-sm} {
padding: 0 6px;
}
}
}
.ct-tabs-title {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
.ct-tab-title {
display: none;
&:nth-child(1), &:nth-child(2) {
display: inline-block;
}
}
}
.ct-tabs-content {
padding-top: 40px;
@media #{$max-sm} {
padding-top: 20px;
}
}
}
&.style3 {
.ct-tabs-title {
border-bottom: 1px solid #14223d;
display: flex;
flex-wrap: wrap;
}
.ct-tab-title {
color: #000;
font-size: 18px;
padding: 0 40px 10px 40px;
position: relative;
display: inline-block;
cursor: pointer;
@media #{$max-lg} {
padding-left: 20px;
padding-right: 20px;
}
@media #{$max-md} {
padding-left: 12px;
padding-right: 12px;
font-size: 16px;
}
&:before {
content: '';
position: absolute;
bottom: 0;
width: 0;
left: 0;
height: 2px;
background-color: $gradient_color_from;
@include transition(all 300ms linear 0ms);
}
&:hover, &.active {
&:before {
width: 100%;
}
}
}
.ct-tabs-content {
padding-top: 39px;
font-size: 16px;
line-height: 34px;
p {
margin-bottom: 32px;
&:last-child {
margin-bottom: 0;
}
}
}
}
&.style4 {
.ct-tabs-title {
display: flex;
flex-wrap: wrap;
width: 100%;
.ct-tab-title {
font-size: 16px;
color: #000000;
font-weight: 600;
@include font-family-heading($heading_default_font);
cursor: pointer;
border: 1px solid #e4e4e4;
line-height: 38px;
background-color: #ebf1f1;
padding: 0 20px;
margin-right: 5px;
margin-bottom: 15px;
@include transition(all 200ms linear 0ms);
position: relative;
@media #{$max-lg} {
padding: 0 16px;
font-size: 15px;
}
@media #{$max-md} {
padding: 0px 10px;
font-size: 13px;
}
&:before {
content: '';
opacity: 0;
@include transition(all 200ms linear 0ms);
width: 0;
height: 0;
position: absolute;
left: 50%;
@include transform(translate(-50%, 0));
bottom: -20px;
border-width: 10px;
border-style: solid;
border-color: $third_color transparent transparent;
@media #{$max-lg} {
bottom: -14px;
border-width: 7px;
}
}
&.active {
border-color: $third_color;
background-color: $third_color;
color: #fff;
&:before {
opacity: 1;
}
}
* {
margin-right: 5px;
@media #{$max-md} {
margin-right: 3px;
}
}
&:first-child {
@include border-radius(3px 0 0 3px);
}
&:last-child {
margin-right: 0;
@include border-radius(0 3px 3px 0);
}
}
}
.ct-tabs-content {
padding-top: 15px;
.ct-tab-content {
display: none;
p:last-child {
margin-bottom: 0;
}
}
}
}
&.style5 {
font-family: 'Barlow', sans-serif;
.ct-tabs-title {
display: flex;
flex-wrap: wrap;
width: 100%;
border-bottom: 1px solid #e7ebed;
.ct-tab-title {
text-transform: capitalize;
font-size: 18px;
font-weight: 700;
color: #000000;
margin-top: 10px;
margin-right: 30px;
position: relative;
line-height: 36px;
white-space: nowrap;
cursor: pointer;
&:before {
content: '';
bottom: -2px;
left: 0;
right: 0;
height: 3px;
width: 0;
margin: auto;
position: absolute;
background-color: $primary_color;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
&.active, &:hover {
&:before {
width: 100%;
}
}
}
}
.ct-tabs-content {
padding-top: 22px;
}
}
}
.ct-tabs--layout2.type-vertical {
display: flex;
flex-wrap: nowrap;
@media #{$max-sm} {
flex-wrap: wrap;
}
.ct-tabs-title {
min-width: 200px;
border-right: 5px solid #000;
max-width: 300px;
@media #{$max-sm} {
min-width: 100%;
max-width: 100%;
width: 100%;
border: none;
}
.ct-tab-title {
font-size: 24px;
line-height: 28px;
font-weight: 700;
cursor: pointer;
display: block;
position: relative;
padding: 15px 30px 15px 0;
color: #000;
@media #{$max-sm} {
padding-right: 0;
}
&:first-child {
padding-top: 37px;
@media #{$max-sm} {
padding-top: 15px;
}
}
&:last-child {
padding-bottom: 37px;
@media #{$max-sm} {
padding-bottom: 15px;
}
}
&:before {
content: '';
width: 10px;
position: absolute;
top: 0;
right: -7px;
z-index: 99;
background-color: $primary_color;
height: 0;
@include transition(all 250ms linear 0ms);
}
span {
font-style: normal;
position: relative;
&:before {
content: '';
height: 1px;
width: 100%;
background-color: #000;
bottom: 0;
left: 0;
width: 0;
position: absolute;
@include transition(all 250ms linear 0ms);
}
}
&.active {
&:before {
height: 100%;
}
span:before {
width: 100%;
}
}
}
}
.ct-tab-content {
display: none;
padding-top: 9px;
padding-left: 35px;
@media #{$max-sm} {
width: 100%;
padding-top: 22px;
padding-left: 0;
}
.tab-sub {
font-size: 22px;
line-height: 30px;
@include font-family-heading($heading_default_font);
font-weight: 700;
margin-bottom: 25px;
}
}
}
.ct-tab-banner1 {
display: flex;
flex-wrap: wrap;
.ct-tabs-title {
width: 39%;
padding-right: 30px;
@media #{$max-sm} {
width: 100%;
padding-right: 0;
margin-bottom: 30px;
}
.ct-tab-title {
padding: 34px 40px;
position: relative;
z-index: 1;
cursor: pointer;
@media #{$max-lg} {
padding-left: 30px;
padding-right: 30px;
}
&:before, &:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@include border-radius(1px);
z-index: -1;
@include transition(all 300ms linear 0ms);
}
&:before {
border: 1px solid #d9d9d9;
background-color: #fff;
}
&:after {
@include background-horizontal($gradient_color_from, $gradient_color_to);
opacity: 0;
}
h4 {
margin-bottom: 16px;
font-size: 22px;
@include transition(all 300ms linear 0ms);
}
p {
margin-bottom: 0;
font-size: 16px;
line-height: 24px;
@include transition(all 300ms linear 0ms);
}
+ .ct-tab-title {
margin-top: 20px;
}
.tab-arrow {
position: absolute;
top: 50%;
right: -24px;
@include transform(translate(0, -50%));
width: 0;
height: 0;
border-width: 12px;
border-color: transparent transparent transparent $gradient_color_to;
border-style: solid;
@include transition(all 300ms linear 0ms);
opacity: 0;
@media #{$max-sm} {
display: none;
}
}
&.active {
&:before {
opacity: 0;
}
&:after, .tab-arrow {
opacity: 1;
}
h4, p {
color: #fff;
}
}
}
}
.ct-tabs-content {
width: 61%;
@media #{$max-sm} {
width: 100%;
}
.ct-tab-content {
display: none;
height: 100%;
@media #{$max-sm} {
min-height: 300px;
}
.ct-tab-image {
height: 100%;
@media #{$max-sm} {
min-height: 300px;
}
}
}
}
}
.ct-tab-banner2 {
display: flex;
flex-wrap: wrap;
padding-left: 165px;
@media #{$max-sm} {
padding-left: 0;
}
.ct-tabs-title {
max-width: 225px;
width: 100%;
position: absolute;
top: 50%;
left: 0;
@include transform(translate(0, -50%));
background-color: #fff;
@include box-shadow(0 0 43px rgba(#0c0c0c, 0.19));
@media #{$max-sm} {
position: static;
@include transform(translate(0, 0%));
max-width: 100%;
}
.ct-tab-title {
padding: 22px 20px;
position: relative;
z-index: 1;
cursor: pointer;
text-align: center;
@media #{$max-sm} {
width: 100%;
}
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: $primary_color;
@include transition(all 200ms linear 0ms);
opacity: 0;
z-index: -1;
}
i {
font-size: 35px;
line-height: 1;
@include transition(all 200ms linear 0ms);
}
h4 {
margin-top: 2px;
margin-bottom: 9px;
font-size: 20px;
@include transition(all 200ms linear 0ms);
}
p {
color: #0e0e0e;
margin-bottom: 0;
font-size: 15px;
line-height: 22px;
@include transition(all 200ms linear 0ms);
}
&.active {
&:before {
opacity: 1;
left: -12px;
right: -12px;
}
i, h4, p {
color: #fff;
}
}
}
}
.ct-tabs-content {
width: 100%;
.ct-tab-content {
display: none;
img {
width: 100%;
}
}
}
}
.ct-tab-banner3 {
display: flex;
flex-wrap: wrap;
.ct-tab-image {
min-height: 427px;
position: relative;
&:before {
content: '';
background-color: rgba(#000308, 0.35);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.ct-tab-box {
position: absolute;
top: -16px;
left: 90px;
background-color: #fff;
padding: 27px 34px 28px;
max-width: 382px;
z-index: 99;
@include transition(.4s cubic-bezier(.24,.74,.58,1));
font-family: "Nunito Sans";
@media #{$max-lg} {
left: 60px;
max-width: 302px;
}
@media #{$max-sm} {
top: 15px;
left: 15px;
max-width: 260px;
padding: 24px 20px;
}
&:before {
content: '';
height: 6px;
width: 100%;
position: absolute;
top: 0;
left: 0;
@include background-horizontal($gradient_color_from, $gradient_color_to);
}
.ct-box-title {
font-family: "Kalam";
font-size: 24px;
line-height: 32px;
font-weight: 400;
color: #000e29;
margin-bottom: 3px;
}
.ct-box-subtitle {
font-size: 18px;
color: #6f6f6f;
border-bottom: 1px solid #b6b6b6;
display: inline-block;
line-height: 1.2;
margin-bottom: 8px;
span {
color: #000e29;
font-weight: 700;
}
}
.ct-box-content {
font-size: 16px;
line-height: 24px;
color: #000e29;
margin-bottom: 18px;
}
}
.ct-tabs-title {
width: 48%;
@media #{$max-sm} {
width: 100%;
}
}
.ct-tabs-content {
width: 52%;
@media #{$max-sm} {
width: 100%;
}
.ct-tab-content {
display: none;
}
}
.ct-tab-title {
background-color: #000000;
@include transition(.4s cubic-bezier(.24,.74,.58,1));
padding: 27px 30px;
display: flex;
flex-wrap: nowrap;
align-items: center;
cursor: pointer;
position: relative;
z-index: 99;
@media #{$max-lg} {
padding: 22px 20px;
}
&:before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 50%;
right: 0px;
border-style: solid;
border-width: 10px;
border-color: transparent transparent transparent #000000;
@include transition(.4s cubic-bezier(.24,.74,.58,1));
z-index: 1;
}
h4 {
margin-bottom: 8px;
font-size: 22px;
color: #fff;
@include transition(.4s cubic-bezier(.24,.74,.58,1));
@media #{$max-lg} {
font-size: 20px;
}
}
p {
margin: 0;
font-size: 16px;
@media #{$max-lg} {
font-size: 14px;
}
line-height: 24px;
color: #ddd;
font-family: "Nunito Sans";
@include transition(.4s cubic-bezier(.24,.74,.58,1));
}
.ct-tab-icon {
width: 80px;
height: 80px;
line-height: 80px;
min-width: 80px;
color: $primary_color;
background-color: #383535;
position: relative;
text-align: center;
z-index: 1;
margin-right: 27px;
@include border-radius(80px);
@media #{$max-lg} {
margin-right: 15px;
width: 70px;
height: 70px;
line-height: 70px;
min-width: 70px;
}
i {
font-size: 42px;
@media #{$max-lg} {
font-size: 36px;
}
}
}
+ .ct-tab-title {
margin-top: 9px;
}
&.active {
background-color: #fff;
@include box-shadow(0 6px 70px rgba(#0c0c0c, 0.19));
@include transform(translateX(36px));
@media #{$max-sm} {
@include transform(translateX(0px));
}
&:before {
border-color: transparent transparent transparent #fff;
right: -20px;
}
h4, p {
color: #000e29;
}
.ct-tab-icon {
color: #fff;
background-color: $primary_color;
}
}
}
} |