/*-----------------------------------------------------------------------------------
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-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-dark: #05173d;
--tj-color-theme-dark2: #3d4a66;
--tj-color-theme-dark3: #596580;
--tj-color-theme-dark4: rgba(5, 23, 61, 0.6);
--tj-color-green-1: #21b754;
--tj-color-grey-1: #c5c5c5;
--tj-color-border-1: #dadfe7;
--tj-color-border-2: #1d3152;
--tj-color-border-3: #e8dadb;
--tj-color-border-4: rgba(255, 255, 255, 0.1019607843);
--tj-color-border-5: rgba(255, 255, 255, 0.1490196078);
--tj-color-border-6: rgba(255, 255, 255, 0.4);
--tj-color-border-7: rgba(255, 255, 255, 0.3019607843);
--tj-color-border-9: rgba(255, 255, 255, 0.2);
--tj-color-border-10: rgba(218, 223, 231, 0.5019607843);
/**
@Gradient Declaration
*/
--tj-gradient-theme-primary: linear-gradient(180deg, rgba(5, 76, 224, 0.24) 0%, rgba(255, 255, 255, 0) 91.26%);
/**
@Shadows Declaration
*/
--tj-shadow-theme-primary: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843);
/**
@Border Radius Declaration
*/
--tj-br-sm: 4px;
--tj-br-md: 8px;
--tj-br-lg: 10px;
--tj-br-xl: 16px;
--tj-br-xxl: 24px;
/**
@Transition Declaration
*/
--tj-td-standard: 0.3s;
}
/**----------------------------------------
START: back to top CSS
----------------------------------------*/
.tj-anim-pulse {
-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-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-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;
}
@-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 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 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 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;
}
}
.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:focus,
a:hover {
color: inherit;
text-decoration: 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;
}
}
.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-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-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 0;
}
.goverlay {
background: rgba(0, 0, 0, 0.1803921569);
-webkit-backdrop-filter: blur(8px);
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;
}
/* !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);
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--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;
}
/* !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__title {
margin-bottom: 24px;
font-size: 48px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.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: 36px;
margin-bottom: 14px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-heading__title {
font-size: 32px;
margin-bottom: 12px;
max-width: 450px;
}
}
@media (max-width: 575px) {
.section-heading__title {
max-width: 100%;
}
}
.section-heading__title--no-space {
margin-bottom: 0;
}
.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: 40px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.section-heading--spacing {
margin-bottom: 30px;
}
}
.section-heading--2 {
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: 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;
}
@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 {
max-width: 100%;
}
}
/* !END: Section Headign 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 15px;
}
}
.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__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;
}
}
/* !END: Header CSS */
/**----------------------------------------
START: Hamburger CSS
----------------------------------------*/
.hamburger-area {
position: fixed;
right: -490px;
top: 0;
width: 450px;
height: 100%;
background-color: var(--tj-color-common-white);
-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;
-webkit-backdrop-filter: blur(37px);
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;
}
.hamburger_search select,
.hamburger_search .nice-select,
.hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox]),
.hamburger_search input {
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 25px;
background: transparent;
border: none;
outline: none;
font-size: 18px;
border-bottom: 1px solid var(--tj-color-border-1);
color: var(--tj-color-theme-dark);
}
.hamburger_search select::-ms-input-placeholder,
.hamburger_search .nice-select::-ms-input-placeholder,
.hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder,
.hamburger_search input::-ms-input-placeholder {
opacity: 0.8;
font-size: 18px;
}
.hamburger_search select::-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-start: 0;
-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);
}
.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;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.body-overlay.opened {
opacity: 1;
visibility: visible;
}
/* !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;
}
/* !END: Mainmenu CSS */
/**----------------------------------------
START: Footer CSS
----------------------------------------*/
.footer__inner {
position: relative;
background: url("../images/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("../images/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("../images/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;
}
}
.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;
}
}
/* !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-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: 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 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: pulseAnimation 2s ease-out 0.5s;
animation: pulseAnimation 2s ease-out 0.5s;
z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero__pulse-img {
left: 30.5%;
}
}
@media only screen and (min-width: 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__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("../images/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__reviews {
color: var(--tj-color-heading-primary);
padding: 5px;
border-radius: 50px;
background-color: var(--tj-color-common-white);
position: static;
-webkit-transform: none;
-ms-transform: none;
transform: none;
margin-bottom: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.hero--3 .hero__reviews {
font-size: 12px;
}
}
.hero--3 .hero__title {
max-width: 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("../images/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("../images/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("../images/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;
}
}
/* !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("../images/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__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);
-webkit-backdrop-filter: blur(7px);
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);
-webkit-backdrop-filter: blur(20px);
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("../images/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 {
padding: 120px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.about {
padding: 100px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.about {
padding: 80px 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.about {
padding: 60px 0;
}
}
.about--1 {
padding: 120px 0 170px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.about {
padding-bottom: 130px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.about {
padding: 100px 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("../images/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;
}
}
/* !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("../images/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("../images/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: 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);
}
@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);
}
.funfact-area.style-2 .funfact-item .number span {
line-height: 1;
}
.funfact-area.style-2 .funfact-item .number .odometer-symbol {
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(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) {
.funfact-area.style-2 .funfact-item .number .odometer-symbol {
-webkit-transform: translateY(3px);
-ms-transform: translateY(3px);
transform: translateY(3px);
}
}
.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;
}
/* !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: 41px;
line-height: 1;
width: 80px;
height: 80px;
background-color: var(--tj-color-common-white);
border: 1px solid var(--tj-color-border-1);
border-radius: 100%;
margin-bottom: 30px;
display: -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("../images/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("../images/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);
}
/* !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("../images/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("../images/bg-2_1.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-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 .portfolio__single:nth-child(2n) .portfolio__single__counter .number {
background: var(--tj-color-theme-bg2);
}
.portfolio--2 .portfolio__single:nth-child(2n) .portfolio__single__counter .number::after {
border-top-color: var(--tj-color-theme-bg2);
}
.portfolio--2 .portfolio__single:nth-child(3n) .portfolio__single__counter .number {
background: var(--tj-color-theme-bg6);
}
.portfolio--2 .portfolio__single:nth-child(3n) .portfolio__single__counter .number::after {
border-top-color: var(--tj-color-theme-bg6);
}
.portfolio--2 .portfolio__single:nth-child(4n) .portfolio__single__counter .number {
background: var(--tj-color-theme-bg7);
}
.portfolio--2 .portfolio__single:nth-child(4n) .portfolio__single__counter .number::after {
border-top-color: var(--tj-color-theme-bg7);
}
.portfolio--2 .portfolio__single:nth-child(5n) .portfolio__single__counter .number {
background: var(--tj-color-theme-bg5);
}
.portfolio--2 .portfolio__single:nth-child(5n) .portfolio__single__counter .number::after {
border-top-color: var(--tj-color-theme-bg5);
}
.portfolio--3 .portfolio__slider__3 {
overflow: inherit;
}
.portfolio--3 .portfolio__single {
padding: 20px;
background: var(--tj-color-common-white);
}
.portfolio--3 .portfolio__single__img {
border-radius: 16px;
overflow: hidden;
}
@media only screen and (min-width: 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);
}
/* !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;
}
@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("../images/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);
}
/* !END: Faq CSS */
/**----------------------------------------
START: Process CSS
----------------------------------------*/
.process__inner {
background: url("../images/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) {
.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: var(--tj-color-theme-bg3);
}
.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("../images/shape.svg");
mask-image: url("../images/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;
}
/* !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: 50px;
border-radius: 8px;
border: 2px solid var(--tj-color-common-white);
overflow: hidden;
}
@media (max-width: 575px) {
.testimonials__author__avatar {
max-width: 40px;
border-radius: 6px;
}
}
.testimonials__author__avatar img {
width: 100%;
}
.testimonials__author__name {
font-size: 20px;
margin-bottom: 4px;
}
@media (max-width: 575px) {
.testimonials__author__name {
font-size: 16px;
margin-bottom: 2px;
}
}
.testimonials__author__desig {
font-size: 14px;
margin-bottom: 0;
}
@media (max-width: 575px) {
.testimonials__author__desig {
font-size: 12px;
}
}
.testimonials--3 .brand-marquee__inner {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
.testimonials--3 .swiper {
padding-bottom: 0;
height: 100%;
}
.testimonials--3 .swiper-wrapper {
height: 100%;
}
.testimonials--3 .swiper-slide {
height: 100%;
}
.testimonials--3 .swiper-pagination {
bottom: 50px;
right: 30px;
left: auto;
text-align: right;
}
.testimonials--3 .testimonials__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("../images/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;
-webkit-hyphens: auto;
-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("../images/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;
}
/* !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("../images/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--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);
}
/* !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("../images/bg_1.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, .strategy .swiper-button-next {
width: 50px;
height: 50px;
border: 1px solid var(--tj-color-border-1);
background: var(--tj-color-common-white);
border-radius: 100%;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.strategy .swiper-button-prev::after, .strategy .swiper-button-next::after {
font-family: "ranko-icons";
color: var(--tj-color-theme-dark);
font-size: 14px;
}
.strategy .swiper-button-prev {
left: 10px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.strategy .swiper-button-prev::after {
content: "\e908";
}
.strategy .swiper-button-next {
right: 10px;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
.strategy .swiper-button-next::after {
content: "\e906";
}
.strategy .swiper-button-prev:hover, .strategy .swiper-button-next:hover {
border-color: var(--tj-color-theme-secondary);
background: var(--tj-color-theme-secondary);
}
.strategy .swiper-button-prev:hover::after, .strategy .swiper-button-prev:hover::after, .strategy .swiper-button-next:hover::after, .strategy .swiper-button-next:hover::after {
color: var(--tj-color-common-white);
}
.strategy .swiper-button-disabled {
opacity: 0;
cursor: not-allowed;
}
.strategy .swiper:hover .swiper-button-prev, .strategy .swiper:hover .swiper-button-next {
opacity: 1;
visibility: visible;
}
.strategy .swiper:hover .swiper-button-prev {
left: 0;
}
.strategy .swiper:hover .swiper-button-next {
right: 0;
}
.strategy .swiper:hover .swiper-button-disabled {
opacity: 0;
cursor: not-allowed;
}
.strategy__about {
position: absolute;
top: -40%;
left: 50%;
width: 100%;
-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("../images/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__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: var(--tj-color-theme-bg3);
}
.team .section-heading__title {
color: var(--tj-color-common-white);
}
.team .swiper-pagination-bullet {
background-color: var(--tj-color-common-white);
}
.team .swiper-pagination-bullet:hover {
opacity: 1;
}
.team__inner {
background: url("../images/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 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: 20px;
border-radius: 12px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.package__single {
padding: 20px 15px;
border-radius: 10px;
}
}
.package__badge {
position: absolute;
top: 27px;
right: -90px;
padding: 6px 90px 5px;
background: var(--tj-color-theme-primary);
color: var(--tj-color-common-white);
-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;
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("../images/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);
}
/* !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;
-webkit-clip-path: polygon(0 58%, 100% 0%, 100% 100%, 0% 100%);
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 {
-webkit-clip-path: polygon(0 58%, 100% 10%, 100% 100%, 0% 100%);
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 {
-webkit-clip-path: polygon(0 58%, 100% 17%, 100% 100%, 0% 100%);
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 {
-webkit-clip-path: polygon(0 50%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0 50%, 100% 0%, 100% 100%, 0% 100%);
}
}
@media (max-width: 400px) {
.widget-feature-item .feature-images {
-webkit-clip-path: polygon(0 60%, 100% 10%, 100% 100%, 0% 100%);
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 *//*# sourceMappingURL=main.css.map */