:root {
/**
@Font-Family Declaration
*/
--tj-ff-body: 'Roboto', sans-serif;
--tj-ff-heading: 'Plus Jakarta Sans', sans-serif;
--tj-ff-fontawesome: "Font Awesome 6 Pro";
--tj-ff-ranko-icons: "ranko-icons";
/**
@Font-weight Declaration
*/
--tj-fw-normal: normal;
--tj-fw-thin: 100;
--tj-fw-elight: 200;
--tj-fw-light: 300;
--tj-fw-regular: 400;
--tj-fw-medium: 500;
--tj-fw-sbold: 600;
--tj-fw-bold: 700;
--tj-fw-ebold: 800;
--tj-fw-black: 900;
/**
@Font-Size Declaration
*/
--tj-fs-body: 16px;
--tj-fs-h1: 70px;
--tj-fs-h2: 48px;
--tj-fs-h3: 32px;
--tj-fs-h4: 24px;
--tj-fs-h5: 20px;
--tj-fs-h6: 18px;
--tj-fs-h7: 16px;
--tj-fs-h8: 14px;
--tj-fs-p1: 22px;
--tj-fs-p2: 18x;
--tj-fs-p3: 16px;
--tj-fs-p4: 14px;
--tj-fs-btn: 16px;
--tj-fs-link: 16px;
--tj-fs-subtitle: 14px;
/**
@Line Height Declaration
*/
--tj-lh-body: 1.625;
--tj-lh-h1: 1.114;
--tj-lh-h2: 1.208;
--tj-lh-h3: 1.25;
--tj-lh-h4: 1.333;
--tj-lh-h5: 1.4;
--tj-lh-h6: 1.444;
--tj-lh-h7: 1.5;
--tj-lh-h8: 1.571;
--tj-lh-p1: 1.455;
--tj-lh-p2: 1.556;
--tj-lh-p3: 1.625;
--tj-lh-p4: 1.571;
--tj-lh-btn: 1.625;
--tj-lh-link: 1.625;
--tj-lh-subtitle: 1.571;
/**
@Color Declaration
*/
--tj-color-common-white: #ffffff;
--tj-color-common-white2: #c0c6d1;
--tj-color-common-black: #000000;
--tj-color-heading-primary: #05173d;
--tj-color-text-body: #3d4a66;
--tj-color-theme-primary: #f44454;
--tj-color-theme-secondary: #054ce0;
--tj-color-theme-supportive: #ffd639;
--tj-color-theme-bg1: #edf1fa;
--tj-color-theme-bg2: #faedef;
--tj-color-theme-bg3: rgba(244, 68, 84, 0.2);
--tj-color-theme-bg4: rgba(255, 255, 255, 0.1019607843);
--tj-color-theme-bg5: #e2daf2;
--tj-color-theme-bg6: #daf2ec;
--tj-color-theme-bg7: #dae5f2;
--tj-color-theme-bg8: rgba(255, 255, 255, 0.1490196078);
--tj-color-theme-bg9: rgba(5, 76, 224, 0.1490196078);
--tj-color-theme-bg10: rgba(5, 76, 224, 0.2);
--tj-color-theme-dark: #05173d;
--tj-color-theme-dark2: #596580;
--tj-color-theme-dark3: rgba(5, 23, 61, 0.6);
--tj-color-green-1: #21b754;
--tj-color-grey-1: #c5c5c5;
--tj-color-border-1: #dadfe7;
--tj-color-border-2: #1d3152;
--tj-color-border-3: #e8dadb;
--tj-color-border-4: rgba(255, 255, 255, 0.1019607843);
--tj-color-border-5: rgba(255, 255, 255, 0.1490196078);
--tj-color-border-6: rgba(255, 255, 255, 0.4);
--tj-color-border-7: rgba(255, 255, 255, 0.3019607843);
--tj-color-border-9: rgba(255, 255, 255, 0.2);
--tj-color-border-10: rgba(218, 223, 231, 0.5019607843);
/**
@Gradient Declaration
*/
--tj-gradient-theme-primary: linear-gradient(180deg, rgba(5, 76, 224, 0.24) 0%, rgba(255, 255, 255, 0) 91.26%);
/**
@Shadows Declaration
*/
--tj-shadow-theme-primary: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843);
/**
@Border Radius Declaration
*/
--tj-br-sm: 4px;
--tj-br-md: 8px;
--tj-br-lg: 10px;
--tj-br-xl: 16px;
--tj-br-xxl: 24px;
/**
@Transition Declaration
*/
--tj-td-standard: 0.3s;
}
/**----------------------------------------
START: back to top CSS
----------------------------------------*/
.tj-anim-pulse {
animation: pulse2 1.5s infinite;
}
.tj-anim-pulse-1 {
animation: pulse1 1.5s infinite;
}
.tj-anim-move-var {
animation-name: moveVar;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.tj-anim-move-hor {
animation-name: moveHor;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.tj-anim-move-var-lg {
animation-name: moveVarLg;
animation-duration: 6s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.tj-anim-move-hor-lg {
animation-name: moveHorLg;
animation-duration: 6s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.tj-anim-spinner {
animation: spinner 3s 0s infinite alternate none running;
}
.tj-anim-spinner-2 {
animation: spinner-2 3s linear infinite;
}
.start-img {
opacity: 0.5;
animation: startImageFadeIn 3s alternate ease-in-out infinite;
}
.start-img:nth-child(2) {
animation-duration: 3.5s;
}
.start-img:nth-child(3) {
animation-duration: 4s;
}
.start-img:nth-child(2) {
animation-duration: 4.5s;
}
@keyframes pulse2 {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
}
70% {
box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
@keyframes pulse1 {
0% {
box-shadow: 0 0 0 0 rgba(244, 68, 84, 0.6);
}
70% {
box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
@keyframes moveHor {
0% {
transform: translateX(0);
}
100% {
transform: translateX(50px);
}
}
@keyframes moveHor2 {
0% {
transform: translate(56%, -50%);
}
100% {
transform: translate(75%, -50%);
}
}
@keyframes moveHorLg {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
@keyframes moveVar {
0% {
transform: translateY(0);
}
100% {
transform: translateY(30px);
}
}
@keyframes moveVarLg {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spinner-2 {
to {
transform: translate(50%, -50%) rotate(360deg);
}
}
@keyframes jump-arrow {
0%, 20%, 55%, 80%, 100% {
transform: translate3d(-50%, 0, 0) rotate(-90deg);
}
40% {
transform: translate3d(-50%, -8px, 0) rotate(-90deg);
}
70% {
transform: translate3d(-50%, -8px, 0) rotate(-90deg);
}
90% {
transform: translate3d(-50%, -5px, 0) rotate(-90deg);
}
}
@keyframes shakeAnimation {
0% {
transform: rotate(-20deg);
}
25% {
transform: rotate(20deg);
}
50% {
transform: rotate(-20deg);
}
75% {
transform: rotate(20deg);
}
100% {
transform: rotate(0);
}
}
@keyframes startImageFadeIn {
0% {
opacity: 0.5;
transform: scale(0.68) rotate(0);
}
100% {
opacity: 1;
transform: scale(1) rotate(360deg);
}
}
@keyframes textHover {
0% {
letter-spacing: -0.02em;
}
100% {
letter-spacing: 1px;
}
}
@keyframes pulseAnimation {
0% {
opacity: 0;
transform: scale(0) translateY(50px);
}
80% {
opacity: 1;
transform: scale(1) translateY(0);
}
90% {
transform: scale(1) rotate(0);
}
92% {
transform: scale(1) rotate(-10deg);
}
94% {
transform: scale(1) rotate(10deg);
}
96% {
transform: scale(1) rotate(-10deg);
}
98% {
transform: scale(1) rotate(10deg);
}
100% {
transform: scale(1) rotate(0);
}
}
@keyframes linehover {
0% {
width: 100%;
}
50% {
width: 0;
right: 0;
}
100% {
width: 100%;
left: 0;
}
}
@keyframes linehover2 {
0% {
width: 100%;
}
50% {
width: 0;
right: 26px;
}
100% {
width: calc(100% - 26px);
left: 0;
}
}
@keyframes texthover {
0% {
letter-spacing: -0.02em;
}
30% {
letter-spacing: -0.03em;
}
60% {
letter-spacing: -0.05em;
}
100% {
letter-spacing: -0.02em;
}
}
@keyframes shake {
0%, 100% {
transform: rotate(0) scale(1);
}
10%, 30%, 50%, 70%, 90% {
transform: rotate(-10deg) scale(1.1);
}
20%, 40%, 60%, 80% {
transform: rotate(10deg) scale(1.1);
}
}
.cd-words-wrapper {
display: inline-block;
position: relative;
text-align: left;
}
.cd-words-wrapper b {
display: inline-block;
position: absolute;
white-space: nowrap;
left: 0;
top: 0;
font-weight: inherit;
}
.cd-words-wrapper b.is-visible {
position: relative;
}
.no-js .cd-words-wrapper b {
opacity: 0;
line-height: 1;
}
.no-js .cd-words-wrapper b.is-visible {
opacity: 1;
}
.cd-headline.clip span {
display: inline-block;
transition: none;
}
.cd-headline.clip .cd-words-wrapper {
overflow: hidden;
vertical-align: middle;
padding-bottom: 5px;
}
.cd-headline.clip .cd-words-wrapper::after {
top: 16%;
right: 0;
width: 3px;
content: "";
height: 80%;
position: absolute;
background-color: #3b3b3b;
}
.cd-headline.clip b {
opacity: 0;
}
.cd-headline.clip b.is-visible {
opacity: 1;
}
/************ TABLE OF CONTENTS ***************
01. Theme Default CSS
02. Buttons CSS
03. Input CSS
04. Socials CSS
05. Progress Bar CSS
06. Tab switcher CSS
07. Section Headign CSS
08. Header CSS
09. Hamburger CSS
10. Mainmenu CSS
11. Footer CSS
12. Back to top CSS
13. Preloader CSS
14. Rating CSS
15. Shape CSS
16. Text Marquee CSS
17. Pagintions CSS
18. Hero CSS
19. Contact CSS
20. Brand Marrquee CSS
21. About CSS
22. Funfact CSS
23. Service CSS
34. Portfolio CSS
25. Faq CSS
26. Process CSS
27. Testimonials CSS
28. Blog CSS
29. Service Marquee CSS
30. Service Marquee CSS
31. Team CSS
32. Team Details CSS
33. Package CSS
34. Award CSS
35. Blog Details CSS
**********************************************/
/**----------------------------------------
START: Theme Default CSS
----------------------------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/**
Typography CSS
*/
body {
font-family: var(--tj-ff-body);
font-size: var(--tj-fs-body);
font-weight: normal;
color: var(--tj-color-text-body);
line-height: var(--tj-lh-body);
}
a {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--tj-ff-heading);
color: var(--tj-color-heading-primary);
margin-top: 0px;
font-weight: var(--tj-fw-bold);
letter-spacing: -0.02em;
line-height: 1.2;
}
h1 {
font-size: var(--tj-fs-h1);
line-height: var(--tj-lh-h1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
h1 {
font-size: 65px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
h1 {
font-size: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
h1 {
font-size: 56px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
h1 {
font-size: 50px;
}
}
@media (max-width: 575px) {
h1 {
font-size: 40px;
}
}
h2 {
font-size: var(--tj-fs-h2);
line-height: var(--tj-lh-h2);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
h2 {
font-size: 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
h2 {
font-size: 36px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
h2 {
font-size: 34px;
}
}
@media (max-width: 575px) {
h2 {
font-size: 32px;
}
}
h3 {
font-size: var(--tj-fs-h3);
line-height: var(--tj-lh-h3);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
h3 {
font-size: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
h3 {
font-size: 28px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
h3 {
font-size: 26px;
}
}
@media (max-width: 575px) {
h3 {
font-size: 24px;
}
}
h4 {
font-size: var(--tj-fs-h4);
line-height: var(--tj-lh-h4);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
h4 {
font-size: 22px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
h4 {
font-size: 20px;
}
}
h5 {
font-size: var(--tj-fs-h5);
line-height: var(--tj-lh-h5);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
h5 {
font-size: 18px;
}
}
h6 {
font-size: var(--tj-fs-h6);
line-height: var(--tj-lh-h6);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
h6 {
font-size: 16px;
}
}
.blog-text .wp-block-site-title :where(a),
:where(h1, h2, h3, h4, h5, h6) a {
font-size: inherit;
color: inherit;
font-weight: inherit;
line-height: inherit;
display: inline;
}
h1:hover a,
h2:hover a,
h3:hover a,
h4:hover a,
h5:hover a,
h6:hover a {
font-size: inherit;
color: inherit;
font-weight: inherit;
}
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
span,
input {
display: inline-block;
}
a,
.btn,
button,
span,
p,
input,
select,
textarea,
li,
img,
svg path,
*::after,
*::before,
h1,
h2,
h3,
h4,
h5,
h6 {
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
-moz-transition: all var(--tj-td-standard) ease-in-out 0s;
-ms-transition: all var(--tj-td-standard) ease-in-out 0s;
-o-transition: all var(--tj-td-standard) ease-in-out 0s;
transition: all var(--tj-td-standard) ease-in-out 0s;
}
textarea {
resize: none;
}
i {
-webkit-transition: transform var(--tj-td-standard) ease-in-out 0s;
-moz-transition: transform var(--tj-td-standard) ease-in-out 0s;
-ms-transition: transform var(--tj-td-standard) ease-in-out 0s;
-o-transition: transform var(--tj-td-standard) ease-in-out 0s;
transition: transform var(--tj-td-standard) ease-in-out 0s;
}
a:focus,
.button:focus {
text-decoration: none;
outline: none;
}
a:focus,
a:hover {
color: inherit;
}
a,
button {
color: inherit;
outline: none;
border: none;
background: transparent;
}
a:focus, a:focus-visible,
button:focus,
button:focus-visible {
outline: 0;
box-shadow: 0 0 0;
}
button:hover {
cursor: pointer;
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--tj-color-theme-primary) transparent;
}
::-webkit-scrollbar {
height: 4px;
width: 6px;
}
::-webkit-scrollbar-thumb {
background: var(--tj-color-theme-primary);
-webkit-border-radius: 1ex;
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
background: transparent;
}
*::-moz-selection {
background: var(--tj-color-common-black);
color: var(--tj-color-common-white);
text-shadow: none;
}
::-moz-selection {
background: var(--tj-color-common-black);
color: var(--tj-color-common-white);
text-shadow: none;
}
::selection {
background: var(--tj-color-common-black);
color: var(--tj-color-common-white);
text-shadow: none;
}
*::-webkit-input-placeholder {
color: var(--tj-color-common-black);
font-size: var(--tj-fs-body);
opacity: 1;
}
*:-moz-placeholder {
color: var(--tj-color-common-black);
font-size: var(--tj-fs-body);
opacity: 1;
}
*::-moz-placeholder {
color: var(--tj-color-common-black);
font-size: var(--tj-fs-body);
opacity: 1;
}
*:-ms-input-placeholder {
color: var(--tj-color-common-black);
font-size: var(--tj-fs-body);
opacity: 1;
}
*::placeholder {
color: var(--tj-color-common-black);
font-size: var(--tj-fs-body);
opacity: 1;
}
/**
Common Classes CSS
*/
img {
max-width: 100%;
}
.w-img img {
width: 100%;
}
.m-img img {
max-width: 100%;
}
.fix {
overflow: hidden;
}
.container {
--bs-gutter-x: 30px;
}
@media only screen and (min-width: 1781px), only screen and (min-width: 1601px) and (max-width: 1780px), only screen and (min-width: 1400px) and (max-width: 1600px) {
.container {
--bs-gutter-x: 0;
}
}
.container-fluid {
--bs-gutter-x: 30px;
}
.row {
--bs-gutter-x: 30px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.row {
--bs-gutter-x: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.row {
--bs-gutter-x: 20px;
}
}
.gap-30-0 {
gap: 30px 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.gap-30-0 {
gap: 20px 0;
}
}
.section-inner--lg {
margin: 0 35px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-inner--lg {
margin: 0;
}
}
.section-gap {
padding: 120px 0;
}
.section-gap-top {
padding-top: 120px;
}
.section-gap-bottom {
padding-bottom: 120px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.section-gap {
padding: 100px 0;
}
.section-gap-top {
padding-top: 100px;
}
.section-gap-bottom {
padding-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.section-gap {
padding: 80px 0;
}
.section-gap-top {
padding-top: 80px;
}
.section-gap-bottom {
padding-bottom: 80px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-gap {
padding: 60px 0;
}
.section-gap-top {
padding-top: 60px;
}
.section-gap-bottom {
padding-bottom: 60px;
}
}
.swiper {
padding-bottom: 70px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.swiper {
padding-bottom: 50px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.swiper {
padding-bottom: 40px;
}
}
.swiper-pagination-bullet {
height: 10px;
width: 10px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.swiper-pagination-bullet {
height: 8px;
width: 8px;
}
}
.swiper-pagination-bullet-active, .swiper-pagination-bullet:hover {
width: 35px;
border-radius: 10px;
background-color: var(--tj-color-theme-secondary);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.swiper-pagination-bullet-active, .swiper-pagination-bullet:hover {
width: 30px;
}
}
.swiper-button-prev, .swiper-button-next {
width: 50px;
height: 50px;
border: 1px solid var(--tj-color-border-1);
background: var(--tj-color-common-white);
border-radius: 100%;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.swiper-button-prev, .swiper-button-next {
display: none;
}
}
.swiper-button-prev::after, .swiper-button-next::after {
font-family: "ranko-icons";
color: var(--tj-color-theme-dark);
font-size: 14px;
}
.swiper-button-prev {
left: 10px;
transform: translateX(-50%);
}
.swiper-button-prev::after {
content: "\e908";
}
.swiper-button-next {
right: 10px;
transform: translateX(50%);
}
.swiper-button-next::after {
content: "\e906";
}
.swiper-button-prev:hover, .swiper-button-next:hover {
border-color: var(--tj-color-theme-primary);
background: var(--tj-color-theme-primary);
}
.swiper-button-prev:hover::after, .swiper-button-prev:hover::after, .swiper-button-next:hover::after, .swiper-button-next:hover::after {
color: var(--tj-color-common-white);
}
.swiper-button-disabled {
opacity: 0;
cursor: not-allowed;
}
.swiper:hover .swiper-button-prev, .swiper:hover .swiper-button-next {
opacity: 1;
visibility: visible;
}
.swiper:hover .swiper-button-prev {
left: 0;
}
.swiper:hover .swiper-button-next {
right: 0;
}
.swiper:hover .swiper-button-disabled {
opacity: 0;
cursor: not-allowed;
}
.swiper:has(.swiper-pagination-bullet) .swiper-button-prev, .swiper:has(.swiper-pagination-bullet) .swiper-button-next {
top: calc(50% - 35px);
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 0;
}
.tj-split-text-1 {
opacity: 0;
visibility: hidden;
}
.tj-split-text-1.animation-initialized {
visibility: visible;
opacity: 1;
}
.elementor-editor-active .tj-split-text-1 {
opacity: 1;
visibility: visible;
}
#wp-admin-bar-elementor_edit_page .elementor-edit-link-title {
display: unset;
}
.line {
position: relative;
background-clip: text;
color: transparent;
--highlight-offset: 0%;
background-image: linear-gradient(90deg, var(--tj-color-heading-primary) var(--highlight-offset), rgba(5, 23, 61, 0.35) var(--highlight-offset));
}
.tj-sticky-panel,
.tj-sticky-panel-2,
.sidebar-sticky,
.tj-progress-wrapper {
will-change: transform;
}
.pt-15 {
padding-top: 15px;
}
.pb-30 {
padding-bottom: 30px;
}
@media (max-width: 575px) {
.pb-30 {
padding-bottom: 20px;
}
}
.rg-30 {
row-gap: 30px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.rg-30 {
row-gap: 20px;
}
}
.rg-40 {
row-gap: 40px;
}
.rg-50 {
row-gap: 50px;
}
.rg-60 {
row-gap: 60px;
}
.rg-70 {
row-gap: 70px;
}
.rg-80 {
row-gap: 80px;
}
/* !END: Theme Default CSS */
/**----------------------------------------
START: Buttons CSS
----------------------------------------*/
.tj-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--tj-fs-btn);
color: var(--tj-color-common-white);
position: relative;
padding: 19px 30px;
border-radius: var(--tj-br-md);
font-weight: var(--tj-fw-medium);
line-height: 1;
border: 1px solid var(--tj-color-theme-primary);
overflow: hidden;
z-index: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-btn {
padding: 16px 24px;
}
}
.tj-btn i {
color: var(--tj-color-common-white);
display: inline-block;
font-size: 12px;
padding-top: 1px;
line-height: 1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-btn i {
font-size: 11px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) {
.tj-btn {
padding: 15px 20px;
}
}
.tj-btn::after {
content: "";
width: calc(100% + 50px);
height: calc(100% + 50px);
border-radius: 8px;
background-color: var(--tj-color-theme-primary);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(1);
transition: transform 0.5s ease;
z-index: -1;
}
.tj-btn:focus, .tj-btn:hover {
color: var(--tj-color-theme-primary);
border-color: var(--tj-color-theme-primary);
}
.tj-btn:focus::after, .tj-btn:hover::after {
transform: translate(-50%, -50%) scale(0);
}
.tj-btn:focus i, .tj-btn:hover i {
transform: translateX(2px);
color: var(--tj-color-theme-primary);
}
.tj-btn--underline {
padding: 0;
padding-bottom: 5px;
border: 0;
border-radius: 0;
line-height: 1;
color: var(--tj-color-common-white);
}
.tj-btn--underline::after {
display: none;
}
.tj-btn--underline::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 1px;
background-color: currentColor;
}
.tj-btn--underline:focus, .tj-btn--underline:hover {
color: var(--tj-color-common-white);
border-color: var(--tj-color-common-white);
}
.tj-btn--underline:focus i, .tj-btn--underline:hover i {
color: var(--tj-color-common-white);
}
.tj-btn--underline:focus::before, .tj-btn--underline:hover::before {
animation: linehover 0.8s linear;
}
.tj-btn--underline-2 {
color: var(--tj-color-theme-dark);
font-weight: var(--tj-fw-sbold);
gap: 2px;
padding-bottom: 1px;
}
.tj-btn--underline-2 i {
color: var(--tj-color-theme-dark);
font-size: 13px;
font-weight: var(--tj-fw-sbold);
transform: translateY(-1px);
}
.tj-btn--underline-2::before {
background-color: currentColor;
right: 7px;
}
.tj-btn--underline-2:focus, .tj-btn--underline-2:hover {
color: var(--tj-color-theme-dark);
}
.tj-btn--underline-2:focus i, .tj-btn--underline-2:hover i {
transform: translateY(-1px);
color: var(--tj-color-theme-dark);
}
.tj-btn--underline-dark {
color: var(--tj-color-theme-dark);
border-color: var(--tj-color-theme-dark);
}
.tj-btn--underline-dark i {
color: var(--tj-color-theme-dark);
}
.tj-btn--underline-dark:focus, .tj-btn--underline-dark:hover {
color: var(--tj-color-theme-primary);
border-color: var(--tj-color-theme-primary);
}
.tj-btn--underline-dark:focus i, .tj-btn--underline-dark:hover i {
color: var(--tj-color-theme-primary);
}
.tj-btn--md {
padding: 16px 30px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) {
.tj-btn--md {
padding: 16px 20px;
}
}
.tj-btn--sm {
padding: 14px 20px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) {
.tj-btn--sm {
padding: 11px 20px;
}
}
.tj-btn--bordered {
border: 1px solid var(--tj-color-theme-dark);
color: var(--tj-color-theme-dark);
z-index: 0;
}
.tj-btn--bordered::after {
transform: translate(-50%, -50%) scale(0);
z-index: -1;
background-color: var(--tj-color-theme-dark);
}
.tj-btn--bordered i {
color: var(--tj-color-theme-dark);
}
.tj-btn--bordered:focus, .tj-btn--bordered:hover {
color: var(--tj-color-common-white);
border-color: var(--tj-color-theme-dark);
}
.tj-btn--bordered:focus i, .tj-btn--bordered:hover i {
color: var(--tj-color-common-white);
}
.tj-btn--bordered:focus:after, .tj-btn--bordered:hover:after {
transform: scale(1);
transform: translate(-50%, -50%) scale(1);
}
.tj-btn--bordered.tj-btn--sm {
padding: 14px 30px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) {
.tj-btn--bordered.tj-btn--sm {
padding: 13px 25px;
}
}
.tj-btn-2 {
font-size: 16px;
font-weight: var(--tj-fw-medium);
color: var(--tj-color-heading-primary);
}
.tj-btn-2 i {
transform: rotate(-45deg);
font-size: 14px;
color: var(--tj-color-heading-primary);
margin-left: 4px;
display: inline-block;
}
.tj-btn-2:focus, .tj-btn-2:hover {
color: var(--tj-color-theme-primary);
}
.tj-btn-2:focus i, .tj-btn-2:hover i {
transform: rotate(0);
color: var(--tj-color-theme-primary);
}
.tj-btn-2--underline {
text-decoration: underline;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) {
.tj-btn-2--underline i {
font-size: 12px;
}
}
.tj-btn--full {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.tj-btn--popup {
background-color: transparent;
border: 1px solid var(--tj-color-common-white);
border-radius: 100%;
padding: 0;
width: 54px;
height: 54px;
justify-content: center;
}
.tj-btn--popup i {
font-size: 16px;
color: var(--tj-color-common-white);
}
.tj-btn--popup::after {
display: none;
}
.tj-btn--popup-2 {
background-color: var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
border: 0;
}
.tj-btn--popup-2:focus {
color: var(--tj-color-common-white);
}
.tj-btn--popup-2:focus i {
color: var(--tj-color-common-white);
}
.tj-btn-3 {
padding: 0;
gap: 0;
position: relative;
overflow: visible;
border: 0;
border-radius: 0;
background-color: transparent;
width: -moz-fit-content;
width: fit-content;
}
.tj-btn-3::after {
display: none;
}
.tj-btn-3 .btn-text {
padding: 19px 30px;
gap: 15px;
border-radius: 70px;
text-shadow: 2px;
background-color: var(--tj-color-theme-primary);
display: inline-flex;
align-items: center;
}
.tj-btn-3 .btn-text-inner {
text-shadow: 0 16px 0 currentColor;
overflow: hidden;
}
.tj-btn-3 .btn-text-inner span {
transform: translateY(0);
}
.tj-btn-3 .btn-icon {
width: 54px;
height: 54px;
display: inline-flex;
justify-content: center;
align-items: center;
line-height: 1;
background-color: var(--tj-color-theme-primary);
transition: all var(--tj-td-standard) ease-in-out 0s;
transform-origin: center;
border-radius: 50%;
position: relative;
z-index: 1;
}
.tj-btn-3 .btn-icon i {
color: var(--tj-color-common-white);
font-size: 16px;
transform: rotate(-45deg);
}
.tj-btn-3 > :nth-child(1) {
margin-inline-end: -54px;
transform: scale3d(0.5, 0.5, 1);
opacity: 0;
}
.tj-btn-3 > :nth-child(3) {
margin-inline-start: 0;
transform: scale3d(1, 1, 1);
opacity: 1;
}
.tj-btn-3:hover {
color: var(--tj-color-common-white);
}
.tj-btn-3:hover .btn-text-inner span {
transform: translateY(-16px);
}
.tj-btn-3:hover > :nth-child(1) {
margin-inline-end: 0;
transform: scale3d(1, 1, 1);
opacity: 1;
}
.tj-btn-3:hover > :nth-child(3) {
margin-inline-start: -54px;
transform: scale3d(0.5, 0.5, 1);
opacity: 0;
}
.tj-btn-h4 {
padding: 8px 8px 8px 30px;
gap: 15px;
border-radius: 70px;
}
.tj-btn-h4::after {
left: auto;
right: 0;
border-radius: 60px;
top: 0;
width: 100%;
height: 100%;
transform: none;
transition: all var(--tj-td-standard) ease-in-out 0s;
}
.tj-btn-h4 .btn-icon {
width: 40px;
height: 40px;
display: inline-flex;
justify-content: center;
align-items: center;
line-height: 1;
background-color: var(--tj-color-common-white);
transition: all var(--tj-td-standard) ease-in-out 0s;
transform: rotate(-45deg);
border-radius: 50%;
will-change: transform;
}
.tj-btn-h4 .btn-icon i {
color: var(--tj-color-heading-primary);
font-size: 16px;
}
.tj-btn-h4:hover::after {
width: 40px;
height: 40px;
border-radius: 50%;
transform: scale(1);
right: 8px;
top: 8px;
}
.tj-btn-h4:hover .btn-icon {
transform: rotate(0deg);
background-color: transparent;
}
.tj-btn-h4:hover .btn-icon i {
transform: none;
color: var(--tj-color-common-white);
}
/* !END: Buttons CSS */
/**----------------------------------------
START: Input CSS
----------------------------------------*/
input::-ms-clear {
display: none;
}
input::-webkit-search-cancel-button {
display: none;
}
.tj-input {
display: inline-flex;
align-items: center;
padding: 16px 18px;
color: var(--tj-color-body-text);
background-color: var(--tj-color-common-white);
flex-grow: 1;
transition: all 0.3s;
font-size: var(--tj-fs-body);
position: relative;
z-index: 0;
outline: none;
border: 0;
border-radius: var(--tj-br-md);
box-sizing: border-box;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-input {
padding: 16px 16px 12px;
}
}
.tj-input::placeholder {
opacity: 0.8;
}
.tj-input:focus {
outline: none;
border: 0;
}
.tj-input:focus::placeholder {
opacity: 0.8;
}
.tj-input__wrapper {
background-color: var(--tj-color-common-white);
border: 1px solid var(--tj-color-border-1);
border-radius: var(--tj-br-lg);
display: inline-flex;
justify-content: space-between;
align-items: center;
max-width: 100%;
width: 460px;
padding-right: 4px;
gap: 10px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.tj-input__wrapper {
max-width: 100%;
width: 410px;
}
}
@media (max-width: 575px) {
.tj-input__wrapper {
width: 100%;
}
}
.tj-input__wrapper:has(.tj-input:not(.tj-nice-select):focus) {
border-color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-input__wrapper .tj-input {
width: 40%;
}
}
.tj-input__wrapper--lg {
padding: 5px 5px 5px 0;
width: 100%;
max-width: 557px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.tj-input__wrapper--lg {
padding: 0;
padding-right: 5px;
width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.tj-input__wrapper--lg {
padding: 0;
padding-right: 2.5px;
width: 100%;
}
}
@media (max-width: 575px) {
.tj-input__wrapper--lg {
padding: 0px;
padding-right: 2.5px;
width: 100%;
}
}
.tj-input::placeholder {
color: var(--tj-color-body-text);
}
.tj-input.tj-nice-select {
padding: 22px 30px;
}
.tj-nice-select {
height: auto;
z-index: 99;
}
.tj-nice-select span {
line-height: 1;
}
.tj-nice-select .list {
width: 100%;
border: 0;
}
.subscribe-form .tj-input {
width: 100%;
}
.style-2 .footer__top .tj-input__wrapper {
width: 100%;
padding: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--1 .tj-input {
margin: 3px 0;
}
}
/* !END: Input CSS */
/**----------------------------------------
START: Socials CSS
----------------------------------------*/
.tj-socials ul {
display: flex;
gap: 6px;
align-content: center;
}
.tj-socials ul li a {
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.4;
transform: translateY(0);
}
.tj-socials ul li a i {
color: var(--tj-color-theme-dark);
font-size: 32px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-socials ul li a i {
font-size: 24px;
}
}
.tj-socials ul li a:hover {
opacity: 1;
transform: translateY(-2px);
}
.tj-socials ul li a:hover i {
color: var(--tj-color-theme-secondary);
}
/* !END: Socials CSS */
/**----------------------------------------
START: Progress Bar CSS
----------------------------------------*/
.tj-progress {
padding: 0;
margin: 0;
width: 100%;
height: 8px;
background: var(--tj-color-theme-bg1);
position: relative;
border-radius: 30px;
z-index: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-progress {
height: 6px;
}
}
.tj-progress__list {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 24px;
list-style: none;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-progress__list {
margin-top: 20px;
gap: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-progress__list {
margin-top: 20px;
gap: 16px;
}
}
.tj-progress__title {
font-size: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-progress__title {
font-size: 14px;
}
}
.tj-progress__bar {
width: 0;
height: 100%;
background: var(--tj-color-theme-primary);
position: relative;
z-index: 1;
border-radius: 30px;
}
.tj-progress__bar::after {
content: "";
width: 18px;
height: 18px;
border: 4px solid var(--tj-color-theme-primary);
border-radius: 100%;
position: absolute;
right: 0;
top: 50%;
transform: translate(3px, -50%);
background: var(--tj-color-common-white);
z-index: 2;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-progress__bar::after {
width: 16px;
height: 16px;
border-width: 3px;
}
}
.tj-progress__perchant {
font-size: 12px;
padding: 5px 7px 4px;
line-height: 1;
height: auto;
position: absolute;
right: 0;
bottom: 100%;
transform: translate(11px, -13px);
color: var(--tj-color-common-white);
background: var(--tj-color-theme-primary);
z-index: 2;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-progress__perchant {
font-size: 10px;
padding: 4px 3px 4px 5px;
transform: translate(9px, -11px);
}
}
.tj-progress__perchant::after {
content: "";
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: var(--tj-color-theme-primary);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-progress__perchant::after {
border-width: 4px;
}
}
/* !END: Progress Bar CSS */
/**----------------------------------------
START: Tab switcher CSS
----------------------------------------*/
.tj-tab-switcher .form-switch {
padding: 0;
margin: 0;
}
.tj-tab-switcher .form-check .form-check-input {
display: none;
}
.tj-tab-switcher .form-check:has(.form-check-input) .form-check-label {
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
cursor: pointer;
background-color: var(--tj-color-theme-primary);
float: none;
height: 36px;
width: 75px;
margin: 0;
box-shadow: none;
border: 0;
border-radius: 50px;
}
.tj-tab-switcher .form-switch:has(.form-check-input) .form-check-label::after {
content: "";
height: 20px;
width: 20px;
border: 0;
background: linear-gradient(149.04deg, rgba(244, 68, 84, 0.3) 15%, rgba(255, 250, 250, 0) 78.75%);
border-radius: 37px;
top: 50%;
transform: translateY(-50%);
position: absolute;
left: 8.5px;
z-index: 2;
cursor: pointer;
}
.tj-tab-switcher .form-switch:has(.form-check-input) .form-check-label::before {
content: "";
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 28.5px;
height: 28.5px;
background-color: var(--tj-color-common-white);
z-index: 1;
border-radius: 100%;
border: 0;
transition: all 0.3s;
}
.tj-tab-switcher .form-check:has(.form-check-input:checked) .form-check-label::before {
background-color: var(--tj-color-common-white);
}
.tj-tab-switcher .ms-input .form-check-input:checked {
box-shadow: none;
background-color: var(--tj-color-theme-primary);
}
.tj-tab-switcher .form-switch:has(.form-check-input:checked) .form-check-label::after {
left: 45.5px;
}
.tj-tab-switcher .form-switch:has(.form-check-input:checked) .form-check-label::before {
left: 42px;
}
/* !END: Tab switcher CSS */
/**----------------------------------------
START: Section Headign CSS
----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-heading {
overflow: hidden;
}
}
.section-heading--centered {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.section-heading--centered .section-heading__title {
max-width: 575px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.section-heading--centered .section-heading__title {
max-width: 448px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-heading--centered .section-heading__title {
max-width: 374px;
}
}
.section-heading--spacing {
margin-bottom: 50px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.section-heading--spacing {
margin-bottom: 40px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-heading--spacing {
margin-bottom: 35px;
}
}
.section-heading__sub-title {
font-family: var(--tj-ff-body);
display: inline-flex;
gap: 5px;
justify-content: center;
align-items: center;
padding: 5px 10px 3px;
background-color: var(--tj-color-theme-bg2);
color: var(--tj-color-theme-primary);
font-weight: var(--tj-fw-medium);
font-size: 14px;
text-transform: uppercase;
line-height: 1;
vertical-align: middle;
letter-spacing: 2%;
border-radius: 6px;
margin-bottom: 16px;
}
.section-heading__sub-title::before {
content: "";
width: 5px;
height: 5px;
flex-shrink: 0;
border-radius: 100%;
background: var(--tj-color-theme-primary);
margin-bottom: 1.5px;
}
.section-heading__sub-title--2 {
background-color: transparent;
border: 1px solid var(--tj-color-theme-primary);
}
.section-heading__sub-title--2::before {
display: none;
}
.section-heading__sub-title.style-3 {
background-color: transparent;
padding: 0;
}
.section-heading__title {
margin-bottom: 24px;
font-size: 48px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.section-heading__title {
font-size: 40px;
margin-bottom: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.section-heading__title {
font-size: 36px;
margin-bottom: 14px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-heading__title {
font-size: 32px;
margin-bottom: 12px;
max-width: 450px;
}
}
@media (max-width: 575px) {
.section-heading__title {
max-width: 100%;
}
}
/* !END: Section Headign CSS */
/**----------------------------------------
START: Header CSS
----------------------------------------*/
.header {
box-shadow: var(--tj-shadow-theme-primary);
max-width: 100%;
margin: 0 auto;
background-color: var(--tj-color-common-white);
border-bottom-right-radius: var(--tj-br-xl);
border-bottom-left-radius: var(--tj-br-xl);
position: relative;
z-index: 998;
}
.header.wp-header {
box-shadow: none;
}
.header--absolute {
position: absolute;
left: 50px;
right: 50px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.header--absolute {
left: 15px;
right: 15px;
}
}
.header-duplicate {
position: fixed;
top: -300px;
left: 50px;
right: 50px;
transition: top 0.3s ease-in-out;
}
.header-duplicate.sticky {
top: 0;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.header-duplicate {
left: 15px;
right: 15px;
}
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
.header {
padding: 10px 0;
max-width: 100%;
}
}
.header__logo img {
width: 133px;
margin-left: -5px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
.header__logo img {
width: 120px;
}
}
@media (max-width: 575px) {
.header__logo img {
width: 110px;
}
}
.header__wrapper {
display: flex;
gap: 20px;
align-items: center;
justify-content: space-between;
}
.header__wrapper > div:last-child {
margin-left: auto;
}
.header__right {
display: flex;
align-items: center;
gap: 12px;
}
.header__mobile-toggler {
width: 46px;
height: 46px;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 4px;
border: 1px solid var(--tj-color-border-1);
padding: 0 11px;
border-radius: var(--tj-br-md);
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
.header__mobile-toggler {
width: 40px;
height: 38px;
padding: 0 8px;
}
}
.header__mobile-toggler span {
width: 100%;
height: 2px;
background-color: var(--tj-color-theme-dark);
flex-shrink: 0;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
.header__mobile-toggler span {
height: 2px;
}
}
.header__mobile-toggler span:nth-child(2) {
width: 80%;
}
.header__mobile-toggler span:last-child {
width: 60%;
}
.header__others {
position: relative;
height: 100%;
}
.header__others__dropdown {
display: block;
position: absolute;
top: 100%;
left: auto;
right: 0;
width: 350px;
top: 100%;
z-index: 99;
text-align: left;
background-color: var(--tj-color-common-white);
-webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
opacity: 0;
visibility: hidden;
gap: 0;
padding: 24px;
pointer-events: none;
-webkit-transition: 0.4s;
border-radius: var(--tj-br-lg);
transition: 0.4s;
}
.header__others:hover .header__mobile-toggler span:nth-child(2) {
width: 100%;
}
.header__others:hover .header__mobile-toggler span:last-child {
width: 100%;
}
.header__others:hover .header__others__dropdown {
opacity: 1;
visibility: visible;
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
pointer-events: inherit;
}
.header__title {
color: var(--tj-color-theme-dark);
font-size: 25px;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.header__info {
margin-bottom: 30px;
}
.header__info .contact-item {
margin-bottom: 10px;
}
.header__info .contact-item .contact-text .text {
color: var(--tj-color-text-body);
font-size: 18px;
}
.header__info .contact-item .contact-text .text a:hover {
color: var(--tj-color-theme-primary);
}
.header__info .contact-item .contact-text .text:last-child {
margin-bottom: 0;
}
.header__search {
position: relative;
margin-bottom: 35px;
}
.header__search button {
position: absolute;
top: 50%;
inset-inline-start: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 18px;
color: var(--tj-color-theme-dark);
}
.header__search input:not([type=submit]):not([type=radio]):not([type=checkbox]),
.header__search .hamburger_search input {
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 0 0 25px;
background: transparent;
border: none;
border-bottom-width: medium;
border-bottom-style: none;
border-bottom-color: currentcolor;
outline: none;
font-size: 16px;
border-bottom: 1px solid var(--tj-color-border-1);
color: var(--tj-color-theme-dark);
}
.header__search input:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder,
.header__search .hamburger_search input::-ms-input-placeholder {
opacity: 0.8;
font-size: 18px;
}
.header__search input:not([type=submit]):not([type=radio]):not([type=checkbox])::placeholder,
.header__search .hamburger_search input::placeholder {
opacity: 0.8;
font-size: 18px;
}
.header--2 .header__wrapper {
padding-left: 30px;
padding-right: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.header--2 .header__wrapper {
padding-left: 20px;
padding-right: 20px;
}
}
@media (max-width: 575px) {
.header--2 .header__wrapper {
padding-left: 15px;
padding-right: 15px;
}
}
.header--2 .header__logo {
width: 305px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.header--2 .header__logo {
width: auto;
}
}
.header--3 {
margin-top: 30px;
border-radius: var(--tj-br-xl);
}
@media (max-width: 575px) {
.header--3 {
margin-top: 15px;
}
}
.header--3.header-duplicate {
top: -120px;
}
.header--3.header-duplicate.sticky {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
top: 0;
}
.header--3 .header__wrapper {
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
}
@media (max-width: 575px) {
.header--3 .header__wrapper {
padding-left: 15px;
padding-right: 15px;
}
}
.header--3 .header__wrapper > div:last-child {
margin-left: 0;
}
.header--3 .header__logo {
width: 133px;
}
.header--3 .header__right .tj-btn--sm:not(.tj-btn--bordered) {
padding-left: 30px;
padding-right: 30px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) {
.header--3 .header__right .tj-btn--sm:not(.tj-btn--bordered) {
padding-left: 25px;
padding-right: 25px;
}
}
@media (min-width: 1025px) {
.header__logo {
padding: 20px 0;
}
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
.elementor-widget .header {
margin: 0px;
}
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
.elementor-widget .header--absolute,
.elementor-widget .header-duplicate {
left: 15px;
right: 15px;
}
}
.elementor-widget .header--3 {
margin-top: 30px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
.elementor-widget .header--3 {
margin-top: 15px;
}
}
/* !END: Header CSS */
/**----------------------------------------
START: Hamburger CSS
----------------------------------------*/
.hamburger-area {
position: fixed;
right: -490px;
top: 0;
width: 450px;
height: 100%;
background-color: var(--tj-color-common-white);
box-shadow: var(--tj-shadow-theme-primary);
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-duration: 1s;
z-index: 99999;
-ms-overflow-style: none;
scrollbar-width: none;
overflow-y: scroll;
}
.hamburger-area::-webkit-scrollbar {
display: none;
}
.hamburger-area.opened {
right: 0px;
}
@media (max-width: 575px) {
.hamburger-area {
width: 320px;
}
}
.hamburger_bg {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
backdrop-filter: blur(37px);
}
.hamburger_wrapper {
position: relative;
padding: 45px 45px 90px 45px;
overflow: auto;
height: 100%;
}
@media (max-width: 575px) {
.hamburger_wrapper {
padding: 40px 20px 60px 20px;
}
}
.hamburger_top {
margin-bottom: 40px;
}
.hamburger_close_btn {
width: 40px;
height: 38px;
padding: 0 8px;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 4px;
border: 1px solid var(--tj-color-border-1);
padding: 0 11px;
border-radius: var(--tj-br-md);
}
.hamburger_close_btn i {
font-size: 20px;
font-weight: 500;
display: inline-block;
}
.hamburger_close_btn:hover i {
transform: rotate(90deg);
}
.hamburger_search {
position: relative;
margin-bottom: 30px;
}
.hamburger_search select,
.hamburger_search .nice-select,
.hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox]),
.hamburger_search input {
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 25px;
background: transparent;
border: none;
outline: none;
font-size: 18px;
border-bottom: 1px solid var(--tj-color-border-1);
color: var(--tj-color-theme-dark);
}
.hamburger_search select::-ms-input-placeholder,
.hamburger_search .nice-select::-ms-input-placeholder,
.hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder,
.hamburger_search input::-ms-input-placeholder {
opacity: 0.8;
font-size: 18px;
}
.hamburger_search select::placeholder,
.hamburger_search .nice-select::placeholder,
.hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::placeholder,
.hamburger_search input::placeholder {
opacity: 0.8;
font-size: 18px;
}
.hamburger_search button {
position: absolute;
top: 50%;
inset-inline-start: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 18px;
color: var(--tj-color-theme-dark);
}
.hamburger_menu .mean-container .mean-bar {
background: transparent;
box-sizing: border-box;
margin-bottom: 30px;
}
.hamburger_menu .mean-container .mean-bar * {
box-sizing: border-box;
}
.hamburger_menu .mean-nav {
background: transparent;
margin-top: 0;
overflow: hidden;
}
.hamburger_menu .mean-nav > ul {
display: block !important;
}
.hamburger_menu .mean-nav > ul > li:first-child > a {
border-top: none;
}
.hamburger_menu .mean-nav ul li {
position: relative;
}
.hamburger_menu .mean-nav ul li a {
color: var(--tj-color-theme-dark);
width: 100%;
padding: 16px 0;
border-top: none;
border-bottom: 1px solid var(--tj-color-border-1);
font-family: var(--tj-ff-body);
font-weight: var(--tj-fw-medium);
font-size: 16px;
line-height: 1;
letter-spacing: 1px;
transition: all 0.4s ease-in-out 0s;
text-transform: capitalize;
}
.hamburger_menu .mean-nav ul li a:hover {
color: var(--tj-color-theme-secondary);
}
.hamburger_menu .mean-nav ul li a.mean-expand {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0;
width: 30px;
height: 30px;
text-align: center;
position: absolute;
right: 0;
top: 10px;
transition: all 0.4s ease-in-out 0s;
}
.hamburger_menu .mean-nav ul li a.mean-expand:hover {
color: var(--tj-color-theme-dark);
}
.hamburger_menu .mean-nav ul li a.mean-expand i {
font-size: 5px;
display: inline-block;
}
.hamburger_menu .mean-nav ul li a.mean-expand.mean-clicked {
color: var(--tj-color-theme-primary);
}
.hamburger_menu .mean-nav ul li a.mean-expand.mean-clicked i {
transform: rotate(180deg);
}
.hamburger_menu .mean-nav ul li:has(.header__mega-menu) {
padding: 0;
}
.hamburger_menu .mean-nav ul li:has(.header__mega-menu) .row {
--bs-gutter-x: 0;
}
.hamburger_menu .mean-nav ul li:has(.header__mega-menu) .sub-menu li {
padding: 0;
}
.hamburger_menu .mean-nav ul li .header__mega-menu {
width: 100%;
padding: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hamburger_menu .mean-nav ul li .header__mega-menu {
padding: 0;
}
}
.hamburger_menu .mean-nav ul li .header__mega-menu > ul {
padding: 20px 0 15px;
display: grid;
gap: 15px;
}
.hamburger_menu .mean-nav ul li .header__mega-menu > ul li a {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
background: var(--tj-color-theme-bg1);
padding: 20px;
border-radius: 12px;
border: 0;
}
.hamburger_menu .mean-nav ul li .header__mega-menu > ul li a span {
border-radius: 8px;
overflow: hidden;
}
.hamburger_menu .mean-nav ul li .header__mega-menu > ul li a:hover img {
transform: scale(1.1);
}
.hamburger_menu .mean-nav ul li .sub-menu li {
padding-left: 25px;
position: relative;
}
.hamburger_menu .mean-nav ul li .sub-menu li a {
width: 100%;
padding: 18px 0;
text-transform: capitalize;
}
.hamburger_menu .mean-nav ul li .sub-menu li a.mean-expand {
padding: 0;
width: 30px;
}
.hamburger_menu .mean-nav ul li.dropdown-opened > a {
color: var(--tj-color-theme-primary);
}
.tj-offcanvas-area .hamburger_menu .mean-nav ul li a {
color: var(--tj-color-grey-1);
font-size: 72px;
border-bottom: none;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.tj-offcanvas-area .hamburger_menu .mean-nav ul li a {
font-size: 40px;
}
}
.tj-offcanvas-area .hamburger_menu .mean-nav ul li .sub-menu li {
padding-left: 0;
}
.tj-offcanvas-area .hamburger_menu .mean-nav ul li .sub-menu li a {
font-size: 22px;
padding: 10px 0;
}
.tj-offcanvas-area .hamburger_menu .mean-nav ul li.dropdown-opened > a {
color: var(--tj-color-theme-dark);
}
.hamburger-title {
color: var(--tj-color-theme-dark);
font-size: 24px;
margin-bottom: 16px;
position: relative;
z-index: 1;
}
.hamburger-infos {
margin-bottom: 50px;
}
.hamburger-infos .contact-item {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
margin-bottom: 10px;
}
.hamburger-infos .contact-item:last-child {
margin-bottom: 0;
}
.hamburger-infos .contact-item .contact-icon {
position: relative;
max-width: 40px;
height: 55px;
width: 100%;
background: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, var(--tj-color-theme-secondary) 100%);
z-index: 1;
}
.hamburger-infos .contact-item .contact-icon span {
position: absolute;
top: 60%;
left: 50%;
line-height: 1;
transform: translate(-50%, -50%);
color: var(--tj-color-theme-dark);
font-size: 18px;
z-index: 2;
}
.hamburger-infos .contact-item .contact-text .text {
color: var(--tj-color-body-text);
font-size: 18px;
}
.hamburger-infos .contact-item .contact-text .text a:hover {
color: var(--tj-color-theme-primary);
}
.hamburger-socials ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 15px;
}
.hamburger-socials ul li a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border-radius: 50%;
color: var(--tj-color-theme-dark);
background: transparent;
font-size: 14px;
line-height: 1;
border: 1.5px solid var(--tj-color-theme-dark);
}
.hamburger-socials ul li a i {
color: var(--tj-color-theme-dark);
}
.hamburger-socials ul li a:hover {
background-color: var(--tj-color-theme-secondary);
border-color: var(--tj-color-theme-secondary);
color: var(--tj-color-theme-dark);
}
.hamburger-socials ul li a:hover i {
color: var(--tj-color-theme-dark);
}
.hamburger_logo .mobile_logo {
display: inline-block;
max-width: 120px;
width: 100%;
}
.menu-bar button {
height: 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
transform-origin: center center;
transform: rotate(0deg);
cursor: pointer;
transition: transform 300ms ease;
}
.menu-bar button span {
height: 3px;
width: 35px;
display: block;
background: var(--tj-color-theme-dark);
cursor: pointer;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
margin-left: auto;
}
.menu-bar button span:nth-child(2) {
width: 40px;
transition-delay: 200ms;
}
.menu-bar button span:nth-child(3) {
width: 30px;
}
.menu-bar button span:nth-child(4) {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
display: block;
width: 3px;
height: 0;
transition: height 400ms;
}
.menu-bar.style-2 button span {
background: var(--tj-color-heading-primary);
}
.menu-bar.menu-bar-toggeled button {
transform: rotate(45deg);
transition-delay: 400ms;
}
.menu-bar.menu-bar-toggeled button span:nth-child(1) {
width: 0;
}
.menu-bar.menu-bar-toggeled button span:nth-child(3) {
width: 0;
}
.menu-bar.menu-bar-toggeled button span:nth-child(4) {
height: 40px;
transition: height 200ms ease;
transition-delay: 200ms;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.menu-bar {
margin-left: 0;
}
}
.body-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
z-index: 9999;
left: 0;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-out 0s;
backdrop-filter: blur(10px);
}
.body-overlay.opened {
opacity: 1;
visibility: visible;
}
/* !END: Hamburger CSS */
/**----------------------------------------
START: Mainmenu CSS
----------------------------------------*/
.mainmenu ul {
display: flex;
align-items: center;
gap: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.mainmenu ul {
gap: 30px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.mainmenu ul {
gap: 20px;
}
}
.mainmenu ul > li {
position: relative;
z-index: 1;
}
.mainmenu ul > li > a {
padding: 30px 0px;
font-size: var(--tj-fs-btn);
color: var(--tj-color-theme-dark);
display: inline-flex;
align-items: center;
font-weight: var(--tj-fw-medium);
gap: 5px;
}
.mainmenu ul > li > a:hover {
color: var(--tj-color-theme-primary);
}
.mainmenu ul > li.current-menu-ancestor > a {
color: var(--tj-color-theme-primary);
}
.mainmenu ul > li.menu-item-has-children > a::after, .mainmenu ul > li.has-dropdown > a::after {
font-size: 12px;
content: "\e931";
font-family: "ranko-icons";
opacity: 0.7;
color: var(--tj-color-theme-dark);
line-height: 1;
margin: 1px 0 0 1px;
}
.mainmenu ul > li > .sub-menu {
display: block;
position: absolute;
top: 100%;
left: 0;
width: 220px;
top: 100%;
left: 0;
z-index: 99;
text-align: left;
background-color: var(--tj-color-common-white);
transform: scaleY(0);
transform-origin: top;
box-shadow: 0px 33px 30.78px -1.92px rgba(57, 25, 82, 0.059607843);
opacity: 0;
visibility: hidden;
gap: 0;
padding: 10px 0;
pointer-events: none;
transition: 0.4s;
border-radius: 12px;
border-top-right-radius: 0;
border-top-left-radius: 0;
border: 1px solid var(--tj-color-border-1);
border-top: 0;
}
.mainmenu ul > li > .sub-menu > li {
display: block;
width: 100%;
}
.mainmenu ul > li > .sub-menu > li > a {
position: relative;
padding: 8px 20px;
display: block;
transform: translateX(0);
color: var(--tj-color-text-body);
}
.mainmenu ul > li > .sub-menu > li > a::before {
display: none;
}
.mainmenu ul > li > .sub-menu > li:last-child {
padding-bottom: 0;
}
.mainmenu ul > li > .sub-menu > li.menu-item-has-children > a::after, .mainmenu ul > li > .sub-menu > li.has-dropdown > a::after {
content: "\e931";
font-family: "ranko-icons";
position: absolute;
top: 35%;
right: 15px;
color: var(--tj-color-text-body);
}
.mainmenu ul > li > .sub-menu > li.current-menu-item > a, .mainmenu ul > li > .sub-menu > li:hover > a {
color: var(--tj-color-theme-primary);
transform: translateX(2px);
}
.mainmenu ul > li > .sub-menu > li.current-menu-item > a::before, .mainmenu ul > li > .sub-menu > li:hover > a::before {
opacity: 1;
visibility: visible;
width: 14px;
}
.mainmenu ul > li > .sub-menu > li.current-menu-item > a::after, .mainmenu ul > li > .sub-menu > li:hover > a::after {
color: var(--tj-color-theme-primary);
}
.mainmenu ul > li > .sub-menu > li > .sub-menu {
left: 100%;
top: 0;
border-top-right-radius: 12px;
}
.mainmenu ul > li.has-mega-menu {
position: static;
}
.mainmenu ul > li.has-mega-menu:hover .mega-menu {
transform: translateX(-50%) scaleY(1);
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.mainmenu ul > li.has-mega-menu:hover .mega-menu {
transform: translateX(0) scaleY(1);
}
}
.mainmenu ul > li .mega-menu {
width: 100%;
left: 50%;
transform: translateX(-50%) scaleY(0);
padding: 30px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.mainmenu ul > li .mega-menu {
width: auto;
padding: 20px;
left: 0;
right: 0;
transform: translateX(0) scaleY(0);
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.mainmenu ul > li .mega-menu {
padding: 20px;
}
}
.mainmenu ul > li .mega-menu .demo-page {
row-gap: 30px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.mainmenu ul > li .mega-menu .demo-page {
row-gap: 20px;
}
}
.mainmenu ul > li .mega-menu .demo-page .demo-page-item .demo {
display: flex;
flex-direction: column;
align-items: center;
background: transparent;
padding: 15px;
font-size: var(--tj-fs-btn);
color: var(--tj-color-theme-dark);
font-weight: var(--tj-fw-medium);
}
.mainmenu ul > li .mega-menu .demo-page .demo-page-item .demo span {
overflow: hidden;
}
.mainmenu ul > li .mega-menu .demo-page .demo-page-item .demo:hover {
color: var(--tj-color-theme-primary);
}
.mainmenu ul > li .mega-menu .demo-page .demo-page-item .demo:hover img {
transform: scale(1.1);
}
.mainmenu ul > li .mega-menu .demo-page .demo-page-item .demo.comming-soon {
pointer-events: none;
}
.mainmenu ul > li.current-menu-ancestor > a {
color: var(--tj-color-theme-primary);
}
.mainmenu ul > li.current-menu-ancestor > a::before {
opacity: 1;
visibility: visible;
width: 14px;
}
.mainmenu ul > li.current-menu-ancestor > a::after {
color: var(--tj-color-theme-primary);
}
.mainmenu ul > li:hover > a {
color: var(--tj-color-theme-primary);
}
.mainmenu ul > li:hover > a::after {
transform: rotate(-180deg);
color: var(--tj-color-theme-primary);
opacity: 1;
}
.mainmenu ul > li:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: scaleY(1);
transition: all 0.5s ease;
pointer-events: inherit;
}
.header__wrapper:has(.has-mega-menu) {
position: relative;
}
.hamburger_menu .mean-nav ul li .sub-menu.mega-menu li {
padding-left: 0;
}
.hamburger_menu .mean-nav ul li .sub-menu.mega-menu .demo-page {
padding-top: 20px;
padding-bottom: 20px;
flex-direction: column;
gap: 15px;
border-bottom: 1px solid var(--tj-color-border-1);
}
.hamburger_menu .mean-nav ul li .sub-menu.mega-menu .demo-page .demo-page-item .demo {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
background: transparent;
padding: 15px;
border-radius: 10px;
border: 1px solid var(--tj-color-border-1);
}
.hamburger_menu .mean-nav ul li .sub-menu.mega-menu .demo-page .demo-page-item .demo span {
border-radius: 8px;
overflow: hidden;
}
.hamburger_menu .mean-nav ul li .sub-menu.mega-menu .demo-page .demo-page-item .demo:hover img {
transform: scale(1.1);
}
.hamburger_menu .mean-nav ul li .sub-menu.mega-menu .demo-page .demo-page-item .demo.comming-soon {
pointer-events: none;
}
.mainmenu ul > li .mega-menu {
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
border-radius: 14px;
border: 0;
}
.mainmenu ul > li .mega-menu .demo-page .demo-page-item .demo {
gap: 15px;
padding: 15px;
border-radius: 10px;
background: transparent;
border: 1px solid var(--tj-color-border-1);
}
.mainmenu ul > li .mega-menu .demo-page .demo-page-item .demo span {
border-radius: 8px;
}
/* !END: Mainmenu CSS */
/**----------------------------------------
START: Footer CSS
----------------------------------------*/
.footer__inner {
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-bottom: 30px;
overflow: hidden;
padding-top: 100px;
border-radius: 16px;
position: relative;
z-index: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.footer__inner {
padding: 0 30px;
padding-top: 80px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.footer__inner {
padding: 0 20px;
padding-top: 60px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__inner {
padding: 0 5px;
padding-top: 50px;
margin-bottom: 15px;
}
}
.footer__inner::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--tj-color-theme-bg1);
border-radius: 16px;
opacity: 0.95;
z-index: -1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.footer__inner::after {
border-radius: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.footer__inner::after {
border-radius: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__inner::after {
border-radius: 16px;
}
}
.footer__title {
color: var(--tj-color-heading-primary);
margin-bottom: 24px;
margin-top: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__title {
margin-bottom: 20px;
margin-top: 0px;
}
}
.footer__widget.widget_nav_menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.footer__widget.widget_nav_menu ul li {
color: var(--tj-color-text-body);
margin-bottom: 14px;
}
.footer__widget.widget_nav_menu ul li:last-child {
margin-bottom: 0;
}
.footer__widget.widget_nav_menu ul li a {
color: var(--tj-color-text-body);
padding-left: 0;
}
.footer__widget.widget_nav_menu ul li a:hover {
color: var(--tj-color-theme-primary);
padding-left: 4px;
}
.footer__widget.footer__info .footer__info__address {
max-width: 211px;
margin-bottom: 18px;
}
@media (max-width: 575px) {
.footer__widget.footer__info .footer__info__address {
margin-bottom: 13px;
}
}
.footer__widget.footer__info .footer__info__list ul {
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 20px;
}
@media (max-width: 575px) {
.footer__widget.footer__info .footer__info__list ul {
margin-bottom: 15px;
}
}
.footer__widget.footer__info .footer__info__list ul li {
position: relative;
margin-bottom: 0;
}
.footer__widget.footer__info .footer__info__list ul li .link {
color: var(--tj-color-heading-primary);
font-size: 18px;
font-weight: var(--tj-fw-bold);
font-family: var(--tj-ff-heading);
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__widget.footer__info .footer__info__list ul li .link {
font-size: 16px;
}
}
.footer__widget.footer__info .footer__info__list ul li:hover .link {
color: var(--tj-color-theme-primary);
}
.footer__widget.footer__info .footer__info__list ul span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
line-height: 1;
font-size: 10px;
background: transparent;
color: var(--tj-color-theme-primary);
border: 1px solid var(--tj-color-theme-primary);
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
}
.footer__widget.footer__info .footer__info__active-hours ul li {
display: flex;
gap: 10px;
align-items: center;
font-weight: var(--tj-fw-sbold);
font-family: var(--tj-ff-heading);
}
.footer__widget.footer__info .footer__info__active-hours ul li i {
font-size: 19px;
color: var(--tj-color-theme-primary);
}
.footer__widget--company {
padding-left: 23px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.footer__widget--company {
padding-left: 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__widget--company {
padding-left: 0px;
}
}
.footer__widget--services {
margin-left: -53px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__widget--services {
margin-left: 0;
padding-left: 0px;
}
}
.footer__widget__subscription {
padding: 24px 30px 30px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 16px;
position: relative;
z-index: 0;
text-align: center;
flex-grow: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__widget__subscription {
padding: 20px;
}
}
.footer__widget__subscription::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--tj-color-theme-secondary);
opacity: 0.9;
border-radius: 16px;
z-index: -1;
}
.footer__widget__subscription__pattern {
position: absolute;
top: 20px;
right: 20px;
z-index: 1;
}
.footer__widget__subscription__pattern img {
width: 93px;
}
.footer__widget__subscription__title {
font-size: 32px;
color: var(--tj-color-common-white);
max-width: 330px;
margin-bottom: 24px;
text-align: left;
position: relative;
z-index: 2;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.footer__widget__subscription__title {
font-size: 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__widget__subscription__title {
font-size: 24px;
margin-bottom: 20px;
}
}
.footer__widget__subscription .tj-input {
padding-top: 14px;
padding-bottom: 14px;
border: 1px solid var(--tj-color-border-1);
}
.footer__widget__subscription .tj-input:focus {
border-color: var(--tj-color-theme-primary);
}
.footer__widget__subscription .tj-input__wrapper {
margin-bottom: 15px;
background: transparent;
border: 0;
padding-right: 0;
}
.footer__widget__subscription__submit {
margin-bottom: 15px;
}
.footer__widget__subscription__submit .tj-btn:hover {
border-color: var(--tj-color-common-white);
color: var(--tj-color-common-white);
}
.footer__widget__subscription__submit .tj-btn:hover i {
color: var(--tj-color-common-white);
}
.footer__widget__subscription__security {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: var(--tj-color-common-white2);
line-height: 1;
margin-bottom: 0;
}
.footer__widget__subscription__security i {
font-size: 20px;
color: var(--tj-color-theme-primary);
}
.footer__widget__subscription__security span {
margin-top: 1px;
}
.footer__widget__subscription .wpcf7 form .wpcf7-response-output {
margin-top: 10px;
color: var(--tj-color-common-white2);
}
.footer__widget__subscription .wpcf7-not-valid-tip {
text-align: start;
}
.footer__contact {
display: flex;
gap: 30px;
align-items: stretch;
justify-content: flex-end;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__contact {
justify-content: flex-start;
flex-wrap: wrap;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__contact {
gap: 20px;
}
}
@media (max-width: 575px) {
.footer__contact__single {
width: 100%;
}
}
.footer__contact__single a {
display: flex;
padding: 12.5px 30px;
border: 2px solid var(--tj-color-border-9);
background: transparent;
border-radius: 10px;
gap: 10px;
align-items: center;
height: 100%;
min-height: 79px;
color: var(--tj-color-common-white);
font-weight: var(--tj-fw-medium);
font-family: var(--tj-ff-heading);
letter-spacing: -0.02em;
white-space: nowrap;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__contact__single a {
padding: 12.5px 24px;
}
}
@media (max-width: 575px) {
.footer__contact__single a {
justify-content: center;
}
}
.footer__contact__single a i {
font-size: 26px;
}
.footer__contact__single a:hover {
background: var(--tj-color-border-9);
}
.footer__contact__ratings {
display: inline-flex;
gap: 22px;
padding: 12.5px 30px;
border: 2px solid var(--tj-color-border-9);
border-radius: 10px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__contact__ratings {
padding: 12.5px 24px;
}
}
@media (max-width: 575px) {
.footer__contact__ratings {
width: 100%;
justify-content: center;
}
}
.footer__contact__ratings__single--clutch img {
margin-bottom: 4px;
}
.footer__contact__ratings .testimonials__rating {
margin-bottom: 0;
}
.footer__contact__ratings .star-ratings {
font-size: 18px;
}
.footer__contact__ratings .star-ratings .fill-ratings {
color: var(--tj-color-common-white);
}
.footer__contact__ratings .star-ratings .empty-ratings {
color: var(--tj-color-common-white);
}
.footer__contact__ratings__divider {
flex-shrink: 0;
width: 2px;
height: 50px;
background: var(--tj-color-border-9);
}
.footer__copyright__wrapper {
display: flex;
flex-wrap: wrap;
column-gap: 12px;
row-gap: 12px;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--tj-color-common-black-2);
border-bottom: 1px solid var(--tj-color-common-black-2);
padding-top: 24px;
padding-bottom: 24px;
margin-top: 50px;
border-top: 1px solid var(--tj-color-border-1);
gap: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.footer__copyright__wrapper {
margin-top: 10px;
row-gap: 15px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__copyright__wrapper {
margin-top: 0px;
justify-content: center;
flex-direction: column;
row-gap: 15px;
padding-bottom: 8px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.footer__copyright {
padding: 20px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__copyright {
padding: 10px 0 20px;
}
}
.footer__copyright__text {
color: var(--tj-color-text-body);
}
.footer__copyright__text a {
font-weight: 500;
color: var(--tj-color-theme-dark);
}
.footer__copyright__text a:hover {
color: var(--tj-color-theme-primary);
}
.footer__copyright__menu ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 24px;
}
.footer__copyright__menu ul li {
position: relative;
color: var(--tj-color-text-body);
line-height: 1;
z-index: 1;
}
.footer__copyright__menu ul li::before {
position: absolute;
content: "";
width: 1px;
height: 100%;
right: 0;
top: 0;
background: var(--tj-color-common-black-2);
}
.footer__copyright__menu ul li:last-child {
padding-right: 0;
margin-right: 0;
}
.footer__copyright__menu ul li:last-child::before {
display: none;
}
.footer__copyright__menu ul li > a {
color: var(--tj-color-text-body);
}
.footer__copyright__menu ul li > a:hover {
color: var(--tj-color-theme-primary);
}
.footer__copyright__menu ul li > a {
position: relative;
}
.footer__copyright__menu ul li > a::before {
content: "";
width: 4px;
height: 4px;
background-color: var(--tj-color-text-body);
border-radius: 100%;
position: absolute;
top: 50%;
left: -14px;
transform: translateY(-50%);
}
.footer__copyright__menu ul li > a::before:hover::before {
background: var(--tj-color-theme-primary);
}
.footer__copyright__menu ul li:first-child a::before {
display: none;
}
.footer__top__title {
font-size: 48px;
color: var(--tj-color-common-white);
line-height: 1.208;
margin: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__top__title {
font-size: 40px;
}
}
@media (max-width: 575px) {
.footer__top__title {
font-size: 26px;
}
}
.footer__top__title__batch {
padding: 6px 10px;
background-color: var(--tj-color-theme-supportive);
color: var(--tj-color-heading-primary);
position: relative;
line-height: 1;
border-radius: 9px;
}
.footer__top__title__batch img {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
@media (max-width: 575px) {
.footer__top__title__batch img {
width: 30px;
}
}
.footer__top .tj-input__wrapper {
width: 100%;
position: relative;
display: block;
padding: 0;
background: transparent;
border: 0;
}
.footer__top .tj-input__wrapper span,
.footer__top .tj-input__wrapper .tj-input {
width: 100%;
}
.footer__top .tj-input__wrapper .tj-input {
min-height: 60px;
padding-inline-end: 180px;
border: 1px solid var(--tj-color-border-1);
}
.footer__top .tj-input__wrapper .tj-input:focus {
border-color: var(--tj-color-theme-primary);
}
@media (max-width: 575px) {
.footer__top .tj-input__wrapper .tj-input {
padding-inline-end: 70px;
}
}
.footer__top .tj-input__wrapper .tj-btn {
padding: 14px 15px;
height: auto;
position: absolute;
top: 5px;
right: 5px;
}
.footer__top .tj-input__wrapper .tj-btn i {
font-size: 18px;
}
.footer__top .wpcf7 form .wpcf7-response-output {
color: var(--tj-color-common-white2);
}
.footer__top__list {
display: flex;
gap: 2px 30px;
align-items: center;
}
@media (max-width: 575px) {
.footer__top__list {
flex-direction: column;
align-items: flex-start;
}
}
.footer__top__list li {
display: flex;
gap: 8px;
align-items: center;
color: var(--tj-color-common-white);
}
.footer--2 .footer__inner {
padding-top: 240px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.footer--2 .footer__inner {
padding-top: 230px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--2 .footer__inner {
padding-top: 210px;
}
}
.footer--2 .footer__logo {
margin-bottom: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--2 .footer__logo {
margin-bottom: 16px;
}
}
.footer--2 .footer__title {
margin-top: 0;
}
.footer--2 .footer__desc {
margin-bottom: 40px;
max-width: 308px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--2 .footer__desc {
margin-bottom: 20px;
}
}
.footer--3 .footer__inner::after {
background-color: var(--tj-color-theme-secondary);
}
.footer--3 .footer__inner__pattern img {
position: absolute;
top: 80px;
left: 60px;
width: 134px;
z-index: 1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.footer--3 .footer__inner__pattern img {
top: 40px;
left: 40px;
width: 100px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--3 .footer__inner__pattern img {
top: 20px;
left: 20px;
width: 60px;
}
}
.footer--3 .footer__inner__pattern img:last-child {
top: auto;
left: auto;
bottom: 60px;
right: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.footer--3 .footer__inner__pattern img:last-child {
width: 50px;
bottom: 20px;
right: 35px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--3 .footer__inner__pattern img:last-child {
width: 40px;
bottom: 20px;
right: 35px;
}
}
.footer--3 .footer__top__inner {
margin-bottom: 0;
padding: 0;
outline: none;
margin-bottom: 80px;
background: transparent;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.footer--3 .footer__top__inner {
padding: 0;
border-radius: 0;
margin-bottom: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--3 .footer__top__inner {
padding: 0;
border-radius: 0;
margin: 0;
margin-bottom: 60px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--3 .footer__top__inner {
padding: 0;
border-radius: 0;
margin: 0;
margin-bottom: 60px;
}
}
.footer--3 .footer__top__inner:after {
display: none;
}
.footer--3 .footer__top__title {
font-size: 70px;
color: var(--tj-color-common-white);
line-height: 1.11;
font-weight: var(--tj-fw-sbold);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.footer--3 .footer__top__title {
font-size: 62px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.footer--3 .footer__top__title {
font-size: 58px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.footer--3 .footer__top__title {
font-size: 50px;
}
}
@media (max-width: 575px) {
.footer--3 .footer__top__title {
font-size: 42px;
}
}
.footer--3 .footer__top__list {
width: 100%;
max-width: 557px;
margin-left: auto;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.footer--3 .footer__top__list {
width: 100%;
margin-left: 0;
}
}
@media (max-width: 575px) {
.footer--3 .footer__top__list {
width: 100%;
margin-left: 0;
}
}
.footer--3 .footer__copyright__wrapper {
border-color: var(--tj-color-border-4);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--3 .footer__copyright__wrapper {
justify-content: center;
}
}
.footer--3 .footer__copyright__text p {
color: var(--tj-color-common-white);
}
.footer--3 .footer__copyright__text p a {
color: var(--tj-color-common-white);
}
.footer--3 .footer__copyright__text p a:hover {
color: var(--tj-color-theme-primary);
}
.footer--3 .footer__copyright__menu ul {
gap: 10px 34px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.footer--3 .footer__copyright__menu ul {
gap: 10px 28px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--3 .footer__copyright__menu ul {
gap: 10px 24px;
}
}
.footer--3 .footer__copyright__menu ul li a {
color: var(--tj-color-common-white);
}
.footer--3 .footer__copyright__menu ul li a:hover {
color: var(--tj-color-theme-primary);
}
.footer--3 .footer__copyright__menu ul li a::before {
background-color: var(--tj-color-common-white);
left: -19px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.footer--3 .footer__copyright__menu ul li a::before {
left: -16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--3 .footer__copyright__menu ul li a::before {
left: -14px;
}
}
.footer--3 .footer__copyright__menu ul li:first-child a::before {
display: none;
}
.footer--3 .footer__copyright .tj-socials ul li a i {
color: var(--tj-color-common-white);
}
.footer--3 .footer__copyright .tj-socials ul li a:hover i {
color: var(--tj-color-theme-primary);
}
.footer--3 .hero__subscription {
display: flex;
justify-content: flex-end;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.footer--3 .hero__subscription {
justify-content: flex-start;
}
}
/* defaul footer css */
.tj-footer-section {
background-color: var(--tj-color-theme-bg1);
border-radius: 16px;
margin: 0 50px;
margin-bottom: 30px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-footer-section {
margin: 0 15px;
margin-bottom: 15px;
}
}
.tj-footer-section .tj-widget-area {
padding-top: 100px;
padding-bottom: 90px;
border-bottom: 1px solid var(--tj-color-border-1);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.tj-footer-section .tj-widget-area {
padding-top: 80px;
padding-bottom: 70px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.tj-footer-section .tj-widget-area {
padding-top: 60px;
padding-bottom: 50px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-footer-section .tj-widget-area {
padding-top: 50px;
padding-bottom: 50px;
}
}
.tj-footer-section .copyright-content-area {
padding: 24px 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-footer-section .copyright-content-area {
padding: 20px 0;
}
}
.tj-footer-section .copyright-content-area p {
margin: 0;
}
.tj-footer-section .copyright-content-area p a {
color: var(--tj-color-theme-dark);
}
.tj-footer-section .copyright-content-area p a:hover {
color: var(--tj-color-theme-primary);
}
.footer-contact-info {
max-width: 240px;
width: 100%;
}
.footer-contact-info .contact-item {
margin-bottom: 18px;
}
.footer-contact-info .contact-item:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer-contact-info .contact-item {
margin-bottom: 10px;
}
}
.footer-contact-info .contact-item span {
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-sbold);
color: var(--tj-color-text-body);
display: inline-flex;
align-items: center;
gap: 8px;
}
.footer-contact-info .contact-item span i {
font-size: 18px;
color: var(--tj-color-theme-primary);
display: inline-flex;
line-height: 1;
}
.footer-contact-info .contact-item a {
color: var(--tj-color-heading-primary);
font-size: 18px;
font-weight: var(--tj-fw-bold);
font-family: var(--tj-ff-heading);
display: block;
}
.footer-contact-info .contact-item a:last-child {
margin-bottom: 0;
}
.footer-contact-info .contact-item a:hover {
color: var(--tj-color-theme-primary);
}
.footer-widget .title {
margin-bottom: 24px;
}
.editor_text .footer__copyright__text a {
font-weight: 500;
color: var(--tj-color-theme-dark);
}
.editor_text .footer__copyright__text a:focus, .editor_text .footer__copyright__text a:hover {
color: var(--tj-color-theme-primary);
}
/* !END: Footer CSS */
/**----------------------------------------
START: Back to top CSS
----------------------------------------*/
.back-to-top-wrapper {
position: fixed;
right: 0;
bottom: 0;
display: block;
border-radius: 50%;
z-index: 99;
opacity: 0;
visibility: hidden;
transition: 0.6s;
cursor: pointer;
}
.back-to-top-wrapper.back-to-top-btn-show {
visibility: visible;
opacity: 1;
bottom: 68px;
right: 88px;
}
@media only screen and (min-width: 1601px) and (max-width: 1780px), only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.back-to-top-wrapper.back-to-top-btn-show {
right: 35px;
bottom: 50px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.back-to-top-wrapper.back-to-top-btn-show {
right: 35px;
bottom: 110px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.back-to-top-wrapper.back-to-top-btn-show {
right: 40px;
bottom: 125px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.back-to-top-wrapper.back-to-top-btn-show {
right: 40px;
bottom: 95px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.back-to-top-wrapper.back-to-top-btn-show {
bottom: 30px;
right: 30px;
}
}
@media (max-width: 575px) {
.back-to-top-wrapper.back-to-top-btn-show {
bottom: 30px;
right: 30px;
}
}
.back-to-top-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
line-height: 1;
font-size: 18px;
background: var(--tj-color-theme-primary);
color: var(--tj-color-heading-primary);
border-radius: 50%;
animation: pulse1 1.5s infinite;
-webkit-transition: all, 0.3s;
-moz-transition: all, 0.3s;
-ms-transition: all, 0.3s;
-o-transition: all, 0.3s;
transition: all, 0.3s;
}
.back-to-top-btn i {
display: inline-flex;
color: var(--tj-color-common-white);
line-height: 1;
}
.back-to-top-btn:hover {
-webkit-transform: translateY(-4px);
-moz-transform: translateY(-4px);
-ms-transform: translateY(-4px);
-o-transform: translateY(-4px);
transform: translateY(-4px);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.back-to-top-btn {
width: 45px;
height: 45px;
font-size: 16px;
}
}
/* !END: Back to top CSS */
/**----------------------------------------
START: Preloader CSS
----------------------------------------*/
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background-color: var(--tj-color-common-white);
display: flex;
align-items: center;
justify-content: center;
}
.preloader .loading-container,
.preloader .loading {
height: 100px;
position: relative;
width: 100px;
border-radius: 100%;
}
.preloader .loading {
border: 1px solid transparent;
border-color: transparent var(--tj-color-theme-secondary) transparent var(--tj-color-theme-secondary);
animation: rotate-loading 1.5s linear 0s infinite normal;
transform-origin: 50% 50%;
}
.loading-container {
margin: 40px auto;
}
.loading-container:hover .loading,
.loading-container .loading {
transition: all 0.5s ease-in-out;
}
#loading-icon {
position: absolute;
top: 50%;
left: 50%;
max-width: 66px;
transform: translate(-50%, -50%);
}
@keyframes rotate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* !END: Preloader CSS */
/**----------------------------------------
START: Rating CSS
----------------------------------------*/
.star-ratings {
unicode-bidi: bidi-override;
font-size: 24px;
letter-spacing: 1px;
line-height: 1;
position: relative;
margin: 0;
padding: 0;
}
.star-ratings .fill-ratings {
color: var(--tj-color-theme-primary);
padding: 0;
position: absolute;
z-index: 1;
display: block;
top: 0;
left: 0;
overflow: hidden;
}
.star-ratings .fill-ratings span {
display: inline-block;
}
.star-ratings .empty-ratings {
padding: 0;
display: block;
z-index: 0;
color: var(--tj-color-theme-primary);
opacity: 0.5;
}
/* !END: Rating CSS */
/**----------------------------------------
START: Shape CSS
----------------------------------------*/
.tj-u-shape {
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
width: 30px;
height: 60px;
background-color: var(--tj-color-theme-bg1);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-u-shape {
width: 20px;
height: 50px;
}
}
.tj-u-shape::after, .tj-u-shape::before {
content: "";
position: absolute;
left: 0;
top: -58%;
width: 100%;
height: 100%;
z-index: 1;
background: var(--tj-color-common-white);
border-radius: 30px;
}
.tj-u-shape::after {
top: 58%;
}
/* !END: Shape CSS */
/**----------------------------------------
START: Text Marquee CSS
----------------------------------------*/
.text-marquee-slider {
padding-bottom: 0;
}
.text-marquee-slider__wrap {
width: 100%;
height: 100%;
overflow: hidden;
transform: rotate(90deg);
z-index: -1;
}
.text-marquee-slider__wrapper {
transition-timing-function: linear;
}
.text-marquee-slider__item {
display: flex;
gap: 20px;
width: auto;
}
.text-marquee-slider__title, .text-marquee-slider__dot {
font-size: 130px;
font-family: var(--tj-ff-heading);
letter-spacing: -0.03em;
white-space: nowrap;
color: var(--tj-color-common-white);
opacity: 0.7;
line-height: 1.3;
padding: 0;
margin: 0;
}
.style-2 .text-marquee-slider__title,
.style-2 .text-marquee-slider__dot {
opacity: 0.1;
}
.text-marquee.elementor-widget.elementor-widget-tj-marquee {
height: 100%;
}
/* !END: Text Marquee CSS */
/**----------------------------------------
START: Client Thumbs CSS
----------------------------------------*/
.client__thumbs {
border: 1px solid var(--tj-color-border-1);
border-radius: 10px;
box-shadow: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843);
background-color: var(--tj-color-common-white);
padding: 20px 18px 10px;
}
.client__thumbs__inner {
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 12px;
}
.client__thumbs__inner li {
position: relative;
max-width: 52px;
width: 100%;
background-color: var(--tj-color-common-white);
border-radius: 50%;
margin-inline-start: -18px;
z-index: 2;
}
.client__thumbs__inner li:first-child {
margin-inline-start: 0;
}
.client__thumbs__inner li img {
height: 52px;
object-fit: cover;
border-radius: 50%;
padding: 2px;
}
.client__thumbs__inner li.plus {
background-color: var(--tj-color-common-white);
padding: 2px;
width: 100%;
}
.client__thumbs__inner li.plus h6 {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
font-size: 14px;
line-height: 1;
font-weight: var(--tj-fw-bold);
color: var(--tj-color-common-white);
background: var(--tj-color-theme-dark);
border-radius: 50%;
margin-bottom: 0;
}
.client__thumbs__title {
max-width: 162px;
padding: 0 2px;
}
/* !END: Client Thumbs CSS */
/**----------------------------------------
START: Pagintions CSS
----------------------------------------*/
.tj-pagination {
margin-top: 30px;
justify-content: start;
}
.tj-pagination.center {
justify-content: center;
}
.tj-pagination ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.tj-pagination ul li .page-numbers {
display: inline-block;
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
border: 1px solid var(--tj-color-border-1);
font-weight: var(--tj-fw-sbold);
color: var(--tj-color-heading-primary);
border-radius: 7.2px;
}
.tj-pagination ul li .page-numbers i {
line-height: 1;
color: var(--tj-color-heading-primary);
}
.tj-pagination ul li .page-numbers:hover {
background-color: var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
border-color: var(--tj-color-theme-primary);
}
.tj-pagination ul li .page-numbers:hover i {
color: var(--tj-color-common-white);
}
.tj-pagination ul li .page-numbers.dots {
line-height: 42px;
}
.tj-pagination ul li .page-numbers.current {
background-color: var(--tj-color-theme-dark);
color: var(--tj-color-common-white);
border-color: var(--tj-color-common-black);
}
.tj-pagination ul li .page-numbers.current i {
color: var(--tj-color-common-white);
}
/* !END: Pagintions CSS */
.page-header {
width: 100%;
background: var(--tj-color-theme-bg1);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
position: relative;
z-index: 0;
}
.page-header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-image: linear-gradient(180deg, rgba(5, 76, 224, 0.24) 0%, rgba(255, 255, 255, 0) 91.26%);
}
.page-header__inner {
position: relative;
z-index: 3;
text-align: center;
padding-top: 240px;
padding-bottom: 165px;
}
.page-header__inner.wp-spacer {
padding-top: 105px;
padding-bottom: 120px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.page-header__inner.wp-spacer {
padding-top: 85px;
padding-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.page-header__inner.wp-spacer {
padding-top: 65px;
padding-bottom: 80px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.page-header__inner.wp-spacer {
padding-top: 45px;
padding-bottom: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.page-header__inner {
padding-top: 150px;
padding-bottom: 95px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.page-header__inner {
padding-top: 120px;
padding-bottom: 65px;
}
}
.page-header__title {
margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.page-header__title {
font-size: 48px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.page-header__title {
font-size: 36px;
}
}
.page-header__nav {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 25px;
color: var(--tj-color-theme-dark3);
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.page-header__nav {
margin-top: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.page-header__nav {
margin-top: 16px;
}
}
.page-header__nav > span a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--tj-color-theme-dark3);
}
.page-header__nav > span a:hover {
color: var(--tj-color-theme-secondary);
}
.page-header__nav > span a span {
color: inherit;
}
.page-header__nav > span span {
color: var(--tj-color-theme-secondary);
}
.page-header__nav > span:first-child a::before {
content: "\f015";
font-family: var(--tj-ff-fontawesome);
font-size: 16px;
flex-shrink: 0;
line-height: 1;
margin-bottom: 1px;
}
.page-header__nav i {
font-size: 12px;
line-height: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.page-header__icons {
display: none;
}
}
.page-header__icons img {
position: absolute;
top: 30%;
left: 20%;
z-index: 2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.page-header__icons img {
top: 25%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.page-header__icons img {
max-width: 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.page-header__icons img {
max-width: 30px;
}
}
.page-header__icons img:nth-last-child(1) {
top: 85%;
left: 71%;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.page-header__icons img:nth-last-child(1) {
max-width: 25px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.page-header__icons img:nth-last-child(1) {
max-width: 25px;
}
}
.page-header__icons img:nth-last-child(2) {
top: 28%;
left: 82%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.page-header__icons img:nth-last-child(2) {
top: 20%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.page-header__icons img:nth-last-child(2) {
max-width: 40px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.page-header__icons img:nth-last-child(2) {
max-width: 40px;
}
}
.page-header__icons img:nth-last-child(3) {
top: 70%;
left: 5%;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.page-header__icons img:nth-last-child(3) {
max-width: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.page-header__icons img:nth-last-child(3) {
max-width: 10px;
}
}
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.hero__inner {
min-height: 900px;
padding-top: 86px;
position: relative;
z-index: 0;
overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero__inner {
min-height: 815px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero__inner {
min-height: 668px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__inner {
min-height: auto;
padding-top: 105px;
}
}
.hero .hero__title div {
display: inline-block !important;
}
.hero .hero__title div img {
margin-left: 5px;
}
.hero--1 .section-heading__sub-title {
background-color: var(--tj-color-common-white);
}
.hero__bg {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.hero__bg {
max-width: 61%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__bg {
max-width: 84%;
}
}
.hero__bg--right {
top: auto;
left: auto;
right: 0;
bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.hero__bg--right {
max-width: 95%;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.hero__bg--right {
max-width: 92%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__bg--right {
max-width: 53%;
left: 50%;
transform: translateX(-50%);
}
}
.hero__title {
margin-bottom: 20px;
font-size: 70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero__title {
font-size: 48px;
margin-bottom: 15px;
max-width: 398px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hero__title {
font-size: 60px;
margin-bottom: 15px;
max-width: 480px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero__title {
font-size: 56px;
margin-bottom: 15px;
max-width: 464px;
}
}
@media (max-width: 575px) {
.hero__title {
font-size: 40px;
margin-bottom: 12px;
}
}
.hero__title span {
color: var(--tj-color-theme-secondary);
}
.hero__title .image img {
width: 65px;
height: 65px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero__title .image img {
width: 50px;
height: 50px;
}
}
@media (max-width: 575px) {
.hero__title .image img {
width: 40px;
height: 40px;
}
}
.hero__desc {
font-size: 18px;
margin-bottom: 40px;
max-width: 500px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.hero__desc {
margin-bottom: 30px;
max-width: 398px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__desc {
max-width: 350px;
margin-bottom: 18px;
}
}
.hero__subscription {
margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__subscription {
margin-bottom: 16px;
}
}
.hero__action {
font-weight: var(--tj-fw-medium);
display: inline-flex;
gap: 6px;
align-items: center;
margin-bottom: 0;
}
.hero__action i {
color: var(--tj-color-theme-primary);
font-size: 23px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__action i {
font-size: 18px;
}
}
.hero__right {
min-height: 815px;
position: relative;
z-index: -1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero__right {
min-height: 729px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero__right {
min-height: 582px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__right {
min-height: auto;
margin-top: -15px;
}
}
.hero__banner-img {
position: absolute;
bottom: 0;
right: -14%;
z-index: 1;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.hero__banner-img {
right: 0%;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.hero__banner-img {
right: -2%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__banner-img {
position: static;
text-align: center;
}
}
.hero__banner-img.main-image img {
max-width: 876px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero__banner-img.main-image img {
max-width: 782px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero__banner-img.main-image img {
max-width: 654px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero__banner-img.main-image img {
max-width: 80%;
}
}
@media (max-width: 575px) {
.hero__banner-img.main-image img {
max-width: 100%;
}
}
.hero__banner-img > img {
max-width: 876px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero__banner-img > img {
max-width: 782px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero__banner-img > img {
max-width: 654px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero__banner-img > img {
max-width: 80%;
}
}
@media (max-width: 575px) {
.hero__banner-img > img {
max-width: 100%;
}
}
.hero__pulse-img {
position: absolute;
top: 30%;
left: 31%;
animation: pulseAnimation 2s ease-out 0.5s;
z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero__pulse-img {
left: 30.5%;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__pulse-img {
top: 30%;
left: 31%;
max-width: 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hero__pulse-img {
top: 30%;
left: 34.5%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero__pulse-img {
top: 27%;
left: 33.5%;
}
}
@media (max-width: 575px) {
.hero__pulse-img {
top: 26%;
left: 28.5%;
}
}
.hero__charts__img__inner {
position: absolute;
top: 8%;
right: -10%;
z-index: 1;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.hero__charts__img__inner {
right: 5%;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.hero__charts__img__inner {
right: 0%;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__charts__img__inner {
max-width: 150px;
top: 5%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__charts__img__inner {
right: 9%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__charts__img__inner {
right: 1%;
max-width: 100px;
}
}
.hero__charts__img .hero__charts__img__inner img {
width: 100%;
border: 1px solid var(--tj-color-border-1);
border-radius: var(--tj-br-xl);
box-shadow: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843);
}
.hero__charts__img img {
width: 100%;
border: 1px solid var(--tj-color-border-1);
border-radius: var(--tj-br-xl);
box-shadow: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843);
}
.hero__charts__img--2 .hero__charts__img__inner {
top: auto;
right: auto;
left: -12%;
bottom: 14%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.hero__charts__img--2 .hero__charts__img__inner {
left: -3%;
bottom: 4%;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__charts__img--2 .hero__charts__img__inner {
left: -8%;
max-width: 140px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__charts__img--2 .hero__charts__img__inner {
left: 17%;
bottom: 13%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__charts__img--2 .hero__charts__img__inner {
left: 9%;
bottom: 3%;
max-width: 100px;
}
}
.hero__reviews {
position: absolute;
left: -50px;
bottom: 50%;
z-index: 2;
transform: translateY(50%) rotate(-90deg);
font-size: 16px;
color: var(--tj-color-common-white);
text-decoration: none;
font-weight: var(--tj-fw-medium);
font-family: var(--tj-ff-body);
text-transform: uppercase;
line-height: 1;
}
.hero__reviews__inner {
display: inline-flex;
gap: 4px;
align-items: center;
}
.hero__reviews span {
padding: 2px 6px 0;
border-radius: 10px;
background-color: var(--tj-color-theme-supportive);
color: var(--tj-color-heading-primary);
font-weight: var(--tj-fw-bold);
display: inline-block;
line-height: 1;
}
.hero__reviews--2 {
color: var(--tj-color-heading-primary);
padding: 5px 8px 5px 5px;
border-radius: 50px;
background-color: var(--tj-color-common-white);
position: static;
transform: none;
margin-bottom: 15px;
display: inline-block;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__reviews--2 {
font-size: 14px;
}
}
.hero__scroll {
position: absolute;
left: 10px;
bottom: 80px;
z-index: 2;
line-height: 1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero__scroll {
left: -30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__scroll {
display: none;
}
}
.hero__scroll__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
transform: rotate(-90deg);
font-size: 16px;
color: var(--tj-color-common-white);
text-decoration: none;
font-weight: var(--tj-fw-sbold);
font-family: var(--tj-ff-body);
line-height: 1;
}
.hero__scroll__link:hover {
color: var(--tj-color-common-white);
}
.hero__scroll__link span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 30px;
border: 2px solid var(--tj-color-common-white);
transform: rotate(-90deg);
position: relative;
border-radius: 50px;
}
.hero__scroll__link span::before {
position: absolute;
content: "";
width: 7px;
height: 2px;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
background-color: var(--tj-color-common-white);
animation: jump-arrow 2.5s infinite;
}
.hero__scroll--dark .hero__scroll__link {
color: var(--tj-color-theme-dark);
}
.hero__scroll--dark .hero__scroll__link span {
border-color: var(--tj-color-theme-dark);
}
.hero__scroll--dark .hero__scroll__link span::before {
background-color: var(--tj-color-theme-dark);
}
.hero__scroll--dark .hero__scroll__link:hover {
color: var(--tj-color-theme-primary);
}
.hero__scroll--dark .hero__scroll__link:hover span {
border-color: var(--tj-color-theme-primary);
}
.hero__scroll--dark .hero__scroll__link:hover span::before {
background-color: var(--tj-color-theme-primary);
}
.hero__logo {
width: 100px;
height: 100px;
background-color: var(--tj-color-theme-secondary);
outline: 14px solid var(--tj-color-theme-bg9);
border-radius: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
margin-top: 74px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero__logo {
width: 95px;
height: 95px;
outline-width: 13px;
margin-top: 65px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero__logo {
width: 90px;
height: 90px;
outline-width: 12px;
margin-top: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hero__logo {
width: 85px;
height: 85px;
outline-width: 11px;
margin-top: 55px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__logo {
width: 80px;
height: 80px;
outline-width: 10px;
margin-bottom: 25px;
margin-top: 50px;
}
}
.hero__logo img {
width: 60px;
height: 60px;
object-fit: cover;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero__logo img {
width: 55px;
height: 55px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero__logo img {
width: 50px;
height: 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hero__logo img {
width: 45px;
height: 45px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__logo img {
width: 40px;
height: 40px;
}
}
.hero--2 .hero__inner {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
min-height: 940px;
padding-top: 125px;
z-index: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--2 .hero__inner {
min-height: 560px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--2 .hero__inner {
padding-top: 110px;
}
}
.hero--2 .hero__inner::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--tj-color-theme-secondary);
opacity: 0.95;
z-index: -1;
}
.hero--2 .hero__left {
position: relative;
margin-top: 65px;
z-index: 2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--2 .hero__left {
margin-top: 35px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--2 .hero__left {
margin-top: 0px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--2 .hero__left {
margin-top: 0px;
}
}
.hero--2 .hero__title {
color: var(--tj-color-common-white);
}
.hero--2 .hero__desc {
color: var(--tj-color-common-white);
}
.hero--2 .hero__action__wrapper {
display: flex;
gap: 30px;
align-items: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--2 .hero__action__wrapper {
gap: 20px;
}
}
.hero--2 .hero__action__wrapper .tj-btn:hover {
color: var(--tj-color-common-white);
border-color: var(--tj-color-common-white);
}
.hero--2 .hero__action__wrapper .tj-btn:hover i {
color: var(--tj-color-common-white);
}
.hero--2 .hero__action__wrapper .tj-btn--popup i {
padding-left: 2px;
}
.hero--2 .hero__ratings {
display: inline-flex;
align-items: center;
padding: 15px 27px;
border: 1px solid var(--tj-color-border-9);
border-radius: 10px;
margin-top: 180px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.hero--2 .hero__ratings {
margin-top: 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--2 .hero__ratings {
margin-top: 20px;
padding: 15px 20px;
}
}
.hero--2 .hero__right {
position: unset;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--2 .hero__right {
position: relative;
}
}
.hero--2 .hero__banner-img {
right: 0;
width: 50%;
height: 80%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--2 .hero__banner-img {
bottom: -36px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--2 .hero__banner-img {
bottom: -25px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--2 .hero__banner-img {
width: 100%;
height: auto;
}
}
.hero--2 .hero__banner-img > img {
max-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
border: 15px solid var(--tj-color-border-6);
border-right: 0;
border-bottom: 0;
border-top-left-radius: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--2 .hero__banner-img > img {
margin-top: 70px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border: 15px solid var(--tj-color-border-6);
border-bottom: 0;
}
}
.hero--2 .hero__bg {
z-index: 1;
}
.hero--2 .hero__bg--shape {
opacity: 0.1;
top: 14%;
left: 7%;
}
.hero--2 .hero__bg--pattern {
top: 71%;
left: 39%;
}
.hero--2 .hero__right {
z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--2 .hero__right {
min-height: 550px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--2 .hero__right {
min-height: 467px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--2 .hero__right {
min-height: 100px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.hero--2 .hero__reviews {
left: -76px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--2 .hero__reviews {
left: -88px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--2 .hero__reviews {
position: static;
transform: none;
margin-bottom: 10px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.hero--2 .hero__scroll {
left: -15px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--2 .hero__scroll {
left: -30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--2 .hero__scroll {
display: none;
}
}
.hero--3 .hero__inner {
padding-top: 236px;
min-height: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--3 .hero__inner {
padding-top: 180px;
min-height: 0;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--3 .hero__inner {
padding-top: 160px;
min-height: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hero--3 .hero__inner {
padding-top: 140px;
min-height: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero--3 .hero__inner {
padding-top: 140px;
min-height: 0;
}
}
@media (max-width: 575px) {
.hero--3 .hero__inner {
padding-top: 120px;
min-height: 0;
}
}
.hero--3 .hero__inner::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background-image: linear-gradient(180deg, rgba(5, 76, 224, 0.24) 0%, rgba(255, 255, 255, 0) 91.26%);
}
.hero--3 .hero__inner .hero__bg__shap__img {
position: absolute;
width: 32.2%;
z-index: -1;
}
.hero--3 .hero__inner .hero__bg__shap__img:first-child {
top: 0;
right: 0;
transform: translate(30%, -30%);
}
.hero--3 .hero__inner .hero__bg__shap__img:last-child {
top: 25%;
left: 0;
transform: translate(-50%, 0);
}
.hero--3 .hero__heading {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 0;
margin-bottom: 45px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--3 .hero__heading {
margin-bottom: 60px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.hero--3 .hero__heading {
margin-bottom: 45px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero--3 .hero__heading {
margin-bottom: 40px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__heading {
margin-bottom: 45px;
}
}
.hero--3 .hero__reviews {
color: var(--tj-color-heading-primary);
padding: 5px 8px 5px 5px;
border-radius: 50px;
background-color: var(--tj-color-common-white);
position: static;
transform: none;
margin-bottom: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__reviews {
font-size: 12px;
}
}
.hero--3 .hero__title {
max-width: 100%;
}
.hero--3 .hero__title .image {
display: inline-flex;
align-items: center;
color: var(--tj-color-heading-primary);
gap: 10px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__title .image {
gap: 0px;
}
}
.hero--3 .hero__title .image img {
width: 61px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__title .image img {
margin-left: 0 !important;
margin-right: -5px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero--3 .hero__title .image img {
width: 50px;
height: 50px;
}
}
@media (max-width: 575px) {
.hero--3 .hero__title .image img {
width: 40px;
height: 40px;
}
}
.hero--3 .hero .hero__desc {
font-size: 18px;
margin-bottom: 0;
max-width: 100%;
}
.hero--3 .hero__action__wrapper {
display: flex;
align-items: center;
gap: 20px;
}
.hero--3 .hero__google__ads__rating {
display: flex;
align-items: center;
gap: 8px;
}
.hero--3 .hero__google__ads__rating .testimonials__rating {
margin-bottom: 0;
}
.hero--3 .hero__google__ads__rating .star-ratings {
font-size: 18px;
}
.hero--3 .hero__google__ads__rating .fill-ratings {
color: var(--tj-color-heading-primary);
}
.hero--3 .hero__google__ads__rating .empty-ratings {
color: var(--tj-color-heading-primary);
opacity: 0.5;
}
.hero--3 .hero__curv-line {
position: absolute;
bottom: -45px;
left: 65%;
z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__curv-line {
left: 82%;
bottom: 0px;
}
}
@media (max-width: 575px) {
.hero--3 .hero__curv-line {
left: 53%;
bottom: -43px;
width: 60px;
}
}
.hero--3 .hero__curv-line img {
width: 97px;
}
.hero--3 .hero__analytics {
padding: 0 15px;
display: flex;
gap: 30px;
align-items: flex-end;
flex-wrap: nowrap;
overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--3 .hero__analytics {
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics {
gap: 20px;
flex-wrap: wrap;
padding: 0;
justify-content: center;
}
}
.hero--3 .hero__analytics__seo {
max-width: 100%;
padding: 22px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
position: relative;
z-index: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--3 .hero__analytics__seo {
border-radius: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__seo {
border-radius: 12px;
}
}
.hero--3 .hero__analytics__seo::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--tj-color-theme-secondary);
border-radius: 20px;
opacity: 0.95;
z-index: -1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--3 .hero__analytics__seo::after {
border-radius: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hero--3 .hero__analytics__seo::after {
border-radius: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__seo::after {
border-radius: 12px;
}
}
.hero--3 .hero__analytics__seo__inner {
padding: 24px 30px 30px;
background: var(--tj-color-theme-bg4);
border-radius: 20px;
position: relative;
z-index: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--3 .hero__analytics__seo__inner {
border-radius: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__seo__inner {
padding: 20px 24px 24px;
border-radius: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__seo__inner {
padding: 20px 15px 15px;
border-radius: 12px;
}
}
.hero--3 .hero__analytics__seo__title {
margin-bottom: 120px;
color: var(--tj-color-common-white);
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.hero--3 .hero__analytics__seo__title {
margin-bottom: 100px;
}
}
@media (max-width: 575px) {
.hero--3 .hero__analytics__seo__title {
margin-bottom: 90px;
}
}
.hero--3 .hero__analytics__seo__desc {
margin-bottom: 170px;
color: var(--tj-color-common-white);
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.hero--3 .hero__analytics__seo__desc {
margin-bottom: 125px;
}
}
@media (max-width: 575px) {
.hero--3 .hero__analytics__seo__desc {
margin-bottom: 100px;
}
}
.hero--3 .hero__analytics__seo .tj-btn-2--underline {
color: var(--tj-color-common-white);
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
text-decoration: none;
position: relative;
}
.hero--3 .hero__analytics__seo .tj-btn-2--underline::before {
content: "";
position: absolute;
bottom: -1px;
right: 0;
width: 100%;
height: 1px;
background-color: var(--tj-color-common-white);
}
.hero--3 .hero__analytics__seo .tj-btn-2--underline i {
color: var(--tj-color-common-white);
}
.hero--3 .hero__analytics__seo .tj-btn-2--underline:hover::before {
animation: linehover 0.8s linear;
}
.hero--3 .hero__analytics__seo__bg-img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.1;
z-index: -1;
}
.hero--3 .hero__analytics__seo__bg-img img {
width: 50%;
}
.hero--3 .hero__analytics__slider {
max-width: 100%;
padding: 22px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
position: relative;
z-index: 0;
height: 571px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--3 .hero__analytics__slider {
border-radius: 16px;
height: 571px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__slider {
height: 400px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__slider {
border-radius: 12px;
}
}
.hero--3 .hero__analytics__slider::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--tj-color-theme-secondary);
border-radius: 20px;
opacity: 0.95;
z-index: -1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--3 .hero__analytics__slider::after {
border-radius: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hero--3 .hero__analytics__slider::after {
border-radius: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__slider::after {
border-radius: 12px;
}
}
.hero--3 .hero__analytics__slider__main {
mask-image: linear-gradient(180deg, rgb(255, 255, 255) 2.91%, #ffffff 30.6%, #ffffff 40.51%, rgba(255, 255, 255, 0) 97.03%);
mask-repeat: no-repeat;
mask-size: contain;
height: 100%;
}
.hero--3 .hero__analytics__slider .swiper {
padding-bottom: 0;
}
.hero--3 .hero__analytics__slider .swiper-slide {
height: auto;
}
.hero--3 .hero__analytics__slider .testimonials__slider__item {
padding: 24px 30px 30px;
background: var(--tj-color-theme-bg4);
border-radius: 20px;
position: relative;
z-index: 0;
border: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--3 .hero__analytics__slider .testimonials__slider__item {
border-radius: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__slider .testimonials__slider__item {
padding: 20px 24px 24px;
border-radius: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__slider .testimonials__slider__item {
padding: 20px 15px 15px;
border-radius: 12px;
}
}
.hero--3 .hero__analytics__slider .testimonials__slider__item .empty-ratings {
color: var(--tj-color-common-white);
}
.hero--3 .hero__analytics__slider .testimonials__desc {
color: var(--tj-color-common-white);
margin-bottom: 0;
padding-bottom: 0;
border: 0;
font-size: 18px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--3 .hero__analytics__slider .testimonials__desc {
font-size: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__slider .testimonials__desc {
font-size: 14px;
}
}
.hero--3 .hero__analytics__slider .testimonials__author__name {
color: var(--tj-color-common-white);
}
.hero--3 .hero__analytics__slider .testimonials__author__desig {
color: var(--tj-color-common-white);
}
.hero--3 .hero__analytics__slider .star-ratings {
font-size: 16px;
}
.hero--3 .hero__analytics__slider .star-ratings .fill-ratings {
color: var(--tj-color-common-white);
}
.hero--4 .hero__inner {
padding-top: 120px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hero--4 .hero__inner {
padding-top: 110px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--4 .hero__inner {
padding-top: 100px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--4 .hero-breadcrumb__icons {
display: none;
}
}
.hero--4 .hero-breadcrumb__icons img {
top: 5%;
left: 20%;
position: absolute;
}
.hero--4 .hero-breadcrumb__icons img:nth-last-child(1) {
top: 85%;
left: 71%;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hero--4 .hero-breadcrumb__icons img:nth-last-child(1) {
top: 95%;
left: 80%;
}
}
.hero--4 .hero-breadcrumb__icons img:nth-last-child(2) {
top: 15%;
left: 82%;
}
.hero--4 .hero-breadcrumb__icons img:nth-last-child(3) {
top: 63%;
left: 5%;
}
.hero--4 .hero__title {
max-width: 900px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--4 .hero__title {
max-width: 700px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--4 .hero__title {
max-width: 600px;
}
}
@media (max-width: 575px) {
.hero--4 .hero__title {
font-size: 36px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--4 .hero__desc {
max-width: 630px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.elementor.elementor-60 .rnk-el-image.elementor-widget-image img {
height: 410px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.elementor-1089 .elementor-element.elementor-element-e3123dd .tj-el-title {
font-size: 60px;
}
}
/* !END: Hero CSS */
/**----------------------------------------
START: Contact CSS
----------------------------------------*/
.tj-nice-select::after {
display: none;
}
.tj-nice-select::before {
content: "\e92f";
font-family: var(--tj-ff-ranko-icons);
position: absolute;
z-index: 1;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 5.5px;
}
.tj-nice-select.open::before {
transform: translateY(-50%) rotate(-180deg);
}
.contact {
overflow: hidden;
}
.contact__inner {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 24px;
padding: 120px 0;
position: relative;
z-index: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.contact__inner {
padding-left: 40px;
padding-right: 40px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.contact__inner {
padding: 100px 30px;
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.contact__inner {
padding: 80px 20px;
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__inner {
padding: 60px 5px;
border-radius: 16px;
}
}
.contact__inner::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--tj-color-theme-secondary);
border-radius: 24px;
opacity: 0.95;
z-index: -2;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.contact__inner::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.contact__inner::after {
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__inner::after {
border-radius: 16px;
}
}
.contact__inner__pattern img {
position: absolute;
top: 80px;
left: 60px;
width: 134px;
z-index: 1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.contact__inner__pattern img {
top: 40px;
left: 40px;
width: 100px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__inner__pattern img {
top: 20px;
left: 20px;
width: 60px;
}
}
.contact__inner__pattern img:last-child {
top: auto;
left: auto;
bottom: 60px;
right: 50%;
transform: translateX(50%);
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.contact__inner__pattern img:last-child {
width: 50px;
bottom: 20px;
right: 35px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__inner__pattern img:last-child {
width: 40px;
bottom: 20px;
right: 35px;
}
}
.contact__form form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
max-width: 550px;
margin-top: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__form form {
max-width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__form form {
grid-template-columns: 1fr;
gap: 16px;
max-width: 100%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__form form {
grid-template-columns: 1fr;
gap: 16px;
}
}
.contact__form .tj-input {
background: var(--tj-color-theme-bg8);
border: 1px solid var(--tj-color-border-5);
color: var(--tj-color-common-white);
width: 100%;
padding-top: 11px;
padding-bottom: 11px;
font-size: 16px;
}
.contact__form .tj-input:focus {
border-color: var(--tj-color-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__form .tj-input {
font-size: 14px;
padding: 14px 16px 10px;
}
}
.contact__form .tj-input.tj-nice-select {
padding: 16px;
width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__form .tj-input.tj-nice-select {
padding: 14.3725px 16px;
}
}
.contact__form .tj-input.tj-nice-select .list {
background: var(--tj-color-theme-bg8);
backdrop-filter: blur(7px);
width: 100%;
}
.contact__form .tj-input.tj-nice-select .option {
min-height: 34px;
line-height: 34px;
}
.contact__form .tj-input.tj-nice-select .option.selected.focus, .contact__form .tj-input.tj-nice-select .option:hover {
background: var(--tj-color-theme-bg8);
backdrop-filter: blur(20px);
}
.contact__form .tj-input::placeholder {
color: var(--tj-color-common-white);
opacity: 1;
}
.contact__form .tj-input__wrapper {
width: 100%;
border: 0;
background-color: transparent;
padding-right: 0;
transition: all 0.3s;
}
.contact__form .tj-input__wrapper--message {
grid-column: 1/3;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__form .tj-input__wrapper--message {
grid-column: 1/2;
}
}
.contact__form .tj-input__wrapper span {
display: block;
width: 100%;
}
.contact__form textarea.tj-input {
height: 160px;
}
.contact__form .tj-btn:hover {
color: var(--tj-color-common-white);
border-color: var(--tj-color-common-white);
}
.contact__form .wpcf7 form .wpcf7-response-output {
color: var(--tj-color-common-white2);
}
.contact__banner {
width: 100%;
z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__banner {
text-align: center;
margin-bottom: -55px;
}
}
@media (max-width: 575px) {
.contact__banner {
margin-top: 10px;
margin-bottom: -30px;
}
}
.contact__banner__wrapper {
position: relative;
height: 100%;
}
.contact__chart {
position: absolute;
top: 16%;
left: 19%;
transform: translate(-50%, -50%) rotate(-30deg);
width: 206px;
max-width: 100%;
z-index: 2;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.contact__chart {
top: 18%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__chart {
width: 180px;
top: 25%;
}
}
@media (max-width: 575px) {
.contact__chart {
width: 120px;
}
}
.contact__chart__inner {
position: relative;
}
.contact__chart__inner::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 12px;
background: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, rgba(244, 68, 84, 0.3) 100%);
z-index: -1;
pointer-events: none;
}
.contact__chart img {
border-radius: 12px !important;
}
.contact-team-details__form form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-team-details__form form {
grid-template-columns: 1fr;
gap: 16px;
max-width: 100%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-team-details__form form {
grid-template-columns: 1fr;
gap: 16px;
}
}
.contact-team-details__form .tj-input {
border: 1px solid transparent;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
font-size: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-team-details__form .tj-input {
font-size: 14px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 768px) and (max-width: 1024px) and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) and (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) and (max-width: 575px), only screen and (max-width: 575px) and (min-width: 768px) and (max-width: 1024px), only screen and (max-width: 575px) and (min-width: 576px) and (max-width: 767px), (max-width: 575px) and (max-width: 575px) {
.contact-team-details__form .tj-input {
padding: 15px 16px 12px;
}
}
.contact-team-details__form .tj-input:focus {
border-color: var(--tj-color-theme-secondary);
}
.contact-team-details__form .tj-input .option {
color: var(--tj-color-text-body);
}
.contact-team-details__form .tj-input__wrapper {
background-color: transparent;
width: 100%;
border: 0;
padding-right: 0;
}
.contact-team-details__form .tj-input__wrapper--message {
grid-column: 1/3;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-team-details__form .tj-input__wrapper--message {
grid-column: 1/2;
}
}
.contact-team-details__form .tj-input__wrapper--message textarea {
height: 160px;
}
.contact-team-details__form .tj-input__wrapper span {
display: block;
width: 100%;
}
.contact-team-details__form .tj-input.tj-nice-select {
padding: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-team-details__form .tj-input.tj-nice-select {
padding: 16px 16px;
}
}
.contact__main__form form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__main__form form {
padding-left: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__main__form form {
grid-template-columns: 1fr;
gap: 16px;
max-width: 100%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__main__form form {
grid-template-columns: 1fr;
gap: 16px;
}
}
.contact__main__form .nice-select::before {
right: 0;
}
.contact__main__form .tj-input {
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding: 15px 0;
font-size: 16px;
border-bottom: 1px solid var(--tj-color-border-1);
border-radius: 0;
}
.contact__main__form .tj-input:focus {
border-color: var(--tj-color-common-black);
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__main__form .tj-input {
font-size: 14px;
padding: 12px 0;
}
}
.contact__main__form .tj-input__wrapper {
width: 100%;
border: 0;
border-radius: 0;
}
.contact__main__form .tj-input__wrapper--message {
grid-column: 1/3;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__main__form .tj-input__wrapper--message {
grid-column: 1/2;
}
}
.contact__main__form .tj-input__wrapper--message textarea {
height: 160px;
}
.contact__main__form .tj-input__wrapper span {
display: block;
width: 100%;
}
.contact__main__form .tj-input.tj-nice-select {
padding: 20px 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__main__form .tj-input.tj-nice-select {
padding: 16px 0;
}
}
.tj-el-form .wpcf7 form .wpcf7-response-output {
grid-column: span 2;
margin-top: 5px;
margin-bottom: 0;
}
.contact-item.style-2 {
padding: 40px;
border: 1px solid var(--tj-color-border-1);
text-align: center;
border-radius: 16px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
.contact-item.style-2 {
padding: 25px;
border-radius: 12px;
}
}
.contact-item.style-2 p {
margin-bottom: 0;
max-width: 224px;
margin: 0 auto;
}
.contact-item.style-2:hover .contact-icon {
background: var(--tj-color-theme-secondary);
}
.contact-item.style-2:hover .contact-icon i {
color: var(--tj-color-common-white);
transform: scaleX(-1);
}
.contact-item.style-2 .contact-icon {
width: 88px;
height: 88px;
display: inline-flex;
justify-content: center;
align-items: center;
background: var(--tj-color-theme-bg1);
border-radius: 50%;
margin-bottom: 30px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.contact-item.style-2 .contact-icon i {
font-size: 32px;
color: var(--tj-color-theme-secondary);
}
.contact-item.style-2 .contact-title {
font-size: 24px;
text-transform: capitalize;
margin-bottom: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
.contact-item.style-2 .contact-title {
font-size: 20px;
}
}
.contact-item.style-2 .contact-list {
list-style: none;
}
.contact-item.style-2 .contact-list li a {
color: var(--tj-color-text-body);
}
.contact-item.style-2 .contact-list li a:hover {
color: var(--tj-color-theme-primary);
}
.contact-item.style-2 .contact-list li.active a {
text-transform: capitalize;
font-weight: var(--tj-fw-sbold);
color: var(--tj-color-theme-primary);
}
.map-area {
max-width: 587px;
width: 100%;
position: relative;
}
.map-area iframe {
width: 100%;
min-height: 387px;
-webkit-filter: grayscale(1);
filter: grayscale(1);
display: block;
}
.map-area .contact-info {
background-color: var(--tj-color-common-black);
position: absolute;
max-width: 211px;
width: 100%;
bottom: 0;
left: 0;
padding: 10px 20px 10px 20px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.map-area {
max-width: 100%;
margin-bottom: 40px;
}
}
.map-area.map-2 {
max-width: 100%;
height: 100%;
border-radius: 16px;
overflow: hidden;
}
.map-area.map-2 iframe {
height: 100%;
}
.contact-form.style-2 {
max-width: 100%;
background-color: transparent;
background-blend-mode: luminosity;
padding: 50px 50px 60px;
border: 1px solid var(--tj-color-border-1);
border-radius: 16px;
}
.contact-form.style-2 .title {
margin-bottom: 30px;
line-height: 1.25;
max-width: 450px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-form.style-2 .title {
margin-bottom: 20px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-form.style-2 {
margin-inline-end: 0;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-form.style-2 {
padding: 35px 20px 40px;
}
}
/* !END: Contact CSS */
/**----------------------------------------
START: Brand Marrquee CSS
----------------------------------------*/
.brand-marquee__heading {
padding-bottom: 34px;
margin-bottom: 16px;
border-bottom: 1px solid var(--tj-color-border-4);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.brand-marquee__heading {
padding-bottom: 24px;
margin-bottom: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.brand-marquee__heading {
padding-right: 15px;
padding-left: 15px;
}
}
.brand-marquee__title {
color: var(--tj-color-common-white);
text-align: center;
margin-bottom: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.brand-marquee__title {
font-size: 16px;
}
}
.brand-marquee__title span {
padding: 2px 6.5px 4px;
background-color: var(--tj-color-theme-primary);
border-radius: 45px;
line-height: 1;
}
.brand-marquee__slider {
padding-bottom: 0;
}
.brand-marquee__slider .swiper-wrapper {
transition-timing-function: linear;
}
.brand-marquee__slider__wrapper {
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 2.91%, var(--tj-color-common-white) 30.6%, var(--tj-color-common-white) 69.51%, rgba(255, 255, 255, 0) 97.03%);
}
.brand-marquee__item.swiper-slide {
width: auto;
}
.brand-marquee__item img {
width: 200px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.brand-marquee__item img {
width: 150px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.brand-marquee__item img {
width: 130px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.brand-marquee__item img {
width: 120px;
}
}
.brand-marquee--float {
position: relative;
z-index: 1;
margin-bottom: -138px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.brand-marquee--float {
margin-bottom: -102px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.brand-marquee--float {
margin-bottom: -86px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.brand-marquee--float {
margin-bottom: -74px;
}
}
@media (max-width: 575px) {
.brand-marquee--float {
margin-left: 15px;
margin-right: 15px;
}
}
.brand-marquee--float .brand-marquee__inner {
border-radius: 16px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.brand-marquee--float .brand-marquee__inner {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.brand-marquee--float .brand-marquee__inner {
border-radius: 12px;
}
}
.brand-marquee--float .brand-marquee__inner::after {
border-radius: 16px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.brand-marquee--float .brand-marquee__inner::after {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.brand-marquee--float .brand-marquee__inner::after {
border-radius: 12px;
}
}
.brand-marquee--2 .brand-marquee__inner {
background: transparent;
}
.brand-marquee--2 .brand-marquee__inner::after {
display: none;
}
.brand-marquee--2 .brand-marquee__heading {
border-color: var(--tj-color-border-1);
}
.brand-marquee--2 .brand-marquee__title {
color: var(--tj-color-heading-primary);
}
.brand-marquee--2 .brand-marquee__title span {
color: var(--tj-color-common-white);
}
.brand-marquee--2 .brand-marquee__item img {
filter: invert(1);
}
/* !END: Brand Marrquee CSS */
/**----------------------------------------
START: About CSS
----------------------------------------*/
.about__banner {
position: relative;
z-index: 0;
display: inline-block;
}
.about__banner > img {
width: 533px;
border-radius: 20px;
}
.about__banner .main-image img {
border-radius: 20px;
}
.about__banner__bg {
position: absolute;
right: -30px;
top: -30px;
z-index: -1;
}
.about__banner__bg img {
width: 533px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__banner__bg {
right: -12px;
top: -12px;
width: 350px;
}
}
.about__banner .about__banner__bg img,
.about__banner .about__banner__charts__img img {
border-radius: var(--tj-br-xl);
}
.about__banner .about__banner__charts__img img {
border: 1px solid var(--tj-color-border-1);
box-shadow: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843);
overflow: hidden;
}
.about__banner__charts__img {
position: absolute;
z-index: 1;
}
.about__banner__charts__img--right {
left: 100%;
top: 50%;
transform: translate(-50%, -50%);
width: 213px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.about__banner__charts__img--right {
left: 91%;
top: 24%;
width: 180px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__banner__charts__img--right {
left: 85%;
top: 24%;
width: 120px;
}
}
@media (max-width: 575px) {
.about__banner__charts__img--right {
left: 83%;
}
}
.about__banner__charts__img--bottom {
bottom: -50px;
left: 30px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__banner__charts__img--bottom {
bottom: -20px;
left: 20px;
}
}
.about__banner__charts__img--bottom img {
width: 190px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__banner__charts__img--bottom img {
width: 130px;
}
}
.about__banner::after {
content: "";
max-width: 316px;
width: 100%;
height: 190px;
position: absolute;
right: -25px;
bottom: -25px;
border: 1px dashed var(--tj-color-border-1);
border-top: 0;
border-left: 0;
border-bottom-right-radius: 8px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__banner::after {
display: none;
}
}
.about__content {
padding-left: 45px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.about__content {
padding-left: 0px;
margin-bottom: 65px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__content {
padding-left: 0px;
margin-bottom: 40px;
}
}
.about .section-heading {
margin-bottom: 0;
}
.about__features ul {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.about__features ul {
gap: 8px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__features ul {
gap: 4px;
}
}
@media (max-width: 575px) {
.about__features ul {
grid-template-columns: 100%;
}
}
.about__features ul li {
display: flex;
align-items: center;
gap: 8px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__features ul li {
gap: 6px;
}
}
.about__features ul li a,
.about__features ul li .text {
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-medium);
}
.about__features ul li a:hover {
color: var(--tj-color-theme-primary);
}
.about__features ul li .icon {
color: var(--tj-color-theme-secondary);
font-size: 18px;
line-height: 1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__features ul li .icon {
font-size: 16px;
}
}
.about__action .tj-btn-2 {
text-decoration: underline;
}
.about__action .tj-btn-2 i {
color: var(--tj-color-theme-secondary);
}
.about__action .tj-btn-2:hover {
text-decoration: none;
}
.about__action .tj-btn-2:hover i {
color: var(--tj-color-theme-primary);
}
.about--3 .about__content {
padding-left: 0;
}
.about--3 .about__banner > img {
width: 581px;
border-radius: 24px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--3 .about__banner > img {
border-radius: 16px;
}
}
.about--3 .about__banner::after {
display: none;
}
.about--4 .text-marquee-slider__title {
opacity: 0.7;
}
.about--4 .text-marquee-slider__dot {
opacity: 0.7;
}
.about--4 .about__banner {
display: inline-flex;
gap: 30px;
align-items: flex-start;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.about--4 .about__banner {
margin-right: -30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.about--4 .about__banner {
margin-right: -30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.about--4 .about__banner {
gap: 20px;
margin-right: -20px;
}
}
@media (max-width: 575px) {
.about--4 .about__banner {
gap: 10px;
margin-right: -10px;
}
}
.about--4 .about__banner > img {
width: 390px;
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.about--4 .about__banner > img {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--4 .about__banner > img {
border-radius: 10px;
width: 300px;
}
}
@media (max-width: 575px) {
.about--4 .about__banner > img {
width: 210px;
}
}
.about--4 .about__banner::after {
display: none;
}
.about--4 .about__banner__related__img {
padding: 21px 65.5px;
background-color: var(--tj-color-theme-secondary);
border-radius: 16px;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.about--4 .about__banner__related__img {
padding: 21px 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.about--4 .about__banner__related__img {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.about--4 .about__banner__related__img {
border-radius: 10px;
padding: 21px 30px;
}
}
@media (max-width: 575px) {
.about--4 .about__banner__related__img {
border-radius: 10px;
padding: 16px 16px;
}
}
.about--4 .about__banner__related__img img {
width: 55px;
height: 55px;
border-radius: 100%;
box-sizing: content-box;
border: 4px solid var(--tj-color-common-white);
margin-top: -27px;
object-fit: cover;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--4 .about__banner__related__img img {
width: 40px;
height: 40px;
border-width: 3px;
margin-top: -16px;
}
}
@media (max-width: 575px) {
.about--4 .about__banner__related__img img {
width: 30px;
height: 30px;
border-width: 2px;
margin-top: -14px;
}
}
.about--4 .about__banner__related__img img:first-child {
margin-top: 0;
}
.about--4 .about__banner__charts__img--bottom {
padding: 19px 23px 0 0;
border-top-right-radius: 16px;
bottom: 0;
left: 0;
background: var(--tj-color-theme-bg1);
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.about--4 .about__banner__charts__img--bottom {
border-top-right-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--4 .about__banner__charts__img--bottom {
border-top-right-radius: 10px;
}
}
@media (max-width: 575px) {
.about--4 .about__banner__charts__img--bottom {
padding: 10px 10px 0 0;
}
}
.about--4 .about__banner__charts__img--bottom img {
width: 258px;
border: none;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.about--4 .about__banner__charts__img--bottom img {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--4 .about__banner__charts__img--bottom img {
border-radius: 10px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.about--4 .about__banner__charts__img--bottom img {
width: 190px;
}
}
@media (max-width: 575px) {
.about--4 .about__banner__charts__img--bottom img {
width: 134px;
}
}
.about--4 .about__banner__charts__img--bottom::before, .about--4 .about__banner__charts__img--bottom::after {
content: "";
background: var(--tj-color-theme-bg1);
mask-image: url('data:image/svg+xml,');
position: absolute;
width: 16px;
height: 16px;
transform: rotate(-90deg);
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.about--4 .about__banner__charts__img--bottom::before, .about--4 .about__banner__charts__img--bottom::after {
width: 12px;
height: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--4 .about__banner__charts__img--bottom::before, .about--4 .about__banner__charts__img--bottom::after {
width: 10px;
height: 10px;
}
}
.about--4 .about__banner__charts__img--bottom::after {
right: 41px;
top: -16px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.about--4 .about__banner__charts__img--bottom::after {
right: 112px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.about--4 .about__banner__charts__img--bottom::after {
top: -12px;
right: 45px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.about--4 .about__banner__charts__img--bottom::after {
top: -9px;
right: 77px;
}
}
@media (max-width: 575px) {
.about--4 .about__banner__charts__img--bottom::after {
top: -9px;
right: 58px;
}
}
.about--4 .about__banner__charts__img--bottom::before {
left: 100%;
bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.about--4 .about__banner__charts__img--bottom::before {
left: 100%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--4 .about__banner__charts__img--bottom::before {
left: 100%;
}
}
.about--4 .about__banner__video {
display: flex;
gap: 15px;
align-items: center;
padding: 20px;
background: var(--tj-color-common-white);
border-radius: 12px;
position: absolute;
bottom: 50px;
right: 50px;
max-width: 293px;
width: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.about--4 .about__banner__video {
border-radius: 10px;
padding: 16px;
max-width: 233px;
right: 12px;
bottom: 42px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.about--4 .about__banner__video {
border-radius: 8px;
padding: 16px;
bottom: 45px;
right: 31px;
max-width: 191px;
gap: 8px;
}
}
@media (max-width: 575px) {
.about--4 .about__banner__video {
border-radius: 6px;
padding: 8px;
bottom: 37px;
right: 15px;
max-width: 130px;
gap: 3px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--4 .about__banner__video {
animation: none;
}
}
.about--4 .about__banner__video .tj-btn--popup {
width: 42px;
height: 42px;
gap: 0;
}
@media (max-width: 575px) {
.about--4 .about__banner__video .tj-btn--popup {
width: 35px;
height: 35px;
}
}
@media (max-width: 575px) {
.about--4 .about__banner__video .tj-btn--popup {
width: 25px;
height: 25px;
}
}
.about--4 .about__banner__video .tj-btn--popup i {
font-size: 12.6px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.about--4 .about__banner__video .tj-btn--popup i {
font-size: 10px;
}
}
@media (max-width: 575px) {
.about--4 .about__banner__video .tj-btn--popup i {
font-size: 7px;
padding-left: 2px;
padding-bottom: 1px;
}
}
.about--4 .about__banner__video .tj-btn--popup:hover i {
color: var(--tj-color-common-white);
}
.about--4 .about__banner__video h6 {
margin-bottom: 0;
font-size: 18px;
line-height: 1.2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.about--4 .about__banner__video h6 {
font-size: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.about--4 .about__banner__video h6 {
font-size: 12px;
}
}
@media (max-width: 575px) {
.about--4 .about__banner__video h6 {
font-size: 10px;
}
}
.about--4 .about__banner__video p {
margin-bottom: 0;
font-size: 14px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.about--4 .about__banner__video p {
font-size: 10px;
}
}
@media (max-width: 575px) {
.about--4 .about__banner__video p {
font-size: 8px;
}
}
.about--4 .about__content {
padding: 40px 30px;
border-radius: 16px;
background: var(--tj-color-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.about--4 .about__content {
border-radius: 12px;
padding: 25px 25px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.about--4 .about__content {
border-radius: 12px;
padding: 35px 25px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--4 .about__content {
border-radius: 10px;
padding: 30px 20px;
}
}
.about--4 .about__content__list {
display: flex;
flex-direction: column;
gap: 25px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px) {
.about--4 .about__content__list {
gap: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--4 .about__content__list {
gap: 15px;
}
}
.about--4 .about__content__list__item {
display: flex;
gap: 15px;
padding-bottom: 18px;
border-bottom: 1px dashed var(--tj-color-border-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px) {
.about--4 .about__content__list__item {
padding-bottom: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--4 .about__content__list__item {
gap: 12px;
padding-bottom: 16px;
}
}
.about--4 .about__content__list__item:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.about--4 .about__content__list__sl {
width: 32px;
height: 32px;
border-radius: 100%;
background-color: var(--tj-color-theme-bg1);
font-size: 16px;
font-weight: var(--tj-fw-medium);
color: var(--tj-color-theme-secondary);
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px) {
.about--4 .about__content__list__sl {
width: 30px;
height: 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--4 .about__content__list__sl {
width: 28px;
height: 28px;
font-size: 14px;
}
}
.about--4 .about__content__list__title {
font-size: 24px;
margin-bottom: 16px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px) {
.about--4 .about__content__list__title {
font-size: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--4 .about__content__list__title {
font-size: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
@keyframes pulse1 {
0% {
box-shadow: 0 0 0 0 rgba(244, 68, 84, 0.6);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
}
/* !END: About CSS */
/**----------------------------------------
START: Funfact CSS
----------------------------------------*/
.funfact {
position: relative;
}
.funfact__dart-board {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -50%);
border: 19px solid var(--tj-color-common-white);
border-radius: 100%;
z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.funfact__dart-board {
outline-width: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact__dart-board {
outline-width: 10px;
}
}
.funfact__dart-board img {
width: 86px;
height: 86px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.funfact__dart-board img {
width: 76px;
height: 76px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.funfact__dart-board img {
width: 66px;
height: 66px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact__dart-board img {
width: 40px;
height: 40px;
}
}
.funfact .section-heading {
position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact .section-heading {
margin-bottom: 0;
padding-bottom: 30px;
}
}
.funfact .section-heading__sub-title {
background-color: var(--tj-color-common-white);
}
.funfact__tab-controller {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
font-size: 16px;
}
.funfact__tab-controller li {
font-size: 16px;
font-weight: var(--tj-fw-sbold);
color: var(--tj-color-heading-primary);
line-height: 1;
}
.funfact__curve__line {
position: absolute;
left: 57%;
bottom: -22px;
z-index: 2;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.funfact__curve__line {
left: 63%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.funfact__curve__line {
left: 69%;
bottom: 7px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact__curve__line {
width: 40px;
left: 70%;
bottom: 6px;
}
}
.funfact--2 .funfact__single {
display: flex;
flex-direction: column;
gap: 30px;
position: relative;
z-index: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact--2 .funfact__single {
gap: 20px;
}
}
@media (max-width: 575px) {
.funfact--2 .funfact__single .tj-u-shape {
left: 50%;
top: 100%;
transform: translateX(-50%) translateY(-15px) rotate(90deg);
}
}
.funfact--2 .funfact__single > .tj-u-shape {
background: var(--tj-color-theme-bg2);
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact--2 .funfact__single > .tj-u-shape {
left: 50%;
top: 100%;
transform: translateX(-50%) translateY(-15px) rotate(90deg);
}
}
.funfact--2 .funfact-area.style-2 {
margin-top: 0;
}
.funfact--2 .funfact-area.style-2 .funfact-item {
background: transparent;
}
.funfact--2 .funfact-area.style-2 .funfact-item::after {
background-color: var(--tj-color-theme-bg1);
}
.funfact--2 .funfact-area.style-2 .funfact-item .number {
color: var(--tj-color-theme-secondary);
}
.funfact--2 .funfact-area.style-2 .funfact-item .text {
color: var(--tj-color-text-body);
}
.funfact--2 .funfact-area.style-2 .funfact-item .tj-u-shape {
background: var(--tj-color-theme-bg1);
}
.funfact--2 .testimonials__slider__item {
background-color: var(--tj-color-theme-bg2);
padding: 40px;
border: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact--2 .testimonials__slider__item {
padding: 30px;
}
}
@media (max-width: 575px) {
.funfact--2 .testimonials__slider__item {
padding: 20px;
}
}
.funfact--2 .testimonials__desc {
font-size: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.funfact--2 .testimonials__desc {
font-size: 18px;
}
}
@media (max-width: 575px) {
.funfact--2 .testimonials__desc {
font-size: 16px;
}
}
.funfact--3 {
overflow: hidden;
}
.funfact--3 .funfact__single {
border: 1px solid var(--tj-color-border-3);
background: var(--tj-color-theme-bg2);
border-radius: 16px;
padding: 45px 30px;
height: 100%;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.funfact--3 .funfact__single {
padding: 40px 25px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.funfact--3 .funfact__single {
padding: 35px 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact--3 .funfact__single {
padding: 30px 20px;
}
}
.funfact--3 .funfact__single__title {
margin-bottom: 0;
font-size: 48px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.funfact--3 .funfact__single__title {
font-size: 48px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.funfact--3 .funfact__single__title {
font-size: 36px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact--3 .funfact__single__title {
font-size: 30px;
}
}
.funfact--3 .funfact__single--middle {
border: 0;
background: transparent;
border-radius: 0;
padding: 0;
}
.funfact--3 .funfact__single .about__features ul {
grid-template-columns: 1fr;
max-width: 100%;
gap: 12px;
}
.funfact--3 .funfact__traffic {
position: relative;
z-index: 0;
}
.funfact--3 .funfact__traffic__list ul {
display: flex;
flex-direction: column;
gap: 6px;
}
.funfact--3 .funfact__traffic__list li {
display: flex;
gap: 8px;
align-items: center;
color: var(--tj-color-heading-primary);
font-weight: var(--tj-fw-sbold);
}
.funfact--3 .funfact__traffic__list li::before {
content: " ";
width: 10px;
height: 10px;
border-radius: 100%;
background-color: var(--tj-color-theme-primary);
}
.funfact--3 .funfact__traffic__list li:last-child::before {
background-color: var(--tj-color-theme-secondary);
}
.funfact--3 .funfact__traffic__chart {
width: 143px;
position: relative;
z-index: 0;
}
.funfact--3 .funfact__traffic__num {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
margin-bottom: 0;
}
.funfact--3 .funfact__traffic__bg {
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
.funfact--3 .funfact-area.style-2 .funfact-item {
padding: 35px 30px;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.funfact--3 .funfact-area.style-2 .funfact-item {
padding: 30px 25px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.funfact--3 .funfact-area.style-2 .funfact-item {
padding: 25px 20px;
width: 100%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact--3 .funfact-area.style-2 .funfact-item {
padding: 25px 20px;
}
}
.funfact--3 .funfact-area.style-2 .funfact-item .number {
justify-content: start;
color: var(--tj-color-heading-primary);
}
.funfact--3 .funfact-area.style-2 .funfact-item .text {
line-height: 1.625;
margin-top: 15px;
}
.funfact-area.style-2 .funfact-item {
padding: 30px 40px 46px;
align-self: stretch;
background: url("../images/shape/funfact-item-bg.png") no-repeat center;
background-size: cover;
border-radius: 16px;
position: relative;
z-index: 0;
text-align: center;
flex-grow: 1;
line-height: 1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.funfact-area.style-2 .funfact-item {
padding: 24px 24px 36px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-2 .funfact-item {
padding: 24px 24px 36px;
flex: 0 1 calc(50% - 10px);
}
}
@media (max-width: 575px) {
.funfact-area.style-2 .funfact-item {
flex: 1 1 100%;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-2 .funfact-item {
border-radius: 12px;
}
}
.funfact-area.style-2 .funfact-item::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--tj-color-theme-secondary);
opacity: 0.9;
border-radius: 16px;
z-index: -1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.funfact-area.style-2 .funfact-item::after {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-2 .funfact-item::after {
border-radius: 12px;
}
}
.funfact-area.style-2 .funfact-item .text {
color: var(--tj-color-common-white);
line-height: 1;
display: inline-flex;
gap: 4px;
align-items: center;
margin-top: 16px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.funfact-area.style-2 .funfact-item .text {
margin-top: 10px;
font-size: 14px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-2 .funfact-item .text {
margin-top: 10px;
font-size: 14px;
}
}
.funfact-area.style-2 .funfact-item .text--traffic i {
color: var(--tj-color-green-1);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.funfact-area.style-2 .funfact-item .text--traffic i {
font-size: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-2 .funfact-item .text--traffic i {
font-size: 12px;
}
}
.funfact-area.style-2 .funfact-item .text--speed span {
background: var(--tj-color-theme-supportive);
padding: 3px 5px 2px 6px;
font-size: 12px;
border-radius: 10px;
color: var(--tj-color-theme-dark);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.funfact-area.style-2 .funfact-item .text--speed span {
font-size: 10px;
padding: 2px 4px 1px 5px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-2 .funfact-item .text--speed span {
font-size: 10px;
padding: 2px 4px 1px 5px;
}
}
.funfact-area.style-2 .funfact-item .text--bonus i {
color: var(--tj-color-theme-supportive);
font-size: 17px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.funfact-area.style-2 .funfact-item .text--bonus i {
font-size: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-2 .funfact-item .text--bonus i {
font-size: 12px;
}
}
.funfact-area.style-2 .funfact-item .text--conversation i {
font-size: 16px;
color: var(--tj-color-theme-primary);
margin-left: -3px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.funfact-area.style-2 .funfact-item .text--conversation i {
font-size: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-2 .funfact-item .text--conversation i {
font-size: 12px;
}
}
.funfact-area.style-2.style-4 {
height: auto;
}
.funfact-area.style-2.style-4 .funfact-item {
background: var(--tj-color-theme-bg1);
border: 1px solid var(--tj-color-border-1);
}
.funfact-area.style-2.style-4 .funfact-item::after {
display: none;
}
.funfact-area.style-2.style-4 .funfact-item .number {
color: var(--tj-color-heading-primary);
}
.funfact-area.style-2.style-4 .funfact-item .text {
color: var(--tj-color-text-body);
margin-top: 12px;
}
.funfact-area.style-2 .funfact-item .number {
font-size: 70px;
font-weight: var(--tj-fw-bold);
color: var(--tj-color-common-white);
font-family: var(--tj-ff-heading);
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.funfact-area.style-2 .funfact-item .number {
font-size: 40px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-2 .funfact-item .number {
font-size: 36px;
}
}
.funfact-area.style-2 .funfact-item .number small {
font-size: 34px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.funfact-area.style-2 .funfact-item .number small {
font-size: 24px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-2 .funfact-item .number small {
font-size: 24px;
}
}
.funfact-area.style-2 .funfact-item .number span {
line-height: 1;
}
.funfact-area.style-2 .funfact-item .number sub {
bottom: unset;
}
.funfact-area.style-2 .funfact-item .funfact-icon {
display: inline-flex;
font-size: 32px;
line-height: 1;
color: var(--tj-theme-primary);
margin-bottom: 15px;
}
.funfact-area.style-2 .funfact-item .funfact-icon i {
display: inline-flex;
line-height: 1;
}
.funfact-area.style-2 .funfact-item .funfact-icon img,
.funfact-area.style-2 .funfact-item .funfact-icon svg {
display: inline-flex;
max-width: 32px;
width: 100%;
}
/* !END: Funfact CSS */
/**----------------------------------------
START: Service CSS
----------------------------------------*/
.service__title {
margin-bottom: 24px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.service__title {
font-size: 22px;
margin-bottom: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__title {
font-size: 20px;
margin-bottom: 12px;
}
}
.service__icon {
font-size: 41px;
line-height: 1;
width: 80px;
height: 80px;
background-color: var(--tj-color-common-white);
border: 1px solid var(--tj-color-border-1);
border-radius: 100%;
margin-bottom: 30px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.service__icon i {
color: var(--tj-color-theme-secondary);
}
.service__card {
padding: 40px 30px;
border-radius: 16px;
border: 1.5px solid var(--tj-color-border-1);
position: relative;
z-index: 0;
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
-moz-transition: all var(--tj-td-standard) ease-in-out 0s;
-ms-transition: all var(--tj-td-standard) ease-in-out 0s;
-o-transition: all var(--tj-td-standard) ease-in-out 0s;
transition: all var(--tj-td-standard) ease-in-out 0s;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.service__card {
padding: 30px 20px;
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__card {
padding: 30px 20px;
border-radius: 12px;
}
}
.service__card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--tj-color-theme-bg1);
opacity: 0.9;
border-radius: 16px;
z-index: -1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.service__card::after {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__card::after {
border-radius: 12px;
}
}
.service__card__pattern {
position: absolute;
top: 30px;
right: 30px;
opacity: 0;
z-index: 1;
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
-moz-transition: all var(--tj-td-standard) ease-in-out 0s;
-ms-transition: all var(--tj-td-standard) ease-in-out 0s;
-o-transition: all var(--tj-td-standard) ease-in-out 0s;
transition: all var(--tj-td-standard) ease-in-out 0s;
}
.service__card__pattern img {
width: 134px;
}
.service__card .tj-btn-2 i {
color: var(--tj-color-heading-primary);
}
.service__card .tj-btn-2:hover i {
color: var(--tj-color-common-white);
transform: rotate(0deg);
}
.service__card:hover {
background: url("../images/shape/service-card-bg.png") no-repeat center;
background-size: cover;
}
.service__card:hover::after {
background-color: var(--tj-color-theme-secondary);
}
.service__card:hover .service__card__pattern {
opacity: 1;
}
.service__card:hover .service__title {
color: var(--tj-color-common-white);
}
.service__card:hover .service__title a {
color: var(--tj-color-common-white);
}
.service__card:hover .service__desc {
color: var(--tj-color-common-white);
}
.service__card:hover .service__icon {
background-color: var(--tj-color-theme-primary);
border-color: var(--tj-color-theme-primary);
}
.service__card:hover .service__icon i {
color: var(--tj-color-common-white);
transform: scaleX(-1);
}
.service__card:hover .tj-btn-2 {
color: var(--tj-color-common-white);
}
.service__card:hover .tj-btn-2 i {
color: var(--tj-color-common-white);
}
.service__card.style-2::after {
background-color: var(--tj-color-common-white);
}
.service__card.style-2:hover::after {
background-color: var(--tj-color-theme-secondary);
}
/* !END: Service CSS */
/**----------------------------------------
START: Portfolio CSS
----------------------------------------*/
.portfolio__single {
border-radius: 16px;
position: relative;
overflow: hidden;
z-index: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.portfolio__single {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__single {
border-radius: 12px;
}
}
.portfolio__single::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: var(--tj-color-theme-dark);
opacity: 0;
z-index: 1;
}
.portfolio__single__action a {
position: absolute;
top: 30px;
right: 30px;
width: 60px;
height: 60px;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: transparent;
transform: translateX(100%);
opacity: 0;
border: 1px solid var(--tj-color-common-white);
border-radius: 100%;
line-height: 1;
z-index: 2;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.portfolio__single__action a {
top: 20px;
right: 20px;
width: 40px;
height: 40px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__single__action a {
top: 20px;
right: 20px;
width: 40px;
height: 40px;
}
}
.portfolio__single__action a i {
display: inline-block;
font-size: 16px;
color: var(--tj-color-common-white);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.portfolio__single__action a i {
font-size: 14px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__single__action a i {
font-size: 13px;
}
}
.portfolio__single__action a:hover {
border-color: var(--tj-color-theme-primary);
background-color: var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
transform: translateX(0) rotate(360deg) !important;
}
.portfolio__single__action a:hover i {
color: var(--tj-color-common-white);
}
.portfolio__single__img {
overflow: hidden;
}
.portfolio__single__img img {
width: 100%;
}
.portfolio__single__content {
position: absolute;
padding: 30px 30px 24px;
left: 0;
right: 0;
bottom: 0;
transform: translateX(-100%);
opacity: 0;
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
-moz-transition: all var(--tj-td-standard) ease-in-out 0s;
-ms-transition: all var(--tj-td-standard) ease-in-out 0s;
-o-transition: all var(--tj-td-standard) ease-in-out 0s;
transition: all var(--tj-td-standard) ease-in-out 0s;
z-index: 2;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__single__content {
padding: 20px;
}
}
.portfolio__single__tag {
font-family: var(--tj-ff-body);
display: inline-flex;
justify-content: center;
align-items: center;
padding: 3px 6px 3px;
background-color: transparent;
border: 1px solid var(--tj-color-border-5);
color: var(--tj-color-common-white);
font-size: 16px;
line-height: 1;
letter-spacing: 2%;
border-radius: 6px;
margin-bottom: 16px;
overflow: hidden;
text-shadow: 0 23px 0 var(--tj-color-common-white);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__single__tag {
font-size: 14px;
border-radius: 4px;
margin-bottom: 12px;
}
}
.portfolio__single__tag span {
transition: all 0.3s ease-in-out;
}
.portfolio__single__tag:hover {
background-color: var(--tj-color-theme-primary);
border-color: var(--tj-color-theme-primary);
}
.portfolio__single__tag:hover span {
transform: translateY(-24px);
}
.portfolio__single__title {
color: var(--tj-color-common-white);
}
.portfolio__single__title a {
display: inline;
line-height: inherit;
background-size: 0 1px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.portfolio__single__title {
font-size: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__single__title {
font-size: 18px;
}
}
.portfolio__single__title:hover a {
letter-spacing: 0.3px;
}
.portfolio__single:hover::after {
opacity: 0.5;
}
.portfolio__single:hover .portfolio__single__img img {
transform: scale(1.2);
}
.portfolio__single:hover .portfolio__single__action a {
transform: translateX(0) rotate(315deg);
opacity: 1;
}
.portfolio__single:hover .portfolio__single__content {
transform: translateX(0);
opacity: 1;
}
.portfolio__single:hover .portfolio__single__tag {
color: var(--tj-color-common-white);
}
.portfolio .section-heading__sub-title {
background-color: var(--tj-color-common-white);
}
.portfolio--2 .portfolio__single {
display: flex;
gap: 30px;
margin-bottom: 30px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--2 .portfolio__single {
gap: 20px;
margin-bottom: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--2 .portfolio__single {
flex-direction: column;
align-items: center;
}
.portfolio--2 .portfolio__single .tj-u-shape {
left: 50%;
top: 100%;
transform: translateX(-50%) translateY(-15px) rotate(90deg);
}
}
.portfolio--2 .portfolio__single:last-child {
margin-bottom: 0;
}
.portfolio--2 .portfolio__single::after {
display: none;
}
.portfolio--2 .portfolio__single:hover .portfolio__single__img img {
transform: scale(1);
}
.portfolio--2 .portfolio__single:hover .portfolio__single__title a {
letter-spacing: inherit;
color: var(--tj-color-theme-primary);
}
.portfolio--2 .portfolio__single:hover .portfolio__single__tag {
color: var(--tj-color-theme-secondary);
border-color: var(--tj-color-theme-secondary);
}
.portfolio--2 .portfolio__single__img {
overflow: hidden;
border-radius: 10px;
height: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.portfolio--2 .portfolio__single__img {
max-width: 330px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.portfolio--2 .portfolio__single__img {
max-width: 300px;
}
}
.portfolio--2 .portfolio__single__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.portfolio--2 .portfolio__single__content {
padding: 0;
position: static;
transform: none;
padding: 30px;
padding-right: 13px;
opacity: 1;
visibility: visible;
}
@media (max-width: 575px) {
.portfolio--2 .portfolio__single__content {
padding: 30px 5px 15px;
}
}
.portfolio--2 .portfolio__single__content__wrapper {
display: grid;
grid-template-columns: 52.3% 47.7%;
align-items: center;
position: relative;
padding: 15px;
background-color: var(--tj-color-common-white);
border-radius: 16px;
}
@media (max-width: 575px) {
.portfolio--2 .portfolio__single__content__wrapper {
grid-template-columns: 100%;
}
}
.portfolio--2 .portfolio__single__content__wrapper .tj-u-shape {
background-color: var(--tj-color-common-white);
}
.portfolio--2 .portfolio__single__content__wrapper .tj-u-shape::before, .portfolio--2 .portfolio__single__content__wrapper .tj-u-shape::after {
background-color: var(--tj-color-theme-bg1);
}
.portfolio--2 .portfolio__single__content__wrapper:hover .portfolio__single__img img {
transform: scale(1.2);
}
.portfolio--2 .portfolio__single__tag {
color: var(--tj-color-theme-secondary);
background: var(--tj-color-theme-bg1);
border: 0;
}
.portfolio--2 .portfolio__single__tag:hover {
color: var(--tj-color-common-white) !important;
background-color: var(--tj-color-theme-secondary);
}
.portfolio--2 .portfolio__single__title {
color: var(--tj-color-heading-primary);
margin-bottom: 18px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.portfolio--2 .portfolio__single__title {
font-size: 22px;
margin-bottom: 14px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--2 .portfolio__single__title {
font-size: 20px;
margin-bottom: 12px;
}
}
.portfolio--2 .portfolio__single__desc {
margin-bottom: 24px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.portfolio--2 .portfolio__single__desc {
margin-bottom: 14px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--2 .portfolio__single__desc {
margin-bottom: 12px;
}
}
.portfolio--2 .portfolio__single__counter {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
max-width: 485px;
width: 100%;
background-color: var(--tj-color-common-white);
border-radius: 16px;
gap: 16px;
text-align: center;
padding: 30px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.portfolio--2 .portfolio__single__counter {
padding: 20px;
gap: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--2 .portfolio__single__counter {
justify-content: stretch;
padding: 15px;
gap: 12px;
}
}
@media (max-width: 575px) {
.portfolio--2 .portfolio__single__counter {
justify-content: stretch;
padding: 12px;
gap: 8px;
}
}
.portfolio--2 .portfolio__single__counter__item {
flex: 0 1 calc(33% - 11px);
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.portfolio--2 .portfolio__single__counter__item {
flex: 0 1 calc(33% - 6.5px);
}
}
@media (max-width: 575px) {
.portfolio--2 .portfolio__single__counter__item {
flex: 0 1 calc(33% - 4.5px);
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--2 .portfolio__single__counter__item:has(.number) .text {
font-size: 14px;
}
}
@media (max-width: 575px) {
.portfolio--2 .portfolio__single__counter__item:has(.number) .text {
font-size: 12px;
}
}
.portfolio--2 .portfolio__single__counter .number {
padding: 30px 20px;
background: var(--tj-color-theme-bg5);
color: var(--tj-color-theme-dark);
display: flex;
align-content: center;
justify-content: center;
border-radius: 10px;
margin-bottom: 24px;
font-size: 32px;
font-weight: var(--tj-fw-bold);
position: relative;
z-index: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--2 .portfolio__single__counter .number {
padding: 20px 15px;
font-size: 20px;
margin-bottom: 18px;
}
}
.portfolio--2 .portfolio__single__counter .number::after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: var(--tj-color-theme-bg5);
z-index: 1;
}
.portfolio--2 .portfolio__single__counter .number span {
line-height: 1;
}
.portfolio--2 .portfolio__single__counter .number .odometer-symbol {
transform: translateY(3px);
}
.portfolio--2 .portfolio__single:nth-child(2n) .portfolio__single__counter .number {
background: var(--tj-color-theme-bg2);
}
.portfolio--2 .portfolio__single:nth-child(2n) .portfolio__single__counter .number::after {
border-top-color: var(--tj-color-theme-bg2);
}
.portfolio--2 .portfolio__single:nth-child(3n) .portfolio__single__counter .number {
background: var(--tj-color-theme-bg6);
}
.portfolio--2 .portfolio__single:nth-child(3n) .portfolio__single__counter .number::after {
border-top-color: var(--tj-color-theme-bg6);
}
.portfolio--2 .portfolio__single:nth-child(4n) .portfolio__single__counter .number {
background: var(--tj-color-theme-bg7);
}
.portfolio--2 .portfolio__single:nth-child(4n) .portfolio__single__counter .number::after {
border-top-color: var(--tj-color-theme-bg7);
}
.portfolio--2 .portfolio__single:nth-child(5n) .portfolio__single__counter .number {
background: var(--tj-color-theme-bg5);
}
.portfolio--2 .portfolio__single:nth-child(5n) .portfolio__single__counter .number::after {
border-top-color: var(--tj-color-theme-bg5);
}
.portfolio--3 .portfolio__slider__3 {
overflow: inherit;
}
.portfolio--3 .portfolio__single {
padding: 20px;
background: var(--tj-color-common-white);
}
.portfolio--3 .portfolio__single__img {
border-radius: 16px;
overflow: hidden;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.portfolio--3 .portfolio__single__img {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--3 .portfolio__single__img {
border-radius: 10px;
}
}
.portfolio--3 .portfolio__single__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.portfolio--3 .portfolio__single__content {
position: static;
transform: none;
opacity: 1;
visibility: visible;
padding: 0;
padding-top: 20px;
display: flex;
gap: 10px;
justify-content: space-between;
align-items: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--3 .portfolio__single__content {
padding: 0;
padding-top: 20px;
}
}
@media (max-width: 575px) {
.portfolio--3 .portfolio__single__content {
flex-wrap: wrap;
justify-content: space-between;
}
}
.portfolio--3 .portfolio__single__tag {
border-radius: 50px;
border-color: var(--tj-color-border-1);
color: var(--tj-color-heading-primary);
font-size: 14px;
}
.portfolio--3 .portfolio__single__tag:hover {
border-color: var(--tj-color-theme-primary) !important;
color: var(--tj-color-common-white) !important;
}
.portfolio--3 .portfolio__single__title {
color: var(--tj-color-heading-primary);
max-width: 350px;
}
.portfolio--3 .portfolio__single__title:hover a {
letter-spacing: inherit;
color: var(--tj-color-theme-primary);
}
.portfolio--3 .portfolio__single::after {
display: none;
}
.portfolio--3 .portfolio__single__action a {
visibility: visible;
opacity: 1;
position: static;
transform: none;
border-color: var(--tj-color-border-1);
color: var(--tj-color-heading-primary);
transform: rotate(-45deg);
}
.portfolio--3 .portfolio__single__action a i {
color: var(--tj-color-heading-primary);
}
.portfolio--3 .portfolio__single__action a:hover {
border-color: transparent;
}
.portfolio--3 .portfolio__single__action a:hover i {
color: var(--tj-color-common-white);
}
.portfolio--3 .portfolio__single:hover .portfolio__single__tag {
border-color: var(--tj-color-border-1);
color: var(--tj-color-heading-primary);
}
.portfolio--3 .portfolio__single:hover .portfolio__single__action a {
background: var(--tj-color-theme-primary);
transform: rotate(315deg);
}
.portfolio--3 .portfolio__single:hover .portfolio__single__action a i {
color: var(--tj-color-common-white);
}
.portfolio--4 .portfolio__single {
background-color: var(--tj-color-theme-bg1);
}
.portfolio--4 .portfolio__single__content {
align-items: flex-end;
}
.portfolio--4 .portfolio__single__title {
margin-bottom: 0;
}
.portfolio--4 .portfolio__single__title a:hover {
color: var(--tj-color-theme-primary);
}
.portfolio--4 .portfolio__single__tag {
border-radius: 6px;
color: var(--tj-color-theme-secondary);
background-color: var(--tj-color-common-white);
}
.portfolio--4 .portfolio__single__tag:hover {
border-color: var(--tj-color-theme-secondary) !important;
background-color: var(--tj-color-theme-secondary) !important;
color: var(--tj-color-common-white) !important;
}
.portfolio--4 .portfolio__single:hover .portfolio__single__tag {
color: var(--tj-color-theme-secondary);
}
@media (max-width: 575px) {
.portfolio__slider__wrapper {
padding: 0 15px;
}
}
/* !END: Portfolio CSS */
/* Circle Number Badge */
.card-circle {
width: 50px;
height: 50px;
background: #0d6efd;
color: white;
border-radius: 50%;
text-align: center;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -20px;
left: 20px;
font-size: 16px;
}
/* Card Title */
.card-title {
font-weight: bold;
margin-top: 40px;
color: #0c1c39;
}
/* Card Text */
.card-text {
color: #60697b;
font-size: 14px;
}
/* Left and Right Cutout Effect */
.custom-card::before,
.custom-card::after {
content: "";
position: absolute;
top: 50%;
width: 40px;
height: 40px;
background: #f8f9fa;
border-radius: 50%;
transform: translateY(-50%);
}
.custom-card::before {
left: -20px;
}
.custom-card::after {
right: -20px;
}
/* !END: Portfolio CSS */
/**----------------------------------------
START: Faq CSS
----------------------------------------*/
.tj-faq .accordion {
width: 100%;
margin: 0 auto;
}
.tj-faq .accordion-item {
position: relative;
z-index: 2;
box-shadow: none;
margin-bottom: 20px;
background: transparent;
border: 1px solid var(--tj-color-border-1);
border-radius: 15px;
color: var(--tj-color-text-body);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.tj-faq .accordion-item {
margin-bottom: 15px;
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-faq .accordion-item {
margin-bottom: 12px;
border-radius: 10px;
}
}
@media (max-width: 575px) {
.tj-faq .accordion-item {
font-size: 14px;
}
}
.tj-faq .accordion-item .faq-title {
font-size: 20px;
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-bold);
padding: 20px 55px 20px 30px;
background-color: transparent;
position: relative;
color: var(--tj-color-heading-primary);
width: 100%;
text-align: left;
letter-spacing: -0.02em;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.tj-faq .accordion-item .faq-title {
font-size: 18px;
padding: 15px 36px 15px 24px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-faq .accordion-item .faq-title {
font-size: 16px;
padding: 14px 36px 14px 16px;
}
}
@media (max-width: 575px) {
.tj-faq .accordion-item .faq-title {
font-size: 18px;
}
}
.tj-faq .accordion-item .faq-title::before {
content: "\e932";
position: absolute;
top: 35px;
right: 22px;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
font-family: var(--tj-ff-ranko-icons);
font-size: 27px;
color: var(--tj-white);
font-weight: var(--tj-fw-medium);
line-height: 1;
transition: all 0.3s ease-in-out 0s;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.tj-faq .accordion-item .faq-title::before {
top: 30px;
right: 24px;
font-size: 25px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tj-faq .accordion-item .faq-title::before {
font-size: 25px;
top: 24px;
right: 16px;
}
}
@media (max-width: 575px) {
.tj-faq .accordion-item .faq-title::before {
font-size: 22px;
top: 30px;
right: 10px;
}
}
.tj-faq .accordion-item.active {
background: var(--tj-color-theme-bg1);
}
.tj-faq .accordion-item.active .faq-title {
color: var(--tj-color-theme-secondary);
}
.tj-faq .accordion-item.active .faq-title::before {
content: "\e933";
}
.tj-faq .accordion-item.active .accordion-body {
border-color: var(--tj-color-border-1);
}
.tj-faq .accordion-item:last-child {
margin-bottom: 0;
}
.tj-faq .accordion-body {
padding: 20px 0 23px;
margin: 0 30px;
border-top: 1px solid transparent;
}
.tj-faq .accordion-body P {
margin-bottom: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.tj-faq .accordion-body {
padding: 18px 0 20px;
margin: 0 24px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-faq .accordion-body {
padding: 14px 0 16px;
margin: 0 16px;
}
}
.tj-faq-2 .accordion-item {
background-color: var(--tj-color-common-white);
}
.tj-faq-2 .accordion-item.active {
background: var(--tj-color-common-white);
}
/* !END: Faq CSS */
/**----------------------------------------
START: Process CSS
----------------------------------------*/
.process__single {
padding: 40px;
border-radius: 16px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--tj-color-theme-bg4);
margin-bottom: 30px;
position: relative;
z-index: 2;
overflow: hidden;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.process__single {
padding: 30px;
border-radius: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__single {
margin-bottom: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__single {
display: grid;
grid-template-rows: auto auto auto;
padding: 30px 24px 24px;
border-radius: 10px;
}
}
@media (max-width: 575px) {
.process__single {
padding: 30px 15px 15px;
}
}
.process__single:last-child {
margin-bottom: 0;
}
.process__sl {
font-size: 70px;
color: transparent;
-webkit-text-stroke: 1px var(--tj-color-common-white);
letter-spacing: -2.5%;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.process__sl {
font-size: 36px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.process__sl {
font-size: 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__sl {
font-size: 40px;
margin-bottom: 18px;
}
}
.process__img {
width: 301px;
transform: translateY(40px);
max-height: 135.2px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.process__img {
width: 250px;
max-height: 112.3px;
transform: translateY(30px);
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.process__img {
max-width: 200px;
transform: translateY(37px);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.process__img {
width: 100%;
margin-top: 10px;
transform: translateY(21px);
text-align: center;
}
}
@media (max-width: 575px) {
.process__img {
width: 100%;
margin-top: 10px;
transform: translateY(15px);
text-align: center;
}
}
.process__img--excution img {
transform: translateY(-37px);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.process__img--excution img {
transform: translateY(-31px);
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.process__img--excution img {
transform: translateY(-7px);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__img--excution img {
transform: translateY(-15px);
grid-row: 3/4;
}
}
.process__content {
max-width: 366px;
color: var(--tj-color-border-1);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.process__content {
max-width: 320px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.process__content {
max-width: 233px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__content {
grid-row: 2/3;
max-width: 100%;
}
}
.process__title {
color: var(--tj-color-common-white);
margin-bottom: 16px;
font-size: 24px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.process__title {
font-size: 20px;
margin-bottom: 10px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__title {
font-size: 24px;
margin-bottom: 8px;
}
}
.process__desc {
margin-bottom: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.process__desc {
font-size: 14px;
}
}
.process-2__inner {
display: flex;
flex-wrap: wrap;
gap: 20px 106px;
align-items: center;
justify-content: center;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.process-2__inner {
gap: 20px 50px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__inner {
gap: 20px 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__inner {
gap: 20px;
}
}
.process-2__index {
width: 57.6px;
height: 57.6px;
background: var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
border-radius: 50%;
text-align: center;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
outline: 7px solid var(--tj-color-common-white);
margin-bottom: 27px;
transition: all 0.3s linear;
}
.process-2__title {
margin-bottom: 16px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.process-2__title {
font-size: 20px;
margin-bottom: 10px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__title {
font-size: 18px;
margin-bottom: 8px;
}
}
.process-2__desc {
margin-bottom: 0px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.process-2__desc {
font-size: 14px;
margin-bottom: 0px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__desc {
font-size: 14px;
margin-bottom: 0px;
}
}
.process-2__single {
flex: 0 1 calc(33.3333% - 70.668px);
background: var(--tj-color-theme-bg1);
border-radius: 16px;
padding: 44px 40px 40px;
position: relative;
z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.process-2__single {
flex: 0 1 calc(33.3333% - 33.34px);
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__single {
flex: 0 1 calc(33.3333% - 20px);
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__single {
flex: 0 1 calc(33.3333% - 13.5px);
padding: 30px 25px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__single {
flex: 0 1 100%;
}
}
.process-2__single__shape::before, .process-2__single__shape::after {
content: "";
position: absolute;
top: 50%;
width: 25px;
height: 80px;
background: var(--tj-color-common-white);
transform: translateY(-50%);
mask-image: url("../images/icons/shape.svg");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: right;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__single__shape::before, .process-2__single__shape::after {
width: 18px;
height: 42px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__single__shape::before, .process-2__single__shape::after {
left: 50%;
right: auto;
transform: translateX(-50%) translateY(0) rotate(90deg);
}
}
.process-2__single__shape::before {
left: 0;
transform: translateY(-50%) scale(-1);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__single__shape::before {
top: 0;
right: auto;
left: 50%;
transform: translateX(-50%) translateY(-12px) rotate(-90deg);
}
}
.process-2__single__shape::after {
right: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__single__shape::after {
right: auto;
top: auto;
bottom: 0;
transform: translateX(-50%) translateY(12px) rotate(90deg);
}
}
.process-2__single::after {
content: "\e901";
font-family: var(--tj-ff-ranko-icons);
position: absolute;
left: 100%;
top: 50%;
transform: translate(56%, -50%);
color: var(--tj-color-theme-dark);
font-size: 12px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.process-2__single::after {
transform: translate(26%, -50%);
font-size: 9px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.process-2__single::after {
transform: translate(3%, -50%);
font-size: 7px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__single::after {
transform: translate(-5%, -50%);
font-size: 5px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__single::after {
left: 50%;
top: 100%;
transform: translate(-47%, 60%) rotate(90deg);
}
}
.process-2__single:last-child::after {
display: none;
}
.process-2__single:nth-child(2) .process-2__index {
background: var(--tj-color-theme-secondary);
}
.process-2__single:nth-child(3) .process-2__index {
background: var(--tj-color-theme-dark);
}
.process-2__single:hover .process-2__index {
animation: shakeAnimation 0.2s ease-out;
}
@keyframes fadeInBottomMobile {
0% {
opacity: 0;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
transform: translateY(0);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__inner .fadeInLeft {
-webkit-animation-name: fadeInBottomMobile;
animation-name: fadeInBottomMobile;
}
}
/* !END: Process CSS */
/**----------------------------------------
START: Testimonials CSS
----------------------------------------*/
.testimonials__slider .swiper-wrapper {
padding-top: 30px;
}
.testimonials__slider__item {
padding: 100px 40px 50px;
background-color: var(--tj-color-theme-bg1);
border: 1px solid var(--tj-color-border-1);
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__slider__item {
padding: 60px 30px 30px;
}
}
@media (max-width: 575px) {
.testimonials__slider__item {
padding: 60px 20px 24px;
}
}
.testimonials__slider__item:hover .testimonials__qoute i {
transform: scaleX(-1) translateY(-10px);
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__slider__item:hover .testimonials__qoute i {
transform: scaleX(-1) translateY(0px);
}
}
.testimonials__qoute {
width: 100px;
height: 100px;
background-color: var(--tj-color-common-white);
color: var(--tj-color-theme-secondary);
border: 1px solid var(--tj-color-border-1);
border-radius: 100%;
font-size: 55px;
line-height: 1;
display: inline-flex;
justify-content: center;
align-items: center;
position: absolute;
left: 40px;
top: -30px;
z-index: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.testimonials__qoute {
width: 80px;
height: 80px;
font-size: 40px;
top: -40px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__qoute {
width: 75px;
height: 75px;
font-size: 40px;
top: -40px;
}
}
@media (max-width: 575px) {
.testimonials__qoute {
top: -30px;
}
}
.testimonials__qoute i {
position: relative;
z-index: 2;
transform: translateY(-10px);
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__qoute i {
transform: translateY(-2px);
}
}
@media (max-width: 575px) {
.testimonials__qoute i {
transform: translateY(-1px);
}
}
.testimonials__qoute::after {
content: "";
position: absolute;
left: -2px;
top: -2px;
width: 105%;
height: 30px;
background-color: var(--tj-color-common-white);
z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__qoute::after {
top: 8px;
}
}
@media (max-width: 575px) {
.testimonials__qoute::after {
left: -1px;
top: -2px;
}
}
.testimonials__rating {
margin-bottom: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__rating {
margin-bottom: 8px;
}
}
.testimonials__desc {
font-size: 22px;
padding-bottom: 24px;
margin-bottom: 20px;
border-bottom: 1px solid var(--tj-color-border-1);
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__desc {
font-size: 18px;
}
}
@media (max-width: 575px) {
.testimonials__desc {
font-size: 16px;
padding-bottom: 18px;
margin-bottom: 14px;
}
}
.testimonials__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.testimonials__footer__logo {
width: 80px;
}
@media (max-width: 575px) {
.testimonials__footer__logo {
width: 60px;
}
}
.testimonials__author {
display: flex;
align-items: center;
gap: 10px;
}
@media (max-width: 575px) {
.testimonials__author {
gap: 8px;
}
}
.testimonials__author__avatar {
max-width: 50px;
border-radius: 8px;
border: 2px solid var(--tj-color-common-white);
overflow: hidden;
}
@media (max-width: 575px) {
.testimonials__author__avatar {
max-width: 40px;
border-radius: 6px;
}
}
.testimonials__author__avatar img {
width: 100%;
}
.testimonials__author__name {
font-size: 20px;
margin-bottom: 4px;
}
@media (max-width: 575px) {
.testimonials__author__name {
font-size: 16px;
margin-bottom: 2px;
}
}
.testimonials__author__desig {
font-size: 14px;
margin-bottom: 0;
}
@media (max-width: 575px) {
.testimonials__author__desig {
font-size: 12px;
}
}
.testimonials--3 .brand-marquee__inner {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
.testimonials--3 .swiper {
padding-bottom: 0;
height: 100%;
}
.testimonials--3 .swiper-wrapper {
height: 100%;
}
.testimonials--3 .swiper-slide {
height: 100%;
}
.testimonials--3 .swiper-pagination {
bottom: 50px;
right: 30px;
left: auto;
text-align: right;
}
.testimonials--3 .testimonials__slider__3 {
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.testimonials--3 .testimonials__slider__3 {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--3 .testimonials__slider__3 {
border-radius: 10px;
}
}
.testimonials--3 .testimonials__slider__wrapper {
display: flex;
gap: 30px;
overflow: hidden;
flex-wrap: nowrap;
padding: 0 30px 45px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.testimonials--3 .testimonials__slider__wrapper {
padding: 0 30px 45px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.testimonials--3 .testimonials__slider__wrapper {
padding: 0 20px 35px;
flex-direction: column;
align-items: center;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--3 .testimonials__slider__wrapper {
padding: 0 15px 25px;
flex-direction: column;
align-items: center;
}
}
.testimonials--3 .testimonials__slider__item {
border: 0;
background-color: var(--tj-color-common-white);
padding: 50px 30px 50px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--3 .testimonials__slider__item {
padding: 30px;
}
}
@media (max-width: 575px) {
.testimonials--3 .testimonials__slider__item {
padding: 30px 15px;
}
}
.testimonials--3 .testimonials__slider:hover .testimonials__qoute i {
transform: unset;
}
.testimonials--3 .testimonials__left {
max-width: 390px;
width: 100%;
height: 100%;
border-radius: 16px;
border-bottom-right-radius: 0;
overflow: hidden;
flex-shrink: 0;
position: relative;
height: 100%;
z-index: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.testimonials--3 .testimonials__left {
border-radius: 12px;
border-bottom-right-radius: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--3 .testimonials__left {
border-radius: 10px;
border-bottom-right-radius: 0;
}
}
.testimonials--3 .testimonials__left img {
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.testimonials--3 .testimonials__left img {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--3 .testimonials__left img {
border-radius: 10px;
}
}
.testimonials--3 .testimonials__right {
width: calc(100% - 420px);
overflow: hidden;
position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--3 .testimonials__right {
width: 100%;
}
}
.testimonials--3 .testimonials__navigation {
position: absolute;
right: 0;
bottom: 0;
display: flex;
gap: 12px;
border-top-left-radius: 16px;
align-items: center;
padding: 20px 0 0 18px;
background-color: var(--tj-color-theme-bg1);
z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.testimonials--3 .testimonials__navigation {
border-top-left-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--3 .testimonials__navigation {
border-top-left-radius: 10px;
}
}
.testimonials--3 .testimonials__navigation::before, .testimonials--3 .testimonials__navigation::after {
content: "";
background: var(--tj-color-theme-bg1);
mask-image: url('data:image/svg+xml,');
position: absolute;
width: 16px;
height: 16px;
transform: scale(-1);
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.testimonials--3 .testimonials__navigation::before, .testimonials--3 .testimonials__navigation::after {
width: 12px;
height: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--3 .testimonials__navigation::before, .testimonials--3 .testimonials__navigation::after {
width: 10px;
height: 10px;
}
}
.testimonials--3 .testimonials__navigation::after {
right: 0;
top: -16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.testimonials--3 .testimonials__navigation::after {
top: -12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--3 .testimonials__navigation::after {
top: -10px;
}
}
.testimonials--3 .testimonials__navigation::before {
left: -16px;
bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.testimonials--3 .testimonials__navigation::before {
left: -12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--3 .testimonials__navigation::before {
left: -10px;
}
}
.testimonials--3 .testimonials-nav-prev, .testimonials--3 .testimonials-nav-next {
width: 40px;
height: 40px;
display: inline-flex;
justify-content: center;
align-items: center;
background: var(--tj-color-common-white);
border-radius: 4px;
}
.testimonials--3 .testimonials-nav-prev:hover, .testimonials--3 .testimonials-nav-next:hover {
background-color: var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
}
.testimonials--3 .testimonials__qoute {
border: 0;
color: var(--tj-color-theme-bg1);
background: transparent;
width: 244px;
height: 244px;
font-size: 300px;
line-height: 1;
top: 5%;
left: 50%;
transform: translateX(-50%) rotate(180deg);
z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.testimonials--3 .testimonials__qoute {
width: 200px;
height: 200px;
font-size: 200px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--3 .testimonials__qoute {
width: 150px;
height: 150px;
font-size: 150px;
}
}
.testimonials--3 .testimonials__qoute i {
transform: unset;
}
.testimonials--3 .testimonials__qoute::after {
display: none;
}
.testimonials--3 .testimonials__qoute img {
width: 100%;
}
.testimonials--3 .testimonials__desc {
font-size: 28px;
color: var(--tj-color-heading-primary);
text-align: justify;
hyphens: auto;
overflow-wrap: break-word;
line-height: 1.5;
font-family: var(--tj-ff-heading);
letter-spacing: -0.02em;
font-weight: var(--tj-fw-medium);
padding-right: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.testimonials--3 .testimonials__desc {
font-size: 26px;
padding-right: 0px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.testimonials--3 .testimonials__desc {
font-size: 24px;
padding-right: 0px;
}
}
@media (max-width: 575px) {
.testimonials--3 .testimonials__desc {
font-size: 20px;
padding-right: 0px;
}
}
.testimonials--4 {
padding: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.testimonials--4 {
padding: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.testimonials--4 {
padding: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--4 {
padding: 0;
}
}
.testimonials--4 .testimonials__slider__item {
background-color: var(--tj-color-common-white);
border: 0;
}
.testimonials--4 .testimonials__qoute {
background-color: var(--tj-color-theme-bg1);
border: 0;
}
.testimonials--4 .testimonials__qoute::after {
background-color: transparent;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.ranko-bg-shape.elementor-element {
background-position: -101px -214px !important;
}
}
/* !END: Testimonials CSS */
/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.blog .row {
gap: 30px 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog .row {
gap: 20px 0;
}
}
.blog__single {
border-radius: 16px;
position: relative;
overflow: hidden;
z-index: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog__single {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single {
border-radius: 10px;
}
}
.blog__single__banner {
position: relative;
overflow: hidden;
}
.blog__single__date {
width: 80px;
height: 80px;
border-radius: 8px;
text-align: center;
overflow: hidden;
position: absolute;
left: 15px;
top: 15px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__date {
width: 70px;
height: 70px;
border-radius: 6px;
}
}
.blog__single__date__day {
font-size: 32px;
color: var(--tj-color-common-white);
background-color: var(--tj-color-theme-secondary);
margin-bottom: 0;
padding: 10px 0 12px;
line-height: 1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__date__day {
font-size: 24px;
padding: 11px 0 11px;
}
}
.blog__single__date__month {
padding: 6px 0 4px;
margin-bottom: 0;
background-color: var(--tj-color-common-white);
line-height: 1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__date__month {
font-size: 14px;
padding: 5px 0 5px;
}
}
.blog__single__content {
padding: 24px 24px 30px 30px;
background-color: var(--tj-color-common-white);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog__single__content {
padding: 20px 20px 24px 24px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__content {
padding: 16px 16px 20px 20px;
}
}
.blog__single__title {
margin-bottom: 18px;
font-size: 24px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog__single__title {
font-size: 20px;
margin-bottom: 14px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__title {
font-size: 20px;
margin-bottom: 12px;
}
}
.blog__single__title:hover a {
color: var(--tj-color-theme-primary);
}
.blog__single__desc {
margin-bottom: 24px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog__single__desc {
margin-bottom: 14px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__desc {
margin-bottom: 12px;
}
}
.blog__single:hover .blog__single__banner img {
transform: scale(1.2);
}
.blog-2 .blog__single {
background-color: var(--tj-color-theme-bg1);
}
.blog-2 .blog__single__wrapper {
display: grid;
gap: 30px;
grid-template-columns: repeat(auto-fill, minmax(calc(50% - 15px), 1fr));
justify-content: center;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-2 .blog__single__wrapper {
grid-template-columns: 100%;
}
}
.blog-2 .blog__single__banner {
border-radius: 10px;
margin: 15px;
}
@media (max-width: 575px) {
.blog-2 .blog__single__banner {
max-height: 208px;
margin-bottom: 0;
}
.blog-2 .blog__single__banner a {
height: 100%;
}
.blog-2 .blog__single__banner a img {
height: 100%;
object-fit: cover;
}
}
.blog-2 .blog__single__title {
margin-bottom: 20px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog-2 .blog__single__title {
margin-bottom: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-2 .blog__single__title {
margin-bottom: 16px;
}
}
.blog-2 .blog__single__content {
background: transparent;
padding-top: 20px;
}
.blog-2 .blog__single__content__list {
display: flex;
gap: 24px;
align-items: center;
margin-bottom: 16px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog-2 .blog__single__content__list {
margin-bottom: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-2 .blog__single__content__list {
margin-bottom: 12px;
}
}
.blog-2 .blog__single__content__list li {
position: relative;
}
.blog-2 .blog__single__content__list li::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
width: 4px;
height: 4px;
background-color: var(--tj-color-theme-dark);
border-radius: 100%;
transform: translate(10px, -50%);
}
.blog-2 .blog__single__content__list li:last-child::after {
display: none;
}
.blog-2 .blog__single__content__tag {
font-family: var(--tj-ff-body);
display: inline-flex;
justify-content: center;
align-items: center;
padding: 3px 6px 3px;
background-color: transparent;
border: 1px solid var(--tj-color-border-5);
color: var(--tj-color-theme-secondary);
background: var(--tj-color-theme-bg9);
font-size: 16px;
line-height: 1;
letter-spacing: 2%;
border-radius: 6px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog-2 .blog__single__content__tag {
font-size: 14px;
border-radius: 4px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-2 .blog__single__content__tag {
font-size: 14px;
border-radius: 4px;
}
}
.blog-2 .blog__single__content__tag:hover {
color: var(--tj-color-common-white) !important;
background-color: var(--tj-color-theme-secondary);
}
.blog-2 .blog__single__content__date {
color: var(--tj-color-text-body);
font-size: 14px;
}
.blog-2 .blog__single:first-child {
grid-row: 1/3;
}
.blog-2 .blog__single:first-child .blog__single__banner {
margin-bottom: 0;
}
.blog-2 .blog__single:first-child .blog__single__title {
font-size: 32px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.blog-2 .blog__single:first-child .blog__single__title {
font-size: 24px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.blog-2 .blog__single:first-child .blog__single__title {
font-size: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-2 .blog__single:first-child .blog__single__title {
font-size: 16px;
}
}
.blog-2 .blog__single:not(:first-child) {
display: flex;
grid-template-columns: 1fr 1fr;
align-items: center;
}
@media (max-width: 575px) {
.blog-2 .blog__single:not(:first-child) {
flex-direction: column;
align-items: flex-start;
}
}
.blog-2 .blog__single:not(:first-child) .blog__single__banner {
max-width: 323px;
width: 100%;
}
@media (max-width: 575px) {
.blog-2 .blog__single:not(:first-child) .blog__single__banner {
max-width: calc(100% - 30px);
}
}
.blog-2 .blog__single:not(:first-child) .blog__single__banner a {
height: 100%;
}
.blog-2 .blog__single:not(:first-child) .blog__single__banner a img {
height: 100%;
object-fit: cover;
}
@media (max-width: 575px) {
.blog-2 .blog__single:not(:first-child) .blog__single__content {
padding: 20px;
padding-right: 16px;
}
}
.blog-3 .blog__single {
border-radius: 0;
overflow: visible;
}
.blog-3 .blog__single__banner {
border-radius: 16px;
position: relative;
overflow: hidden;
z-index: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog-3 .blog__single__banner {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-3 .blog__single__banner {
border-radius: 10px;
}
}
.blog-3 .blog__single__content {
box-shadow: var(--tj-shadow-theme-primary);
border-radius: 16px;
position: relative;
margin: -50px 30px 0;
z-index: 1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog-3 .blog__single__content {
border-radius: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.blog-3 .blog__single__content {
margin: -40px 20px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-3 .blog__single__content {
border-radius: 10px;
margin: -40px 20px 0;
}
}
.blog-3 .blog__single__content__list {
display: flex;
gap: 24px;
align-items: center;
margin-bottom: 16px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog-3 .blog__single__content__list {
margin-bottom: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-3 .blog__single__content__list {
margin-bottom: 12px;
}
}
.blog-3 .blog__single__content__list li {
position: relative;
}
.blog-3 .blog__single__content__list li::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
width: 4px;
height: 4px;
background-color: var(--tj-color-theme-dark);
border-radius: 100%;
transform: translate(10px, -50%);
}
.blog-3 .blog__single__content__list li a:not(.blog__single__content__tag) {
color: var(--tj-color-text-body);
font-size: 14px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog-3 .blog__single__content__list li a:not(.blog__single__content__tag) {
font-size: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-3 .blog__single__content__list li a:not(.blog__single__content__tag) {
font-size: 12px;
}
}
.blog-3 .blog__single__content__list li a:not(.blog__single__content__tag):hover {
color: var(--tj-color-theme-primary);
}
.blog-3 .blog__single__content__list li:last-child::after {
display: none;
}
.blog-3 .blog__single__content__tag {
font-family: var(--tj-ff-body);
display: inline-flex;
justify-content: center;
align-items: center;
padding: 4px 6px 2px;
background-color: transparent;
border: 1px solid var(--tj-color-border-5);
color: var(--tj-color-theme-secondary);
background: var(--tj-color-theme-bg9);
font-size: 16px;
line-height: 1;
letter-spacing: 2%;
border-radius: 6px;
font-size: 14px;
font-weight: var(--tj-fw-medium);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog-3 .blog__single__content__tag {
font-size: 14px;
border-radius: 4px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-3 .blog__single__content__tag {
font-size: 14px;
border-radius: 4px;
}
}
.blog-3 .blog__single__content__tag:hover {
color: var(--tj-color-common-white) !important;
background-color: var(--tj-color-theme-secondary);
}
.blog-3 .blog__single__content__date {
color: var(--tj-color-text-body);
font-size: 14px;
}
.tj-post-container.blog__single__wrapper {
display: flex;
flex-direction: column;
gap: 30px;
}
.tj-post-container .blog__single {
background-color: transparent;
border-radius: 16px;
overflow: hidden;
}
@media (max-width: 575px) {
.tj-post-container .blog__single {
border-radius: 12px;
}
}
.tj-post-container .blog__single:has(.blog__single__banner) .blog__single__content {
border-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.tj-post-container .blog__single__title {
margin-bottom: 20px;
font-size: 32px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.tj-post-container .blog__single__title {
font-size: 28px;
margin-bottom: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-post-container .blog__single__title {
font-size: 25px;
margin-bottom: 16px;
}
}
.tj-post-container .blog__single__desc {
margin-bottom: 24px;
}
.tj-post-container .blog__single__content {
background: transparent;
padding: 30px;
border: 1px solid var(--tj-color-border-1);
border-radius: 16px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-post-container .blog__single__content {
padding: 20px;
}
}
@media (max-width: 575px) {
.tj-post-container .blog__single__content {
border-radius: 12px;
}
}
.tj-post-container .blog__single__content__list {
display: flex;
gap: 24px;
align-items: center;
margin-bottom: 16px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.tj-post-container .blog__single__content__list {
margin-bottom: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-post-container .blog__single__content__list {
margin-bottom: 12px;
}
}
.tj-post-container .blog__single__content__list li {
position: relative;
}
.tj-post-container .blog__single__content__list li::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
width: 4px;
height: 4px;
background-color: var(--tj-color-theme-dark);
border-radius: 100%;
transform: translate(10px, -50%);
}
.tj-post-container .blog__single__content__list li a:not(.blog__single__content__tag) {
color: var(--tj-color-text-body);
font-size: 14px;
}
.tj-post-container .blog__single__content__list li a:not(.blog__single__content__tag):hover {
color: var(--tj-color-theme-primary);
}
.tj-post-container .blog__single__content__list li:last-child::after {
display: none;
}
.tj-post-container .blog__single__content__tag {
font-family: var(--tj-ff-body);
display: inline-flex;
justify-content: center;
align-items: center;
padding: 3px 6px 3px;
background-color: transparent;
border: 1px solid var(--tj-color-border-5);
color: var(--tj-color-theme-secondary);
background: var(--tj-color-theme-bg9);
font-size: 16px;
font-weight: var(--tj-fw-medium);
line-height: 1;
letter-spacing: 2%;
border-radius: 6px;
}
.tj-post-container .blog__single__content__tag:hover {
color: var(--tj-color-common-white) !important;
background-color: var(--tj-color-theme-secondary);
}
.blog-gallery-slider.swiper {
padding: 0;
}
.elementor-widget .blog__single__banner {
position: relative;
overflow: hidden;
height: 275px;
}
.elementor-widget .blog__single__banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
.elementor-widget .blog-2 .blog__single:first-child .blog__single__banner {
height: 368px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.elementor-widget .blog-2 .blog__single:first-child .blog__single__banner {
height: 300px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.elementor-widget .blog-2 .blog__single:first-child .blog__single__banner {
height: 250px;
}
}
@media (max-width: 575px) {
.elementor-widget .blog-2 .blog__single:first-child .blog__single__banner {
height: auto;
}
}
.elementor-widget .blog-2 .blog__single:not(:first-child) .blog__single__banner {
height: calc(100% - 30px);
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.elementor-widget .blog-2 .blog__single:not(:first-child) .blog__single__banner {
margin-right: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.elementor-widget .blog-2 .blog__single:not(:first-child) .blog__single__banner {
height: 275px;
}
}
@media (max-width: 575px) {
.elementor-widget .blog-2 .blog__single:not(:first-child) .blog__single__banner {
height: auto;
}
}
/* !END: Blog CSS */
/**----------------------------------------
START: Service Marquee CSS
----------------------------------------*/
.service-marquee {
position: relative;
}
.service-marquee__slider {
padding-bottom: 0;
}
.service-marquee__slider .swiper-wrapper {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.service-marquee__item {
display: flex;
align-items: center;
gap: 50px;
}
.service-marquee__item.swiper-slide {
width: auto;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.service-marquee__item {
gap: 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.service-marquee__item {
gap: 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service-marquee__item {
gap: 20px;
}
}
.service-marquee__item .service-marquee__title {
font-size: 130px;
color: var(--tj-color-heading-primary);
letter-spacing: -0.03em;
margin-bottom: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.service-marquee__item .service-marquee__title {
font-size: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.service-marquee__item .service-marquee__title {
font-size: 80px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service-marquee__item .service-marquee__title {
font-size: 60px;
}
}
.service-marquee__item .service-marquee__img {
width: 68px;
animation: rotateImg2 6s infinite linear;
}
.service-marquee__item .service-marquee__img img {
width: 100%;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.service-marquee__item .service-marquee__img {
width: 58px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.service-marquee__item .service-marquee__img {
width: 48px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service-marquee__item .service-marquee__img {
width: 38px;
}
}
.service-marquee__item:nth-child(2n) .service-marquee__title {
color: transparent;
-webkit-text-stroke: 1px var(--tj-color-heading-primary);
text-stroke: 1px var(--tj-color-heading-primary);
opacity: 0.4;
}
@keyframes rotateImg2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
@keyframes rotateImg3 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* !END: Service Marquee CSS */
/**----------------------------------------
START: Strategy CSS
----------------------------------------*/
.strategy__tab__content__single {
position: relative;
z-index: 0;
}
.strategy__tab__slider {
padding-bottom: 0;
position: static;
}
.strategy__tab__slider__wrapper {
padding: 15px 20px;
border: 1px solid var(--tj-color-border-1);
border-radius: 24px;
position: relative;
}
.strategy__tab__slider__item button {
width: 100%;
padding: 20px 20px 16px;
display: flex;
flex-direction: column;
gap: 22.5px;
justify-content: center;
color: var(--tj-color-theme-dark3);
border-radius: 16px;
}
@media (max-width: 575px) {
.strategy__tab__slider__item button {
padding: 16px 6px;
}
}
.strategy__tab__slider__item button i {
font-size: 42px;
margin-bottom: 6px;
}
@media (max-width: 575px) {
.strategy__tab__slider__item button span {
font-size: 13px;
}
}
.strategy__tab__slider__item button .current-index {
z-index: 1;
position: relative;
z-index: 0;
}
.strategy__tab__slider__item button .current-index, .strategy__tab__slider__item button .current-index::before {
content: "";
width: 100%;
height: 6px;
border-radius: 6px;
background-color: var(--tj-color-theme-bg1);
}
.strategy__tab__slider__item button .current-index::before {
width: 0;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
transition: all 0.3s;
background-color: var(--tj-color-theme-secondary);
}
.strategy__tab__slider__item button:hover, .strategy__tab__slider__item button.active {
color: var(--tj-color-theme-dark);
background-color: var(--tj-color-theme-bg1);
}
.strategy__tab__slider__item button:hover i, .strategy__tab__slider__item button.active i {
color: var(--tj-color-theme-secondary);
}
.strategy__tab__slider__item button:hover .current-index::before, .strategy__tab__slider__item button.active .current-index::before {
width: 100%;
}
.strategy .swiper-button-prev, .strategy .swiper-button-next {
width: 50px;
height: 50px;
border: 1px solid var(--tj-color-border-1);
background: var(--tj-color-common-white);
border-radius: 100%;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.strategy .swiper-button-prev::after, .strategy .swiper-button-next::after {
font-family: "ranko-icons";
color: var(--tj-color-theme-dark);
font-size: 14px;
}
.strategy .swiper-button-prev {
left: 10px;
transform: translateX(-50%);
}
.strategy .swiper-button-prev::after {
content: "\e908";
}
.strategy .swiper-button-next {
right: 10px;
transform: translateX(50%);
}
.strategy .swiper-button-next::after {
content: "\e906";
}
.strategy .swiper-button-prev:hover, .strategy .swiper-button-next:hover {
border-color: var(--tj-color-theme-secondary);
background: var(--tj-color-theme-secondary);
}
.strategy .swiper-button-prev:hover::after, .strategy .swiper-button-prev:hover::after, .strategy .swiper-button-next:hover::after, .strategy .swiper-button-next:hover::after {
color: var(--tj-color-common-white);
}
.strategy .swiper-button-disabled {
opacity: 0;
cursor: not-allowed;
}
.strategy .swiper:hover .swiper-button-prev, .strategy .swiper:hover .swiper-button-next {
opacity: 1;
visibility: visible;
}
.strategy .swiper:hover .swiper-button-prev {
left: 0;
}
.strategy .swiper:hover .swiper-button-next {
right: 0;
}
.strategy .swiper:hover .swiper-button-disabled {
opacity: 0;
cursor: not-allowed;
}
.strategy__about {
position: absolute;
top: -40%;
left: 50%;
width: 100%;
transform: translate(-50%, -40%);
padding: 30px;
border-radius: 24px;
background-color: var(--tj-color-theme-bg1);
z-index: 1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.strategy__about {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.strategy__about {
padding: 80px 20px;
border-radius: 16px;
position: static;
transform: translate(0);
margin-top: 25px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.strategy__about {
padding: 60px 15px;
border-radius: 12px;
position: static;
transform: translate(0);
margin-top: 15px;
}
}
.strategy__about::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../images/about/bg-2.png") no-repeat bottom right;
border-radius: 24px;
z-index: -1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.strategy__about::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.strategy__about::after {
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.strategy__about::after {
border-radius: 16px;
}
}
.strategy__about__wrapper {
position: relative;
z-index: 1;
}
.strategy__about__wrapper .about__banner {
padding-right: 13px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.strategy__about__wrapper .about__banner {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-right: 0px;
}
}
.strategy__about__wrapper .about__banner > img {
border-radius: 0px;
}
@media (max-width: 575px) {
.strategy__about__wrapper .about__banner > img {
border-radius: 5px;
}
}
.strategy__about__wrapper .about__banner::after {
display: none;
}
.strategy__about__wrapper .about__banner__charts__img--bottom {
bottom: 50px;
left: 20px;
}
.strategy__about__wrapper .about__banner__charts__img--bottom img {
width: 244px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.strategy__about__wrapper .about__banner__charts__img--bottom img {
width: 180px;
}
}
.strategy__about__wrapper .about__content {
padding-left: 0;
max-width: 460px;
margin-left: -12px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.strategy__about__wrapper .about__content {
margin-left: 0px;
}
}
.strategy__about__wrapper .about__features ul {
grid-template-columns: 1fr;
}
.strategy__services {
padding-top: 475px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.strategy__services {
padding-top: 370px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.strategy__services {
padding-top: 80px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.strategy__services {
padding-top: 60px;
}
}
.strategy__services .section-heading__title {
color: var(--tj-color-common-white);
margin-bottom: 0;
}
.strategy__services .section-heading__desc {
color: var(--tj-color-common-white2);
}
.strategy .service__card {
background: transparent;
border: 1px solid var(--tj-color-border-7);
}
.strategy .service__card::after {
background: transparent;
}
.strategy .service__card__pattern {
display: none;
}
.strategy .service__card:hover .service__desc {
color: var(--tj-color-common-white2);
}
.strategy .service__title {
color: var(--tj-color-common-white);
}
.strategy .service__title a:hover {
color: var(--tj-color-theme-primary);
}
.strategy .service__desc {
color: var(--tj-color-common-white2);
margin-bottom: 0;
}
/* !END: Strategy CSS */
/**----------------------------------------
START: Team CSS
----------------------------------------*/
.team .section-heading__sub-title {
background: var(--tj-color-theme-bg3);
}
.team .section-heading__title {
color: var(--tj-color-common-white);
}
.team .swiper-pagination-bullet {
background-color: var(--tj-color-common-white);
}
.team .swiper-pagination-bullet:hover {
opacity: 1;
}
.team__socials {
position: absolute;
top: 7px;
left: 7px;
bottom: 7px;
right: 7px;
background-color: var(--tj-color-theme-dark3);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.team__socials .tj-socials--sm {
transform: translateY(-40px);
transition: all 0.3s;
}
.team__socials .tj-socials--sm ul {
gap: 8px;
}
.team__socials .tj-socials--sm ul li a {
width: 24px;
height: 24px;
background: var(--tj-color-common-white);
border-radius: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
}
.team__socials .tj-socials--sm ul li a i {
font-size: 14px;
color: var(--tj-color-heading-primary);
}
.team__socials .tj-socials--sm ul li a:hover {
background: var(--tj-color-theme-primary);
}
.team__socials .tj-socials--sm ul li a:hover i {
color: var(--tj-color-common-white);
}
.team__single__img {
margin-bottom: 20px;
position: relative;
z-index: 0;
}
.team__single__img .tj-el-image img {
border-radius: 16px;
width: 100%;
}
.team__single__title {
font-size: 20px;
text-align: center;
}
.team__single__title a {
color: var(--tj-color-common-white);
}
.team__single__title a:hover {
color: var(--tj-color-theme-primary);
}
.team__single__desig {
font-size: 14px;
color: var(--tj-color-common-white2);
text-align: center;
margin-bottom: 0;
}
.team__single:hover .team__socials {
opacity: 1;
visibility: visible;
}
.team__single:hover .team__socials .tj-socials--sm {
transform: translateY(0);
}
.team--main .team__single__title a {
color: var(--tj-color-heading-primary);
}
.team--main .team__single__title a:hover {
color: var(--tj-color-theme-primary);
}
.team--main .team__single__desig {
color: var(--tj-color-text-body);
}
/* !END: Team CSS */
/**----------------------------------------
START: Team Details CSS
----------------------------------------*/
.team-details__contact-info p {
color: var(--tj-color-theme-dark3);
margin-bottom: 0;
}
.team-details__contact-info a {
font-size: 20px;
color: var(--tj-color-heading-primary);
font-weight: var(--tj-fw-sbold);
margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details__contact-info a {
font-size: 14px;
}
}
.team-details__contact-info a:hover {
color: var(--tj-color-theme-primary);
}
.team-details__experience__list ul {
display: flex;
border: 1px solid var(--tj-color-border-1);
flex-wrap: wrap;
margin: 25px 0;
border-radius: var(--tj-br-md);
}
.team-details__experience__list ul li {
flex: 1 1 50%;
padding: 25px;
display: flex;
gap: 8px;
border: 1px solid var(--tj-color-border-1);
border-top: 0;
border-left: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details__experience__list ul li {
padding: 16px;
}
}
.team-details__experience__list ul li p {
margin-bottom: 0;
}
.team-details__experience__list ul li i {
color: var(--tj-color-theme-secondary);
position: relative;
margin-top: 6px;
}
.team-details__experience__list ul li:last-child {
border-right: 0;
}
.team-details__experience__list ul li:nth-child(2n) {
border-right: 0;
}
/* !END: Team Details CSS */
/**----------------------------------------
START: Package CSS
----------------------------------------*/
.package__tab__controllers {
flex-wrap: nowrap;
padding: 6px;
background: var(--tj-color-theme-bg1);
border: 1px solid var(--tj-color-border1);
border-radius: 100px;
gap: 0px;
position: relative;
overflow: hidden;
z-index: 2;
max-width: max-content;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package__tab__controllers {
padding: 5px;
}
}
.package__tab__controllers .active-bg {
position: absolute;
background-color: var(--tj-color-theme-secondary);
z-index: -1;
border-radius: 50px;
transition: all 0.5s ease;
}
.package__tab__controller {
background: transparent;
color: var(--tj-color-heading-primary);
font-size: 16px;
padding: 16px 20px;
border-radius: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
font-weight: var(--tj-fw-sbold);
line-height: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package__tab__controller {
font-size: 14px;
padding: 10px 15px;
}
}
.package__tab__controller.active {
background: transparent;
color: var(--tj-color-common-white);
}
.package__single {
padding: 30px;
background: var(--tj-color-theme-bg1);
border: 1px solid var(--tj-color-border-1);
border-radius: 16px;
overflow: hidden;
position: relative;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.package__single {
padding: 25px;
border-radius: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.package__single {
padding: 20px;
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package__single {
padding: 20px 15px;
border-radius: 10px;
}
}
.package__badge {
position: absolute;
top: 27px;
right: -90px;
padding: 6px 90px 5px;
background: var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
transform: rotate(45deg);
border: 1px solid var(--tj-color-common-white);
border-left: 0;
border-right: 0;
font-size: 14px;
font-weight: var(--tj-fw-medium);
line-height: 1;
}
.package__name {
font-size: 24px;
color: var(--tj-color-heading-primary);
font-weight: var(--tj-fw-bold);
margin-bottom: 24px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.package__name {
font-size: 22px;
margin-bottom: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.package__name {
font-size: 22px;
margin-bottom: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package__name {
font-size: 22px;
margin-bottom: 16px;
}
}
.package__price {
font-size: 64px;
color: var(--tj-color-heading-primary);
font-weight: var(--tj-fw-bold);
padding-bottom: 24px;
border-bottom: 1px solid var(--tj-color-border-10);
margin-bottom: 24px;
line-height: 1;
display: flex;
align-items: flex-end;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.package__price {
font-size: 54px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.package__price {
font-size: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.package__price {
font-size: 56px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package__price {
font-size: 48px;
}
}
.package__price__type {
display: inline-flex;
font-size: 16px;
line-height: 1;
color: var(--tj-color-theme-dark3);
margin-bottom: 6px;
font-weight: var(--tj-fw-regular);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.package__price__type {
font-size: 14px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.package__price__type {
font-size: 14px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package__price__type {
font-size: 14px;
}
}
.package__price__type span {
padding: 4px 5px 3px;
background-color: var(--tj-color-theme-supportive);
color: var(--tj-color-heading-primary);
font-size: 12px;
font-weight: var(--tj-fw-medium);
line-height: 1;
border-radius: 20px;
margin-bottom: 3px;
margin-left: 4px;
}
.package__price__disc {
padding: 4px 5px 3px;
background-color: var(--tj-color-theme-supportive);
color: var(--tj-color-heading-primary);
font-size: 12px;
font-weight: var(--tj-fw-medium);
line-height: 1;
border-radius: 20px;
margin-bottom: 3px;
margin-left: 4px;
}
.package__desc {
font-size: 16px;
margin-bottom: 24px;
}
.package__btn {
margin-bottom: 30px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.package__btn {
margin-bottom: 25px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.package__btn {
margin-bottom: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package__btn {
margin-bottom: 20px;
}
}
.package .tj-btn--full {
border-color: var(--tj-color-theme-dark);
}
.package .tj-btn--full::after {
background: var(--tj-color-theme-dark);
}
.package .tj-btn--full:hover {
color: var(--tj-color-theme-dark);
border-color: var(--tj-color-theme-dark);
}
.package .tj-btn--full:hover i {
color: var(--tj-color-theme-dark);
}
.package__features {
padding: 30px;
border-radius: 16px;
background: var(--tj-color-common-white);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.package__features {
padding: 25px;
border-radius: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.package__features {
padding: 20px;
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package__features {
padding: 20px 15px;
border-radius: 10px;
}
}
.package__features__title {
font-size: 18px;
color: var(--tj-color-heading-primary);
font-weight: var(--tj-fw-bold);
margin-bottom: 30px;
line-height: 1;
}
.package__features ul {
display: flex;
flex-direction: column;
gap: 20px;
font-family: var(--tj-ff-heading);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.package__features ul {
gap: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.package__features ul {
gap: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package__features ul {
margin-bottom: 20px;
}
}
.package__features ul li {
font-size: 16px;
line-height: 1;
display: flex;
align-items: center;
gap: 8px;
font-weight: var(--tj-fw-medium);
}
.package__features ul li i {
font-size: 14px;
color: var(--tj-color-theme-dark3);
}
.package__single--recommended {
background: var(--tj-color-theme-secondary);
border: 1px solid var(--tj-color-border-secondary);
}
.package__single--recommended .package__name {
color: var(--tj-color-common-white);
}
.package__single--recommended .package__price {
color: var(--tj-color-common-white);
border-color: var(--tj-color-border-4);
}
.package__single--recommended .package__price__type {
color: var(--tj-color-common-white);
}
.package__single--recommended .package__desc {
color: var(--tj-color-common-white);
margin-bottom: 24px;
}
.package__single--recommended .package__features {
background: var(--tj-color-theme-bg4);
}
.package__single--recommended .package__features__title {
color: var(--tj-color-common-white);
}
.package__single--recommended .package__features ul li {
color: var(--tj-color-common-white);
}
.package__single--recommended .package__features ul li i {
color: var(--tj-color-common-white);
}
.package__single--recommended .tj-btn--full {
border-color: var(--tj-color-theme-primary);
}
.package__single--recommended .tj-btn--full::after {
background: var(--tj-color-theme-primary);
}
.package__single--recommended .tj-btn--full:hover {
color: var(--tj-color-common-white);
border-color: var(--tj-color-common-white);
}
.package__single--recommended .tj-btn--full:hover i {
color: var(--tj-color-common-white);
}
.package--2 .package__tab__controllers {
background-color: var(--tj-color-common-white);
}
.package--2 .package__single {
background-color: var(--tj-color-common-white);
}
.package--2 .package__features {
background-color: var(--tj-color-theme-bg1);
}
.package--2 .package__single--recommended {
background: var(--tj-color-theme-secondary);
}
.package--2 .package__single--recommended .package__features {
background: var(--tj-color-theme-bg4);
}
.package__single--2.package__single--recommended {
background: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, var(--tj-color-theme-secondary) 100%);
}
.package__single--2.package__single--recommended .tj-btn--full {
border-color: var(--tj-color-theme-dark);
}
.package__single--2.package__single--recommended .tj-btn--full::after {
background-color: var(--tj-color-theme-dark);
}
.package__single--2.package__single--recommended .tj-btn--full:hover {
border-color: var(--tj-color-common-white);
}
.package__single--2.package__single--enterprise {
background-color: var(--tj-color-theme-bg2);
}
.package__single--2 .package__badge {
background-color: var(--tj-color-theme-secondary);
}
/* !END: Package CSS */
/**----------------------------------------
START: Award CSS
----------------------------------------*/
.award {
padding: 120px 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.award {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.award {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.award {
padding: 60px 0;
}
}
.award__banner {
overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.award__banner {
margin-top: 50px;
text-align: center;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.award__banner {
margin-top: 40px;
text-align: center;
}
}
.award__banner img {
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.award__banner img {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.award__banner img {
border-radius: 10px;
}
}
.award__content__list {
display: flex;
flex-direction: column;
gap: 32px;
padding-left: 48px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.award__content__list {
gap: 24px;
padding-left: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.award__content__list {
gap: 28px;
padding-left: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.award__content__list {
gap: 24px;
padding-left: 0;
}
}
.award__content__list__item {
display: flex;
gap: 15px;
padding-bottom: 7px;
position: relative;
transition: all 0.3s;
}
.award__content__list__item::after, .award__content__list__item::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 1px;
background-color: var(--tj-color-border-1);
}
.award__content__list__item::after {
background-color: transparent;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.award__content__list__item {
padding-bottom: 5px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.award__content__list__item {
gap: 12px;
padding-bottom: 5px;
}
}
.award__content__list__item:hover::after {
background-color: var(--tj-color-theme-dark);
animation: linehover 0.8s linear;
}
.award__content__list__item:hover .award__content__list__title,
.award__content__list__item:hover .award__content__list__sl {
letter-spacing: 0.03em;
}
.award__content__list__item__right {
flex-grow: 1;
}
.award__content__list__sl {
font-size: 16px;
font-weight: var(--tj-fw-sbold);
color: var(--tj-color-common-white2);
margin-top: 5px;
line-height: 1;
transition: all 0.3s ease;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.award__content__list__sl {
font-size: 14px;
margin-top: 5px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.award__content__list__sl {
font-size: 12px;
}
}
.award__content__list__title {
font-size: 20px;
margin-bottom: 16px;
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
line-height: 1.4;
transition: all 0.3s ease;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.award__content__list__title {
font-size: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.award__content__list__title {
font-size: 16px;
}
}
.award__content__list__title__year {
font-size: 24px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.award__content__list__title__year {
font-size: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.award__content__list__title__year {
font-size: 18px;
}
}
/* !END: Award CSS */
/**----------------------------------------
START: Blog Details CSS
----------------------------------------*/
.tj-blog-section {
padding: 120px 0;
position: relative;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.tj-blog-section {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.tj-blog-section {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-blog-section {
padding: 60px 0;
}
}
.tj-blog-section .faq {
padding: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.tj-blog-section .faq {
padding: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.tj-blog-section .faq {
padding: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-blog-section .faq {
padding: 0;
}
}
.post-details-wrapper .blog-images {
margin-bottom: 20px;
}
.post-details-wrapper .blog-images img {
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.post-details-wrapper .blog-images img {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.post-details-wrapper .blog-images img {
border-radius: 10px;
}
}
.post-details-wrapper .title {
text-transform: capitalize;
line-height: 1.2;
margin-bottom: 25px;
}
.post-details-wrapper p:not(:last-child) {
margin-bottom: 30px;
}
.post-details-wrapper p:last-child {
margin-bottom: 0;
}
.post-details-wrapper .images-wrap {
margin-bottom: 10px;
}
.post-details-wrapper .image-box {
margin-bottom: 25px;
border-radius: 16px;
overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.post-details-wrapper .image-box {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.post-details-wrapper .image-box {
border-radius: 10px;
}
}
.post-details-wrapper .image-box img {
width: 100%;
}
.post-details-wrapper .blog-text h3 {
margin-bottom: 25px;
}
.post-details-wrapper .blog-text .tj-blog-list {
margin-bottom: 50px;
padding: 0;
}
.post-details-wrapper .blog-text .tj-blog-list li {
padding: 0;
}
@media (max-width: 575px) {
.post-details-wrapper .blog-text .tj-blog-list {
margin-bottom: 30px;
}
}
.post-details-wrapper .blog-text .blog-video {
position: relative;
z-index: 1;
margin-top: 60px;
margin-bottom: 50px;
border-radius: 16px;
overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.post-details-wrapper .blog-text .blog-video {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.post-details-wrapper .blog-text .blog-video {
border-radius: 10px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.post-details-wrapper .blog-text .blog-video {
margin-top: 40px;
margin-bottom: 40px;
}
}
.tj-blog-list {
padding: 0;
list-style: none;
columns: 2;
}
.tj-blog-list li {
padding: 0;
display: flex;
align-items: start;
column-gap: 10px;
color: var(--tj-color-heading-primary);
margin-bottom: 16px;
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-sbold);
}
.tj-blog-list li:last-child {
margin-bottom: 0;
}
.tj-blog-list li span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex: 0 0 auto;
line-height: 1;
font-size: 8px;
margin-top: 3px;
color: var(--tj-color-common-white);
background: var(--tj-color-theme-secondary);
border-radius: 50%;
}
@media (max-width: 575px) {
.tj-blog-list {
columns: 1;
}
}
.tj-video-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
line-height: 1;
color: var(--tj-color-heading-primary);
background: var(--tj-color-common-white);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.tj-video-btn span {
font-size: 20px;
}
.tj-video-btn::before {
position: absolute;
content: "";
left: 50%;
top: 50%;
width: 90px;
height: 90px;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.2);
animation: pulse-2 2s linear infinite;
z-index: -1;
border-radius: 50%;
}
.blog-category-two {
display: flex;
flex-wrap: wrap;
align-items: center;
border: 1px solid var(--tj-color-border-1);
background-color: var(--tj-color-theme-bg1);
margin-bottom: 33px;
border-radius: 10px;
}
.blog-category-two .category-item {
display: flex;
align-items: center;
flex-wrap: wrap;
border-right: 1px solid var(--tj-color-border-1);
padding: 25px 30px;
gap: 10px;
width: 33.33%;
}
.blog-category-two .category-item:last-child {
border-right: none;
}
.blog-category-two .category-item .cate-images {
width: 52px;
height: 52px;
}
.blog-category-two .category-item .cate-images img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-category-two .category-item .cate-images {
width: 45px;
height: 45px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.blog-category-two .category-item .cate-images {
width: 35px;
height: 35px;
}
}
.blog-category-two .category-item .cate-text .degination {
display: block;
color: var(--tj-color-text-body);
font-size: 14px;
line-height: 1;
margin-bottom: 6px;
}
.blog-category-two .category-item .cate-text .title {
text-transform: uppercase;
margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-category-two .category-item .cate-text .title {
font-size: 16px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.blog-category-two .category-item .cate-text .title {
font-size: 14px;
}
}
.blog-category-two .category-item .cate-icons {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
width: 52px;
height: 52px;
line-height: 1;
color: var(--tj-color-common-white);
background-color: var(--tj-color-theme-secondary);
border-radius: 50%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-category-two .category-item .cate-icons {
width: 45px;
height: 45px;
font-size: 20px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.blog-category-two .category-item .cate-icons {
width: 35px;
height: 35px;
font-size: 18px;
}
}
.blog-category-two .category-item .text {
line-height: 1;
text-transform: uppercase;
margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-category-two .category-item .text {
font-size: 16px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.blog-category-two .category-item .text {
font-size: 14px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.blog-category-two .category-item {
padding: 25px 20px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog-category-two .category-item {
padding: 20px 15px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-category-two .category-item {
width: 100%;
padding: 0;
border: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog-category-two {
padding: 20px;
gap: 20px;
}
}
blockquote.wp-block-quote,
blockquote {
position: relative;
padding: 35px 30px;
background: var(--tj-color-theme-bg1);
background-blend-mode: luminosity;
border: 2px solid var(--tj-color-theme-secondary);
margin-top: 35px;
margin-bottom: 50px;
z-index: 2;
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
blockquote.wp-block-quote,
blockquote {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
blockquote.wp-block-quote,
blockquote {
border-radius: 10px;
}
}
blockquote.wp-block-quote::before,
blockquote::before {
content: "\e91f";
font-size: 40px;
color: var(--tj-color-theme-secondary);
font-family: "ranko-icons";
display: inline-block;
margin-bottom: 15px;
line-height: 1;
}
blockquote.wp-block-quote p,
blockquote p {
color: var(--tj-color-heading-primary);
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-medium);
font-size: 24px;
margin-bottom: 20px !important;
letter-spacing: -0.6px;
line-height: 1.417;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
blockquote.wp-block-quote p,
blockquote p {
font-size: 20px;
margin-bottom: 15px !important;
}
}
blockquote.wp-block-quote p:last-child,
blockquote p:last-child {
margin: 0 !important;
}
blockquote.wp-block-quote p cite,
blockquote.wp-block-quote cite,
blockquote p cite,
blockquote cite {
font-size: var(--tj-fs-body);
font-family: var(--tj-ff-body);
font-weight: normal;
color: var(--tj-color-heading-primary);
display: block;
text-align: end;
font-style: normal;
line-height: var(--tj-lh-body);
letter-spacing: unset;
position: relative;
z-index: 1;
}
blockquote.wp-block-quote p cite::before,
blockquote.wp-block-quote cite::before,
blockquote p cite::before,
blockquote cite::before {
content: "";
display: inline-block;
background: var(--tj-color-common-black);
height: 1px;
width: 40px;
top: -4px;
margin-right: 10px;
position: relative;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
blockquote.wp-block-quote,
blockquote {
padding: 25px 15px;
margin-bottom: 40px;
}
}
.tj-post-item blockquote {
margin: 0;
}
.tj-post-item blockquote cite a {
text-decoration: none;
font-weight: normal;
}
.tj-tags-post {
display: flex;
flex-wrap: wrap;
row-gap: 20px;
column-gap: 30px;
align-items: center;
justify-content: space-between;
border-top: 1px dashed var(--tj-color-border-1);
border-bottom: 1px dashed var(--tj-color-border-1);
padding: 22px 0;
margin-top: 40px;
margin-bottom: 30px;
}
.tj-tags-post .tagcloud {
width: calc(100% - 224px);
}
.tj-tags-post .tagcloud a {
background: var(--tj-color-theme-bg1);
color: var(--tj-color-theme-secondary);
}
.tj-tags-post .tagcloud span {
color: var(--tj-color-text-body);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-tags-post .tagcloud {
width: 100%;
}
}
.tj-tags-post .post-share > ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 8px;
row-gap: 10px;
}
.tj-tags-post .post-share > ul li {
font-size: 16px;
color: var(--tj-color-text-body);
margin-bottom: 0;
}
.tj-tags-post .post-share > ul li a {
display: flex;
font-size: 16px;
line-height: 1;
color: var(--tj-color-common-white);
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(5, 23, 61, 0.4);
transform: translateY(0);
}
.tj-tags-post .post-share > ul li a i {
display: inline-flex;
line-height: 1;
}
.tj-tags-post .post-share > ul li a:hover {
background: var(--tj-color-theme-secondary);
transform: translateY(-5px);
}
.tj-tags-post.no_socials {
width: 100%;
}
.tj-post-navigation {
background-color: var(--tj-color-theme-bg1);
background-blend-mode: luminosity;
padding: 20px;
display: flex;
gap: 25px;
align-items: center;
justify-content: space-between;
margin-bottom: 50px;
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.tj-post-navigation {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-post-navigation {
border-radius: 10px;
}
}
.tj-post-navigation .tj-post-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-transform: capitalize;
color: var(--tj-color-heading-primary);
font-weight: var(--tj-fw-bold);
}
.tj-post-navigation .tj-post-nav a span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background-color: var(--tj-color-heading-primary);
font-size: 16px;
line-height: 1;
border-radius: 7px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.tj-post-navigation .tj-post-nav a span i {
color: var(--tj-color-common-white);
}
.tj-post-navigation .tj-post-nav a:hover span {
background-color: var(--tj-color-theme-primary);
}
.tj-post-navigation .tj-post-nav a:hover span i {
color: var(--tj-color-common-white);
}
.tj-post-navigation .tj-post-nav-divider {
font-size: 40px;
line-height: 1;
color: var(--tj-color-common-black);
}
@media (max-width: 575px) {
.tj-post-navigation {
padding: 20px;
}
}
.tj-comments-wrap {
margin-bottom: 30px;
}
.tj-comments-wrap .comments-title {
margin-bottom: 22px;
}
@media (max-width: 575px) {
.tj-comments-wrap .comments-title {
margin-bottom: 15px;
}
}
.tj-latest-comments ul {
margin: 0;
padding: 0;
list-style: none;
}
.tj-latest-comments ul .tj-comment {
margin-bottom: 20px;
}
.tj-latest-comments ul .tj-comment:last-child {
margin-bottom: 0;
}
.tj-latest-comments ul .tj-comment .comment-content {
padding: 30px;
border: 1px solid var(--tj-color-border-1);
background-color: var(--tj-color-theme-bg1);
position: relative;
border-radius: 16px;
}
.tj-latest-comments ul .tj-comment .comment-content .comment-avatar {
max-width: 64px;
width: 100%;
float: left;
overflow: hidden;
}
@media (max-width: 575px) {
.tj-latest-comments ul .tj-comment .comment-content .comment-avatar {
float: none;
margin-bottom: 15px;
}
}
.tj-latest-comments ul .tj-comment .comment-content .comment-avatar img {
width: 100%;
border-radius: 100%;
}
.tj-latest-comments ul .tj-comment .comment-content:not(:has(.comment-avatar)) .comments-header {
width: 100%;
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header {
margin-top: 10px;
width: calc(100% - 80px);
margin-inline-start: auto;
}
@media (max-width: 575px) {
.tj-latest-comments ul .tj-comment .comment-content .comments-header {
width: 100%;
}
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header .avatar-name .title {
font-size: 18px;
margin-bottom: 6px;
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header .avatar-name .title a:hover {
color: var(--tj-color-theme-primary);
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text .reply {
position: absolute;
top: 35px;
right: 30px;
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text .reply a {
font-size: 14px;
text-transform: uppercase;
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-bold);
color: var(--tj-color-theme-secondary);
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text .reply a:hover {
color: var(--tj-color-theme-primary);
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text span {
font-size: 14px;
color: var(--tj-color-common-black-3);
font-weight: var(--tj-fw-regular);
}
@media (max-width: 575px) {
.tj-latest-comments ul .tj-comment .comment-content .comment-avatar {
margin-inline-end: auto;
}
}
.tj-latest-comments ul .tj-comment .desc {
margin-top: 14px;
}
.tj-latest-comments ul .tj-comment .desc p:last-child {
margin-bottom: 0;
}
.tj-latest-comments ul .tj-comment > .children {
padding-left: 75px;
}
@media (max-width: 575px) {
.tj-latest-comments ul .tj-comment > .children {
padding-left: 35px;
}
}
.tj-latest-comments ul .tj-comment:last-child .comment-content .comments-header {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
.tj-comments-container {
margin-top: 50px;
}
.tj-comments-container .row {
--bs-gutter-x: 20px;
}
.comment-respond .comment-reply-title {
text-transform: capitalize;
margin-bottom: 18px;
}
.comment-respond p.logged-in-as {
margin-bottom: 18px;
}
.comment-respond .form-input {
margin-bottom: 20px;
}
.comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]),
.comment-respond .form-input textarea,
.comment-respond .form-input input[type=email],
.comment-respond .form-input input[type=text] {
background: transparent;
height: 60px;
padding: 18px 20px;
border: 2px solid var(--tj-color-border-1);
width: 100%;
border-radius: 10px;
}
.comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::placeholder,
.comment-respond .form-input textarea::placeholder,
.comment-respond .form-input input[type=email]::placeholder,
.comment-respond .form-input input[type=text]::placeholder {
color: var(--tj-color-text-body);
}
.comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-ms-input-placeholder,
.comment-respond .form-input textarea::-ms-input-placeholder,
.comment-respond .form-input input[type=email]::-ms-input-placeholder,
.comment-respond .form-input input[type=text]::-ms-input-placeholder {
color: var(--tj-color-text-body);
}
.comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):focus,
.comment-respond .form-input textarea:focus,
.comment-respond .form-input input[type=email]:focus,
.comment-respond .form-input input[type=text]:focus {
border-color: var(--tj-color-theme-secondary);
outline: transparent;
background-color: var(--tj-color-theme-bg1);
}
.comment-respond .form-input textarea {
min-height: 180px;
resize: none;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.comment-respond .form-input {
margin-bottom: 20px;
}
}
.tj-main-sidebar {
padding-left: 20px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-main-sidebar {
padding-left: 0;
}
}
.tj-sidebar-widget {
background-color: var(--tj-color-theme-bg1);
background-blend-mode: luminosity;
margin-bottom: 30px;
padding: 30px;
position: relative;
border-radius: 16px;
}
.tj-sidebar-widget:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.tj-sidebar-widget {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-sidebar-widget {
border-radius: 10px;
}
}
.tj-sidebar-widget:last-child {
margin-bottom: 0;
}
.tj-sidebar-widget .widget-title {
color: var(--tj-color-heading-primary);
text-transform: capitalize;
position: relative;
margin-bottom: 25px;
line-height: 1;
z-index: 1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), (max-width: 575px) {
.tj-sidebar-widget {
padding: 25px 15px;
}
}
.elementor-widget-wp-widget-tag_cloud h5,
.elementor-widget-wp-widget-tj-category-widget h5,
.elementor-widget-wp-widget-tj-recent-posts h5,
.elementor-widget-wp-widget-search h5 {
font-size: var(--tj-fs-h4);
text-transform: capitalize;
position: relative;
margin-bottom: 25px;
line-height: 1;
z-index: 1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.elementor-widget-wp-widget-tag_cloud h5,
.elementor-widget-wp-widget-tj-category-widget h5,
.elementor-widget-wp-widget-tj-recent-posts h5,
.elementor-widget-wp-widget-search h5 {
font-size: 22px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.elementor-widget-wp-widget-tag_cloud h5,
.elementor-widget-wp-widget-tj-category-widget h5,
.elementor-widget-wp-widget-tj-recent-posts h5,
.elementor-widget-wp-widget-search h5 {
font-size: 20px;
}
}
.tj-search .search-box form {
position: relative;
width: 100%;
z-index: 1;
}
.tj-search .search-box form input {
font-size: 16px;
background: var(--tj-color-common-white);
width: 100%;
height: 60px;
border: 1px solid var(--tj-color-theme-dark);
padding: 18px 65px 18px 20px;
line-height: 1;
border-radius: 10px;
}
.tj-search .search-box form input::placeholder {
color: var(--tj-color-text-body);
}
.tj-search .search-box form input::-ms-input-placeholder {
color: var(--tj-color-text-body);
}
.tj-search .search-box form :focus {
outline: none;
box-shadow: 0 0 0;
}
.tj-search .search-box form button {
font-size: 24px;
color: var(--tj-color-heading-primary);
width: 54px;
height: 60px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
border-left: 1px solid var(--tj-color-heading-primary);
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.tj-search .search-box form button i {
display: inline-flex;
padding-top: 8px;
line-height: 1;
}
.elementor-widget-wp-widget-tj-recent-posts ul,
.tj-recent-posts ul {
margin: 0;
padding: 0;
list-style: none;
}
.elementor-widget-wp-widget-tj-recent-posts ul li,
.tj-recent-posts ul li {
display: flex;
align-items: center;
column-gap: 15px;
margin-bottom: 15px;
}
.elementor-widget-wp-widget-tj-recent-posts ul li:last-child,
.tj-recent-posts ul li:last-child {
margin-bottom: 0;
}
.elementor-widget-wp-widget-tj-recent-posts ul li:hover .post-thumb img,
.tj-recent-posts ul li:hover .post-thumb img {
transform: scale(1.15);
}
.elementor-widget-wp-widget-tj-recent-posts .post-thumb,
.tj-recent-posts .post-thumb {
position: relative;
max-width: 100px;
width: 100%;
overflow: hidden;
border-radius: 10px;
}
.elementor-widget-wp-widget-tj-recent-posts .post-thumb a,
.tj-recent-posts .post-thumb a {
display: inline-block;
width: 100%;
}
.elementor-widget-wp-widget-tj-recent-posts .post-thumb a img,
.tj-recent-posts .post-thumb a img {
width: 100%;
height: 100px;
object-fit: cover;
transition: 0.6s;
}
.elementor-widget-wp-widget-tj-recent-posts .post-content .post-title,
.tj-recent-posts .post-content .post-title {
font-size: 16px;
line-height: 1.5;
text-transform: capitalize;
margin-bottom: 10px;
}
.elementor-widget-wp-widget-tj-recent-posts .post-content .post-title a:hover,
.tj-recent-posts .post-content .post-title a:hover {
color: var(--tj-color-theme-primary);
}
.elementor-widget-wp-widget-tj-recent-posts .post-content .post-meta,
.tj-recent-posts .post-content .post-meta {
margin-bottom: 0;
}
.elementor-widget-wp-widget-tj-recent-posts .post-content .post-meta span,
.tj-recent-posts .post-content .post-meta span {
font-size: 14px;
text-transform: uppercase;
color: var(--tj-color-text-body);
}
.elementor-widget-wp-widget-tj-category-widget ul,
.tj-widget-categories ul {
margin: 0;
padding: 0;
list-style: none;
}
.elementor-widget-wp-widget-tj-category-widget ul li,
.tj-widget-categories ul li {
margin-bottom: 10px;
}
.elementor-widget-wp-widget-tj-category-widget ul li:last-child,
.tj-widget-categories ul li:last-child {
margin-bottom: 0;
}
.elementor-widget-wp-widget-tj-category-widget ul li a,
.tj-widget-categories ul li a {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: var(--tj-fw-sbold);
text-transform: capitalize;
color: var(--tj-color-heading-primary);
background: var(--tj-color-common-white);
padding: 20px 20px 17px 25px;
border-radius: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.elementor-widget-wp-widget-tj-category-widget ul li a,
.tj-widget-categories ul li a {
border-radius: 9px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.elementor-widget-wp-widget-tj-category-widget ul li a,
.tj-widget-categories ul li a {
border-radius: 8px;
}
}
.elementor-widget-wp-widget-tj-category-widget ul li a span,
.tj-widget-categories ul li a span {
color: var(--tj-color-heading-primary);
}
.elementor-widget-wp-widget-tj-category-widget ul li a .icon,
.tj-widget-categories ul li a .icon {
font-size: 24px;
line-height: 1;
}
.elementor-widget-wp-widget-tj-category-widget ul li a:hover, .elementor-widget-wp-widget-tj-category-widget ul li a.active,
.tj-widget-categories ul li a:hover,
.tj-widget-categories ul li a.active {
color: var(--tj-color-common-white);
background-color: var(--tj-color-theme-primary);
}
.elementor-widget-wp-widget-tj-category-widget ul li a:hover span, .elementor-widget-wp-widget-tj-category-widget ul li a.active span,
.tj-widget-categories ul li a:hover span,
.tj-widget-categories ul li a.active span {
color: var(--tj-color-common-white);
}
.tj-footer-widget .wp-block-tag-cloud,
.tj-sidebar-widget .wp-block-tag-cloud,
.wp-block-tag-cloud,
.tagcloud {
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 10px;
row-gap: 12px;
}
.tj-footer-widget .wp-block-tag-cloud a,
.tj-sidebar-widget .wp-block-tag-cloud a,
.wp-block-tag-cloud a,
.tagcloud a {
background-color: var(--tj-color-common-white);
font-size: 16px !important;
text-transform: capitalize;
line-height: 1;
color: var(--tj-color-heading-primary);
font-weight: var(--tj-fw-medium);
padding: 5px 10px;
display: inline-flex;
overflow: hidden;
border-radius: 6px;
text-decoration: none;
}
.tj-footer-widget .wp-block-tag-cloud a:hover,
.tj-sidebar-widget .wp-block-tag-cloud a:hover,
.wp-block-tag-cloud a:hover,
.tagcloud a:hover {
background-color: var(--tj-color-theme-secondary);
color: var(--tj-color-common-white);
}
.wp-block-tag-cloud a {
background: var(--tj-color-theme-bg1);
color: var(--tj-color-theme-secondary);
}
.infos-item {
display: flex;
column-gap: 8px;
padding: 17px 20px;
background-color: var(--tj-color-common-white);
align-items: center;
margin-bottom: 10px;
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.infos-item {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.infos-item {
border-radius: 10px;
}
}
.infos-item:last-child {
margin-bottom: 0;
}
.infos-item .project-icons {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex: 0 0 auto;
font-size: 20px;
color: var(--tj-color-common-white);
background: var(--tj-color-theme-secondary);
border-radius: 50%;
position: relative;
top: 2px;
}
.infos-item .project-text span {
display: inline-block;
font-size: 14px;
line-height: 1;
color: var(--tj-color-text-body);
margin: 0;
}
.infos-item .project-text .title {
line-height: 1.1;
margin-bottom: 0;
text-transform: capitalize;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.infos-item .project-text .title {
font-size: 16px;
}
}
.widget-feature-item {
padding: 20px;
}
.widget-feature-item .feature-box {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: bottom right;
overflow: hidden;
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.widget-feature-item .feature-box {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.widget-feature-item .feature-box {
border-radius: 10px;
}
}
.widget-feature-item .feature-box .feature-content {
padding: 35px 28px 0;
}
.widget-feature-item .feature-box .feature-content .title {
font-size: 48px;
text-transform: capitalize;
color: var(--tj-color-common-white);
margin-bottom: 30px;
line-height: 1.2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.widget-feature-item .feature-box .feature-content .title {
font-size: 42px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.widget-feature-item .feature-box .feature-content .title {
font-size: 36px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.widget-feature-item .feature-box .feature-content .title {
font-size: 40px;
}
}
@media (max-width: 575px) {
.widget-feature-item .feature-box .feature-content .title {
font-size: 40px;
margin-bottom: 20px;
}
}
.widget-feature-item .feature-box .feature-content span {
display: block;
font-size: 20px;
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-medium);
color: var(--tj-color-common-white);
text-transform: uppercase;
line-height: 1;
margin-bottom: 30px;
}
@media (max-width: 575px) {
.widget-feature-item .feature-box .feature-content span {
margin-bottom: 20px;
}
}
.widget-feature-item .feature-box .feature-content .feature-contact {
background-color: var(--tj-color-theme-primary);
padding: 10px 12px 10px;
border-radius: 50px;
line-height: 1;
margin: 0;
}
.widget-feature-item .feature-box .feature-content .feature-contact span {
color: var(--tj-color-common-white);
font-size: 18px;
font-weight: var(--tj-fw-regular);
margin: 0;
text-shadow: 0 30px 0 var(--tj-color-common-white);
}
.widget-feature-item .feature-box .feature-content .feature-contact i {
color: var(--tj-color-common-white);
font-size: 20px;
text-shadow: 0 30px 0 var(--tj-color-common-white);
margin-right: 6px;
margin-left: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.widget-feature-item .feature-box .feature-content {
padding: 30px 22px 0;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), (max-width: 575px) {
.widget-feature-item .feature-box .feature-content {
padding: 30px 18px 0;
}
}
@media (max-width: 575px) {
.widget-feature-item .feature-box {
max-width: 360px;
margin: 0 auto;
}
}
@media (max-width: 400px) {
.widget-feature-item .feature-box {
max-width: 320px;
margin: 0 auto;
}
}
.widget-feature-item .tj-btn {
padding: 5px 10px;
font-size: 18px;
border-radius: 8px;
}
.widget-feature-item .tj-btn i {
font-size: 20px;
}
.widget-feature-item .tj-btn:hover {
border-color: var(--tj-color-common-white);
color: var(--tj-color-common-white);
}
.widget-feature-item .tj-btn:hover i {
color: var(--tj-color-common-white);
}
.widget-feature-item .feature-images {
position: relative;
left: 0;
bottom: 0;
width: 100%;
height: 400px;
z-index: 1;
background-size: 164%;
background-position: 41% 16%;
background-repeat: no-repeat;
clip-path: polygon(0 58%, 100% 0%, 100% 100%, 0% 100%);
margin-top: -60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.widget-feature-item .feature-images {
clip-path: polygon(0 58%, 100% 10%, 100% 100%, 0% 100%);
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.widget-feature-item .feature-images {
clip-path: polygon(0 58%, 100% 17%, 100% 100%, 0% 100%);
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.widget-feature-item .feature-images {
clip-path: polygon(0 50%, 100% 0%, 100% 100%, 0% 100%);
}
}
@media (max-width: 400px) {
.widget-feature-item .feature-images {
clip-path: polygon(0 60%, 100% 10%, 100% 100%, 0% 100%);
}
}
@media (max-width: 575px) {
.widget-feature-item {
padding: 20px 15px;
}
}
.details-content-box {
display: flex;
flex-wrap: wrap;
column-gap: 15px;
row-gap: 15px;
align-items: center;
margin-bottom: 50px;
}
.service-details-item {
background-color: var(--tj-color-theme-bg1);
background-blend-mode: luminosity;
padding: 30px 20px 25px 20px;
width: 100%;
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.service-details-item {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service-details-item {
border-radius: 10px;
}
}
.service-details-item .number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 33px;
height: 33px;
font-size: 16px;
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-sbold);
color: var(--tj-color-common-white);
background-color: var(--tj-color-theme-secondary);
border-radius: 50%;
margin-bottom: 22px;
}
.service-details-item .title {
margin-bottom: 20px;
line-height: 1.4;
font-size: 20px;
}
.service-details-item .desc {
margin-bottom: 0;
}
.service-details-item .desc p:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.service-details-item {
padding: 30px 15px 15px 15px;
}
}
.blog-text .tj-faq {
margin-bottom: 40px;
padding-top: 10px;
}
.images-wrap-gallary .image-box {
overflow: hidden;
}
.images-wrap-gallary .image-box:hover img {
position: relative;
z-index: -1;
transform: scale(1.2);
}
.tj-gallery {
position: relative;
display: block;
overflow: hidden;
border-radius: 16px;
}
.tj-gallery::before {
content: "\e922";
font-family: "ranko-icons" !important;
color: var(--tj-color-common-white);
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.tj-gallery:hover::before {
opacity: 1;
visibility: visible;
}
/* !END: Blog Details CSS */
/**----------------------------------------
START: Error CSS
----------------------------------------*/
.error {
padding: 206px 0 120px;
position: relative;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.error {
padding: 186px 0 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.error {
padding: 142px 0 80px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.error {
padding: 122px 0 60px;
}
}
.error__inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.error__subtitle {
margin-bottom: 18px;
}
.error__img {
margin-bottom: 35px;
}
@media (max-width: 575px) {
.error__img {
max-width: 280px;
}
}
.error .section-heading__title {
font-size: 70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.error .section-heading__title {
font-size: 65px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.error .section-heading__title {
font-size: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.error .section-heading__title {
font-size: 56px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.error .section-heading__title {
font-size: 50px;
}
}
@media (max-width: 575px) {
.error .section-heading__title {
font-size: 40px;
}
}
.error .section-heading__desc {
max-width: 600px;
margin-bottom: 30px;
}
/* START: H4 Header CSS */
.header--4 .header__wrapper {
justify-content: space-between;
}
.header--4 .header__wrapper > div:last-child {
margin-left: 0;
}
.header--4 .header__logo {
width: 133px;
}
.header--4.header .header__right .tj-btn {
padding: 14px 30px;
border-radius: 58px;
}
.header--4.header .header__right .tj-btn::after {
border-radius: 58px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) {
.header--4.header .header__right .tj-btn {
padding: 11px 25px;
}
}
.header--4.header .header__mobile-toggler {
border-radius: 100%;
}
.header--4.header--absolute {
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
@media (max-width: 575px) {
.header--4.header--absolute {
margin-top: 0;
}
}
.header--4.header--absolute .mainmenu {
box-shadow: var(--tj-shadow-theme-primary);
background-color: var(--tj-color-common-white);
padding-left: 15px;
padding-right: 15px;
border-radius: 58px;
}
.header--4.header--absolute .mainmenu ul > li > a {
padding: 10px 20px;
}
.header--4.header--absolute .mainmenu ul > li .sub-menu {
border-radius: 12px;
margin-top: 10px;
z-index: 0;
}
.header--4.header--absolute .mainmenu ul > li .sub-menu::after {
content: "";
position: absolute;
left: 0;
top: -11px;
width: 100%;
height: 100%;
z-index: -1;
}
.header--4.header--absolute .header__mobile-toggler {
border: 0;
background-color: var(--tj-color-common-white);
}
.header--4.header--absolute .mainmenu ul {
gap: 0;
}
.header--4.header-duplicate {
top: -300px;
left: 30px;
right: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.header--4.header-duplicate {
left: 15px;
right: 15px;
max-width: calc(100% - 30px);
margin: 0;
}
}
.header--4.header-duplicate.sticky {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
top: 0;
}
.header--4.header-duplicate .header__wrapper {
padding-left: 20px;
padding-right: 20px;
}
@media (max-width: 575px) {
.header--4.header-duplicate .header__wrapper {
padding-left: 15px;
padding-right: 15px;
}
}
/* END: H4 Header CSS */
/* START: H4 footer CSS */
.footer-4-subscribe {
max-width: 332px;
width: 100%;
}
.footer-4-subscribe .subscribe-form {
position: relative;
}
.footer-4-subscribe input[type=email] {
height: 55px;
padding: 11px 60px 11px 25px;
border: 0;
width: 100%;
outline: 0;
border-radius: 8px;
border: 1px solid var(--tj-color-border-1);
background-color: var(--tj-color-theme-bg1);
}
.footer-4-subscribe input[type=email]:focus {
border-color: var(--tj-color-theme-primary);
}
.footer-4-subscribe input[type=checkbox] {
position: relative;
margin-inline-end: 8px;
width: 18px;
height: 18px;
border: 1px solid var(--tj-color-border-1);
border-radius: 3px;
appearance: none;
cursor: pointer;
}
.footer-4-subscribe input[type=checkbox]::before {
content: "\e900";
font-size: 10px;
line-height: 1;
font-family: "ranko-icons" !important;
color: var(--tj-color-common-white);
position: absolute;
width: 100%;
text-align: center;
line-height: 16px;
transform: scale(0.5);
opacity: 0;
transition: all 0.3s ease-in-out;
}
.footer-4-subscribe input[type=checkbox]:checked {
background-color: var(--tj-color-theme-dark);
border-color: var(--tj-color-theme-dark);
}
.footer-4-subscribe input[type=checkbox]:checked::before {
transform: scale(1);
opacity: 1;
}
.footer-4-subscribe button {
position: absolute;
width: 51px;
height: 55px;
inset-inline-end: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 23px;
line-height: 1;
outline: 0;
color: var(--tj-color-theme-primary);
}
.footer-4-subscribe button i {
line-height: 1;
display: inline-flex;
transition: all 0.3s linear;
}
.footer-4-subscribe button:hover i, .footer-4-subscribe button:focus i {
animation: shake 0.6s ease-in-out;
}
.footer-4-subscribe button::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 50%;
transform: translateY(-50%);
height: 24px;
border-inline-start: 1px solid var(--tj-color-border-1);
}
.footer-4-subscribe label {
color: var(--tj-color-theme-dark);
margin-top: 16px;
display: inline-flex;
align-items: center;
}
.footer-4-subscribe label a {
color: var(--tj-color-theme-dark);
margin-inline-start: 4px;
}
.footer-4-subscribe label a:hover {
color: var(--tj-color-theme-primary);
}
/* END: H4 footer CSS */
/**----------------------------------------
START: H4 Hero CSS
----------------------------------------*/
.hero--5 .hero__inner {
min-height: 840px;
padding-top: 50px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--5 .hero__inner {
min-height: 817px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero--5 .hero__inner {
padding-top: 150px;
padding-bottom: 90px;
}
}
@media (max-width: 575px) {
.hero--5 .hero__inner {
padding-top: 120px;
padding-bottom: 90px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--5 .hero__left {
padding-top: 100px;
}
}
.hero--5 .hero__title {
font-size: 82px;
line-height: 1.09756;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--5 .hero__title {
font-size: 65px;
max-width: 100%;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--5 .hero__title {
font-size: 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--5 .hero__title {
max-width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hero--5 .hero__title {
font-size: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero--5 .hero__title {
font-size: 56px;
}
}
@media (max-width: 575px) {
.hero--5 .hero__title {
font-size: 40px;
}
}
.hero--5 .hero__title span {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 6px;
}
.hero--5 .hero__title span img {
margin: 0;
width: 67px;
height: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--5 .hero__title span img {
width: 55px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero--5 .hero__title span img {
width: 50px;
}
}
@media (max-width: 575px) {
.hero--5 .hero__title span img {
width: 40px;
}
}
.hero--5 .hero__desc {
font-size: 20px;
max-width: 472px;
line-height: 1.5;
letter-spacing: 0;
margin-bottom: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.hero--5 .hero__desc {
font-size: 18px;
margin-bottom: 24px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--5 .hero__desc {
max-width: 100%;
}
}
@media (max-width: 575px) {
.hero--5 .hero__desc {
margin-bottom: 20px;
}
}
.hero--5 .hero__right {
min-height: inherit;
z-index: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--5 .hero__right {
margin-top: 10px;
}
}
.hero--5 .hero__google__ads__rating {
padding: 12px 15px 13px 12px;
border-radius: 8px;
box-shadow: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843);
background-color: var(--tj-color-common-white);
border: 1px solid var(--tj-color-border-1);
display: flex;
gap: 6px;
align-items: center;
}
.hero--5 .hero__google__ads__rating__wrapper {
position: absolute;
left: 0;
top: 35%;
transform: translate(-40%, -50%);
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero--5 .hero__google__ads__rating__wrapper {
transform: translate(0, -50%);
}
}
@media (max-width: 575px) {
.hero--5 .hero__google__ads__rating__wrapper {
left: auto;
right: 15px;
transform: translate(0, 74%);
}
}
.hero--5 .hero__google__ads__rating__img {
border: 1px solid var(--tj-color-border-1);
border-radius: 50%;
max-width: 45px;
}
.hero--5 .hero__google__ads__rating .testimonials__rating {
margin-bottom: 0;
}
.hero--5 .hero__google__ads__rating .testimonials__rating .star-ratings {
font-size: 17px;
letter-spacing: -1px;
}
.hero--5 .hero__ratings__title {
font-size: 16px;
margin-bottom: 0;
font-weight: var(--tj-fw-sbold);
margin-bottom: 5px;
line-height: 1;
}
.hero--5 .hero__client__thumbs {
position: absolute;
display: inline-block;
left: 0;
bottom: 0;
transform: translate(-60%, 30px);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--5 .hero__client__thumbs {
transform: translate(0, 30px);
left: 15px;
}
}
.hero--5 .hero__banner-img {
position: relative;
bottom: auto;
right: auto;
margin-left: auto;
max-width: 496px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--5 .hero__banner-img img {
max-width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--5 .hero__banner-img {
margin-right: auto;
}
}
.hero--5 .hero__dartboard {
position: absolute;
right: 0;
top: 50%;
transform: translate(60%, -40%);
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--5 .hero__dartboard {
transform: translate(10%, -36%);
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hero--5 .hero__dartboard {
transform: translate(45%, -40%);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--5 .hero__dartboard {
transform: translate(9%, -40%);
}
}
@media (max-width: 575px) {
.hero--5 .hero__dartboard {
display: none;
}
}
.hero--5 .hero__shape__img__wrapper {
position: absolute;
z-index: -1;
}
.hero--5 .hero__shape__img__wrapper:first-child {
left: -73px;
top: 40%;
}
.hero--5 .hero__shape__img__wrapper:nth-child(2) {
left: 40%;
bottom: 15%;
transform-origin: left;
}
.hero--5 .hero__shape__img__wrapper:last-child {
right: -30px;
bottom: 20%;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--5 .hero__scroll {
left: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--5 .hero__scroll {
display: none;
}
}
/**----------------------------------------
START: About CSS
----------------------------------------*/
.about--5 .section-heading__title .text-indent {
content: "";
padding-left: 114px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.about--5 .section-heading__title .text-indent {
padding-left: 80px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--5 .section-heading__title .text-indent {
padding-left: 0;
}
}
/**----------------------------------------
START: Process CSS
----------------------------------------*/
.process-mockup {
position: relative;
z-index: 0;
max-width: 263px;
margin: 0 auto;
}
.process-mockup-wrapper {
max-width: 533px;
margin-inline-start: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 77px;
height: 100%;
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-mockup-wrapper {
margin-left: auto;
margin-right: auto;
margin-top: 40px;
height: auto;
padding-top: 50px;
padding-bottom: 50px;
}
}
.process-mockup-wrapper img {
transition: none;
}
.process-mockup-items {
position: absolute;
top: 11px;
right: 10.5px;
bottom: 9.97px;
left: 10px;
border-radius: 34px;
overflow: hidden;
}
.process-mockup-item {
width: 100%;
position: relative;
z-index: 1;
}
.process__inner--2 {
display: flex;
flex-direction: column;
max-width: 548px;
gap: 30px;
position: relative;
z-index: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__inner--2 {
gap: 120px;
max-width: 533px;
margin-left: auto;
margin-right: auto;
padding-top: 90px;
}
}
.process__inner--2 .process-line {
position: absolute;
right: -127px;
top: 0;
transform: translateX(100%);
width: 1px;
height: 100%;
background-color: var(--tj-color-border-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.process__inner--2 .process-line {
right: -115px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.process__inner--2 .process-line {
right: -90px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__inner--2 .process-line {
transform: translateX(50%);
top: 10px;
right: 50%;
height: calc(100% - 10px);
}
}
.process__inner--2 .process__index {
width: 60px;
height: 60px;
background: var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
border-radius: 50%;
text-align: center;
font-family: var(--tj-ff-heading);
font-size: 24px;
letter-spacing: -0.02em;
font-weight: var(--tj-fw-bold);
display: flex;
justify-content: center;
align-items: center;
outline: 10px solid var(--tj-color-theme-bg3);
transition: all 0.3s linear;
position: absolute;
right: -97px;
top: 50%;
transform: translate(100%, -50%);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.process__inner--2 .process__index {
right: -85px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.process__inner--2 .process__index {
right: -60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__inner--2 .process__index {
top: -90px;
right: 50%;
transform: translateX(50%);
}
}
.process__inner--2 .process__title {
margin-bottom: 16px;
color: var(--tj-color-heading-primary);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.process__inner--2 .process__title {
font-size: 24px;
margin-bottom: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__inner--2 .process__title {
font-size: 22px;
margin-bottom: 10px;
}
}
.process__inner--2 .process__desc {
margin-bottom: 0px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.process__inner--2 .process__desc {
font-size: 16px;
margin-bottom: 0px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__inner--2 .process__desc {
font-size: 16px;
margin-bottom: 0px;
}
}
.process__inner--2 .process__single {
display: block;
background: var(--tj-color-theme-bg1);
border-radius: 12px;
padding: 43px 45px;
margin-bottom: 0;
position: relative;
overflow: visible;
z-index: 1;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.process__inner--2 .process__single {
padding: 30px 35px 33px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__inner--2 .process__single {
padding: 35px 25px;
}
}
.process__inner--2 .process__single.active .process__index {
background-color: var(--tj-color-theme-secondary);
outline-color: var(--tj-color-theme-bg10);
}
.process__inner--2 .process__single:hover .process__index {
animation: none;
}
/**----------------------------------------
START: H4 Blog CSS
----------------------------------------*/
.blog__single--2 {
border-radius: 0;
overflow: visible;
}
.blog__single--2 .blog__single__banner {
width: 100%;
height: 506px;
border-radius: 16px;
position: relative;
z-index: 0;
overflow: hidden;
z-index: 0;
}
@media (max-width: 575px) {
.blog__single--2 .blog__single__banner {
height: 400px;
}
}
.blog__single--2 .blog__single__banner:after {
content: "";
height: 100%;
width: 100%;
background: linear-gradient(180deg, rgba(5, 23, 61, 0) 36.56%, var(--tj-color-theme-dark) 100%);
pointer-events: none;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.blog__single--2 .blog__single__banner a {
height: 100%;
width: 100%;
}
.blog__single--2 .blog__single__banner a img {
height: 100%;
width: 100%;
object-fit: cover;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog__single--2 .blog__single__banner {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single--2 .blog__single__banner {
border-radius: 10px;
}
}
.blog__single--2 .blog__single__content {
position: absolute;
left: 0;
bottom: -40px;
background-color: transparent;
padding: 0 24px 24px 30px;
width: 100%;
z-index: 1;
transition: all var(--tj-td-standard) ease-in-out 0s;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog__single--2 .blog__single__content {
padding: 0 20px 24px 24px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single--2 .blog__single__content {
padding: 0 16px 20px 20px;
}
}
.blog__single--2 .blog__single__content__list {
display: flex;
gap: 24px;
align-items: center;
margin-bottom: 16px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog__single--2 .blog__single__content__list {
margin-bottom: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single--2 .blog__single__content__list {
margin-bottom: 12px;
}
}
.blog__single--2 .blog__single__content__list li {
position: relative;
}
.blog__single--2 .blog__single__content__list li::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
width: 4px;
height: 4px;
background-color: var(--tj-color-common-white);
border-radius: 100%;
transform: translate(10px, -50%);
}
.blog__single--2 .blog__single__content__list li a:not(.blog__single__content__tag) {
color: var(--tj-color-common-white);
background-color: var(--tj-color-theme-primary);
font-size: 14px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.blog__single--2 .blog__single__content__list li a:not(.blog__single__content__tag) {
font-size: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single--2 .blog__single__content__list li a:not(.blog__single__content__tag) {
font-size: 12px;
}
}
.blog__single--2 .blog__single__content__list li a:not(.blog__single__content__tag):hover {
background-color: var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
}
.blog__single--2 .blog__single__content__list li:last-child::after {
display: none;
}
.blog__single--2 .blog__single__content__tag {
font-family: var(--tj-ff-body);
display: inline-flex;
justify-content: center;
align-items: center;
padding: 4px 6px 2px;
background-color: transparent;
border: 1px solid var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
background: var(--tj-color-theme-primary);
font-size: 14px;
line-height: 1;
letter-spacing: 2%;
border-radius: 3px;
font-weight: var(--tj-fw-medium);
}
.blog__single--2 .blog__single__content__tag:hover {
color: var(--tj-color-theme-dark) !important;
background-color: var(--tj-color-common-white);
border-color: var(--tj-color-common-white);
}
.blog__single--2 .blog__single__content__date {
color: var(--tj-color-common-white);
font-size: 14px;
}
.blog__single--2 .blog__single__title {
font-size: 24px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single--2 .blog__single__title {
font-size: 20px;
}
}
.blog__single--2 .blog__single__title a {
color: var(--tj-color-common-white);
}
.blog__single--2 .blog__single__title:hover {
animation: texthover 0.3s linear;
}
.blog__single--2 .tj-btn-2 {
color: var(--tj-color-common-white);
font-size: 16px;
opacity: 0;
}
.blog__single--2 .tj-btn-2 i {
font-size: 16px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single--2 .tj-btn-2 {
font-size: 14px;
}
.blog__single--2 .tj-btn-2 i {
font-size: 14px;
}
}
.blog__single--2 .tj-btn-2 i {
color: var(--tj-color-common-white);
}
.blog__single--2:hover .blog__single__content {
bottom: 0;
}
.blog__single--2:hover .tj-btn-2 {
opacity: 1;
}
/* START: H5 Header CSS */
.header--5 {
border-radius: 12px;
}
.header--5.header-duplicate {
top: -300px;
left: 30px;
right: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.header--5.header-duplicate {
left: 15px;
right: 15px;
}
}
.header--5.header-duplicate.sticky {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
top: 0;
}
.header--5 .header__wrapper {
padding-left: 20px;
padding-right: 20px;
justify-content: space-between;
}
.header--5 .header__wrapper > div:last-child {
margin-left: 0;
}
@media (max-width: 575px) {
.header--5 .header__wrapper {
padding-left: 15px;
padding-right: 15px;
}
}
.header--5.header--absolute {
margin-top: 30px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
}
@media (max-width: 575px) {
.header--5.header--absolute {
margin-top: 15px;
}
}
.header--5.header--absolute .mainmenu nav > ul > li > a {
color: var(--tj-color-common-white);
}
.header--5.header--absolute .mainmenu nav > ul > li.has-dropdown > a::after {
color: var(--tj-color-common-white);
}
.header--5.header--absolute .header__mobile-toggler {
border-color: var(--tj-color-border-4);
}
.header--5.header--absolute .header__mobile-toggler span {
background-color: var(--tj-color-common-white);
}
.header--5.header--absolute .tj-btn:hover {
border-color: var(--tj-color-common-white);
color: var(--tj-color-common-white);
}
.header--5.header .header__right {
gap: 14px;
}
@media (max-width: 575px) {
.header--5.header .header__right {
gap: 10px;
}
}
.header--5.header .header__right .header__mobile-toggler {
border-radius: 100%;
}
.header--5.header .header__right .tj-btn {
padding: 14px 30px;
border-radius: 58px;
}
.header--5.header .header__right .tj-btn::after {
border-radius: 58px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) {
.header--5.header .header__right .tj-btn {
padding: 11px 25px;
}
}
/* !END: Header CSS */
/* START: H5 Footer CSS */
.footer__widget.style-2.widget_nav_menu ul li {
margin-bottom: 10px;
}
.footer__widget.style-2.widget_nav_menu ul li a {
color: var(--tj-color-common-white);
font-family: var(--tj-ff-heading);
font-size: var(--tj-fs-h5);
line-height: var(--tj-lh-h5);
font-weight: var(--tj-fw-bold);
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 8px;
transform: translateX(0);
}
.footer__widget.style-2.widget_nav_menu ul li a i {
font-size: 16px;
transition: all var(--tj-td-standard) ease-in-out 0s;
transform: rotate(-45deg) translateX(-10px);
margin-left: -4px;
opacity: 0;
}
.footer__widget.style-2.widget_nav_menu ul li a:hover {
padding-left: 0;
}
.footer__widget.style-2.widget_nav_menu ul li a:hover i {
transform: rotate(-45deg) translateX(0);
opacity: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__widget.style-2.widget_nav_menu ul li a {
font-size: 18px;
}
}
.footer__widget.style-3.copyright ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 24px;
}
.footer__widget.style-3.copyright ul li {
position: relative;
line-height: 1;
z-index: 1;
}
.footer__widget.style-3.copyright ul li > a {
position: relative;
display: inline;
color: var(--tj-color-common-white);
}
.footer__widget.style-3.copyright ul li > a:hover {
color: var(--tj-color-theme-primary);
}
.footer__widget.style-3.copyright ul li > a::before {
content: "";
width: 4px;
height: 4px;
background-color: var(--tj-color-common-white);
border-radius: 100%;
position: absolute;
top: 50%;
left: -14px;
transform: translateY(-50%);
}
.footer__widget.style-3.copyright ul li > a:has(i):before {
display: none;
}
.footer__widget.style-3.copyright ul li:first-child a::before {
display: none;
}
.footer__top.style-5 .tj-input__wrapper .tj-input {
padding: 20px 18px;
padding-inline-end: 210px;
color: var(--tj-color-common-white);
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-sbold);
letter-spacing: -0.02em;
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(22px);
border-color: var(--tj-color-border-5);
}
.footer__top.style-5 .tj-input__wrapper .tj-input:focus {
border-color: var(--tj-color-theme-primary);
}
@media (max-width: 575px) {
.footer__top.style-5 .tj-input__wrapper .tj-input {
padding-inline-end: 70px;
}
}
.footer__top.style-5 .tj-input__wrapper .tj-btn {
padding: 19px 30px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.footer__top.style-5 .tj-input__wrapper .tj-btn {
padding: 16px 24px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__top.style-5 .tj-input__wrapper .tj-btn {
top: 8px;
right: 8px;
}
}
@media (max-width: 575px) {
.footer__top.style-5 .tj-input__wrapper .tj-btn {
padding: 16px 18px;
}
}
.footer__top.style-5 .tj-input__wrapper .tj-btn i {
font-size: 16px;
}
.footer__top.style-5 .tj-input__wrapper .tj-btn:hover {
border-color: var(--tj-color-common-white);
color: var(--tj-color-common-white);
}
.footer__top.style-5 .tj-input__wrapper .tj-btn:hover i {
color: var(--tj-color-common-white);
}
.footer-5-bottom {
margin: 0 -1.5% 0 -3%;
}
.tj-socials.style-2 ul li a i {
color: var(--tj-color-common-white);
position: relative;
z-index: 0;
}
.tj-socials.style-2 ul li a i::after {
content: "";
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
right: 1px;
background-color: transparent;
border-radius: 100%;
z-index: -1;
}
.tj-socials.style-2 ul li a:hover i {
color: var(--tj-color-theme-secondary);
}
.tj-socials.style-2 ul li a:hover i::after {
background-color: var(--tj-color-common-white);
}
.footer-contact-info.style-2 .contact-item {
margin-bottom: 18px;
}
.footer-contact-info.style-2 .contact-item:last-child {
margin-bottom: 0;
}
.footer-contact-info.style-2 .contact-item p {
font-family: var(--tj-ff-heading);
font-size: 18px;
font-weight: var(--tj-fw-bold);
letter-spacing: -0.02em;
line-height: 1.44;
color: var(--tj-color-common-white);
margin-bottom: 0;
}
.footer-contact-info.style-2 .contact-item span {
font-family: var(--tj-ff-heading);
font-size: 18px;
font-weight: var(--tj-fw-bold);
letter-spacing: -0.02em;
line-height: 1.44;
color: var(--tj-color-common-white);
}
.footer-contact-info.style-2 .contact-item span i {
color: var(--tj-color-common-white);
}
.footer-contact-info.style-2 .contact-item a {
display: inline;
letter-spacing: -0.02em;
line-height: 1.44;
color: var(--tj-color-common-white);
background-image: linear-gradient(to right, currentColor 0, currentColor 100%);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0 1px;
}
.footer-contact-info.style-2 .contact-item a:hover {
color: currentColor;
background-size: 100% 1px;
}
/* !END: H5 Footer CSS */
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.hero--6 {
position: relative;
overflow: hidden;
z-index: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.hero--6 .hero__inner {
min-height: 911px;
padding-top: 236px;
overflow: visible;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hero--6 .hero__inner {
min-height: 710px;
padding-top: 176px;
padding-bottom: 70px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero--6 .hero__inner {
min-height: 680px;
padding-top: 176px;
padding-bottom: 60px;
}
}
@media (max-width: 575px) {
.hero--6 .hero__inner {
min-height: 670px;
padding-top: 156px;
padding-bottom: 40px;
}
}
.hero--6 .hero__left {
max-width: 877px;
text-align: end;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--6 .hero__left {
max-width: 706px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.hero--6 .hero__left {
max-width: 588px;
margin-inline-start: auto;
}
}
.hero--6 .hero__title {
font-size: 110px;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--tj-color-common-white);
margin-top: -20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--6 .hero__title {
font-size: 90px;
max-width: 100%;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--6 .hero__title {
font-size: 70px;
max-width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--6 .hero__title {
max-width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hero--6 .hero__title {
font-size: 70px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero--6 .hero__title {
font-size: 66px;
}
}
@media (max-width: 575px) {
.hero--6 .hero__title {
font-size: 44px;
}
}
.hero--6 .hero__title span {
color: var(--tj-color-common-white);
display: inline-flex;
align-items: center;
}
.hero--6 .hero__title img {
width: 220px;
height: 84px;
object-fit: cover;
border-radius: 66px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--6 .hero__title img {
width: 184px;
height: 69px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.hero--6 .hero__title img {
width: 130px;
height: 56px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero--6 .hero__title img {
width: 120px;
height: 50px;
}
}
@media (max-width: 575px) {
.hero--6 .hero__title img {
width: 80px;
height: 35px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--6 .hero__client__thumbs {
flex-shrink: 0;
}
}
.hero--6 .hero__right {
min-height: 580px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
z-index: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--6 .hero__right {
margin-top: 40px;
max-width: 100%;
min-height: auto;
flex-direction: row-reverse;
justify-content: space-between;
gap: 15px;
}
}
@media (max-width: 575px) {
.hero--6 .hero__right {
flex-direction: column-reverse;
align-items: flex-start;
margin-top: 30px;
gap: 30px;
}
}
.hero--6 .hero__right .client__thumbs {
border: 0;
background-color: transparent;
padding: 0;
margin-right: 40px;
box-shadow: none;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--6 .hero__right .client__thumbs {
animation: none;
margin-right: 0;
}
}
.hero--6 .hero__right .client__thumbs .client__thumbs__title {
color: var(--tj-color-common-white);
}
.hero--6 .hero__desc {
max-width: 343px;
font-size: 20px;
letter-spacing: var(-0.02em);
font-weight: var(--tj-fw-medium);
margin-bottom: 0;
color: var(--tj-color-common-white);
}
.hero--6 .hero__desc__start {
font-size: 49px;
line-height: 1;
font-weight: 600;
display: block;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hero--6 .hero__desc {
max-width: 400px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero--6 .hero__desc {
max-width: 380px;
}
}
@media (max-width: 575px) {
.hero--6 .hero__desc {
max-width: 100%;
font-size: 18px;
}
}
.hero--6 .hero__shape {
position: absolute;
width: 616px;
height: 616px;
background: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, var(--tj-color-theme-secondary) 100%);
filter: blur(120px);
border-radius: 50%;
z-index: -1;
}
.hero--6 .hero__shape--1 {
top: -8%;
left: -27%;
}
.hero--6 .hero__shape--2 {
width: 766px;
height: 766px;
bottom: -22%;
right: 10%;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.hero--6 .hero__scroll {
left: 10px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--6 .hero__scroll {
display: none;
}
}
/* !END: Hero CSS */
/**----------------------------------------
START: Client CSS
----------------------------------------*/
.tj-client-section .swiper {
padding-bottom: 0;
}
.client-content {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin-bottom: 60px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.client-content {
margin-bottom: 40px;
}
}
@media (max-width: 575px) {
.client-content {
margin-bottom: 30px;
}
}
.client-content .sec-title {
line-height: 1;
margin-bottom: 0;
font-weight: var(--tj-fw-bold);
letter-spacing: -0.02em;
}
@media (max-width: 575px) {
.client-content .sec-title {
font-size: 15px;
}
}
.client-content .sec-title span {
background-color: var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
position: relative;
line-height: 1;
border-radius: 50px;
padding: 3px 6px 4px 8px;
display: inline-block;
}
.client-content .sec-title span img {
position: absolute;
right: 100%;
bottom: 100%;
transform: translate(5px, 5px);
}
.client-content span {
display: inline-flex;
}
.client-content .client-text {
color: var(--tj-color-text-body-3);
position: relative;
}
.client-slider .swiper-wrapper {
transition-timing-function: linear;
}
.client-item {
width: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
padding-inline-end: 30px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.client-item {
padding-inline-end: 20px;
}
}
.client-item.swiper-slide {
width: auto;
}
.client-logo {
width: 284px;
height: 120px;
background-color: var(--tj-color-common-white);
border: 1px solid var(--tj-color-border-1);
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
z-index: 0;
border-radius: 8px;
}
.client-logo > img:not(:first-child) {
opacity: 0;
visibility: hidden;
width: 0;
}
.client-logo-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all var(--tj-td-standard) ease-in-out 0s;
z-index: -1;
}
.client-logo-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.client-logo {
width: 220px;
height: 90px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.client-logo {
width: 190px;
height: 70px;
padding: 20px;
}
}
.client-logo:hover > img:not(:first-child) {
opacity: 1;
visibility: visible;
width: auto;
}
.client-logo:hover > img:first-child {
opacity: 0;
visibility: hidden;
width: 0;
}
.client-logo:hover .client-logo-bg {
opacity: 1;
}
/* !END: Client CSS */
/**----------------------------------------
START: Feature CSS
----------------------------------------*/
.service__card--2 {
background: var(--tj-color-common-white);
padding: 35px 30px;
border: 0;
}
.service__card--2::after {
display: none;
}
.service__card--2 .service__icon {
background-color: var(--tj-color-theme-secondary);
border: 0;
margin-bottom: 24px;
}
.service__card--2 .service__icon i {
color: var(--tj-color-common-white);
font-size: 52px;
}
.service__card--2 .service__title {
margin-bottom: 16px;
color: var(--tj-color-heading-primary);
}
.service__card--2 .service__desc {
margin-bottom: 0;
}
.service__card--2:hover {
background: var(--tj-color-common-white);
}
.service__card--2:hover .service__icon {
background-color: var(--tj-color-theme-primary);
}
.service__card--2:hover .service__title {
color: var(--tj-color-heading-primary);
}
.service__card--2:hover .service__desc {
color: var(--tj-color-text-body);
}
.service__card--3 {
background: var(--tj-color-theme-bg1);
padding: 35px 30px;
border: 0;
}
.service__card--3::after {
display: none;
}
.service__card--3 .service__icon {
background-color: var(--tj-color-theme-secondary);
border: 0;
}
.service__card--3 .service__icon i {
color: var(--tj-color-common-white);
}
.service__card--3 .service__title {
margin-bottom: 16px;
color: var(--tj-color-heading-primary);
}
.service__card--3 .service__desc {
margin-bottom: 0;
}
.service__card--3:hover {
background: var(--tj-color-theme-bg2);
}
.service__card--3:hover .service__icon {
background-color: var(--tj-color-theme-primary);
}
.service__card--3:hover .service__title {
color: var(--tj-color-heading-primary);
}
.service__card--3:hover .service__desc {
color: var(--tj-color-text-body);
}
/* !END: Feature CSS */
/**----------------------------------------
START: H5 Funfact CSS
----------------------------------------*/
.funfact-area.style-3 .funfact-item {
padding: 0;
text-align: left;
display: flex;
flex-direction: column;
justify-content: flex-start;
background: transparent;
border-radius: 0;
border: 0;
}
.funfact-area.style-3 .funfact-item::after {
display: none;
}
.funfact-area.style-3 .funfact-item .number {
font-size: 100px;
color: var(--tj-color-heading-primary);
text-align: start;
justify-content: flex-start;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.funfact-area.style-3 .funfact-item .number {
font-size: 80px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-3 .funfact-item .number {
font-size: 60px;
}
}
.funfact-area.style-3 .funfact-item .text {
line-height: 1.625;
margin-top: 8px;
color: var(--tj-color-text-body);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-3 .funfact-item .text {
font-size: 16px;
}
}
/**----------------------------------------
START: Testimonials CSS
----------------------------------------*/
.testimonials__wrapper .testimonials__slider__2 {
overflow: visible;
}
.testimonials__wrapper .testimonials__slider__item {
background-color: var(--tj-color-theme-bg1);
border: 1px solid var(--tj-color-border-1);
padding: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__wrapper .testimonials__slider__item {
padding: 30px;
}
}
@media (max-width: 575px) {
.testimonials__wrapper .testimonials__slider__item {
padding: 20px;
}
}
.testimonials__wrapper .testimonials__author {
margin-bottom: 24px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__wrapper .testimonials__author {
margin-bottom: 24px;
}
}
.testimonials__wrapper .testimonials__desc {
font-size: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.testimonials__wrapper .testimonials__desc {
font-size: 18px;
}
}
@media (max-width: 575px) {
.testimonials__wrapper .testimonials__desc {
font-size: 16px;
}
}
.testimonials__wrapper .testimonials__rating {
margin-bottom: 0;
}
.testimonials__wrapper--2 .swiper {
padding-bottom: 0;
}
.testimonials__wrapper--2 .swiper .swiper-horizontal > .swiper-pagination-bullets,
.testimonials__wrapper--2 .swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.testimonials__wrapper--2 .swiper .swiper-pagination-custom,
.testimonials__wrapper--2 .swiper .swiper-pagination-fraction {
left: auto;
right: 30px;
bottom: 30px;
width: auto;
}
.testimonials__wrapper--2 .swiper .swiper-pagination-bullet-active,
.testimonials__wrapper--2 .swiper .swiper-pagination-bullet:hover {
width: 10px;
height: 10px;
}
.testimonials__wrapper--2 .testimonials__slider__2 {
overflow: visible;
}
.testimonials__wrapper--2 .testimonials__slider__item {
background-color: var(--tj-color-common-white);
border: 0;
padding: 35px 30px 30px;
border-radius: 12px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__wrapper--2 .testimonials__slider__item {
padding: 30px;
}
}
@media (max-width: 575px) {
.testimonials__wrapper--2 .testimonials__slider__item {
padding: 20px;
}
}
.testimonials__wrapper--2 .testimonials__footer__logo {
margin-bottom: 30px;
width: 115px;
}
.testimonials__wrapper--2 .testimonials__footer__logo img {
mix-blend-mode: Difference;
}
.testimonials__wrapper--2 .testimonials__desc {
padding-bottom: 0;
margin-bottom: 30px;
font-size: 20px;
font-weight: var(--tj-fw-medium);
font-family: var(--tj-ff-heading);
line-height: 1.4;
letter-spacing: -0.02em;
border: 0;
}
.testimonials__wrapper--2 .testimonials__author {
margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__wrapper--2 .testimonials__author {
margin-bottom: 0;
}
}
.testimonials__wrapper--3 {
position: relative;
z-index: 0;
}
.testimonials__wrapper--3 .testimonials__slider__item {
padding: 40px 30px;
border: 0;
border-radius: 12px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__wrapper--3 .testimonials__slider__item {
padding: 30px 20;
}
}
@media (max-width: 575px) {
.testimonials__wrapper--3 .testimonials__slider__item {
padding: 25px 20px;
}
}
.testimonials__wrapper--3 .testimonials__desc {
font-size: 18px;
line-height: 1.55556;
}
.testimonials__wrapper--3:has(.swiper-pagination-bullet) .swiper-button-prev, .testimonials__wrapper--3:has(.swiper-pagination-bullet) .swiper-button-next {
top: calc(50% - 35px);
}
.testimonials__wrapper--3:hover .swiper-button-prev,
.testimonials__wrapper--3:hover .swiper-button-next {
opacity: 1;
visibility: visible;
}
.testimonials__wrapper--3:hover .swiper-button-prev {
left: 0;
}
.testimonials__wrapper--3:hover .swiper-button-next {
right: 0;
}
/* !END: Testimonials CSS */
/**----------------------------------------
START: H5 Service CSS
----------------------------------------*/
.service__wrapper {
display: flex;
gap: 30px;
align-items: center;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.service__wrapper {
gap: 20px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper {
flex-wrap: wrap;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper {
gap: 15px;
}
}
.service__wrapper .service__card {
display: flex;
padding: 15px;
background: var(--tj-color-common-white);
width: 250px;
height: 369px;
align-items: center;
position: relative;
border: 0;
overflow: hidden;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.service__wrapper .service__card {
height: 400px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.service__wrapper .service__card {
flex-wrap: wrap;
width: calc(50% - 10px);
height: auto;
flex-direction: column-reverse;
gap: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card {
width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.service__wrapper .service__card {
align-items: center;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card {
flex-wrap: wrap;
height: auto;
flex-direction: column-reverse;
gap: 14px;
}
}
.service__wrapper .service__card::after {
display: none;
}
.service__wrapper .service__card .service__banner {
width: 0;
transition: all var(--tj-td-standard) ease-in-out 0s;
height: 100%;
flex-shrink: 0;
position: relative;
z-index: 1;
border-radius: 10px;
overflow: hidden;
}
.service__wrapper .service__card .service__banner a {
height: 100%;
display: inline-block;
}
.service__wrapper .service__card .service__banner img {
height: 100%;
width: 100%;
object-fit: cover;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card .service__banner {
width: 100%;
height: auto;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.service__wrapper .service__card .service__banner {
width: 51.4%;
flex-shrink: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card .service__banner {
width: 100%;
height: auto;
}
}
.service__wrapper .service__card .service__content {
width: 100%;
transition: all var(--tj-td-standard) ease-in-out 0s;
padding-left: 10px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
flex-shrink: 0;
overflow: hidden;
}
.service__wrapper .service__card .service__content--main {
display: block;
visibility: hidden;
transform: translateX(110%);
transition-delay: 0.05s;
position: relative;
z-index: 0;
}
.service__wrapper .service__card .service__content--main .service__index {
display: none;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card .service__content--main .service__index {
display: block;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.service__wrapper .service__card .service__content {
padding-left: 0;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card .service__content {
height: auto;
width: 100%;
display: none;
}
.service__wrapper .service__card .service__content--main {
display: block;
visibility: visible;
transform: translateX(0);
transition-delay: 0;
padding: 20px 10px 10px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.service__wrapper .service__card .service__content {
display: none;
flex-shrink: 1;
padding-left: 15px;
justify-content: center;
}
.service__wrapper .service__card .service__content--main {
display: flex;
visibility: visible;
transform: translateX(0);
transition-delay: 0;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.service__wrapper .service__card .service__content:not(.service__wrapper .service__card .service__content--main) .service__icon {
width: 60px;
height: 60px;
font-size: 36px;
}
.service__wrapper .service__card .service__content:not(.service__wrapper .service__card .service__content--main) .service__title {
font-size: 20px;
}
}
.service__wrapper .service__card .service__index {
position: absolute;
right: 20px;
top: 20px;
font-weight: var(--tj-fw-bold);
font-style: Bold;
font-size: 14px;
letter-spacing: -0.02em;
margin: 0;
color: var(--tj-color-common-white2);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card .service__index {
display: none;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card .service__index {
right: 15px;
top: 15px;
}
}
.service__wrapper .service__card .service__icon {
width: 72px;
height: 72px;
border: 0;
background-color: var(--tj-color-theme-secondary);
margin-bottom: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card .service__icon {
margin-bottom: 14px;
}
}
.service__wrapper .service__card .service__icon i {
font-size: 47px;
color: var(--tj-color-common-white);
}
.service__wrapper .service__card .service__title {
margin-bottom: 16px;
max-width: 169px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card .service__title {
max-width: 100%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card .service__title {
margin-bottom: 12px;
}
}
.service__wrapper .service__card .service__desc {
margin-bottom: 16px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card .service__desc {
margin-bottom: 14px;
}
}
.service__wrapper .service__card.active {
width: 680px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), (max-width: 575px) {
.service__wrapper .service__card.active {
width: calc(50% - 10px);
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card.active {
width: 100%;
}
}
.service__wrapper .service__card.active .service__banner {
width: 51.4%;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card.active .service__banner {
width: 100%;
}
}
.service__wrapper .service__card.active .service__title {
max-width: 100%;
}
.service__wrapper .service__card.active .service__content {
padding-left: 15px;
justify-content: center;
display: none;
flex-shrink: 1;
}
.service__wrapper .service__card.active .service__content--main {
display: flex;
visibility: visible;
transform: translateX(0);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card.active .service__content {
padding-left: 10px;
}
}
.service__wrapper .service__card.active .service__icon {
background-color: var(--tj-color-theme-primary);
}
.service__wrapper .service__card.active .service__title a {
color: var(--tj-color-heading-primary);
}
.service__wrapper .service__card.active .service__title a:hover {
color: var(--tj-color-theme-primary);
}
.service__wrapper .service__card.active .service__desc {
color: var(--tj-color-text-body);
}
.service__wrapper .service__card.active .tj-btn-2 {
color: var(--tj-color-heading-primary);
}
.service__wrapper .service__card.active .tj-btn-2 i {
color: var(--tj-color-heading-primary);
}
.service__wrapper .service__card.active .tj-btn-2:hover {
color: var(--tj-color-theme-primary);
}
.service__wrapper .service__card.active .tj-btn-2:hover i {
color: var(--tj-color-theme-primary);
}
.service__wrapper__2 {
display: flex;
flex-direction: column;
gap: 30px;
}
.service__wrapper__2 .service__card {
display: flex;
padding: 45px 30px;
background: var(--tj-color-theme-bg1);
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
z-index: inherit;
border: 0;
border-radius: 10px;
}
.service__wrapper__2 .service__card::after {
display: none;
}
.service__wrapper__2 .service__card .service__banner {
background-size: inherit;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
width: 330px;
height: 334px;
opacity: 0;
margin: -180px 0 0 -180px;
overflow: hidden;
pointer-events: none;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 10px;
transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
z-index: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__2 .service__card .service__banner {
width: 250px;
height: 254px;
}
}
.service__wrapper__2 .service__card .service__title {
max-width: 169px;
margin-bottom: 0;
}
.service__wrapper__2 .service__card .service__title__wrapper {
max-width: 225px;
display: flex;
align-items: center;
gap: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__2 .service__card .service__title {
margin-bottom: 12px;
}
}
.service__wrapper__2 .service__card .service__icon {
margin-bottom: 0;
flex-shrink: 0;
border: 0;
background-color: var(--tj-color-theme-secondary);
}
.service__wrapper__2 .service__card .service__icon i {
font-size: 47px;
color: var(--tj-color-common-white);
}
.service__wrapper__2 .service__card .service__desc {
max-width: 357px;
margin-bottom: 0;
}
.service__wrapper__2 .service__card .service__link {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.service__wrapper__2 .service__card .tj-btn__icon {
width: 54px;
height: 54px;
display: inline-flex;
justify-content: center;
align-items: center;
line-height: 1;
background-color: var(--tj-color-common-white);
transition: all var(--tj-td-standard) ease-in-out 0s;
border: 1px solid var(--tj-color-border-1);
border-radius: 50%;
will-change: transform;
}
.service__wrapper__2 .service__card .tj-btn__icon i {
color: var(--tj-color-heading-primary);
font-size: 16px;
transform: rotate(-45deg);
}
.service__wrapper__2 .service__card:hover {
background-color: var(--tj-color-theme-bg2);
}
.service__wrapper__2 .service__card:hover .service__banner {
opacity: 1;
}
.service__wrapper__2 .service__card:hover .service__title {
color: var(--tj-color-heading-primary);
}
.service__wrapper__2 .service__card:hover .service__desc {
color: var(--tj-color-text-body);
}
.service__wrapper__2 .service__card:hover .service__icon {
background-color: var(--tj-color-theme-primary);
}
.service__wrapper__2 .service__card:hover .tj-btn__icon {
background-color: var(--tj-color-theme-primary);
border-color: var(--tj-color-theme-primary);
}
.service__wrapper__2 .service__card:hover .tj-btn__icon i {
color: var(--tj-color-common-white);
transform: rotate(0deg);
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.service__wrapper__2 .service__card {
padding: 30px 30px;
}
.service__wrapper__2 .service__card .service__desc {
max-width: 250px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__2 .service__card {
padding: 30px 30px;
}
.service__wrapper__2 .service__card .service__desc {
margin-top: 16px;
max-width: 355px;
}
}
@media (max-width: 575px) {
.service__wrapper__2 .service__card {
padding: 30px 25px;
}
.service__wrapper__2 .service__card .service__desc {
margin-top: 16px;
margin-bottom: 16px;
}
}
/**----------------------------------------
START: H5 Portfolio CSS
----------------------------------------*/
.portfolio__wrapper--2 .portfolio__single {
display: flex;
gap: 30px;
margin-bottom: 30px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper--2 .portfolio__single {
gap: 20px;
margin-bottom: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper--2 .portfolio__single {
flex-direction: column;
align-items: center;
}
.portfolio__wrapper--2 .portfolio__single .tj-u-shape {
left: 50%;
top: 100%;
transform: translateX(-50%) translateY(-15px) rotate(90deg);
}
}
.portfolio__wrapper--2 .portfolio__single:last-child {
margin-bottom: 0;
}
.portfolio__wrapper--2 .portfolio__single::after {
display: none;
}
.portfolio__wrapper--2 .portfolio__single:hover .portfolio__single__img img {
transform: scale(1);
}
.portfolio__wrapper--2 .portfolio__single:hover .portfolio__single__title a {
letter-spacing: inherit;
}
.portfolio__wrapper--2 .portfolio__single:hover .portfolio__single__tag {
color: var(--tj-color-theme-secondary);
}
.portfolio__wrapper--2 .portfolio__single__img {
overflow: hidden;
border-radius: 16px;
width: calc(50% - 15px);
height: 540px;
}
.portfolio__wrapper--2 .portfolio__single__img img {
height: 100%;
object-fit: cover;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper--2 .portfolio__single__img {
width: 100%;
height: auto;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper--2 .portfolio__single__img {
border-radius: 12px;
}
}
.portfolio__wrapper--2 .portfolio__single__content {
padding: 0;
width: calc(50% - 15px);
max-width: 495px;
position: static;
transform: none;
padding: 30px;
padding-right: 0;
opacity: 1;
visibility: visible;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.portfolio__wrapper--2 .portfolio__single__content {
padding: 30px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper--2 .portfolio__single__content {
width: 100%;
max-width: 100%;
padding: 0 10px 20px;
padding-top: 0;
}
}
@media (max-width: 575px) {
.portfolio__wrapper--2 .portfolio__single__content {
padding: 0 10px 15px;
}
}
.portfolio__wrapper--2 .portfolio__single__content__wrapper {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
gap: 30px;
position: relative;
padding: 30px;
background-color: var(--tj-color-common-white);
border-radius: 16px;
width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper--2 .portfolio__single__content__wrapper {
flex-wrap: wrap;
gap: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper--2 .portfolio__single__content__wrapper {
padding: 15px;
}
}
.portfolio__wrapper--2 .portfolio__single__content__wrapper .tj-u-shape {
background-color: var(--tj-color-common-white);
}
.portfolio__wrapper--2 .portfolio__single__content__wrapper .tj-u-shape::before, .portfolio__wrapper--2 .portfolio__single__content__wrapper .tj-u-shape::after {
background-color: var(--tj-color-theme-bg1);
}
.portfolio__wrapper--2 .portfolio__single__content__wrapper:hover .portfolio__single__img img {
transform: scale(1.2);
}
.portfolio__wrapper--2 .portfolio__single__tag {
color: var(--tj-color-theme-secondary);
background: var(--tj-color-theme-bg1);
border: 1px solid var(--tj-color-border-1);
}
.portfolio__wrapper--2 .portfolio__single__tag:hover {
color: var(--tj-color-common-white) !important;
background-color: var(--tj-color-theme-secondary);
border-color: var(--tj-color-theme-secondary);
}
.portfolio__wrapper--2 .portfolio__single__title {
color: var(--tj-color-heading-primary);
margin-bottom: 18px;
font-size: var(--tj-fs-h3);
line-height: var(--tj-lh-h3);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.portfolio__wrapper--2 .portfolio__single__title {
font-size: 30px;
margin-bottom: 18px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.portfolio__wrapper--2 .portfolio__single__title {
font-size: 28px;
margin-bottom: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.portfolio__wrapper--2 .portfolio__single__title {
font-size: 26px;
margin-bottom: 18px;
}
}
@media (max-width: 575px) {
.portfolio__wrapper--2 .portfolio__single__title {
font-size: 24px;
margin-bottom: 16px;
}
}
.portfolio__wrapper--2 .portfolio__single__title:hover a {
color: var(--tj-color-theme-primary);
}
.portfolio__wrapper--2 .portfolio__single__desc {
margin-bottom: 24px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.portfolio__wrapper--2 .portfolio__single__desc {
margin-bottom: 24px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper--2 .portfolio__single__desc {
margin-bottom: 16px;
}
}
.portfolio__wrapper--2 .portfolio__single__info ul {
display: flex;
gap: 18px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) {
.portfolio__wrapper--2 .portfolio__single__info ul {
margin-top: 40px;
}
}
@media (max-width: 575px) {
.portfolio__wrapper--2 .portfolio__single__info ul {
margin-top: 30px;
flex-wrap: wrap;
}
}
.portfolio__wrapper--2 .portfolio__single__info ul li:not(:last-child) {
padding-right: 18px;
border-right: 1px solid var(--tj-color-border-1);
line-height: 1;
}
@media (max-width: 575px) {
.portfolio__wrapper--2 .portfolio__single__info ul li:not(:last-child) {
padding-right: 0;
border: 0;
gap: 15px;
padding-bottom: 15px;
width: 100%;
border-bottom: 1px solid var(--tj-color-border-1);
}
}
.portfolio__wrapper--2 .portfolio__single__info ul li p {
font-size: 12px;
line-height: 1;
margin-bottom: 8px;
text-transform: uppercase;
}
.portfolio__wrapper--2 .portfolio__single__info ul li h6 {
font-size: 16px;
line-height: 1;
font-weight: var(--tj-fw-sbold);
margin: 0;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.portfolio__wrapper--2 .portfolio__single__info ul li h6 {
font-size: 14px;
}
}
.portfolio__wrapper--3 {
max-width: 757px;
display: flex;
flex-direction: column;
gap: 30px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper--3 {
gap: 20px;
}
}
.portfolio__wrapper--3 .portfolio__single {
padding: 30px;
background: var(--tj-color-common-white);
border: 1px solid var(--tj-color-border-1);
border-radius: 12px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper--3 .portfolio__single {
padding: 20px;
}
}
.portfolio__wrapper--3 .portfolio__single__img {
border-radius: 16px;
overflow: hidden;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.portfolio__wrapper--3 .portfolio__single__img {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper--3 .portfolio__single__img {
border-radius: 10px;
}
}
.portfolio__wrapper--3 .portfolio__single__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.portfolio__wrapper--3 .portfolio__single__content {
position: static;
transform: none;
opacity: 1;
visibility: visible;
padding: 0;
padding-top: 20px;
display: flex;
gap: 10px;
justify-content: space-between;
align-items: flex-end;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper--3 .portfolio__single__content {
padding: 0;
padding-top: 20px;
}
}
@media (max-width: 575px) {
.portfolio__wrapper--3 .portfolio__single__content {
flex-wrap: wrap;
justify-content: space-between;
}
}
.portfolio__wrapper--3 .portfolio__single__tag {
border-radius: 50px;
background-color: var(--tj-color-theme-bg1);
border-color: var(--tj-color-border-1);
color: var(--tj-color-theme-secondary);
font-size: 14px;
margin-bottom: 12px;
}
.portfolio__wrapper--3 .portfolio__single__tag:hover {
border-color: var(--tj-color-theme-primary);
color: var(--tj-color-common-white) !important;
background-color: var(--tj-color-theme-primary);
}
.portfolio__wrapper--3 .portfolio__single__title {
color: var(--tj-color-heading-primary);
max-width: 350px;
margin-bottom: 0;
}
.portfolio__wrapper--3 .portfolio__single__title:hover a {
letter-spacing: inherit;
color: var(--tj-color-theme-primary);
}
.portfolio__wrapper--3 .portfolio__single::after {
display: none;
}
.portfolio__wrapper--3 .portfolio__single__action a {
visibility: visible;
opacity: 1;
position: static;
transform: none;
border: 0;
color: var(--tj-color-common-white);
background: var(--tj-color-theme-primary);
transform: rotate(-45deg);
}
.portfolio__wrapper--3 .portfolio__single__action a i {
color: var(--tj-color-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.portfolio__wrapper--3 .portfolio__single__action a {
width: 60px;
height: 60px;
}
.portfolio__wrapper--3 .portfolio__single__action a i {
font-size: 16px;
}
}
.portfolio__wrapper--3 .portfolio__single__action a:hover {
border-color: transparent;
}
.portfolio__wrapper--3 .portfolio__single__action a:hover i {
color: var(--tj-color-common-white);
}
.portfolio__wrapper--3 .portfolio__single:hover .portfolio__single__tag {
border-color: var(--tj-color-border-1);
color: var(--tj-color-theme-secondary);
}
.portfolio__wrapper--3 .portfolio__single:hover .portfolio__single__action a {
background: var(--tj-color-theme-primary);
transform: rotate(315deg);
}
.portfolio__wrapper--3 .portfolio__single:hover .portfolio__single__action a i {
color: var(--tj-color-common-white);
}
/**----------------------------------------
START: Cta CSS
----------------------------------------*/
.cta {
position: relative;
z-index: 0;
overflow: hidden;
}
.cta__content {
max-width: 502px;
min-height: 368px;
padding: 40px 30px 53px 37px;
background-color: var(--tj-color-theme-bg4);
backdrop-filter: blur(20px);
border-radius: 10;
mask-image: url("../images/shape/cta-text-bg.svg");
mask-repeat: no-repeat;
mask-size: contain;
}
.cta__content .section-heading__title {
font-size: 70px;
color: var(--tj-color-common-white);
line-height: 1.114;
font-weight: var(--tj-fw-bold);
letter-spacing: -0.025em;
margin-bottom: 33px;
}
.cta__video__btn {
display: flex;
gap: 27px;
align-items: center;
font-weight: var(--tj-fw-sbold);
line-height: 1;
}
.cta__video__btn .tj-btn--popup {
width: 82px;
height: 82px;
transition: all var(--tj-td-standard) ease-in-out 0s;
}
.cta__video__btn .tj-btn--popup i {
font-size: 22px;
}
.cta__video__btn .tj-btn--popup:hover {
border-color: var(--tj-color-common-white);
}
.cta__video__btn .tj-btn--popup:hover i {
color: var(--tj-color-common-white);
}
.cta__video__btn .tj-btn__text {
color: var(--tj-color-common-white);
}
.cta__video__btn:hover .tj-btn--popup i {
transform: translateX(0) scale(1.1);
}
.cta__video__btn:hover .tj-btn__text {
letter-spacing: 0.01em;
}
.cta__banner {
width: 117.4%;
position: relative;
mask-image: linear-gradient(180deg, #ffffff 76.22%, rgba(255, 255, 255, 0) 100%);
}
.cta__action {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
text-align: center;
gap: 7px;
color: var(--tj-color-common-white);
}
.cta__action__wrapper {
position: absolute;
left: 50%;
bottom: 100px;
transform: translateX(-50%);
}
.cta__action .tj-btn--underline {
font-size: 20px;
color: var(--tj-color-common-white);
text-decoration: none;
font-weight: var(--tj-fw-bold);
margin-left: -3px;
}
.cta__action .tj-btn--underline i {
font-size: 16px;
color: var(--tj-color-common-white);
transform: rotate(-45deg);
}
.cta__action .tj-btn--underline::before {
bottom: 2px;
right: 26px;
}
.cta__action .tj-btn--underline:hover::before {
animation-name: linehover2;
}
.cta__action .tj-btn--underline:hover i {
transform: rotate(0deg);
}
.cta__shape {
position: absolute;
width: 616px;
height: 616px;
background: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, var(--tj-color-theme-secondary) 100%);
filter: blur(120px);
border-radius: 50%;
z-index: -1;
}
.cta__shape--1 {
top: -8%;
left: -27%;
}
.cta__shape--2 {
width: 1050px;
height: 905px;
bottom: -42%;
right: 4%;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.cta__banner {
width: 100%;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.cta__content {
padding: 32px 30px 53px 37px;
margin-bottom: 30px;
}
.cta__content .section-heading__title {
font-size: 60px;
}
.cta__banner {
margin-top: 70px;
}
.cta__action__wrapper {
bottom: 80px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.cta__content {
padding: 20px 15px 30px 20px;
margin-bottom: 30px;
}
.cta__content .section-heading__title {
font-size: 50px;
margin-bottom: 25px;
}
.cta__video__btn {
gap: 15px;
}
.cta__video__btn .tj-btn--popup {
width: 72px;
height: 72px;
}
.cta__video__btn .tj-btn--popup i {
font-size: 20px;
}
.cta__banner {
margin-top: 30px;
}
.cta__action__wrapper {
bottom: 70px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.cta__banner {
margin-top: 10px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.cta__banner {
margin-top: 10px;
}
.cta__action .tj-btn--underline {
font-size: 18px;
}
}
@media (max-width: 575px) {
.cta__content {
padding: 30px 15px 30px 20px;
margin-bottom: 30px;
min-height: 230px;
}
.cta__content .section-heading__title {
font-size: 36px;
margin-bottom: 18px;
}
.cta__video__btn {
gap: 15px;
}
.cta__video__btn .tj-btn--popup {
width: 62px;
height: 62px;
}
.cta__video__btn .tj-btn--popup i {
font-size: 18px;
}
.cta__banner {
margin-top: -15px;
width: 107%;
}
.cta__action {
display: block;
}
.cta__action__wrapper {
bottom: 30px;
}
.cta__action img {
width: 25px;
}
.cta__action .tj-btn--underline {
font-size: 18px;
}
}
/* !END: Cta CSS */
/**----------------------------------------
START: H5 Blog CSS
----------------------------------------*/
.blog__single__wrapper__2 {
display: grid;
gap: 30px;
grid-template-columns: repeat(auto-fill, minmax(calc(50% - 15px), 1fr));
justify-content: center;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper__2 {
grid-template-columns: 100%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper__2 {
gap: 20px;
}
}
.blog__single__wrapper__2 .blog__single {
background-color: var(--tj-color-theme-bg1);
display: flex;
grid-template-columns: 1fr 1fr;
border-radius: 12px;
padding: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper__2 .blog__single {
flex-direction: column;
align-items: flex-start;
}
}
.blog__single__wrapper__2 .blog__single__banner {
border-radius: 10px;
max-width: 290px;
width: 100%;
height: 360px;
flex-shrink: 0;
}
.blog__single__wrapper__2 .blog__single__banner a {
height: 100%;
}
.blog__single__wrapper__2 .blog__single__banner a img {
height: 100%;
object-fit: cover;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.blog__single__wrapper__2 .blog__single__banner {
max-width: 230px;
height: 330px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.blog__single__wrapper__2 .blog__single__banner {
max-width: 200px;
height: 300px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper__2 .blog__single__banner {
max-height: 208px;
margin-bottom: 0;
max-width: 100%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.blog__single__wrapper__2 .blog__single__banner {
max-height: 240px;
margin-bottom: 0;
max-width: 100%;
}
}
.blog__single__wrapper__2 .blog__single__title {
margin-bottom: 20px;
font-size: 32px;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.blog__single__wrapper__2 .blog__single__title {
font-size: 24px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.blog__single__wrapper__2 .blog__single__title {
font-size: 28px;
margin-bottom: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.blog__single__wrapper__2 .blog__single__title {
margin-bottom: 16px;
font-size: 26px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper__2 .blog__single__title {
margin-bottom: 16px;
font-size: 24px;
}
}
.blog__single__wrapper__2 .blog__single__content {
background: transparent;
padding: 33px 15px 33px 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.blog__single__wrapper__2 .blog__single__content {
padding: 33px 15px 33px 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper__2 .blog__single__content {
padding: 15px 10px;
padding-right: 16px;
}
}
.blog__single__wrapper__2 .blog__single__content__list {
display: flex;
gap: 24px;
align-items: center;
margin-bottom: 15px;
}
.blog__single__wrapper__2 .blog__single__content__list li {
position: relative;
line-height: 1;
}
.blog__single__wrapper__2 .blog__single__content__list li::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
width: 4px;
height: 4px;
background-color: var(--tj-color-theme-dark3);
border-radius: 100%;
transform: translate(10px, -50%);
}
.blog__single__wrapper__2 .blog__single__content__list li:last-child::after {
display: none;
}
.blog__single__wrapper__2 .blog__single__content__tag {
font-family: var(--tj-ff-body);
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0;
background-color: transparent;
border: 0;
color: var(--tj-color-theme-secondary);
background: transparent;
font-size: 14px;
font-weight: var(--tj-fw-medium);
line-height: 1;
letter-spacing: 2%;
border-radius: 0;
}
.blog__single__wrapper__2 .blog__single__content__tag:hover {
color: var(--tj-color-theme-primary);
}
.blog__single__wrapper__2 .blog__single__content__date {
color: var(--tj-color-theme-dark3);
font-size: 14px;
}
.blog__single__wrapper__2 .blog__single__content .tj-btn-2 {
font-weight: var(--tj-fw-sbold);
}
/**----------------------------------------
START: Faq CSS
----------------------------------------*/
.faq--3 {
position: relative;
z-index: 0;
}
.faq--3::after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(9px);
transition: all var(--tj-td-standard) ease-in-out 0.3s;
z-index: 2;
}
.faq--3:has(.faq-title:not(.collapsed))::after {
visibility: visible;
opacity: 1;
}
.faq--3 .faq__inner {
min-height: 825px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.faq--3 .section-heading__title {
font-size: 70px;
line-height: 1.114;
font-weight: var(--tj-fw-bold);
letter-spacing: -0.025em;
margin-bottom: 33px;
}
.faq--3 .tj-btn {
margin-top: 20px;
position: relative;
z-index: 2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.faq--3 .section-heading__title {
font-size: 60px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.faq--3 {
padding: 0;
}
.faq--3 .section-heading__title {
font-size: 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.faq--3 .faq__inner {
min-height: 980px;
}
.faq--3 .section-heading {
margin-top: 92px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.faq--3 .faq__inner {
min-height: 820px;
}
.faq--3 .section-heading {
margin-top: 97px;
}
.faq--3 .section-heading__title {
font-size: 36px;
}
}
@media (max-width: 575px) {
.faq--3 .faq__inner {
min-height: 1060px;
}
.faq--3 .section-heading {
margin-top: -142px;
}
}
.faq__banner {
width: 461px;
position: absolute;
bottom: -72px;
left: -57px;
z-index: 1;
}
.faq__banner img {
mask-image: url("../images/shape/faq-img-bg.svg");
mask-repeat: no-repeat;
mask-size: cover;
mask-position: center;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.faq__banner {
width: 400px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.faq__banner {
width: 300px;
bottom: -52px;
left: -37px;
}
}
@media (max-width: 575px) {
.faq__banner {
width: 300px;
bottom: -42px;
left: 50%;
transform: translateX(-50%);
}
}
.tj-faq--2 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.tj-faq--2 span {
color: var(--tj-color-theme-secondary);
}
.tj-faq--2 .accordion-item {
width: 100%;
max-width: 350px;
background-color: var(--tj-color-common-white);
border: 0;
border-radius: 8px;
position: absolute;
z-index: 2;
transition: all var(--tj-td-standard) ease-in-out 0.3s;
margin-bottom: 0;
will-change: transform;
}
.tj-faq--2 .accordion-item:hover {
z-index: 3;
}
.tj-faq--2 .accordion-item:first-child {
top: 120px;
left: 50%;
transform: translateX(-50%);
}
.tj-faq--2 .accordion-item:nth-child(2) {
top: 206px;
left: 100%;
transform: translateX(-100%);
}
.tj-faq--2 .accordion-item:nth-child(3) {
top: 266px;
left: 0;
}
.tj-faq--2 .accordion-item:nth-child(4) {
top: calc(100% - 120px);
left: 24.5%;
transform: translateY(-100%);
}
.tj-faq--2 .accordion-item:nth-child(5) {
top: calc(100% - 206px);
left: 100%;
transform: translate(-100%, -100%);
}
.tj-faq--2 .accordion-item .faq-title {
padding: 23px 50px 23px 20px;
display: flex;
gap: 4px;
line-height: 1.4;
}
.tj-faq--2 .accordion-item .faq-title::before {
top: 25px;
right: 20px;
transform: translateY(0);
}
.tj-faq--2 .accordion-item__body {
margin: 0 20px;
}
.tj-faq--2 .accordion-item:has(.faq-title:not(.collapsed)) {
background: var(--tj-color-common-white);
z-index: 3;
}
@media (min-width: 992px) {
.tj-faq--2 .accordion-item:has(.faq-title:not(.collapsed)) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.tj-faq--2 .accordion-item:has(.faq-title:not(.collapsed)) .faq-title {
color: var(--tj-color-heading-primary);
}
.tj-faq--2 .accordion-item:has(.faq-title:not(.collapsed)) .faq-title::before {
content: "\e932";
transform: translateY(0) rotate(45deg);
color: var(--tj-color-heading-primary);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
.tj-faq--2 .accordion-item:first-child {
top: 100px;
}
.tj-faq--2 .accordion-item:nth-child(2) {
top: 196px;
}
.tj-faq--2 .accordion-item:nth-child(3) {
top: 236px;
}
.tj-faq--2 .accordion-item:nth-child(4) {
top: calc(100% - 100px);
}
.tj-faq--2 .accordion-item:nth-child(5) {
top: calc(100% - 196px);
}
.tj-faq--2 .accordion-item .faq-title {
padding: 15px 36px 15px 24px;
}
.tj-faq--2 .accordion-item .faq-title::before {
top: 19px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-faq--2 .accordion-item:first-child {
top: 80px;
}
.tj-faq--2 .accordion-item:first-child:has(.faq-title:not(.collapsed)) {
top: 80px;
transform: translateX(-50%);
}
.tj-faq--2 .accordion-item:nth-child(2) {
top: 186px;
left: auto;
right: 0;
transform: translate(0);
}
.tj-faq--2 .accordion-item:nth-child(3) {
top: 290px;
transform: translateY(0);
}
.tj-faq--2 .accordion-item:nth-child(4) {
top: auto;
bottom: 80px;
transform: translate(0);
}
.tj-faq--2 .accordion-item:nth-child(5) {
top: auto;
left: auto;
right: 0;
bottom: 188px;
transform: translate(0);
}
.tj-faq--2 .accordion-item .faq-title {
padding: 15px 36px 15px 24px;
}
.tj-faq--2 .accordion-item .faq-title::before {
top: 19px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-faq--2 .accordion-item {
max-width: 300px;
}
.tj-faq--2 .accordion-item:first-child {
top: 60px;
}
.tj-faq--2 .accordion-item:first-child:has(.faq-title:not(.collapsed)) {
top: 60px;
transform: translateX(-50%);
}
.tj-faq--2 .accordion-item:nth-child(2) {
top: 156px;
}
.tj-faq--2 .accordion-item:nth-child(3) {
top: 250px;
}
.tj-faq--2 .accordion-item:nth-child(4) {
bottom: 60px;
left: 34.5%;
}
.tj-faq--2 .accordion-item:nth-child(5) {
bottom: 158px;
}
.tj-faq--2 .accordion-item .faq-title::before {
top: 16px;
font-size: 23px;
}
.tj-faq--2 .accordion-item__body {
margin: 0 16px;
}
}
@media (max-width: 575px) {
.tj-faq--2 .accordion-item:nth-child(4) {
bottom: 294px;
left: 0;
}
.tj-faq--2 .accordion-item:nth-child(5) {
bottom: 390px;
}
.tj-faq--2 .accordion-item .faq-title {
padding: 15px 36px 15px 18px;
}
.tj-faq--2 .accordion-item .faq-title::before {
right: 12px;
}
}
/* !END: Faq CSS */
/**----------------------------------------
START: Theme Marquee CSS
----------------------------------------*/
.tj__marquee {
position: relative;
overflow: hidden;
}
.tj__marquee__inner {
position: relative;
background: var(--tj-color-theme-secondary);
padding: 24px 0;
z-index: 3;
width: 100%;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tj__marquee__inner {
padding: 20px 0;
}
}
@media (max-width: 575px) {
.tj__marquee__inner {
padding: 16px 0;
}
}
.tj__marquee__inner .tj__marquee__item {
width: auto;
display: inline-block;
}
.tj__marquee__inner .tj__marquee__item .tj__marquee__box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.tj__marquee__inner .tj__marquee__item .tj__marquee__title {
font-size: 24px;
font-weight: var(--tj-fw-sbold);
text-transform: capitalize;
margin-bottom: 0;
white-space: nowrap;
color: var(--tj-color-common-white);
}
.tj__marquee__inner .tj__marquee__item .tj__marquee__icon {
line-height: 1;
width: 6px;
height: 6px;
border-radius: 100%;
background: var(--tj-color-common-white);
}
@media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) {
.tj__marquee__inner .tj__marquee__item .tj__marquee__box {
gap: 35px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj__marquee__inner .tj__marquee__item .tj__marquee-box {
gap: 30px;
}
.tj__marquee__inner .tj__marquee__item .tj__marquee__title {
font-size: 20px;
}
}
.tj__marquee__inner--2 {
background: linear-gradient(-90deg, var(--tj-color-theme-primary) 1.37%, var(--tj-color-theme-secondary) 63.36%);
padding: 19px 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tj__marquee__inner--2 {
padding: 18px 0;
}
}
@media (max-width: 575px) {
.tj__marquee__inner--2 {
padding: 16px 0;
}
}
.scroll-slider {
--gap: 40px;
position: relative;
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
align-items: center;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1199px) {
.scroll-slider {
--gap: 35px;
}
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
.scroll-slider {
--gap: 30px;
}
}
.scroll-wrapper {
flex-shrink: 0;
display: flex;
gap: var(--gap);
animation: scroll 50s linear infinite;
}
@keyframes pulseImg {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
[dir=rtl] .scroll-wrapper {
animation: scroll-rtl 50s linear infinite;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
@keyframes scroll-rtl {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(100% + var(--gap)));
}
}
/* !END: Theme Marquee CSS */
/*# sourceMappingURL=ranko-main.css.map */