/*-----------------------------------------------------------------------------------
Theme Name: Ranko - SEO & Digital Marketing HTML5 Template
Theme URI: https://themejunction.net/html/ranko/demo/
Author: Theme-Junction
Author URI: https://themeforest.net/user/theme-junction
Support: https://support.themejunction.net/
Description: Ranko - SEO & Digital Marketing HTML5 Template
Version: 1.0
-----------------------------------------------------------------------------------
/************ 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
----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
: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-white3: rgba(255, 255, 255, 0.9490196078);
--tj-color-common-white4: rgba(255, 255, 255, 0.8);
--tj-color-common-white5: rgba(255, 255, 255, 0.7019607843);
--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: #3d4a66;
--tj-color-theme-dark3: #596580;
--tj-color-theme-dark4: rgba(5, 23, 61, 0.6);
--tj-color-theme-dark5: rgba(57, 25, 82, 0.1019607843);
--tj-color-green-1: #21b754;
--tj-color-blue-1: #0f9af1;
--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);
--tj-color-border-11: rgba(29, 49, 82, 0.1215686275);
/**
@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 {
-webkit-animation: pulse2 1.5s infinite;
animation: pulse2 1.5s infinite;
}
.tj-anim-pulse-1 {
-webkit-animation: pulse1 1.5s infinite;
animation: pulse1 1.5s infinite;
}
.tj-anim-move-var {
-webkit-animation-name: moveVar;
animation-name: moveVar;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.tj-anim-move-var-lg {
-webkit-animation-name: moveVarLg;
animation-name: moveVarLg;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.tj-anim-move-hor {
-webkit-animation-name: moveHor;
animation-name: moveHor;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.tj-anim-move-hor-lg {
-webkit-animation-name: moveHorLg;
animation-name: moveHorLg;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.tj-anim-spinner {
-webkit-animation: spinner 3s 0s infinite alternate none running;
animation: spinner 3s 0s infinite alternate none running;
}
.tj-anim-spinner-2 {
-webkit-animation: spinner-2 3s linear infinite;
animation: spinner-2 3s linear infinite;
}
.start-img {
opacity: 0.5;
-webkit-animation: startImageFadeIn 3s alternate ease-in-out infinite;
animation: startImageFadeIn 3s alternate ease-in-out infinite;
}
.start-img:nth-child(2) {
-webkit-animation-duration: 3.5s;
animation-duration: 3.5s;
}
.start-img:nth-child(3) {
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
.start-img:nth-child(2) {
-webkit-animation-duration: 4.5s;
animation-duration: 4.5s;
}
.tj-zoom-in-out {
-webkit-animation: tjZoomInOut 2s alternate ease-in-out infinite;
animation: tjZoomInOut 2s alternate ease-in-out infinite;
}
@-webkit-keyframes pulse2 {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
}
70% {
-webkit-box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
@keyframes pulse2 {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
}
70% {
-webkit-box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
@-webkit-keyframes pulse1 {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(244, 68, 84, 0.6);
box-shadow: 0 0 0 0 rgba(244, 68, 84, 0.6);
}
70% {
-webkit-box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
@keyframes pulse1 {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(244, 68, 84, 0.6);
box-shadow: 0 0 0 0 rgba(244, 68, 84, 0.6);
}
70% {
-webkit-box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
@-webkit-keyframes moveHor {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(50px);
transform: translateX(50px);
}
}
@keyframes moveHor {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(50px);
transform: translateX(50px);
}
}
@-webkit-keyframes moveHor2 {
0% {
-webkit-transform: translate(56%, -50%);
transform: translate(56%, -50%);
}
100% {
-webkit-transform: translate(75%, -50%);
transform: translate(75%, -50%);
}
}
@keyframes moveHor2 {
0% {
-webkit-transform: translate(56%, -50%);
transform: translate(56%, -50%);
}
100% {
-webkit-transform: translate(75%, -50%);
transform: translate(75%, -50%);
}
}
@-webkit-keyframes moveHorLg {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes moveHorLg {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@-webkit-keyframes moveVar {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
}
@keyframes moveVar {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
}
@-webkit-keyframes moveVarLg {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
@keyframes moveVarLg {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spinner-2 {
to {
-webkit-transform: translate(50%, -50%) rotate(360deg);
transform: translate(50%, -50%) rotate(360deg);
}
}
@keyframes spinner-2 {
to {
-webkit-transform: translate(50%, -50%) rotate(360deg);
transform: translate(50%, -50%) rotate(360deg);
}
}
@-webkit-keyframes jump-arrow {
0%, 20%, 55%, 80%, 100% {
-webkit-transform: translate3d(-50%, 0, 0) rotate(-90deg);
transform: translate3d(-50%, 0, 0) rotate(-90deg);
}
40% {
-webkit-transform: translate3d(-50%, -8px, 0) rotate(-90deg);
transform: translate3d(-50%, -8px, 0) rotate(-90deg);
}
70% {
-webkit-transform: translate3d(-50%, -8px, 0) rotate(-90deg);
transform: translate3d(-50%, -8px, 0) rotate(-90deg);
}
90% {
-webkit-transform: translate3d(-50%, -5px, 0) rotate(-90deg);
transform: translate3d(-50%, -5px, 0) rotate(-90deg);
}
}
@keyframes jump-arrow {
0%, 20%, 55%, 80%, 100% {
-webkit-transform: translate3d(-50%, 0, 0) rotate(-90deg);
transform: translate3d(-50%, 0, 0) rotate(-90deg);
}
40% {
-webkit-transform: translate3d(-50%, -8px, 0) rotate(-90deg);
transform: translate3d(-50%, -8px, 0) rotate(-90deg);
}
70% {
-webkit-transform: translate3d(-50%, -8px, 0) rotate(-90deg);
transform: translate3d(-50%, -8px, 0) rotate(-90deg);
}
90% {
-webkit-transform: translate3d(-50%, -5px, 0) rotate(-90deg);
transform: translate3d(-50%, -5px, 0) rotate(-90deg);
}
}
@-webkit-keyframes shakeAnimation {
0% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
25% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
75% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
@keyframes shakeAnimation {
0% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
25% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
75% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
@-webkit-keyframes startImageFadeIn {
0% {
opacity: 0.5;
-webkit-transform: scale(0.68) rotate(0);
transform: scale(0.68) rotate(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1) rotate(360deg);
transform: scale(1) rotate(360deg);
}
}
@keyframes startImageFadeIn {
0% {
opacity: 0.5;
-webkit-transform: scale(0.68) rotate(0);
transform: scale(0.68) rotate(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1) rotate(360deg);
transform: scale(1) rotate(360deg);
}
}
@-webkit-keyframes tjZoomInOut {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes tjZoomInOut {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes textHover {
0% {
letter-spacing: -0.02em;
}
100% {
letter-spacing: 1px;
}
}
@keyframes textHover {
0% {
letter-spacing: -0.02em;
}
100% {
letter-spacing: 1px;
}
}
@-webkit-keyframes pulseAnimation {
0% {
opacity: 0;
-webkit-transform: scale(0) translateY(50px);
transform: scale(0) translateY(50px);
}
80% {
opacity: 1;
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
90% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
92% {
-webkit-transform: scale(1) rotate(-10deg);
transform: scale(1) rotate(-10deg);
}
94% {
-webkit-transform: scale(1) rotate(10deg);
transform: scale(1) rotate(10deg);
}
96% {
-webkit-transform: scale(1) rotate(-10deg);
transform: scale(1) rotate(-10deg);
}
98% {
-webkit-transform: scale(1) rotate(10deg);
transform: scale(1) rotate(10deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
@keyframes pulseAnimation {
0% {
opacity: 0;
-webkit-transform: scale(0) translateY(50px);
transform: scale(0) translateY(50px);
}
80% {
opacity: 1;
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
90% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
92% {
-webkit-transform: scale(1) rotate(-10deg);
transform: scale(1) rotate(-10deg);
}
94% {
-webkit-transform: scale(1) rotate(10deg);
transform: scale(1) rotate(10deg);
}
96% {
-webkit-transform: scale(1) rotate(-10deg);
transform: scale(1) rotate(-10deg);
}
98% {
-webkit-transform: scale(1) rotate(10deg);
transform: scale(1) rotate(10deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
@-webkit-keyframes linehover {
0% {
width: 100%;
}
50% {
width: 0;
right: 0;
}
100% {
width: 100%;
left: 0;
}
}
@keyframes linehover {
0% {
width: 100%;
}
50% {
width: 0;
right: 0;
}
100% {
width: 100%;
left: 0;
}
}
@-webkit-keyframes linehover2 {
0% {
width: 100%;
}
50% {
width: 0;
right: 26px;
}
100% {
width: calc(100% - 26px);
left: 0;
}
}
@keyframes linehover2 {
0% {
width: 100%;
}
50% {
width: 0;
right: 26px;
}
100% {
width: calc(100% - 26px);
left: 0;
}
}
@-webkit-keyframes texthover {
0% {
letter-spacing: -0.02em;
}
30% {
letter-spacing: -0.03em;
}
60% {
letter-spacing: -0.05em;
}
100% {
letter-spacing: -0.02em;
}
}
@keyframes texthover {
0% {
letter-spacing: -0.02em;
}
30% {
letter-spacing: -0.03em;
}
60% {
letter-spacing: -0.05em;
}
100% {
letter-spacing: -0.02em;
}
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: rotate(-10deg) scale(1.1);
transform: rotate(-10deg) scale(1.1);
}
20%, 40%, 60%, 80% {
-webkit-transform: rotate(10deg) scale(1.1);
transform: rotate(10deg) scale(1.1);
}
}
@keyframes shake {
0%, 100% {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: rotate(-10deg) scale(1.1);
transform: rotate(-10deg) scale(1.1);
}
20%, 40%, 60%, 80% {
-webkit-transform: rotate(10deg) scale(1.1);
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;
-webkit-transition: none;
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;
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
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: 992px) and (max-width: 1199px) {
h1 {
font-size: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
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: 992px) and (max-width: 1199px) {
h2 {
font-size: 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
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: 992px) and (max-width: 1199px) {
h3 {
font-size: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
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;
}
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
font-size: inherit;
color: inherit;
font-weight: inherit;
line-height: inherit;
display: inline-block;
}
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,
a,
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;
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;
-webkit-transition: -webkit-transform var(--tj-td-standard) ease-in-out 0s;
transition: -webkit-transform var(--tj-td-standard) ease-in-out 0s;
transition: transform var(--tj-td-standard) ease-in-out 0s;
transition: transform var(--tj-td-standard) ease-in-out 0s, -webkit-transform var(--tj-td-standard) ease-in-out 0s;
}
a:focus,
.button:focus {
text-decoration: none;
outline: none;
}
a,
button {
color: inherit;
outline: none;
border: none;
background: transparent;
}
a:focus, a:focus-visible,
button:focus,
button:focus-visible {
outline: 0;
-webkit-box-shadow: 0 0 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) var(--tj-color-grey-1);
}
::-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;
}
*:-ms-input-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: 1701px), only screen and (min-width: 1601px) and (max-width: 1700px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.gap-30-0 {
gap: 20px 0;
}
}
.gap-20-0 {
gap: 20px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.gap-20-0 {
gap: 20px 0;
}
}
.space-30 {
padding-bottom: 30px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.space-30 {
padding-bottom: 15px;
}
}
.section-gap {
padding-top: 120px;
padding-bottom: 120px;
}
.section-gap-top {
padding-top: 120px;
}
.section-gap-bottom {
padding-bottom: 120px;
}
.section-gap-x {
margin-left: 30px;
margin-right: 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-gap-x {
margin-left: 15px;
margin-right: 15px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.section-gap {
padding-top: 100px;
padding-bottom: 100px;
}
.section-gap-top {
padding-top: 100px;
}
.section-gap-bottom {
padding-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.section-gap {
padding-top: 80px;
padding-bottom: 80px;
}
.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-top: 60px;
padding-bottom: 60px;
}
.section-gap-top {
padding-top: 60px;
}
.section-gap-bottom {
padding-bottom: 60px;
}
}
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-inner--lg {
margin: 0;
}
}
.swiper {
padding-bottom: 70px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.swiper {
padding-bottom: 50px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.swiper {
padding-bottom: 40px;
}
}
.swiper:has(.tj__marquee__slider__wrapper) {
padding-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.swiper:has(.tj__marquee__slider__wrapper) {
padding-bottom: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.swiper:has(.tj__marquee__slider__wrapper) {
padding-bottom: 0;
}
}
.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;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.swiper-button-prev::after {
content: "\e908";
}
.swiper-button-next {
right: 10px;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
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;
line-height: 0;
}
.goverlay {
background: rgba(0, 0, 0, 0.1803921569);
backdrop-filter: blur(8px);
opacity: 1;
}
.glightbox-clean .gslide-media {
-webkit-box-shadow: none;
box-shadow: none;
}
.sticky-lg-top {
top: 30px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.sticky-lg-top {
top: 25px;
}
}
body:has(.sticky) .sticky-lg-top {
top: 115px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
body:has(.sticky) .sticky-lg-top {
top: 110px;
}
}
.wow {
opacity: 0;
}
.tj__marquee__slider__wrapper {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.line {
position: relative;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
--highlight-offset: 0%;
background-image: -webkit-gradient(linear, left top, right top, from(var(--tj-color-heading-primary)), to(rgba(5, 23, 61, 0.35)));
background-image: linear-gradient(90deg, var(--tj-color-heading-primary) var(--highlight-offset), rgba(5, 23, 61, 0.35) var(--highlight-offset));
}
.section-bg {
padding-left: 30px;
padding-right: 30px;
border-radius: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
z-index: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.section-bg {
padding-left: 15px;
padding-right: 15px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.section-bg {
padding-left: 5px;
padding-right: 5px;
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.section-bg {
padding-left: 5px;
padding-right: 5px;
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-bg {
padding-left: 5px;
padding-right: 5px;
border-radius: 16px;
}
}
.section-bg::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: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.section-bg::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.section-bg::after {
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-bg::after {
border-radius: 16px;
}
}
.section-bg__3, .section-bg__4 {
border-radius: 20px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.section-bg__4 {
border-radius: 16px;
}
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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;
}
.mt-60 {
margin-top: 60px;
}
.mb-60 {
margin-bottom: 60px;
}
.mt-120 {
margin-top: 120px;
}
.mb-120 {
margin-bottom: 120px;
}
.tj-sticky-panel,
.tj-sticky-panel-2,
.slidebar-stickiy,
.tj-progress-wrapper {
will-change: transform;
}
.section-divider {
margin: -12px 0;
opacity: 1;
border-color: var(--tj-color-border-1);
}
/* !END: Theme Default CSS */
/**----------------------------------------
START: Buttons CSS
----------------------------------------*/
.tj-btn {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
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);
white-space: nowrap;
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
.tj-btn {
padding: 15px 20px;
}
}
.tj-btn::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: var(--tj-color-theme-primary);
border-radius: var(--tj-br-md);
z-index: -1;
}
.tj-btn:hover {
color: var(--tj-color-theme-primary);
border-color: var(--tj-color-theme-primary);
}
.tj-btn:hover::after {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.tj-btn:hover i {
-webkit-transform: translateX(2px);
-ms-transform: translateX(2px);
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: var(--tj-color-common-white);
}
.tj-btn--underline:hover {
color: var(--tj-color-common-white);
border-color: var(--tj-color-common-white);
}
.tj-btn--underline:hover i {
color: var(--tj-color-common-white);
}
.tj-btn--underline:hover::before {
-webkit-animation: linehover 0.8s linear;
animation: linehover 0.8s linear;
}
.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:hover {
color: var(--tj-color-theme-primary);
border-color: var(--tj-color-theme-primary);
}
.tj-btn--underline-dark:hover i {
color: var(--tj-color-theme-primary);
}
.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: 21px;
font-weight: var(--tj-fw-sbold);
-webkit-transform: translateY(-1px);
-ms-transform: translateY(-1px);
transform: translateY(-1px);
}
.tj-btn--underline-2::before {
background-color: var(--tj-color-theme-dark);
right: 7px;
}
.tj-btn--underline-2:hover {
color: var(--tj-color-theme-dark);
}
.tj-btn--underline-2:hover i {
-webkit-transform: translateY(-1px);
-ms-transform: translateY(-1px);
transform: translateY(-1px);
color: var(--tj-color-theme-dark);
}
.tj-btn--md {
padding: 16px 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
.tj-btn--md {
padding: 16px 20px;
}
}
.tj-btn--sm {
padding: 14px 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), (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 {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: 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:hover {
color: var(--tj-color-common-white);
border-color: var(--tj-color-theme-dark);
}
.tj-btn--bordered:hover i {
color: var(--tj-color-common-white);
}
.tj-btn--bordered:hover:after {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.tj-btn--bordered.tj-btn--sm {
padding: 14px 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), (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 {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
font-size: 14px;
color: var(--tj-color-heading-primary);
margin-left: 2px;
display: inline-block;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.tj-btn-2 i {
font-size: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-btn-2 i {
font-size: 12px;
}
}
.tj-btn-2:hover {
color: var(--tj-color-theme-primary);
}
.tj-btn-2:hover i {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
color: var(--tj-color-theme-primary);
}
.tj-btn-2--underline {
text-decoration: underline;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
.tj-btn-2--underline i {
font-size: 12px;
}
}
.tj-btn--full {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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;
-webkit-box-pack: center;
-ms-flex-pack: center;
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--2 {
padding: 8px 8px 8px 30px;
gap: 15px;
border-radius: 70px;
}
.tj-btn--2::after {
left: auto;
right: 0;
border-radius: 60px;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.tj-btn--2 .tj-btn__icon {
width: 40px;
height: 40px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
line-height: 1;
background-color: var(--tj-color-common-white);
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
transition: all var(--tj-td-standard) ease-in-out 0s;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
border-radius: 50%;
will-change: transform;
}
.tj-btn--2 .tj-btn__icon i {
color: var(--tj-color-heading-primary);
font-size: 16px;
}
.tj-btn--2 .tj-btn__icon:first-child {
-webkit-transform: scale3d(0, 0, 1) rotate(-45deg);
transform: scale3d(0, 0, 1) rotate(-45deg);
-webkit-margin-end: -50px;
margin-inline-end: -50px;
opacity: 0;
}
.tj-btn--2 .tj-btn__icon:last-child {
-webkit-transform: scale3d(1, 1, 1) rotate(-45deg);
transform: scale3d(1, 1, 1) rotate(-45deg);
-webkit-margin-start: 0;
margin-inline-start: 0;
opacity: 1;
}
.tj-btn--2:hover {
padding: 8px 30px 8px 8px;
color: var(--tj-color-common-white);
}
.tj-btn--2:hover::after {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.tj-btn--2:hover .tj-btn__text {
color: var(--tj-color-common-white);
}
.tj-btn--2:hover .tj-btn__icon:first-child {
-webkit-transform: scale3d(1, 1, 1) rotate(-45deg);
transform: scale3d(1, 1, 1) rotate(-45deg);
-webkit-margin-end: 0;
margin-inline-end: 0;
opacity: 1;
}
.tj-btn--2:hover .tj-btn__icon:last-child {
-webkit-transform: scale3d(0, 0, 1) rotate(-45deg);
transform: scale3d(0, 0, 1) rotate(-45deg);
-webkit-margin-start: -50px;
margin-inline-start: -50px;
opacity: 0;
}
.tj-btn--2:hover .tj-btn__icon i {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.tj-btn--3 {
padding: 0;
gap: 0;
position: relative;
overflow: visible;
border: 0;
border-radius: 0;
background-color: transparent;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.tj-btn--3::after {
display: none;
}
.tj-btn--3 .tj-btn__text {
padding: 19px 30px;
gap: 15px;
border-radius: 70px;
background-color: var(--tj-color-theme-primary);
}
.tj-btn--3 .tj-btn__icon {
width: 54px;
height: 54px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
line-height: 1;
background-color: var(--tj-color-theme-primary);
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
transition: all var(--tj-td-standard) ease-in-out 0s;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
border-radius: 50%;
position: relative;
z-index: 1;
}
.tj-btn--3 .tj-btn__icon i {
color: var(--tj-color-common-white);
font-size: 16px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tj-btn--3 > :nth-child(1) {
-webkit-margin-end: -54px;
margin-inline-end: -54px;
-webkit-transform: scale3d(0.5, 0.5, 1);
transform: scale3d(0.5, 0.5, 1);
opacity: 0;
}
.tj-btn--3 > :nth-child(3) {
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
opacity: 1;
}
.tj-btn--3:hover {
color: var(--tj-color-common-white);
}
.tj-btn--3:hover > :nth-child(1) {
-webkit-margin-end: 0;
margin-inline-end: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
opacity: 1;
}
.tj-btn--3:hover > :nth-child(3) {
-webkit-margin-start: -54px;
margin-inline-start: -54px;
-webkit-transform: scale3d(0.5, 0.5, 1);
transform: scale3d(0.5, 0.5, 1);
opacity: 0;
}
.tj-btn--4 {
padding: 8px 30px 8px 8px;
gap: 10px;
}
.tj-btn--4 .tj-btn__icon:first-child {
-webkit-transform: scale3d(1, 1, 1) rotate(-45deg);
transform: scale3d(1, 1, 1) rotate(-45deg);
-webkit-margin-end: 0;
margin-inline-end: 0;
opacity: 1;
}
.tj-btn--4 .tj-btn__icon:last-child {
-webkit-transform: scale3d(0, 0, 1) rotate(-45deg);
transform: scale3d(0, 0, 1) rotate(-45deg);
-webkit-margin-start: -50px;
margin-inline-start: -50px;
opacity: 0;
}
.tj-btn--4::after {
left: 0;
}
.tj-btn--4:hover {
padding: 8px 8px 8px 30px;
}
.tj-btn--4:hover .tj-btn__icon:first-child {
-webkit-transform: scale3d(0, 0, 1) rotate(-45deg);
transform: scale3d(0, 0, 1) rotate(-45deg);
-webkit-margin-end: -50px;
margin-inline-end: -50px;
opacity: 0;
}
.tj-btn--4:hover .tj-btn__icon:last-child {
-webkit-transform: scale3d(1, 1, 1) rotate(-45deg);
transform: scale3d(1, 1, 1) rotate(-45deg);
-webkit-margin-start: 0;
margin-inline-start: 0;
opacity: 1;
}
.tj-btn--4:hover::after {
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50px;
}
/* !END: Buttons CSS */
/**----------------------------------------
START: Input CSS
----------------------------------------*/
input::-ms-clear {
display: none;
}
input::-webkit-search-cancel-button {
display: none;
}
.tj-input {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 16px 18px;
color: var(--tj-color-body-text);
background-color: var(--tj-color-common-white);
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-transition: all 0.3s;
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);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-input {
padding: 16px 16px 12px;
}
}
.tj-input::-webkit-input-placeholder {
opacity: 0.8;
}
.tj-input::-moz-placeholder {
opacity: 0.8;
}
.tj-input:-ms-input-placeholder {
opacity: 0.8;
}
.tj-input::-ms-input-placeholder {
opacity: 0.8;
}
.tj-input::placeholder {
opacity: 0.8;
}
.tj-input:focus {
outline: none;
border: 0;
}
.tj-input:focus::-webkit-input-placeholder {
opacity: 0.8;
}
.tj-input:focus::-moz-placeholder {
opacity: 0.8;
}
.tj-input:focus:-ms-input-placeholder {
opacity: 0.8;
}
.tj-input:focus::-ms-input-placeholder {
opacity: 0.8;
}
.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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 100%;
width: 460px;
padding-right: 4px;
gap: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) 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: 991px), 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::-webkit-input-placeholder {
color: var(--tj-color-body-text);
}
.tj-input::-moz-placeholder {
color: var(--tj-color-body-text);
}
.tj-input:-ms-input-placeholder {
color: var(--tj-color-body-text);
}
.tj-input::-ms-input-placeholder {
color: var(--tj-color-body-text);
}
.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;
}
/* !END: Input CSS */
/**----------------------------------------
START: Socials CSS
----------------------------------------*/
.tj-socials ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 7px;
-ms-flex-line-pack: center;
align-content: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-socials ul {
gap: 5px;
}
}
.tj-socials ul li a {
opacity: 0.4;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
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: 991px), 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;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
}
.tj-socials ul li a:hover i {
color: var(--tj-color-theme-secondary);
}
.tj-socials--sm ul {
gap: 6px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-socials--sm ul {
gap: 4px;
}
}
.tj-socials--sm ul li a i {
font-size: 28px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-socials--sm ul li a i {
font-size: 22px;
}
}
/* !END: Socials CSS */
/**----------------------------------------
START: Progress Bar CSS
----------------------------------------*/
.tj-progress {
width: 100%;
padding: 0;
margin: 0;
height: 8px;
background: var(--tj-color-theme-bg1);
position: relative;
border-radius: 30px;
z-index: 0;
}
.tj-progress__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
margin-top: 24px;
list-style: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-progress {
height: 6px;
}
}
.tj-progress__title {
font-size: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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%;
-webkit-transform: translate(3px, -50%);
-ms-transform: translate(3px, -50%);
transform: translate(3px, -50%);
background: var(--tj-color-common-white);
z-index: 2;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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%;
-webkit-transform: translate(11px, -13px);
-ms-transform: translate(11px, -13px);
transform: translate(11px, -13px);
color: var(--tj-color-common-white) !important;
background: var(--tj-color-theme-primary);
z-index: 2;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-progress__perchant {
font-size: 10px;
padding: 4px 3px 4px 5px;
-webkit-transform: translate(9px, -11px);
-ms-transform: translate(9px, -11px);
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%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
position: relative;
cursor: pointer;
background-color: var(--tj-color-theme-primary);
float: none;
height: 36px;
width: 75px;
margin: 0;
-webkit-box-shadow: none;
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%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-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%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-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;
-webkit-transition: all 0.3s;
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 {
-webkit-box-shadow: none;
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: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-heading {
margin-bottom: 30px;
overflow: hidden;
}
}
.section-heading__sub-title {
font-family: var(--tj-ff-body);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 5px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: 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;
-ms-flex-negative: 0;
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--3 {
background-color: transparent;
padding: 0;
}
.section-heading__title {
margin-bottom: 24px;
font-size: 48px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.section-heading__title {
font-size: 40px;
margin-bottom: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.section-heading__title {
font-size: 40px;
margin-bottom: 14px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-heading__title {
font-size: 36px;
margin-bottom: 12px;
max-width: 450px;
}
}
@media (max-width: 575px) {
.section-heading__title {
font-size: 30px;
max-width: 100%;
}
}
.section-heading__title--no-space {
margin-bottom: 0;
}
.section-heading__title .hilight {
opacity: 35%;
display: inline;
}
.section-heading__desc {
margin-bottom: 24px;
overflow: hidden;
}
.section-heading__desc--small {
max-width: 360px;
}
.section-heading__desc--md {
max-width: 500px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-heading__desc--md {
max-width: 400px;
}
}
.section-heading__desc--lg {
max-width: 550px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.section-heading__desc {
margin-bottom: 24px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.section-heading__desc {
margin-bottom: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-heading__desc {
margin-bottom: 14px;
}
}
.section-heading--centered {
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.section-heading--centered .section-heading__title {
max-width: 575px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.section-heading--spacing {
margin-bottom: 45px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-heading--spacing {
margin-bottom: 40px;
}
}
.section-heading--2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 20px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.section-heading--2 .section-heading__left {
max-width: 552px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-heading--2 .section-heading__left {
max-width: 100%;
}
}
.section-heading--2 .section-heading__right {
max-width: 360px;
margin-bottom: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-heading--2 .section-heading__right {
margin-bottom: 0;
max-width: 100%;
}
}
/* !END: Section Headign CSS */
/**----------------------------------------
START: Hamburger CSS
----------------------------------------*/
.hamburger-area {
position: fixed;
right: -490px;
top: 0;
width: 450px;
height: 100%;
background-color: var(--tj-color-common-white);
-webkit-box-shadow: var(--tj-shadow-theme-primary);
box-shadow: var(--tj-shadow-theme-primary);
-webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-webkit-transition-duration: 1s;
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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
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 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.hamburger_search {
position: relative;
margin-bottom: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hamburger_search {
display: none;
}
.hamburger_search_wrapper {
display: none;
}
}
.hamburger_search select,
.hamburger_search .nice-select,
.hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox]),
.hamburger_search input {
width: 100%;
line-height: 40px;
padding: 10px 18px;
background: transparent;
border: none;
outline: none;
font-size: 18px;
border: 1px solid var(--tj-color-border-1);
border-radius: 8px;
color: var(--tj-color-theme-dark);
background-color: var(--tj-color-theme-bg1);
}
.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::-webkit-input-placeholder, .hamburger_search .nice-select::-webkit-input-placeholder, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::-webkit-input-placeholder, .hamburger_search input::-webkit-input-placeholder {
opacity: 0.8;
font-size: 18px;
}
.hamburger_search select::-moz-placeholder, .hamburger_search .nice-select::-moz-placeholder, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::-moz-placeholder, .hamburger_search input::-moz-placeholder {
opacity: 0.8;
font-size: 18px;
}
.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::-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-end: 18px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 18px;
color: var(--tj-color-theme-dark);
}
.hamburger_menu .mean-container .mean-bar {
background: transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 30px;
}
.hamburger_menu .mean-container .mean-bar * {
-webkit-box-sizing: border-box;
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;
-webkit-transition: all 0.4s ease-in-out 0s;
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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
width: 30px;
height: 30px;
text-align: center;
position: absolute;
right: 0;
top: 10px;
-webkit-transition: all 0.4s ease-in-out 0s;
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 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
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: 991px), 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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
-webkit-box-align: center;
-ms-flex-align: center;
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 {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
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);
}
@media (min-width: 992px) {
.hamburger-area--2 .hamburger_wrapper {
padding: 45px 45px 45px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.hamburger-area--2 .hamburger_top {
margin-bottom: 22px;
-webkit-margin-start: -6px;
margin-inline-start: -6px;
}
.hamburger-area--2 .hamburger_desc {
margin-bottom: 30px;
}
.hamburger-area--2 .hamburger_search {
margin-bottom: 35px;
}
.hamburger-area--2 .hamburger-infos {
margin-bottom: 30px;
}
.hamburger-area--2 .contact-title {
font-size: 16px;
margin-bottom: 0;
}
.hamburger-area--2 .tj-socials {
margin-top: auto;
}
}
.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: 992px) 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: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
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%;
-webkit-mask-image: url(../images/shapes/vector-1.svg);
mask-image: url(../images/shapes/vector-1.svg);
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
background: -webkit-gradient(linear, left top, left bottom, from(var(--tj-color-theme-primary)), to(var(--tj-color-theme-secondary)));
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;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
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: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px;
}
.hamburger-socials ul li a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
cursor: pointer;
-webkit-transition: -webkit-transform 300ms ease;
transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
transition: transform 300ms ease, -webkit-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;
transition: all 0.3s ease-in-out 0s;
margin-left: auto;
}
.menu-bar button span:nth-child(2) {
width: 40px;
-webkit-transition-delay: 200ms;
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%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 3px;
height: 0;
-webkit-transition: height 400ms;
transition: height 400ms;
}
.menu-bar.style-2 button span {
background: var(--tj-color-heading-primary);
}
.menu-bar.menu-bar-toggeled button {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition-delay: 400ms;
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;
-webkit-transition: height 200ms ease;
transition: height 200ms ease;
-webkit-transition-delay: 200ms;
transition-delay: 200ms;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
backdrop-filter: blur(10px);
}
.body-overlay.opened {
opacity: 1;
visibility: visible;
}
.hamburger_menu .mean-nav ul > li .header__mega-menu > ul li a {
gap: 15px;
padding: 15px;
border-radius: 10px;
background: transparent;
border: 1px solid var(--tj-color-border-1);
}
.hamburger_menu .mean-nav ul > li .header__mega-menu > ul li a span {
border-radius: 8px;
}
/* !END: Hamburger CSS */
/**----------------------------------------
START: Mainmenu CSS
----------------------------------------*/
.mainmenu {
margin-left: 40px;
}
.mainmenu ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mainmenu ul > li {
position: relative;
z-index: 1;
}
.mainmenu ul > li > a {
padding: 30px 20px;
font-size: var(--tj-fs-btn);
color: var(--tj-color-theme-dark);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
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.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);
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
-webkit-box-shadow: 0px 33px 30.78px -1.92px rgba(57, 25, 82, 0.059607843);
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;
-webkit-transition: 0.4s;
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;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
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: "\e92d";
top: 35%;
right: 15px;
color: var(--tj-color-text-body);
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.mainmenu ul > li > .sub-menu > li.current-menu-item > a, .mainmenu ul > li > .sub-menu > li:hover > a {
color: var(--tj-color-theme-primary);
-webkit-transform: translateX(2px);
-ms-transform: translateX(2px);
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;
}
.mainmenu ul > li:has(.header__mega-menu) {
position: static;
}
.mainmenu ul > li:has(.header__mega-menu):hover .header__mega-menu {
-webkit-transform: translateX(-50%) scaleY(1);
-ms-transform: translateX(-50%) scaleY(1);
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: 992px) and (max-width: 1199px) {
.mainmenu ul > li:has(.header__mega-menu):hover .header__mega-menu {
-webkit-transform: translateX(0) scaleY(1);
-ms-transform: translateX(0) scaleY(1);
transform: translateX(0) scaleY(1);
}
}
.mainmenu ul > li .header__mega-menu {
width: 100%;
left: 50%;
-webkit-transform: translateX(-50%) scaleY(0);
-ms-transform: translateX(-50%) scaleY(0);
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: 992px) and (max-width: 1199px) {
.mainmenu ul > li .header__mega-menu {
width: auto;
padding: 20px;
left: 20px;
right: 20px;
-webkit-transform: translateX(0) scaleY(0);
-ms-transform: translateX(0) scaleY(0);
transform: translateX(0) scaleY(0);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.mainmenu ul > li .header__mega-menu {
padding: 20px;
}
}
.mainmenu ul > li .header__mega-menu > ul li a {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: var(--tj-color-theme-bg1);
padding: 15px;
border-radius: 16px;
padding-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.mainmenu ul > li .header__mega-menu > ul li a {
gap: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.mainmenu ul > li .header__mega-menu > ul li a {
border-radius: 12px;
}
}
.mainmenu ul > li .header__mega-menu > ul li a span {
border-radius: 12px;
overflow: hidden;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.mainmenu ul > li .header__mega-menu > ul li a span {
border-radius: 8px;
}
}
.mainmenu ul > li .header__mega-menu > ul li a:hover img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.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 {
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
color: var(--tj-color-theme-primary);
opacity: 1;
}
.mainmenu ul > li:hover > .sub-menu {
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;
}
.mainmenu ul > li .header__mega-menu {
max-width: 1520px;
-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);
border-radius: 14px;
border: 0;
}
@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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.mainmenu ul > li .header__mega-menu {
left: 0;
right: 0;
}
.mainmenu ul > li .header__mega-menu .rg-30 {
row-gap: 20px;
}
.mainmenu ul > li .header__mega-menu .row {
--bs-gutter-x: 20px;
}
}
.mainmenu ul > li .header__mega-menu > ul li a {
gap: 15px;
padding: 15px;
border-radius: 10px;
background: transparent;
border: 1px solid var(--tj-color-border-1);
}
.mainmenu ul > li .header__mega-menu > ul li a span {
border-radius: 8px;
}
/* !END: Mainmenu CSS */
/**----------------------------------------
START: Header CSS
----------------------------------------*/
.header {
-webkit-box-shadow: var(--tj-shadow-theme-primary);
box-shadow: var(--tj-shadow-theme-primary);
max-width: 95%;
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: 9998;
}
.header--absolute {
position: absolute;
left: 2.5%;
right: 2.5%;
}
.header-duplicate {
position: fixed;
top: -100px; /* Initially hidden */
left: 2.5%;
right: 2.5%;
-webkit-transition: top 0.3s ease-in-out;
transition: top 0.3s ease-in-out;
}
.header-duplicate.sticky {
top: 0; /* Sticks to the top */
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
.header {
padding: 10px 0;
max-width: 100%;
margin: 0 5px;
}
}
.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: 991px) {
.header__logo img {
width: 120px;
}
}
@media (max-width: 575px) {
.header__logo img {
width: 110px;
}
}
.header__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 20px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header__wrapper > div:last-child {
margin-left: auto;
}
.header__right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 12px;
}
.header__mobile-toggler {
width: 46px;
height: 46px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
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: 991px) {
.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);
-ms-flex-negative: 0;
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: 991px) {
.header__mobile-toggler span {
height: 2px;
}
}
.header__mobile-toggler span:nth-child(2) {
width: 80%;
}
.header__mobile-toggler span:last-child {
width: 60%;
}
.header__mobile-toggler:hover span:nth-child(2) {
width: 100%;
}
.header__mobile-toggler:hover span:last-child {
width: 100%;
}
.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])::-webkit-input-placeholder, .header__search .hamburger_search input::-webkit-input-placeholder {
opacity: 0.8;
font-size: 18px;
}
.header__search input:not([type=submit]):not([type=radio]):not([type=checkbox])::-moz-placeholder, .header__search .hamburger_search input::-moz-placeholder {
opacity: 0.8;
font-size: 18px;
}
.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])::-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: 991px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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; /* Initially hidden */
}
.header--3.header-duplicate.sticky {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
top: 0; /* Sticks to the top */
}
.header--3 .header__wrapper {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
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: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
.header--3 .header__right .tj-btn--sm:not(.tj-btn--bordered) {
padding-left: 25px;
padding-right: 25px;
}
}
.header--4 .header__wrapper {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
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 .header__mobile-toggler {
border-radius: 100%;
}
.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: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
.header--4.header .header__right .tj-btn {
padding: 11px 25px;
}
}
.header--4.header--absolute {
margin-top: 26px;
border-radius: 0;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header--4.header--absolute {
margin-top: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.header--4.header--absolute {
margin-top: 5px;
}
}
@media (max-width: 575px) {
.header--4.header--absolute {
margin-top: 0;
}
}
.header--4.header--absolute .mainmenu {
-webkit-box-shadow: var(--tj-shadow-theme-primary);
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__right .header__mobile-toggler {
border-radius: 100%;
border: 0;
background-color: var(--tj-color-common-white);
}
.header--4.header-duplicate {
top: -120px; /* Initially hidden */
}
@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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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; /* Sticks to the top */
}
.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;
}
}
.header--5 {
border-radius: 12px;
}
.header--5.header-duplicate {
top: -120px; /* Initially hidden */
}
.header--5.header-duplicate.sticky {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
top: 0; /* Sticks to the top */
}
.header--5 .header__wrapper {
padding-left: 20px;
padding-right: 20px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
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: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
.header--5.header .header__right .tj-btn {
padding: 11px 25px;
}
}
/* !END: Header CSS */
/**----------------------------------------
START: Footer CSS
----------------------------------------*/
.footer__inner {
position: relative;
background: url("../img/process/process-bg.png") no-repeat 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: 992px) and (max-width: 1199px) {
.footer__inner {
padding: 0 30px;
padding-top: 80px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px) {
.footer__inner::after {
border-radius: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__title {
margin-bottom: 20px;
margin-top: 0px;
}
}
.footer__widget {
margin-bottom: 40px;
}
.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);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.footer__widget.widget_nav_menu ul li a:hover {
color: var(--tj-color-theme-primary);
-webkit-transform: translateX(2px);
-ms-transform: translateX(2px);
transform: translateX(2px);
}
.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: 991px), 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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
-webkit-box-align: center;
-ms-flex-align: center;
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: 992px) and (max-width: 1199px) {
.footer__widget--company {
padding-left: 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: url("../img/funfact/funfact-item-bg.png") no-repeat center;
background-size: cover;
border-radius: 16px;
position: relative;
z-index: 0;
text-align: center;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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;
}
.footer__widget__subscription .tj-input__wrapper {
margin-bottom: 15px;
}
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 6px;
font-size: 14px;
color: var(--tj-color-common-white2);
line-height: 1;
}
.footer__widget__subscription__security i {
font-size: 20px;
color: var(--tj-color-theme-primary);
}
.footer__widget__subscription__security span {
margin-top: 1px;
}
.footer__contact {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 30px;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__contact {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 12.5px 30px;
border: 2px solid var(--tj-color-border-9);
background: transparent;
border-radius: 10px;
gap: 10px;
-webkit-box-align: center;
-ms-flex-align: center;
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 {
-webkit-box-pack: center;
-ms-flex-pack: center;
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: -webkit-inline-box;
display: -ms-inline-flexbox;
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%;
-webkit-box-pack: center;
-ms-flex-pack: center;
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 {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 2px;
height: 50px;
background: var(--tj-color-border-9);
}
.footer__copyright__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-column-gap: 12px;
-moz-column-gap: 12px;
column-gap: 12px;
row-gap: 12px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
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: 991px) {
.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;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
row-gap: 15px;
padding-bottom: 8px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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 p {
color: var(--tj-color-text-body);
}
.footer__copyright__text p:last-child {
margin-bottom: 0;
}
.footer__copyright__text p a {
color: var(--tj-color-theme-dark);
}
.footer__copyright__text p a:hover {
color: var(--tj-color-theme-primary);
}
.footer__copyright__menu ul {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
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__inner {
padding: 69px 60px 60px;
background: url("../img/brands/brands-bg.png") no-repeat center;
background-size: cover;
outline: 7px solid var(--tj-color-common-white);
border-radius: 16px;
margin-bottom: -138px;
position: relative;
z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer__top__inner {
padding: 45px 35px 35px;
border-radius: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__top__inner {
padding: 35px 30px 30px;
border-radius: 12px;
margin: 0 30px -138px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__top__inner {
padding: 30px 20px;
border-radius: 12px;
margin: 15px;
margin-bottom: -138px;
}
}
.footer__top__inner::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--tj-color-theme-secondary);
border-radius: 16px;
opacity: 0.95;
z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer__top__inner::after {
border-radius: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer__top__inner::after {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__top__inner::after {
border-radius: 12px;
}
}
.footer__top__pattern {
position: absolute;
bottom: 12px;
right: 50%;
}
.footer__top__title {
font-size: 48px;
color: var(--tj-color-common-white);
line-height: 1.208;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__top__title {
font-size: 40px;
margin-bottom: 0;
}
}
@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;
-webkit-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
@media (max-width: 575px) {
.footer__top__title__batch img {
width: 30px;
}
}
.footer__top .tj-input__wrapper {
width: 100%;
}
@media (max-width: 575px) {
.footer__top .tj-input__wrapper .tj-input {
width: 50%;
}
}
.footer__top .tj-input__wrapper .tj-btn {
padding: 14px 15px;
height: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__top .tj-input__wrapper .tj-btn {
height: auto;
}
}
@media (max-width: 575px) {
.footer__top .tj-input__wrapper .tj-btn .subscription-text {
display: none;
}
}
.footer__top .tj-input__wrapper .tj-btn i {
font-size: 18px;
}
.footer__top__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 2px 30px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 575px) {
.footer__top__list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.footer__top__list li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 8px;
-webkit-box-align: center;
-ms-flex-align: center;
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: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 991px) {
.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: 992px) 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: 991px), 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: 992px) and (max-width: 1199px) {
.footer--3 .footer__top__title {
font-size: 58px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--3 .footer__copyright__wrapper {
-webkit-box-pack: center;
-ms-flex-pack: center;
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: 992px) and (max-width: 1199px) {
.footer--3 .footer__copyright__menu ul {
gap: 10px 28px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) 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: 991px), 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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.footer--3 .hero__subscription {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
.footer .subscribe-form {
position: relative;
}
.footer .subscribe-form input[type=email] {
height: 55px;
padding: 11px 60px 11px 25px;
border: 0;
width: 100%;
border-radius: 8px;
outline: 1px solid transparent;
background-color: var(--tj-color-theme-bg1);
outline-color: var(--tj-color-border-1);
}
.footer .subscribe-form input[type=email]:focus {
outline-color: var(--tj-color-theme-primary);
}
.footer .subscribe-form input[type=checkbox] {
position: relative;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
width: 18px;
height: 18px;
border: 1px solid var(--tj-color-border-1);
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
.footer .subscribe-form 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;
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.footer .subscribe-form input[type=checkbox]:checked {
background-color: var(--tj-color-theme-dark);
border-color: var(--tj-color-theme-dark);
}
.footer .subscribe-form input[type=checkbox]:checked::before {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.footer .subscribe-form button {
position: absolute;
width: 51px;
height: 55px;
inset-inline-end: 0;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 23px;
line-height: 1;
color: var(--tj-color-theme-primary);
}
.footer .subscribe-form button i {
line-height: 1;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.footer .subscribe-form button:hover i, .footer .subscribe-form button:focus i {
-webkit-animation: shake 0.6s ease-in-out;
animation: shake 0.6s ease-in-out;
}
.footer .subscribe-form button::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
height: 24px;
-webkit-border-start: 1px solid var(--tj-color-border-1);
border-inline-start: 1px solid var(--tj-color-border-1);
}
.footer .subscribe-form label {
color: var(--tj-color-theme-dark);
margin-top: 16px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.footer .subscribe-form label a {
color: var(--tj-color-theme-dark);
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
.footer .subscribe-form label a:hover {
color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer .subscribe-form {
margin-top: 18px;
}
}
.footer--4 {
padding: 80px;
border-radius: 24px;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.footer--4 {
padding: 50px 25px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.footer--4 {
padding: 15px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--4 {
margin-left: 15px;
margin-right: 15px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--4 {
padding: 15px;
}
}
.footer--4 .footer__inner {
background: var(--tj-color-common-white);
margin: 0;
padding-top: 85px;
-webkit-padding-start: 30px;
padding-inline-start: 30px;
-webkit-padding-end: 30px;
padding-inline-end: 30px;
overflow: visible;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
.footer--4 .footer__inner {
-webkit-padding-start: 5px;
padding-inline-start: 5px;
-webkit-padding-end: 5px;
padding-inline-end: 5px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--4 .footer__inner {
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-end: 0;
padding-inline-end: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--4 .footer__inner {
padding-top: 80px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer--4 .footer__inner {
padding-top: 60px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--4 .footer__inner {
padding-top: 50px;
}
}
.footer--4 .footer__inner::after {
display: none;
}
.footer--4 .footer__copyright__wrapper {
padding-top: 27px;
padding-bottom: 27px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--4 .footer__copyright__wrapper {
padding-bottom: 11px;
}
}
.footer--5 {
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 0;
overflow: hidden;
}
.footer--5 .footer__inner {
background: transparent;
margin: 0;
padding-bottom: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer--5 .footer__inner {
padding-top: 80px;
padding-bottom: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--5 .footer__inner {
padding-top: 60px;
padding-bottom: 10px;
}
}
.footer--5 .footer__inner::after {
display: none;
}
.footer--5 .footer__copyright {
border: 1px solid var(--tj-color-border-5);
border-left: 0;
border-right: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--5 .footer__copyright {
padding: 0;
margin-top: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--5 .footer__copyright {
padding-bottom: 16px;
}
}
.footer--5 .footer__copyright__wrapper {
padding-top: 27px;
padding-bottom: 27px;
margin-top: 0;
border-top: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--5 .footer__copyright__wrapper {
padding-bottom: 11px;
}
}
.footer--5 .footer__copyright__text p {
color: var(--tj-color-common-white2);
}
.footer--5 .footer__copyright__text p a {
color: var(--tj-color-common-white);
}
.footer--5 .footer__copyright__text p a:hover {
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
}
.footer--5 .footer__copyright__menu ul li > a {
color: var(--tj-color-common-white);
}
.footer--5 .footer__copyright__menu ul li > a::before {
background-color: var(--tj-color-common-white);
}
.footer--5 .footer__copyright__menu ul li > a:hover {
color: var(--tj-color-theme-primary);
}
.footer--5 .footer__copyright .tj-socials ul li a i {
color: var(--tj-color-common-white);
position: relative;
z-index: 0;
}
.footer--5 .footer__copyright .tj-socials 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;
}
.footer--5 .footer__copyright .tj-socials ul li a:hover i {
color: var(--tj-color-theme-secondary);
}
.footer--5 .footer__copyright .tj-socials ul li a:hover i::after {
background-color: var(--tj-color-common-white);
}
.footer--5 .footer__bottom {
margin: 44px -1.5% -10.6% -3%;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--5 .footer__bottom {
margin: 44px -1.5% -7.6% -3%;
}
}
.footer--5 .footer__shape {
position: absolute;
width: 616px;
height: 616px;
background: -webkit-gradient(linear, left top, left bottom, from(var(--tj-color-theme-primary)), to(var(--tj-color-theme-secondary)));
background: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, var(--tj-color-theme-secondary) 100%);
-webkit-filter: blur(120px);
filter: blur(120px);
border-radius: 50%;
z-index: -1;
}
.footer--5 .footer__shape--1 {
top: -8%;
left: -27%;
}
.footer--5 .footer__shape--2 {
width: 766px;
height: 766px;
bottom: -22%;
right: 10%;
}
.footer__widget__wrapper {
gap: 0 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer__widget__wrapper {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.footer__widget__wrapper .footer__widget.footer__widget__logo {
max-width: 308px;
width: 100%;
}
.footer__widget__wrapper .footer__widget.footer__widget--company {
padding-left: 0;
}
.footer__widget__wrapper .footer__widget.footer__widget__subscribe {
max-width: 332px;
width: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.footer__widget__wrapper .footer__widget.footer__widget__logo {
max-width: 250px;
}
.footer__widget__wrapper .footer__widget.footer__widget__subscribe {
max-width: 280px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer__widget__wrapper .footer__widget.footer__widget__logo {
max-width: 200px;
}
.footer__widget__wrapper .footer__widget.footer__widget__subscribe {
max-width: 256px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer__widget__wrapper .footer__widget {
width: 100%;
max-width: calc(50% - 15px);
}
.footer__widget__wrapper .footer__widget.footer__widget__logo {
max-width: calc(50% - 15px);
}
.footer__widget__wrapper .footer__widget.footer__widget__subscribe {
max-width: calc(50% - 15px);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__widget__wrapper .footer__widget {
width: 100%;
max-width: 100%;
}
.footer__widget__wrapper .footer__widget.footer__widget__logo {
max-width: 100%;
}
.footer__widget__wrapper .footer__widget.footer__widget__subscribe {
max-width: 100%;
}
}
.footer__widget__wrapper .footer__title {
margin-top: -7px;
}
@media (max-width: 575px) {
.footer__widget__wrapper .footer__title {
margin-bottom: 15px;
}
}
.footer__widget__wrapper .footer__logo {
margin-bottom: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__widget__wrapper .footer__logo {
margin-bottom: 16px;
}
}
.footer__widget__wrapper .footer__desc {
margin-bottom: 40px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__widget__wrapper .footer__desc {
margin-bottom: 20px;
}
}
.footer__widget__wrapper--2 {
-webkit-box-pack: unset;
-ms-flex-pack: unset;
justify-content: unset;
gap: 0 40px;
}
.footer__widget__wrapper--2 .footer__title {
margin-top: 0;
margin-bottom: 47px;
font-size: 14px;
font-family: var(--tj-ff-body);
font-weight: var(--tj-fw-medium);
letter-spacing: 0.02em;
line-height: 1;
text-transform: uppercase;
color: var(--tj-color-common-white);
opacity: 0.5;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__widget__wrapper--2 .footer__title {
margin-bottom: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__widget__wrapper--2 .footer__widget {
margin-bottom: 30px;
}
}
.footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li {
margin-bottom: 10px;
}
.footer__widget__wrapper--2 .footer__widget.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li a i {
font-size: 18px;
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
transition: all var(--tj-td-standard) ease-in-out 0s;
-webkit-transform: rotate(-45deg) translateX(-10px);
-ms-transform: rotate(-45deg) translateX(-10px);
transform: rotate(-45deg) translateX(-10px);
margin-left: 3px;
margin-top: 3px;
opacity: 0;
}
.footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li a:hover {
color: var(--tj-color-theme-primary);
}
.footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li a:hover i {
-webkit-transform: rotate(-45deg) translateX(0);
-ms-transform: rotate(-45deg) translateX(0);
transform: rotate(-45deg) translateX(0);
opacity: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li a {
font-size: 18px;
}
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe {
max-width: 620px;
padding: 0 40px;
margin-left: auto;
position: relative;
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe::after, .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe::before {
content: "";
display: block;
width: 1px;
height: 655%;
background-color: var(--tj-color-border-5);
position: absolute;
top: -119%;
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe::before {
left: 0;
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe::after {
right: 0;
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .hero__subscription {
padding-top: 10px;
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .hero__subscription .tj-input {
background-color: transparent;
color: var(--tj-color-common-white);
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-medium);
letter-spacing: -0.02em;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .hero__subscription .tj-input {
width: 40%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .hero__subscription .tj-input {
padding: 14px 16px 14px;
}
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .hero__subscription .tj-input__wrapper {
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(22px);
border-color: var(--tj-color-border-5);
}
@media (max-width: 575px) {
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .hero__subscription .tj-input__wrapper {
padding: 0 2px 1px 0;
}
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .hero__subscription .tj-btn i {
font-size: 16px;
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .hero__subscription .tj-btn:hover {
border-color: var(--tj-color-common-white);
color: var(--tj-color-common-white);
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .hero__subscription .tj-btn:hover i {
color: var(--tj-color-common-white);
}
@media (max-width: 575px) {
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .hero__subscription .tj-btn {
padding: 15px 16px;
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .hero__subscription .tj-btn .subscription-text {
display: none;
}
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .footer__top__list li {
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-sbold);
letter-spacing: -0.02em;
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .footer__top__list li i {
font-size: 18px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe {
max-width: 495px;
padding-right: 0;
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe::after {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe {
max-width: 100%;
padding: 45px 0 40px;
margin-left: 0;
margin-bottom: 50px;
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe::after, .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe::before {
height: 1px;
width: 500%;
left: -100%;
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe::before {
top: 0;
}
.footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe::after {
top: auto;
bottom: 0;
right: auto;
}
}
.footer__widget__wrapper--2 .footer__widget.footer__info {
max-width: 250px;
width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer__widget__wrapper--2 .footer__widget.footer__info {
margin-top: 20px;
}
}
.footer__widget__wrapper--2 .footer__widget.footer__info .footer__info__address {
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: 10px;
max-width: 100%;
}
.footer__widget__wrapper--2 .footer__widget.footer__info .footer__info__list ul {
margin-bottom: 8px;
}
.footer__widget__wrapper--2 .footer__widget.footer__info .footer__info__list ul li .link {
display: inline;
font-size: 18px;
letter-spacing: -0.02em;
line-height: 1.44;
color: var(--tj-color-common-white);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, currentColor), to(currentColor));
background-image: linear-gradient(to right, currentColor 0, currentColor 100%);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0 1px;
}
.footer__widget__wrapper--2 .footer__widget.footer__info .footer__info__list ul li .link:hover {
background-size: 100% 1px;
color: var(--tj-color-theme-primary);
}
.footer__widget__wrapper--2 .footer__widget.footer__info .footer__info__list ul li:not(:last-child) {
margin-bottom: 5px;
}
.footer__widget__wrapper--2 .footer__widget.footer__info .footer__info__active-hours ul li {
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);
}
/* !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;
-webkit-transition: 0.6s;
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: 1700px), 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: 992px) 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.back-to-top-wrapper.back-to-top-btn-show {
right: 40px;
bottom: 125px;
}
}
@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-wrapper--2 {
position: absolute;
bottom: 0;
right: 50%;
-webkit-transform: translate(50%, 50%);
-ms-transform: translate(50%, 50%);
transform: translate(50%, 50%);
visibility: visible;
opacity: 1;
}
.back-to-top-wrapper--2.back-to-top-btn-show {
bottom: 0;
right: 50%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.back-to-top-wrapper--2 {
-webkit-transform: translate(50%, 15px);
-ms-transform: translate(50%, 15px);
transform: translate(50%, 15px);
}
}
.back-to-top-btn {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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%;
-webkit-animation: pulse1 1.5s infinite;
animation: pulse1 1.5s infinite;
-webkit-transition: all, 0.3s;
transition: all, 0.3s;
}
.back-to-top-btn i {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
color: var(--tj-color-common-white);
line-height: 1;
}
.back-to-top-btn:hover {
-webkit-transform: translateY(-4px);
-ms-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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.loading-container,
.loading {
height: 100px;
position: relative;
width: 100px;
border-radius: 100%;
}
.loading-container {
margin: 40px auto;
}
.loading {
border: 1px solid transparent;
border-color: transparent var(--tj-color-theme-secondary) transparent var(--tj-color-theme-secondary);
-webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
animation: rotate-loading 1.5s linear 0s infinite normal;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.loading-container:hover .loading,
.loading-container .loading {
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#loading-icon {
position: absolute;
top: 50%;
left: 50%;
max-width: 66px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@-webkit-keyframes rotate-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
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%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 30px;
height: 60px;
background-color: var(--tj-color-theme-bg1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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 {
position: absolute;
width: auto;
top: 0;
left: 25%;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
z-index: -1;
}
.text-marquee-slider__wrapper {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.text-marquee-slider__item {
display: -webkit-box;
display: -ms-flexbox;
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: -3%;
white-space: nowrap;
color: var(--tj-color-common-white);
opacity: 0.1;
line-height: 1.3;
padding: 0;
margin: 0;
}
/* !END: Text Marquee CSS */
/**----------------------------------------
START: Pagintions CSS
----------------------------------------*/
.tj-pagination {
margin-top: 50px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tj-pagination--left {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.tj-pagination ul {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
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.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 */
/**----------------------------------------
START: Client Thumbs CSS
----------------------------------------*/
.client__thumbs {
border: 1px solid var(--tj-color-border-1);
border-radius: 10px;
-webkit-box-shadow: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843);
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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
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%;
-webkit-margin-start: -18px;
margin-inline-start: -18px;
z-index: 2;
}
.client__thumbs__inner li:first-child {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
.client__thumbs__inner li img {
height: 52px;
-o-object-fit: cover;
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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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: Progress circle CSS
----------------------------------------*/
.progress-circle {
padding: 30px 49px;
background-color: var(--tj-color-common-white);
border-radius: 8px;
-webkit-box-shadow: 0px 11.54px 30.78px -1.92px var(--tj-color-theme-dark5);
box-shadow: 0px 11.54px 30.78px -1.92px var(--tj-color-theme-dark5);
max-width: 216px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media (max-width: 575px) {
.progress-circle {
padding: 20px 15px;
}
}
.progress-circle__inner input {
color: var(--tj-color-heading-primary) !important;
font-size: 24px !important;
width: auto;
font-weight: var(--tj-fw-bold) !important;
font-family: var(--tj-ff-heading) !important;
}
.progress-circle__inner canvas {
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
.progress-circle__text {
display: block;
letter-spacing: initial;
text-transform: unset;
margin-bottom: 0px;
text-align: center;
}
/* !END: Progress circle CSS */
/**----------------------------------------
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: 992px) and (max-width: 1199px) {
.hero__inner {
min-height: 668px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__inner {
min-height: auto;
padding-top: 105px;
}
}
.hero .title-animation div {
display: inline-block !important;
}
.hero .title-animation 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.hero__bg--right {
max-width: 95%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.hero__bg--right {
max-width: 92%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__bg--right {
max-width: 53%;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-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: 992px) 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: 991px) {
.hero__title {
font-size: 60px;
margin-bottom: 15px;
max-width: 480px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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 span:not(.cd-headline.clip):has(img) {
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__title img {
width: 65px;
height: 65px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero__title img {
width: 50px;
height: 50px;
}
}
@media (max-width: 575px) {
.hero__title 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 991px), 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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 6px;
-webkit-box-align: center;
-ms-flex-align: center;
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: 991px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 991px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.hero__banner-img {
right: -2%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__banner-img {
position: static;
text-align: center;
}
}
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 991px), 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%;
-webkit-animation: tjZoomInOut 2s alternate ease-in-out infinite;
animation: tjZoomInOut 2s alternate ease-in-out infinite;
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.hero__charts__img__inner {
right: 0%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 991px), 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 img {
width: 100%;
border: 1px solid var(--tj-color-border-1);
border-radius: var(--tj-br-xl);
-webkit-box-shadow: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843);
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.hero__charts__img--2 .hero__charts__img__inner {
left: -3%;
bottom: 4%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 991px), 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-breadcrumb {
width: 100%;
background: var(--tj-color-theme-bg1);
overflow: hidden;
position: relative;
z-index: 0;
}
.hero-breadcrumb::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 76, 224, 0.24)), color-stop(91.26%, rgba(255, 255, 255, 0)));
background-image: linear-gradient(180deg, rgba(5, 76, 224, 0.24) 0%, rgba(255, 255, 255, 0) 91.26%);
}
.hero-breadcrumb__inner {
height: 550px;
padding-top: 86px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 3;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-breadcrumb__inner {
padding-top: 60px;
height: 300px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero-breadcrumb__inner {
padding-top: 60px;
height: 300px;
}
}
.hero-breadcrumb__title {
margin-bottom: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-breadcrumb__title {
font-size: 48px;
margin-bottom: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero-breadcrumb__title {
font-size: 36px;
margin-bottom: 16px;
}
}
.hero-breadcrumb__nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 4px;
}
.hero-breadcrumb__nav > span a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 6px;
color: var(--tj-color-theme-dark3);
}
.hero-breadcrumb__nav > span a::before {
content: "\e918";
font-family: var(--tj-ff-ranko-icons);
font-size: 12px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.hero-breadcrumb__nav > span a:hover {
color: var(--tj-color-theme-secondary);
}
.hero-breadcrumb__nav > span 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;
color: var(--tj-color-theme-secondary);
}
.hero-breadcrumb__nav > span span::before {
content: "\e918";
font-family: var(--tj-ff-ranko-icons);
color: var(--tj-color-theme-dark3);
font-size: 12px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.hero-breadcrumb__nav > span:first-child a::before {
content: "\f015";
font-family: var(--tj-ff-fontawesome);
font-size: 16px;
-ms-flex-negative: 0;
flex-shrink: 0;
line-height: 1;
margin-bottom: 1px;
}
.hero-breadcrumb__icons img {
position: absolute;
top: 30%;
left: 20%;
z-index: 2;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-breadcrumb__icons img {
max-width: 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero-breadcrumb__icons img {
max-width: 30px;
}
}
.hero-breadcrumb__icons img:nth-last-child(1) {
top: 85%;
left: 71%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-breadcrumb__icons img:nth-last-child(1) {
max-width: 25px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero-breadcrumb__icons img:nth-last-child(1) {
max-width: 25px;
}
}
.hero-breadcrumb__icons img:nth-last-child(2) {
top: 35%;
left: 82%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-breadcrumb__icons img:nth-last-child(2) {
max-width: 40px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero-breadcrumb__icons img:nth-last-child(2) {
max-width: 40px;
}
}
.hero-breadcrumb__icons img:nth-last-child(3) {
top: 63%;
left: 5%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-breadcrumb__icons img:nth-last-child(3) {
max-width: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero-breadcrumb__icons img:nth-last-child(3) {
max-width: 10px;
}
}
.hero__reviews {
position: absolute;
left: -50px;
bottom: 50%;
z-index: 2;
-webkit-transform: translateY(50%) rotate(-90deg);
-ms-transform: translateY(50%) rotate(-90deg);
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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 2px;
-webkit-box-align: center;
-ms-flex-align: center;
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;
-webkit-transform: none;
-ms-transform: none;
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: 992px) 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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 16px;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 16px;
height: 30px;
border: 2px solid var(--tj-color-common-white);
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
position: relative;
border-radius: 50px;
}
.hero__scroll__link span::before {
position: absolute;
content: "";
width: 7px;
height: 2px;
bottom: 8px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: var(--tj-color-common-white);
-webkit-animation: jump-arrow 2.5s infinite;
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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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: 992px) 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: 991px) {
.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;
-o-object-fit: cover;
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: 992px) and (max-width: 1199px) {
.hero__logo img {
width: 50px;
height: 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: url("../img/hero/hero-bg-3.png") no-repeat center;
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 991px), 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: 94px;
z-index: 2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--2 .hero__left {
margin-top: 90px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--2 .hero__left {
margin-top: 0px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 30px;
-webkit-box-align: center;
-ms-flex-align: center;
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::after {
background: 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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 22px;
-webkit-box-align: center;
-ms-flex-align: center;
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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__ratings__single--clutch img {
margin-bottom: 4px;
}
.hero--2 .hero__ratings .testimonials__rating {
margin-bottom: 0;
}
.hero--2 .hero__ratings .star-ratings {
font-size: 18px;
}
.hero--2 .hero__ratings .star-ratings .fill-ratings {
color: var(--tj-color-common-white);
}
.hero--2 .hero__ratings .star-ratings .empty-ratings {
color: var(--tj-color-common-white);
}
.hero--2 .hero__ratings__divider {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 1px;
height: 50px;
background: var(--tj-color-border-9);
}
.hero--2 .hero__banner-img {
right: -47%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--2 .hero__banner-img {
right: -11%;
bottom: -36px;
}
}
.hero--2 .hero__banner-img > img {
max-width: 953px;
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: 1200px) and (max-width: 1399px) {
.hero--2 .hero__banner-img > img {
max-width: 700px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--2 .hero__banner-img > img {
max-width: 550px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--2 .hero__banner-img > img {
max-width: 100%;
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: 992px) and (max-width: 1199px) {
.hero--2 .hero__right {
min-height: 467px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) and (max-width: 1199px) {
.hero--2 .hero__reviews {
left: -88px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--2 .hero__reviews {
position: static;
-webkit-transform: none;
-ms-transform: none;
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: 992px) and (max-width: 1199px) {
.hero--2 .hero__scroll {
left: -30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) and (max-width: 1199px) {
.hero--3 .hero__inner {
padding-top: 160px;
min-height: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 76, 224, 0.24)), color-stop(91.26%, rgba(255, 255, 255, 0)));
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;
-webkit-transform: translate(30%, -30%);
-ms-transform: translate(30%, -30%);
transform: translate(30%, -30%);
}
.hero--3 .hero__inner .hero__bg__shap__img:last-child {
top: 25%;
left: 0;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.hero--3 .hero__heading {
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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__title {
max-width: 750px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__title {
max-width: 514px;
}
}
.hero--3 .hero__title__img-wrapper {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
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__img-wrapper {
gap: 0px;
}
}
.hero--3 .hero__title__img-wrapper img {
width: 61px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__title__img-wrapper img {
margin-left: 0 !important;
margin-right: -5px;
}
}
.hero--3 .hero__action__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
}
.hero--3 .hero__google__ads__rating {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
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: 991px), 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: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 30px;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--3 .hero__analytics {
gap: 20px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics {
gap: 20px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.hero--3 .hero__analytics__seo {
width: 471px;
max-width: 100%;
padding: 22px;
background: url("../img/hero/analytics/noice-bg.png") no-repeat center;
background-size: cover;
border-radius: 20px;
position: relative;
z-index: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--3 .hero__analytics__seo {
border-radius: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__seo {
width: 550px;
}
}
@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: 992px) and (max-width: 1199px) {
.hero--3 .hero__analytics__seo::after {
border-radius: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px) {
.hero--3 .hero__analytics__seo__inner {
border-radius: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
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 {
-webkit-animation: linehover 0.8s linear;
animation: linehover 0.8s linear;
}
.hero--3 .hero__analytics__seo__bg-img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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 {
width: 471px;
max-width: 100%;
padding: 22px;
background: url("../img/hero/analytics/noice-bg.png") no-repeat center;
background-size: cover;
border-radius: 20px;
position: relative;
z-index: 0;
height: 571px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--3 .hero__analytics__slider {
border-radius: 16px;
height: 571px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__slider {
width: 550px;
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: 992px) and (max-width: 1199px) {
.hero--3 .hero__analytics__slider::after {
border-radius: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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 {
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(2.91%, rgb(255, 255, 255)), color-stop(30.6%, #ffffff), color-stop(40.51%, #ffffff), color-stop(97.03%, rgba(255, 255, 255, 0)));
-webkit-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-image: -webkit-gradient(linear, left top, left bottom, color-stop(2.91%, rgb(255, 255, 255)), color-stop(30.6%, #ffffff), color-stop(40.51%, #ffffff), color-stop(97.03%, rgba(255, 255, 255, 0)));
mask-image: linear-gradient(180deg, rgb(255, 255, 255) 2.91%, #ffffff 30.6%, #ffffff 40.51%, rgba(255, 255, 255, 0) 97.03%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
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: 992px) 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: 991px), 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: 992px) and (max-width: 1199px) {
.hero--3 .hero__analytics__slider .testimonials__desc {
font-size: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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__funfact {
width: 413px;
max-width: 100%;
padding: 19px;
background-color: var(--tj-color-theme-bg2);
background-size: cover;
border-radius: 20px;
position: relative;
max-width: 100%;
z-index: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--3 .hero__analytics__funfact {
border-radius: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__funfact {
width: 550px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__funfact {
border-radius: 12px;
}
}
.hero--3 .hero__analytics__funfact__single.funfact-area {
margin: 0;
margin-bottom: 19px;
}
.hero--3 .hero__analytics__funfact__single.funfact-area .funfact-item {
padding: 30px 19px;
padding-top: 7px;
background: url("../img/hero/analytics/chart-counter-bg.png");
background-size: cover;
border-radius: 20px;
position: relative;
text-align: left;
z-index: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--3 .hero__analytics__funfact__single.funfact-area .funfact-item {
border-radius: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), sm {
.hero--3 .hero__analytics__funfact__single.funfact-area .funfact-item {
padding-bottom: 28px;
}
}
@media (max-width: 575px) {
.hero--3 .hero__analytics__funfact__single.funfact-area .funfact-item {
border-radius: 12px;
}
}
.hero--3 .hero__analytics__funfact__single.funfact-area .funfact-item::after {
background-color: var(--tj-color-common-black);
opacity: 0.6;
}
@media only screen and (min-width: 768px) and (max-width: 991px), sm {
.hero--3 .hero__analytics__funfact__single.funfact-area .funfact-item::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), sm {
.hero--3 .hero__analytics__funfact__single.funfact-area .funfact-item .number {
font-size: 65px;
}
}
.hero--3 .hero__analytics__funfact__single.funfact-area .funfact-item .text--traffic {
margin-top: 5px;
}
.hero--3 .hero__analytics__funfact__chart img {
border-radius: 16px;
width: 100%;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__funfact__chart img {
border-radius: 12px;
}
}
.hero--3 .hero__analytics__img {
width: 413px;
max-width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__img {
width: 550px;
}
}
.hero--3 .hero__analytics__img img {
border-radius: 20px;
width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--3 .hero__analytics__img img {
border-radius: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__analytics__img img {
border-radius: 12px;
}
}
.hero--4 .hero__inner {
padding-top: 120px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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;
}
}
.hero--4 .hero-breadcrumb__icons img {
top: 5%;
left: 20%;
}
.hero--4 .hero-breadcrumb__icons img:nth-last-child(1) {
top: 85%;
left: 71%;
}
.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: 992px) and (max-width: 1199px) {
.hero--4 .hero__title {
max-width: 700px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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;
}
}
.hero--5 .hero__inner {
min-height: 840px;
padding-top: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--5 .hero__inner {
min-height: 817px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero--5 .hero__inner {
padding-top: 128px;
padding-bottom: 90px;
}
}
@media (max-width: 575px) {
.hero--5 .hero__inner {
padding-top: 120px;
padding-bottom: 90px;
}
}
@media only screen and (min-width: 992px) 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: 992px) and (max-width: 1199px) {
.hero--5 .hero__title {
font-size: 65px;
max-width: 100%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--5 .hero__title {
font-size: 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: 991px) {
.hero--5 .hero__title {
font-size: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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 img {
width: 67px;
height: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--5 .hero__title img {
width: 55px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero--5 .hero__title img {
width: 50px;
}
}
@media (max-width: 575px) {
.hero--5 .hero__title 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.hero--5 .hero__desc {
font-size: 18px;
margin-bottom: 24px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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;
-webkit-box-shadow: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843);
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: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 6px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.hero--5 .hero__google__ads__rating__wrapper {
position: absolute;
left: 0;
top: 35%;
-webkit-transform: translate(-40%, -50%);
-ms-transform: translate(-40%, -50%);
transform: translate(-40%, -50%);
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero--5 .hero__google__ads__rating__wrapper {
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
}
@media (max-width: 575px) {
.hero--5 .hero__google__ads__rating__wrapper {
left: auto;
right: 15px;
-webkit-transform: translate(0, 74%);
-ms-transform: translate(0, 74%);
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;
-webkit-transform: translate(-60%, 30px);
-ms-transform: translate(-60%, 30px);
transform: translate(-60%, 30px);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--5 .hero__client__thumbs {
-webkit-transform: translate(0, 30px);
-ms-transform: translate(0, 30px);
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: 992px) and (max-width: 1199px) {
.hero--5 .hero__banner-img img {
max-width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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%;
-webkit-transform: translate(60%, -40%);
-ms-transform: translate(60%, -40%);
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: 992px) and (max-width: 1199px) {
.hero--5 .hero__dartboard {
-webkit-transform: translate(10%, -36%);
-ms-transform: translate(10%, -36%);
transform: translate(10%, -36%);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--5 .hero__dartboard {
-webkit-transform: translate(45%, -40%);
-ms-transform: translate(45%, -40%);
transform: translate(45%, -40%);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--5 .hero__dartboard {
-webkit-transform: translate(9%, -40%);
-ms-transform: translate(9%, -40%);
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%;
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
}
.hero--5 .hero__shape__img__wrapper:last-child {
right: -30px;
bottom: 20%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--5 .hero__scroll {
left: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--5 .hero__scroll {
display: none;
}
}
.hero--6 {
position: relative;
overflow: hidden;
z-index: 0;
}
.hero--6 .hero__inner {
min-height: 911px;
padding-top: 236px;
overflow: visible;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--6 .hero__inner {
min-height: 710px;
padding-top: 176px;
padding-bottom: 70px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: 174px;
padding-bottom: 75px;
}
}
.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: 992px) and (max-width: 1199px) {
.hero--6 .hero__left {
max-width: 588px;
}
}
.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: 992px) and (max-width: 1199px) {
.hero--6 .hero__title {
font-size: 70px;
max-width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: 991px) {
.hero--6 .hero__title {
font-size: 72px;
}
}
@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: 40px;
}
}
.hero--6 .hero__title span {
color: var(--tj-color-common-white);
}
.hero--6 .hero__title img {
width: 220px;
height: 84px;
-o-object-fit: cover;
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--6 .hero__client__thumbs {
-ms-flex-negative: 0;
flex-shrink: 0;
}
}
.hero--6 .hero__right {
min-height: 580px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
z-index: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 15px;
}
}
@media (max-width: 575px) {
.hero--6 .hero__right {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-box-align: start;
-ms-flex-align: start;
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;
-webkit-box-shadow: none;
box-shadow: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--6 .hero__right .client__thumbs {
-webkit-animation: none;
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: 991px) {
.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: -webkit-gradient(linear, left top, left bottom, from(var(--tj-color-theme-primary)), to(var(--tj-color-theme-secondary)));
background: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, var(--tj-color-theme-secondary) 100%);
-webkit-filter: blur(120px);
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: 992px) and (max-width: 1199px) {
.hero--6 .hero__scroll {
left: 10px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--6 .hero__scroll {
display: none;
}
}
/* !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%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 5.5px;
}
.tj-nice-select.open::before {
-webkit-transform: translateY(-50%) rotate(-180deg);
-ms-transform: translateY(-50%) rotate(-180deg);
transform: translateY(-50%) rotate(-180deg);
}
.contact {
overflow: hidden;
}
.contact__inner {
background: url("../img/process/process-bg.png") no-repeat center;
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: 992px) and (max-width: 1199px) {
.contact__inner {
padding: 100px 30px;
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px) {
.contact__inner::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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 .section-heading__sub-title {
border-color: var(--tj-color-common-white);
color: var(--tj-color-common-white);
}
.contact__inner__pattern img {
position: absolute;
top: 80px;
left: 60px;
width: 134px;
z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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 {
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: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__form {
margin-top: 30px;
max-width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__form {
grid-template-columns: 1fr;
gap: 16px;
max-width: 100%;
margin-top: 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__form {
grid-template-columns: 1fr;
gap: 16px;
margin-top: 20px;
}
}
.contact__form .tj-input {
background: transparent;
color: var(--tj-color-common-white);
width: 100%;
padding-top: 11px;
padding-bottom: 11px;
font-size: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: 991px), 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::-webkit-input-placeholder {
color: var(--tj-color-common-white);
opacity: 1;
}
.contact__form .tj-input::-moz-placeholder {
color: var(--tj-color-common-white);
opacity: 1;
}
.contact__form .tj-input:-ms-input-placeholder {
color: var(--tj-color-common-white);
opacity: 1;
}
.contact__form .tj-input::-ms-input-placeholder {
color: var(--tj-color-common-white);
opacity: 1;
}
.contact__form .tj-input::placeholder {
color: var(--tj-color-common-white);
opacity: 1;
}
.contact__form .tj-input__wrapper {
width: 100%;
border: 0;
background-color: var(--tj-color-theme-bg8);
border: 1px solid var(--tj-color-border-5);
padding-right: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.contact__form .tj-input__wrapper:has(.tj-input:not(.tj-nice-select):focus) {
border-color: var(--tj-color-common-white);
}
.contact__form .tj-input__wrapper--message {
grid-column: 1/3;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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 textarea.tj-input {
min-height: 160px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__form textarea.tj-input {
min-height: 100px;
height: 100px;
}
}
.contact__form__wrapper .section-heading {
margin-bottom: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.contact__form__wrapper .section-heading {
margin-bottom: 35px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.contact__form__wrapper .section-heading {
margin-bottom: 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__form__wrapper .section-heading {
margin-bottom: 24px;
}
}
.contact__form__wrapper .section-heading__title {
color: var(--tj-color-common-white);
}
.contact__form__wrapper .section-heading__desc {
margin-bottom: 0;
color: var(--tj-color-common-white2);
}
.contact__form .tj-btn:hover {
color: var(--tj-color-common-white);
border-color: var(--tj-color-common-white);
}
.contact__banner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__banner {
position: static;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
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%;
-webkit-transform: translate(-50%, -50%) rotate(-30deg);
-ms-transform: translate(-50%, -50%) rotate(-30deg);
transform: translate(-50%, -50%) rotate(-30deg);
width: 206px;
max-width: 100%;
z-index: 2;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.contact__chart {
top: 18%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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; /* Ensures border radius is applied */
background: -webkit-gradient(linear, left top, left bottom, from(var(--tj-color-theme-primary)), to(rgba(244, 68, 84, 0.3)));
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;
}
.contact-team-details {
padding: 0 0 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.contact-team-details {
padding: 0 0 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.contact-team-details {
padding: 0 0 80px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-team-details {
padding: 0 0 60px;
}
}
.contact-team-details__inner {
background: var(--tj-color-theme-bg1);
padding: 80px;
padding-left: 50px;
border-radius: var(--tj-br-md);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.contact-team-details__inner {
padding: 50px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-team-details__inner {
padding: 30px;
}
}
.contact-team-details .section-heading__sub-title {
background: var(--tj-color-common-white);
}
.contact-team-details__message {
font-size: 16px;
}
.contact-team-details__message a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 6px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.contact-team-details__message a i {
font-size: 23px;
margin-top: 2px;
color: var(--tj-color-theme-secondary);
}
.contact-team-details__message a:hover {
color: var(--tj-color-theme-primary);
}
.contact-team-details__message a:hover i {
color: var(--tj-color-theme-primary);
}
.contact-team-details__form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 0;
padding-left: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-team-details__form {
margin-top: 30px;
padding-left: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-team-details__form {
grid-template-columns: 1fr;
gap: 16px;
max-width: 100%;
margin-top: 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-team-details__form {
grid-template-columns: 1fr;
gap: 16px;
margin-top: 20px;
}
}
.contact-team-details__form .tj-input {
border: 1px solid transparent;
width: 100%;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
font-size: 16px;
}
.contact-team-details__form .tj-input:focus {
color: var(--tj-color-theme-secondary);
border-color: var(--tj-color-theme-secondary);
}
.contact-team-details__form .tj-input:focus::-webkit-input-placeholder {
color: var(--tj-color-theme-secondary);
}
.contact-team-details__form .tj-input:focus::-moz-placeholder {
color: var(--tj-color-theme-secondary);
}
.contact-team-details__form .tj-input:focus:-ms-input-placeholder {
color: var(--tj-color-theme-secondary);
}
.contact-team-details__form .tj-input:focus::-ms-input-placeholder {
color: var(--tj-color-theme-secondary);
}
.contact-team-details__form .tj-input:focus::placeholder {
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 {
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: 991px), 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;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: 991px) and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 768px) and (max-width: 991px) and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) and (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) and (min-width: 768px) and (max-width: 991px), 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: 991px), 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.tj-nice-select {
padding: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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-top {
padding: 120px 0;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.contact-top {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.contact-top {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-top {
padding: 60px 0;
}
}
.contact-top .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: 991px) {
.contact-top .contact-item.style-2 {
padding: 25px;
border-radius: 12px;
}
}
.contact-top .contact-item.style-2 p {
margin-bottom: 0;
max-width: 224px;
margin: 0 auto;
}
.contact-top .contact-item.style-2:hover .contact-icon {
background: var(--tj-color-theme-secondary);
}
.contact-top .contact-item.style-2:hover .contact-icon i {
color: var(--tj-color-common-white);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
.contact-top .contact-item.style-2 .contact-icon {
width: 88px;
height: 88px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: 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;
transition: all 0.3s ease-in-out 0s;
}
.contact-top .contact-item.style-2 .contact-icon i {
font-size: 32px;
color: var(--tj-color-theme-secondary);
}
.contact-top .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: 991px) {
.contact-top .contact-item.style-2 .contact-title {
font-size: 20px;
}
}
.contact-top .contact-item.style-2 .contact-list {
list-style: none;
}
.contact-top .contact-item.style-2 .contact-list li a {
color: var(--tj-color-text-body);
}
.contact-top .contact-item.style-2 .contact-list li a:hover {
color: var(--tj-color-theme-primary);
}
.contact-top .contact-item.style-2 .contact-list li.active a {
text-transform: capitalize;
font-weight: var(--tj-fw-sbold);
color: var(--tj-color-theme-primary);
}
.contact__main {
padding-bottom: 120px;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.contact__main {
padding-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.contact__main {
padding-bottom: 80px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__main {
padding-bottom: 60px;
}
}
.contact__main__form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__main__form {
margin-top: 30px;
padding-left: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__main__form {
grid-template-columns: 1fr;
gap: 16px;
max-width: 100%;
margin-top: 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__main__form {
grid-template-columns: 1fr;
gap: 16px;
margin-top: 20px;
}
}
.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;
}
.contact__main__form .tj-input__wrapper {
width: 100%;
border: 0;
border-bottom: 1px solid var(--tj-color-border-1);
border-radius: 0;
}
.contact__main__form .tj-input__wrapper:has(.tj-input:focus) {
border-color: var(--tj-color-common-black);
}
.contact__main__form .tj-input__wrapper--message {
grid-column: 1/3;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__main__form .tj-input__wrapper--message {
grid-column: 1/2;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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.tj-nice-select {
padding: 20px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact__main__form .tj-input.tj-nice-select {
padding: 16px 0;
}
}
.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: 991px), 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;
border: 1px solid var(--tj-color-theme-secondary);
}
.map-area.map-2 iframe {
height: 100%;
}
.contact-form.style-2 {
max-width: 100%;
background-color: var(--tj-color-theme-bg);
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: 991px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-form.style-2 {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.contact-form.style-2 {
margin-bottom: 40px;
}
}
@media only screen and (min-width: 992px) 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__inner {
padding: 65px 0 62px;
background: url("../img/brands/brands-bg.png") no-repeat center;
background-size: cover;
border-radius: 24px;
position: relative;
z-index: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.brand-marquee__inner {
padding: 45px 0;
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.brand-marquee__inner {
padding: 35px 0;
border-radius: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.brand-marquee__inner {
padding: 24px 0;
border-radius: 12px;
}
}
.brand-marquee__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: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.brand-marquee__inner::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.brand-marquee__inner::after {
border-radius: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.brand-marquee__inner::after {
border-radius: 12px;
}
}
.brand-marquee__heading {
padding-bottom: 34px;
margin-bottom: 16px;
border-bottom: 1px solid var(--tj-color-border-4);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 991px), 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 {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.brand-marquee__slider__wrapper {
-webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(2.91%, rgba(255, 255, 255, 0)), color-stop(30.6%, var(--tj-color-common-white)), color-stop(69.51%, var(--tj-color-common-white)), color-stop(97.03%, rgba(255, 255, 255, 0)));
-webkit-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%);
mask-image: -webkit-gradient(linear, left top, right top, color-stop(2.91%, rgba(255, 255, 255, 0)), color-stop(30.6%, var(--tj-color-common-white)), color-stop(69.51%, var(--tj-color-common-white)), color-stop(97.03%, rgba(255, 255, 255, 0)));
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 {
width: auto;
}
.brand-marquee__item img {
width: 200px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.brand-marquee__item img {
width: 150px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) and (max-width: 1199px) {
.brand-marquee--float {
margin-bottom: -102px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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 {
-webkit-filter: invert(1);
filter: invert(1);
}
/* !END: Brand Marrquee CSS */
/**----------------------------------------
START: About CSS
----------------------------------------*/
.about--1 {
padding: 150px 0 170px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.about {
padding: 135px 0 170px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.about {
padding: 110px 0 150px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.about {
padding: 80px 0 130px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about {
padding: 60px 0 80px;
}
}
.about__banner {
position: relative;
z-index: 0;
display: inline-block;
}
.about__banner > img {
width: 533px;
border-radius: 20px;
}
.about__banner__bg {
position: absolute;
right: -30px;
top: -30px;
z-index: -1;
}
.about__banner__bg img {
width: 533px;
border-radius: var(--tj-br-xl);
}
@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__charts__img {
position: absolute;
z-index: 1;
}
.about__banner__charts__img img {
border: 1px solid var(--tj-color-border-1);
border-radius: var(--tj-br-xl);
-webkit-box-shadow: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843);
box-shadow: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843);
overflow: hidden;
}
.about__banner__charts__img--right {
left: 100%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 213px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) 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: 991px), 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: 991px) {
.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 1fr;
max-width: 418px;
gap: 12px;
font-family: var(--tj-ff-heading);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
font-weight: var(--tj-fw-medium);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__features ul li {
gap: 6px;
}
}
.about__features ul li::before {
content: "\e909";
font-family: "ranko-icons";
color: var(--tj-color-theme-secondary);
font-size: 18px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__features ul li::before {
font-size: 16px;
}
}
.about__action {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 30px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 34px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.about__action {
margin-top: 26px;
gap: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__action {
margin-top: 16px;
gap: 16px;
}
}
.about__action .tj-btn-2 i {
color: var(--tj-color-theme-secondary);
}
.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: 991px), 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 {
padding: 120px 0 0;
overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.about--4 {
padding: 100px 0 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.about--4 {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--4 {
padding: 60px 0 0;
}
}
.about--4 .about__inner {
position: relative;
z-index: 0;
background-color: var(--tj-color-theme-bg1);
border-radius: 24px;
padding: 120px 0;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.about--4 .about__inner {
padding: 100px 30px;
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.about--4 .about__inner {
padding: 80px 30px;
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--4 .about__inner {
padding: 60px 15px;
border-radius: 16px;
}
}
.about--4 .about__inner::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../img/funfact/funfact-bg.png") no-repeat top left;
border-radius: 24px;
z-index: -1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.about--4 .about__inner::after {
display: none;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.about--4 .about__inner::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.about--4 .about__inner::after {
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--4 .about__inner::after {
border-radius: 16px;
}
}
.about--4 .about__inner .text-marquee-slider__wrap {
left: 29%;
}
.about--4 .about__inner .text-marquee-slider__title {
opacity: 0.7;
}
.about--4 .about__inner .text-marquee-slider__dot {
opacity: 0.7;
}
.about--4 .about__banner {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 30px;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.about--4 .about__banner {
margin-top: 50px;
margin-right: -30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-negative: 0;
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: 991px) {
.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%;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 4px solid var(--tj-color-common-white);
margin-top: -27px;
-o-object-fit: cover;
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: 991px) {
.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: 991px) {
.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);
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
position: absolute;
width: 16px;
height: 16px;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 991px) {
.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: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 15px;
-webkit-box-align: center;
-ms-flex-align: center;
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;
}
}
.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__title {
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__title {
font-size: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.about--4 .about__banner__video__title {
font-size: 12px;
}
}
@media (max-width: 575px) {
.about--4 .about__banner__video__title {
font-size: 10px;
}
}
.about--4 .about__banner__video__dur {
margin-bottom: 0;
font-size: 14px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.about--4 .about__banner__video__dur {
font-size: 10px;
}
}
@media (max-width: 575px) {
.about--4 .about__banner__video__dur {
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: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
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: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
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: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: 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: 991px) {
.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: 991px) {
.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;
}
}
.about--5.section-gap {
padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.about--5.section-gap {
padding-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.about--5.section-gap {
padding-bottom: 80px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--5.section-gap {
padding-bottom: 60px;
}
}
.about--5 .section-heading__sub-title {
margin-top: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--5 .section-heading__sub-title {
margin-top: 0;
}
}
.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: 992px) and (max-width: 1199px) {
.about--5 .section-heading__title .text-indent {
padding-left: 80px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--5 .section-heading__title .text-indent {
padding-left: 0;
}
}
.about--5 .about__content {
max-width: 870px;
margin-left: auto;
padding-left: 0;
}
.about--5 .about__action {
margin-top: 30px;
}
@media (max-width: 575px) {
.about--5 .about__action {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.about--6 {
padding-bottom: 120px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.about--6 {
padding-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.about--6 {
padding-bottom: 80px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--6 {
padding-bottom: 60px;
}
}
.about--6 .about__banner {
max-width: 420px;
}
.about--6 .about__banner img {
border-radius: 12px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--6 .about__banner {
max-width: 100%;
width: 100%;
}
.about--6 .about__banner img {
width: 100%;
}
}
.about--6 .about__content {
max-width: 815px;
margin-left: auto;
padding-left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.about--6 .about__content {
max-width: 580px;
}
}
.about--6 .about__action {
margin-top: 30px;
}
@media (max-width: 575px) {
.about--6 .about__action {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.about--6 .about__bottom {
margin-top: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.about--6 .about__bottom {
margin-top: 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--6 .about__bottom {
margin-top: 30px;
}
}
/* !END: About CSS */
/**----------------------------------------
START: Funfact CSS
----------------------------------------*/
.funfact {
position: relative;
}
.funfact__inner {
position: relative;
z-index: 0;
background-color: var(--tj-color-theme-bg1);
border-radius: 24px;
padding: 120px 0;
overflow: hidden;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.funfact__inner {
padding: 100px 30px;
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.funfact__inner {
padding: 80px 30px;
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact__inner {
padding: 60px 15px;
border-radius: 16px;
}
}
.funfact__inner::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../img/funfact/funfact-bg.png") no-repeat top left;
border-radius: 24px;
z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.funfact__inner::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.funfact__inner::after {
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact__inner::after {
border-radius: 16px;
}
}
.funfact__inner .text-marquee-slider__wrap {
left: 30%;
}
.funfact__inner .text-marquee-slider__title {
opacity: 0.7;
}
.funfact__inner .text-marquee-slider__dot {
opacity: 0.7;
}
.funfact__dart-board {
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
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: 991px) {
.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: 992px) and (max-width: 1199px) {
.funfact__dart-board img {
width: 76px;
height: 76px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 991px), 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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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: 992px) and (max-width: 1199px) {
.funfact__curve__line {
left: 63%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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 {
padding: 120px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.funfact--2 {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.funfact--2 {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact--2 {
padding: 60px 0;
}
}
.funfact--2 .funfact__single {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px;
position: relative;
z-index: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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%;
-webkit-transform: translateX(-50%) translateY(-15px) rotate(90deg);
-ms-transform: translateX(-50%) translateY(-15px) rotate(90deg);
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: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact--2 .funfact__single > .tj-u-shape {
left: 50%;
top: 100%;
-webkit-transform: translateX(-50%) translateY(-15px) rotate(90deg);
-ms-transform: translateX(-50%) translateY(-15px) rotate(90deg);
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: 991px), 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: 991px), 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;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.funfact--3 .gap-30-0 {
gap: 20px 0;
}
}
.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: 992px) and (max-width: 1199px) {
.funfact--3 .funfact__single {
padding: 40px 25px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px) {
.funfact--3 .funfact__single__title {
font-size: 48px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.funfact--3 .funfact__single .funfact-area.style-2 {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
}
.funfact--3 .funfact__single .funfact-area.style-2 .funfact-item {
padding: 35px 30px;
text-align: left;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.funfact--3 .funfact__single .funfact-area.style-2 .funfact-item {
padding: 30px 25px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.funfact--3 .funfact__single .funfact-area.style-2 .funfact-item {
padding: 25px 20px;
width: calc(50% - 10px);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact--3 .funfact__single .funfact-area.style-2 .funfact-item {
padding: 25px 20px;
}
}
.funfact--3 .funfact__single .funfact-area.style-2 .funfact-item .number {
color: var(--tj-color-heading-primary);
}
.funfact--3 .funfact__single .funfact-area.style-2 .text {
line-height: 1.625;
margin-top: 8px;
}
.funfact--3 .funfact__traffic {
position: relative;
z-index: 0;
}
.funfact--3 .funfact__traffic__list ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 6px;
}
.funfact--3 .funfact__traffic__list li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 8px;
-webkit-box-align: center;
-ms-flex-align: center;
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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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-area.style-2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 30px;
margin-top: 50px;
padding: 0;
height: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.style-2 {
gap: 20px;
margin-top: 35px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-2 {
gap: 20px;
margin-top: 0px;
}
}
.funfact-area.style-2 .funfact-item {
padding: 30px 40px 46px;
-ms-flex-item-align: stretch;
align-self: stretch;
background: url("../img/funfact/funfact-item-bg.png") no-repeat center;
background-size: cover;
border-radius: 16px;
position: relative;
z-index: 0;
text-align: center;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
line-height: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.funfact-area.style-2 .funfact-item {
padding: 24px 24px 36px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.style-2 .funfact-item {
-webkit-box-flex: 0;
-ms-flex: 0 1 calc(50% - 10px);
flex: 0 1 calc(50% - 10px);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-2 .funfact-item {
padding: 24px 24px 36px;
-webkit-box-flex: 0;
-ms-flex: 0 1 calc(50% - 10px);
flex: 0 1 calc(50% - 10px);
}
}
@media (max-width: 575px) {
.funfact-area.style-2 .funfact-item {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.style-2 .funfact-item {
border-radius: 12px;
}
}
@media 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 4px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 16px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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 .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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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 small sub {
-webkit-transform: translateY(60px);
-ms-transform: translateY(60px);
transform: translateY(60px);
bottom: -0.55em;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-2 .funfact-item .number small sub {
bottom: -0.25em;
}
}
.funfact-area.style-2 .funfact-item .number span {
line-height: 1;
}
.odometer.odometer-auto-theme {
font-family: var(--tj-ff-heading);
}
.funfact-area.style-2 .funfact-item .funfact-icon {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
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: -webkit-inline-box;
display: -ms-inline-flexbox;
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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
max-width: 32px;
width: 100%;
}
.odometer span {
line-height: 1;
letter-spacing: 0.03em;
}
.odometer-digit-inne {
visibility: visible;
}
.funfact-area.style-4 {
height: auto;
margin-top: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.funfact-area.style-4 {
margin-top: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.style-4 {
margin-top: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-4 {
margin-top: 10px;
}
}
.funfact-area.style-4 .funfact-item {
background: var(--tj-color-theme-bg1);
border: 1px solid var(--tj-color-border-1);
}
.funfact-area.style-4 .funfact-item::after {
display: none;
}
.funfact-area.style-4 .funfact-item .number {
color: var(--tj-color-heading-primary);
}
.funfact-area.style-4 .funfact-item .text {
color: var(--tj-color-text-body);
margin-top: 12px;
}
.symbol-plus {
margin-top: -8px;
}
.funfact-area.style-3 {
gap: 80px;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
max-width: 660px;
height: auto;
margin-top: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.funfact-area.style-3 {
gap: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.style-3 {
gap: 70px;
margin-left: auto;
margin-right: auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.funfact-area.style-3 {
gap: 50px;
}
}
@media (max-width: 575px) {
.funfact-area.style-3 {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 36px;
}
}
.funfact-area.style-3 .funfact-item {
padding: 0;
text-align: left;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
background: transparent;
width: 50%;
-webkit-padding-end: 80px;
padding-inline-end: 80px;
border-radius: 0;
}
.funfact-area.style-3 .funfact-item:not(:last-child) {
-webkit-border-end: 1px solid var(--tj-color-border-11);
border-inline-end: 1px solid var(--tj-color-border-11);
}
.funfact-area.style-3 .funfact-item::after {
display: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.funfact-area.style-3 .funfact-item {
-webkit-padding-end: 40px;
padding-inline-end: 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.style-3 .funfact-item {
-webkit-padding-end: 50px;
padding-inline-end: 50px;
width: calc(50% - 10px);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.funfact-area.style-3 .funfact-item {
-webkit-padding-end: 40px;
padding-inline-end: 40px;
}
}
@media (max-width: 575px) {
.funfact-area.style-3 .funfact-item {
-webkit-padding-end: 0;
padding-inline-end: 0;
width: 100%;
}
.funfact-area.style-3 .funfact-item:not(:last-child) {
-webkit-border-end: 0;
border-inline-end: 0;
padding-bottom: 20px;
border-bottom: 1px solid var(--tj-color-border-11);
}
}
.funfact-area.style-3 .funfact-item .number {
font-size: 100px;
color: var(--tj-color-heading-primary);
text-align: start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin-top: -22px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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 .number .odometer .odometer-digit {
letter-spacing: 0.02em;
}
.funfact-area.style-3 .funfact-item .number .odometer .odometer-digit:last-child {
-webkit-margin-start: -8px;
margin-inline-start: -8px;
}
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-3 .funfact-item .text {
font-size: 16px;
}
}
.funfact-area.style-5 {
max-width: 335px;
height: auto;
margin-top: 44px;
margin-bottom: 22px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.style-5 {
margin-top: 28px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-5 {
margin-top: 28px;
margin-bottom: 16px;
}
}
.funfact-area.style-5 .funfact-item {
padding: 0;
text-align: left;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
background: transparent;
width: 50%;
border-radius: 0;
}
.funfact-area.style-5 .funfact-item::after {
display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-5 .funfact-item {
width: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
}
.funfact-area.style-5 .funfact-item .number {
font-size: 100px;
color: var(--tj-color-heading-primary);
text-align: start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin-top: -22px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.style-5 .funfact-item .number {
font-size: 80px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-5 .funfact-item .number {
font-size: 60px;
}
}
.funfact-area.style-5 .funfact-item .number .odometer .odometer-digit {
letter-spacing: 0.02em;
}
.funfact-area.style-5 .funfact-item .number .odometer .odometer-digit:last-child {
-webkit-margin-start: -8px;
margin-inline-start: -8px;
}
.funfact-area.style-5 .funfact-item .text {
line-height: 1.44;
margin-top: 0;
color: var(--tj-color-text-body);
font-size: 18px;
font-weight: var(--tj-fw-bold);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-5 .funfact-item .text {
font-size: 16px;
}
}
/* !END: Funfact CSS */
/**----------------------------------------
START: Service CSS
----------------------------------------*/
.service {
padding: 120px 0;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.service {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service {
padding: 60px 0;
}
}
.service__title {
margin-bottom: 24px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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__desc {
margin-bottom: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.service__desc {
margin-bottom: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__desc {
margin-bottom: 14px;
}
}
.service .row .row {
gap: 30px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.service .row .row {
gap: 20px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service .row .row {
gap: 20px 0;
}
}
.service__icon {
font-size: 52px;
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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: 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;
transition: all var(--tj-td-standard) ease-in-out 0s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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;
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);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.service__card:hover {
background: url("../img/service/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 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);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
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--3 {
padding: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.service--3 {
padding: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service--3 {
padding: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service--3 {
padding: 0;
}
}
.service--3 .section-heading__sub-title {
background-color: var(--tj-color-common-white);
}
.service--3 .service__inner {
position: relative;
z-index: 0;
background-color: var(--tj-color-theme-bg1);
border-radius: 24px;
padding: 120px 0;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.service--3 .service__inner {
padding: 100px 30px;
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service--3 .service__inner {
padding: 80px 30px;
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service--3 .service__inner {
padding: 60px 15px;
border-radius: 16px;
}
}
.service--3 .service__inner::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../img/funfact/funfact-bg.png") no-repeat top left;
border-radius: 24px;
z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.service--3 .service__inner::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service--3 .service__inner::after {
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service--3 .service__inner::after {
border-radius: 16px;
}
}
.service--3 .service__card::after {
background-color: var(--tj-color-common-white);
}
.service--3 .service__card:hover::after {
background-color: var(--tj-color-theme-secondary);
}
.service__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 30px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 15px;
padding-right: 15px;
}
@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: 992px) and (max-width: 1199px) {
.service__wrapper {
padding-left: 5px;
padding-right: 5px;
gap: 20px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper {
padding-left: 0;
padding-right: 0;
gap: 15px;
}
}
.service__wrapper .service__card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 15px;
background: var(--tj-color-common-white);
width: 250px;
height: 369px;
-webkit-box-align: center;
-ms-flex-align: center;
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: 992px) and (max-width: 1199px) {
.service__wrapper .service__card {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: calc(50% - 10px);
height: auto;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
gap: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: 991px) {
.service__wrapper .service__card {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper .service__card {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: auto;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
gap: 14px;
}
}
.service__wrapper .service__card::after {
display: none;
}
.service__wrapper .service__card .service__banner {
width: 0;
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
transition: all var(--tj-td-standard) ease-in-out 0s;
height: 100%;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
z-index: 1;
border-radius: 10px;
overflow: hidden;
}
.service__wrapper .service__card .service__banner a {
height: 100%;
}
.service__wrapper .service__card .service__banner img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (min-width: 992px) 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: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.service__wrapper .service__card .service__banner {
width: 51.4%;
-ms-flex-negative: 0;
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%;
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
transition: all var(--tj-td-standard) ease-in-out 0s;
padding-left: 10px;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-negative: 0;
flex-shrink: 0;
overflow: hidden;
}
.service__wrapper .service__card .service__content--main {
display: block;
visibility: hidden;
-webkit-transform: translateX(110%);
-ms-transform: translateX(110%);
transform: translateX(110%);
-webkit-transition-delay: 0.05s;
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: 992px) 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: 992px) and (max-width: 1199px) {
.service__wrapper .service__card .service__content {
padding-left: 0;
}
}
@media only screen and (min-width: 992px) 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;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-transition-delay: 0;
transition-delay: 0;
padding: 20px 10px 10px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service__wrapper .service__card .service__content {
display: none;
-ms-flex-negative: 1;
flex-shrink: 1;
padding-left: 15px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.service__wrapper .service__card .service__content--main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
visibility: visible;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-transition-delay: 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: 992px) 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) 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: 991px), 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: 992px) 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;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: none;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.service__wrapper .service__card.active .service__content--main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
visibility: visible;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
@media only screen and (min-width: 992px) 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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px;
}
.service__wrapper__2 .service__card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 45px 30px;
background: var(--tj-color-theme-bg1);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
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;
-ms-flex-negative: 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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
line-height: 1;
background-color: var(--tj-color-common-white);
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
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;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
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__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);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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;
}
}
.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__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__desc {
color: var(--tj-color-text-body);
}
.service__more {
margin-top: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__more {
margin-top: 35px;
}
}
/* !END: Service CSS */
/**----------------------------------------
START: Portfolio CSS
----------------------------------------*/
.portfolio__inner {
background-color: var(--tj-color-theme-bg1);
border-radius: 24px;
padding: 120px 0;
position: relative;
z-index: 0;
overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.portfolio__inner {
padding: 100px 0;
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio__inner {
padding: 80px 0;
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__inner {
padding: 60px 0;
border-radius: 16px;
}
}
.portfolio__inner::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../img/funfact/funfact-bg.png") no-repeat top left;
border-radius: 24px;
z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.portfolio__inner::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio__inner::after {
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__inner::after {
border-radius: 16px;
}
}
.portfolio__single {
border-radius: 16px;
position: relative;
overflow: hidden;
z-index: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: transparent;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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-common-white);
background-color: transparent;
color: var(--tj-color-common-white);
-webkit-transform: translateX(0) rotate(360deg) !important;
-ms-transform: translateX(0) rotate(360deg) !important;
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;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
-webkit-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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio__single__tag {
font-size: 14px;
border-radius: 4px;
margin-bottom: 12px;
}
}
@media 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 {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.portfolio__single__tag:hover span {
-webkit-transform: translateY(-24px);
-ms-transform: translateY(-24px);
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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 {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.portfolio__single:hover .portfolio__single__action a {
-webkit-transform: translateX(0) rotate(315deg);
-ms-transform: translateX(0) rotate(315deg);
transform: translateX(0) rotate(315deg);
opacity: 1;
}
.portfolio__single:hover .portfolio__single__content {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
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__inner {
padding: 258px 0 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.portfolio--2 .portfolio__inner {
padding: 200px 0 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio--2 .portfolio__inner {
padding: 166px 0 80px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--2 .portfolio__inner {
padding: 134px 0 60px;
}
}
.portfolio--2 .portfolio__inner::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50%;
background: url("../img/portfolio/bg-2.png") no-repeat bottom right;
border-radius: 24px;
z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.portfolio--2 .portfolio__inner::before {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio--2 .portfolio__inner::before {
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--2 .portfolio__inner::before {
border-radius: 16px;
}
}
.portfolio--2 .portfolio__single {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 30px;
margin-bottom: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--2 .portfolio__single {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.portfolio--2 .portfolio__single .tj-u-shape {
left: 50%;
top: 100%;
-webkit-transform: translateX(-50%) translateY(-15px) rotate(90deg);
-ms-transform: translateX(-50%) translateY(-15px) rotate(90deg);
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 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.portfolio--2 .portfolio__single:hover .portfolio__single__title a {
letter-spacing: inherit;
color: var(--tj-color-heading-primary);
}
.portfolio--2 .portfolio__single:hover .portfolio__single__title a:hover {
color: var(--tj-color-theme-primary);
}
.portfolio--2 .portfolio__single:hover .portfolio__single__tag {
color: var(--tj-color-theme-secondary);
}
.portfolio--2 .portfolio__single__img {
overflow: hidden;
border-radius: 10px;
height: 100%;
}
.portfolio--2 .portfolio__single__img img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.portfolio--2 .portfolio__single__content {
padding: 0;
position: static;
-webkit-transform: none;
-ms-transform: none;
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%;
-webkit-box-align: center;
-ms-flex-align: center;
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 {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.portfolio--2 .portfolio__single__tag {
color: var(--tj-color-theme-secondary);
background: var(--tj-color-theme-bg1);
}
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
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: 992px) and (max-width: 1199px) {
.portfolio--2 .portfolio__single__counter {
padding: 20px;
gap: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--2 .portfolio__single__counter {
-webkit-box-pack: stretch;
-ms-flex-pack: stretch;
justify-content: stretch;
padding: 15px;
gap: 12px;
}
}
@media (max-width: 575px) {
.portfolio--2 .portfolio__single__counter {
-webkit-box-pack: stretch;
-ms-flex-pack: stretch;
justify-content: stretch;
padding: 12px;
gap: 8px;
}
}
.portfolio--2 .portfolio__single__counter__item {
-webkit-box-flex: 0;
-ms-flex: 0 1 calc(33% - 11px);
flex: 0 1 calc(33% - 11px);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.portfolio--2 .portfolio__single__counter__item {
-webkit-box-flex: 0;
-ms-flex: 0 1 calc(33% - 6.5px);
flex: 0 1 calc(33% - 6.5px);
}
}
@media (max-width: 575px) {
.portfolio--2 .portfolio__single__counter__item {
-webkit-box-flex: 0;
-ms-flex: 0 1 calc(33% - 4.5px);
flex: 0 1 calc(33% - 4.5px);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: center;
-ms-flex-pack: 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-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 {
-webkit-transform: translateY(3px);
-ms-transform: translateY(3px);
transform: translateY(3px);
}
.portfolio--2 .pin-spacer:nth-child(2n) .portfolio__single__counter .number {
background: var(--tj-color-theme-bg2);
}
.portfolio--2 .pin-spacer:nth-child(2n) .portfolio__single__counter .number::after {
border-top-color: var(--tj-color-theme-bg2);
}
.portfolio--2 .pin-spacer:nth-child(3n) .portfolio__single__counter .number {
background: var(--tj-color-theme-bg6);
}
.portfolio--2 .pin-spacer:nth-child(3n) .portfolio__single__counter .number::after {
border-top-color: var(--tj-color-theme-bg6);
}
.portfolio--2 .pin-spacer:nth-child(4n) .portfolio__single__counter .number {
background: var(--tj-color-theme-bg7);
}
.portfolio--2 .pin-spacer:nth-child(4n) .portfolio__single__counter .number::after {
border-top-color: var(--tj-color-theme-bg7);
}
.portfolio--2 .pin-spacer:nth-child(5n) .portfolio__single__counter .number {
background: var(--tj-color-theme-bg5);
}
.portfolio--2 .pin-spacer: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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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%;
-o-object-fit: cover;
object-fit: cover;
}
.portfolio--3 .portfolio__single__content {
position: static;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
visibility: visible;
padding: 0;
padding-top: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
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 {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
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-theme-primary) !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;
-webkit-transform: none;
-ms-transform: none;
transform: none;
border-color: var(--tj-color-border-1);
color: var(--tj-color-heading-primary);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
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);
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
.portfolio--3 .portfolio__single:hover .portfolio__single__action a i {
color: var(--tj-color-common-white);
}
.portfolio--4 {
padding: 120px 0;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.portfolio--4 {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio--4 {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--4 {
padding: 60px 0;
}
}
.portfolio--4 .portfolio__single {
background-color: var(--tj-color-theme-bg1);
}
.portfolio--4 .portfolio__single__content {
-webkit-box-align: end;
-ms-flex-align: end;
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);
}
.portfolio--5 .section-heading .section-heading__sub-title {
background-color: rgba(255, 255, 255, 0.1019607843);
backdrop-filter: blur(20px);
color: var(--tj-color-common-white);
}
.portfolio--5 .section-heading .section-heading__sub-title::before {
background-color: var(--tj-color-common-white);
}
.portfolio--5 .section-heading .section-heading__title {
color: var(--tj-color-common-white);
}
.portfolio--5 .section-heading .tj-btn:hover {
border-color: var(--tj-color-common-white);
color: var(--tj-color-common-white);
}
.portfolio--5 .portfolio__pattern img {
position: absolute;
top: 74px;
left: 60px;
width: 134px;
z-index: 0;
}
@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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--5 .portfolio__pattern img {
top: 60px;
left: auto;
right: 60px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio--5 .portfolio__pattern img {
top: 40px;
width: 100px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--5 .portfolio__pattern img {
top: 20px;
width: 60px;
}
}
.portfolio--5 .portfolio__pattern img:last-child {
left: auto;
top: 35%;
right: 60px;
}
@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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--5 .portfolio__pattern img:last-child {
top: auto;
bottom: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio--5 .portfolio__pattern img:last-child {
width: 50px;
right: 35px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--5 .portfolio__pattern img:last-child {
width: 40px;
right: 35px;
}
}
.portfolio--6 .section-heading {
max-width: 420px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--6 .section-heading {
max-width: 100%;
}
}
.portfolio__wrapper--2 .portfolio__single {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 30px;
margin-bottom: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper--2 .portfolio__single {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.portfolio__wrapper--2 .portfolio__single .tj-u-shape {
left: 50%;
top: 100%;
-webkit-transform: translateX(-50%) translateY(-15px) rotate(90deg);
-ms-transform: translateX(-50%) translateY(-15px) rotate(90deg);
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 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
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%;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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;
-webkit-transform: none;
-ms-transform: none;
transform: none;
padding: 30px;
padding-right: 0;
opacity: 1;
visibility: visible;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.portfolio__wrapper--2 .portfolio__single__content {
padding: 30px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
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: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper--2 .portfolio__single__content__wrapper {
-ms-flex-wrap: wrap;
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 {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
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: 992px) 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: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 18px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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;
-ms-flex-wrap: wrap;
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__subtitle {
font-size: 12px;
line-height: 1;
margin-bottom: 8px;
text-transform: uppercase;
}
.portfolio__wrapper--2 .portfolio__single__info__title {
font-size: 16px;
line-height: 1;
font-weight: var(--tj-fw-sbold);
margin: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.portfolio__wrapper--2 .portfolio__single__info__title {
font-size: 14px;
}
}
.portfolio__wrapper--3 {
max-width: 757px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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%;
-o-object-fit: cover;
object-fit: cover;
}
.portfolio__wrapper--3 .portfolio__single__content {
position: static;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
visibility: visible;
padding: 0;
padding-top: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
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 {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
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 {
-webkit-animation: gelatine 0.5s linear;
animation: gelatine 0.5s linear;
}
.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;
-webkit-transform: none;
-ms-transform: none;
transform: none;
border: 0;
color: var(--tj-color-common-white);
background: var(--tj-color-theme-primary);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
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: 991px) {
.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);
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
.portfolio__wrapper--3 .portfolio__single:hover .portfolio__single__action a i {
color: var(--tj-color-common-white);
}
/* !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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: 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%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.custom-card::before {
left: -20px;
}
.custom-card::after {
right: -20px;
}
/* !END: Portfolio CSS */
/**----------------------------------------
START: Faq CSS
----------------------------------------*/
.faq {
padding: 120px 0;
position: relative;
overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.faq {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.faq {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.faq {
padding: 60px 0;
}
}
.faq .accordion {
width: 100%;
margin: 0 auto;
}
.faq .accordion-item {
position: relative;
z-index: 2;
-webkit-box-shadow: none;
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.faq .accordion-item {
margin-bottom: 15px;
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.faq .accordion-item {
margin-bottom: 12px;
border-radius: 10px;
}
}
@media (max-width: 575px) {
.faq .accordion-item {
font-size: 14px;
}
}
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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) {
.faq .accordion-item .faq-title {
font-size: 16px;
padding: 14px 36px 14px 16px;
}
}
@media (max-width: 575px) {
.faq .accordion-item .faq-title {
font-size: 18px;
}
}
.faq .accordion-item .faq-title::before {
content: "\e932";
position: absolute;
top: 35px;
right: 22px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
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;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.faq .accordion-item .faq-title::before {
top: 30px;
right: 24px;
font-size: 25px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.faq .accordion-item .faq-title::before {
font-size: 25px;
top: 24px;
right: 16px;
}
}
@media (max-width: 575px) {
.faq .accordion-item .faq-title::before {
font-size: 23px;
top: 30px;
right: 10px;
}
}
.faq .accordion-item__body {
padding: 20px 0 23px;
margin: 0 30px;
border-top: 1px solid transparent;
}
.faq .accordion-item__body P {
margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.faq .accordion-item__body {
font-size: 14px;
padding: 18px 0 20px;
margin: 0 24px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.faq .accordion-item__body {
font-size: 14px;
padding: 14px 0 16px;
margin: 0 16px;
}
}
@media (max-width: 575px) {
.faq .accordion-item__body {
font-size: 12px;
}
}
.faq .accordion-item:has(.faq-title:not(.collapsed)) {
background: var(--tj-color-theme-bg1);
}
.faq .accordion-item:has(.faq-title:not(.collapsed)) .faq-title::before {
content: "\e933";
}
.faq .accordion-item:has(.faq-title:not(.collapsed)) .faq-title {
color: var(--tj-color-theme-secondary);
}
.faq .accordion-item:last-child {
margin-bottom: 0;
}
.faq .accordion-item .accordion-item__body {
border-color: var(--tj-color-border-1);
}
.faq--2 {
padding: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.faq--2 {
padding: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.faq--2 {
padding: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.faq--2 {
padding: 0;
}
}
.faq--2 .section-heading__sub-title {
background-color: var(--tj-color-common-white);
}
.faq--2 .faq__inner {
position: relative;
z-index: 0;
background-color: var(--tj-color-theme-bg1);
border-radius: 24px;
padding: 120px 0;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.faq--2 .faq__inner {
padding: 100px 30px;
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.faq--2 .faq__inner {
padding: 80px 20px;
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.faq--2 .faq__inner {
padding: 60px 5px;
border-radius: 16px;
}
}
.faq--2 .faq__inner::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../img/funfact/funfact-bg.png") no-repeat top left;
border-radius: 24px;
z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.faq--2 .faq__inner::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.faq--2 .faq__inner::after {
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.faq--2 .faq__inner::after {
border-radius: 16px;
}
}
.faq--2 .accordion-item {
background-color: var(--tj-color-common-white);
}
.faq--2 .accordion-item:has(.faq-title:not(.collapsed)) {
background: var(--tj-color-common-white);
}
.faq--3 {
padding: 0;
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);
-webkit-transition: all var(--tj-td-standard) ease-in-out 0.3s;
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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.faq--3 {
padding: 0;
}
.faq--3 .section-heading__title {
font-size: 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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 {
-webkit-mask-image: url("../img/shapes/faq-img-bg.svg");
mask-image: url("../img/shapes/faq-img-bg.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-position: center;
mask-position: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
}
.tj-faq--2 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.tj-faq--2 .tj-faq__index {
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;
-webkit-transition: all var(--tj-td-standard) ease-in-out 0.3s;
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%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.tj-faq--2 .accordion-item:nth-child(2) {
top: 206px;
left: 100%;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-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%;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.tj-faq--2 .accordion-item:nth-child(5) {
top: calc(100% - 206px);
left: 100%;
-webkit-transform: translate(-100%, -100%);
-ms-transform: translate(-100%, -100%);
transform: translate(-100%, -100%);
}
.tj-faq--2 .accordion-item .faq-title {
padding: 23px 50px 23px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 4px;
line-height: 1.4;
}
.tj-faq--2 .accordion-item .faq-title::before {
top: 25px;
right: 20px;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
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%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -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";
-webkit-transform: translateY(0) rotate(45deg);
-ms-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg);
color: var(--tj-color-heading-primary);
}
@media only screen and (min-width: 992px) 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: 991px), 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;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.tj-faq--2 .accordion-item:nth-child(2) {
top: 186px;
left: auto;
right: 0;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
}
.tj-faq--2 .accordion-item:nth-child(3) {
top: 290px;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.tj-faq--2 .accordion-item:nth-child(4) {
top: auto;
bottom: 80px;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
}
.tj-faq--2 .accordion-item:nth-child(5) {
top: auto;
left: auto;
right: 0;
bottom: 188px;
-webkit-transform: translate(0);
-ms-transform: translate(0);
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;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
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: Process CSS
----------------------------------------*/
.process__inner {
background: url("../img/process/process-bg.png") no-repeat center;
background-size: cover;
border-radius: 24px;
padding: 120px 0;
position: relative;
overflow: hidden;
z-index: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.process__inner {
padding-left: 40px;
padding-right: 40px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.process__inner {
padding: 100px 30px;
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.process__inner {
padding: 80px 20px;
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__inner {
padding: 60px 5px;
border-radius: 16px;
}
}
.process__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: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.process__inner::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.process__inner::after {
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__inner::after {
border-radius: 16px;
}
}
.process__inner__pattern img {
position: absolute;
top: 80px;
left: 60px;
width: 134px;
z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.process__inner__pattern img {
top: 40px;
left: 40px;
width: 100px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__inner__pattern img {
top: 20px;
left: 20px;
width: 60px;
}
}
.process__inner__pattern img:last-child {
top: auto;
left: auto;
bottom: 60px;
right: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.process__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) {
.process__inner__pattern img:last-child {
width: 40px;
bottom: 20px;
right: 35px;
}
}
.process .section-heading__sub-title {
background-color: rgba(255, 255, 255, 0.1019607843);
backdrop-filter: blur(20px);
color: var(--tj-color-common-white);
}
.process .section-heading__sub-title::before {
background-color: var(--tj-color-common-white);
}
.process .section-heading__title {
color: var(--tj-color-common-white);
}
.process__single {
padding: 40px;
border-radius: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.process__single {
padding: 30px;
border-radius: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) and (max-width: 1199px) {
.process__sl {
font-size: 36px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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;
-webkit-transform: translateY(40px);
-ms-transform: translateY(40px);
transform: translateY(40px);
max-height: 135.2px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.process__img {
width: 250px;
max-height: 112.3px;
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.process__img {
max-width: 200px;
-webkit-transform: translateY(37px);
-ms-transform: translateY(37px);
transform: translateY(37px);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.process__img {
width: 100%;
margin-top: 10px;
-webkit-transform: translateY(21px);
-ms-transform: translateY(21px);
transform: translateY(21px);
text-align: center;
}
}
@media (max-width: 575px) {
.process__img {
width: 100%;
margin-top: 10px;
-webkit-transform: translateY(15px);
-ms-transform: translateY(15px);
transform: translateY(15px);
text-align: center;
}
}
.process__img--excution img {
-webkit-transform: translateY(-37px);
-ms-transform: translateY(-37px);
transform: translateY(-37px);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.process__img--excution img {
-webkit-transform: translateY(-31px);
-ms-transform: translateY(-31px);
transform: translateY(-31px);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.process__img--excution img {
-webkit-transform: translateY(-7px);
-ms-transform: translateY(-7px);
transform: translateY(-7px);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__img--excution img {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
grid-row: 3/4;
}
}
.process__content {
max-width: 366px;
color: var(--tj-color-border-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.process__content {
max-width: 320px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.process__desc {
font-size: 14px;
}
}
.process-2 {
padding: 120px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.process-2 {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.process-2 {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2 {
padding: 60px 0;
}
}
.process-2__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px 106px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 991px), 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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
outline: 7px solid var(--tj-color-common-white);
margin-bottom: 27px;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.process-2__title {
margin-bottom: 16px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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 {
-webkit-box-flex: 0;
-ms-flex: 0 1 calc(33.3333% - 70.668px);
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 {
-webkit-box-flex: 0;
-ms-flex: 0 1 calc(33.3333% - 33.34px);
flex: 0 1 calc(33.3333% - 33.34px);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__single {
-webkit-box-flex: 0;
-ms-flex: 0 1 calc(33.3333% - 20px);
flex: 0 1 calc(33.3333% - 20px);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__single {
-webkit-box-flex: 0;
-ms-flex: 0 1 calc(33.3333% - 13.5px);
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 {
-webkit-box-flex: 0;
-ms-flex: 0 1 100%;
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);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-mask-image: url("../img/icons/shape.svg");
mask-image: url("../img/icons/shape.svg");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: right;
mask-position: right;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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;
-webkit-transform: translateX(-50%) translateY(0) rotate(90deg);
-ms-transform: translateX(-50%) translateY(0) rotate(90deg);
transform: translateX(-50%) translateY(0) rotate(90deg);
}
}
.process-2__single__shape::before {
left: 0;
-webkit-transform: translateY(-50%) scale(-1);
-ms-transform: translateY(-50%) scale(-1);
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%;
-webkit-transform: translateX(-50%) translateY(-12px) rotate(-90deg);
-ms-transform: translateX(-50%) translateY(-12px) rotate(-90deg);
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;
-webkit-transform: translateX(-50%) translateY(12px) rotate(90deg);
-ms-transform: translateX(-50%) translateY(12px) rotate(90deg);
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%;
-webkit-transform: translate(56%, -50%);
-ms-transform: translate(56%, -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 {
-webkit-transform: translate(26%, -50%);
-ms-transform: translate(26%, -50%);
transform: translate(26%, -50%);
font-size: 9px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.process-2__single::after {
-webkit-transform: translate(3%, -50%);
-ms-transform: translate(3%, -50%);
transform: translate(3%, -50%);
font-size: 7px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process-2__single::after {
-webkit-transform: translate(-5%, -50%);
-ms-transform: translate(-5%, -50%);
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%;
-webkit-transform: translate(-47%, 60%) rotate(90deg);
-ms-transform: translate(-47%, 60%) rotate(90deg);
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 {
-webkit-animation: shakeAnimation 0.2s ease-out;
animation: shakeAnimation 0.2s ease-out;
}
.process-mockup {
position: relative;
z-index: 0;
max-width: 263px;
margin: 0 auto;
}
.process-mockup-wrapper {
max-width: 533px;
-webkit-margin-start: auto;
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: 991px), 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 {
-webkit-transition: none;
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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
max-width: 548px;
gap: 30px;
position: relative;
z-index: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
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: 992px) and (max-width: 1199px) {
.process__inner--2 .process-line {
right: -90px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__inner--2 .process-line {
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
outline: 10px solid var(--tj-color-theme-bg3);
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
position: absolute;
right: -97px;
top: 50%;
-webkit-transform: translate(100%, -50%);
-ms-transform: translate(100%, -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: 992px) and (max-width: 1199px) {
.process__inner--2 .process__index {
right: -60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__inner--2 .process__index {
top: -90px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
}
.process__inner--2 .process__title {
margin-bottom: 16px;
color: var(--tj-color-heading-primary);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.process__inner--2 .process__single {
padding: 30px 35px 33px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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 {
-webkit-animation: none;
animation: none;
}
/* !END: Process CSS */
/**----------------------------------------
START: Testimonials CSS
----------------------------------------*/
.testimonials {
padding: 120px 0;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.testimonials {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials {
padding: 60px 0;
}
}
.testimonials .section-heading--spacing {
margin-bottom: 40px;
}
.testimonials .section-heading__title {
margin-bottom: 0;
}
.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: 991px), 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 {
-webkit-transform: scaleX(-1) translateY(-10px);
-ms-transform: scaleX(-1) translateY(-10px);
transform: scaleX(-1) translateY(-10px);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__slider__item:hover .testimonials__qoute i {
-webkit-transform: scaleX(-1) translateY(0px);
-ms-transform: scaleX(-1) translateY(0px);
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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
left: 40px;
top: -30px;
z-index: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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;
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__qoute i {
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
}
}
@media (max-width: 575px) {
.testimonials__qoute i {
-webkit-transform: translateY(-1px);
-ms-transform: translateY(-1px);
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: 991px), 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: 991px), 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: 991px), 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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 12px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.testimonials__footer__logo {
width: 80px;
}
@media (max-width: 575px) {
.testimonials__footer__logo {
width: 60px;
}
}
.testimonials__author {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
@media (max-width: 575px) {
.testimonials__author {
gap: 8px;
}
}
.testimonials__author__avatar {
max-width: 54px;
border-radius: 8px;
border: 2px solid var(--tj-color-common-white);
overflow: hidden;
}
@media (max-width: 575px) {
.testimonials__author__avatar {
max-width: 44px;
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__inner {
position: relative;
z-index: 0;
background-color: var(--tj-color-theme-bg1);
border-radius: 24px;
overflow: hidden;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.testimonials--3 .testimonials__inner {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials--3 .testimonials__inner {
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--3 .testimonials__inner {
border-radius: 16px;
}
}
.testimonials--3 .testimonials__inner::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../img/funfact/funfact-bg.png") no-repeat top left;
border-radius: 24px;
z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.testimonials--3 .testimonials__inner::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials--3 .testimonials__inner::after {
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--3 .testimonials__inner::after {
border-radius: 16px;
}
}
.testimonials--3 .testimonials__slider__3 {
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 30px;
overflow: hidden;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding: 0 30px 45px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.testimonials--3 .testimonials__slider__wrapper {
padding: 0 30px 45px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials--3 .testimonials__slider__wrapper {
padding: 0 20px 35px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
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;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
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: 991px), 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__left {
max-width: 390px;
width: 100%;
height: 100%;
border-radius: 16px;
border-bottom-right-radius: 0;
overflow: hidden;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
height: 100%;
z-index: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 991px) {
.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: 991px), 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: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 12px;
border-top-left-radius: 16px;
-webkit-box-align: center;
-ms-flex-align: center;
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: 991px) {
.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);
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
position: absolute;
width: 16px;
height: 16px;
-webkit-transform: scale(-1);
-ms-transform: scale(-1);
transform: scale(-1);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 991px) {
.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: 991px) {
.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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: 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;
background: transparent;
width: 244px;
height: 244px;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials--3 .testimonials__qoute {
width: 200px;
height: 200px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--3 .testimonials__qoute {
width: 150px;
height: 150px;
}
}
.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;
-ms-hyphens: auto;
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: 991px), 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: 992px) and (max-width: 1199px) {
.testimonials--4 {
padding: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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__inner {
position: relative;
z-index: 0;
background-color: var(--tj-color-theme-bg1);
border-radius: 24px;
padding: 120px 0;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.testimonials--4 .testimonials__inner {
padding: 100px 30px;
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials--4 .testimonials__inner {
padding: 80px 30px;
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--4 .testimonials__inner {
padding: 60px 15px;
border-radius: 16px;
}
}
.testimonials--4 .testimonials__inner::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../img/funfact/funfact-bg.png") no-repeat top left;
border-radius: 24px;
z-index: -1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.testimonials--4 .testimonials__inner::after {
background-position: -101px -214px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.testimonials--4 .testimonials__inner::after {
border-radius: 20px;
background-position: -101px -214px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials--4 .testimonials__inner::after {
border-radius: 18px;
background-position: -101px -214px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials--4 .testimonials__inner::after {
border-radius: 16px;
background-position: -101px -214px;
}
}
.testimonials--4 .testimonials__inner .text-marquee-slider__wrap {
left: 29%;
}
.testimonials--4 .testimonials__inner .text-marquee-slider__title {
opacity: 0.7;
}
.testimonials--4 .testimonials__inner .text-marquee-slider__dot {
opacity: 0.7;
}
.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;
}
.testimonials__2 {
overflow: hidden;
}
.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: 991px), 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: 30px 20px 20px;
}
}
.testimonials__wrapper .testimonials__author {
margin-bottom: 24px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: 991px), 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 {
max-width: 480px;
margin-left: auto;
border-radius: 12px;
background-color: var(--tj-color-common-white);
overflow: hidden;
margin-top: -168px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__wrapper--2 {
margin-top: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__wrapper--2 {
margin-left: 0;
max-width: 100%;
margin-bottom: 50px;
}
}
.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: 991px), 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: 991px), 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: 991px), 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: Blog CSS
----------------------------------------*/
.blog__inner {
position: relative;
z-index: 0;
background-color: var(--tj-color-theme-bg1);
border-radius: 24px;
padding: 120px 0;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.blog__inner {
padding: 100px 30px;
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.blog__inner {
padding: 80px 20px;
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__inner {
padding: 60px 5px;
border-radius: 16px;
}
}
.blog__inner::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../img/funfact/funfact-bg.png") no-repeat top left;
border-radius: 24px;
z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.blog__inner::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.blog__inner::after {
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__inner::after {
border-radius: 16px;
}
}
.blog .row .row {
gap: 30px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog .row .row {
gap: 20px 0;
}
}
.blog .section-heading__sub-title {
background-color: var(--tj-color-common-white);
}
.blog__single {
border-radius: 16px;
position: relative;
overflow: hidden;
z-index: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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__banner a {
width: 100%;
}
.blog__single__banner img {
width: 100%;
}
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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 {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.blog__more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-top: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.blog__more {
padding-top: 45px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__more {
padding-top: 35px;
}
}
.blog--2 {
padding: 120px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.blog--2 {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.blog--2 {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog--2 {
padding: 60px 0;
}
}
.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));
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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%;
-o-object-fit: cover;
object-fit: cover;
}
}
.blog--2 .blog__single__title {
margin-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 24px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 16px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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%;
-webkit-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) 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: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
grid-template-columns: 1fr 1fr;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 575px) {
.blog--2 .blog__single:not(:first-child) {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.blog--2 .blog__single:not(:first-child) .blog__single__banner {
max-width: 323px;
width: 100%;
height: 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%;
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 575px) {
.blog--2 .blog__single:not(:first-child) .blog__single__banner {
max-width: calc(100% - 30px);
}
}
@media (max-width: 575px) {
.blog--2 .blog__single:not(:first-child) .blog__single__content {
padding: 20px;
padding-right: 16px;
}
}
.blog--3 {
padding: 120px 0;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.blog--3 {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.blog--3 {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog--3 {
padding: 60px 0;
}
}
.blog--3 .section-heading__sub-title {
background-color: var(--tj-color-theme-bg2);
}
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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 {
-webkit-box-shadow: var(--tj-shadow-theme-primary);
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.blog--3 .blog__single__content {
border-radius: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 24px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 16px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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%;
-webkit-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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;
}
.blog--4 .section-heading__sub-title {
background-color: var(--tj-color-theme-bg2);
}
.blog--4 .contaiter {
--bs-gutter-x: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog--4 .contaiter {
--bs-gutter-x: 20px;
}
}
.blog--4 .contaiter .row {
--bs-gutter-x: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog--4 .contaiter .row {
--bs-gutter-x: 20px;
}
}
.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: -webkit-gradient(linear, left top, left bottom, color-stop(36.56%, rgba(5, 23, 61, 0)), to(var(--tj-color-theme-dark)));
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%;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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;
-webkit-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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 24px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 16px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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%;
-webkit-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: 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: 991px), 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 {
-webkit-animation: texthover 0.3s linear;
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;
}
.blog--main {
padding: 120px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.blog--main {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.blog--main {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog--main {
padding: 60px 0;
}
}
.blog--main .blog__single {
background-color: transparent;
border-radius: 16px;
overflow: hidden;
}
@media (max-width: 575px) {
.blog--main .blog__single {
border-radius: 12px;
}
}
.blog--main .blog__single__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px;
}
.blog--main .blog__single__title {
margin-bottom: 20px;
font-size: 32px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.blog--main .blog__single__title {
font-size: 28px;
margin-bottom: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog--main .blog__single__title {
font-size: 25px;
margin-bottom: 16px;
}
}
.blog--main .blog__single__desc {
margin-bottom: 24px;
}
.blog--main .blog__single__content {
background: transparent;
padding: 30px;
border: 1px solid var(--tj-color-border-1);
border-top: 0;
border-radius: 16px;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog--main .blog__single__content {
padding: 20px;
}
}
@media (max-width: 575px) {
.blog--main .blog__single__content {
border-radius: 12px;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
}
.blog--main .blog__single__content__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 24px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 16px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.blog--main .blog__single__content__list {
margin-bottom: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog--main .blog__single__content__list {
margin-bottom: 12px;
}
}
.blog--main .blog__single__content__list li {
position: relative;
}
.blog--main .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%;
-webkit-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
transform: translate(10px, -50%);
}
.blog--main .blog__single__content__list li a:not(.blog__single__content__tag) {
color: var(--tj-color-text-body);
font-size: 14px;
}
.blog--main .blog__single__content__list li a:not(.blog__single__content__tag):hover {
color: var(--tj-color-theme-primary);
}
.blog--main .blog__single__content__list li:last-child::after {
display: none;
}
.blog--main .blog__single__content__tag {
font-family: var(--tj-ff-body);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: 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;
}
.blog--main .blog__single__content__tag:hover {
color: var(--tj-color-common-white) !important;
background-color: var(--tj-color-theme-secondary);
}
.blog__single__wrapper__2 {
display: grid;
gap: 30px;
grid-template-columns: repeat(auto-fill, minmax(calc(50% - 15px), 1fr));
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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: -webkit-box;
display: -ms-flexbox;
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 {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.blog__single__wrapper__2 .blog__single__banner {
border-radius: 10px;
max-width: 290px;
width: 100%;
height: 360px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.blog__single__wrapper__2 .blog__single__banner a {
height: 100%;
}
.blog__single__wrapper__2 .blog__single__banner a img {
height: 100%;
-o-object-fit: cover;
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: 992px) 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: 992px) and (max-width: 1199px) {
.blog__single__wrapper__2 .blog__single__title {
font-size: 24px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 100%;
}
@media only screen and (min-width: 992px) 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: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 24px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 10px;
}
.blog__single__wrapper__2 .blog__single__content__list li {
position: relative;
}
.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%;
-webkit-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: 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);
}
/* !END: Blog CSS */
/**----------------------------------------
START: Service Marquee CSS
----------------------------------------*/
.service-marquee {
padding: 85px 0 100px;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.service-marquee {
padding: 50px 0 70px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service-marquee {
padding: 35px 0 55px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service-marquee {
padding: 25px 0 45px;
}
}
.service-marquee__slider {
padding-bottom: 0;
}
.service-marquee__slider .swiper-wrapper {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.service-marquee__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 50px;
width: auto;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.service-marquee__item {
gap: 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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;
line-height: 1;
color: var(--tj-color-heading-primary);
letter-spacing: -1%;
margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.service-marquee__item .service-marquee__title {
font-size: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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;
-webkit-animation: rotateImg2 6s infinite linear;
animation: rotateImg2 6s infinite linear;
}
.service-marquee__item .service-marquee__img img {
width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.service-marquee__item .service-marquee__img {
width: 58px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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;
}
@-webkit-keyframes rotateImg2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes rotateImg2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-webkit-keyframes rotateImg3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotateImg3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* !END: Service Marquee CSS */
/**----------------------------------------
START: Strategy CSS
----------------------------------------*/
.strategy {
padding: 120px 0 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.strategy {
padding: 100px 0 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.strategy {
padding: 80px 0 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.strategy {
padding: 60px 0 0;
}
}
.strategy__tab__content__wrapper {
background: url("../img/strategy/bg.png") no-repeat center;
background-size: cover;
border-radius: 24px;
position: relative;
margin-top: 270px;
z-index: 0;
padding: 0 0 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.strategy__tab__content__wrapper {
padding: 0 0 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.strategy__tab__content__wrapper {
padding: 0 0 80px;
margin-top: 40px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.strategy__tab__content__wrapper {
padding: 0 0 60px;
margin-top: 35px;
}
}
.strategy__tab__content__wrapper::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: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.strategy__tab__content__wrapper::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.strategy__tab__content__wrapper::after {
border-radius: 16px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.strategy__tab__content__wrapper::after {
border-radius: 12px;
}
}
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 22.5px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: var(--tj-color-theme-dark4);
border-radius: 16px;
}
@media (max-width: 575px) {
.strategy__tab__slider__item button {
padding: 16px 8px 16px;
}
}
.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;
-webkit-transition: all 0.3s;
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:hover, .strategy .swiper-button-next:hover {
border-color: var(--tj-color-theme-secondary);
background: var(--tj-color-theme-secondary);
}
.strategy__about {
position: absolute;
top: -40%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -40%);
-ms-transform: translate(-50%, -40%);
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: 992px) and (max-width: 1199px) {
.strategy__about {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.strategy__about {
padding: 80px 20px;
border-radius: 16px;
position: static;
-webkit-transform: translate(0);
-ms-transform: translate(0);
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;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
margin-top: 15px;
}
}
.strategy__about::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../img/about/bg-2.png") no-repeat bottom right;
border-radius: 24px;
z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.strategy__about::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.strategy__about__wrapper .about__banner {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) and (max-width: 1199px) {
.strategy__services {
padding-top: 370px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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__sub-title {
border-color: var(--tj-color-common-white);
color: var(--tj-color-common-white);
}
.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 a {
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-color: rgba(255, 255, 255, 0.1019607843);
backdrop-filter: blur(20px);
color: var(--tj-color-common-white);
}
.team .section-heading__sub-title::before {
background-color: var(--tj-color-common-white);
}
.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__inner {
background: url("../img/process/process-bg.png") no-repeat center;
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) {
.team__inner {
padding-left: 40px;
padding-right: 40px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.team__inner {
padding: 100px 30px;
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.team__inner {
padding: 80px 20px;
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team__inner {
padding: 60px 5px;
border-radius: 16px;
}
}
.team__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: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.team__inner::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.team__inner::after {
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team__inner::after {
border-radius: 16px;
}
}
.team__inner__pattern img {
position: absolute;
top: 80px;
left: 60px;
width: 134px;
z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.team__inner__pattern img {
top: 40px;
left: 40px;
width: 100px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team__inner__pattern img {
top: 20px;
left: 20px;
width: 60px;
}
}
.team__inner__pattern img:last-child {
top: auto;
left: auto;
bottom: 60px;
right: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.team__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) {
.team__inner__pattern img:last-child {
width: 40px;
bottom: 20px;
right: 35px;
}
}
.team__socials {
position: absolute;
top: 7px;
left: 7px;
bottom: 7px;
right: 7px;
background-color: var(--tj-color-theme-dark4);
border-radius: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.team__socials .tj-socials--sm {
-webkit-transform: translateY(-40px);
-ms-transform: translateY(-40px);
transform: translateY(-40px);
-webkit-transition: all 0.3s;
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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: 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 img {
border-radius: 16px;
width: 100%;
}
.team__single__title {
font-size: 20px;
text-align: center;
}
.team__single__title:hover a {
color: var(--tj-color-common-white);
}
.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 {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.team--main {
padding: 120px 0;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.team--main {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.team--main {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team--main {
padding: 60px 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 {
padding: 120px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.team-details {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.team-details {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details {
padding: 60px 0;
}
}
.team-details__img img {
border-radius: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details__img img {
border-radius: 16p;
}
}
.team-details__content {
padding-left: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details__content {
margin-top: 30px;
padding-left: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details__content {
margin-top: 20px;
}
}
.team-details .team-details__subtitle {
margin-bottom: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details .team-details__subtitle {
margin-bottom: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details__name {
font-size: 36px;
margin-bottom: 8px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details__name {
font-size: 30px;
margin-bottom: 8px;
}
}
.team-details__desig {
margin-bottom: 20px;
color: var(--tj-color-theme-dark3);
display: inline-block;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details__desig {
margin-bottom: 8px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details__desig {
margin-bottom: 8px;
}
}
.team-details__contact-info ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: 1px solid var(--tj-color-border-1);
margin: 25px 0;
border-radius: var(--tj-br-md);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details__contact-info ul {
margin: 20px 0;
}
}
.team-details__contact-info ul li {
-webkit-box-flex: 1;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding: 25px 28px;
border-right: 1px solid var(--tj-color-border-1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.team-details__contact-info ul li:last-child {
border-right: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details__contact-info ul li {
padding: 16px 18px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.team-details__contact-info ul span {
color: var(--tj-color-theme-dark3);
display: inline-block;
}
.team-details__contact-info ul 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: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details__contact-info ul a {
font-size: 14px;
}
}
.team-details__contact-info ul a:hover {
color: var(--tj-color-theme-primary);
}
.team-details__experience {
margin-top: 40px;
margin-bottom: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details__experience {
margin-top: 24px;
margin-bottom: 24px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team-details__experience {
margin-top: 20px;
margin-bottom: 20px;
}
}
.team-details__experience__list ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: 1px solid var(--tj-color-border-1);
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 25px 0;
border-radius: var(--tj-br-md);
}
.team-details__experience__list ul li {
-webkit-box-flex: 1;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding: 25px;
display: -webkit-box;
display: -ms-flexbox;
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: 991px), 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 {
padding: 120px 0;
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.package {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.package {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package {
padding: 60px 0;
}
}
.package .section-heading {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: end;
}
@media (max-width: 575px) {
.package .section-heading {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
gap: 20px 0;
}
}
.package .section-heading__title {
margin-bottom: 0;
}
.package__tab__controllers {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding: 6px;
background: var(--tj-color-theme-bg1);
border: 1px solid var(--tj-color-border1);
border-radius: 100px;
gap: 0px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package__tab__controllers {
padding: 5px;
}
}
.package__tab__controller {
background: transparent;
color: var(--tj-color-heading-primary);
font-size: 16px;
padding: 16px 20px;
border-radius: 50px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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: var(--tj-color-theme-secondary);
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: 992px) and (max-width: 1199px) {
.package__single {
padding: 25px;
border-radius: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.package__single {
padding: 25px 20px 20px;
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package__single {
padding: 22px 15px 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);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
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: 992px) and (max-width: 1199px) {
.package__name {
font-size: 22px;
margin-bottom: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
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: 992px) and (max-width: 1199px) {
.package__price {
font-size: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-inline-box;
display: -ms-inline-flexbox;
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: 992px) and (max-width: 1199px) {
.package__price__type {
font-size: 14px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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__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 .tj-btn--full {
margin-bottom: 30px;
border-color: var(--tj-color-theme-dark);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.package .tj-btn--full {
margin-bottom: 25px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.package .tj-btn--full {
margin-bottom: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package .tj-btn--full {
margin-bottom: 20px;
}
}
.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: 992px) and (max-width: 1199px) {
.package__features {
padding: 25px;
border-radius: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.package__features {
padding: 20px 15px 20px 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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
font-family: var(--tj-ff-heading);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.package__features ul {
gap: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
font-weight: var(--tj-fw-medium);
}
.package__features ul li::before {
content: "\e90e";
color: var(--tj-color-theme-dark3);
font-family: var(--tj-ff-ranko-icons);
font-size: 14px;
}
.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::before {
content: "\e90e";
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 {
padding: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.package--2 {
padding: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.package--2 {
padding: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package--2 {
padding: 0;
}
}
.package--2 .section-heading__sub-title {
background-color: var(--tj-color-common-white);
}
.package--2 .package__inner {
position: relative;
z-index: 0;
background-color: var(--tj-color-theme-bg1);
border-radius: 24px;
padding: 120px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.package--2 .package__inner {
padding: 100px 30px;
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.package--2 .package__inner {
padding: 80px 30px;
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package--2 .package__inner {
padding: 60px 15px;
border-radius: 16px;
}
}
.package--2 .package__inner::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../img/funfact/funfact-bg.png") no-repeat top left;
border-radius: 24px;
z-index: -1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.package--2 .package__inner::after {
display: none;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.package--2 .package__inner::after {
border-radius: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.package--2 .package__inner::after {
border-radius: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package--2 .package__inner::after {
border-radius: 16px;
}
}
.package--2 .package__inner .text-marquee-slider__wrap {
left: 29%;
}
.package--2 .package__inner .text-marquee-slider__title {
opacity: 0.7;
}
.package--2 .package__inner .text-marquee-slider__dot {
opacity: 0.7;
}
.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--3 .section-heading {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 575px) {
.package--3 .section-heading {
gap: 0;
}
}
.package--3 .section-heading .package__tab__controllers {
margin-top: 24px;
}
.package__single--2.package__single--recommended {
background: -webkit-gradient(linear, left top, left bottom, from(var(--tj-color-theme-primary)), to(var(--tj-color-theme-secondary)));
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: 992px) and (max-width: 1199px) {
.award {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 991px) {
.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: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 32px;
padding-left: 48px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.award__content__list {
gap: 24px;
padding-left: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 15px;
padding-bottom: 7px;
position: relative;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.award__content__list__item::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 1px;
background-color: var(--tj-color-border-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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::before {
background-color: var(--tj-color-theme-dark);
-webkit-animation: linehover 0.8s linear;
animation: linehover 0.8s linear;
}
.award__content__list__item__right {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
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;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 10px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
line-height: 1.4;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px) {
.tj-blog-section {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 992px) and (max-width: 1199px) {
.tj-blog-section .faq {
padding: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: 991px) {
.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 {
margin-bottom: 30px;
}
.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: 991px) {
.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 ul {
margin-bottom: 50px;
list-style: none;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
.post-details-wrapper .blog-text ul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
color: var(--tj-color-heading-primary);
margin-bottom: 16px;
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-sbold);
}
.post-details-wrapper .blog-text ul li:last-child {
margin-bottom: 0;
}
.post-details-wrapper .blog-text ul li span {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 20px;
height: 20px;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
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) {
.post-details-wrapper .blog-text ul {
margin-bottom: 30px;
-webkit-columns: 1;
-moz-columns: 1;
columns: 1;
}
}
.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: 991px) {
.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;
}
}
.post-details-wrapper .blog-text .blog-video .video-btn {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 50%;
}
.post-details-wrapper .blog-text .blog-video .video-btn span {
font-size: 20px;
}
.post-details-wrapper .blog-text .blog-video .video-btn::before {
position: absolute;
content: "";
left: 50%;
top: 50%;
width: 90px;
height: 90px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.2);
-webkit-animation: pulse-2 2s linear infinite;
animation: pulse-2 2s linear infinite;
z-index: -1;
border-radius: 50%;
}
@media only screen and (min-width: 768px) and (max-width: 991px), 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;
}
}
.blog-category-two {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
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%;
-o-object-fit: cover;
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: 991px), 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: 992px) 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: 991px), 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: 992px) and (max-width: 1199px) {
.blog-category-two .category-item .cate-text .title {
font-size: 14px;
}
}
.blog-category-two .category-item .cate-icons {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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: 991px), 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: 992px) 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: 991px), 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: 992px) 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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 {
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: 991px) {
blockquote {
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
blockquote {
border-radius: 10px;
}
}
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 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 p {
font-size: 20px;
margin-bottom: 15px !important;
}
}
blockquote cite {
color: var(--tj-color-heading-primary);
display: block;
text-align: end;
font-style: normal;
position: relative;
z-index: 1;
}
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 {
padding: 25px 15px;
margin-bottom: 40px;
}
}
.tj-tags-post {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
row-gap: 20px;
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
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: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-column-gap: 15px;
-moz-column-gap: 15px;
column-gap: 15px;
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: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 17px;
line-height: 1;
color: var(--tj-color-heading-primary);
}
.tj-tags-post .post-share > ul li a i {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
line-height: 1;
}
.tj-tags-post .post-share > ul li a:hover i {
color: var(--tj-color-theme-secondary);
}
.tj-tags-post.no_socials {
width: 100%;
}
.tj-post__navigation {
background-color: var(--tj-color-theme-bg1);
background-blend-mode: luminosity;
padding: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 25px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 50px;
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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-nav-post__nav a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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-nav-post__nav a span {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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;
transition: all 0.3s ease-in-out 0s;
}
.tj-post__navigation .tj-nav-post__nav a span i {
color: var(--tj-color-common-white);
}
.tj-post__navigation .tj-nav-post__nav a:hover span {
background-color: var(--tj-color-theme-primary);
}
.tj-post__navigation .tj-nav-post__nav a:hover span i {
color: var(--tj-color-common-white);
}
.tj-post__navigation .tj-nav-post__grid {
font-size: 40px;
line-height: 1;
color: var(--tj-color-common-black);
}
@media (max-width: 575px) {
.tj-post__navigation {
padding: 20px;
}
}
.tj-comments-wrap .comments-title .title {
margin-bottom: 22px;
}
@media (max-width: 575px) {
.tj-comments-wrap .comments-title .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 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 12px;
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%;
}
.tj-latest-comments ul .tj-comment .comment-content .comment-avatar img {
width: 100%;
border-radius: 100%;
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header {
margin-top: 10px;
}
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text .reply {
position: absolute;
top: 35px;
right: 30px;
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: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 {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.tj-latest-comments ul .tj-comment .comment-content .comment-avatar {
margin-right: 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: 25px;
}
.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])::-webkit-input-placeholder, .comment-respond .form-input textarea::-webkit-input-placeholder, .comment-respond .form-input input[type=email]::-webkit-input-placeholder, .comment-respond .form-input input[type=text]::-webkit-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])::-moz-placeholder, .comment-respond .form-input textarea::-moz-placeholder, .comment-respond .form-input input[type=email]::-moz-placeholder, .comment-respond .form-input input[type=text]::-moz-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])::-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])::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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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;
z-index: 3;
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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;
}
.tj-sidebar-widget.widget-search .search-box form {
position: relative;
width: 100%;
z-index: 1;
}
.tj-sidebar-widget.widget-search .search-box form input[type=search] {
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-sidebar-widget.widget-search .search-box form input[type=search]::-webkit-input-placeholder {
color: var(--tj-color-text-body);
}
.tj-sidebar-widget.widget-search .search-box form input[type=search]::-moz-placeholder {
color: var(--tj-color-text-body);
}
.tj-sidebar-widget.widget-search .search-box form input[type=search]:-ms-input-placeholder {
color: var(--tj-color-text-body);
}
.tj-sidebar-widget.widget-search .search-box form input[type=search]::-ms-input-placeholder {
color: var(--tj-color-text-body);
}
.tj-sidebar-widget.widget-search .search-box form input[type=search]::placeholder {
color: var(--tj-color-text-body);
}
.tj-sidebar-widget.widget-search .search-box form input[type=search]::-ms-input-placeholder {
color: var(--tj-color-text-body);
}
.tj-sidebar-widget.widget-search .search-box form :focus {
outline: none;
-webkit-box-shadow: 0 0 0;
box-shadow: 0 0 0;
}
.tj-sidebar-widget.widget-search .search-box form button {
font-size: 24px;
color: var(--tj-color-heading-primary);
width: 54px;
height: 60px;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-left: 1px solid var(--tj-color-heading-primary);
-webkit-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.tj-sidebar-widget.widget-search .search-box form button i {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
padding-top: 8px;
line-height: 1;
}
.tj-sidebar-widget.tj-recent-posts ul {
margin: 0;
padding: 0;
list-style: none;
}
.tj-sidebar-widget.tj-recent-posts ul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-column-gap: 15px;
-moz-column-gap: 15px;
column-gap: 15px;
margin-bottom: 15px;
}
.tj-sidebar-widget.tj-recent-posts ul li:last-child {
margin-bottom: 0;
}
.tj-sidebar-widget.tj-recent-posts ul li:hover .post-thumb img {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.tj-sidebar-widget.tj-recent-posts .post-thumb {
position: relative;
max-width: 100px;
width: 100%;
overflow: hidden;
border-radius: 10px;
}
.tj-sidebar-widget.tj-recent-posts .post-thumb a {
display: inline-block;
width: 100%;
}
.tj-sidebar-widget.tj-recent-posts .post-thumb a img {
width: 100%;
height: 100px;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: 0.6s;
transition: 0.6s;
}
.tj-sidebar-widget.tj-recent-posts .post-content .post-title {
font-size: 16px;
line-height: 1.5;
text-transform: capitalize;
margin-bottom: 10px;
}
.tj-sidebar-widget.tj-recent-posts .post-content .post-title a:hover {
color: var(--tj-color-theme-primary);
}
.tj-sidebar-widget.tj-recent-posts .post-content .blog-meta {
margin-bottom: 0;
}
.tj-sidebar-widget.tj-recent-posts .post-content .blog-meta ul li {
font-size: 14px;
color: var(--tj-color-text-body);
}
.tj-sidebar-widget.widget-categories ul {
margin: 0;
padding: 0;
list-style: none;
}
.tj-sidebar-widget.widget-categories ul li {
margin-bottom: 10px;
}
.tj-sidebar-widget.widget-categories ul li:last-child {
margin-bottom: 0;
}
.tj-sidebar-widget.widget-categories ul li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
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: 991px) {
.tj-sidebar-widget.widget-categories ul li a {
border-radius: 9px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-sidebar-widget.widget-categories ul li a {
border-radius: 8px;
}
}
.tj-sidebar-widget.widget-categories ul li a span {
color: var(--tj-color-heading-primary);
}
.tj-sidebar-widget.widget-categories ul li a .icon {
font-size: 24px;
line-height: 1;
}
.tj-sidebar-widget.widget-categories ul li a:hover, .tj-sidebar-widget.widget-categories ul li a.active {
color: var(--tj-color-common-white);
background-color: var(--tj-color-theme-primary);
}
.tj-sidebar-widget.widget-categories ul li a:hover span, .tj-sidebar-widget.widget-categories ul li a.active span {
color: var(--tj-color-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) {
.tj-sidebar-widget {
padding: 25px 15px;
}
}
.tagcloud {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
row-gap: 12px;
}
.tagcloud a {
background-color: var(--tj-color-common-white);
font-size: 16px;
text-transform: capitalize;
line-height: 1;
color: var(--tj-color-heading-primary);
font-weight: var(--tj-fw-medium);
padding: 5px 10px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
overflow: hidden;
border-radius: 6px;
}
.tagcloud a:hover {
background-color: var(--tj-color-theme-secondary);
color: var(--tj-color-common-white);
}
.infos-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: 8px;
-moz-column-gap: 8px;
column-gap: 8px;
padding: 17px 20px;
background-color: var(--tj-color-common-white);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 10px;
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 40px;
height: 40px;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
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: 992px) 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: 991px) {
.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: 992px) 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: 992px) 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: 992px) 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: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-column-gap: 15px;
-moz-column-gap: 15px;
column-gap: 15px;
row-gap: 15px;
-webkit-box-align: center;
-ms-flex-align: center;
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;
max-width: 275px;
width: 100%;
border-radius: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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: 1200px) and (max-width: 1399px) {
.service-details-item {
max-width: 235px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service-details-item {
max-width: 220px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.service-details-item {
max-width: 250px;
padding: 30px 15px 15px 15px;
}
}
@media (max-width: 575px) {
.service-details-item {
max-width: 100%;
}
}
.blog-text .tj-faq {
margin-bottom: 40px;
padding-top: 10px;
}
.images-wrap--gallary .image-box:hover img {
position: relative;
z-index: -1;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.gallery {
position: relative;
display: block;
}
.gallery::before {
content: "\e922";
font-family: "ranko-icons" !important;
color: var(--tj-color-common-white);
font-size: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.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: 992px) and (max-width: 1199px) {
.error {
padding: 186px 0 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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: 992px) and (max-width: 1199px) {
.error .section-heading__title {
font-size: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.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;
}
/* !END: demo/assets/sass/layout/_faq.scss */
/**----------------------------------------
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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: -webkit-gradient(linear, right top, left top, color-stop(1.37%, var(--tj-color-theme-primary)), color-stop(63.36%, var(--tj-color-theme-secondary)));
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;
}
}
@-webkit-keyframes pulseImg {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes pulseImg {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
/* !END: Theme Marquee CSS */
/**----------------------------------------
START: Features CSS
----------------------------------------*/
.features .section-heading {
margin-bottom: 35px;
}
.features__banner__img {
margin-top: -74px;
max-width: 481px;
position: relative;
z-index: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.features__banner__img {
margin: 50px auto 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.features__banner__img {
margin: 40px auto 0;
}
}
.features__progress {
position: absolute;
bottom: 45px;
right: 53px;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.features__progress {
-webkit-transform: translateX(20%);
-ms-transform: translateX(20%);
transform: translateX(20%);
}
}
@media (max-width: 575px) {
.features__progress {
bottom: 20px;
}
.features__progress .progress-circle__inner {
width: 90px;
height: 90px;
}
.features__progress .progress-circle__inner input {
margin-top: 26px !important;
margin-left: -74px !important;
font-size: 20px !important;
}
.features__progress canvas {
width: 100% !important;
height: 100% !important;
}
}
.features__satisfaction {
padding: 10px;
background-color: var(--tj-color-common-white);
border-radius: 6px;
-webkit-box-shadow: 0px 11.54px 30.78px -1.92px var(--tj-color-theme-dark5);
box-shadow: 0px 11.54px 30.78px -1.92px var(--tj-color-theme-dark5);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 235px;
left: -70px;
gap: 2px;
z-index: 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: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.features__satisfaction {
left: -10px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.features__satisfaction {
top: 152px;
}
}
@media (max-width: 575px) {
.features__satisfaction {
top: 160px;
}
}
.features__satisfaction i {
font-size: 22px;
color: var(--tj-color-theme-primary);
}
.features__satisfaction__title {
font-size: 16px;
line-height: 1.5;
font-weight: var(--tj-fw-sbold);
margin-bottom: 0;
}
/* !END: Features CSS */
/**----------------------------------------
START: Client CSS
----------------------------------------*/
.tj-client-section {
overflow: hidden;
}
.tj-client-section .swiper {
padding-bottom: 0;
}
.client-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
margin-bottom: 60px;
}
.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 span {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.client-content .client-numbers {
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 .client-numbers img {
position: absolute;
right: 100%;
bottom: 100%;
-webkit-transform: translate(5px, 5px);
-ms-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
.client-content .client-text {
color: var(--tj-color-text-body-3);
position: relative;
}
@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-slider .swiper-wrapper {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.client-item {
width: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-padding-end: 30px;
padding-inline-end: 30px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.client-item {
-webkit-padding-end: 20px;
padding-inline-end: 20px;
}
}
.client-logo {
width: 284px;
height: 120px;
background-color: var(--tj-color-common-white);
border: 1px solid var(--tj-color-border-1);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: 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;
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
transition: all var(--tj-td-standard) ease-in-out 0s;
z-index: -1;
}
.client-logo-bg img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 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;
-webkit-mask-image: url("../img/shapes/cta-text-bg.svg");
mask-image: url("../img/shapes/cta-text-bg.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
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: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 27px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: var(--tj-fw-sbold);
line-height: 1;
}
.cta__video__btn .tj-btn--popup {
width: 82px;
height: 82px;
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
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 {
-webkit-transform: translateX(0) scale(1.1);
-ms-transform: translateX(0) scale(1.1);
transform: translateX(0) scale(1.1);
}
.cta__video__btn:hover .tj-btn__text {
letter-spacing: 0.01em;
}
.cta__banner {
width: 117.4%;
position: relative;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(76.22%, #ffffff), to(rgba(255, 255, 255, 0)));
-webkit-mask-image: linear-gradient(180deg, #ffffff 76.22%, rgba(255, 255, 255, 0) 100%);
mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(76.22%, #ffffff), to(rgba(255, 255, 255, 0)));
mask-image: linear-gradient(180deg, #ffffff 76.22%, rgba(255, 255, 255, 0) 100%);
}
.cta__action {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
text-align: center;
gap: 7px;
color: var(--tj-color-common-white);
}
.cta__action__wrapper {
position: absolute;
left: 50%;
bottom: 100px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
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);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cta__action .tj-btn--underline::before {
bottom: 2px;
right: 26px;
}
.cta__action .tj-btn--underline:hover::before {
-webkit-animation-name: linehover2;
animation-name: linehover2;
}
.cta__action .tj-btn--underline:hover i {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.cta__shape {
position: absolute;
width: 616px;
height: 616px;
background: -webkit-gradient(linear, left top, left bottom, from(var(--tj-color-theme-primary)), to(var(--tj-color-theme-secondary)));
background: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, var(--tj-color-theme-secondary) 100%);
-webkit-filter: blur(120px);
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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), 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: 992px) 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: 991px) {
.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: Header CSS
----------------------------------------*/
.header--6 {
max-width: 100%;
left: 30px;
right: 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.header--6 {
left: 15px;
right: 15px;
margin-left: 0;
margin-right: 0;
}
}
.header--6 .mainmenu {
margin-left: 0;
}
/* !END: Header CSS */
/**----------------------------------------
START: Footer CSS
----------------------------------------*/
.footer--6 .footer__inner {
background: transparent;
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
.footer--6 .footer__inner::after {
display: none;
}
.footer--6 .footer__top {
padding-bottom: 75px;
}
.footer--6 .footer__top__title {
color: var(--tj-color-theme-dark);
font-size: 70px;
line-height: 1.114;
margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.footer--6 .footer__top__title {
font-size: 60px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--6 .footer__top__title {
font-size: 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--6 .footer__top__title {
font-size: 40px;
}
}
.footer--6 .footer__top .hero__subscription {
margin-bottom: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--6 .footer__top .hero__subscription {
margin-bottom: 20px;
}
}
.footer--6 .footer__top .tj-input__wrapper {
padding: 6px;
}
.footer--6 .footer__top .tj-input__wrapper .tj-input {
padding: 14px 18px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--6 .footer__top .tj-input__wrapper .tj-input {
padding: 12px;
}
}
.footer--6 .footer__top .tj-input__wrapper .tj-btn {
padding: 17px 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--6 .footer__top .tj-input__wrapper .tj-btn {
padding: 15px;
}
}
.footer--6 .footer__top__list li {
color: var(--tj-color-theme-dark);
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-sbold);
letter-spacing: -0.02em;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--6 .footer__top {
padding-bottom: 50px;
}
}
.footer--6 .footer__main {
padding-top: 100px;
padding-bottom: 35px;
border-top: 1px solid var(--tj-color-border-11);
border-bottom: 1px solid var(--tj-color-border-11);
overflow: hidden;
position: relative;
z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--6 .footer__main {
padding-top: 60px;
padding-bottom: 0;
}
}
.footer--6 .footer__widget__wrapper--2 .footer__title {
color: var(--tj-color-theme-dark);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--6 .footer__widget__wrapper--2 .footer__title {
margin-bottom: 30px;
}
}
.footer--6 .footer__widget__wrapper--2 .footer__widget .tj-socials ul li {
line-height: 1;
}
.footer--6 .footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li a {
color: var(--tj-color-theme-dark);
}
.footer--6 .footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li a:hover {
color: var(--tj-color-theme-primary);
}
.footer--6 .footer__widget__wrapper--2 .footer__widget--company, .footer--6 .footer__widget__wrapper--2 .footer__widget--services {
margin-left: 0;
position: relative;
}
.footer--6 .footer__widget__wrapper--2 .footer__widget--company::after, .footer--6 .footer__widget__wrapper--2 .footer__widget--company::before, .footer--6 .footer__widget__wrapper--2 .footer__widget--services::after, .footer--6 .footer__widget__wrapper--2 .footer__widget--services::before {
content: "";
display: block;
width: 1px;
height: 1000%;
background-color: var(--tj-color-border-11);
position: absolute;
top: -300%;
}
.footer--6 .footer__widget__wrapper--2 .footer__widget--company::before, .footer--6 .footer__widget__wrapper--2 .footer__widget--services::before {
left: -74px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.footer--6 .footer__widget__wrapper--2 .footer__widget--company::before, .footer--6 .footer__widget__wrapper--2 .footer__widget--services::before {
left: -44px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer--6 .footer__widget__wrapper--2 .footer__widget--company::before, .footer--6 .footer__widget__wrapper--2 .footer__widget--services::before {
left: -65px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--6 .footer__widget__wrapper--2 .footer__widget--company::before, .footer--6 .footer__widget__wrapper--2 .footer__widget--services::before {
left: -100%;
width: 1000%;
height: 1px;
top: 0;
}
}
.footer--6 .footer__widget__wrapper--2 .footer__widget--company::after, .footer--6 .footer__widget__wrapper--2 .footer__widget--services::after {
right: -60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.footer--6 .footer__widget__wrapper--2 .footer__widget--company::after, .footer--6 .footer__widget__wrapper--2 .footer__widget--services::after {
right: -40px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.footer--6 .footer__widget__wrapper--2 .footer__widget--company::after, .footer--6 .footer__widget__wrapper--2 .footer__widget--services::after {
display: none;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--6 .footer__widget__wrapper--2 .footer__widget--company::after, .footer--6 .footer__widget__wrapper--2 .footer__widget--services::after {
left: -100%;
width: 1000%;
height: 1px;
top: auto;
bottom: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--6 .footer__widget__wrapper--2 .footer__widget--company, .footer--6 .footer__widget__wrapper--2 .footer__widget--services {
padding: 40px 0 26px 0;
}
}
.footer--6 .footer__widget__wrapper--2 .footer__widget--company::before {
display: none;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--6 .footer__widget__wrapper--2 .footer__widget--company {
padding: 0 0 26px 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.footer--6 .footer__widget__wrapper--2 .footer__widget {
width: 100%;
max-width: calc(45% - 20px);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--6 .footer__widget__wrapper--2 .footer__widget {
margin-bottom: 40px;
}
}
.footer--6 .footer__widget__wrapper--2 .footer__info .footer__info__active-hours ul li, .footer--6 .footer__widget__wrapper--2 .footer__info .footer__info__list ul li .link, .footer--6 .footer__widget__wrapper--2 .footer__info .footer__info__address {
color: var(--tj-color-theme-dark);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--6 .footer__widget__wrapper--2 .footer__info {
margin-top: 0;
}
}
.footer--6 .footer__copyright__wrapper {
border: 0;
margin: 0;
}
/* !END: Footer CSS */
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.hero--7 .hero__inner {
min-height: 840px;
padding-top: 146px;
padding-bottom: 30px;
-webkit-padding-start: 15px;
padding-inline-start: 15px;
-webkit-padding-end: 15px;
padding-inline-end: 15px;
}
@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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--7 .hero__inner {
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-end: 0;
padding-inline-end: 0;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--7 .hero__inner {
min-height: inherit;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero--7 .hero__inner {
padding-top: 140px;
}
}
@media (max-width: 575px) {
.hero--7 .hero__inner {
padding-top: 120px;
}
}
.hero--7 .hero__left {
min-height: inherit;
z-index: 1;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
}
@media only screen and (min-width: 1701px) {
.hero--7 .hero__left {
width: calc(100% + 20px);
}
}
.hero--7 .hero__banner-img {
position: relative;
bottom: auto;
right: auto;
-webkit-margin-start: 130px;
margin-inline-start: 130px;
max-width: 605px;
width: 100%;
padding-top: 20px;
}
.hero--7 .hero__banner-img > img {
max-width: 100%;
}
@media only screen and (min-width: 1701px) and (max-width: 1800px) {
.hero--7 .hero__banner-img {
-webkit-margin-start: 100px;
margin-inline-start: 100px;
max-width: 580px;
}
}
@media only screen and (min-width: 1601px) and (max-width: 1700px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--7 .hero__banner-img {
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: auto;
margin-inline-end: auto;
}
}
@media only screen and (min-width: 1601px) and (max-width: 1700px) {
.hero--7 .hero__banner-img {
max-width: 550px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--7 .hero__banner-img {
max-width: 500px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--7 .hero__banner-img {
max-width: 420px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero--7 .hero__banner-img {
max-width: 480px;
}
}
@media (max-width: 575px) {
.hero--7 .hero__banner-img {
max-width: 90%;
}
}
.hero--7 .hero__chart {
position: absolute;
left: -70px;
top: 35%;
}
.hero--7 .hero__chart img {
-webkit-box-shadow: 0px 11px 30px -2px rgba(57, 25, 82, 0.1);
box-shadow: 0px 11px 30px -2px rgba(57, 25, 82, 0.1);
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.hero--7 .hero__chart {
max-width: 220px;
left: -50px;
top: 40%;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--7 .hero__chart {
max-width: 200px;
left: -15px;
top: 42%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--7 .hero__chart {
max-width: 170px;
left: 0;
top: 45%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--7 .hero__chart {
max-width: 230px;
top: 43%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--7 .hero__chart {
max-width: 170px;
left: 0;
top: 45%;
}
}
.hero--7 .hero__social {
position: absolute;
right: -73px;
top: 40px;
}
@media only screen and (min-width: 1601px) and (max-width: 1700px) {
.hero--7 .hero__social {
max-width: 180px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.hero--7 .hero__social {
max-width: 150px;
top: 60px;
right: -50px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--7 .hero__social {
max-width: 120px;
top: 70px;
right: -10px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--7 .hero__social {
max-width: 100px;
top: 100px;
right: -10px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--7 .hero__social {
max-width: 150px;
top: 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero--7 .hero__social {
max-width: 130px;
top: 70px;
right: -20px;
}
}
@media (max-width: 575px) {
.hero--7 .hero__social {
max-width: 100px;
top: 60px;
right: -10px;
}
}
.hero--7 .hero__client {
position: absolute;
right: -115px;
bottom: 135px;
}
.hero--7 .hero__client img {
-webkit-box-shadow: 0px 11px 30px -2px rgba(57, 25, 82, 0.1);
box-shadow: 0px 11px 30px -2px rgba(57, 25, 82, 0.1);
}
@media only screen and (min-width: 1601px) and (max-width: 1700px) {
.hero--7 .hero__client {
right: -85px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.hero--7 .hero__client {
right: -60px;
bottom: 110px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--7 .hero__client {
right: -15px;
bottom: 110px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero--7 .hero__client {
max-width: 160px;
right: 0;
bottom: 100px;
}
}
@media (max-width: 575px) {
.hero--7 .hero__client {
max-width: 140px;
right: 0;
bottom: 50px;
}
}
.hero--7 .hero__right {
max-width: 750px;
width: 100%;
min-height: inherit;
z-index: 1;
-webkit-padding-start: 80px;
padding-inline-start: 80px;
}
@media only screen and (min-width: 1601px) and (max-width: 1700px) {
.hero--7 .hero__right {
-webkit-padding-start: 50px;
padding-inline-start: 50px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--7 .hero__right {
-webkit-padding-start: 30px;
padding-inline-start: 30px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--7 .hero__right {
-webkit-padding-start: 20px;
padding-inline-start: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--7 .hero__right {
-webkit-padding-start: 0;
padding-inline-start: 0;
margin: 0 0 45px 0;
}
}
.hero--7 .hero__reviews--2 {
border: 1px solid var(--tj-color-border-1);
}
.hero--7 .hero__title {
font-size: 81px;
line-height: 1.11;
font-weight: var(--tj-fw-bold);
margin-bottom: 10px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.hero--7 .hero__title {
font-size: 76px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--7 .hero__title {
font-size: 65px;
max-width: 100%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--7 .hero__title {
font-size: 54px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--7 .hero__title {
font-size: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero--7 .hero__title {
font-size: 56px;
}
}
@media (max-width: 575px) {
.hero--7 .hero__title {
font-size: 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--7 .hero__title {
max-width: 100%;
}
}
.hero--7 .hero__title img {
width: 67px;
height: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--7 .hero__title img {
width: 55px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero--7 .hero__title img {
width: 50px;
}
}
@media (max-width: 575px) {
.hero--7 .hero__title img {
width: 40px;
}
}
.hero--7 .hero__desc {
font-size: 20px;
max-width: 450px;
line-height: 1.5;
letter-spacing: 0;
margin-bottom: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--7 .hero__desc {
font-size: 18px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--7 .hero__desc {
max-width: 100%;
}
}
.hero--7 .hero__shape__img {
position: absolute;
z-index: -1;
right: 0;
top: 0;
max-width: 417px;
width: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--7 .hero__shape__img {
max-width: 360px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero--7 .hero__shape__img {
max-width: 300px;
}
}
@media (max-width: 575px) {
.hero--7 .hero__shape__img {
max-width: 260px;
}
}
.hero--7 .btn-area {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
}
/* !END: Hero CSS */
/**----------------------------------------
START: Client CSS
----------------------------------------*/
.client-slider-2 .client-logo img {
opacity: 0.35;
}
.client-slider-2 .client-logo:hover img {
opacity: 1;
visibility: visible;
width: auto;
-webkit-animation: gelatine 0.5s linear;
animation: gelatine 0.5s linear;
}
@-webkit-keyframes gelatine {
from, to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.7, 1.1);
transform: scale(0.7, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.7);
transform: scale(1.1, 0.7);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}
@keyframes gelatine {
from, to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.7, 1.1);
transform: scale(0.7, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.7);
transform: scale(1.1, 0.7);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}
/* !END: Client CSS */
/**----------------------------------------
START: About CSS
----------------------------------------*/
.about--7 .section-heading__title {
font-weight: var(--tj-fw-sbold);
line-height: 1.25;
}
.about--7 .about__area {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 60px;
border-radius: 16px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.about--7 .about__area {
padding: 60px 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--7 .about__area {
padding: 40px 15px;
}
}
.about--7 .about__content {
max-width: 1160px;
margin: 0 auto;
text-align: center;
padding-left: 0;
}
.about--7 .about__action {
margin-top: 20px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media (max-width: 575px) {
.about--7 .about__action {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.about--7 .about-img {
border-radius: 16px;
overflow: hidden;
height: 100%;
}
.about--7 .about-img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.about--7 .about-img:hover img {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.funfact-area.h6-about-funfact {
background-color: var(--tj-color-theme-bg2);
border-radius: 16px;
padding: 60px 33px 44px 33px;
gap: 40px;
}
.funfact-area.h6-about-funfact .funfact-item {
width: calc(50% + 10px);
-webkit-padding-end: 10px;
padding-inline-end: 10px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.h6-about-funfact .funfact-item .number {
margin-top: -15px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.h6-about-funfact {
padding: 40px 20px 34px 20px;
gap: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.h6-about-funfact {
max-width: 100%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.h6-about-funfact {
gap: 30px;
}
}
/* !END: About CSS */
/**----------------------------------------
START: Service CSS
----------------------------------------*/
.h6-service .section-heading__title {
color: var(--tj-color-common-white);
}
.h6-service .section-heading__right {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 10px;
}
.h6-service .section-heading__right .swiper-button-prev,
.h6-service .section-heading__right .swiper-button-next {
opacity: 1;
visibility: visible;
position: static;
-webkit-transform: none;
-ms-transform: none;
transform: none;
margin: 0;
}
.h6-service .section-heading__right .swiper-button-prev:not(:hover),
.h6-service .section-heading__right .swiper-button-next:not(:hover) {
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: transparent;
}
.h6-service .section-heading__right .swiper-button-prev::after,
.h6-service .section-heading__right .swiper-button-next::after {
color: var(--tj-color-common-white);
}
.service__slider .service__card {
border: 0;
background: var(--tj-color-theme-bg4);
backdrop-filter: blur(20px);
border-radius: 10px;
}
.service__slider .service__card::after {
display: none;
}
.service__slider .service__card .service__icon {
background-color: var(--tj-color-theme-secondary);
border-color: var(--tj-color-theme-secondary);
margin-bottom: 22px;
}
.service__slider .service__card .service__icon i {
color: var(--tj-color-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__slider .service__card .service__icon {
width: 70px;
height: 70px;
font-size: 44px;
}
}
.service__slider .service__card .service__title {
color: var(--tj-color-common-white);
margin-bottom: 18px;
overflow: hidden;
}
.service__slider .service__card .service__title a {
text-shadow: 0 35px 0;
}
.service__slider .service__card .service__title:hover a {
-webkit-transform: translateY(-35px);
-ms-transform: translateY(-35px);
transform: translateY(-35px);
}
.service__slider .service__card .service__desc {
color: var(--tj-color-common-white2);
margin-bottom: 26px;
}
.service__slider .service__card .tj-btn-2 {
color: var(--tj-color-common-white);
overflow: hidden;
}
.service__slider .service__card .tj-btn-2 span {
text-shadow: 0 22px 0;
}
.service__slider .service__card .tj-btn-2 i {
color: var(--tj-color-common-white);
}
.service__slider .service__card .tj-btn-2:hover span {
-webkit-transform: translateY(-22px);
-ms-transform: translateY(-22px);
transform: translateY(-22px);
}
.service__slider .service__card:hover .service__icon {
background-color: var(--tj-color-theme-primary);
border-color: var(--tj-color-theme-primary);
}
.service__slider .swiper-pagination-bullet {
background-color: var(--tj-color-common-white);
}
.service__slider .swiper-pagination-bullet:hover {
opacity: 1;
}
/* !END: Service CSS */
/**----------------------------------------
START: Features CSS
----------------------------------------*/
.feature-img {
max-width: 605px;
width: 100%;
border-radius: 16px;
overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.feature-img {
max-width: 100%;
margin-top: 20px;
}
}
.h6-features-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-features-wrap {
gap: 20px;
}
}
.h6-features-wrap .service__card {
width: calc(50% - 15px);
padding: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-features-wrap .service__card {
padding: 30px 16px;
}
}
@media (max-width: 575px) {
.h6-features-wrap .service__card {
width: 100%;
}
}
.h6-features-wrap .service__card:hover .service__icon {
background-color: transparent;
}
.h6-features-wrap .service__card:hover .service__icon i {
color: var(--tj-color-theme-primary);
}
.h6-features-wrap .service__icon {
width: auto;
height: auto;
background-color: transparent;
border-radius: 0;
margin-bottom: 20px;
}
.h6-features-wrap .service__icon i {
color: var(--tj-color-theme-secondary);
}
/* !END: Features CSS */
/**----------------------------------------
START: Process CSS
----------------------------------------*/
.h6-process .section-heading__title {
color: var(--tj-color-common-white);
}
.h6-process__wrapper {
border-top: 1px solid var(--tj-color-border-5);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-process__wrapper {
border-top: 0;
border-left: 1px solid var(--tj-color-border-5);
-webkit-margin-start: 15px;
margin-inline-start: 15px;
gap: 30px;
}
}
.h6-process__wrapper .process__single {
width: calc(33% - 15px);
margin-top: 62px;
margin-bottom: 0;
overflow: visible;
border-radius: 10px;
display: block;
background: none;
padding: 0;
}
.h6-process__wrapper .process__single .process__inner {
backdrop-filter: blur(10px);
background: var(--tj-color-theme-bg4);
padding: 40px 30px 42px 30px;
border-radius: 10px;
overflow: visible;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.h6-process__wrapper .process__single .process__inner::after {
display: none;
}
.h6-process__wrapper .process__single .process__inner::before {
content: "";
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 14px 14px 14px;
border-color: transparent transparent var(--tj-color-theme-bg4) transparent;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
position: absolute;
top: -14px;
left: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-process__wrapper .process__single .process__inner::before {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
top: 46px;
left: -21px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h6-process__wrapper .process__single .process__inner {
padding: 40px 20px;
}
}
@media (max-width: 575px) {
.h6-process__wrapper .process__single .process__inner {
padding: 40px 15px 30px 15px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h6-process__wrapper .process__single {
width: calc(33% - 10px);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-process__wrapper .process__single {
width: calc(100% - 40px);
margin-top: 0;
-webkit-margin-start: auto;
margin-inline-start: auto;
}
}
.h6-process__wrapper .process__single::before {
content: "";
width: 18px;
height: 18px;
background-color: var(--tj-color-common-white);
border-radius: 50%;
position: absolute;
top: -72px;
left: 45px;
-webkit-box-shadow: 0 0 0 6px var(--tj-color-border-9);
box-shadow: 0 0 0 6px var(--tj-color-border-9);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-process__wrapper .process__single::before {
top: 45px;
left: -50px;
}
}
.h6-process__wrapper .process__single .step-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.h6-process__wrapper .process__single .step-header .step {
background-color: var(--tj-color-theme-secondary);
color: var(--tj-color-common-white);
line-height: 1;
font-weight: var(--tj-fw-medium);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
border-radius: 56px;
padding: 5px 8px;
}
.h6-process__wrapper .process__single .process__sl {
font-size: 90px;
font-weight: var(--tj-fw-bold);
letter-spacing: -0.01em;
line-height: 0.7;
opacity: 0.3;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-process__wrapper .process__single .process__sl {
font-size: 70px;
margin-bottom: 6px;
}
}
.h6-process__wrapper .process__single .process__content {
max-width: 100%;
padding-top: 70px;
}
@media (max-width: 575px) {
.h6-process__wrapper .process__single .process__content {
padding-top: 50px;
}
}
.h6-process__wrapper .process__single .process__title {
margin-bottom: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-process__wrapper .process__single .process__title {
font-size: 20px;
margin-bottom: 12px;
}
}
.h6-process__wrapper .process__single .process__desc {
color: var(--tj-color-common-white2);
font-size: 16px;
}
.h6-process__wrapper .process__single:hover::before {
background-color: var(--tj-color-theme-primary);
-webkit-box-shadow: 0 0 0 6px var(--tj-color-theme-bg3);
box-shadow: 0 0 0 6px var(--tj-color-theme-bg3);
}
.h6-process__wrapper .process__single:hover .process__inner {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-process__wrapper .process__single:hover .process__inner {
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
}
}
.h6-process__wrapper .process__single:hover .step {
background-color: var(--tj-color-theme-primary);
}
.h6-process__wrapper .process__single:hover .process__sl {
opacity: 1;
-webkit-text-stroke-color: var(--tj-color-theme-primary);
}
/* !END: Process CSS */
/**----------------------------------------
START: Portfolio CSS
----------------------------------------*/
.h6-portfolio-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 15px;
gap: 140px;
background-color: var(--tj-color-theme-bg1);
border-radius: 10px;
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
transition: all var(--tj-td-standard) ease-in-out 0s;
position: relative;
}
.h6-portfolio-item:not(:last-child) {
margin-bottom: 30px;
}
.h6-portfolio-item .portfolio-content {
max-width: 470px;
width: 100%;
-webkit-margin-start: auto;
margin-inline-start: auto;
margin-top: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h6-portfolio-item .portfolio-content {
max-width: 425px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.h6-portfolio-item .portfolio-content {
max-width: 425px;
-webkit-margin-start: 125px;
margin-inline-start: 125px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-portfolio-item .portfolio-content {
max-width: 100%;
margin-top: 45px;
}
}
.h6-portfolio-item .portfolio-sl {
font-size: 24px;
line-height: 1;
color: var(--tj-color-theme-secondary);
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-bold);
position: absolute;
top: 36px;
left: 30px;
-webkit-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: 992px) and (max-width: 1199px) {
.h6-portfolio-item .portfolio-sl {
font-size: 22px;
left: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.h6-portfolio-item .portfolio-sl {
font-size: 22px;
left: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-portfolio-item .portfolio-sl {
font-size: 20px;
top: 25px;
left: auto;
}
}
.h6-portfolio-item .portfolio-title {
margin-bottom: 16px;
}
.h6-portfolio-item .portfolio-title a {
background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
background-image: linear-gradient(to bottom, currentColor 0%, currentColor 100%);
background-size: 0 2px;
background-repeat: no-repeat;
background-position: 0 92%;
display: inline;
}
.h6-portfolio-item .portfolio-title a:hover {
background-size: 100% 2px;
}
@media (max-width: 575px) {
.h6-portfolio-item .portfolio-title a {
background-position: 0 95%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-portfolio-item .portfolio-title {
margin-bottom: 12px;
}
}
.h6-portfolio-item .portfolio-desc {
margin-bottom: 23px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-portfolio-item .portfolio-desc {
margin-bottom: 18px;
}
}
.h6-portfolio-item .portfolio-img {
max-width: 405px;
width: 100%;
min-height: 320px;
border-radius: 12px;
overflow: hidden;
}
.h6-portfolio-item .portfolio-img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h6-portfolio-item .portfolio-img {
max-width: 360px;
min-height: 300px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.h6-portfolio-item .portfolio-img {
margin: 0 auto;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-portfolio-item .portfolio-img {
max-width: 100%;
min-height: auto;
}
}
.h6-portfolio-item:hover {
background-color: var(--tj-color-theme-bg2);
}
.h6-portfolio-item:hover .portfolio-sl {
color: var(--tj-color-theme-primary);
}
.h6-portfolio-item:hover .portfolio-img img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.h6-portfolio-item:hover .tj-icon-btn {
border-color: var(--tj-color-theme-primary);
background-color: var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.h6-portfolio-item {
gap: 80px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h6-portfolio-item {
gap: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-portfolio-item {
gap: 25px;
}
}
.tj-icon-btn {
width: 56px;
height: 56px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: var(--tj-color-common-white);
border: 1px solid var(--tj-color-border-1);
color: var(--tj-color-theme-dark);
border-radius: 100%;
line-height: 1;
z-index: 2;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.tj-icon-btn {
width: 50px;
height: 50px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-icon-btn {
width: 46px;
height: 46px;
}
}
.tj-icon-btn i {
display: inline-block;
font-size: 16px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-icon-btn i {
font-size: 14px;
}
}
.tj-icon-btn:hover {
border-color: var(--tj-color-theme-primary);
background-color: var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
}
.tj-icon-btn:hover i {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
/* !END: Portfolio CSS */
/**----------------------------------------
START: Funfact CSS
----------------------------------------*/
.funfact-area.h6-funfact-area {
gap: 30px;
padding: 0;
height: auto;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.h6-funfact-area {
gap: 70px;
}
}
.funfact-area.h6-funfact-area .funfact-item {
padding: 0 0 0 30px;
background: transparent;
border-radius: 0;
text-align: start;
position: relative;
}
.funfact-area.h6-funfact-area .funfact-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: calc(100% - 7px);
background-color: var(--tj-color-border-5);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.h6-funfact-area .funfact-item::before {
width: 100%;
height: 1px;
}
}
.funfact-area.h6-funfact-area .funfact-item::after {
display: none;
}
.funfact-area.h6-funfact-area .funfact-item .text {
color: var(--tj-color-common-white2);
font-size: 18px;
line-height: 1.556;
max-width: 360px;
margin-top: 5px;
}
.funfact-area.h6-funfact-area .funfact-item .text--traffic, .funfact-area.h6-funfact-area .funfact-item .text--speed, .funfact-area.h6-funfact-area .funfact-item .text--bonus, .funfact-area.h6-funfact-area .funfact-item .text--conversation {
color: var(--tj-color-common-white2);
font-size: 16px;
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-sbold);
line-height: 1;
letter-spacing: -0.02em;
position: relative;
padding-left: 16px;
margin-top: 0;
}
.funfact-area.h6-funfact-area .funfact-item .text--traffic::before, .funfact-area.h6-funfact-area .funfact-item .text--speed::before, .funfact-area.h6-funfact-area .funfact-item .text--bonus::before, .funfact-area.h6-funfact-area .funfact-item .text--conversation::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--tj-color-theme-primary);
position: absolute;
left: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.funfact-area.h6-funfact-area .funfact-item .text {
max-width: 300px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.h6-funfact-area .funfact-item .text {
max-width: 265px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.h6-funfact-area .funfact-item .text {
max-width: 100%;
}
}
.funfact-area.h6-funfact-area .funfact-item .number {
font-size: 100px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
margin-top: 86px;
}
.funfact-area.h6-funfact-area .funfact-item .number .odometer span {
letter-spacing: -0.05em;
}
.funfact-area.h6-funfact-area .funfact-item .number small {
font-size: 42px;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.funfact-area.h6-funfact-area .funfact-item .number small sub {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
bottom: -0.6em;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.h6-funfact-area .funfact-item .number small sub {
bottom: -0.45em;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.h6-funfact-area .funfact-item .number small {
font-size: 34px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.funfact-area.h6-funfact-area .funfact-item .number {
font-size: 90px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.h6-funfact-area .funfact-item .number {
font-size: 80px;
margin-top: 70px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.h6-funfact-area .funfact-item .number {
font-size: 70px;
margin-top: 60px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.h6-funfact-area .funfact-item {
padding: 0 0 0 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.h6-funfact-area .funfact-item {
-webkit-box-flex: 0;
-ms-flex: 0 1 calc(50% - 15px);
flex: 0 1 calc(50% - 15px);
}
.funfact-area.h6-funfact-area .funfact-item:last-child {
margin-top: 50px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.h6-funfact-area .funfact-item {
-webkit-box-flex: 100%;
-ms-flex: 100%;
flex: 100%;
padding: 30px 0 0 0;
}
}
.h6-funfact-marquee {
padding-top: 100px;
padding-bottom: 83px;
}
.h6-funfact-marquee .service-marquee__title {
color: var(--tj-color-common-white);
margin-bottom: 15px;
}
.h6-funfact-marquee .service-marquee__item:nth-child(2n) .service-marquee__title {
-webkit-text-stroke: 1px var(--tj-color-common-white);
}
.h6-funfact-marquee .service-marquee__img {
-webkit-animation: zoomEffect 2s linear infinite;
animation: zoomEffect 2s linear infinite;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.h6-funfact-marquee {
padding-top: 80px;
padding-bottom: 60px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h6-funfact-marquee {
padding-top: 60px;
padding-bottom: 40px;
}
}
.zoomInOut {
-webkit-animation: zoomEffect 3s linear infinite;
animation: zoomEffect 3s linear infinite;
}
@-webkit-keyframes zoomEffect {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes zoomEffect {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
/* !END: Funfact CSS */
/**----------------------------------------
START: Testimonials CSS
----------------------------------------*/
.h6-testimonials-wrapper {
position: relative;
z-index: 0;
}
.h6-testimonials-wrapper .testimonials__author {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.h6-testimonials-wrapper .testimonials__author__slider {
max-width: 250px;
padding-bottom: 0;
margin: 0 auto -44px;
position: relative;
z-index: 2;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.h6-testimonials-wrapper .testimonials__author__slider {
max-width: 220px;
margin-bottom: -35px;
}
}
@media (max-width: 575px) {
.h6-testimonials-wrapper .testimonials__author__slider {
max-width: 186px;
margin-bottom: -30px;
}
}
.h6-testimonials-wrapper .testimonials__author__avatar {
max-width: 75px;
border-width: 4px;
border-radius: 10px;
background-color: var(--tj-color-common-white);
cursor: pointer;
}
.h6-testimonials-wrapper .testimonials__author__avatar img {
opacity: 0.5;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.h6-testimonials-wrapper .testimonials__author__avatar {
max-width: 65px;
}
}
@media (max-width: 575px) {
.h6-testimonials-wrapper .testimonials__author__avatar {
max-width: 55px;
}
}
.h6-testimonials-wrapper .testimonials__slider__6 {
overflow: visible;
}
.h6-testimonials-wrapper .testimonials__slider__6 .swiper-button-prev,
.h6-testimonials-wrapper .testimonials__slider__6 .swiper-rtl .swiper-button-next {
left: 150px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.h6-testimonials-wrapper .testimonials__slider__6 .swiper-button-prev,
.h6-testimonials-wrapper .testimonials__slider__6 .swiper-rtl .swiper-button-next {
left: 125px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h6-testimonials-wrapper .testimonials__slider__6 .swiper-button-prev,
.h6-testimonials-wrapper .testimonials__slider__6 .swiper-rtl .swiper-button-next {
left: 98px;
}
}
.h6-testimonials-wrapper .testimonials__slider__6 .swiper-button-next,
.h6-testimonials-wrapper .testimonials__slider__6 .swiper-rtl .swiper-button-prev {
right: 150px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.h6-testimonials-wrapper .testimonials__slider__6 .swiper-button-next,
.h6-testimonials-wrapper .testimonials__slider__6 .swiper-rtl .swiper-button-prev {
right: 125px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h6-testimonials-wrapper .testimonials__slider__6 .swiper-button-next,
.h6-testimonials-wrapper .testimonials__slider__6 .swiper-rtl .swiper-button-prev {
right: 98px;
}
}
.h6-testimonials-wrapper .testimonials__slider__item {
background-repeat: no-repeat;
background-size: cover;
padding: 54px 60px;
border: 0;
opacity: 0.2;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h6-testimonials-wrapper .testimonials__slider__item {
padding: 40px 35px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.h6-testimonials-wrapper .testimonials__slider__item {
padding: 40px 20px;
}
}
@media (max-width: 575px) {
.h6-testimonials-wrapper .testimonials__slider__item {
padding: 25px 20px;
}
}
.h6-testimonials-wrapper .testimonials__desc {
font-size: 28px;
line-height: 1.5;
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-medium);
letter-spacing: -0.02em;
text-align: center;
padding-top: 35px;
padding-bottom: 32px;
margin-bottom: 0;
border: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h6-testimonials-wrapper .testimonials__desc {
font-size: 24px;
padding-top: 30px;
padding-bottom: 25px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.h6-testimonials-wrapper .testimonials__desc {
font-size: 22px;
padding-top: 25px;
padding-bottom: 20px;
}
}
@media (max-width: 575px) {
.h6-testimonials-wrapper .testimonials__desc {
font-size: 20px;
padding-top: 25px;
padding-bottom: 15px;
}
}
.h6-testimonials-wrapper .swiper-slide-active .testimonials__author__avatar img {
opacity: 1;
}
.h6-testimonials-wrapper .swiper-slide-active .testimonials__slider__item {
opacity: 1;
}
/* !END: Testimonials CSS */
/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.blog--6 .blog__single--2 .blog__single__title {
font-size: 32px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog--6 .blog__single--2 .blog__single__title {
font-size: 24px;
}
}
.blog--6 .blog__single--2 .blog__single__title a {
background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
background-image: linear-gradient(to bottom, currentColor 0%, currentColor 100%);
background-size: 0 2px;
background-repeat: no-repeat;
background-position: 0 92%;
display: inline;
}
.blog--6 .blog__single--2 .blog__single__title a:hover {
background-size: 100% 2px;
}
@media (max-width: 575px) {
.blog--6 .blog__single--2 .blog__single__title a {
background-position: 0 95%;
}
}
.blog--6 .blog__single--2 .blog__single__title:hover {
-webkit-animation: none;
animation: none;
}
.blog--6 .blog__single--2.h6-blog-single .blog__single__banner {
height: 307px;
border-radius: 10px;
}
.blog--6 .blog__single--2.h6-blog-single .blog__single__banner:after {
display: none;
}
.blog--6 .blog__single--2.h6-blog-single .blog__single__content {
position: unset;
background-color: transparent;
padding: 20px 0 0 0;
}
.blog--6 .blog__single--2.h6-blog-single .blog__single__content__list {
margin-bottom: 14px;
}
.blog--6 .blog__single--2.h6-blog-single .blog__single__content__list li::after {
background-color: var(--tj-color-theme-dark);
}
.blog--6 .blog__single--2.h6-blog-single .blog__single__content__tag:hover {
color: var(--tj-color-theme-primary) !important;
background-color: var(--tj-color-theme-bg2);
border-color: var(--tj-color-theme-bg2);
}
.blog--6 .blog__single--2.h6-blog-single .blog__single__content__date {
color: inherit;
}
.blog--6 .blog__single--2.h6-blog-single .blog__single__title {
font-size: 24px;
margin-bottom: 22px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog--6 .blog__single--2.h6-blog-single .blog__single__title {
font-size: 20px;
margin-bottom: 12px;
}
}
.blog--6 .blog__single--2.h6-blog-single .blog__single__title a {
color: inherit;
}
.blog--6 .blog__single--2.h6-blog-single .blog__single__title:hover {
-webkit-animation: none;
animation: none;
}
.blog--6 .blog__single--2.h6-blog-single .tj-btn-2 {
color: inherit;
opacity: 1;
}
.blog--6 .blog__single--2.h6-blog-single .tj-btn-2 i {
color: inherit;
}
.blog--6 .blog__single--2.h6-blog-single .tj-btn-2:hover {
color: var(--tj-color-theme-primary);
}
/* !END: Blog CSS */
/**----------------------------------------
START: Header CSS
----------------------------------------*/
.header--7 .header__wrapper {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.header--7 .header__wrapper > div:last-child {
margin-left: 0;
}
.header--7 .header__logo {
width: 133px;
}
.header--7.header {
max-width: calc(100% - 60px);
left: 30px;
right: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.header--7.header {
max-width: calc(100% - 30px);
left: 15px;
right: 15px;
}
}
@media (max-width: 575px) {
.header--7.header {
max-width: calc(100% - 20px);
left: 10px;
right: 10px;
}
}
.header--7.header .header__right .header__mobile-toggler {
border-radius: 100%;
}
.header--7.header .header__right .tj-btn {
padding: 14px 30px;
border-radius: 58px;
}
.header--7.header .header__right .tj-btn::after {
border-radius: 58px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
.header--7.header .header__right .tj-btn {
padding: 11px 25px;
}
}
.header--7.header--absolute {
margin-top: 30px;
border-radius: 0;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.header--7.header--absolute {
margin-top: 10px;
}
}
@media (max-width: 575px) {
.header--7.header--absolute {
margin-top: 0;
}
}
.header--7.header--absolute .mainmenu {
background: rgba(255, 255, 255, 0.1);
padding-left: 15px;
padding-right: 15px;
border-radius: 58px;
}
.header--7.header--absolute .mainmenu nav > ul > li > a {
padding: 10px 20px;
color: var(--tj-color-common-white);
}
.header--7.header--absolute .mainmenu nav > ul > li.has-dropdown > a::after {
color: var(--tj-color-common-white);
}
.header--7.header--absolute .mainmenu nav > ul > li .sub-menu {
border-radius: 12px;
margin-top: 10px;
z-index: 0;
}
.header--7.header--absolute .mainmenu nav > ul > li .sub-menu::after {
content: "";
position: absolute;
left: 0;
top: -11px;
width: 100%;
height: 100%;
z-index: -1;
}
.header--7.header--absolute .tj-btn {
color: var(--tj-color-theme-dark);
border-color: var(--tj-color-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
.header--7.header--absolute .tj-btn {
padding: 11px 25px;
}
}
.header--7.header--absolute .tj-btn::after {
background-color: var(--tj-color-common-white);
}
.header--7.header--absolute .tj-btn:hover {
border-color: var(--tj-color-common-white);
color: var(--tj-color-common-white);
}
.header--7.header--absolute .header__right .header__mobile-toggler {
border-color: var(--tj-color-common-white);
background-color: transparent;
}
.header--7.header--absolute .header__right .header__mobile-toggler span {
background-color: var(--tj-color-common-white);
}
.header--7.header-duplicate {
top: -120px; /* Initially hidden */
}
.header--7.header-duplicate.sticky {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
top: 0; /* Sticks to the top */
}
.header--7.header-duplicate .header__wrapper {
padding-left: 20px;
padding-right: 20px;
}
@media (max-width: 575px) {
.header--7.header-duplicate .header__wrapper {
padding-left: 15px;
padding-right: 15px;
}
}
/* !END: Header CSS */
/**----------------------------------------
START: Footer CSS
----------------------------------------*/
.footer--7 {
border-radius: 0;
overflow: visible;
margin-top: 35px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--7 {
margin-top: 45px;
}
}
.footer--7 .footer__inner {
padding-top: 145px;
padding-bottom: 0;
}
.footer--7 .footer__copyright {
border-top: 0;
}
.footer--7 .footer__copyright__menu ul li > a {
color: var(--tj-color-common-white2);
}
.footer--7 .footer__copyright__menu ul li > a::before {
background-color: var(--tj-color-common-white2);
opacity: 0.4;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--7 .footer__inner {
padding-left: 0;
padding-right: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer--7 .footer__inner {
padding-top: 135px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--7 .footer__inner {
padding-top: 125px;
}
}
.footer__logo__icon {
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.footer__logo__icon a {
width: 132px;
height: 132px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: -webkit-gradient(linear, left top, left bottom, from(#f44454), to(#054ce0));
background: linear-gradient(180deg, #f44454 0%, #054ce0 100%);
border: 11px solid var(--tj-color-common-white);
border-radius: 50%;
}
.footer__logo__icon img {
width: 58px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__logo__icon a {
width: 122px;
height: 122px;
border-width: 8px;
}
.footer__logo__icon img {
width: 50px;
}
}
.footer__title__large {
font-size: 80px;
line-height: 1.175;
color: var(--tj-color-common-white);
max-width: 1224px;
margin: 0 auto -20px;
text-align: center;
text-transform: uppercase;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(rgba(255, 255, 255, 0.15)));
-webkit-mask-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.15) 100%);
mask-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(rgba(255, 255, 255, 0.15)));
mask-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.15) 100%);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer__title__large {
font-size: 60px;
margin-bottom: -15px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer__title__large {
font-size: 50px;
margin-bottom: -10px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__title__large {
font-size: 24px;
margin-bottom: -5px;
}
}
.footer__widget__wrapper--3 {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 10px 30px;
background-color: var(--tj-color-theme-bg4);
backdrop-filter: blur(20px);
padding: 100px 60px 43px;
border-radius: 12px;
}
.footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe {
max-width: 540px;
padding: 0;
margin-left: 0;
}
.footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe::after, .footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe::before {
display: none;
}
.footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe .hero__subscription .tj-input {
-webkit-padding-start: 25px;
padding-inline-start: 25px;
}
.footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe .hero__subscription .tj-input__wrapper {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(22px);
border-radius: 100px;
}
.footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe .hero__subscription .tj-btn {
border-radius: 100px;
}
.footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe .hero__subscription .tj-btn::after {
border-radius: 100px;
}
.footer__widget__wrapper--3 .footer__widget.footer__widget--company {
max-width: 160px;
-webkit-margin-start: 16px;
margin-inline-start: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer__widget__wrapper--3 .footer__widget.footer__widget--company {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
}
.footer__widget__wrapper--3 .footer__widget.footer__info {
opacity: 0.8;
}
.footer__widget__wrapper--3 .footer__widget.footer__info .footer__info__address {
color: var(--tj-color-common-white3);
}
.footer__widget__wrapper--3 .footer__widget.footer__info .footer__info__list ul li .link {
color: var(--tj-color-common-white3);
}
.footer__widget__wrapper--3 .footer__widget.footer__info .footer__info__active-hours ul li {
color: var(--tj-color-common-white3);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.footer__widget__wrapper--3 {
padding: 100px 36px 43px;
}
.footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe {
max-width: 525px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer__widget__wrapper--3 {
padding: 100px 30px 43px;
}
.footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe {
max-width: 380px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.footer__widget__wrapper--3 {
padding: 80px 30px 30px;
}
}
@media (max-width: 575px) {
.footer__widget__wrapper--3 {
padding: 70px 20px 30px;
}
.footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe {
margin-bottom: 38px;
}
.footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe .tj-btn {
padding: 15px 17px;
}
}
/* !END: Footer CSS */
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.hero--8 {
position: relative;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0;
}
.hero--8 .hero__inner {
min-height: 900px;
padding-top: 194px;
overflow: visible;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--8 .hero__inner {
min-height: 710px;
padding-top: 176px;
padding-bottom: 70px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.hero--8 .hero__inner {
min-height: 680px;
padding-top: 176px;
padding-bottom: 40px;
}
}
@media (max-width: 575px) {
.hero--8 .hero__inner {
min-height: 670px;
padding-top: 128px;
padding-bottom: 15px;
}
}
.hero--8 .hero__left {
max-width: 800px;
position: relative;
z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--8 .hero__left {
max-width: 612px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--8 .hero__left {
max-width: 588px;
}
}
.hero--8 .hero__title {
font-size: 96px;
font-weight: var(--tj-fw-bold);
line-height: 1.114;
letter-spacing: -0.02em;
color: var(--tj-color-common-white);
margin-top: -20px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.hero--8 .hero__title {
font-size: 85px;
max-width: 100%;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--8 .hero__title {
font-size: 65px;
max-width: 100%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--8 .hero__title {
font-size: 55px;
max-width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--8 .hero__title {
max-width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--8 .hero__title {
font-size: 70px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero--8 .hero__title {
font-size: 60px;
}
}
@media (max-width: 575px) {
.hero--8 .hero__title {
font-size: 40px;
}
}
.hero--8 .hero__box {
width: 100%;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 0;
}
.hero--8 .hero__box__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px 30px;
max-width: 786px;
width: 100%;
position: absolute;
left: 90px;
bottom: 60px;
z-index: 1;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.hero--8 .hero__box__wrapper {
left: 54px;
bottom: 54px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--8 .hero__box__wrapper {
position: relative;
left: 0;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
padding: 40px 0 50px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--8 .hero__box__wrapper {
padding: 40px 0 34px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--8 .hero__box__wrapper {
position: relative;
left: 0;
bottom: 0;
padding: 30px 0 55px;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
}
@media (max-width: 575px) {
.hero--8 .hero__box__wrapper {
padding: 20px 0 25px;
gap: 15px 30px;
}
}
.hero--8 .hero__box--video {
max-width: 372px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--8 .hero__box--video {
max-width: 384px;
}
}
.hero--8 .hero__box--video img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.hero--8 .hero__box--video .tj-btn--popup {
width: 49px;
height: 49px;
background-color: var(--tj-color-common-white);
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 0;
}
.hero--8 .hero__box--video .tj-btn--popup i {
font-size: 12px;
color: var(--tj-color-theme-dark);
}
.hero--8 .hero__box--text {
padding: 30px 30px 37px;
max-width: 384px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
}
.hero--8 .hero__desc {
color: var(--tj-color-common-white);
font-size: var(--tj-fs-h5);
font-weight: var(--tj-fw-medium);
margin-bottom: 24px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--8 .hero__desc {
font-size: 18px;
}
}
.hero--8 .hero__banner {
position: absolute;
right: 30px;
bottom: 30px;
width: 607px;
z-index: 0;
}
.hero--8 .hero__banner img {
border-radius: 16px;
}
.hero--8 .hero__banner__heart {
position: absolute;
right: -27px;
top: 43px;
left: -33px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.hero--8 .hero__banner {
width: 502px;
height: 759px;
}
.hero--8 .hero__banner__heart {
top: 85px;
}
.hero--8 .hero__banner img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--8 .hero__banner {
margin-top: -10px;
position: relative;
right: auto;
top: auto;
bottom: auto;
width: 100%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--8 .hero__banner__heart {
top: 26px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--8 .hero__banner {
max-width: 100%;
-webkit-margin-start: auto;
margin-inline-start: auto;
margin-top: 0;
}
.hero--8 .hero__banner > img {
width: 100%;
}
.hero--8 .hero__banner__heart {
right: 98px;
top: 120px;
left: -14px;
}
}
@media (max-width: 575px) {
.hero--8 .hero__banner__heart {
right: -14px;
top: 24px;
left: -11px;
}
}
.hero--8 .hero__ring {
position: absolute;
z-index: 0;
top: 30%;
left: -50px;
}
.hero--8 .hero__ring--2 {
width: 73px;
top: auto;
bottom: -40px;
left: 55%;
}
.hero--8 .hero__ring--2 img {
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
/* !END: Hero CSS */
/**----------------------------------------
START: Feature CSS
----------------------------------------*/
.quick__action {
font-size: 16px;
line-height: 1.375;
letter-spacing: 0em;
font-weight: var(--tj-fw-sbold);
color: var(--tj-color-text-body);
text-align: center;
margin-top: 60px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.quick__action {
margin-top: 35px;
}
}
.quick__action__btn {
margin-bottom: 0;
font-size: 16px;
line-height: 1;
font-weight: var(--tj-fw-sbold);
padding: 6px 10px;
border-radius: 48px;
background-color: var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
display: inline-block;
}
.quick__action a {
display: inline-block;
color: var(--tj-color-theme-dark);
display: inline;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, currentColor), to(currentColor));
background-image: linear-gradient(to right, currentColor 0, currentColor 100%);
background-position: 0 calc(100% - 3px);
background-repeat: no-repeat;
background-size: 0 1px;
}
.quick__action a:hover {
background-size: 100% 1px;
}
/* !END: Feature CSS */
/**----------------------------------------
START: Abour CSS
----------------------------------------*/
.about--8 .section-heading__sub-title {
margin-top: 10px;
padding: 0;
background-color: transparent;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--8 .section-heading__sub-title {
margin-top: 0;
}
}
.about--8 .section-heading__title .line {
background-image: -webkit-gradient(linear, left top, right top, from(var(--tj-color-common-white)), to(rgba(255, 255, 255, 0.35)));
background-image: linear-gradient(90deg, var(--tj-color-common-white) var(--highlight-offset), rgba(255, 255, 255, 0.35) var(--highlight-offset));
}
.about--8 .about__content {
max-width: 870px;
margin-left: auto;
padding-left: 0;
}
.about--8 .about__action {
margin-top: 30px;
}
@media (max-width: 575px) {
.about--8 .about__action {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.about__box {
width: 33.3333%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border-radius: 10px;
overflow: hidden;
}
.about__box__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 30px;
margin-top: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.about__box__wrapper {
gap: 15px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__box__wrapper {
gap: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__box__wrapper {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 10px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.about__box {
width: calc((100% - 20px) / 2);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__box {
width: 100%;
}
}
.about__box__title {
color: var(--tj-color-common-white);
padding-left: 7px;
position: relative;
z-index: 2;
}
.about__box--1, .about__box--2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
min-height: 340px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about__box--1, .about__box--2 {
min-height: 380px;
}
}
.about__box--1 {
padding: 30px 23px 23px;
}
.about__box--2 {
padding: 30px 0 0;
}
.about__box--2 .about__box__title {
-webkit-padding-start: 30px;
padding-inline-start: 30px;
-webkit-padding-end: 23px;
padding-inline-end: 23px;
}
.about__box--2 img {
margin-top: 41px;
}
.about__capsule {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 21px 20px;
border: 1px solid var(--tj-color-border-9);
border-radius: 59px;
color: var(--tj-color-common-white);
font-weight: var(--tj-fw-medium);
line-height: 0;
-webkit-transition: none;
transition: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
pointer-events: none;
}
.about__capsule__wrapper {
position: relative;
pointer-events: none;
height: 100%;
}
.about__capsule__wrapper__box {
pointer-events: none;
margin-top: -50px;
height: 300px;
}
.about__capsule__wrapper > * {
position: absolute;
display: inline-block;
margin-bottom: 0;
left: 0;
top: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: auto;
-webkit-transition: none;
transition: none;
opacity: 0;
z-index: 1;
}
.about__capsule--2 {
background-color: var(--tj-color-theme-secondary);
border: 0;
}
.about__capsule--img {
padding: 0;
border: 0;
border-radius: 0;
}
/* !END: About CSS */
/**----------------------------------------
START: Testimonials CSS
----------------------------------------*/
.testimonials__item--2 {
background-color: transparent;
padding: 28px 30px 30px;
border: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__item--2 {
padding: 30px;
}
}
@media (max-width: 575px) {
.testimonials__item--2 {
padding: 24px 20px 28px;
}
}
.testimonials__item--2 .testimonials__desc {
font-size: 20px;
color: var(--tj-color-common-white);
border-bottom-style: dashed;
padding-bottom: 20px;
margin-bottom: 27px;
border-bottom-color: var(--tj-color-border-9);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.testimonials__item--2 .testimonials__desc {
font-size: 18px;
}
.testimonials__item--2 .testimonials__desc__rating {
margin-bottom: 20px;
}
}
@media (max-width: 575px) {
.testimonials__item--2 .testimonials__desc {
font-size: 16px;
}
}
.testimonials__item--2 .testimonials__author__name {
color: var(--tj-color-common-white);
}
.testimonials__item--2 .testimonials__author__desig {
color: var(--tj-color-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.testimonials__item--2 .testimonials__desc {
font-size: 18px;
}
.testimonials__item--2 .testimonials__rating {
margin-bottom: 16px;
}
}
@media (max-width: 575px) {
.testimonials__item--2 .testimonials__desc {
font-size: 16px;
}
.testimonials__item--2 .testimonials__rating {
margin-bottom: 18px;
}
}
.testimonials__3 {
border-start-start-radius: 0;
border-start-end-radius: 0;
overflow: hidden;
}
.testimonials__wrapper--4 .testimonials__slider__item {
background-color: var(--tj-color-common-white);
border: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials__wrapper--4 .testimonials__slider__item {
padding: 40px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__wrapper--4 .testimonials__slider__item {
padding: 35px 20px;
}
}
.testimonials__wrapper--4 .testimonials__rating {
margin-bottom: 24px;
}
.testimonials__wrapper--4 .testimonials__desc {
margin-bottom: 30px;
font-size: 22px;
line-height: 1.455;
letter-spacing: 0em;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__wrapper--4 .testimonials__desc {
font-size: 18px;
padding-bottom: 24px;
}
}
.testimonials__wrapper--4 .testimonials__author {
margin-bottom: 0;
}
.testimonials__wrapper--4 .testimonials__qoute__2 i {
-webkit-transform: scale(-1);
-ms-transform: scale(-1);
transform: scale(-1);
display: inline-block;
font-size: 44px;
color: var(--tj-color-theme-secondary);
}
/* !END: Testimonials CSS */
/**----------------------------------------
START: Service CSS
----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service--5 .section-heading--2 .section-heading__left {
max-width: 482px;
}
}
.service__card--4 {
background: var(--tj-color-theme-bg1);
padding: 35px 30px 45px;
border: 0;
border-radius: 10px;
}
.service__card--4::after {
display: none;
}
.service__card--4 .service__icon {
background-color: var(--tj-color-theme-secondary);
border: 0;
border-radius: 10px;
margin-bottom: 36px;
}
.service__card--4 .service__icon i {
color: var(--tj-color-common-white);
}
.service__card--4 .service__title {
margin-bottom: 16px;
color: var(--tj-color-heading-primary);
}
.service__card--4 .service__desc {
margin-bottom: 0;
}
.service__card--4:hover {
background: var(--tj-color-theme-bg2);
}
.service__card--4:hover .service__icon {
background-color: var(--tj-color-theme-primary);
}
.service__card--4:hover .service__desc {
color: var(--tj-color-text-body);
}
.service__wrapper__3 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px;
}
.service__wrapper__3 .service__card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 30px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
border: 3px solid var(--tj-color-common-white);
border-radius: 24px;
-webkit-transition: none;
transition: none;
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
overflow: hidden;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__3 .service__card {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
gap: 30px;
}
}
@media (max-width: 575px) {
.service__wrapper__3 .service__card {
padding: 30px 20px 20px;
}
}
.service__wrapper__3 .service__card::after {
display: none;
}
.service__wrapper__3 .service__card .service__banner {
position: relative;
z-index: 1;
border-radius: 10px;
overflow: hidden;
width: 43%;
position: relative;
z-index: 0;
}
.service__wrapper__3 .service__card .service__banner a {
width: 100%;
height: 100%;
}
.service__wrapper__3 .service__card .service__banner img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service__wrapper__3 .service__card .service__banner {
height: 361px;
width: 50%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__3 .service__card .service__banner {
width: 100%;
}
}
.service__wrapper__3 .service__card .service__chart {
max-width: 244px;
width: 100%;
position: absolute;
left: 30px;
bottom: 60px;
border-radius: 12px;
overflow: hidden;
-webkit-box-shadow: var(--tj-shadow-theme-primary);
box-shadow: var(--tj-shadow-theme-primary);
z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.service__wrapper__3 .service__card .service__chart {
max-width: 200px;
left: 20px;
bottom: 40px;
}
}
@media (max-width: 575px) {
.service__wrapper__3 .service__card .service__chart {
max-width: 150px;
left: 15px;
bottom: 40px;
}
}
.service__wrapper__3 .service__card .service__content {
width: calc(57% - 95px);
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
transition: all var(--tj-td-standard) ease-in-out 0s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-negative: 0;
flex-shrink: 0;
overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.service__wrapper__3 .service__card .service__content {
width: calc(57% - 50px);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service__wrapper__3 .service__card .service__content {
width: calc(50% - 30px);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__3 .service__card .service__content {
width: 100%;
}
}
.service__wrapper__3 .service__card .service__index {
position: absolute;
right: 24px;
top: 15px;
font-size: 107px;
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-bold);
font-style: Bold;
line-height: 1;
letter-spacing: -0.025em;
margin: 0;
color: var(--tj-color-common-black);
-webkit-transition: none;
transition: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.service__wrapper__3 .service__card .service__index {
font-size: 80px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service__wrapper__3 .service__card .service__index {
font-size: 60px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__3 .service__card .service__index {
top: 23px;
font-size: 50px;
}
}
.service__wrapper__3 .service__card .service__icon {
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__3 .service__card .service__icon {
margin-bottom: 14px;
}
}
.service__wrapper__3 .service__card .service__icon i {
color: var(--tj-color-common-white);
}
.service__wrapper__3 .service__card .service__title {
margin-bottom: 20px;
max-width: 333px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__3 .service__card .service__title {
max-width: 100%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__3 .service__card .service__title {
margin-bottom: 12px;
}
}
.service__wrapper__3 .service__card .service__desc {
margin-bottom: 24px;
max-width: 335px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__3 .service__card .service__desc {
margin-bottom: 14px;
}
}
.service__wrapper__3 .service__card .tj-btn {
width: auto;
}
.service__wrapper__3 .service__card:hover .service__title a {
color: var(--tj-color-heading-primary);
}
.service__wrapper__3 .service__card:hover .service__desc {
color: var(--tj-color-text-body);
}
/* !END: Service CSS */
/**----------------------------------------
START: Portfolio CSS
----------------------------------------*/
.portfolio--7 {
padding-bottom: 148px;
margin-bottom: 29px;
position: relative;
z-index: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.portfolio--7 {
padding-bottom: 128px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio--7 {
padding-bottom: 108px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio--7 {
padding-bottom: 88px;
}
}
.portfolio--7 .section-heading__sub-title {
padding: 0;
background-color: transparent;
}
.portfolio--7 .section-heading__title {
color: var(--tj-color-common-white);
}
.portfolio--7 .portfolio__more {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 50%);
-ms-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
padding: 8px;
background-color: var(--tj-color-common-white);
border-radius: 70px;
}
.portfolio__wrapper__2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 30px;
padding: 0 15px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper__2 {
gap: 20px 15px;
padding: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper__2 {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.portfolio__wrapper__2 .portfolio__single {
padding: 30px;
background: var(--tj-color-theme-bg4);
backdrop-filter: blur(20px);
max-width: 475px;
width: 100%;
-webkit-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: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper__2 .portfolio__single {
padding: 15px 15px 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper__2 .portfolio__single {
max-width: 100%;
}
}
.portfolio__wrapper__2 .portfolio__single__img {
height: 385px;
width: 100%;
border-radius: 16px;
overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio__wrapper__2 .portfolio__single__img {
height: 350px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) {
.portfolio__wrapper__2 .portfolio__single__img {
border-radius: 12px;
height: 300px;
}
}
@media (max-width: 575px) {
.portfolio__wrapper__2 .portfolio__single__img {
height: 250px;
border-radius: 12px;
}
}
.portfolio__wrapper__2 .portfolio__single__img a {
height: 100%;
width: 100%;
}
.portfolio__wrapper__2 .portfolio__single__img img {
width: 100.3%;
max-width: 100.3%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.portfolio__wrapper__2 .portfolio__single__content {
position: static;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
visibility: visible;
padding: 0;
padding-top: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper__2 .portfolio__single__content {
padding: 0;
padding-top: 20px;
}
}
@media (max-width: 575px) {
.portfolio__wrapper__2 .portfolio__single__content {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
.portfolio__wrapper__2 .portfolio__single__tag {
border-radius: 50px;
border-color: var(--tj-color-border-4);
color: var(--tj-color-common-white);
font-size: 14px;
}
.portfolio__wrapper__2 .portfolio__single__tag:hover {
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
}
.portfolio__wrapper__2 .portfolio__single__title {
color: var(--tj-color-common-white);
max-width: 350px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio__wrapper__2 .portfolio__single__title {
font-size: 24px;
}
}
.portfolio__wrapper__2 .portfolio__single::after {
display: none;
}
.portfolio__wrapper__2 .portfolio__single__action {
margin-bottom: 10px;
}
.portfolio__wrapper__2 .portfolio__single__action a {
visibility: visible;
position: static;
-webkit-transform: none;
-ms-transform: none;
transform: none;
border: 0;
background: var(--tj-color-theme-primary);
-webkit-transform: rotate(-45deg) scale(0.4);
-ms-transform: rotate(-45deg) scale(0.4);
transform: rotate(-45deg) scale(0.4);
opacity: 0;
}
.portfolio__wrapper__2 .portfolio__single__action a i {
color: var(--tj-color-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio__wrapper__2 .portfolio__single__action a {
width: 60px;
height: 60px;
}
.portfolio__wrapper__2 .portfolio__single__action a i {
font-size: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio__wrapper__2 .portfolio__single__action a {
opacity: 1;
-webkit-transform: rotate(-45deg) scale(1);
-ms-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
}
}
.portfolio__wrapper__2 .portfolio__single:hover, .portfolio__wrapper__2 .portfolio__single.active {
max-width: 790px;
}
.portfolio__wrapper__2 .portfolio__single:hover .portfolio__single__action a, .portfolio__wrapper__2 .portfolio__single.active .portfolio__single__action a {
background: var(--tj-color-theme-primary);
-webkit-transform: rotate(-45deg) scale(1);
-ms-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
opacity: 1;
}
.portfolio__wrapper__2 .portfolio__single:hover .portfolio__single__action a i, .portfolio__wrapper__2 .portfolio__single.active .portfolio__single__action a i {
color: var(--tj-color-common-white);
}
/* !END: Portfolio CSS */
/**----------------------------------------
START: Team CSS
----------------------------------------*/
.team--2 .section-heading {
max-width: 420px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team--2 .section-heading {
max-width: 100%;
}
}
.team--2 .section-heading__sub-title {
padding: 0;
background-color: transparent;
color: var(--tj-color-theme-primary);
}
.team--2 .section-heading__sub-title::before {
background-color: var(--tj-color-theme-primary);
}
.team--2 .section-heading__title {
color: var(--tj-color-heading-primary);
}
.team__wrapper {
max-width: 870px;
-webkit-margin-start: auto;
margin-inline-start: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team__wrapper {
gap: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team__wrapper {
max-width: 100%;
}
}
.team__wrapper .team__socials {
border-radius: 50%;
}
.team__wrapper .team__socials .tj-socials--sm ul {
gap: 6px;
}
.team__wrapper .team__socials .tj-socials--sm ul li a {
width: 30px;
height: 30px;
}
.team__wrapper .team__socials .tj-socials--sm ul li a i {
font-size: 16px;
}
.team__wrapper .team__single {
width: calc(50% - 15px);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 40px 30px;
text-align: center;
border-radius: 10px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.team__wrapper .team__single {
padding: 30px 30px;
}
}
@media (max-width: 575px) {
.team__wrapper .team__single {
width: 100%;
padding-top: 35px;
}
}
.team__wrapper .team__single__img {
width: 308px;
height: 308px;
border-radius: 50%;
overflow: hidden;
border: 7px solid var(--tj-color-common-white);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.team__wrapper .team__single__img img {
border-radius: 50%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team__wrapper .team__single__img {
width: 240px;
height: 240px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.team__wrapper .team__single__img {
width: 200px;
height: 200px;
}
}
.team__wrapper .team__single__title {
font-size: var(--tj-fs-h4);
}
.team__wrapper .team__single__title a {
color: var(--tj-color-heading-primary);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.team__wrapper .team__single__title {
font-size: 22px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team__wrapper .team__single__title {
font-size: 20px;
}
}
.team__wrapper .team__single__title:hover a {
color: var(--tj-color-theme-primary);
}
.team__wrapper .team__single__desig {
color: var(--tj-color-theme-dark3);
}
.team__wrapper .team__single:hover .team__single__img {
border-color: transparent;
}
/* !END: Team CSS */
/**----------------------------------------
START: Theme Marquee CSS
----------------------------------------*/
.tj__marquee--2 {
position: relative;
overflow: hidden;
border-start-start-radius: 16px;
border-start-end-radius: 16px;
}
/** !END: Theme Marquee CSS */
/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.blog__single__wrapper__2--2 {
grid-template-columns: 100%;
}
.blog__single__wrapper__2--2 .blog__single {
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
transition: all var(--tj-td-standard) ease-in-out 0s;
}
.blog__single__wrapper__2--2 .blog__single__banner {
max-width: 307px;
height: 236px;
}
.blog__single__wrapper__2--2 .blog__single__content {
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-end: 0;
padding-inline-end: 0;
-webkit-margin-start: 105px;
margin-inline-start: 105px;
max-width: 532px;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.blog__single__wrapper__2--2 .blog__single__content .tj-btn-2 i {
font-size: 16px;
}
.blog__single__wrapper__2--2 .blog__single__content__tag {
padding: 3px 7px;
background-color: var(--tj-color-theme-dark);
color: var(--tj-color-common-white);
font-size: 16px;
border-radius: 6px;
}
.blog__single__wrapper__2--2 .blog__single__content__tag:hover {
background-color: var(--tj-color-theme-secondary);
color: var(--tj-color-common-white);
}
.blog__single__wrapper__2--2 .blog__single__content__list {
margin-bottom: 15px;
}
.blog__single__wrapper__2--2 .blog__single__title {
margin-bottom: 18px;
}
.blog__single__wrapper__2--2 .blog__single__title a {
display: inline;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, currentColor), to(currentColor));
background-image: linear-gradient(to right, currentColor 0, currentColor 100%);
background-position: 0 calc(100% - 3px);
background-repeat: no-repeat;
background-size: 0 1px;
}
.blog__single__wrapper__2--2 .blog__single__title:hover a {
color: var(--tj-color-heading-primary);
background-size: 100% 1px;
}
.blog__single__wrapper__2--2 .blog__single__date {
position: relative;
height: 90px;
background-color: var(--tj-color-common-white);
border-radius: 7px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.blog__single__wrapper__2--2 .blog__single__date__day {
padding: 13px 0 15px;
}
.blog__single__wrapper__2--2 .blog__single__date__month {
padding: 8px 0 4px;
color: var(--tj-color-theme-dark);
}
.blog__single__wrapper__2--2 .blog__single:hover {
background-color: var(--tj-color-theme-bg2);
}
.blog__single__wrapper__2--2 .blog__single:hover .blog__single__date__day {
background-color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.blog__single__wrapper__2--2 .blog__single__content {
-webkit-margin-start: 30px;
margin-inline-start: 30px;
max-width: 368px;
}
.blog__single__wrapper__2--2 .blog__single__date {
height: 80px;
}
.blog__single__wrapper__2--2 .blog__single__date__month {
padding-top: 6px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper__2--2 .blog__single__content {
-webkit-margin-start: 15px;
margin-inline-start: 15px;
max-width: 302px;
padding: 0;
}
.blog__single__wrapper__2--2 .blog__single__date {
position: absolute;
left: auto;
right: 30px;
top: 30px;
height: 80px;
}
.blog__single__wrapper__2--2 .blog__single__date__month {
padding-top: 6px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper__2--2 .blog__single {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.blog__single__wrapper__2--2 .blog__single__banner {
max-width: 100%;
}
.blog__single__wrapper__2--2 .blog__single__content {
-webkit-margin-start: 0;
margin-inline-start: 0;
max-width: 100%;
padding: 20px 5px 15px;
}
}
/* !END: Blog CSS */
/**----------------------------------------
START: Header CSS
----------------------------------------*/
.header--8 .header__wrapper {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.header--8 .header__wrapper > div:last-child {
margin-left: 0;
}
.header--8 .header__logo {
width: 133px;
}
.header--8.header {
max-width: calc(100% - 60px);
left: 30px;
right: 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.header--8.header {
max-width: calc(100% - 30px);
left: 15px;
right: 15px;
margin: 0;
}
}
.header--8.header .header__right .header__mobile-toggler {
border-radius: 100%;
}
.header--8.header .header__right .tj-btn__text {
padding: 15px 30px;
}
.header--8.header .header__right .tj-btn__icon {
width: 46px;
height: 46px;
}
.header--8.header .header__right .tj-btn > :nth-child(1) {
-webkit-margin-end: -46px;
margin-inline-end: -46px;
}
.header--8.header .header__right .tj-btn:hover > :nth-child(1) {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
.header--8.header .header__right .tj-btn:hover > :nth-child(3) {
-webkit-margin-start: -46px;
margin-inline-start: -46px;
}
.header--8.header--absolute {
margin-top: 30px;
border-radius: 0;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.header--8.header--absolute::after {
content: "";
width: 100%;
height: auto;
position: absolute;
bottom: -24px;
left: 0;
border-bottom: 1px solid var(--tj-color-border-4);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.header--8.header--absolute::after {
bottom: -10px;
}
}
@media (max-width: 575px) {
.header--8.header--absolute::after {
bottom: -5px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.header--8.header--absolute {
margin-top: 10px;
}
}
@media (max-width: 575px) {
.header--8.header--absolute {
margin-top: 0;
}
}
.header--8.header--absolute .mainmenu nav > ul > li > a {
padding: 10px 20px;
color: var(--tj-color-common-white);
}
.header--8.header--absolute .mainmenu nav > ul > li.has-dropdown > a::after {
color: var(--tj-color-common-white);
}
.header--8.header--absolute .mainmenu nav > ul > li .sub-menu {
border-radius: 12px;
}
.header--8.header--absolute .header__right .header__mobile-toggler {
border-color: var(--tj-color-border-4);
background-color: transparent;
}
.header--8.header--absolute .header__right .header__mobile-toggler span {
background-color: var(--tj-color-common-white);
}
.header--8.header-duplicate {
top: -120px;
}
.header--8.header-duplicate.sticky {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
top: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.header--8.header-duplicate.sticky {
margin: 0;
}
}
.header--8.header-duplicate .header__wrapper {
padding-left: 20px;
padding-right: 20px;
}
@media (max-width: 575px) {
.header--8.header-duplicate .header__wrapper {
padding-left: 15px;
padding-right: 15px;
}
}
/* !END: Header CSS */
/**----------------------------------------
START: Footer CSS
----------------------------------------*/
.footer--8 .footer__top {
padding: 80px 0;
background: linear-gradient(111deg, rgb(244, 68, 84) 0%, rgb(5, 76, 224) 50%);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--8 .footer__top {
padding: 60px 0;
}
}
.footer--8 .footer__top .h8-footer-top-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer--8 .footer__top .h8-footer-top-inner {
gap: 35px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--8 .footer__top .h8-footer-top-inner {
gap: 25px;
}
}
.footer--8 .footer__top .h8-footer-logo {
max-width: 492px;
width: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.footer--8 .footer__top .h8-footer-logo {
max-width: 420px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.footer--8 .footer__top .h8-footer-logo {
max-width: 400px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.footer--8 .footer__top .h8-footer-logo {
max-width: 320px;
}
}
@media (max-width: 575px) {
.footer--8 .footer__top .h8-footer-logo {
max-width: 280px;
}
}
.footer--8 .footer__top .h8-footer-desc-area {
max-width: 528px;
width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--8 .footer__top .h8-footer-desc-area {
max-width: 440px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--8 .footer__top .h8-footer-desc-area {
max-width: 100%;
}
}
.footer--8 .footer__top .h8-footer-desc-area .footer__desc {
font-size: 20px;
line-height: 1.45;
color: var(--tj-color-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--8 .footer__top .h8-footer-desc-area .footer__desc {
font-size: 18px;
}
}
.footer--8 .footer__top .h8-footer-desc-area .footer__share {
padding-top: 23px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--8 .footer__top .h8-footer-desc-area .footer__share {
padding-top: 16px;
}
}
.footer--8 .footer__top .h8-footer-desc-area .footer__share .tj-socials ul li {
line-height: 1;
}
.footer--8 .footer__top .h8-footer-desc-area .footer__share .tj-socials ul li a {
opacity: 0.35;
line-height: 1;
}
.footer--8 .footer__top .h8-footer-desc-area .footer__share .tj-socials ul li a i {
color: var(--tj-color-common-white);
position: relative;
}
.footer--8 .footer__top .h8-footer-desc-area .footer__share .tj-socials ul li a i::after {
content: "";
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
right: 1px;
background-color: var(--tj-color-theme-dark);
border-radius: 100%;
z-index: -1;
opacity: 0;
}
.footer--8 .footer__top .h8-footer-desc-area .footer__share .tj-socials ul li a:hover {
opacity: 1;
}
.footer--8 .footer__top .h8-footer-desc-area .footer__share .tj-socials ul li a:hover i::after {
opacity: 1;
}
.footer--8 .footer__inner {
background: transparent;
padding: 0;
margin-bottom: 0;
}
.footer--8 .footer__inner::after {
display: none;
}
.footer--8 .footer__main {
padding-top: 100px;
padding-bottom: 35px;
border-bottom: 1px solid var(--tj-color-border-5);
overflow: hidden;
position: relative;
z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--8 .footer__main {
padding-top: 60px;
padding-bottom: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--8 .footer__widget__wrapper--2 .footer__title {
margin-bottom: 30px;
}
}
.footer--8 .footer__widget__wrapper--2 .footer__widget .tj-socials ul li {
line-height: 1;
}
.footer--8 .footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li a {
color: var(--tj-color-common-white4);
}
.footer--8 .footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li a:hover {
color: var(--tj-color-theme-primary);
}
.footer--8 .footer__widget__wrapper--2 .footer__widget--services {
margin-left: 0;
position: relative;
}
.footer--8 .footer__widget__wrapper--2 .footer__widget--services::after, .footer--8 .footer__widget__wrapper--2 .footer__widget--services::before {
content: "";
display: block;
width: 1px;
height: 1000%;
background-color: var(--tj-color-border-5);
position: absolute;
top: -300%;
}
.footer--8 .footer__widget__wrapper--2 .footer__widget--services::before {
left: -74px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget--services::before {
left: -35px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget--services::before {
left: -65px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget--services::before {
left: -100%;
width: 1000%;
height: 1px;
top: 0;
}
}
.footer--8 .footer__widget__wrapper--2 .footer__widget--services::after {
right: -60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget--services::after {
right: -30px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget--services::after {
display: none;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget--services::after {
left: -100%;
width: 1000%;
height: 1px;
top: auto;
bottom: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget--services {
padding: 40px 0 26px 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget {
width: 100%;
max-width: calc(45% - 20px);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget {
margin-bottom: 40px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget--company {
margin-bottom: 0;
padding: 0 0 26px 0;
}
}
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe {
max-width: 332px;
padding: 0;
margin: 0;
}
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe .footer__title {
color: var(--tj-color-common-white);
font-size: 32px;
line-height: 1.25;
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-sbold);
letter-spacing: -0.02em;
margin-top: -7px;
margin-bottom: 22px;
opacity: 1;
text-transform: inherit;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe .footer__title {
font-size: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe .footer__title {
font-size: 28px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe .footer__title {
font-size: 24px;
}
}
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=email] {
background-color: var(--tj-color-theme-bg4);
backdrop-filter: blur(20px);
outline: 0;
border: 1px solid var(--tj-color-border-5);
color: var(--tj-color-common-white);
}
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=email]::-webkit-input-placeholder {
color: var(--tj-color-common-white4);
}
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=email]::-moz-placeholder {
color: var(--tj-color-common-white4);
}
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=email]:-ms-input-placeholder {
color: var(--tj-color-common-white4);
}
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=email]::-ms-input-placeholder {
color: var(--tj-color-common-white4);
}
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=email]::placeholder {
color: var(--tj-color-common-white4);
}
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form button::before {
height: 100%;
border-color: var(--tj-color-border-5);
}
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=checkbox]::before {
color: var(--tj-color-theme-dark);
}
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=checkbox]:checked {
background-color: var(--tj-color-common-white);
border-color: var(--tj-color-common-white);
}
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form label {
color: var(--tj-color-common-white4);
}
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form label a:not(:hover) {
color: var(--tj-color-common-white4);
}
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe::before {
left: -70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe::before {
left: -35px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe::before {
display: none;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe::before {
left: -150%;
}
}
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe::after {
display: none;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe {
max-width: 300px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe {
width: 100%;
max-width: calc(45% - 20px);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--8 .footer__widget__wrapper--2 .footer__widget__subscribe {
max-width: 100%;
padding: 40px 0 35px;
}
}
.footer--8 .footer__widget__wrapper--2 .footer__info .footer__info__active-hours ul li, .footer--8 .footer__widget__wrapper--2 .footer__info .footer__info__list ul li .link, .footer--8 .footer__widget__wrapper--2 .footer__info .footer__info__address {
color: var(--tj-color-common-white4);
}
.footer--8 .footer__widget__wrapper--2 .footer__info .footer__info__list ul {
margin-bottom: 8px;
}
.footer--8 .footer__widget__wrapper--2 .footer__info .footer__info__list ul li:not(:last-child) {
margin-bottom: 5px;
}
.footer--8 .footer__widget__wrapper--2 .footer__info .footer__info__list ul li .link:hover {
color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--8 .footer__widget__wrapper--2 .footer__info {
margin-top: 0;
}
}
.footer--8 .footer__copyright {
border-top: 0;
}
.footer--8 .footer__copyright__wrapper {
border: 0;
margin: 0;
}
.footer--8 .footer__copyright__text p {
color: var(--tj-color-common-white2);
}
.footer--8 .footer__copyright__text p a {
color: var(--tj-color-common-white);
}
.footer--8 .footer__copyright__text p a:hover {
color: var(--tj-color-theme-primary);
}
.footer--8 .footer__copyright__menu ul li > a {
color: var(--tj-color-common-white2);
}
.footer--8 .footer__copyright__menu ul li > a:hover {
color: var(--tj-color-theme-primary);
}
.footer--8 .footer__copyright__menu ul li > a::before {
background-color: var(--tj-color-common-white2);
}
/* !END: Footer CSS */
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.hero--9 {
position: relative;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: var(--tj-color-theme-dark);
z-index: 0;
margin-bottom: 30px;
}
.hero--9 .hero__inner {
padding-top: 200px;
padding-bottom: 80px;
overflow: visible;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.hero--9 .hero__inner {
min-height: 710px;
padding-top: 180px;
padding-bottom: 70px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero--9 .hero__inner {
min-height: 680px;
padding-top: 150px;
padding-bottom: 60px;
}
}
@media (max-width: 575px) {
.hero--9 .hero__inner {
min-height: 670px;
padding-top: 120px;
padding-bottom: 40px;
}
}
.hero--9 .hero__content {
max-width: 1080px;
width: 100%;
-webkit-margin-start: 145px;
margin-inline-start: 145px;
}
.hero--9 .hero__content .tj-btn--3 {
-webkit-margin-start: 355px;
margin-inline-start: 355px;
}
.hero--9 .hero__content .tj-btn--3 .tj-btn__icon {
background-color: transparent;
border: 1px solid var(--tj-color-common-white);
}
.hero--9 .hero__content .tj-btn--3 .tj-btn__text {
background-color: transparent;
border: 1px solid var(--tj-color-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--9 .hero__content .tj-btn--3 {
-webkit-margin-start: 270px;
margin-inline-start: 270px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--9 .hero__content .tj-btn--3 {
-webkit-margin-start: 245px;
margin-inline-start: 245px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--9 .hero__content .tj-btn--3 {
-webkit-margin-start: 195px;
margin-inline-start: 195px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero--9 .hero__content .tj-btn--3 {
-webkit-margin-start: 160px;
margin-inline-start: 160px;
}
}
@media (max-width: 575px) {
.hero--9 .hero__content .tj-btn--3 {
-webkit-margin-start: 0;
margin-inline-start: 0;
margin-top: 10px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--9 .hero__content {
max-width: 910px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--9 .hero__content {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--9 .hero__content {
-webkit-padding-start: 110px;
padding-inline-start: 110px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--9 .hero__content {
-webkit-padding-start: 90px;
padding-inline-start: 90px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--9 .hero__content {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
}
.hero--9 .hero__title {
font-size: 144px;
font-weight: var(--tj-fw-sbold);
line-height: 0.972;
letter-spacing: -0.025em;
color: var(--tj-color-common-white);
position: relative;
}
.hero--9 .hero__title span {
color: inherit;
-webkit-padding-start: 355px;
padding-inline-start: 355px;
}
.hero--9 .hero__title span:not(.circle):has(img) {
display: inline-block;
margin-right: 6px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--9 .hero__title {
max-width: 100%;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--9 .hero__title {
font-size: 110px;
}
.hero--9 .hero__title span {
-webkit-padding-start: 270px;
padding-inline-start: 270px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--9 .hero__title {
font-size: 100px;
}
.hero--9 .hero__title span {
-webkit-padding-start: 245px;
padding-inline-start: 245px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--9 .hero__title {
font-size: 80px;
}
.hero--9 .hero__title span {
-webkit-padding-start: 195px;
padding-inline-start: 195px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero--9 .hero__title {
font-size: 66px;
}
.hero--9 .hero__title span {
-webkit-padding-start: 160px;
padding-inline-start: 160px;
}
}
@media (max-width: 575px) {
.hero--9 .hero__title {
font-size: 44px;
line-height: 1.15;
}
.hero--9 .hero__title span {
-webkit-padding-start: 110px;
padding-inline-start: 110px;
}
}
.hero--9 .hero__title .circle-wrap {
position: absolute;
width: 120px;
height: 120px;
top: calc(50% + 5px);
inset-inline-start: 230px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0;
}
.hero--9 .hero__title .circle-wrap .rotate-image {
position: absolute;
inset-inline-start: 50%;
top: 50%;
width: 100%;
height: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0;
-webkit-animation: rotateImg 12s infinite linear;
animation: rotateImg 12s infinite linear;
}
.hero--9 .hero__title .circle-wrap .rotate-image textPath {
fill: var(--tj-color-common-white);
}
.hero--9 .hero__title .circle-wrap .circle {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 75px;
height: 75px;
font-size: 15px;
color: var(--tj-color-common-white);
background: var(--tj-color-theme-primary);
border-radius: 50%;
text-decoration: none;
line-height: 1;
z-index: 5;
padding: 0;
}
.hero--9 .hero__title .circle-wrap:hover .circle {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
.hero--9 .hero__title .circle-wrap:hover .rotate-image {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--9 .hero__title .circle-wrap {
width: 100px;
height: 100px;
inset-inline-start: 160px;
}
.hero--9 .hero__title .circle-wrap .circle {
width: 60px;
height: 60px;
font-size: 13px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--9 .hero__title .circle-wrap {
inset-inline-start: 130px;
top: calc(50% + 10px);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--9 .hero__title .circle-wrap {
inset-inline-start: 95px;
top: calc(50% + 15px);
width: 90px;
height: 90px;
}
.hero--9 .hero__title .circle-wrap .circle {
width: 54px;
height: 54px;
font-size: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero--9 .hero__title .circle-wrap {
inset-inline-start: 60px;
top: calc(50% + 20px);
}
}
@media (max-width: 575px) {
.hero--9 .hero__title .circle-wrap {
inset-inline-start: 0;
top: 10px;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
}
}
.hero--9 .hero__desc {
color: var(--tj-color-common-white);
font-size: var(--tj-fs-h5);
font-weight: var(--tj-fw-medium);
margin-bottom: 24px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--9 .hero__desc {
font-size: 18px;
}
}
.hero--9 .hero__bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: end;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 40px;
margin-top: -116px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--9 .hero__bottom {
margin-top: -80px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--9 .hero__bottom {
margin-top: -50px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--9 .hero__bottom {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
margin-top: 40px;
}
}
.hero--9 .hero__banner {
max-width: 263px;
width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.hero--9 .hero__banner {
max-width: 240px;
}
}
.hero--9 .hero__tags {
max-width: 350px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.hero--9 .hero__tags a {
color: var(--tj-color-common-white);
font-size: 16px;
font-weight: var(--tj-fw-medium);
line-height: 1;
padding: 13px 20px;
border-radius: 50px;
border: 1px solid var(--tj-color-border-9);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.hero--9 .hero__tags a:hover {
background-color: var(--tj-color-theme-secondary);
border-color: var(--tj-color-theme-secondary);
}
@-webkit-keyframes rotateImg {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes rotateImg {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* !END: Hero CSS */
/**----------------------------------------
START: Funfact CSS
----------------------------------------*/
.features__single {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px;
position: relative;
z-index: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.features__single {
gap: 20px;
}
}
.features__single .funfact-item {
background-color: var(--tj-color-theme-bg2);
padding: 38px 30px 47px 30px;
border-radius: 10px;
}
.features__single .funfact-item .number {
font-size: 86px;
font-weight: var(--tj-fw-bold);
font-family: var(--tj-ff-heading);
color: var(--tj-color-heading-primary);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
line-height: 0.8;
}
.features__single .funfact-item .number .odometer.odometer-auto-theme {
line-height: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.features__single .funfact-item .number {
font-size: 76px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.features__single .funfact-item .number {
font-size: 60px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.features__single .funfact-item .number {
font-size: 50px;
}
}
.features__single .funfact-item .text {
margin-top: 6px;
margin-bottom: 22px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.features__single .funfact-item {
padding: 22px 30px 40px 30px;
}
}
@media (max-width: 575px) {
.features__single .funfact-item {
padding: 25px 20px 40px 20px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.features__single .tj-u-shape {
left: 50%;
top: 100%;
-webkit-transform: translateX(-50%) translateY(-15px) rotate(90deg);
-ms-transform: translateX(-50%) translateY(-15px) rotate(90deg);
transform: translateX(-50%) translateY(-15px) rotate(90deg);
}
}
.features__single > .tj-u-shape {
background: var(--tj-color-theme-bg2);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.features__single > .tj-u-shape {
left: 50%;
top: 100%;
-webkit-transform: translateX(-50%) translateY(-15px) rotate(90deg);
-ms-transform: translateX(-50%) translateY(-15px) rotate(90deg);
transform: translateX(-50%) translateY(-15px) rotate(90deg);
}
}
.features-item-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 30px;
height: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.features-item-wrap {
gap: 20px;
}
}
.features-item-wrap .service__card--3 {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
background: var(--tj-color-theme-bg1);
border-radius: 10px;
padding: 35px 30px 43px;
}
.features-item-wrap .service__card--3 .service__icon {
margin-bottom: 38px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 575px) {
.features-item-wrap .service__card--3 .service__icon {
margin-bottom: 25px;
width: 70px;
height: 70px;
font-size: 46px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.features-item-wrap .service__card--3 .service__title {
font-size: 20px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 575px) {
.features-item-wrap .service__card--3 {
padding: 35px 20px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.features-item-wrap .service__card--3 {
-webkit-box-flex: 100%;
-ms-flex: 100%;
flex: 100%;
}
}
.h8-feature-item-right {
padding: 40px 30px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 10px;
}
@media (max-width: 575px) {
.h8-feature-item-right {
padding: 35px 20px;
}
}
.h8-feature-item-right .feature__content {
max-width: 360px;
width: 100%;
min-height: 242px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.h8-feature-item-right .feature__content .tj-btn--underline-2 {
color: var(--tj-color-common-white);
}
.h8-feature-item-right .feature__content .tj-btn--underline-2::before {
background-color: var(--tj-color-common-white);
}
.h8-feature-item-right .feature__content .tj-btn--underline-2 i {
color: var(--tj-color-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.h8-feature-item-right .feature__content {
min-height: 232px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h8-feature-item-right .feature__content {
min-height: 215px;
}
}
.h8-feature-item-right .feature__title {
color: var(--tj-color-common-white);
margin-bottom: 18px;
margin-top: -8px;
}
.h8-feature-item-right .feature__desc {
color: var(--tj-color-common-white2);
}
/* !END: Funfact CSS */
/**----------------------------------------
START: Abour CSS
----------------------------------------*/
.h8-about-img {
border-radius: 16px;
overflow: hidden;
height: 100%;
position: relative;
}
.h8-about-img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.h8-about-img .h8-about-marquee {
position: absolute;
top: 55%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.h8-about-marquee .service-marquee__item .service-marquee__title {
font-family: var(--tj-ff-body);
color: transparent;
-webkit-text-stroke: 1px var(--tj-color-common-white);
opacity: 1;
margin-bottom: 16px;
}
.h8-about-marquee .service-marquee__item .service-marquee__img {
width: 56px;
-webkit-animation: rotateImg2 6s infinite linear;
animation: rotateImg2 6s infinite linear;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.h8-about-marquee .service-marquee__item .service-marquee__img {
width: 48px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h8-about-marquee .service-marquee__item .service-marquee__img {
width: 38px;
}
}
.h8-about-area {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 16px;
padding: 120px 60px;
}
.h8-about-area .about__content {
max-width: 570px;
padding-left: 0;
margin-bottom: 0;
}
.h8-about-area .about__desc {
max-width: 510px;
}
.h8-about-area .about__action {
margin-top: 22px;
}
@media (max-width: 575px) {
.h8-about-area .about__action {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.h8-about-area .section-heading__title {
margin-bottom: 14px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.h8-about-area {
padding: 100px 30px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.h8-about-area {
padding: 80px 20px;
margin-bottom: 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h8-about-area {
padding: 60px 15px;
margin-bottom: 20px;
}
}
.funfact-area.style-6 {
margin-top: 60px;
}
.funfact-area.style-6 .funfact-item {
background: var(--tj-color-common-white);
border-radius: 8px;
padding: 14px 20px 22px 20px;
text-align: start;
-webkit-box-shadow: var(--tj-shadow-theme-primary);
box-shadow: var(--tj-shadow-theme-primary);
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.funfact-area.style-6 .funfact-item .number {
color: var(--tj-color-heading-primary);
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.style-6 .funfact-item .number {
font-size: 60px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-6 .funfact-item .number {
font-size: 40px;
}
}
.funfact-area.style-6 .funfact-item .text {
color: var(--tj-color-text-body);
font-size: 18px;
line-height: 1.556;
margin-top: 8px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-6 .funfact-item .text {
font-size: 16px;
}
}
.funfact-area.style-6 .funfact-item::after {
display: none;
}
@media (max-width: 575px) {
.funfact-area.style-6 .funfact-item {
-webkit-box-flex: 100%;
-ms-flex: 100%;
flex: 100%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-6 {
margin-top: 40px;
}
}
/* !END: About CSS */
/**----------------------------------------
START: Service CSS
----------------------------------------*/
.h8-service .section-heading__right {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 10px;
}
.h8-service .section-heading__right .swiper-button-prev,
.h8-service .section-heading__right .swiper-button-next {
opacity: 1;
visibility: visible;
position: static;
-webkit-transform: none;
-ms-transform: none;
transform: none;
margin: 0;
}
.service__slider__2 .service__card {
background: var(--tj-color-theme-bg1);
border-radius: 10px;
border: 0;
padding-top: 122px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__slider__2 .service__card {
padding-top: 105px;
}
}
.service__slider__2 .service__card::after {
display: none;
}
.service__slider__2 .service__card .service__icon__wrap {
background-color: var(--tj-color-common-white);
border-radius: 0 0 10px 0;
position: absolute;
top: 0;
left: 0;
z-index: -1;
padding: 0 15px 15px 0;
}
.service__slider__2 .service__card .service__icon__wrap::after, .service__slider__2 .service__card .service__icon__wrap::before {
content: "";
position: absolute;
background-color: transparent;
top: 0px;
right: -20px;
width: 20px;
height: 10px;
-webkit-box-shadow: 10px 0 0 0 var(--tj-color-common-white);
box-shadow: 10px 0 0 0 var(--tj-color-common-white);
border-radius: 0 10px 0 0;
z-index: -1;
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
.service__slider__2 .service__card .service__icon__wrap::after {
top: auto;
right: auto;
bottom: -10px;
left: 0;
}
.service__slider__2 .service__card .service__icon {
font-size: 47px;
background-color: var(--tj-color-theme-secondary);
border-color: var(--tj-color-theme-secondary);
border-radius: 10px;
margin-bottom: 0;
}
.service__slider__2 .service__card .service__icon i {
color: var(--tj-color-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__slider__2 .service__card .service__icon {
width: 70px;
height: 70px;
font-size: 44px;
}
}
.service__slider__2 .service__card .sl__num {
color: var(--tj-color-heading-primary);
font-size: 14px;
line-height: 1;
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-bold);
opacity: 0.3;
position: absolute;
top: 30px;
right: 30px;
}
.service__slider__2 .service__card .service__title {
margin-bottom: 15px;
overflow: hidden;
}
.service__slider__2 .service__card .service__title a span {
text-shadow: 0 35px 0;
}
.service__slider__2 .service__card .service__title a:hover span {
-webkit-transform: translateY(-35px);
-ms-transform: translateY(-35px);
transform: translateY(-35px);
}
.service__slider__2 .service__card .service__desc {
margin-bottom: 26px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__slider__2 .service__card .service__desc {
margin-bottom: 15px;
}
}
.service__slider__2 .service__card .tj-btn-2 {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 4px;
overflow: hidden;
}
.service__slider__2 .service__card .tj-btn-2 span {
text-shadow: 0 22px 0;
text-indent: -100px;
}
.service__slider__2 .service__card .tj-btn-2 i {
color: inherit;
font-size: 18px;
}
.service__slider__2 .service__card .tj-btn-2:hover span {
-webkit-transform: translateY(-22px);
-ms-transform: translateY(-22px);
transform: translateY(-22px);
}
.service__slider__2 .service__card:hover {
background: var(--tj-color-theme-bg2);
}
.service__slider__2 .service__card:hover .service__icon {
background-color: var(--tj-color-theme-primary);
border-color: var(--tj-color-theme-primary);
}
.service__slider__2 .service__card:hover .tj-btn-2,
.service__slider__2 .service__card:hover .service__title a,
.service__slider__2 .service__card:hover .service__desc {
color: inherit;
}
.service__slider__2 .service__card:hover .tj-btn-2 span {
text-indent: 0;
}
.service__slider__2 .swiper-pagination-bullet {
background-color: var(--tj-color-theme-dark);
}
.service__slider__2 .swiper-pagination-bullet:hover {
opacity: 1;
}
/* !END: Service CSS */
/**----------------------------------------
START: Award CSS
----------------------------------------*/
.h8-award .award__banner img {
border-radius: 10px;
}
.h8-award .award__content__list {
gap: 0;
padding-left: 48px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h8-award .award__content__list {
padding-left: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.h8-award .award__content__list {
padding-left: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h8-award .award__content__list {
padding-left: 0;
}
}
.h8-award .award__content__list__item {
padding-top: 38px;
padding-bottom: 38px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h8-award .award__content__list__item {
padding-top: 25px;
padding-bottom: 25px;
}
}
.h8-award .award__content__list__item::before {
background-color: var(--tj-color-theme-dark);
opacity: 0.12;
}
.h8-award .award__content__list__item:first-child::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 1px;
background-color: var(--tj-color-theme-dark);
opacity: 0.12;
}
.h8-award .award__content__list__item:hover::before {
opacity: 1;
}
.h8-award .award__content__list__item:hover .award__content__list__title {
padding-left: 25px;
}
.h8-award .award__content__list__item:hover .award__content__list__icon {
-webkit-transform: rotate(-45deg) scale(1);
-ms-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
}
.h8-award .award__content__list__icon {
font-size: 20px;
color: var(--tj-color-theme-dark);
-webkit-transform: rotate(-45deg) scale(0);
-ms-transform: rotate(-45deg) scale(0);
transform: rotate(-45deg) scale(0);
position: absolute;
top: 2px;
left: 0;
}
.h8-award .award__content__list__title {
margin-bottom: 0;
position: relative;
gap: 20px;
cursor: default;
}
.h8-award .award__content__list__title__year {
font-size: 18px;
}
/* !END: Award CSS */
/**----------------------------------------
START: Portfolio CSS
----------------------------------------*/
.h8-portfolio .section-heading__title {
margin-bottom: 25px;
}
.h8-portfolio-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.h8-portfolio-wrapper {
gap: 40px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h8-portfolio-wrapper {
gap: 30px;
}
}
.h8-portfolio-single.portfolio__single {
max-width: 630px;
width: 100%;
padding: 30px;
background-color: var(--tj-color-theme-bg1);
border-radius: 14px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.h8-portfolio-single.portfolio__single {
max-width: 550px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h8-portfolio-single.portfolio__single {
max-width: 490px;
padding: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h8-portfolio-single.portfolio__single {
max-width: 100%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h8-portfolio-single.portfolio__single {
padding: 15px 15px 20px 15px;
}
}
.h8-portfolio-single.portfolio__single.portfolio-small {
max-width: 475px;
height: calc(100% - 120px);
}
.h8-portfolio-single.portfolio__single.portfolio-small .portfolio__single__img {
height: 280px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.h8-portfolio-single.portfolio__single.portfolio-small .portfolio__single__img {
height: 400px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.h8-portfolio-single.portfolio__single.portfolio-small {
max-width: 420px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h8-portfolio-single.portfolio__single.portfolio-small {
max-width: 380px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h8-portfolio-single.portfolio__single.portfolio-small {
max-width: 100%;
}
}
.h8-portfolio-single.portfolio__single::after {
display: none;
}
.h8-portfolio-single.portfolio__single .portfolio__single__img {
border-radius: 12px;
overflow: hidden;
position: relative;
height: 400px;
}
.h8-portfolio-single.portfolio__single .portfolio__single__img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h8-portfolio-single.portfolio__single .portfolio__single__img {
height: 370px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h8-portfolio-single.portfolio__single .portfolio__single__img {
height: 280px;
}
}
.h8-portfolio-single.portfolio__single .portfolio__single__action a {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
-ms-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
background-color: var(--tj-color-common-white);
}
.h8-portfolio-single.portfolio__single .portfolio__single__action a i {
color: var(--tj-color-theme-dark);
}
.h8-portfolio-single.portfolio__single .portfolio__single__action a:hover {
background-color: var(--tj-color-theme-primary);
border-color: var(--tj-color-theme-primary);
-webkit-transform: translate(-50%, -50%) rotate(0deg) !important;
-ms-transform: translate(-50%, -50%) rotate(0deg) !important;
transform: translate(-50%, -50%) rotate(0deg) !important;
}
.h8-portfolio-single.portfolio__single .portfolio__single__action a:hover i {
color: var(--tj-color-common-white);
}
.h8-portfolio-single.portfolio__single .portfolio__single__content {
position: static;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
visibility: visible;
padding: 0;
padding-top: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h8-portfolio-single.portfolio__single .portfolio__single__content {
padding: 0;
padding-top: 20px;
}
}
@media (max-width: 575px) {
.h8-portfolio-single.portfolio__single .portfolio__single__content {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
.h8-portfolio-single.portfolio__single .portfolio__single__tag {
border-radius: 50px;
border-color: var(--tj-color-theme-secondary);
background: var(--tj-color-theme-secondary);
color: var(--tj-color-common-white);
font-size: 14px;
}
.h8-portfolio-single.portfolio__single .portfolio__single__tag:hover {
border-color: var(--tj-color-theme-primary) !important;
background: var(--tj-color-theme-primary);
color: var(--tj-color-common-white) !important;
}
.h8-portfolio-single.portfolio__single .portfolio__single__title {
color: var(--tj-color-heading-primary);
max-width: 350px;
margin-bottom: 0;
}
.h8-portfolio-single.portfolio__single .portfolio__single__title:hover a {
letter-spacing: inherit;
color: var(--tj-color-theme-primary);
}
/* !END: Portfolio CSS */
/**----------------------------------------
START: Testimonials CSS
----------------------------------------*/
.h8-testimonials .section-heading__title {
color: var(--tj-color-common-white);
}
.h8-testimonials-wrapper {
position: relative;
z-index: 0;
margin-top: 50px;
}
.h8-testimonials-wrapper .testimonials__slider__8 {
overflow: visible;
}
.h8-testimonials-wrapper .testimonials__slider__8 .swiper-button-prev,
.h8-testimonials-wrapper .testimonials__slider__8 .swiper-rtl .swiper-button-next {
left: 150px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.h8-testimonials-wrapper .testimonials__slider__8 .swiper-button-prev,
.h8-testimonials-wrapper .testimonials__slider__8 .swiper-rtl .swiper-button-next {
left: 125px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h8-testimonials-wrapper .testimonials__slider__8 .swiper-button-prev,
.h8-testimonials-wrapper .testimonials__slider__8 .swiper-rtl .swiper-button-next {
left: 98px;
}
}
.h8-testimonials-wrapper .testimonials__slider__8 .swiper-button-next,
.h8-testimonials-wrapper .testimonials__slider__8 .swiper-rtl .swiper-button-prev {
right: 150px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.h8-testimonials-wrapper .testimonials__slider__8 .swiper-button-next,
.h8-testimonials-wrapper .testimonials__slider__8 .swiper-rtl .swiper-button-prev {
right: 125px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h8-testimonials-wrapper .testimonials__slider__8 .swiper-button-next,
.h8-testimonials-wrapper .testimonials__slider__8 .swiper-rtl .swiper-button-prev {
right: 98px;
}
}
.h8-testimonials-wrapper .testimonials__slider__item {
background: transparent;
padding: 0;
border: 0;
opacity: 0.3;
border-radius: 10px;
}
.h8-testimonials-wrapper .testimonials__inner {
background-color: var(--tj-color-theme-bg4);
backdrop-filter: blur(20px);
padding: 45px;
-webkit-mask-image: url(../img/shapes/test-bg-shape.svg);
mask-image: url(../img/shapes/test-bg-shape.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-position: top center;
mask-position: top center;
border-radius: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h8-testimonials-wrapper .testimonials__inner {
padding: 40px 35px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.h8-testimonials-wrapper .testimonials__inner {
padding: 40px 20px;
}
}
@media (max-width: 575px) {
.h8-testimonials-wrapper .testimonials__inner {
padding: 25px 20px;
}
}
.h8-testimonials-wrapper .testimonials__qoute {
width: 98px;
height: 98px;
font-size: 50px;
top: -50px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
color: var(--tj-color-common-white);
background: -webkit-gradient(linear, left top, left bottom, from(#f44454), to(#054ce0));
background: linear-gradient(180deg, #f44454 0%, #054ce0 100%);
border: 0;
}
.h8-testimonials-wrapper .testimonials__qoute i {
-webkit-transform: scale(-1);
-ms-transform: scale(-1);
transform: scale(-1);
}
.h8-testimonials-wrapper .testimonials__qoute::after {
display: none;
}
.h8-testimonials-wrapper .testimonials__desc {
font-size: 26px;
line-height: 1.5;
color: var(--tj-color-common-white4);
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-medium);
letter-spacing: -0.02em;
text-align: center;
padding-top: 35px;
padding-bottom: 40px;
margin-bottom: 22px;
border-color: var(--tj-color-border-4);
max-width: 860px;
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: auto;
margin-inline-end: auto;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h8-testimonials-wrapper .testimonials__desc {
font-size: 24px;
padding-top: 30px;
padding-bottom: 25px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.h8-testimonials-wrapper .testimonials__desc {
font-size: 22px;
padding-top: 25px;
padding-bottom: 20px;
}
}
@media (max-width: 575px) {
.h8-testimonials-wrapper .testimonials__desc {
font-size: 20px;
padding-top: 25px;
padding-bottom: 15px;
}
}
.h8-testimonials-wrapper .testimonials__author {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.h8-testimonials-wrapper .testimonials__author__info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 4px;
}
.h8-testimonials-wrapper .testimonials__author__name {
color: var(--tj-color-common-white);
}
.h8-testimonials-wrapper .testimonials__author__desig {
color: var(--tj-color-common-white5);
}
.h8-testimonials-wrapper .testimonials__rating {
margin-bottom: 0;
}
.h8-testimonials-wrapper .testimonials__rating .star-ratings {
letter-spacing: -1px;
}
.h8-testimonials-wrapper .swiper-slide-active .testimonials__slider__item {
opacity: 1;
}
.h8-testimonials-wrapper .swiper-pagination-bullet {
background: var(--tj-color-common-white);
}
/* !END: Testimonials CSS */
/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.h8-blog .section-heading__title {
margin-bottom: 15px;
}
.blog__single__wrapper.h8-blog-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px;
}
.blog__single__wrapper.h8-blog-wrapper .blog__single {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 15px;
background-color: var(--tj-color-theme-bg1);
border-radius: 12px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper.h8-blog-wrapper .blog__single {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__banner {
max-width: 260px;
width: 100%;
height: 260px;
margin: 0;
border-radius: 10px;
}
.blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__banner a {
height: 100%;
}
.blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__banner a img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__banner {
max-width: 100%;
}
}
@media (max-width: 575px) {
.blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__banner {
height: 220px;
}
}
.blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__content {
background: transparent;
padding: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__content {
padding: 20px 0 10px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__title {
font-size: 24px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__title {
font-size: 20px;
}
}
.blog__single__wrapper.h8-blog-wrapper .blog__single__title {
font-size: 32px;
margin-bottom: 20px;
}
.blog__single__wrapper.h8-blog-wrapper .blog__single__title a {
color: inherit;
background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
background-image: linear-gradient(to bottom, currentColor 0%, currentColor 100%);
background-size: 0 2px;
background-repeat: no-repeat;
background-position: 0 92%;
display: inline;
}
.blog__single__wrapper.h8-blog-wrapper .blog__single__title a:hover {
background-size: 100% 2px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper.h8-blog-wrapper .blog__single__title a {
background-size: 0 1px;
background-position: 0 96%;
}
.blog__single__wrapper.h8-blog-wrapper .blog__single__title a:hover {
background-size: 100% 1px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.blog__single__wrapper.h8-blog-wrapper .blog__single__title {
font-size: 24px;
margin-bottom: 18px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper.h8-blog-wrapper .blog__single__title {
font-size: 20px;
margin-bottom: 16px;
}
}
.blog__single__wrapper.h8-blog-wrapper .blog__single__content__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 24px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 16px;
}
.blog__single__wrapper.h8-blog-wrapper .blog__single__content__list li {
position: relative;
}
.blog__single__wrapper.h8-blog-wrapper .blog__single__content__list li:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
width: 4px;
height: 4px;
background-color: var(--tj-color-theme-dark);
border-radius: 100%;
-webkit-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
transform: translate(10px, -50%);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.blog__single__wrapper.h8-blog-wrapper .blog__single__content__list {
margin-bottom: 12px;
}
}
.blog__single__wrapper.h8-blog-wrapper .blog__single__content__tag {
font-family: var(--tj-ff-body);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 16px;
line-height: 1;
padding: 3px 8px 3px;
color: var(--tj-color-common-white);
background: var(--tj-color-theme-secondary);
border: 1px solid var(--tj-color-theme-secondary);
letter-spacing: 0;
border-radius: 15px;
}
.blog__single__wrapper.h8-blog-wrapper .blog__single__content__tag:hover {
border-color: var(--tj-color-theme-primary);
background-color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.blog__single__wrapper.h8-blog-wrapper .blog__single__content__tag {
font-size: 14px;
}
}
.blog__single__wrapper.h8-blog-wrapper .blog__single__content__date {
color: var(--tj-color-text-body);
font-size: 14px;
}
/* !END: Blog CSS */
/**----------------------------------------
START: Header CSS
----------------------------------------*/
.header__mobile-toggler--2 {
padding: 14px 14px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 3px;
will-change: transform;
-webkit-transition-delay: 0.17s;
transition-delay: 0.17s;
}
.header__mobile-toggler--2 span {
width: 4px;
height: 4px;
border-radius: 50%;
will-change: transform;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.header__mobile-toggler--2 span:nth-child(2), .header__mobile-toggler--2 span:last-child {
width: 4px;
height: 4px;
}
.header__mobile-toggler--2 span:nth-child(2) {
-webkit-transition-delay: 0.03s;
transition-delay: 0.03s;
}
.header__mobile-toggler--2 span:nth-child(3) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.header__mobile-toggler--2 span:nth-child(4) {
-webkit-transition-delay: 0.07s;
transition-delay: 0.07s;
}
.header__mobile-toggler--2 span:nth-child(5) {
-webkit-transition-delay: 0.09s;
transition-delay: 0.09s;
}
.header__mobile-toggler--2 span:nth-child(6) {
-webkit-transition-delay: 0.11s;
transition-delay: 0.11s;
}
.header__mobile-toggler--2 span:nth-child(7) {
-webkit-transition-delay: 0.13s;
transition-delay: 0.13s;
}
.header__mobile-toggler--2 span:nth-child(8) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.header__mobile-toggler--2 span:last-child {
-webkit-transition-delay: 0.17s;
transition-delay: 0.17s;
}
.header__mobile-toggler--2:hover span:nth-child(odd) {
opacity: 0;
}
.header__mobile-toggler--2:hover span:nth-child(5) {
opacity: 1;
}
.header__mobile-toggler--2:hover span:nth-child(2), .header__mobile-toggler--2:hover span:last-child {
width: 4px;
height: 4px;
}
.header__mobile-toggler--2:has(.active) span:nth-child(odd) {
opacity: 0;
}
.header__mobile-toggler--2:has(.active) span:nth-child(5) {
opacity: 1;
}
.header__mobile-toggler--2:has(.active) span:nth-child(2), .header__mobile-toggler--2:has(.active) span:last-child {
width: 4px;
height: 4px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.header__mobile-toggler--2 {
width: 46px;
height: 46px;
}
}
.header__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px 40px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 14px 30px;
border-end-start-radius: 12px;
border-end-end-radius: 12px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.header__top {
display: none;
}
}
.header__top__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px 31px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.header__top__list {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.header__top__list li {
position: relative;
line-height: 1;
z-index: 0;
}
.header__top__list li::after {
content: "";
position: absolute;
top: 50%;
right: -16px;
-webkit-transform: translateY(calc(-50% - 2px));
-ms-transform: translateY(calc(-50% - 2px));
transform: translateY(calc(-50% - 2px));
width: 1px;
height: 15px;
background-color: var(--tj-color-border-4);
}
.header__top__list li:last-child::after {
display: none;
}
.header__top__list li a {
font-family: var(--tj-ff-heading);
font-size: 16px;
font-weight: var(--tj-fw-sbold);
letter-spacing: -0.02em;
line-height: 1;
color: var(--tj-color-common-white2);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 8px;
}
.header__top__list li a i {
color: var(--tj-color-common-white);
font-size: 17px;
font-weight: normal;
margin-top: 1px;
}
.header__top__list li a:hover {
color: var(--tj-color-common-white);
}
.header__top__list li a:hover i {
color: var(--tj-color-common-white);
}
@media (max-width: 575px) {
.header__top__list li::after {
display: none;
}
}
.header__top__socials {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 6px;
}
.header__top__socials__title {
font-size: 16px;
font-weight: var(--tj-fw-sbold);
line-height: 1;
color: var(--tj-color-common-white2);
margin-bottom: 0;
}
.header__top__socials .tj-socials--sm ul {
gap: 5px;
}
.header__top__socials .tj-socials--sm ul li {
line-height: 1;
}
.header__top__socials .tj-socials--sm ul li a {
line-height: 1;
}
.header__top__socials .tj-socials--sm ul li a i {
font-size: 24px;
color: var(--tj-color-common-white);
position: relative;
z-index: 0;
}
.header__top__socials .tj-socials--sm 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;
}
.header__top__socials .tj-socials--sm ul li a:hover i {
color: var(--tj-color-theme-secondary);
}
.header__top__socials .tj-socials--sm ul li a:hover i::after {
background-color: var(--tj-color-common-white);
}
.header--9 .header__wrapper {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.header--9 .header__wrapper > div:last-child {
margin-left: 0;
}
.header--9 .header__logo {
width: 133px;
}
.header--9.header {
max-width: calc(100% - 60px);
left: 30px;
right: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.header--9.header {
max-width: calc(100% - 30px);
left: 15px;
right: 15px;
}
}
@media (max-width: 575px) {
.header--9.header {
max-width: calc(100% - 20px);
left: 10px;
right: 10px;
}
}
.header--9.header .header__right .header__mobile-toggler {
border-radius: 100%;
}
.header--9.header .header__right .tj-btn {
padding: 14px 30px;
border-radius: 58px;
}
.header--9.header .header__right .tj-btn::after {
border-radius: 58px;
}
.header--9.header .header__right .tj-btn .tj-btn__text {
overflow: hidden;
}
.header--9.header .header__right .tj-btn .tj-btn__text span {
text-shadow: 0 20px 0;
}
.header--9.header .header__right .tj-btn:hover {
color: var(--tj-color-common-white);
}
.header--9.header .header__right .tj-btn:hover::after {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.header--9.header .header__right .tj-btn:hover .tj-btn__text span {
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
.header--9.header .header__right .tj-btn {
padding: 11px 25px;
}
}
.header--9.header--absolute {
margin-top: 0;
border-radius: 0;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
@media (max-width: 575px) {
.header--9.header--absolute {
margin-top: 0;
}
}
.header--9.header--absolute .header__wrapper {
padding-top: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.header--9.header--absolute .header__wrapper {
padding-top: 0;
}
}
.header--9.header--absolute .mainmenu {
-webkit-box-shadow: none;
box-shadow: none;
background-color: var(--tj-color-common-white);
border: 1px solid var(--tj-color-border-1);
padding-left: 15px;
padding-right: 15px;
border-radius: 58px;
}
.header--9.header--absolute .mainmenu ul > li > a {
padding: 10px 20px;
}
.header--9.header--absolute .mainmenu ul > li .sub-menu {
border: 1px solid var(--tj-color-border-1);
border-radius: 12px;
margin-top: 10px;
z-index: 0;
}
.header--9.header--absolute .mainmenu ul > li .sub-menu::after {
content: "";
position: absolute;
left: 0;
top: -11px;
width: 100%;
height: 100%;
z-index: -1;
}
.header--9.header--absolute .header__right .header__mobile-toggler {
border-radius: 100%;
border: 0;
background-color: var(--tj-color-common-white);
}
.header--9.header-duplicate {
top: -120px; /* Initially hidden */
}
@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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.header--9.header-duplicate {
left: 15px;
right: 15px;
max-width: calc(100% - 30px);
margin: 0;
}
}
.header--9.header-duplicate.sticky {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
top: 0; /* Sticks to the top */
}
.header--9.header-duplicate .header__mobile-toggler--2 {
padding: 13px 13px;
}
.header--9.header-duplicate .header__wrapper {
padding-left: 20px;
padding-right: 20px;
}
@media (max-width: 575px) {
.header--9.header-duplicate .header__wrapper {
padding-left: 15px;
padding-right: 15px;
}
}
/* !END: Header CSS */
/**----------------------------------------
START: Footer CSS
----------------------------------------*/
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
.footer--9 {
-webkit-padding-start: 15px;
padding-inline-start: 15px;
-webkit-padding-end: 15px;
padding-inline-end: 15px;
}
}
.footer--9 .tj-socials {
margin-top: 49px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--9 .tj-socials {
margin-top: 39px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--9 .tj-socials {
margin-top: 29px;
}
}
.footer--9 .tj-socials ul li a i {
color: var(--tj-color-common-white);
position: relative;
z-index: 0;
}
.footer--9 .tj-socials 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;
}
.footer--9 .tj-socials ul li a:hover i {
color: var(--tj-color-theme-secondary);
}
.footer--9 .tj-socials ul li a:hover i::after {
background-color: var(--tj-color-common-white);
}
.footer--9 .footer__top {
padding: 96px 0 80px;
text-align: center;
}
.footer--9 .footer__top__title {
max-width: 100%;
width: 100%;
font-size: 70px;
line-height: 1.114;
letter-spacing: -0.025em;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer--9 .footer__top__title {
font-size: 55px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.footer--9 .footer__top__title {
font-size: 40px;
}
}
@media (max-width: 575px) {
.footer--9 .footer__top__title {
font-size: 30px;
}
}
.footer--9 .footer__top .tj-btn i {
font-size: 20px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.footer--9 .footer__top__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 24px;
background: transparent;
padding: 0;
margin: 0 auto;
outline: none;
border-radius: 0;
max-width: 828px;
margin: 0 auto;
}
.footer--9 .footer__top__inner::after {
display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--9 .footer__top {
padding: 60px 0;
}
}
.footer--9 .footer__inner {
background: transparent;
padding: 0;
margin-bottom: 0;
}
.footer--9 .footer__inner::after {
display: none;
}
.footer--9 .footer__main {
overflow: hidden;
position: relative;
z-index: 1;
}
.footer--9 .footer__main .container {
max-width: 1440px;
}
.footer--9 .footer__widget__wrapper--2 {
padding: 80px 60px 27px;
background-color: var(--tj-color-theme-bg4);
backdrop-filter: blur(20px);
border-radius: 12px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--9 .footer__widget__wrapper--2 .footer__title {
margin-bottom: 30px;
}
}
.footer--9 .footer__widget__wrapper--2 .footer__widget .tj-socials ul li {
line-height: 1;
}
.footer--9 .footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li a {
color: var(--tj-color-common-white4);
font-size: 18px;
line-height: 1.4444;
}
.footer--9 .footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li a:hover {
color: var(--tj-color-theme-primary);
}
.footer--9 .footer__widget__wrapper--2 .footer__widget--services {
margin-left: 0;
position: relative;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--9 .footer__widget__wrapper--2 .footer__widget--services {
padding: 40px 0 26px 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.footer--9 .footer__widget__wrapper--2 .footer__widget {
width: 100%;
max-width: calc(45% - 20px);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--9 .footer__widget__wrapper--2 .footer__widget {
margin-bottom: 40px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--9 .footer__widget__wrapper--2 .footer__widget--company {
margin-bottom: 0;
padding: 0 0 26px 0;
}
}
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe {
max-width: 332px;
padding: 0;
margin: 0;
}
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe .footer__title {
color: var(--tj-color-common-white);
font-size: var(--tj-fs-h4);
line-height: var(--tj-lh-h4);
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-bold);
margin-top: -7px;
margin-bottom: 15px;
opacity: 1;
text-transform: inherit;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe .footer__title {
font-size: 22px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe .footer__title {
font-size: 20px;
}
}
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=email] {
background-color: var(--tj-color-theme-bg4);
backdrop-filter: blur(20px);
outline: 0;
border: 1px solid var(--tj-color-border-5);
color: var(--tj-color-common-white);
}
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=email]::-webkit-input-placeholder {
color: var(--tj-color-common-white4);
}
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=email]::-moz-placeholder {
color: var(--tj-color-common-white4);
}
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=email]:-ms-input-placeholder {
color: var(--tj-color-common-white4);
}
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=email]::-ms-input-placeholder {
color: var(--tj-color-common-white4);
}
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=email]::placeholder {
color: var(--tj-color-common-white4);
}
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form button::before {
height: 100%;
border-color: var(--tj-color-border-5);
}
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=checkbox] {
border-color: var(--tj-color-border-6);
}
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=checkbox]::before {
color: var(--tj-color-theme-dark);
}
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form input[type=checkbox]:checked {
background-color: var(--tj-color-common-white);
border-color: var(--tj-color-common-white);
}
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form label {
color: var(--tj-color-common-white4);
}
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe .subscribe-form label a:not(:hover) {
color: var(--tj-color-common-white4);
}
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe::after, .footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe::before {
display: none;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe {
max-width: 300px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe {
width: 100%;
max-width: calc(45% - 20px);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--9 .footer__widget__wrapper--2 .footer__widget__subscribe {
max-width: 100%;
padding: 0 0 66px;
}
}
.footer--9 .footer__widget__wrapper--2 .footer__info .footer__info__active-hours ul li, .footer--9 .footer__widget__wrapper--2 .footer__info .footer__info__list ul li .link, .footer--9 .footer__widget__wrapper--2 .footer__info .footer__info__address {
color: var(--tj-color-common-white4);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--9 .footer__widget__wrapper--2 .footer__info {
margin-top: 0;
}
}
.footer--9 .footer__copyright {
border-top: 0;
-webkit-padding-start: 60px;
padding-inline-start: 60px;
-webkit-padding-end: 60px;
padding-inline-end: 60px;
}
.footer--9 .footer__copyright__wrapper {
border: 0;
margin: 0;
padding-top: 30px;
padding-bottom: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer--9 .footer__copyright__wrapper {
padding-top: 5px;
padding-bottom: 5px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--9 .footer__copyright__wrapper {
padding-top: 18px;
padding-bottom: 8px;
}
}
.footer--9 .footer__copyright__text p {
color: var(--tj-color-common-white2);
}
.footer--9 .footer__copyright__text p a {
color: var(--tj-color-common-white);
}
.footer--9 .footer__copyright__text p a:hover {
color: var(--tj-color-theme-primary);
}
.footer--9 .footer__copyright__menu ul li > a {
color: var(--tj-color-common-white2);
}
.footer--9 .footer__copyright__menu ul li > a:hover {
color: var(--tj-color-theme-primary);
}
.footer--9 .footer__copyright__menu ul li > a::before {
background-color: var(--tj-color-common-white2);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer--9 .footer__widget__wrapper--2 {
padding: 60px 30px 10px;
}
.footer--9 .footer__copyright {
-webkit-padding-start: 30px;
padding-inline-start: 30px;
-webkit-padding-end: 30px;
padding-inline-end: 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--9 .footer__widget__wrapper--2 {
padding: 60px 20px 15px;
}
.footer--9 .footer__copyright {
-webkit-padding-start: 20px;
padding-inline-start: 20px;
-webkit-padding-end: 20px;
padding-inline-end: 20px;
}
}
/* !END: Footer CSS */
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.hero--10 {
position: relative;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0;
}
.hero--10 .hero__inner {
padding-top: 44px;
}
.hero--10 .hero__title {
font-size: 106px;
font-weight: var(--tj-fw-sbold);
letter-spacing: -0.025em;
line-height: 1.038;
}
.hero--10 .hero__title span {
color: var(--tj-color-heading-primary);
}
.hero--10 .hero__title span:not(.cd-headline.clip):has(img) {
display: inline-block;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--10 .hero__title {
font-size: 90px;
max-width: 100%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--10 .hero__title {
font-size: 67px;
max-width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--10 .hero__title {
font-size: 80px;
max-width: 100%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero--10 .hero__title {
font-size: 40px;
max-width: 100%;
}
}
@media (max-width: 575px) {
.hero--10 .hero__title {
font-size: 35px;
max-width: 100%;
}
}
.hero--10 .hero__desc {
margin-bottom: 24px;
}
.hero--10 .hero__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 30px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 94px;
}
.hero--10 .hero__content__left {
width: 100%;
max-width: 877px;
}
.hero--10 .hero__content__right {
max-width: 317px;
width: 100%;
margin-top: 70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--10 .hero__inner {
padding-top: 65px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--10 .hero__content {
margin-bottom: 74px;
}
.hero--10 .hero__content__right {
margin-top: 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--10 .hero__content {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0;
}
.hero--10 .hero__content__left {
max-width: 100%;
}
.hero--10 .hero__content__right {
max-width: 100%;
margin-top: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--10 .hero__content {
margin-bottom: 90px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--10 .hero__inner {
padding-top: 47px;
}
.hero--10 .hero__content {
margin-bottom: 65px;
}
.hero--10 .hero__content__right {
margin-top: 5px;
}
}
.hero__statistics {
padding: 0 15px 30px;
}
.hero__statistics__item {
padding: 54px 60px 37px;
border-radius: 16px;
background-color: var(--tj-color-theme-secondary);
overflow: hidden;
position: relative;
z-index: 0;
}
.hero__statistics__title {
color: var(--tj-color-common-white);
max-width: 182px;
}
.hero__statistics__title__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 30px;
}
.hero__statistics__btn {
line-height: 1;
padding: 4px 8px 4px 11px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 3px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 16px;
font-weight: var(--tj-fw-sbold);
color: var(--tj-color-common-white);
border: 1px solid var(--tj-color-border-5);
border-radius: 40px;
}
.hero__statistics__btn i {
font-size: 18px;
}
.hero__statistics__funtact__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
gap: 30px;
}
.hero__statistics__funtact__wrapper .client__thumbs__inner {
margin-bottom: 22px;
}
.hero__statistics__funtact__wrapper .client__thumbs__inner li {
max-width: 66px;
width: 66px;
height: 66px;
padding: 3px;
}
.hero__statistics__funtact__wrapper .client__thumbs__inner li img {
width: 100%;
height: 100%;
padding: 0;
}
.hero__statistics__funtact__wrapper .client__thumbs__inner li.plus h6 {
height: 100%;
width: 100%;
font-size: 18px;
background-color: var(--tj-color-common-white);
color: var(--tj-color-theme-dark);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero__statistics__funtact__wrapper .client__thumbs__inner li {
width: 60px;
height: 60px;
}
}
.hero__statistics__chart {
max-width: 465px;
width: 100%;
min-height: 296px;
height: 100%;
border-radius: 10px;
overflow: hidden;
background-color: var(--tj-color-theme-bg2);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.hero__statistics__chart img {
margin-top: auto;
}
.hero__statistics__box {
padding: 30px;
border-radius: 10px;
background-color: var(--tj-color-theme-bg4);
backdrop-filter: blur(20px);
position: absolute;
left: 30px;
bottom: 30px;
max-width: 377px;
}
.hero__statistics__box .hero__desc {
font-size: 18px;
color: var(--tj-color-common-white);
font-weight: var(--tj-fw-regular);
margin-top: 20px;
}
.hero__statistics__box .tj-btn-2 {
color: var(--tj-color-common-white);
}
.hero__statistics__box .tj-btn-2 i {
color: var(--tj-color-common-white);
font-size: 18px;
}
.hero__statistics__banner {
height: 100%;
}
.hero__statistics__banner img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.hero__statistics__item--2 {
padding: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: var(--tj-color-common-white);
margin-top: 30px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.hero__statistics__item--2 .hero__statistics__title {
color: var(--tj-color-heading-primary);
}
.hero__statistics__item--2 .hero__statistics__title__wrapper {
padding: 24px 30px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.hero__statistics__item--2 .hero__statistics__funtact__wrapper {
margin-bottom: 10px;
}
.hero__statistics__item--2 .funfact-area.style-7 {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.hero__statistics__item--2 .funfact-area.style-7 .funfact-item .number {
color: var(--tj-color-heading-primary);
margin-top: 14px;
}
.hero__statistics__item--3 {
padding: 0;
background-color: transparent;
height: 100%;
}
.hero__statistics__item--3 .hero__statistics__title {
max-width: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero__statistics__item {
padding: 44px 30px 34px;
}
.hero__statistics__item--2 {
padding: 20px;
}
.hero__statistics__item--2 .hero__statistics__title__wrapper {
padding: 24px 10px 15px;
}
.hero__statistics__item--3 {
padding: 0;
}
.hero__statistics__item--3 .hero__statistics__title {
max-width: 100%;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero__statistics__funtact__wrapper .client__thumbs__inner {
margin-bottom: 14px;
}
.hero__statistics__chart {
min-height: 243px;
}
.hero__statistics__item--2 {
gap: 20px;
}
.hero__statistics__item--2 .hero__statistics__funtact__wrapper {
margin-bottom: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.hero__statistics {
padding: 0 5px 20px;
}
.hero__statistics__chart {
min-height: 243px;
}
.hero__statistics .funfact-area.style-7 {
margin-bottom: 10px;
}
.hero__statistics__item--2 {
margin-top: 20px;
}
.hero__statistics__item--2 .hero__statistics__title__wrapper {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.hero__statistics__item--2 .hero__statistics__funtact__wrapper {
margin-bottom: 0;
}
.hero__statistics__item--2 .funfact-area.style-7 {
margin-bottom: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero__statistics__funtact__wrapper .client__thumbs__inner li {
height: 55px;
width: 55px;
}
.hero__statistics__item {
padding: 54px 30px 37px;
}
.hero__statistics__item--2 {
padding: 30px;
}
.hero__statistics__item--2 .hero__statistics__title__wrapper {
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-end: 0;
padding-inline-end: 0;
}
.hero__statistics__item--3 {
padding: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero__statistics__item--2 .hero__statistics__title__wrapper {
margin-bottom: 10px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero__statistics {
padding: 0 0 15px;
}
.hero__statistics .rg-30 {
row-gap: 15px;
}
.hero__statistics__funtact__wrapper {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px;
}
.hero__statistics__funtact__wrapper .client__thumbs__inner {
margin-bottom: 13px;
}
.hero__statistics__funtact__wrapper .client__thumbs__inner li {
height: 55px;
width: 55px;
}
.hero__statistics__title__wrapper {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding: 10px 0;
}
.hero__statistics__chart {
max-width: 100%;
min-height: 200px;
}
.hero__statistics__box {
padding: 24px 20px 28px;
right: 15px;
left: 15px;
bottom: 15px;
}
.hero__statistics__box .hero__desc {
margin-top: 14px;
margin-bottom: 14px;
}
.hero__statistics__item {
padding: 20px;
}
.hero__statistics__item--2 {
margin-top: 15px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px;
}
.hero__statistics__item--2 .hero__statistics__title__wrapper {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 10px 0 0;
}
.hero__statistics__item--2 .hero__statistics__funtact__wrapper {
margin-bottom: 0;
}
.hero__statistics__item--3 {
padding: 0;
min-height: 500px;
}
}
@media (max-width: 575px) {
.hero__statistics__funtact__wrapper .funfact-area.style-7 {
width: 100%;
}
}
.space-140 {
padding-top: 140px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.space-140 {
padding-top: 70px;
}
}
.hand__mike {
width: 231px;
height: 131px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
position: relative;
-webkit-transform: translateY(15px);
-ms-transform: translateY(15px);
transform: translateY(15px);
z-index: 0;
}
.hand__mike__wrapper {
display: inline-block;
}
.hand__mike__bg {
height: 75%;
width: 100%;
border-radius: 67px;
background: var(--tj-color-blue-1);
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
.hand__mike img {
width: auto;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
position: relative;
z-index: 1;
}
.hand__mike--sm {
width: 140px;
height: 80px;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hand__mike--sm .hand__mike__bg {
height: 73.4%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hand__mike {
width: 190px;
height: 95px;
-webkit-transform: translateY(8px);
-ms-transform: translateY(8px);
transform: translateY(8px);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hand__mike {
width: 151px;
height: 70px;
-webkit-transform: translateY(8px);
-ms-transform: translateY(8px);
transform: translateY(8px);
}
.hand__mike--sm {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hand__mike {
width: 190px;
height: 95px;
}
.hand__mike--sm {
width: 130px;
height: 70px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hand__mike {
width: 95px;
height: 48px;
-webkit-transform: translateY(4px);
-ms-transform: translateY(4px);
transform: translateY(4px);
}
.hand__mike--sm {
width: 100px;
height: 55px;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@media (max-width: 575px) {
.hand__mike--sm {
width: 80px;
height: 40px;
}
}
.hero .title-animation .hand__mike {
display: -webkit-inline-box !important;
display: -ms-inline-flexbox !important;
display: inline-flex !important;
}
.hero .title-animation .hand__mike img {
margin-left: 0;
}
/* !END: Hero CSS */
/**----------------------------------------
START: Funfact CSS
----------------------------------------*/
.funfact-area.style-7 {
margin-top: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.funfact-area.style-7 .funfact-item {
padding: 0;
background: transparent;
border-radius: 0;
text-align: start;
position: relative;
}
.funfact-area.style-7 .funfact-item .odometer-symbol {
margin-top: -5px;
}
.funfact-area.style-7 .funfact-item::after {
display: none;
}
.funfact-area.style-7 .funfact-item .number {
font-size: 100px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
margin-top: 72px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.style-7 .funfact-item .number {
font-size: 72px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.funfact-area.style-7 .funfact-item .number {
font-size: 60px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.funfact-area.style-7 .funfact-item .number {
font-size: 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.funfact-area.style-7 .funfact-item {
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.funfact-area.style-7 .funfact-item {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
}
/* !END: Funfact CSS */
/**----------------------------------------
START: Feature CSS
----------------------------------------*/
.service__card--5 .tj-btn-2 {
margin-top: 20px;
}
.service__card--5 .tj-btn-2 i {
font-size: 16px;
}
.service__card--5:hover .tj-btn-2 {
color: var(--tj-color-heading-primary);
}
.service__card--5:hover .tj-btn-2 i {
color: var(--tj-color-heading-primary);
}
.service__card--5:hover .tj-btn-2:hover {
color: var(--tj-color-theme-primary);
}
.service__card--5:hover .tj-btn-2:hover i {
color: var(--tj-color-theme-primary);
}
.service__card--5 .service__card__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 55px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.service__card--5 .service__icon {
margin-bottom: 0;
}
.service__card--5 .service__title {
max-width: 157px;
width: 100%;
margin-bottom: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__card--5 .service__card__top {
margin-bottom: 40px;
}
.service__card--5 .service__icon {
font-size: 41px;
width: 70px;
height: 70px;
}
}
/* !END: Feature CSS */
/**----------------------------------------
START: Abour CSS
----------------------------------------*/
.about--10 {
border-radius: 16px;
border-start-start-radius: 0;
border-start-end-radius: 0;
}
.about--10 .section-heading__title {
margin-bottom: 30px;
}
.about--10 .about__banner {
position: relative;
z-index: 0;
max-width: 523px;
}
.about--10 .about__banner > img {
border-radius: 16px;
}
.about--10 .about__banner::after {
display: none;
}
.about--10 .about__ratings {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px 45px;
padding: 24px 28px;
background-color: var(--tj-color-theme-bg4);
backdrop-filter: blur(20px);
border: 1px solid var(--tj-color-border-5);
border-radius: 8px;
position: absolute;
right: 30px;
bottom: 60px;
}
.about--10 .about__ratings__item {
position: relative;
z-index: 0;
}
.about--10 .about__ratings__item::after {
content: "";
width: 1px;
height: 100%;
background-color: var(--tj-color-border-5);
position: absolute;
top: 0;
left: -23px;
z-index: 1;
}
.about--10 .about__ratings__item:first-child::after {
display: none;
}
.about--10 .about__content {
max-width: 735px;
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-padding-start: 0;
padding-inline-start: 0;
}
.about--10 .about__features {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 20px;
}
.about--10 .about__features__item {
padding: 30px;
background-color: var(--tj-color-common-white);
border-radius: 10px;
}
.about--10 .about__features__title {
margin-bottom: 5px;
}
.about--10 .about__features__title__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
margin-bottom: 18px;
}
.about--10 .about__features__desc {
margin-bottom: 0;
}
.about--10 .about__features__icon {
font-size: 30px;
color: var(--tj-color-theme-secondary);
line-height: 1;
}
.about--10 .about__action {
margin-top: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about--10 .about__banner {
width: 100%;
max-width: 100%;
}
.about--10 .about__banner img {
width: 100%;
}
}
@media (max-width: 575px) {
.about--10 .about__ratings {
right: 15px;
bottom: 45px;
}
.about--10 .about__features {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.about--10 .about__features__item {
-webkit-padding-start: 20px;
padding-inline-start: 20px;
-webkit-padding-end: 20px;
padding-inline-end: 20px;
}
}
/* !END: About CSS */
/**----------------------------------------
START: Service CSS
----------------------------------------*/
.service__wrapper__4 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__4 {
gap: 20px;
}
}
.service__wrapper__4 .service__card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 30px;
background: var(--tj-color-theme-bg1);
border: 0;
position: relative;
border-radius: 12px;
-webkit-transition: none;
transition: none;
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
overflow: hidden;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__4 .service__card {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 22px;
}
}
@media (max-width: 575px) {
.service__wrapper__4 .service__card {
padding: 30px 20px 20px;
}
}
.service__wrapper__4 .service__card::after {
display: none;
}
.service__wrapper__4 .service__card .service__banner {
position: relative;
z-index: 1;
border-radius: 10px;
overflow: hidden;
width: 350px;
position: relative;
z-index: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.service__wrapper__4 .service__card .service__banner a {
width: 100%;
height: 100%;
}
.service__wrapper__4 .service__card .service__banner img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service__wrapper__4 .service__card .service__banner {
height: 321px;
width: 50%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__4 .service__card .service__banner {
width: 100%;
}
}
.service__wrapper__4 .service__card .service__content {
width: 735px;
-webkit-transition: all var(--tj-td-standard) ease-in-out 0s;
transition: all var(--tj-td-standard) ease-in-out 0s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-negative: 1;
flex-shrink: 1;
overflow: hidden;
}
.service__wrapper__4 .service__card .service__content__right {
max-width: 360px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.service__wrapper__4 .service__card .service__content {
width: 580px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.service__wrapper__4 .service__card .service__content {
width: 475px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service__wrapper__4 .service__card .service__content {
width: 286px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__4 .service__card .service__content {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
}
.service__wrapper__4 .service__card .service__icon {
font-size: 41px;
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__4 .service__card .service__icon {
margin-bottom: 14px;
}
}
.service__wrapper__4 .service__card .service__icon i {
color: var(--tj-color-common-white);
}
.service__wrapper__4 .service__card .service__title {
margin-bottom: 16px;
max-width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__4 .service__card .service__title {
max-width: 100%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__4 .service__card .service__title {
margin-bottom: 12px;
}
}
.service__wrapper__4 .service__card .service__desc {
font-size: 18px;
margin-bottom: 24px;
line-height: 1.5556;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.service__wrapper__4 .service__card .service__desc {
margin-bottom: 14px;
font-size: 16px;
}
}
.service__wrapper__4 .service__card .tj-btn {
padding: 14px 19px 14px 25px;
border: 1px solid var(--tj-color-border-1);
border-radius: 58px;
gap: 6px;
width: auto;
color: var(--tj-color-theme-dark);
}
.service__wrapper__4 .service__card .tj-btn::after {
background-color: var(--tj-color-common-white);
}
.service__wrapper__4 .service__card .tj-btn__icon {
overflow: hidden;
}
.service__wrapper__4 .service__card .tj-btn i {
color: var(--tj-color-theme-dark);
font-size: 16px;
-webkit-transform: translate(-14px, 12px) rotate(-45deg);
-ms-transform: translate(-14px, 12px) rotate(-45deg);
transform: translate(-14px, 12px) rotate(-45deg);
text-shadow: 18px 0 0 currentColor;
}
.service__wrapper__4 .service__card .tj-btn:hover {
color: var(--tj-color-common-white);
border-color: var(--tj-color-theme-primary);
}
.service__wrapper__4 .service__card .tj-btn:hover::after {
background-color: var(--tj-color-theme-primary);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.service__wrapper__4 .service__card .tj-btn:hover i {
color: var(--tj-color-common-white);
-webkit-transform: translate(0, -2px) rotate(-45deg);
-ms-transform: translate(0, -2px) rotate(-45deg);
transform: translate(0, -2px) rotate(-45deg);
}
.service__wrapper__4 .service__card:hover {
background: var(--tj-color-theme-bg2);
}
.service__wrapper__4 .service__card:hover .service__banner img {
-webkit-transform: scale(1.1) rotate(3deg);
-ms-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
.service__wrapper__4 .service__card:hover .service__icon {
background-color: var(--tj-color-theme-primary);
}
.service__wrapper__4 .service__card:hover .service__title a {
color: var(--tj-color-heading-primary);
}
.service__wrapper__4 .service__card:hover .service__title:hover a {
color: var(--tj-color-theme-primary);
}
.service__wrapper__4 .service__card:hover .service__desc {
color: var(--tj-color-text-body);
}
/* !END: Service CSS */
/**----------------------------------------
START: Process CSS
----------------------------------------*/
.process__4 .section-heading__title {
color: var(--tj-color-common-white);
margin-bottom: 14px;
}
.process__4 .section-heading__desc {
color: var(--tj-color-common-white2);
max-width: 396px;
}
.process__left {
max-width: 594px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__left {
max-width: 100%;
}
}
.process__banner {
margin-top: 90px;
border-radius: 12px;
overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__banner {
margin-top: 50px;
}
.process__banner img {
width: 100%;
}
}
.process__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
margin-top: 34px;
}
.process__list li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
color: var(--tj-color-common-white2);
line-height: 1;
}
.process__list li i {
width: 20px;
height: 20px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 9px;
color: var(--tj-color-common-white);
background-color: var(--tj-color-theme-secondary);
border-radius: 50%;
}
.process__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 30px;
max-width: 645px;
-webkit-padding-start: 112px;
padding-inline-start: 112px;
position: relative;
z-index: 0;
}
.process__wrapper::before {
content: "";
height: 100%;
width: 2px;
background: url("../img/icons/dashed-line.svg");
position: absolute;
left: 17px;
top: 0;
z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.process__wrapper {
-webkit-padding-start: 70px;
padding-inline-start: 70px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.process__wrapper {
-webkit-padding-start: 60px;
padding-inline-start: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__wrapper {
margin-top: 50px;
max-width: 100%;
}
.process__wrapper::before {
left: 30px;
}
}
@media (max-width: 575px) {
.process__wrapper {
-webkit-padding-start: 0;
padding-inline-start: 0;
gap: 100px;
margin-top: 50px;
padding-top: 100px;
overflow: hidden;
}
.process__wrapper::before {
left: 50%;
top: -11px;
}
}
.process__wrapper .process__line {
position: absolute;
left: 17px;
width: 2px;
height: 0;
background: var(--tj-color-common-white);
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.process__wrapper .process__line {
left: 30px;
}
}
@media (max-width: 575px) {
.process__wrapper .process__line {
top: -95px;
left: 50%;
}
}
.process__wrapper .process__single {
width: 100%;
margin-bottom: 0;
overflow: visible;
border-radius: 10px;
display: block;
background: none;
padding: 0;
}
.process__wrapper .process__single .process__inner {
backdrop-filter: blur(10px);
background: var(--tj-color-theme-bg4);
padding: 46px 32px 50px;
border-radius: 12px;
overflow: visible;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-transform: translateX(50px);
-ms-transform: translateX(50px);
transform: translateX(50px);
}
.process__wrapper .process__single .process__inner::after {
display: none;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.process__wrapper .process__single .process__inner {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.process__wrapper .process__single .process__inner {
padding: 46px 20px 50px;
-webkit-transform: translateX(15px);
-ms-transform: translateX(15px);
transform: translateX(15px);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.process__wrapper .process__single .process__inner {
-webkit-transform: translateX(24px);
-ms-transform: translateX(24px);
transform: translateX(24px);
}
}
@media (max-width: 575px) {
.process__wrapper .process__single .process__inner {
padding: 46px 15px 50px;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.process__wrapper .process__single .step-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.process__wrapper .process__single .step-header .step {
background-color: var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
line-height: 1;
font-weight: var(--tj-fw-medium);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
border-radius: 56px;
padding: 4px 8px;
position: absolute;
right: 30px;
top: 30px;
}
@media (max-width: 575px) {
.process__wrapper .process__single .step-header .step {
right: 15px;
top: 15px;
}
}
.process__wrapper .process__single .process__sl {
font-size: 24px;
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-bold);
letter-spacing: -0.02em;
line-height: 1;
color: var(--tj-color-common-white);
-webkit-text-stroke: inherit;
margin-bottom: 0;
position: absolute;
left: -124px;
top: 35px;
z-index: 1;
width: 60px;
height: 60px;
border-radius: 100%;
background: var(--tj-color-theme-bg4);
backdrop-filter: blur(10px);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.process__wrapper .process__single .process__sl span {
opacity: 0.4;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.process__wrapper .process__single .process__sl {
left: -80px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.process__wrapper .process__single .process__sl {
font-size: 20px;
width: 50px;
height: 50px;
top: 40px;
left: -66px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.process__wrapper .process__single .process__sl {
left: -112px;
}
}
@media (max-width: 575px) {
.process__wrapper .process__single .process__sl {
left: 50%;
top: -80px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
}
.process__wrapper .process__single .process__content {
max-width: 100%;
}
.process__wrapper .process__single .process__title {
margin-bottom: 16px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.process__wrapper .process__single .process__title {
font-size: 24px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.process__wrapper .process__single .process__title {
font-size: 20px;
margin-bottom: 12px;
}
}
.process__wrapper .process__single .process__desc {
color: var(--tj-color-common-white2);
font-size: 16px;
}
.process__wrapper .process__single.active::before {
background-color: var(--tj-color-theme-primary);
-webkit-box-shadow: 0 0 0 6px var(--tj-color-theme-bg3);
box-shadow: 0 0 0 6px var(--tj-color-theme-bg3);
}
.process__wrapper .process__single.active .process__inner {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.process__wrapper .process__single.active .step {
background-color: var(--tj-color-theme-secondary);
}
.process__wrapper .process__single.active .process__sl {
background-color: var(--tj-color-common-white);
}
.process__wrapper .process__single.active .process__sl span {
opacity: 1;
color: var(--tj-color-theme-dark);
}
/* !END: Process CSS */
/**----------------------------------------
START: Team CSS
----------------------------------------*/
.team--3 .section-heading__sub-title {
padding: 0;
background-color: transparent;
color: var(--tj-color-theme-primary);
}
.team--3 .section-heading__sub-title::before {
background-color: var(--tj-color-theme-primary);
}
.team--3 .section-heading__title {
color: var(--tj-color-heading-primary);
}
.team__wrapper__2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.team__wrapper__2 {
gap: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team__wrapper__2 {
gap: 15px;
}
}
.team__wrapper__2 .team__socials {
left: auto;
right: 0;
top: 50px;
bottom: auto;
border-radius: 0;
border-start-start-radius: 10px;
border-end-start-radius: 10px;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
padding: 10px;
-webkit-padding-start: 9px;
padding-inline-start: 9px;
-webkit-padding-end: 0;
padding-inline-end: 0;
background-color: var(--tj-color-theme-bg1);
}
.team__wrapper__2 .team__socials .tj-socials--sm {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.team__wrapper__2 .team__socials .tj-socials--sm ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 6px;
}
.team__wrapper__2 .team__socials .tj-socials--sm ul li a {
background-color: var(--tj-color-theme-dark);
width: 28px;
height: 28px;
}
.team__wrapper__2 .team__socials .tj-socials--sm ul li a i {
color: var(--tj-color-common-white);
font-size: 15px;
}
.team__wrapper__2 .team__socials .tj-socials--sm ul li a:hover {
background-color: var(--tj-color-theme-secondary);
}
.team__wrapper__2 .team__socials::before, .team__wrapper__2 .team__socials::after {
content: "";
position: absolute;
background-color: transparent;
top: -10px;
right: 0;
width: 25px;
height: 10px;
-webkit-box-shadow: 10px 0 0 0 var(--tj-color-theme-bg1);
box-shadow: 10px 0 0 0 var(--tj-color-theme-bg1);
border-top-right-radius: 10px;
z-index: -1;
}
.team__wrapper__2 .team__socials::before {
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}
.team__wrapper__2 .team__socials::after {
top: auto;
left: auto;
bottom: -10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.team__wrapper__2 .team__socials {
top: 30px;
padding: 6px;
-webkit-padding-start: 8px;
padding-inline-start: 8px;
-webkit-padding-end: 0;
padding-inline-end: 0;
}
.team__wrapper__2 .team__socials .tj-socials--sm ul {
gap: 0;
}
.team__wrapper__2 .team__socials .tj-socials--sm ul li a {
width: 20px;
height: 20px;
}
.team__wrapper__2 .team__socials .tj-socials--sm ul li a i {
font-size: 12px;
}
}
.team__wrapper__2 .team__single {
width: calc(33.33333% - 20px);
background-color: var(--tj-color-theme-bg1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 15px 15px 26px;
text-align: center;
border-radius: 12px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.team__wrapper__2 .team__single {
width: 100%;
}
}
.team__wrapper__2 .team__single__img {
border-radius: 10px;
overflow: hidden;
margin-bottom: 15px;
}
.team__wrapper__2 .team__single__img img {
border-radius: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.team__wrapper__2 .team__single__img img {
height: 206px;
-o-object-fit: cover;
object-fit: cover;
}
}
.team__wrapper__2 .team__single__title {
font-size: var(--tj-fs-h4);
margin-bottom: 3px;
}
.team__wrapper__2 .team__single__title a {
color: var(--tj-color-heading-primary);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) {
.team__wrapper__2 .team__single__title {
font-size: 22px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.team__wrapper__2 .team__single__title {
font-size: 21px;
}
}
@media (max-width: 575px) {
.team__wrapper__2 .team__single__title {
font-size: 20px;
}
}
.team__wrapper__2 .team__single__title:hover a {
color: var(--tj-color-theme-primary);
}
.team__wrapper__2 .team__single__desig {
color: var(--tj-color-theme-dark3);
}
.team__wrapper__2 .team__single:hover .team__socials {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.team__wrapper__2 .team__single:hover .team__single__img {
border-color: transparent;
}
.team__wrapper__2 .team__single:hover .team__single__img img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
}
/* !END: Team CSS */
/**----------------------------------------
START: Portfolio CSS
----------------------------------------*/
.portfolio__2 {
background-position: left top;
}
.portfolio__2 .container-fluid {
--bs-gutter-x: 0;
}
.portfolio__wrapper--4 .portfolio__single {
padding: 0;
background: transparent;
border: 0;
border-radius: 16px;
overflow: hidden;
}
.portfolio__wrapper--4 .portfolio__single__img {
border-radius: 16px;
overflow: hidden;
height: 580px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.portfolio__wrapper--4 .portfolio__single__img {
height: 480px;
}
}
@media (max-width: 575px) {
.portfolio__wrapper--4 .portfolio__single__img {
height: 400px;
}
}
.portfolio__wrapper--4 .portfolio__single__img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.portfolio__wrapper--4 .portfolio__single__content {
position: absolute;
left: 30px;
right: 30px;
bottom: 30px;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
opacity: 1;
visibility: visible;
padding: 30px 30px 26px;
background-color: var(--tj-color-common-white);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
opacity: 0;
border-radius: 10px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.portfolio__wrapper--4 .portfolio__single__content {
left: 20px;
right: 20px;
bottom: 20px;
padding: 24px 20px 20px;
}
}
@media (max-width: 575px) {
.portfolio__wrapper--4 .portfolio__single__content {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
left: 15px;
right: 15px;
bottom: 15px;
padding: 20px 15px 17px;
}
}
.portfolio__wrapper--4 .portfolio__single__tag {
border-radius: 50px;
background-color: var(--tj-color-theme-secondary);
border-color: 0;
color: var(--tj-color-common-white);
font-size: 14px;
margin-bottom: 12px;
}
.portfolio__wrapper--4 .portfolio__single__tag:hover {
-webkit-animation: gelatine 0.5s linear;
animation: gelatine 0.5s linear;
}
.portfolio__wrapper--4 .portfolio__single__title {
color: var(--tj-color-heading-primary);
max-width: 465px;
margin-bottom: 0;
font-size: var(--tj-fs-h3);
line-height: var(--tj-lh-h3);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.portfolio__wrapper--4 .portfolio__single__title {
font-size: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio__wrapper--4 .portfolio__single__title {
font-size: 28px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.portfolio__wrapper--4 .portfolio__single__title {
font-size: 26px;
}
}
@media (max-width: 575px) {
.portfolio__wrapper--4 .portfolio__single__title {
font-size: 20px;
}
}
.portfolio__wrapper--4 .portfolio__single__title:hover a {
letter-spacing: inherit;
color: var(--tj-color-theme-primary);
}
.portfolio__wrapper--4 .portfolio__single::after {
display: none;
}
.portfolio__wrapper--4 .portfolio__single__action {
margin-bottom: 6px;
}
.portfolio__wrapper--4 .portfolio__single__action a {
visibility: visible;
opacity: 1;
position: static;
-webkit-transform: none;
-ms-transform: none;
transform: none;
border: 0;
color: var(--tj-color-common-white);
background: var(--tj-color-theme-primary);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.portfolio__wrapper--4 .portfolio__single__action a i {
color: var(--tj-color-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio__wrapper--4 .portfolio__single__action a {
width: 60px;
height: 60px;
}
.portfolio__wrapper--4 .portfolio__single__action a i {
font-size: 16px;
}
}
@media (max-width: 575px) {
.portfolio__wrapper--4 .portfolio__single__action a {
width: 50px;
height: 50px;
}
.portfolio__wrapper--4 .portfolio__single__action a i {
font-size: 16px;
}
}
.portfolio__wrapper--4 .portfolio__single__action a:hover {
border-color: transparent;
}
.portfolio__wrapper--4 .portfolio__single__action a:hover i {
color: var(--tj-color-common-white);
}
.portfolio__wrapper--4 .portfolio__single:hover .portfolio__single__content {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.portfolio__wrapper--4 .portfolio__single:hover .portfolio__single__tag {
color: var(--tj-color-common-white);
}
.portfolio__wrapper--4 .portfolio__single:hover .portfolio__single__action a {
background: var(--tj-color-theme-primary);
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
.portfolio__wrapper--4 .portfolio__single:hover .portfolio__single__action a i {
color: var(--tj-color-common-white);
}
/* !END: Portfolio CSS */
/**----------------------------------------
START: Client CSS
----------------------------------------*/
.tj-client__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 25px 0;
}
.tj-client__wrapper .client-item {
width: calc(20% - 20px);
padding: 0;
}
.tj-client__wrapper .client-logo {
width: 100%;
height: 244px;
padding: 0 30px;
background-color: var(--tj-color-theme-bg1);
border: 0;
border-radius: 7px;
}
.tj-client__wrapper .client-logo:hover {
background-color: var(--tj-color-theme-secondary);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tj-client__wrapper {
gap: 20px 0;
}
.tj-client__wrapper .client-item {
width: calc(20% - 16px);
}
.tj-client__wrapper .client-logo {
height: 180px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-client__wrapper {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
gap: 20px;
}
.tj-client__wrapper .client-item {
width: calc(25% - 15px);
}
.tj-client__wrapper .client-logo {
height: 180px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tj-client__wrapper {
gap: 16px;
}
.tj-client__wrapper .client-item {
width: calc(25% - 12px);
}
.tj-client__wrapper .client-logo {
height: 120px;
padding: 0 20px;
}
}
@media (max-width: 575px) {
.tj-client__wrapper {
gap: 16px;
}
.tj-client__wrapper .client-item {
width: calc(50% - 8px);
}
.tj-client__wrapper .client-logo {
height: 150px;
padding: 0 20px;
}
}
/* !END: Client CSS */
/**----------------------------------------
START: Testimonials CSS
----------------------------------------*/
.testimonials__4 {
width: calc(60% - 17px);
}
.testimonials__4 .section-heading {
margin-top: 48px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__4 {
width: 100%;
}
.testimonials__4 .section-heading__title {
max-width: 100%;
width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.testimonials__4 .section-heading {
margin-top: 60px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__4 .section-heading {
margin-top: 44px;
}
}
.testimonials__wrapper__2 {
width: 100%;
position: relative;
z-index: 0;
}
.testimonials__wrapper__2 .swiper {
padding-bottom: 0;
}
.testimonials__wrapper__2 .testimonials__slider__item {
background-color: var(--tj-color-theme-bg2);
border: 0;
padding-top: 60px;
padding-bottom: 60px;
border-radius: 10px;
}
.testimonials__wrapper__2 .testimonials__rating {
margin-bottom: 10px;
}
.testimonials__wrapper__2 .testimonials__rating .star-ratings {
margin: 0 auto;
}
.testimonials__wrapper__2 .testimonials__desc {
font-family: var(--tj-ff-heading);
font-size: 24px;
line-height: 1.58;
letter-spacing: -0.02em;
font-weight: var(--tj-fw-medium);
color: var(--tj-color-theme-dark);
text-align: center;
border-color: var(--tj-color-border-3);
}
.testimonials__wrapper__2 .testimonials__footer {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.testimonials__wrapper__2 .testimonials__author {
margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.testimonials__wrapper__2 .testimonials__slider__item {
padding: 45px 30px;
}
.testimonials__wrapper__2 .testimonials__desc {
font-size: 20px;
}
}
@media (max-width: 575px) {
.testimonials__wrapper__2 .testimonials__slider__item {
padding: 40px 24px;
}
.testimonials__wrapper__2 .testimonials__desc {
font-size: 18px;
}
}
.testimonials__wrapper__2:hover .swiper-button-next, .testimonials__wrapper__2:hover .swiper-button-prev {
opacity: 1;
visibility: visible;
margin-top: -25px;
}
.testimonials__wrapper__2:hover .swiper-button-prev {
left: 0;
}
.testimonials__wrapper__2:hover .swiper-button-next {
right: 0;
}
.client__thumbs__wrapper {
display: inline-block;
}
.client__thumbs__wrapper .client__thumbs__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 0;
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
margin-top: -10px;
}
.client__thumbs__wrapper .client__thumbs__item {
position: relative;
max-width: 52px;
width: 100%;
background-color: var(--tj-color-common-white);
border-radius: 50%;
-webkit-margin-start: -18px;
margin-inline-start: -18px;
-ms-flex-negative: 0;
flex-shrink: 0;
height: 52px;
line-height: 52px;
padding: 2px;
z-index: 2;
}
.client__thumbs__wrapper .client__thumbs__item:first-child {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
.client__thumbs__wrapper .client__thumbs__item img {
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
height: 48px;
display: block;
padding: 0;
}
.client__thumbs__wrapper .client__thumbs__item.plus {
background-color: var(--tj-color-common-white);
padding: 2px;
width: 100%;
}
.client__thumbs__wrapper .client__thumbs__text {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 48px;
height: 48px;
font-size: 14px;
font-weight: var(--tj-ff-heading);
font-weight: var(--tj-fw-bold);
letter-spacing: -0.02em;
line-height: 1;
color: var(--tj-color-common-white);
background-color: var(--tj-color-theme-secondary);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 50%;
margin-bottom: 0;
}
@media (max-width: 575px) {
.client__thumbs__wrapper .client__thumbs__item {
max-width: 44px;
height: 44px;
line-height: 44px;
-webkit-margin-start: -15px;
margin-inline-start: -15px;
}
.client__thumbs__wrapper .client__thumbs__item img {
height: 40px;
}
.client__thumbs__wrapper .client__thumbs__text {
width: 40px;
height: 40px;
}
}
/* !END: Testimonials CSS */
/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.blog__single__wrapper__3 .blog__single {
padding: 15px;
background-color: var(--tj-color-theme-bg1);
border-radius: 12px;
}
.blog__single__wrapper__3 .blog__single__banner {
border-radius: 10px;
border-end-end-radius: 0;
overflow: hidden;
}
.blog__single__wrapper__3 .blog__single__banner img {
border-radius: 0;
}
.blog__single__wrapper__3 .blog__single__date {
position: relative;
top: auto;
left: auto;
bottom: 0;
border-end-start-radius: 0;
border-end-end-radius: 0;
}
.blog__single__wrapper__3 .blog__single__date__wrapper {
position: absolute;
right: 0;
bottom: 0;
-webkit-padding-start: 17px;
padding-inline-start: 17px;
padding-top: 17px;
background-color: var(--tj-color-theme-bg1);
border-start-start-radius: 10px;
z-index: 0;
}
.blog__single__wrapper__3 .blog__single__date__wrapper::before, .blog__single__wrapper__3 .blog__single__date__wrapper::after {
content: "";
position: absolute;
background-color: transparent;
top: -10px;
right: 0;
width: 25px;
height: 10px;
-webkit-box-shadow: 10px 0 0 0 var(--tj-color-theme-bg1);
box-shadow: 10px 0 0 0 var(--tj-color-theme-bg1);
border-top-right-radius: 10px;
z-index: -1;
}
.blog__single__wrapper__3 .blog__single__date__wrapper::before {
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}
.blog__single__wrapper__3 .blog__single__date__wrapper::after {
top: auto;
right: auto;
left: -25px;
bottom: 0;
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}
.blog__single__wrapper__3 .blog__single__date__month {
padding: 4px 0 4px;
border: 1px solid var(--tj-color-border-1);
border-radius: 0;
border-end-start-radius: 8px;
border-end-end-radius: 8px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper__3 .blog__single__date__wrapper {
-webkit-padding-start: 13px;
padding-inline-start: 13px;
padding-top: 13px;
}
}
.blog__single__wrapper__3 .blog__single__content {
padding: 15px;
background-color: transparent;
}
.blog__single__wrapper__3 .blog__single__content__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 24px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 16px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.blog__single__wrapper__3 .blog__single__content__list {
margin-bottom: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper__3 .blog__single__content__list {
margin-bottom: 12px;
}
}
.blog__single__wrapper__3 .blog__single__content__list li {
position: relative;
font-size: 14px;
}
.blog__single__wrapper__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%;
-webkit-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
transform: translate(10px, -50%);
}
.blog__single__wrapper__3 .blog__single__content__list li:last-child::after {
display: none;
}
.blog__single__wrapper__3 .blog__single__content__tag {
font-family: var(--tj-ff-body);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 3px 6px 3px;
background-color: var(--tj-color-common-white);
border: 1px solid var(--tj-color-border-1);
color: var(--tj-color-theme-secondary);
font-size: 16px;
font-weight: var(--tj-fw-medium);
line-height: 1;
letter-spacing: 2%;
border-radius: 17px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.blog__single__wrapper__3 .blog__single__content__tag {
font-size: 14px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper__3 .blog__single__content__tag {
font-size: 14px;
}
}
.blog__single__wrapper__3 .blog__single__content__tag:hover {
color: var(--tj-color-common-white) !important;
background-color: var(--tj-color-theme-secondary);
border-color: var(--tj-color-theme-secondary);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.blog__single__wrapper__3 .blog__single__content {
padding: 15px 5px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single__wrapper__3 .blog__single__content {
padding: 15px 5px 10px;
}
}
/* !END: Blog CSS */
/**----------------------------------------
START: Header CSS
----------------------------------------*/
.header--10 .header__wrapper {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.header--10 .header__wrapper > div:last-child {
margin-left: 0;
}
.header--10 .header__logo {
width: 133px;
}
.header--10.header {
max-width: calc(100% - 60px);
left: 30px;
right: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.header--10.header {
max-width: calc(100% - 30px);
left: 15px;
right: 15px;
}
}
@media (max-width: 575px) {
.header--10.header {
max-width: calc(100% - 20px);
left: 10px;
right: 10px;
}
}
.header--10.header .header__right .header__mobile-toggler {
border-radius: 100%;
}
.header--10.header .header__right .tj-btn {
padding: 14px 30px;
border-radius: 58px;
}
.header--10.header .header__right .tj-btn::after {
border-radius: 58px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
.header--10.header .header__right .tj-btn {
padding: 11px 25px;
}
}
.header--10.header--absolute {
margin-top: 30px;
border-radius: 0;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.header--10.header--absolute {
margin-top: 10px;
}
}
@media (max-width: 575px) {
.header--10.header--absolute {
margin-top: 0;
}
}
.header--10.header--absolute .mainmenu {
background: rgba(255, 255, 255, 0.1);
padding-left: 15px;
padding-right: 15px;
border-radius: 58px;
}
.header--10.header--absolute .mainmenu nav > ul > li > a {
padding: 10px 20px;
color: var(--tj-color-common-white);
}
.header--10.header--absolute .mainmenu nav > ul > li.has-dropdown > a::after {
color: var(--tj-color-common-white);
}
.header--10.header--absolute .mainmenu nav > ul > li .sub-menu {
border-radius: 12px;
margin-top: 10px;
z-index: 0;
}
.header--10.header--absolute .mainmenu nav > ul > li .sub-menu::after {
content: "";
position: absolute;
left: 0;
top: -11px;
width: 100%;
height: 100%;
z-index: -1;
}
.header--10.header--absolute .tj-btn--bordered {
color: var(--tj-color-common-white);
border-color: var(--tj-color-border-4);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
.header--10.header--absolute .tj-btn--bordered {
padding: 11px 25px;
}
}
.header--10.header--absolute .tj-btn--bordered::after {
background-color: var(--tj-color-theme-bg4);
backdrop-filter: blur(20px);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.header--10.header--absolute .tj-btn--bordered:hover {
border-color: var(--tj-color-border-6);
}
.header--10.header--absolute .tj-btn--bordered:hover::after {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.header--10.header--absolute .header__right .header__mobile-toggler {
border-color: var(--tj-color-common-white);
background-color: transparent;
}
.header--10.header--absolute .header__right .header__mobile-toggler span {
background-color: var(--tj-color-common-white);
}
.header--10.header-duplicate {
top: -120px; /* Initially hidden */
}
.header--10.header-duplicate.sticky {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
top: 0; /* Sticks to the top */
}
.header--10.header-duplicate .header__wrapper {
padding-left: 20px;
padding-right: 20px;
}
@media (max-width: 575px) {
.header--10.header-duplicate .header__wrapper {
padding-left: 15px;
padding-right: 15px;
}
}
/* !END: Header CSS */
/**----------------------------------------
START: Footer CSS
----------------------------------------*/
.footer--10 .footer__inner {
background: transparent;
margin-bottom: 0;
padding: 120px 0 75px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--10 .footer__inner {
padding: 80px 0 35px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--10 .footer__inner {
padding: 60px 0 20px 0;
}
}
.footer--10 .footer__inner::after {
display: none;
}
.footer--10 .footer__top__title {
color: var(--tj-color-theme-dark);
font-size: 70px;
line-height: 1.114;
margin-top: -14px;
margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.footer--10 .footer__top__title {
font-size: 60px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--10 .footer__top__title {
font-size: 50px;
margin-top: -8px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--10 .footer__top__title {
font-size: 40px;
margin-top: -8px;
}
}
.footer--10 .footer__top__list li {
color: var(--tj-color-theme-dark);
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-sbold);
letter-spacing: -0.02em;
}
.footer--10 .footer__widget__wrapper--2 {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.footer--10 .footer__widget__wrapper--2 .footer__title {
color: var(--tj-color-theme-dark);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--10 .footer__widget__wrapper--2 .footer__title {
margin-bottom: 30px;
}
}
.footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe {
margin-left: 0;
padding: 0;
}
.footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe::before, .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe::after {
display: none;
}
.footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .hero__subscription {
padding-top: 25px;
margin-bottom: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .hero__subscription {
padding-top: 20px;
margin-bottom: 20px;
}
}
.footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper {
padding: 6px;
background-color: var(--tj-color-common-white);
border-color: var(--tj-color-border-11);
max-width: 540px;
width: 100%;
border-radius: 8px;
}
.footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper:has(.tj-input:not(.tj-nice-select):focus) {
border-color: var(--tj-color-theme-primary);
}
.footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper .tj-input {
padding: 14px 18px;
color: inherit;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper .tj-input {
padding: 12px;
}
}
.footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper .tj-btn {
padding: 17px 25px;
border-radius: 6px;
}
.footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper .tj-btn:hover {
color: var(--tj-color-theme-primary);
border-color: var(--tj-color-theme-primary);
}
.footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper .tj-btn:hover i {
color: var(--tj-color-theme-primary);
}
.footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper .tj-btn::after {
border-radius: 6px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper .tj-btn {
padding: 15px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe {
width: 100%;
max-width: 100%;
}
}
.footer--10 .footer__widget__wrapper--2 .footer__widget--services {
margin-left: 0;
}
.footer--10 .footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li a {
color: var(--tj-color-theme-dark);
}
.footer--10 .footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.footer--10 .footer__widget__wrapper--2 .footer__widget {
width: 100%;
max-width: calc(45% - 20px);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--10 .footer__widget__wrapper--2 .footer__widget {
margin-bottom: 40px;
}
}
.footer--10 .footer-contact-wrap {
padding: 60px 0;
border-top: 1px solid var(--tj-color-border-11);
border-bottom: 1px solid var(--tj-color-border-11);
}
.footer--10 .footer-contact-wrap .footer__widget {
margin-bottom: 0;
}
.footer--10 .footer-contact-wrap .footer__copyright__logo {
max-width: 225px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer--10 .footer-contact-wrap .footer__copyright__logo {
margin-bottom: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.footer--10 .footer-contact-wrap .footer__copyright__logo {
margin-bottom: 20px;
}
}
.footer--10 .footer-contact-wrap .footer__contact__single a {
color: var(--tj-color-theme-dark);
background: var(--tj-color-common-white);
border-color: var(--tj-color-common-white);
font-weight: var(--tj-fw-sbold);
border-radius: 6px;
}
.footer--10 .footer-contact-wrap .footer__contact__ratings {
background: var(--tj-color-common-white);
border-radius: 6px;
}
.footer--10 .footer-contact-wrap .footer__contact__ratings .star-ratings .empty-ratings,
.footer--10 .footer-contact-wrap .footer__contact__ratings .star-ratings .fill-ratings {
color: var(--tj-color-theme-dark);
}
.footer--10 .footer-contact-wrap .footer__contact__ratings__divider {
background: var(--tj-color-border-1);
}
.footer--10 .footer__copyright__wrapper {
border: 0;
margin: 0;
}
/* !END: Footer CSS */
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.hero--11 {
position: relative;
overflow: hidden;
background-color: var(--tj-color-theme-dark);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0;
border-radius: 0 0 20px 20px;
}
.hero--11 .hero__inner {
min-height: 900px;
padding-top: 152px;
padding-bottom: 80px;
overflow: visible;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--11 .hero__inner {
min-height: 710px;
padding-top: 120px;
padding-bottom: 150px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero--11 .hero__inner {
min-height: 680px;
padding-top: 120px;
padding-bottom: 40px;
}
}
@media (max-width: 575px) {
.hero--11 .hero__inner {
min-height: 670px;
padding-top: 120px;
padding-bottom: 15px;
}
}
.hero--11 .hero__left {
max-width: 550px;
position: relative;
z-index: 1;
padding-top: 45px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero--11 .hero__left {
max-width: 500px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--11 .hero__left {
max-width: 400px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--11 .hero__left {
padding-top: 0;
padding-bottom: 60px;
}
}
.hero--11 .hero__left .btn-area {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 15px;
}
.hero--11 .hero__left .btn-area .tj-btn--popup {
width: auto;
height: auto;
border-radius: 60px;
padding: 19px 30px;
color: var(--tj-color-common-white);
background-color: var(--tj-color-theme-bg4);
backdrop-filter: blur(20px);
border-color: transparent;
}
.hero--11 .hero__left .btn-area .tj-btn--popup i {
color: var(--tj-color-common-white);
}
.hero--11 .hero__left .btn-area .tj-btn--popup .btn-text {
font-weight: var(--tj-fw-sbold);
overflow: hidden;
}
.hero--11 .hero__left .btn-area .tj-btn--popup .btn-text span {
text-shadow: 0 20px 0;
}
.hero--11 .hero__left .btn-area .tj-btn--popup:hover .btn-text span {
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
.hero--11 .hero__subtitle {
color: var(--tj-color-common-white2);
font-size: 18px;
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-medium);
letter-spacing: -0.02em;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
margin-bottom: 28px;
}
.hero--11 .hero__subtitle img {
width: 28px;
-webkit-animation: shake2 1.6s linear infinite;
animation: shake2 1.6s linear infinite;
}
.hero--11 .hero__title {
line-height: 1.143;
letter-spacing: -0.02em;
font-weight: var(--tj-fw-sbold);
color: var(--tj-color-common-white);
margin-top: -15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero--11 .hero__title {
font-size: 55px;
max-width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--11 .hero__title {
max-width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--11 .hero__title {
font-size: 60px;
margin-top: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero--11 .hero__title {
font-size: 60px;
}
}
@media (max-width: 575px) {
.hero--11 .hero__title {
font-size: 40px;
}
}
.hero--11 .hero__desc {
color: var(--tj-color-common-white2);
font-size: var(--tj-fs-h5);
margin-bottom: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--11 .hero__desc {
font-size: 18px;
}
}
.hero--11 .hero__socials {
margin-top: 143px;
}
.hero--11 .hero__socials span {
color: var(--tj-color-common-white);
font-size: 16px;
font-weight: var(--tj-fw-medium);
line-height: 1;
text-transform: uppercase;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin-bottom: 18px;
opacity: 0.5;
}
.hero--11 .hero__socials .tj-socials ul {
gap: 6px;
line-height: 1;
}
.hero--11 .hero__socials .tj-socials ul li a i {
color: var(--tj-color-common-white);
position: relative;
z-index: 0;
}
.hero--11 .hero__socials .tj-socials 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;
}
.hero--11 .hero__socials .tj-socials ul li a:hover i {
color: var(--tj-color-theme-secondary);
}
.hero--11 .hero__socials .tj-socials ul li a:hover i::after {
background-color: var(--tj-color-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero--11 .hero__socials {
margin-top: 100px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--11 .hero__socials {
margin-top: 70px;
}
}
.hero--11 .hero__shape {
position: absolute;
max-width: 130px;
width: 100%;
top: 40%;
left: -60px;
z-index: 0;
mix-blend-mode: luminosity;
}
.hero--11 .hero__shape--2 {
top: auto;
bottom: -50px;
left: auto;
right: 150px;
}
.hero--11 .hero__shape img {
opacity: 0.18;
}
.h10-hero-banner {
max-width: 543px;
width: 100%;
border-radius: 12px;
overflow: hidden;
-webkit-mask-image: url(../img/shapes/h10-hero-img-mask.svg);
mask-image: url(../img/shapes/h10-hero-img-mask.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: top left;
mask-position: top left;
-webkit-margin-start: 15px;
margin-inline-start: 15px;
}
.h10-hero-banner-area {
max-width: 645px;
width: 100%;
position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.h10-hero-banner-area {
max-width: 630px;
}
}
.h10-hero-banner-area .hero-funfact {
max-width: 190px;
width: 100%;
background-color: var(--tj-color-theme-secondary);
border-radius: 8px;
padding: 25px;
position: absolute;
bottom: 150px;
right: -25px;
}
.h10-hero-banner-area .hero-funfact .number {
font-size: 76px;
line-height: 0.8;
color: var(--tj-color-common-white);
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-bold);
letter-spacing: -0.025em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: end;
}
.h10-hero-banner-area .hero-funfact .number .odometer-symbol {
font-size: 38px;
line-height: 1;
margin-bottom: 8px;
}
.h10-hero-banner-area .hero-funfact .number .odometer.odometer-auto-theme,
.h10-hero-banner-area .hero-funfact .number .odometer span {
color: var(--tj-color-common-white);
line-height: 0.8;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.h10-hero-banner-area .hero-funfact .number {
font-size: 66px;
}
}
.h10-hero-banner-area .hero-funfact .text {
font-size: 16px;
line-height: 1.5;
color: var(--tj-color-common-white);
font-family: var(--tj-ff-heading);
font-weight: var(--tj-fw-bold);
letter-spacing: -0.02em;
margin-top: 16px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.h10-hero-banner-area .hero-funfact {
max-width: 170px;
padding: 20px;
bottom: 130px;
}
}
.h10-hero-banner-area .hero-funfact--2 {
background-color: var(--tj-color-common-white);
bottom: -95px;
right: 235px;
}
.h10-hero-banner-area .hero-funfact--2 .number {
color: var(--tj-color-theme-dark);
}
.h10-hero-banner-area .hero-funfact--2 .number .odometer span {
color: var(--tj-color-theme-dark);
}
.h10-hero-banner-area .hero-funfact--2 .text {
color: var(--tj-color-theme-dark);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.h10-hero-banner-area .hero-funfact--2 {
bottom: -90px;
right: 206px;
}
}
.h10-hero-banner-area .star-shape {
width: 86px;
position: absolute;
top: 70px;
right: 25px;
}
.h10-hero-banner-area .star-shape img {
-webkit-animation: spinner 8s linear infinite;
animation: spinner 8s linear infinite;
}
.h10-hero-banner-area .cursor-shape {
width: 112px;
position: absolute;
bottom: 7px;
left: -155px;
}
.h10-hero-banner-area .cursor-shape img {
-webkit-animation: moveHor 2.5s alternate infinite linear;
animation: moveHor 2.5s alternate infinite linear;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h10-hero-banner-area .cursor-shape {
left: 0;
}
}
.h10-hero-banner img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h10-hero-banner {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.h10-hero-banner {
max-width: 460px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h10-hero-banner {
max-width: 460px;
}
}
@-webkit-keyframes shake2 {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
10% {
-webkit-transform: rotate(7deg);
transform: rotate(7deg);
}
20% {
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg);
}
30% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
40% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
50% {
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
60% {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
70% {
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
}
80%, 90%, 100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
@keyframes shake2 {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
10% {
-webkit-transform: rotate(7deg);
transform: rotate(7deg);
}
20% {
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg);
}
30% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
40% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
50% {
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
60% {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
70% {
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
}
80%, 90%, 100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
/* !END: Hero CSS */
/**----------------------------------------
START: Service CSS
----------------------------------------*/
.h10-feature-wrap {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.h10-feature-wrap {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h10-feature-wrap {
grid-template-columns: 100%;
}
}
.h10-feature.service__card {
background: transparent;
padding: 15px 15px 25px 15px;
border-radius: 10px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.h10-feature.service__card::after {
display: none;
}
.h10-feature.service__card .service__icon {
background-color: var(--tj-color-theme-bg1);
width: 100%;
height: 180px;
font-size: 80px;
border: 0;
border-radius: 8px;
margin-bottom: 18px;
}
.h10-feature.service__card .service__icon i {
color: var(--tj-color-theme-secondary);
}
.h10-feature.service__card .service__inner {
padding: 0 15px;
}
.h10-feature.service__card .service__title {
margin-bottom: 16px;
color: var(--tj-color-heading-primary);
}
.h10-feature.service__card .service__desc {
color: var(--tj-color-text-body);
margin-bottom: 20px;
}
.h10-feature.service__card:nth-child(even) .service__icon {
background-color: var(--tj-color-theme-bg2);
}
.h10-feature.service__card:nth-child(even) .service__icon i {
color: var(--tj-color-theme-primary);
}
.h10-feature.service__card .tj-btn-2 {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 4px;
overflow: hidden;
color: var(--tj-color-heading-primary);
}
.h10-feature.service__card .tj-btn-2 span {
text-shadow: 0 22px 0;
text-indent: -100px;
}
.h10-feature.service__card .tj-btn-2 i {
color: inherit;
font-size: 18px;
}
.h10-feature.service__card .tj-btn-2:hover span {
-webkit-transform: translateY(-22px);
-ms-transform: translateY(-22px);
transform: translateY(-22px);
}
.h10-feature.service__card:hover .tj-btn-2 span {
text-indent: 0;
}
/* !END: Service CSS */
/**----------------------------------------
START: Abour CSS
----------------------------------------*/
.about--11 .section-heading {
overflow: visible;
}
.about--11 .section-heading__title {
margin-bottom: 15px;
}
.about--11 .section-heading__title span {
color: inherit;
width: 120px;
height: 56px;
line-height: 1;
position: relative;
top: 10px;
display: inline-block;
z-index: 2;
margin-top: -5px;
cursor: pointer;
}
.about--11 .section-heading__title span img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: 100%;
border-radius: 100px;
-webkit-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.about--11 .section-heading__title span:hover img {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.about--11 .section-heading__title span {
width: 102px;
height: 48px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.about--11 .section-heading__title span {
width: 86px;
height: 40px;
}
}
@media (max-width: 575px) {
.about--11 .section-heading__title span {
width: 78px;
height: 36px;
top: 7px;
}
}
.about--11 .experience-wrap {
background-color: var(--tj-color-theme-secondary);
border-radius: 10px;
overflow: hidden;
max-width: 368px;
width: 100%;
padding: 60px 0;
position: relative;
z-index: 2;
}
.about--11 .experience-wrap .text-marquee-slider__wrap {
left: 6px;
z-index: 1;
width: 122%;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.about--11 .experience-wrap .text-marquee-slider__wrap .text-marquee-slider__item {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px;
}
.about--11 .experience-wrap .text-marquee-slider__wrap .text-marquee-slider__title {
font-size: 24px;
opacity: 1;
}
.about--11 .experience-wrap .text-marquee-slider__wrap .text-marquee-slider__dot {
width: 6px;
height: 6px;
border-radius: 100%;
background-color: var(--tj-color-common-white);
opacity: 1;
margin-top: 6px;
}
.about--11 .experience-wrap .experience-year {
position: relative;
z-index: 2;
-webkit-margin-start: 145px;
margin-inline-start: 145px;
}
.about--11 .experience-wrap .experience-year .year-number {
font-size: 318px;
line-height: 0.85;
font-weight: var(--tj-fw-bold);
font-family: var(--tj-ff-heading);
color: var(--tj-color-common-white);
letter-spacing: -0.025em;
margin-top: -20px;
}
@media (max-width: 575px) {
.about--11 .experience-wrap .experience-year .year-number {
font-size: 280px;
}
}
.about--11 .experience-wrap .experience-year .year-text {
font-size: 16px;
font-weight: var(--tj-fw-sbold);
font-family: var(--tj-ff-heading);
color: var(--tj-color-common-white);
letter-spacing: -0.02em;
max-width: 147px;
width: 100%;
margin-top: 25px;
}
.about--11 .about__content {
max-width: 735px;
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-padding-start: 0;
padding-inline-start: 0;
}
.about--11 .about__desc {
max-width: 645px;
width: 100%;
}
.about--11 .about__action {
margin-top: 22px;
position: relative;
}
.about--11 .about__action .plus-shape {
position: absolute;
width: 30px;
left: 275px;
bottom: -22px;
-webkit-animation: spinner 3s 0s infinite alternate none running;
animation: spinner 3s 0s infinite alternate none running;
}
/* !END: About CSS */
/**----------------------------------------
START: Client CSS
----------------------------------------*/
.client-slider-3 {
padding-top: 120px;
padding-bottom: 0;
}
.client-slider-3 .client-logo {
width: 233px;
height: 133px;
border: 0;
}
.client-slider-3 .client-logo img {
opacity: 1;
}
.client-slider-3 .client-logo:hover img {
opacity: 1;
visibility: visible;
width: auto;
-webkit-animation: gelatine 0.5s linear;
animation: gelatine 0.5s linear;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.client-slider-3 .client-logo {
width: 210px;
height: 110px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.client-slider-3 .client-logo {
width: 190px;
height: 100px;
}
}
@media (max-width: 575px) {
.client-slider-3 .client-logo {
width: 170px;
height: 80px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.client-slider-3 {
padding-top: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.client-slider-3 {
padding-top: 80px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.client-slider-3 {
padding-top: 60px;
}
}
/* !END: Client CSS */
/**----------------------------------------
START: Service CSS
----------------------------------------*/
.h10-service .section-heading__desc {
max-width: 292px;
}
.h10-service-area {
position: relative;
z-index: 1;
}
.h10-service-item {
width: 57.5%;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h10-service-item {
width: 100%;
}
}
.h10-service-item:first-child .h10-service-content {
border-top: 1px solid var(--tj-color-border-1);
}
.h10-service-item.hover-item.active .h10-service-content {
height: auto;
}
.h10-service-item.hover-item.active .h10-service-content .service-icon {
background-color: var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
}
.h10-service-item.hover-item.active .h10-service-content .desc {
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
.h10-service-item.hover-item.active .h10-service-content .btn-icon i {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.h10-service-item.hover-item.active .h10-service-img {
z-index: 5;
}
.h10-service-item.hover-item.active .h10-service-img img {
left: 0;
opacity: 1;
visibility: visible;
-webkit-transition: all 0.5s linear 0s;
transition: all 0.5s linear 0s;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h10-service-item.hover-item.active .h10-service-img img {
position: unset;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h10-service-item.hover-item.active .h10-service-img {
height: 300px;
margin-top: 15px;
}
}
.h10-service-content {
height: 122px;
border-bottom: 1px solid var(--tj-color-border-1);
padding: 28px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.h10-service-content {
padding: 24px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h10-service-content {
padding: 20px 0;
}
}
.h10-service-content .service-title {
font-size: 26px;
margin: 15px 0;
}
.h10-service-content .service-title a:hover {
color: var(--tj-color-theme-primary);
}
.h10-service-content .service-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background-color: var(--tj-color-theme-secondary);
color: var(--tj-color-common-white);
font-size: 40px;
line-height: 1;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h10-service-content .service-icon {
width: 54px;
height: 54px;
font-size: 30px;
}
}
.h10-service-content .desc {
max-width: 645px;
margin: 0;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
}
.h10-service-content .btn-icon {
font-size: 20px;
line-height: 1;
width: 30px;
height: 30px;
margin-top: 20px;
}
.h10-service-content .btn-icon i {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.h10-service-inner {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h10-service-inner {
gap: 20px;
}
}
.h10-service-img {
width: 502px;
height: 560px;
position: absolute;
top: 0;
right: 0;
border-radius: 10px;
overflow: hidden;
z-index: 0;
}
.h10-service-img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 10px;
position: absolute;
left: -50%;
opacity: 0;
visibility: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.h10-service-img {
width: 430px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h10-service-img {
width: 360px;
height: 480px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h10-service-img {
width: 100%;
height: 0;
position: unset;
-webkit-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
}
/* !END: Service CSS */
/**----------------------------------------
START: Package CSS
----------------------------------------*/
.h10-package .section-heading__title {
color: var(--tj-color-common-white);
}
.toggle_switcher {
cursor: pointer;
display: inline-block;
}
.toggle_switcher .toggle-checkbox {
position: absolute;
visibility: hidden;
}
.toggle_switcher .toggle-checkbox:checked + .toggle-switch::before {
left: 37px;
}
.toggle_switcher .toggle-switch {
display: inline-block;
background-color: var(--tj-color-theme-bg4);
backdrop-filter: blur(20px);
border: 1px solid var(--tj-color-border-4);
border-radius: 43px;
width: 70px;
height: 36px;
position: relative;
vertical-align: middle;
-webkit-transition: background 0.25s;
transition: background 0.25s;
}
.toggle_switcher .toggle-switch::before, .toggle_switcher .toggle-switch::after {
content: "";
}
.toggle_switcher .toggle-switch::before {
display: block;
background-color: var(--tj-color-theme-primary);
border-radius: 50%;
width: 26px;
height: 26px;
position: absolute;
top: 4px;
left: 5px;
-webkit-transition: left 0.25s;
transition: left 0.25s;
}
.price_switcher {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
font-weight: var(--tj-fw-sbold);
font-size: 16px;
line-height: 1.5;
color: var(--tj-color-common-white);
}
.price_switcher p {
margin: 0;
}
.price_switcher span {
color: var(--tj-color-theme-primary);
}
.package__single--3 {
background: var(--tj-color-theme-bg4);
backdrop-filter: blur(20px);
border-color: var(--tj-color-border-4);
}
.package__single--3.package__single--recommended {
background: var(--tj-color-theme-bg4);
backdrop-filter: blur(20px);
border: 1px solid var(--tj-color-border-4);
}
.package__single--3.package__single--recommended .tj-btn--full {
border-color: var(--tj-color-border-4);
}
.package__single--3.package__single--recommended .tj-btn--full::after {
display: block;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.package__single--3 .package__features__title,
.package__single--3 .package__price,
.package__single--3 .package__name {
color: var(--tj-color-common-white);
}
.package__single--3 .package__price {
border-color: var(--tj-color-border-4);
}
.package__single--3 .package__features {
background: transparent;
border: 1px solid var(--tj-color-border-4);
margin-top: 30px;
}
.package__single--3 .package__features ul li {
color: var(--tj-color-common-white2);
}
.package__single--3 .package__features ul li::before {
color: var(--tj-color-common-white2);
}
.package__single--3 .package__price__type,
.package__single--3 .package__desc {
color: var(--tj-color-common-white2);
}
.package__single--3 .tj-btn--full {
color: var(--tj-color-common-white);
border-color: var(--tj-color-border-4);
}
.package__single--3 .tj-btn--full .btn-text {
overflow: hidden;
}
.package__single--3 .tj-btn--full .btn-text span {
text-shadow: 0 22px 0;
}
.package__single--3 .tj-btn--full .btn-icon {
overflow: hidden;
}
.package__single--3 .tj-btn--full .btn-icon i {
color: var(--tj-color-common-white);
text-shadow: -15px 0 0;
}
.package__single--3 .tj-btn--full::after {
display: none;
}
.package__single--3 .tj-btn--full:hover .btn-text span {
-webkit-transform: translateY(-22px);
-ms-transform: translateY(-22px);
transform: translateY(-22px);
}
.package__single--3 .tj-btn--full:hover .btn-icon i {
-webkit-transform: translateX(15px);
-ms-transform: translateX(15px);
transform: translateX(15px);
}
.package__single--3 .package__badge {
background-color: var(--tj-color-theme-secondary);
border-color: var(--tj-color-border-4);
width: 300px;
padding: 6px 60px 5px;
}
.package__single--3 .package__badge .scroll-slider {
--gap: 10px;
}
.package__single--3 .package__badge .scroll-slider .badge-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.package__single--3 .package__badge .scroll-slider .badge-item .dot {
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--tj-color-common-white);
}
/* Scroll slider */
.scroll-slider {
--gap: 30px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: var(--gap);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.scroll-slider {
--gap: 20px;
}
}
.scroll-wrapper {
-ms-flex-negative: 0;
flex-shrink: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--gap);
min-width: 100%;
-webkit-animation: scroll 20s linear infinite;
animation: scroll 20s linear infinite;
}
/* RTL override */
[dir=rtl] .scroll-wrapper {
-webkit-animation: scroll-rtl 30s linear infinite;
animation: scroll-rtl 30s linear infinite;
}
@-webkit-keyframes scroll {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(calc(-100% - var(--gap)));
transform: translateX(calc(-100% - var(--gap)));
}
}
@keyframes scroll {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(calc(-100% - var(--gap)));
transform: translateX(calc(-100% - var(--gap)));
}
}
@-webkit-keyframes scroll-rtl {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(calc(100% + var(--gap)));
transform: translateX(calc(100% + var(--gap)));
}
}
@keyframes scroll-rtl {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(calc(100% + var(--gap)));
transform: translateX(calc(100% + var(--gap)));
}
}
/* !END: Package CSS */
/**----------------------------------------
START: Portfolio CSS
----------------------------------------*/
.h10-portfolio-section {
padding-top: 120px;
padding-bottom: 90px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h10-portfolio-section {
padding-top: 100px;
padding-bottom: 70px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.h10-portfolio-section {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h10-portfolio-section {
padding-top: 60px;
padding-bottom: 60px;
}
}
.h10-portfolio-section .section-heading--2 {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h10-portfolio-section .section-heading--2 {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 30px;
}
}
.h10-portfolio-section .section-heading__right {
margin-top: auto;
margin-bottom: 0;
}
.h10-portfolio-section .section-heading__title {
font-size: 70px;
margin-top: -16px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.h10-portfolio-section .section-heading__title {
font-size: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.h10-portfolio-section .section-heading__title {
font-size: 50px;
margin-top: -10px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h10-portfolio-section .section-heading__title {
font-size: 40px;
margin-top: -10px;
}
}
.portfolio-filter .button-group {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.portfolio-filter .button-group button {
background: transparent;
border: none;
color: var(--tj-color-text-body);
font-size: 16px;
font-weight: var(--tj-fw-medium);
line-height: 1;
padding: 13px 22px;
border-radius: 50px;
border: 1px solid var(--tj-color-border-1);
z-index: 10;
position: relative;
}
.portfolio-filter .button-group button.active {
color: var(--tj-color-common-white);
background-color: var(--tj-color-theme-secondary);
border-color: var(--tj-color-theme-secondary);
}
.portfolio-box {
padding-top: 50px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio-box {
padding-top: 30px;
}
}
.portfolio-box .h8-portfolio-single.portfolio__single {
margin-bottom: 30px;
max-width: calc(50% - 15px);
padding: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio-box .h8-portfolio-single.portfolio__single {
max-width: calc(50% - 10px);
margin-bottom: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio-box .h8-portfolio-single.portfolio__single {
max-width: 100%;
margin-bottom: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__img {
height: 260px;
}
}
.portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__content {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
padding: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__content {
padding: 15px 0;
}
}
.portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__title {
margin-top: -5px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__title br {
display: none;
}
}
.portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__tag {
color: var(--tj-color-text-body) !important;
border-color: var(--tj-color-border-1) !important;
background-color: var(--tj-color-common-white) !important;
margin: 15px 0 0 0;
}
.portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__tag:hover {
color: var(--tj-color-common-white) !important;
border-color: var(--tj-color-theme-secondary) !important;
background-color: var(--tj-color-theme-secondary) !important;
}
.portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__action a {
position: static;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 1;
font-size: 22px;
color: var(--tj-color-theme-dark);
background-color: var(--tj-color-common-white);
border-color: var(--tj-color-border-1);
}
.portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__action a i {
color: inherit;
}
.portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__action a:hover {
-webkit-transform: rotate(0) !important;
-ms-transform: rotate(0) !important;
transform: rotate(0) !important;
}
.portfolio-box .h8-portfolio-single.portfolio__single:hover .portfolio__single__action a {
color: var(--tj-color-common-white);
background-color: var(--tj-color-theme-primary);
border-color: var(--tj-color-theme-primary);
}
.portfolio-box .h8-portfolio-single.portfolio__single:hover .portfolio__single__action a i {
color: var(--tj-color-common-white);
}
.portfolio-box .portfolio-sizer {
width: calc(50% - 15px);
}
.portfolio-box .gutter-sizer {
width: 30px;
}
/* !END: Portfolio CSS */
/**----------------------------------------
START: Testimonials CSS
----------------------------------------*/
.h10-testimonial .section-heading--spacing {
margin-bottom: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.h10-testimonial .section-heading--spacing {
margin-bottom: 40px;
}
}
.h10-testimonial .section-heading__title {
margin-bottom: 20px;
}
.h10-testimonial-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px;
-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(217, 217, 217, 0)), color-stop(20%, rgb(166, 166, 166)), color-stop(80%, rgb(140, 140, 140)), to(rgba(115, 115, 115, 0)));
-webkit-mask-image: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, rgb(166, 166, 166) 20%, rgb(140, 140, 140) 80%, rgba(115, 115, 115, 0) 100%);
mask-image: -webkit-gradient(linear, left top, right top, from(rgba(217, 217, 217, 0)), color-stop(20%, rgb(166, 166, 166)), color-stop(80%, rgb(140, 140, 140)), to(rgba(115, 115, 115, 0)));
mask-image: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, rgb(166, 166, 166) 20%, rgb(140, 140, 140) 80%, rgba(115, 115, 115, 0) 100%);
}
.testimonials__slider__item.h10-testimonial-item {
max-width: 420px;
width: 100%;
background-color: var(--tj-color-common-white);
padding: 30px;
border: 0;
border-radius: 12px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.testimonials__slider__item.h10-testimonial-item {
padding: 30px;
}
}
@media (max-width: 575px) {
.testimonials__slider__item.h10-testimonial-item {
padding: 24px 20px 28px;
}
}
.testimonials__slider__item.h10-testimonial-item .testimonials__qoute__2 {
font-size: 45px;
color: var(--tj-color-theme-secondary);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.testimonials__slider__item.h10-testimonial-item .testimonials__desc {
font-size: 18px;
color: var(--tj-color-text-body);
border: 0;
padding-top: 17px;
padding-bottom: 18px;
margin-bottom: 0;
}
@media (max-width: 575px) {
.testimonials__slider__item.h10-testimonial-item .testimonials__desc {
font-size: 16px;
}
}
.testimonials__slider__item.h10-testimonial-item .testimonials__author__name {
margin-bottom: 0;
}
.testimonials__slider__item.h10-testimonial-item .testimonials__rating {
margin-bottom: 0;
}
[dir=rtl] .h10-testimonial-item {
direction: ltr;
}
/* !END: Testimonials CSS */
/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.h10-blog .section-heading__desc {
max-width: 292px;
}
.blog__single.h10-blog-single {
background-color: var(--tj-color-theme-bg1);
border-radius: 12px;
}
.blog__single.h10-blog-single .blog__single__banner {
height: 303px;
}
.blog__single.h10-blog-single .blog__single__banner a {
height: 100%;
}
.blog__single.h10-blog-single .blog__single__banner a img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.blog__single.h10-blog-single .blog__single__content {
padding: 25px 30px 30px 30px;
background-color: transparent;
}
.blog__single.h10-blog-single .blog__single__content__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 24px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 16px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.blog__single.h10-blog-single .blog__single__content__list {
margin-bottom: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single.h10-blog-single .blog__single__content__list {
margin-bottom: 12px;
}
}
.blog__single.h10-blog-single .blog__single__content__list li {
position: relative;
font-size: 14px;
}
.blog__single.h10-blog-single .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%;
-webkit-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
transform: translate(10px, -50%);
}
.blog__single.h10-blog-single .blog__single__content__list li:last-child::after {
display: none;
}
.blog__single.h10-blog-single .blog__single__content__tag {
font-family: var(--tj-ff-body);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 3px 6px 3px;
background-color: var(--tj-color-common-white);
border: 1px solid var(--tj-color-border-1);
color: var(--tj-color-theme-secondary);
font-size: 16px;
font-weight: var(--tj-fw-medium);
line-height: 1;
letter-spacing: 2%;
border-radius: 17px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.blog__single.h10-blog-single .blog__single__content__tag {
font-size: 14px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single.h10-blog-single .blog__single__content__tag {
font-size: 14px;
}
}
.blog__single.h10-blog-single .blog__single__content__tag:hover {
color: var(--tj-color-common-white) !important;
background-color: var(--tj-color-theme-secondary);
border-color: var(--tj-color-theme-secondary);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single.h10-blog-single .blog__single__content {
padding: 20px 15px;
}
}
.blog__single.h10-blog-single .blog__single__title {
margin-bottom: 22px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single.h10-blog-single .blog__single__title {
margin-bottom: 15px;
}
}
.blog__single.h10-blog-single-small {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: var(--tj-color-theme-bg1);
border-radius: 8px;
}
.blog__single.h10-blog-single-small:not(:last-child) {
margin-bottom: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single.h10-blog-single-small:not(:last-child) {
margin-bottom: 20px;
}
}
.blog__single.h10-blog-single-small .blog__single__banner {
max-width: 145px;
width: 100%;
height: 150px;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.blog__single.h10-blog-single-small .blog__single__banner a {
height: 100%;
}
.blog__single.h10-blog-single-small .blog__single__banner a img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.blog__single.h10-blog-single-small .blog__single__content {
padding: 25px;
background-color: transparent;
}
.blog__single.h10-blog-single-small .blog__single__content__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 24px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0;
}
.blog__single.h10-blog-single-small .blog__single__content__list li {
position: relative;
font-size: 14px;
}
.blog__single.h10-blog-single-small .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%;
-webkit-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
transform: translate(10px, -50%);
}
.blog__single.h10-blog-single-small .blog__single__content__list li:last-child::after {
display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.blog__single.h10-blog-single-small .blog__single__content {
padding: 15px;
}
}
.blog__single.h10-blog-single-small .blog__single__title {
font-size: 16px;
font-weight: var(--tj-fw-sbold);
margin-bottom: 10px;
}
/* !END: Blog CSS *//*# sourceMappingURL=main.css.map */