/*-----------------------------------------------------------------------------------
Template Name: Actova - AI Agency & Technology HTML Template
Author: Oclata
Support: etorisoft@gmail.com
Description: Actova - AI Agency & Technology HTML Template
Version: 1.0
-----------------------------------------------------------------------------------
/************ TABLE OF CONTENTS ***************
01. VARIBALES DECLARARION
02. SPACE CSS START
03. TYPOGRAPHY CSS START
04. PRELOADER CSS START
05. SCROLL TO TOP CSS START
06. ANIMATION CSS START
07. BUTTON CSS START
08. TITLE CSS START
09. MENU CSS START
10. MODAL CSS START
11. HEADER CSS START
12. HERO CSS START
13. COUNTER CSS START
14. MARQUEE CSS START
15. SERVICE CSS START
16. WORK PROCESS CSS START
17. FAQ CSS START
18. CTA CSS START
19. TESTIMONIAL CSS START
20. ABOUT CSS START
21. BRAND CSS START
22. TEAM CSS START
23. PROJECT CSS START
24. FEATURES CSS START
25. PROCESS CSS START
26. PRICING CSS START
27. CAPABILITY CSS START
28. BLOG CSS START
29. CONTACT CSS START
30. FOOTER CSS START
31. HOME FIVE CSS START
32. HOME SIX CSS START
**********************************************/
/*----------------------------------------*/
/* 01. VARIBALES DECLARARION
/*----------------------------------------*/
/* Font */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap");
:root {
--primary: #55af3d;
--tp-theme-primary: #55af3d;
--tp-theme-special: #36585d;
--white: #ffffff;
--tp-common-white: #ffffff;
--white-2: #eeeeee;
--white-3: #e8e8e8;
--white-4: #f0f0f0;
--white-5: #F2F5F1;
--white-6: #f1f1f1;
--white-7: #f6f6f3;
--black: #000000;
--black-2: #020202;
--tp-common-black: #020202;
--black-3: #1B1A1A;
--black-4: #404040;
--black-5: #202020;
--black-6: #1E1E1E;
--green: #006d5a;
--blue: #6E80E6;
--gray: #999999;
--font-mono: "Space Mono", monospace;
--font-grotesk: "Space Grotesk", sans-serif;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 7px;
}
::-webkit-scrollbar:horizontal {
height: 7px;
}
::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 7px;
border: 2px solid #f5f5f5;
}
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
.esf-pl-50 {
padding-left: 50px;
}
.esf-pr-50 {
padding-right: 50px;
}
/* Container */
.tp-container {
max-width: 1850px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
.container-1700 {
max-width: 1730px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
.container-1410 {
max-width: 1440px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
.tp-container-1715 {
max-width: 1745px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
.tp-container-1070 {
max-width: 1100px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
/*----------------------------------------*/
/* 02. SPACE CSS START
/*----------------------------------------*/
.plr-50 {
padding-left: 50px;
padding-right: 50px;
}
@media (max-width: 1399px) {
.plr-50 {
padding-left: 30px;
padding-right: 30px;
}
}
@media (max-width: 991px) {
.plr-50 {
padding-left: 15px;
padding-right: 15px;
}
}
.pb-100 {
padding-bottom: 100px;
}
@media (max-width: 991px) {
.pb-100 {
padding-bottom: 80px;
}
}
@media (max-width: 767px) {
.pb-100 {
padding-bottom: 60px;
}
}
.pb-110 {
padding-bottom: 110px;
}
@media (max-width: 1199px) {
.pb-110 {
padding-bottom: 100px;
}
}
@media (max-width: 1199px) {
.pb-110 {
padding-bottom: 80px;
}
}
@media (max-width: 767px) {
.pb-110 {
padding-bottom: 60px;
}
}
.pb-120 {
padding-bottom: 120px;
}
@media (max-width: 1199px) {
.pb-120 {
padding-bottom: 100px;
}
}
@media (max-width: 1199px) {
.pb-120 {
padding-bottom: 80px;
}
}
@media (max-width: 767px) {
.pb-120 {
padding-bottom: 60px;
}
}
.pb-130 {
padding-bottom: 130px;
}
@media (max-width: 1399px) {
.pb-130 {
padding-bottom: 120px;
}
}
@media (max-width: 1199px) {
.pb-130 {
padding-bottom: 100px;
}
}
@media (max-width: 1199px) {
.pb-130 {
padding-bottom: 80px;
}
}
@media (max-width: 767px) {
.pb-130 {
padding-bottom: 60px;
}
}
.pb-140 {
padding-bottom: 140px;
}
@media (max-width: 1399px) {
.pb-140 {
padding-bottom: 120px;
}
}
@media (max-width: 1199px) {
.pb-140 {
padding-bottom: 100px;
}
}
@media (max-width: 1199px) {
.pb-140 {
padding-bottom: 80px;
}
}
@media (max-width: 767px) {
.pb-140 {
padding-bottom: 60px;
}
}
.pb-150 {
padding-bottom: 150px;
}
@media (max-width: 1399px) {
.pb-150 {
padding-bottom: 120px;
}
}
@media (max-width: 1199px) {
.pb-150 {
padding-bottom: 100px;
}
}
@media (max-width: 1199px) {
.pb-150 {
padding-bottom: 80px;
}
}
@media (max-width: 767px) {
.pb-150 {
padding-bottom: 60px;
}
}
.pb-160 {
padding-bottom: 160px;
}
@media (max-width: 1399px) {
.pb-160 {
padding-bottom: 120px;
}
}
@media (max-width: 1199px) {
.pb-160 {
padding-bottom: 100px;
}
}
@media (max-width: 1199px) {
.pb-160 {
padding-bottom: 80px;
}
}
@media (max-width: 767px) {
.pb-160 {
padding-bottom: 60px;
}
}
.pt-100 {
padding-top: 100px;
}
@media (max-width: 991px) {
.pt-100 {
padding-top: 80px;
}
}
@media (max-width: 767px) {
.pt-100 {
padding-top: 60px;
}
}
.pt-110 {
padding-top: 110px;
}
@media (max-width: 1199px) {
.pt-110 {
padding-top: 100px;
}
}
@media (max-width: 991px) {
.pt-110 {
padding-top: 80px;
}
}
@media (max-width: 767px) {
.pt-110 {
padding-top: 60px;
}
}
.pt-120 {
padding-top: 120px;
}
@media (max-width: 1199px) {
.pt-120 {
padding-top: 100px;
}
}
@media (max-width: 991px) {
.pt-120 {
padding-top: 80px;
}
}
@media (max-width: 767px) {
.pt-120 {
padding-top: 60px;
}
}
.pt-130 {
padding-top: 130px;
}
@media (max-width: 1399px) {
.pt-130 {
padding-top: 120px;
}
}
@media (max-width: 1199px) {
.pt-130 {
padding-top: 100px;
}
}
@media (max-width: 991px) {
.pt-130 {
padding-top: 80px;
}
}
@media (max-width: 767px) {
.pt-130 {
padding-top: 60px;
}
}
.pt-140 {
padding-top: 140px;
}
@media (max-width: 1399px) {
.pt-140 {
padding-top: 120px;
}
}
@media (max-width: 1199px) {
.pt-140 {
padding-top: 100px;
}
}
@media (max-width: 991px) {
.pt-140 {
padding-top: 80px;
}
}
@media (max-width: 767px) {
.pt-140 {
padding-top: 60px;
}
}
.pt-150 {
padding-top: 150px;
}
@media (max-width: 1399px) {
.pt-150 {
padding-top: 120px;
}
}
@media (max-width: 1199px) {
.pt-150 {
padding-top: 100px;
}
}
@media (max-width: 991px) {
.pt-150 {
padding-top: 80px;
}
}
@media (max-width: 767px) {
.pt-150 {
padding-top: 60px;
}
}
.pt-160 {
padding-top: 160px;
}
@media (max-width: 1399px) {
.pt-160 {
padding-top: 120px;
}
}
@media (max-width: 1199px) {
.pt-160 {
padding-top: 100px;
}
}
@media (max-width: 991px) {
.pt-160 {
padding-top: 80px;
}
}
@media (max-width: 767px) {
.pt-160 {
padding-top: 60px;
}
}
.pt-180 {
padding-top: 180px;
}
@media (max-width: 1399px) {
.pt-180 {
padding-top: 120px;
}
}
@media (max-width: 1199px) {
.pt-180 {
padding-top: 100px;
}
}
@media (max-width: 991px) {
.pt-180 {
padding-top: 80px;
}
}
@media (max-width: 767px) {
.pt-180 {
padding-top: 60px;
}
}
.mt-100 {
margin-top: 100px;
}
@media (max-width: 991px) {
.mt-100 {
margin-top: 90px;
}
}
@media (max-width: 767px) {
.mt-100 {
margin-top: 60px;
}
}
.mt-110 {
margin-top: 110px;
}
@media (max-width: 1199px) {
.mt-110 {
margin-top: 100px;
}
}
@media (max-width: 991px) {
.mt-110 {
margin-top: 90px;
}
}
@media (max-width: 767px) {
.mt-110 {
margin-top: 60px;
}
}
.mt-120 {
margin-top: 120px;
}
@media (max-width: 1199px) {
.mt-120 {
margin-top: 100px;
}
}
@media (max-width: 991px) {
.mt-120 {
margin-top: 90px;
}
}
@media (max-width: 767px) {
.mt-120 {
margin-top: 60px;
}
}
.mb-100 {
margin-bottom: 100px;
}
@media (max-width: 991px) {
.mb-100 {
margin-bottom: 90px;
}
}
@media (max-width: 767px) {
.mb-100 {
margin-bottom: 60px;
}
}
.mb-110 {
margin-bottom: 110px;
}
@media (max-width: 1199px) {
.mb-110 {
margin-bottom: 100px;
}
}
@media (max-width: 991px) {
.mb-110 {
margin-bottom: 90px;
}
}
@media (max-width: 767px) {
.mb-110 {
margin-bottom: 60px;
}
}
.mb-120 {
margin-bottom: 120px;
}
@media (max-width: 1199px) {
.mb-120 {
margin-bottom: 100px;
}
}
@media (max-width: 991px) {
.mb-120 {
margin-bottom: 90px;
}
}
@media (max-width: 767px) {
.mb-120 {
margin-bottom: 60px;
}
}
/*----------------------------------------*/
/* 03. TYPOGRAPHY CSS START
/*----------------------------------------*/
* {
margin: 0;
padding: 0;
}
body {
font-family: var(--font-grotesk);
}
html {
scroll-behavior: smooth;
}
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
margin: 0;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 24px;
}
h5 {
font-size: 20px;
}
h6 {
font-size: 18px;
}
ul,
ol {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
color: inherit;
}
a:hover {
color: inherit;
}
p {
padding: 0;
margin: 0;
font-style: normal;
line-height: 1.5;
font-weight: 400;
font-size: 16px;
color: var(--black-2);
}
img {
max-width: 100%;
}
@media (max-width: 767px) {
.mobile-hidden {
display: none !important;
}
}
.pos-absolute {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
/*----------------------------------------*/
/* 04. PRELOADER CSS START actova preloader
/*----------------------------------------*/
@keyframes preloaderSpn {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
.preloader-wrapper {
position: relative;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
}
.preloader-wrapper .loader-circle {
width: 120px;
height: 120px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
border-radius: 100%;
direction: ltr;
z-index: 9;
}
.preloader-wrapper .loader-line-mask {
position: absolute;
left: 50%;
top: 50%;
width: 30px;
height: 120px;
margin-left: -60px;
margin-top: -60px;
overflow: hidden;
transform-origin: 60px 60px;
animation: preloaderSpn 1.2s infinite linear;
}
.preloader-wrapper .loader-line {
width: 120px;
height: 120px;
border-radius: 50%;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, .44), rgba(255, 255, 255, 0));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='rgba(255, 255, 255, 0.44)', endColorStr='rgba(255, 255, 255, 0)');
background-color: initial;
position: relative;
}
.preloader-wrapper .loader-line:before {
content: '';
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
background-color: var(--black);
z-index: 99;
border-radius: inherit;
}
.preloader-wrapper .loader-logo {
position: absolute;
top: 50%;
transform: translate(0%, -50%);
left: 0;
right: 0;
text-align: center;
display: flex;
justify-content: center;
}
.preloader-wrapper .loader-logo img {
height: 42px;
width: auto;
opacity: .87;
}
.preloader-wrapper .line {
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 2px;
transform: translateY(-50%);
background-color: var(--white);
opacity: 1;
transition: all 0.3s;
z-index: 9;
}
.preloader-wrapper .split {
position: absolute;
left: 0;
width: 100%;
height: calc(50% + 1px);
background-color: var(--black);
transition: all 0.5s;
z-index: 1;
}
.preloader-wrapper .split.top-bg {
top: 0;
}
.preloader-wrapper .split.bottom-bg {
bottom: 0;
}
/* actova preloader end */
/*----------------------------------------*/
/* 05. SCROLL TO TOP CSS START
/*----------------------------------------*/
.scroll--top {
position: fixed;
width: 50px;
height: 50px;
bottom: 0;
right: 20px;
z-index: 99;
border: none;
outline: none;
background-color: var(--black-3);
color: var(--white);
cursor: pointer;
border-radius: 100%;
font-size: 18px;
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-transition: all 0.5s;
transition: all 0.5s;
opacity: 0;
visibility: hidden;
}
.scroll--top.showed {
opacity: 1;
bottom: 20px;
visibility: visible;
}
.scroll--top:hover {
color: var(--black-3);
background-color: var(--primary);
}
/*----------------------------------------*/
/* 06. ANIMATION CSS START
/*----------------------------------------*/
@-webkit-keyframes actovaRotation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes actovaRotation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes actovaFadeUp {
0% {
opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes actovaFadeUp {
0% {
opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes textAnimation {
to {
background-position: -200% center;
}
}
@keyframes textAnimation {
to {
background-position: -200% center;
}
}
@-webkit-keyframes tpLeftToRight {
49% {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
50% {
opacity: 0;
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
51% {
opacity: 1;
}
}
@keyframes tpLeftToRight {
49% {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
50% {
opacity: 0;
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
51% {
opacity: 1;
}
}
@-webkit-keyframes heroGlowPulse {
0% {
-webkit-filter: brightness(1) blur(0px);
filter: brightness(1) blur(0px);
}
50% {
-webkit-filter: brightness(1.15) blur(2px);
filter: brightness(1.15) blur(2px);
}
/* glow grows */
100% {
-webkit-filter: brightness(1) blur(0px);
filter: brightness(1) blur(0px);
}
}
@keyframes heroGlowPulse {
0% {
-webkit-filter: brightness(1) blur(0px);
filter: brightness(1) blur(0px);
}
50% {
-webkit-filter: brightness(1.15) blur(2px);
filter: brightness(1.15) blur(2px);
}
/* glow grows */
100% {
-webkit-filter: brightness(1) blur(0px);
filter: brightness(1) blur(0px);
}
}
.img-reveal {
visibility: hidden;
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.img-reveal img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transform-origin: left;
transform-origin: left;
}
.img-anim {
overflow: hidden;
}
@-webkit-keyframes fall {
0% {
-webkit-transform: translateY(0) rotate(0deg);
transform: translateY(0) rotate(0deg);
opacity: 0.8;
}
100% {
-webkit-transform: translateY(100vh) rotate(360deg);
transform: translateY(100vh) rotate(360deg);
opacity: 0.3;
}
}
@keyframes fall {
0% {
-webkit-transform: translateY(0) rotate(0deg);
transform: translateY(0) rotate(0deg);
opacity: 0.8;
}
100% {
-webkit-transform: translateY(100vh) rotate(360deg);
transform: translateY(100vh) rotate(360deg);
opacity: 0.3;
}
}
@-webkit-keyframes borderMoveAnimation {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
to {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes borderMoveAnimation {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
to {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
/*----------------------------------------*/
/* 07. BUTTON CSS START
/*----------------------------------------*/
.actova-btn-primary {
gap: 8px;
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;
background-color: var(--primary);
border-radius: 30px;
padding: 22px 37px;
color: var(--black-2);
font-size: 14px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
position: relative;
overflow: hidden;
z-index: 1;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.actova-btn-primary span {
position: absolute;
display: block;
width: 0;
height: 0;
top: 0;
left: 0;
border-radius: 36px;
background-color: var(--black-2);
-webkit-transition: all 0.6s;
transition: all 0.6s;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: -1;
}
.actova-btn-primary:hover {
fill: var(--white);
color: var(--white);
}
.actova-btn-primary:hover span {
width: 225%;
height: 1000px;
}
.actova-btn-primary svg {
font-size: 14px;
}
.actova-btn-secondary {
gap: 5px;
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;
background-color: var(--black-2);
border-radius: 30px;
padding: 15px 36px;
color: var(--white);
fill: var(--white);
font-size: 14px;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.actova-btn-secondary span {
position: absolute;
display: block;
width: 0;
height: 0;
top: 0;
left: 0;
border-radius: 36px;
background-color: var(--black-2);
-webkit-transition: all 0.6s;
transition: all 0.6s;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: -1;
}
.actova-btn-secondary:hover {
fill: var(--black-2);
color: var(--black-2);
background-color: var(--primary);
}
.actova-btn-secondary:hover span {
width: 225%;
height: 1000px;
}
.actova-btn-light {
gap: 8px;
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;
background-color: var(--white);
border-radius: 30px;
padding: 16px 25px;
fill: var(--black-2);
color: var(--black-2);
font-size: 14px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
position: relative;
overflow: hidden;
z-index: 1;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.actova-btn-light span {
position: absolute;
display: block;
width: 0;
height: 0;
top: 0;
left: 0;
border-radius: 36px;
background-color: var(--white);
-webkit-transition: all 0.6s;
transition: all 0.6s;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: -1;
}
.actova-btn-light svg {
font-size: 14px;
}
.actova-btn-light:hover {
fill: var(--white);
color: var(--white);
background-color: var(--black-2);
}
.actova-btn-light:hover span {
width: 225%;
height: 1000px;
}
.actova-btn-flip {
-webkit-perspective: 1000px;
perspective: 1000px;
text-decoration: none;
}
.actova-btn-flip:hover span {
-webkit-transform: rotateX(90deg) translateY(-12px);
transform: rotateX(90deg) translateY(-12px);
}
.actova-btn-flip span {
position: relative;
display: inline-block;
padding: 0;
color: var(--black-2);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.actova-btn-flip span:before {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
content: attr(data-text);
-webkit-transition: color 0.3s;
transition: color 0.3s;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
text-align: center;
}
.tp-btn-one {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
overflow: hidden;
z-index: 5;
padding: 17px 24px;
background-color: var(--white);
color: var(--black-2);
fill: var(--black-2);
border-radius: 100px;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 1;
gap: 8px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-transform: uppercase;
}
.tp-btn-one svg {
width: 1em;
height: 1em;
}
.tp-btn-one .btn-icon {
position: relative;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-btn-one:hover .btn-icon {
fill: var(--white);
}
.tp-btn-one:hover::before,
.tp-btn-one:focus::before {
height: 100%;
}
.tp-btn-one:hover .btn-wrap .text-one,
.tp-btn-one:focus .btn-wrap .text-one {
-webkit-transform: translateY(-150%);
transform: translateY(-150%);
}
.tp-btn-one:hover .btn-wrap .text-two,
.tp-btn-one:focus .btn-wrap .text-two {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: var(--white);
}
.tp-btn-one:after {
display: block;
clear: both;
content: "";
}
.tp-btn-one::before {
background-color: var(--black-2);
content: "";
width: 100%;
height: 0;
bottom: 0;
position: absolute;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.tp-btn-one .btn-wrap {
z-index: 1;
float: left;
overflow: hidden;
position: relative;
display: inline-block;
border: none;
}
.tp-btn-one .btn-wrap .text-one,
.tp-btn-one .btn-wrap .text-two {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tp-btn-one .btn-wrap .text-one {
position: relative;
display: block;
color: #fff;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.tp-btn-one .btn-wrap .text-two {
position: absolute;
top: 100%;
display: block;
color: var(--white);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.tp-btn-two {
font-size: 14px;
font-weight: 700;
line-height: 1;
display: inline-block;
text-transform: uppercase;
color: var(--black);
background-color: var(--primary);
border-radius: 100px;
padding: 18px 30px;
}
.tp-btn-two:hover {
color: var(--black);
}
.tp-btn-two:hover span svg {
-webkit-animation: tpLeftToRight 0.5s forwards;
animation: tpLeftToRight 0.5s forwards;
}
.tp-btn-two span svg {
overflow: hidden;
}
.tp-btn-two.input-hover {
padding: 18px 27px;
border: 1px solid transparent;
}
.tp-btn-two.input-hover:hover {
color: var(--white);
background-color: transparent;
border-color: var(--primary);
}
.tp-btn-anim {
gap: 10px;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tp-btn-anim:hover .btn-anim__letter {
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
}
.tp-btn-anim .tp-btn-text {
height: 20px;
line-height: 20px;
overflow: hidden;
display: block !important;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter {
margin-right: 1px;
display: inline-block;
transition: -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1);
transition: transform 0.5s cubic-bezier(0.76, 0, 0.024, 1);
transition: transform 0.5s cubic-bezier(0.76, 0, 0.024, 1), -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1);
-moz-transition: -moz-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1);
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(1) {
transition-delay: 0ms;
-webkit-transition-delay: 0ms;
-moz-transition-delay: 0ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(2) {
transition-delay: 30ms;
-webkit-transition-delay: 30ms;
-moz-transition-delay: 30ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(3) {
transition-delay: 60ms;
-webkit-transition-delay: 60ms;
-moz-transition-delay: 60ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(4) {
transition-delay: 90ms;
-webkit-transition-delay: 90ms;
-moz-transition-delay: 90ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(5) {
transition-delay: 120ms;
-webkit-transition-delay: 120ms;
-moz-transition-delay: 120ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(6) {
transition-delay: 150ms;
-webkit-transition-delay: 150ms;
-moz-transition-delay: 150ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(7) {
transition-delay: 180ms;
-webkit-transition-delay: 180ms;
-moz-transition-delay: 180ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(8) {
transition-delay: 210ms;
-webkit-transition-delay: 210ms;
-moz-transition-delay: 210ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(9) {
transition-delay: 240ms;
-webkit-transition-delay: 240ms;
-moz-transition-delay: 240ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(10) {
transition-delay: 270ms;
-webkit-transition-delay: 270ms;
-moz-transition-delay: 270ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(11) {
transition-delay: 300ms;
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(12) {
transition-delay: 330ms;
-webkit-transition-delay: 330ms;
-moz-transition-delay: 330ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(13) {
transition-delay: 360ms;
-webkit-transition-delay: 360ms;
-moz-transition-delay: 360ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(14) {
transition-delay: 390ms;
-webkit-transition-delay: 390ms;
-moz-transition-delay: 390ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(15) {
transition-delay: 420ms;
-webkit-transition-delay: 420ms;
-moz-transition-delay: 420ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(16) {
transition-delay: 450ms;
-webkit-transition-delay: 450ms;
-moz-transition-delay: 450ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(17) {
transition-delay: 480ms;
-webkit-transition-delay: 480ms;
-moz-transition-delay: 480ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(18) {
transition-delay: 510ms;
-webkit-transition-delay: 510ms;
-moz-transition-delay: 510ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(19) {
transition-delay: 540ms;
-webkit-transition-delay: 540ms;
-moz-transition-delay: 540ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(20) {
transition-delay: 570ms;
-webkit-transition-delay: 570ms;
-moz-transition-delay: 570ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(21) {
transition-delay: 600ms;
-webkit-transition-delay: 600ms;
-moz-transition-delay: 600ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(22) {
transition-delay: 630ms;
-webkit-transition-delay: 630ms;
-moz-transition-delay: 630ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(23) {
transition-delay: 660ms;
-webkit-transition-delay: 660ms;
-moz-transition-delay: 660ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(24) {
transition-delay: 690ms;
-webkit-transition-delay: 690ms;
-moz-transition-delay: 690ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(25) {
transition-delay: 720ms;
-webkit-transition-delay: 720ms;
-moz-transition-delay: 720ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(26) {
transition-delay: 750ms;
-webkit-transition-delay: 750ms;
-moz-transition-delay: 750ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(27) {
transition-delay: 780ms;
-webkit-transition-delay: 780ms;
-moz-transition-delay: 780ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(28) {
transition-delay: 810ms;
-webkit-transition-delay: 810ms;
-moz-transition-delay: 810ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(29) {
transition-delay: 840ms;
-webkit-transition-delay: 840ms;
-moz-transition-delay: 840ms;
}
.tp-btn-anim .tp-btn-text .btn-anim__letter:nth-child(30) {
transition-delay: 870ms;
-webkit-transition-delay: 870ms;
-moz-transition-delay: 870ms;
}
/*----------------------------------------*/
/* 08. TITLE CSS START
/*----------------------------------------*/
.sec-title {
font-weight: 300;
font-size: 45px;
line-height: 55px;
letter-spacing: -1.35px;
color: var(--black-2);
}
@media (max-width: 1399px) {
.sec-title {
font-size: 40px;
line-height: 50px;
}
}
@media (max-width: 1199px) {
.sec-title {
font-size: 36px;
line-height: 46px;
}
}
@media (max-width: 991px) {
.sec-title {
font-size: 32px;
line-height: 42px;
}
}
@media (max-width: 767px) {
.sec-title {
font-size: 28px;
letter-spacing: 0;
line-height: 38px;
}
}
.sec-title span {
font-weight: 500;
}
.sec-title-2 {
font-weight: 500;
font-size: 70px;
line-height: 1.1;
letter-spacing: -2.1px;
color: var(--black-2);
}
@media (max-width: 1919px) {
.sec-title-2 {
font-size: 60px;
}
}
@media (max-width: 1199px) {
.sec-title-2 {
font-size: 50px;
}
}
@media (max-width: 991px) {
.sec-title-2 {
font-size: 40px;
letter-spacing: -2px;
}
}
@media (max-width: 767px) {
.sec-title-2 {
font-size: 32px;
letter-spacing: 0;
}
}
.sec-title-2 span {
font-weight: 700;
}
.esf.sec-title-2 span {
font-weight: 300;
}
.sec-title-2 .hightlight {
font-weight: 500;
background: -webkit-gradient(linear, left top, right top, from(#929bd1), to(#0728E4));
background: linear-gradient(90deg, #929bd1 0%, #0728E4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.sec-title-3 {
font-weight: 300;
font-size: 50px;
line-height: 1.1;
letter-spacing: -1.5px;
color: var(--black-2);
}
@media (max-width: 1199px) {
.sec-title-3 {
font-size: 40px;
}
}
@media (max-width: 991px) {
.sec-title-3 {
font-size: 36px;
letter-spacing: -1px;
}
}
@media (max-width: 767px) {
.sec-title-3 {
font-size: 32px;
letter-spacing: 0;
}
}
.sec-title-3 span {
font-weight: 500;
}
.sub-title {
color: var(--black-2);
font-weight: 400;
font-size: 16px;
line-height: 1.4;
display: inline-block;
border: 1px solid var(--white-3);
text-transform: capitalize;
border-radius: 100px;
padding: 6px 16px;
}
.sub-title-2 {
color: var(--black-2);
font-weight: 400;
font-size: 18px;
line-height: 1.4;
display: inline-block;
border: 1px solid var(--white-3);
text-transform: capitalize;
border-radius: 100px;
padding: 4px 16px;
font-family: var(--font-mono);
}
@media (max-width: 767px) {
.sub-title-2 {
font-size: 16px;
}
}
.sub-title-3 {
color: var(--black-2);
font-weight: 500;
font-size: 16px;
line-height: 1.2;
border: 1px solid var(--white-3);
backdrop-filter: blur(74px);
display: inline-block;
padding: 7px 8px;
border-radius: 100px;
}
.sub-title-3 span {
color: var(--white);
display: inline-block;
border-radius: 100px;
padding: 3px 8px;
background-color: var(--black-2);
font-size: 14px;
margin-right: 10px;
}
.tp-animated-text {
background-image: linear-gradient(-225deg, #37a000 0%, #29B841 29%, #1148d7 67%, #fff800 100%);
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
color: var(--white);
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: textAnimation 2s linear infinite;
animation: textAnimation 2s linear infinite;
display: inline-block;
}
.tp-breadcrumb-title {
font-weight: 700;
font-size: 100px;
line-height: 1.1;
text-align: center;
color: var(--white);
max-width: 1080px;
padding-bottom: 15px;
}
@media (max-width: 1919px) {
.tp-breadcrumb-title {
font-size: 80px;
}
}
@media (max-width: 1199px) {
.tp-breadcrumb-title {
font-size: 60px;
padding-bottom: 10px;
}
}
@media (max-width: 991px) {
.tp-breadcrumb-title {
font-size: 52px;
}
}
@media (max-width: 767px) {
.tp-breadcrumb-title {
font-size: 40px;
}
}
/*----------------------------------------*/
/* 10. MODAL CSS START
/*----------------------------------------*/
.modal__btn {
gap: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.modal__btn .icon {
width: 66px;
height: 66px;
fill: var(--white);
color: var(--white);
border-radius: 20px;
background-color: var(--orange);
-webkit-transition: all 0.3s;
transition: all 0.3s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 20px;
}
.modal__btn .icon:hover {
background-color: var(--secondary);
}
.modal__btn .text {
font-size: 16px;
font-weight: 400;
color: var(--black-3);
}
/*----------------------------------------*/
/* 11. HEADER CSS START
/*----------------------------------------*/
.header-fixed {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 5;
-webkit-transition: ease 0.4s;
transition: ease 0.4s;
}
.header-absolute {
position: absolute;
width: 100%;
left: 0;
top: 0;
z-index: 5;
-webkit-transition: ease 0.4s;
transition: ease 0.4s;
}
.tp-header-area {
padding-top: 12px;
padding-bottom: 20px;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
@media (max-width: 767px) {
.tp-header-area .tp-btn-one {
display: none;
}
}
.tp-header-area-2 {
background-color: var(--white);
padding-top: 13px;
padding-bottom: 13px;
}
.tp-header-area-2 .actova-btn-primary {
padding: 17px 30px;
}
@media (max-width: 767px) {
.tp-header-area-2 .actova-btn-primary {
display: none;
}
}
.tp-header-area-2 ul li a {
color: var(--black-5);
}
.tp-header-area-2 ul li a:hover {
color: var(--primary);
}
.tp-header-area-2 .main-dropdown {
background: var(--white-6);
-webkit-box-shadow: none;
box-shadow: none;
}
.tp-header-area-2 .main-dropdown li a {
color: var(--black-2);
}
.tp-header-area-2 .main-dropdown li a:hover {
color: var(--primary);
}
.tp-header-area-2 .tp-header-search svg {
fill: var(--black-2);
}
.tp-header-area-2 .tp-menu-open {
color: var(--black-2);
}
.tp-header-area-3 {
padding-top: 15px;
}
.tp-header-area-3 .tp-btn-two {
fill: var(--white);
color: var(--white);
background-color: var(--black-2);
}
@media (max-width: 767px) {
.tp-header-area-3 .tp-btn-two {
display: none;
}
}
.tp-header-area-3 .tp-main-menu .has-dropdown::after {
color: var(--black-2);
}
.tp-header-area-3 .tp-main-menu .has-dropdown:hover::after {
color: var(--primary);
}
.tp-header-area-3 ul li a {
color: var(--black-5);
}
.tp-header-area-3 ul li a:hover {
color: var(--primary);
}
.tp-header-area-3 .main-dropdown {
background: var(--white-6);
-webkit-box-shadow: none;
box-shadow: none;
}
.tp-header-area-3 .main-dropdown li a {
color: var(--black-2);
}
.tp-header-area-3 .main-dropdown li a:hover {
color: var(--primary);
}
.tp-header-area-3 .tp-header-search svg {
fill: var(--black-2);
}
.tp-header-area-3 .tp-menu-open {
color: var(--black-2);
}
.tp-header-area-4 {
width: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 3;
padding-bottom: 80px;
}
.tp-header-area-4 .actova-btn-secondary {
text-transform: uppercase;
}
@media (max-width: 767px) {
.tp-header-area-4 .actova-btn-secondary {
display: none;
}
}
.tp-header-wrapper {
gap: 45px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 1199px) {
.tp-header-wrapper {
gap: 30px;
}
}
@media (max-width: 767px) {
.tp-header-wrapper {
gap: 15px;
}
}
.tp-header-logo {
-ms-flex-preferred-size: 200px;
flex-basis: 200px;
}
.tp-header-menu {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}
@media (max-width: 1199px) {
.tp-header-menu {
display: none;
}
}
.tp-header-btn {
gap: 30px;
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;
}
@media (max-width: 767px) {
.tp-header-btn .actova-btn-light {
display: none;
}
}
.tp-header-search {
cursor: pointer;
}
@media (max-width: 1199px) {
.tp-header-search {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: right;
}
}
.tp-header-search svg {
fill: var(--white);
font-size: 20px;
}
.tp-search-form {
position: fixed;
width: 100%;
height: 100%;
background: var(--black-2);
left: 0;
top: 0;
z-index: 1;
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.5s;
transition: all 0.5s;
padding: 0 15px;
}
.tp-search-form.showed {
opacity: 1;
visibility: visible;
}
.tp-search-form form {
width: 560px;
}
.tp-search-form input {
width: 100%;
padding: 15px;
outline: none;
border: none;
border-radius: 5px;
}
.tp-menu-open {
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.1490196078);
font-size: 20px;
background-color: transparent;
border-radius: 3px;
display: none;
line-height: 0;
width: 36px;
height: 36px;
}
@media (max-width: 1199px) {
.tp-menu-open {
display: block;
}
}
/*----------------------------------------*/
/* 12. HERO CSS START
/*----------------------------------------*/
.tp-hero-area {
background-image: url(../imgs/hero/hero-bg.jpg);
background-repeat: no-repeat;
position: relative;
padding-top: 305px;
padding-bottom: 235px;
}
@media (max-width: 1399px) {
.tp-hero-area {
padding-top: 250px;
padding-bottom: 120px;
}
}
@media (max-width: 1199px) {
.tp-hero-area {
padding-top: 200px;
}
}
@media (max-width: 767px) {
.tp-hero-area {
padding: 180px 15px 60px;
}
}
.tp-hero-area .tp-btn-one {
background-color: var(--primary);
padding: 21px 32px;
font-size: 15px;
}
.tp-hero-area-2 {
position: relative;
overflow: hidden;
background-image: url(../imgs/hero/hero-bg-2.png);
background-position: center;
background-repeat: no-repeat;
padding-top: 110px;
padding-bottom: 110px;
margin: 0 50px;
margin-top: 100px;
}
@media (max-width: 767px) {
.tp-hero-area-2 {
padding-top: 80px;
padding-bottom: 60px;
margin: 0;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(0deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
background-size: 50px 50px;
background-repeat: repeat;
background-position: initial;
}
}
.tp-hero-area-2 .hero-2-shape {
position: absolute;
right: 45px;
top: 109px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
@media (max-width: 1919px) {
.tp-hero-area-2 .hero-2-shape {
right: 21px;
}
}
@media (max-width: 1399px) {
.tp-hero-area-2 .hero-2-shape {
right: 36px;
}
}
@media (max-width: 1199px) {
.tp-hero-area-2 .hero-2-shape {
right: 19px;
top: 100px;
}
}
@media (max-width: 991px) {
.tp-hero-area-2 .hero-2-shape {
display: none;
}
}
.tp-hero-area-2:hover .hero-2-shape {
opacity: 0;
}
.tp-hero-area-2:hover .tp-hero-wrapper-2 .title {
background-color: transparent;
}
.tp-hero-area-3 {
padding-bottom: 70px;
padding-top: 180px;
}
.tp-hero-area-3 .tp-user-box {
padding: 0;
border: 0;
border-bottom: 2px solid;
border-radius: 0;
padding-bottom: 30px;
margin-bottom: 25px;
margin-top: 120px;
position: relative;
}
@media (max-width: 991px) {
.tp-hero-area-3 .tp-user-box {
padding-bottom: 20px;
margin-bottom: 15px;
margin-top: 30px;
}
}
@media (max-width: 767px) {
.tp-hero-area-3 .tp-user-box {
margin-bottom: 15px;
padding-bottom: 15px;
}
}
.tp-hero-area-3 .tp-user-box::before {
position: absolute;
content: "";
width: 6px;
height: 6px;
left: 0;
bottom: -4px;
background-color: var(--black-2);
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
.tp-hero-area-3 .tp-user-box::after {
position: absolute;
content: "";
width: 6px;
height: 6px;
right: 0;
bottom: -4px;
background-color: var(--black-2);
clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.tp-hero-area-3 .para {
font-weight: 400;
font-size: 22px;
line-height: 1.3;
color: var(--black-2);
letter-spacing: -0.8px;
}
@media (max-width: 1199px) {
.tp-hero-area-3 .para {
font-size: 20px;
}
}
@media (max-width: 991px) {
.tp-hero-area-3 .para {
font-size: 18px;
}
}
.tp-hero-area-3 .title {
font-weight: 500;
font-size: 100px;
line-height: 1.07;
letter-spacing: -5px;
margin-bottom: 60px;
}
@media (max-width: 1919px) {
.tp-hero-area-3 .title {
font-size: 70px;
}
}
@media (max-width: 1399px) {
.tp-hero-area-3 .title {
font-size: 65px;
margin-bottom: 50px;
}
}
@media (max-width: 1199px) {
.tp-hero-area-3 .title {
font-size: 55px;
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-hero-area-3 .title {
font-size: 40px;
letter-spacing: 0;
}
.tp-hero-area-3 .title br {
display: none;
}
}
.tp-hero-wrapper-2 .btn-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 51px 100px 0;
}
@media (max-width: 1199px) {
.tp-hero-wrapper-2 .btn-wrapper {
padding: 80px 0 0;
}
}
@media (max-width: 767px) {
.tp-hero-wrapper-2 .btn-wrapper {
gap: 15px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 60px 0 0;
}
}
.tp-hero-wrapper-2 .actova-btn-secondary,
.tp-hero-wrapper-2 .actova-btn-primary {
font-size: 18px;
text-transform: lowercase;
border-radius: 0;
width: 310px;
font-weight: 700;
padding: 17px 30px;
}
.tp-hero-wrapper-2 .actova-btn-secondary {
padding: 13px 30px;
}
.tp-hero-wrapper-2 .actova-btn-secondary span {
background-color: var(--primary);
}
.tp-hero-wrapper-2 .actova-btn-secondary:hover {
background-color: transparent;
}
.tp-hero-wrapper-2 .title {
font-weight: 500;
font-size: 145px;
line-height: 0.9;
text-align: center;
text-transform: uppercase;
color: var(--black-2);
max-width: 990px;
margin: 0 auto;
background: var(--white);
-webkit-transition: all 0.3s;
transition: all 0.3s;
padding-top: 28px;
padding-bottom: 28px;
}
@media (max-width: 1399px) {
.tp-hero-wrapper-2 .title {
font-size: 120px;
max-width: 750px;
}
}
@media (max-width: 1199px) {
.tp-hero-wrapper-2 .title {
font-size: 100px;
}
}
@media (max-width: 991px) {
.tp-hero-wrapper-2 .title {
font-size: 80px;
}
}
@media (max-width: 767px) {
.tp-hero-wrapper-2 .title {
font-size: 60px;
padding-bottom: 0;
padding-top: 0;
}
}
.tp-hero-wrapper-3 {
gap: 340px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 375px 340px auto;
grid-template-columns: 375px auto;
}
@media (max-width: 1919px) {
.tp-hero-wrapper-3 {
gap: 250px;
}
}
@media (max-width: 1199px) {
.tp-hero-wrapper-3 {
gap: 50px;
}
}
@media (max-width: 991px) {
.tp-hero-wrapper-3 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-hero-slider .swiper-slide-active .title {
-webkit-animation: actovaFadeUp 1s 0.3s forwards;
animation: actovaFadeUp 1s 0.3s forwards;
}
.tp-hero-slider .swiper-slide-active p {
-webkit-animation: actovaFadeUp 1s 0.6s forwards;
animation: actovaFadeUp 1s 0.6s forwards;
}
.tp-hero-slider .swiper-slide-active a {
-webkit-animation: actovaFadeUp 1s 0.9s forwards;
animation: actovaFadeUp 1s 0.9s forwards;
}
.tp-hero-slide .title {
font-weight: 600;
font-size: 80px;
line-height: 1;
letter-spacing: -4px;
color: var(--white);
max-width: 606px;
margin-bottom: 35px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
@media (max-width: 1199px) {
.tp-hero-slide .title {
font-size: 70px;
}
}
@media (max-width: 991px) {
.tp-hero-slide .title {
font-size: 60px;
}
}
@media (max-width: 767px) {
.tp-hero-slide .title {
font-size: 45px;
letter-spacing: -2px;
margin-bottom: 20px;
}
}
.tp-hero-slide .title span {
font-weight: 300;
}
.tp-hero-slide p {
font-weight: 500;
font-size: 22px;
line-height: 1.3;
color: var(--white);
max-width: 565px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
margin-bottom: 50px;
opacity: 0;
}
@media (max-width: 767px) {
.tp-hero-slide p {
font-size: 18px;
margin-bottom: 40px;
}
}
.tp-hero-slide a {
opacity: 0;
}
.tp-hero4-area {
padding-top: 170px;
padding-bottom: 70px;
position: relative;
}
@media (max-width: 991px) {
.tp-hero4-area {
padding-bottom: 30px;
}
}
.tp-hero4-area .svg-wrapper {
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
}
.tp-hero4-area .svg-wrapper .bg-svg {
position: absolute;
bottom: 0;
}
.tp-hero4-content {
text-align: center;
position: relative;
z-index: 1;
}
.tp-hero4-content .ai-builder {
color: var(--black-2);
font-weight: 700;
font-size: 14px;
line-height: 1.3;
letter-spacing: 1.4px;
text-transform: uppercase;
gap: 15px;
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;
}
.tp-hero4-content .title {
color: var(--black-2);
font-weight: 700;
font-size: 100px;
line-height: 1;
letter-spacing: -5px;
margin-top: 25px;
margin-bottom: 20px;
}
@media (max-width: 1399px) {
.tp-hero4-content .title {
font-size: 80px;
}
}
@media (max-width: 1199px) {
.tp-hero4-content .title {
font-size: 70px;
}
}
@media (max-width: 991px) {
.tp-hero4-content .title {
font-size: 60px;
}
}
@media (max-width: 767px) {
.tp-hero4-content .title {
font-size: 40px;
letter-spacing: -2px;
padding: 0 15px;
}
}
.tp-hero4-content .title span {
background: linear-gradient(90deg, #8396ff 10%, #0728E4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.tp-hero4-content > p {
color: var(--black-2);
font-size: 22px;
line-height: 1.4;
max-width: 660px;
margin: 0 auto;
}
@media (max-width: 1399px) {
.tp-hero4-content > p {
font-size: 20px;
}
}
@media (max-width: 991px) {
.tp-hero4-content > p {
font-size: 18px;
}
}
@media (max-width: 767px) {
.tp-hero4-content > p {
font-size: 16px;
padding: 0 15px;
}
}
.tp-hero4-content .tp-user-box-2 {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 40px;
margin-bottom: 60px;
}
@media (max-width: 991px) {
.tp-hero4-content .tp-user-box-2 {
margin-top: 30px;
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-hero4-content .tp-user-box-2 {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px;
padding: 0 15px;
margin-top: 30px;
margin-bottom: 40px;
}
}
.tp-hero4-content .tp-user-box-2 .text p {
border: 1px solid var(--white-3);
padding: 13px 24px;
border-radius: 100px;
background-color: var(--white);
}
@media (max-width: 767px) {
.tp-hero4-content .tp-user-box-2 .text p {
font-size: 16px;
}
}
.tp-hero4-ai-content {
display: -ms-grid;
display: grid;
-ms-grid-columns: 0.3fr 1fr 0.3fr;
grid-template-columns: 0.3fr 1fr 0.3fr;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 767px) {
.tp-hero4-ai-content {
padding: 0 15px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.tp-hero4-ai-content .left-svg,
.tp-hero4-ai-content .right-svg {
display: none;
}
}
@media (max-width: 1919px) {
.tp-hero4-ai-content .left-svg svg,
.tp-hero4-ai-content .right-svg svg {
width: 270px;
}
}
@media (max-width: 1399px) {
.tp-hero4-ai-content .left-svg svg,
.tp-hero4-ai-content .right-svg svg {
width: 260px;
}
}
@media (max-width: 1199px) {
.tp-hero4-ai-content .left-svg svg,
.tp-hero4-ai-content .right-svg svg {
width: 140px;
}
}
.tp-hero4-ai-content .mid-img {
background: var(--white);
border-radius: 20px;
padding: 30px;
-webkit-box-shadow: 0px 4px 50px 0px rgba(161, 255, 117, 0.4);
box-shadow: 0px 4px 50px 0px rgba(161, 255, 117, 0.4);
outline: 1px solid var(--white);
outline-offset: 10px;
position: relative;
}
@media (max-width: 991px) {
.tp-hero4-ai-content .mid-img {
padding: 15px 10px;
outline-offset: 5px;
}
}
.tp-hero4-ai-content .mid-img p {
font-weight: 500;
font-size: 18px;
line-height: 1.3;
color: var(--black-4);
}
@media (max-width: 1399px) {
.tp-hero4-ai-content .mid-img p {
font-size: 16px;
}
}
@media (max-width: 1199px) {
.tp-hero4-ai-content .mid-img p {
font-size: 14px;
}
}
@media (max-width: 991px) {
.tp-hero4-ai-content .mid-img p {
font-size: 12px;
text-align: left;
}
}
@media (max-width: 767px) {
.tp-hero4-ai-content .mid-img > img {
height: 180px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: left;
object-position: left;
}
}
.tp-hero4-ai-content .box-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 10px;
left: 30px;
height: 60px;
}
@media (max-width: 991px) {
.tp-hero4-ai-content .box-wrap {
left: 0;
}
}
@media (max-width: 1399px) {
.tp-hero4-ai-content .box-wrap img {
width: 80px;
}
}
.tp-hero4-bg {
position: fixed;
inset: 0;
z-index: -1;
}
canvas {
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
}
.tp-hero-bg-color {
position: absolute;
bottom: 0;
background-repeat: no-repeat;
background-position: center center;
z-index: -1;
}
.zi-3 {
z-index: 3;
position: relative;
}
.tp-breadcrumb-area {
padding-top: 15px;
margin-top: 92px;
}
.tp-breadcrumb-wrapper {
position: relative;
border-radius: 20px;
overflow: hidden;
}
@media (max-width: 1199px) {
.tp-breadcrumb-wrapper {
height: 480px;
}
}
@media (max-width: 991px) {
.tp-breadcrumb-wrapper {
height: 380px;
}
}
.tp-breadcrumb-wrapper::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(2, 2, 2, 0.2);
}
.tp-breadcrumb-wrapper img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.tp-breadcrumb-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 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;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
z-index: 1;
padding: 0 15px;
}
.tp-breadcrumb-content .tp-breadcrumb {
font-weight: 500;
font-size: 18px;
line-height: 1.3;
color: var(--white);
}
@media (max-width: 767px) {
.tp-breadcrumb-content .tp-breadcrumb {
font-size: 16px;
}
}
.tp-breadcrumb-content .tp-breadcrumb span {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100px;
background-color: var(--white);
margin: 0 10px;
}
@media (max-width: 767px) {
.tp-breadcrumb-content .tp-breadcrumb span {
margin: 0 5px;
}
}
.tp-breadcrumb-content .tp-breadcrumb a {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-breadcrumb-content .tp-breadcrumb a:hover {
color: var(--primary);
}
.blog-details-hero .tp-breadcrumb-title {
font-weight: 500;
max-width: 1346px;
}
/*----------------------------------------*/
/* 13. COUNTER CSS START
/*----------------------------------------*/
.tp-counter-area .title {
font-weight: 500;
font-size: 28px;
line-height: 1.3;
letter-spacing: -0.7px;
text-align: center;
color: var(--black-2);
margin-bottom: 80px;
}
@media (max-width: 1399px) {
.tp-counter-area .title {
font-size: 25px;
}
}
@media (max-width: 1199px) {
.tp-counter-area .title {
font-size: 22px;
margin-bottom: 60px;
}
}
@media (max-width: 991px) {
.tp-counter-area .title {
font-size: 20px;
margin-bottom: 50px;
}
}
.tp-counter-area .tp-counter-wrapper .text {
max-width: 240px;
margin: 0 auto;
}
.tp-counter-area-2 {
border-bottom: 1px solid var(--white-3);
}
.tp-counter-list {
gap: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 90px;
}
@media (max-width: 991px) {
.tp-counter-list {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
margin-bottom: 60px;
}
}
@media (max-width: 767px) {
.tp-counter-list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-counter-list-2 {
gap: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media (max-width: 991px) {
.tp-counter-list-2 {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
}
@media (max-width: 767px) {
.tp-counter-list-2 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-counter-wrapper {
text-align: center;
width: 285px;
}
@media (max-width: 767px) {
.tp-counter-wrapper {
margin: 0 auto;
}
}
.tp-counter-wrapper .number {
font-weight: 500;
font-size: 100px;
line-height: 1;
letter-spacing: -5px;
color: var(--black-2);
border-bottom: 1px solid var(--white-3);
padding-bottom: 12px;
margin-bottom: 25px;
position: relative;
}
@media (max-width: 1399px) {
.tp-counter-wrapper .number {
font-size: 80px;
letter-spacing: -4px;
padding-bottom: 10px;
margin-bottom: 20px;
}
}
@media (max-width: 1199px) {
.tp-counter-wrapper .number {
font-size: 70px;
letter-spacing: -3px;
}
}
@media (max-width: 991px) {
.tp-counter-wrapper .number {
font-size: 50px;
padding-bottom: 12px;
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.tp-counter-wrapper .number {
font-size: 48px;
padding-bottom: 10px;
}
}
.tp-counter-wrapper .number::before {
position: absolute;
content: "";
left: 0;
bottom: -4px;
width: 7px;
height: 7px;
background-color: var(--white-3);
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
.tp-counter-wrapper .number::after {
position: absolute;
content: "";
right: 0;
bottom: -4px;
width: 7px;
height: 7px;
background-color: var(--white-3);
clip-path: polygon(0 50%, 100% 100%, 100% 0);
}
.tp-counter-wrapper .text {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.4;
color: var(--black-2);
}
@media (max-width: 1399px) {
.tp-counter-wrapper .text {
font-size: 17px;
}
}
@media (max-width: 1199px) {
.tp-counter-wrapper .text {
font-size: 16px;
}
}
.tp-counter-wrapper-2 {
gap: 35px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tp-counter-wrapper-2 .number {
font-weight: 500;
font-size: 70px;
line-height: 1;
color: var(--black-2);
position: relative;
display: inline-block;
}
@media (max-width: 1399px) {
.tp-counter-wrapper-2 .number {
font-size: 60px;
}
}
@media (max-width: 1199px) {
.tp-counter-wrapper-2 .number {
font-size: 50px;
}
}
@media (max-width: 991px) {
.tp-counter-wrapper-2 .number {
font-size: 50px;
}
}
@media (max-width: 767px) {
.tp-counter-wrapper-2 .number {
font-size: 40px;
}
}
.tp-counter-wrapper-2 .number .suffix {
font-size: 35px;
line-height: 0;
position: absolute;
top: 11px;
font-weight: 100;
right: -24px;
}
.tp-counter-wrapper-2 .text {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: var(--black-2);
}
@media (max-width: 1199px) {
.tp-counter-wrapper-2 .text br {
display: none;
}
}
@media (max-width: 767px) {
.tp-counter-wrapper-2 .text {
font-size: 16px;
}
}
.tp-funfact-area-2 .tp-funfact-text {
text-align: center;
margin-bottom: 50px;
}
@media (max-width: 1199px) {
.tp-funfact-area-2 .tp-funfact-text {
margin-bottom: 40px;
}
}
.tp-funfact-area-2 .tp-funfact-text p {
font-weight: 400;
font-size: 22px;
line-height: 1.5;
text-align: center;
color: var(--black-2);
border: 1px solid var(--white-3);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 12px;
padding: 5px 24px;
border-radius: 100px;
}
@media (max-width: 1199px) {
.tp-funfact-area-2 .tp-funfact-text p {
font-size: 20px;
}
}
@media (max-width: 991px) {
.tp-funfact-area-2 .tp-funfact-text p {
font-size: 18px;
}
}
@media (max-width: 767px) {
.tp-funfact-area-2 .tp-funfact-text p {
font-size: 16px;
}
}
.tp-funfact-items-2 {
gap: 20px;
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;
}
@media (max-width: 991px) {
.tp-funfact-items-2 {
gap: 40px 20px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
@media (max-width: 767px) {
.tp-funfact-items-2 {
gap: 25px;
}
}
.tp-funfact-items-2 .text {
max-width: 200px;
}
@media (max-width: 1199px) {
.tp-funfact-items-2 .text {
font-size: 16px;
}
}
/*----------------------------------------*/
/* 14. MARQUEE CSS START
/*----------------------------------------*/
.tp--marquee-text {
font-weight: 500;
font-size: 145px;
line-height: 1;
letter-spacing: -4px;
vertical-align: middle;
-ms-flex-negative: 0;
flex-shrink: 0;
color: rgba(2, 2, 2, 0.1490196078);
}
@media (max-width: 1399px) {
.tp--marquee-text {
font-size: 120px;
}
}
@media (max-width: 1199px) {
.tp--marquee-text {
font-size: 100px;
}
}
@media (max-width: 991px) {
.tp--marquee-text {
font-size: 80px;
}
}
@media (max-width: 767px) {
.tp--marquee-text {
font-size: 50px;
}
}
@media (max-width: 991px) {
.tp--marquee-text img {
max-width: 70px;
}
}
@media (max-width: 767px) {
.tp--marquee-text img {
max-width: 40px;
letter-spacing: 0;
}
}
.tp--marquee-text-inner {
gap: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
will-change: transform;
z-index: 2;
position: relative;
}
@media (max-width: 767px) {
.tp--marquee-text-inner {
gap: 30px;
}
}
.tp--marquee-text-inner.inner-2 {
gap: 30px;
}
.tp--marquee-text-area {
width: 100%;
overflow: hidden;
white-space: nowrap;
z-index: 1;
}
.tp--marquee-text-style-2 .text-wrapper {
text-align: center;
margin-bottom: 70px;
position: relative;
padding: 0 15px;
}
@media (max-width: 767px) {
.tp--marquee-text-style-2 .text-wrapper {
margin-bottom: 40px;
}
}
.tp--marquee-text-style-2 .text-wrapper::after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: var(--white-3);
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.tp--marquee-text-style-2 p {
font-weight: 500;
font-size: 16px;
line-height: 1.3;
color: var(--black-2);
fill: var(--black-2);
border: 1px solid var(--white-3);
border-radius: 100px;
padding: 15px 20px;
display: inline-block;
background-color: var(--white);
position: relative;
z-index: 1;
}
.tp--marquee-text-style-2 p a {
gap: 10px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 25px;
}
@media (max-width: 767px) {
.tp--marquee-text-style-2 p a {
margin-left: 10px;
}
}
.tp--marquee-text-style-2 p a:hover {
color: var(--primary);
fill: var(--primary);
}
.tp--marquee-text-2 {
color: var(--black-2);
font-weight: 500;
font-size: 28px;
line-height: 1.3;
text-align: center;
border: 1px solid var(--white-3);
border-radius: 100px;
padding: 30px 41px;
}
@media (max-width: 1199px) {
.tp--marquee-text-2 {
font-size: 24px;
padding: 25px 36px;
}
}
@media (max-width: 767px) {
.tp--marquee-text-2 {
padding: 15px 36px;
}
}
.tp--marquee-text-2:nth-child(even) {
background: -webkit-gradient(linear, left top, right top, from(#0728E4), to(var(--primary)));
background: linear-gradient(90deg, #0728E4 0%, var(--primary) 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.tp-client-logo-slider {
gap: 140px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
will-change: transform;
}
.tp-client-logo-area {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.image-trail-animation {
width: 100%;
overflow: hidden;
position: relative;
}
.image-trail-images {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
}
.image-trail-images img {
position: absolute;
top: 0;
left: 0;
width: 230px;
aspect-ratio: 1;
opacity: 0;
pointer-events: none;
border-radius: 10px;
will-change: transform, opacity;
}
.full-image {
position: relative;
background-color: var(--white-5);
}
.full-image .mask-svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.full-image img {
border-radius: 20px;
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 767px) {
.full-image img {
height: 300px;
}
}
/*----------------------------------------*/
/* 15. SERVICE CSS START
/*----------------------------------------*/
.tp-service-area {
background-color: var(--white-7);
}
.tp-service-area .title-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 65px;
position: relative;
}
@media (max-width: 991px) {
.tp-service-area .title-wrap {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-service-area .title-wrap {
-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;
}
}
.tp-service-area .sec-title {
color: var(--black-3);
max-width: 885px;
}
@media (max-width: 1199px) {
.tp-service-area .sec-title {
max-width: 680px;
}
}
@media (max-width: 991px) {
.tp-service-area .sec-title {
max-width: 450px;
}
}
@media (max-width: 767px) {
.tp-service-area .sec-title {
margin-bottom: 30px;
}
}
.tp-service-area > .tp-btn-one {
background-color: transparent;
border: 1px solid rgba(2, 2, 2, 0.1490196078);
padding: 20px 38px;
margin-top: 30px;
}
@media (max-width: 767px) {
.tp-service-area > .tp-btn-one {
margin-top: 10px;
}
}
.tp-service-area-2 .title-wrap {
text-align: center;
margin-bottom: 65px;
}
@media (max-width: 1199px) {
.tp-service-area-2 .title-wrap {
margin-bottom: 50px;
}
}
@media (max-width: 991px) {
.tp-service-area-2 .title-wrap {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-service-area-2 .title-wrap {
margin-bottom: 30px;
}
}
.tp-service-area-2 .title-wrap .sec-title-2 {
margin-top: 35px;
margin-bottom: 10px;
}
@media (max-width: 1199px) {
.tp-service-area-2 .title-wrap .sec-title-2 {
margin-top: 20px;
}
}
.tp-service-area-2 .title-wrap .sub-title {
font-size: 18px;
font-family: var(--font-mono);
}
@media (max-width: 767px) {
.tp-service-area-2 .title-wrap .sub-title {
font-size: 16px;
}
}
.tp-service-area-2 .title-wrap p {
max-width: 740px;
margin: 0 auto;
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 26px;
color: var(--black-4);
}
@media (max-width: 767px) {
.tp-service-area-2 .title-wrap p {
font-size: 16px;
}
}
.tp-service-area-3 {
padding-bottom: 80px;
}
@media (max-width: 767px) {
.tp-service-area-3 {
padding-bottom: 50px;
}
}
.tp-service-area-3 .title-wrap {
gap: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 55px;
}
@media (max-width: 767px) {
.tp-service-area-3 .title-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 40px;
}
}
.tp-service-area-3 .sec-title-2 {
max-width: 900px;
font-weight: 300;
}
@media (max-width: 1199px) {
.tp-service-area-3 .sec-title-2 {
max-width: 600px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
}
.tp-service-area-3 .sec-title-2 span {
font-weight: 500;
}
.tp-service-area-3 .cta-call {
font-weight: 400;
font-size: 18px;
line-height: 1;
color: var(--black-4);
text-align: center;
margin-top: 70px;
}
@media (max-width: 1399px) {
.tp-service-area-3 .cta-call {
margin-top: 60px;
}
}
@media (max-width: 1199px) {
.tp-service-area-3 .cta-call {
margin-top: 50px;
}
}
@media (max-width: 767px) {
.tp-service-area-3 .cta-call {
font-size: 16px;
line-height: 1.6;
margin-top: 30px;
}
}
.tp-service-area-3 .cta-call span {
color: var(--black-2);
font-size: 15px;
text-transform: uppercase;
background-color: var(--primary);
padding: 6px 12px;
font-weight: 500;
border-radius: 100px;
margin-right: 10px;
display: inline-block;
}
.tp-service-area-3 .cta-call a {
gap: 8px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
color: var(--black-2);
font-weight: 500;
}
.tp-service-area-3 .cta-call a:hover {
color: var(--green);
fill: var(--green);
}
.tp-service-area-3 .cta-call a svg {
font-size: 13px;
}
.tp-service-grid {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1919px) {
.tp-service-grid {
gap: 20px;
}
}
@media (max-width: 1199px) {
.tp-service-grid {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.tp-service-grid {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-service-grid-2 {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 0.6fr 30px 1fr;
grid-template-columns: 1fr 0.6fr 1fr;
}
@media (max-width: 1199px) {
.tp-service-grid-2 {
gap: 15px;
}
}
@media (max-width: 991px) {
.tp-service-grid-2 {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.tp-service-grid-2 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-service-grid-2 .card-wrapper {
gap: 30px;
display: -ms-grid;
display: grid;
}
@media (max-width: 1199px) {
.tp-service-grid-2 .card-wrapper {
gap: 15px;
}
}
@media (max-width: 991px) {
.tp-service-grid-2 .card-wrapper {
grid-column: 1/-1;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.tp-service-grid-2 .card-wrapper {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-service-grid-3 {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1919px) {
.tp-service-grid-3 {
gap: 20px;
}
}
@media (max-width: 1199px) {
.tp-service-grid-3 {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.tp-service-grid-3 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-service-card .card-inner {
height: 100%;
padding: 60px 40px;
border-radius: 20px;
background-color: var(--white);
display: -ms-grid;
display: grid;
background-repeat: no-repeat;
background-position: right bottom;
position: relative;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
@media (max-width: 1919px) {
.tp-service-card .card-inner {
padding: 40px 30px;
}
}
.tp-service-card .card-inner:hover {
background-color: var(--primary);
}
.tp-service-card .card-inner:hover .title a {
background-size: 100% 100%;
}
.tp-service-card .icon {
margin-bottom: 92px;
}
@media (max-width: 1399px) {
.tp-service-card .icon {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-service-card .icon {
margin-bottom: 30px;
max-width: 60px;
}
}
.tp-service-card .shape {
position: absolute;
right: 0;
top: 0;
}
.tp-service-card .title {
font-weight: 500;
font-size: 28px;
line-height: 1.3;
letter-spacing: -0.84px;
color: var(--black-2);
margin-bottom: 25px;
}
@media (max-width: 1399px) {
.tp-service-card .title {
font-size: 24px;
}
}
@media (max-width: 767px) {
.tp-service-card .title {
font-size: 20px;
}
.tp-service-card .title br {
display: none;
}
}
.tp-service-card .title a {
background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
background-repeat: no-repeat;
background-size: 0% 100%;
-webkit-transition: background-size 1s;
transition: background-size 1s;
}
.tp-service-card p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
letter-spacing: -0.5px;
color: var(--black-2);
margin-bottom: 82px;
}
@media (max-width: 1399px) {
.tp-service-card p {
margin-bottom: 60px;
}
}
@media (max-width: 767px) {
.tp-service-card p {
font-size: 16px;
}
}
.tp-service-card .service-btn {
margin-top: auto;
}
.tp-service-card .tp-btn-one {
border: 1px solid var(--white-3);
text-transform: capitalize;
}
.tp-service-card-2 {
border-radius: 20px;
background-repeat: no-repeat;
overflow: hidden;
}
.tp-service-card-2 .title {
font-weight: 500;
font-size: 33px;
line-height: 1.28;
}
@media (max-width: 1919px) {
.tp-service-card-2 .title {
font-size: 30px;
}
}
@media (max-width: 1199px) {
.tp-service-card-2 .title {
font-size: 24px;
}
}
.tp-service-card-2 .title a {
background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
background-repeat: no-repeat;
background-size: 0% 100%;
-webkit-transition: background-size 1s;
transition: background-size 1s;
}
.tp-service-card-2 .title:hover a {
background-size: 100% 100%;
}
.tp-service-card-2 p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
}
@media (max-width: 767px) {
.tp-service-card-2 p {
font-size: 16px;
}
}
.tp-service-card-2 .service-btn .actova-btn-light span {
background-color: var(--black-2);
}
.tp-service-card-2 .service-btn .actova-btn-light:hover {
background-color: transparent;
}
.tp-service-card-2.card-1 {
background-position: top right;
padding: 70px 60px;
background-color: var(--blue);
}
@media (max-width: 1199px) {
.tp-service-card-2.card-1 {
padding: 40px 30px;
}
}
.tp-service-card-2.card-1 .service-btn,
.tp-service-card-2.card-1 .content {
position: relative;
z-index: 1;
}
.tp-service-card-2.card-1 .title {
color: var(--white);
margin-top: 40px;
margin-bottom: 18px;
max-width: 415px;
}
@media (max-width: 1199px) {
.tp-service-card-2.card-1 .title {
margin-top: 30px;
margin-bottom: 12px;
}
}
@media (max-width: 767px) {
.tp-service-card-2.card-1 .title {
margin-top: 20px;
margin-bottom: 10px;
}
}
.tp-service-card-2.card-1 p {
color: var(--white);
margin-bottom: 110px;
}
@media (max-width: 991px) {
.tp-service-card-2.card-1 p {
margin-bottom: 40px;
}
}
.tp-service-card-2.card-2 {
background-position: right bottom;
background-color: var(--primary);
padding: 40px;
}
@media (max-width: 1919px) {
.tp-service-card-2.card-2 {
padding: 40px 20px;
background-size: 200px;
}
}
@media (max-width: 1199px) {
.tp-service-card-2.card-2 {
padding: 30px 15px;
background-size: 120px;
}
}
.tp-service-card-2.card-2 .title {
color: var(--black-2);
max-width: 330px;
}
.tp-service-card-2.card-2 p {
color: var(--black-4);
margin-top: 18px;
margin-bottom: 60px;
}
@media (max-width: 1199px) {
.tp-service-card-2.card-2 p {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-service-card-2.card-2 p {
font-size: 16px;
margin-bottom: 30px;
}
}
.tp-service-card-2.card-2 .actova-btn {
font-weight: 500;
font-size: 15px;
line-height: 1;
color: #1f1f1f;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
border-bottom: solid 1px #1f1f1f;
display: inline-block;
padding-bottom: 2px;
}
.tp-service-card-2.card-2 .actova-btn svg {
font-size: 14px;
}
.tp-service-card-2.card-3 {
padding: 40px;
background-color: var(--white-5);
background-position: right bottom;
padding-bottom: 70px;
}
@media (max-width: 1199px) {
.tp-service-card-2.card-3 {
padding: 40px 20px;
padding-bottom: 50px;
}
}
.tp-service-card-2.card-3 .title {
color: var(--black-2);
margin-bottom: 30px;
max-width: 330px;
}
.tp-service-card-2.card-4 {
padding: 40px;
padding-top: 70px;
background-color: var(--black-2);
background-position: right bottom;
}
@media (max-width: 1199px) {
.tp-service-card-2.card-4 {
padding: 40px 20px;
padding-top: 50px;
}
}
.tp-service-card-2.card-4 .title {
color: var(--white);
margin-top: 20px;
max-width: 360px;
}
.tp-service-card-3 a {
display: block;
border: 1px solid var(--white-3);
border-radius: 20px;
padding: 65px 25px;
text-align: center;
}
@media (max-width: 1399px) {
.tp-service-card-3 a {
padding: 50px 20px;
}
}
@media (max-width: 767px) {
.tp-service-card-3 a {
padding: 40px 15px;
}
}
.tp-service-card-3 a img {
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.tp-service-card-3 a:hover {
background-color: var(--primary);
}
.tp-service-card-3 a:hover > img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.tp-service-card-3 .title {
margin-top: 65px;
margin-bottom: 20px;
font-weight: 500;
font-size: 28px;
line-height: 1.3;
letter-spacing: -0.8px;
color: var(--black-2);
}
@media (max-width: 1399px) {
.tp-service-card-3 .title {
font-size: 24px;
margin-top: 50px;
margin-bottom: 15px;
}
}
@media (max-width: 1199px) {
.tp-service-card-3 .title {
font-size: 22px;
margin-top: 30px;
}
}
@media (max-width: 767px) {
.tp-service-card-3 .title {
font-size: 20px;
margin-top: 20px;
margin-bottom: 10px;
}
}
.tp-service-card-3 p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
color: var(--black-4);
margin: 0;
}
@media (max-width: 991px) {
.tp-service-card-3 p {
font-size: 16px;
}
}
.tp-service-step {
text-align: center;
}
.tp-service-step ul {
gap: 40px;
margin-top: 70px;
margin-bottom: 42px;
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;
}
@media (max-width: 1199px) {
.tp-service-step ul {
gap: 15px;
margin-top: 50px;
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.tp-service-step ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 50px;
}
}
.tp-service-step ul li a {
font-weight: 500;
font-size: 22px;
line-height: 1.45;
padding: 21px 35px;
border-radius: 100px;
display: block;
}
@media (max-width: 1199px) {
.tp-service-step ul li a {
font-size: 18px;
padding: 16px 28px;
}
}
@media (max-width: 991px) {
.tp-service-step ul li a {
font-size: 16px;
}
}
.tp-service-step ul li:nth-child(1) a {
color: var(--white);
background-color: var(--blue);
}
.tp-service-step ul li:nth-child(2) a {
background-color: var(--white-4);
}
.tp-service-step ul li:nth-child(3) a {
background-color: var(--primary);
}
.tp-service-step p {
font-weight: 400;
font-size: 18px;
line-height: 1;
color: var(--black-4);
}
@media (max-width: 767px) {
.tp-service-step p {
font-size: 16px;
}
}
.tp-service-step p a {
color: var(--black-2);
font-weight: 500;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
}
.tp-service-step p a:hover {
fill: var(--green);
color: var(--green);
}
.tp-service-step p a svg {
font-size: 13px;
}
.tp-service-faq-body {
max-height: 0;
overflow: hidden;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.tp-service-faq-body p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
color: var(--black-4);
max-width: 520px;
}
@media (max-width: 767px) {
.tp-service-faq-body p {
font-size: 16px;
}
}
.tp-service-faq-body .body-content {
gap: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 60px;
padding-bottom: 60px;
}
@media (max-width: 991px) {
.tp-service-faq-body .body-content {
margin-top: 40px;
padding-bottom: 40px;
}
}
.tp-service-faq-body .left-content {
gap: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tp-service-faq-body .right-content {
gap: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media (max-width: 767px) {
.tp-service-faq-body .right-content {
gap: 15px;
}
}
.tp-service-faq-counter .number {
font-weight: 500;
font-size: 50px;
line-height: 1.3;
color: var(--black-2);
}
@media (max-width: 1199px) {
.tp-service-faq-counter .number {
font-size: 40px;
}
}
@media (max-width: 767px) {
.tp-service-faq-counter .number {
font-size: 32px;
}
}
.tp-service-faq-counter p {
font-weight: 500;
font-size: 18px;
line-height: 1.3;
color: var(--black-2);
}
@media (max-width: 767px) {
.tp-service-faq-counter p {
font-size: 16px;
}
}
.tp-service-faq-item {
border-bottom: 1px solid var(--white-3);
padding-bottom: 10px;
padding-top: 35px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@media (max-width: 1199px) {
.tp-service-faq-item {
padding-top: 25px;
padding-bottom: 0;
}
}
.tp-service-faq-item:first-child {
border-top: 1px solid var(--white-3);
}
.tp-service-faq-item:hover {
background-color: var(--white-7);
}
.tp-service-faq-item.active:hover {
background-color: var(--white);
}
.tp-service-faq-item.active .tp-service-faq-title::after {
content: "\f068";
}
.tp-service-faq-title {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
color: var(--black-2);
font-weight: 500;
font-size: 35px;
line-height: 1.2;
padding-bottom: 25px;
}
@media (max-width: 1399px) {
.tp-service-faq-title {
font-size: 30px;
padding-bottom: 20px;
}
}
@media (max-width: 1199px) {
.tp-service-faq-title {
font-size: 28px;
}
}
@media (max-width: 991px) {
.tp-service-faq-title {
font-size: 24px;
padding-bottom: 15px;
}
}
@media (max-width: 767px) {
.tp-service-faq-title {
font-size: 20px;
}
}
.tp-service-faq-title::after {
content: "+";
font-family: "Font Awesome 5 Pro";
font-weight: 700;
position: absolute;
-webkit-transition: 0.2s;
transition: 0.2s;
right: 0;
font-size: 24px;
}
@media (max-width: 991px) {
.tp-service-faq-title::after {
font-size: 20px;
}
}
.tp-service-details-header {
margin-bottom: 20px;
}
.tp-service-details-header .title-wrap {
text-align: center;
max-width: 850px;
margin: 0 auto;
}
.tp-service-details-header .title-wrap .sec-title-3 {
padding-top: 40px;
padding-bottom: 50px;
}
@media (max-width: 1399px) {
.tp-service-details-header .title-wrap .sec-title-3 {
padding-top: 30px;
padding-bottom: 40px;
}
}
@media (max-width: 1199px) {
.tp-service-details-header .title-wrap .sec-title-3 {
padding-top: 25px;
padding-bottom: 30px;
}
}
.tp-service-details-header .what-we-offer {
font-weight: 500;
font-size: 18px;
line-height: 1.3;
color: var(--black-2);
position: relative;
padding-left: 18px;
}
@media (max-width: 767px) {
.tp-service-details-header .what-we-offer {
font-size: 16px;
}
}
.tp-service-details-header .what-we-offer::before {
position: absolute;
content: "";
width: 8px;
height: 8px;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: var(--gray);
border-radius: 100px;
}
.tp-service-details-footer {
padding-top: 70px;
}
@media (max-width: 1399px) {
.tp-service-details-footer {
padding-top: 60px;
}
}
@media (max-width: 1199px) {
.tp-service-details-footer {
padding-top: 50px;
}
}
@media (max-width: 767px) {
.tp-service-details-footer {
padding-top: 30px;
}
}
.tp-service-details-footer .title {
font-weight: 500;
font-size: 35px;
line-height: 1.2;
color: var(--black-2);
margin-bottom: 20px;
}
@media (max-width: 1399px) {
.tp-service-details-footer .title {
font-size: 30px;
margin-bottom: 15px;
}
}
@media (max-width: 1199px) {
.tp-service-details-footer .title {
font-size: 28px;
}
}
@media (max-width: 991px) {
.tp-service-details-footer .title {
font-size: 24px;
margin-bottom: 10px;
}
}
@media (max-width: 767px) {
.tp-service-details-footer .title {
font-size: 20px;
}
}
.tp-service-details-footer p {
color: var(--black-4);
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
}
@media (max-width: 767px) {
.tp-service-details-footer p {
font-size: 16px;
}
}
.tp-service-details-footer .img-wrapper {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1fr;
grid-template-columns: 1fr 1fr;
margin-bottom: 70px;
}
@media (max-width: 1399px) {
.tp-service-details-footer .img-wrapper {
margin-bottom: 60px;
}
}
@media (max-width: 991px) {
.tp-service-details-footer .img-wrapper {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-service-details-footer .img-wrapper {
gap: 15px;
margin-bottom: 30px;
}
}
.tp-service-details-footer .img-wrapper img {
border-radius: 20px;
}
.tp-industry-area .swiper-slide {
width: auto !important;
margin-right: 30px;
}
@media (max-width: 1199px) {
.tp-industry-area .swiper-slide {
margin-right: 20px;
}
}
@media (max-width: 767px) {
.tp-industry-area .swiper-slide {
margin-right: 15px;
}
}
.tp-industry-area .swiper-wrapper {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.tp-industry-area .title {
font-weight: 500;
font-size: 28px;
line-height: 1;
color: var(--black-2);
margin-bottom: 65px;
text-align: center;
}
@media (max-width: 991px) {
.tp-industry-area .title {
margin-bottom: 50px;
}
}
@media (max-width: 767px) {
.tp-industry-area .title {
margin-bottom: 40px;
}
}
.tp-industry-area .text {
margin-top: 42px;
font-weight: 400;
font-size: 18px;
line-height: 1;
color: var(--black-4);
text-align: center;
}
@media (max-width: 767px) {
.tp-industry-area .text {
font-size: 16px;
}
}
.tp-industry-area .text a {
font-weight: 500;
color: var(--black-2);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
}
.tp-industry-area .text a:hover {
fill: var(--green);
color: var(--green);
}
.tp-industry-area .text a svg {
font-size: 14px;
}
.tp-industry-grid a {
font-weight: 500;
line-height: 100%;
color: var(--black);
border: 1px solid var(--white-3);
padding: 24px 50px;
font-size: 28px;
border-radius: 100px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
}
@media (max-width: 1919px) {
.tp-industry-grid a {
gap: 10px;
padding: 18px 32px;
font-size: 22px;
}
}
@media (max-width: 1399px) {
.tp-industry-grid a {
font-size: 20px;
padding: 15px 28px;
}
}
@media (max-width: 1199px) {
.tp-industry-grid a {
font-size: 18px;
}
}
@media (max-width: 767px) {
.tp-industry-grid a {
font-size: 16px;
padding: 12px 20px;
}
}
.tp-industry-grid a:hover {
border-color: var(--primary);
background-color: var(--primary);
}
.tp-industry-grid a:hover .icon {
fill: var(--white);
color: var(--white);
background-color: var(--black-2);
}
.tp-industry-grid .icon {
width: 40px;
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 100px;
background: var(--primary);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 14px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.service-page {
padding: 0 !important;
}
.service-page .tp-contact-wrapper-service {
background-color: var(--primary);
border-radius: 20px;
padding-top: 180px;
padding-bottom: 180px;
}
@media (max-width: 1919px) {
.service-page .tp-contact-wrapper-service {
padding-top: 160px;
padding-bottom: 160px;
}
}
@media (max-width: 1399px) {
.service-page .tp-contact-wrapper-service {
padding-top: 140px;
padding-bottom: 140px;
}
}
@media (max-width: 991px) {
.service-page .tp-contact-wrapper-service {
padding-top: 120px;
padding-bottom: 120px;
}
}
@media (max-width: 767px) {
.service-page .tp-contact-wrapper-service {
padding-top: 60px;
padding-bottom: 60px;
}
}
.service-page .tp-contact-inner p,
.service-page .tp-contact-inner .title {
color: var(--black-2);
}
.service-page .tp-content {
position: relative;
z-index: 99;
padding: 15px;
}
.service-page .image-trail-images {
pointer-events: none;
}
/*----------------------------------------*/
/* 16. WORK PROCESS CSS START
/*----------------------------------------*/
.tp-how-work-area .title-wrap {
margin: 0 auto;
max-width: 1000px;
text-align: center;
margin-bottom: 85px;
}
@media (max-width: 1199px) {
.tp-how-work-area .title-wrap {
max-width: 600px;
}
}
@media (max-width: 767px) {
.tp-how-work-area .title-wrap {
margin-bottom: 50px;
}
}
.tp-how-work-area .sec-title-2 {
margin-top: 30px;
}
.tp-how-work-inner-3 {
background-color: var(--white-5);
border-radius: 0 0 20px 20px;
}
.tp-how-work-inner-3 .tp-how-work-steps::after {
width: 100%;
left: 0;
background-color: rgba(2, 2, 2, 0.1019607843);
z-index: 0;
}
.tp-how-work-inner-3 .tp-how-work-step .step {
z-index: 1;
position: relative;
}
.tp-how-work-inner-3 .title-wrap {
text-align: center;
margin-bottom: 55px;
}
.tp-how-work-inner-3 .sub-title {
background: var(--white);
margin-bottom: 25px;
border: none;
}
.tp-how-work-steps {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
}
@media (max-width: 767px) {
.tp-how-work-steps {
gap: 40px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.tp-how-work-steps::after {
position: absolute;
content: "";
width: 150%;
height: 1px;
left: -25%;
top: 18px;
background-color: var(--white-3);
z-index: -1;
}
.tp-how-work-step {
text-align: center;
padding: 0 15px;
position: relative;
z-index: 1;
}
.tp-how-work-step .step {
font-weight: 500;
font-size: 17px;
line-height: 1.3;
color: var(--black-2);
background-color: var(--primary);
border-radius: 100px;
display: inline-block;
padding: 7px 20px;
margin-bottom: 60px;
}
@media (max-width: 1399px) {
.tp-how-work-step .step {
margin-bottom: 50px;
}
}
@media (max-width: 1199px) {
.tp-how-work-step .step {
margin-bottom: 40px;
}
}
@media (max-width: 991px) {
.tp-how-work-step .step {
font-size: 16px;
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.tp-how-work-step .step {
margin-bottom: 15px;
}
}
.tp-how-work-step .title {
font-weight: 500;
font-size: 33px;
line-height: 1.33;
letter-spacing: -1px;
color: var(--black-2);
margin-bottom: 20px;
}
@media (max-width: 1399px) {
.tp-how-work-step .title {
font-size: 30px;
margin-bottom: 15px;
}
}
@media (max-width: 1199px) {
.tp-how-work-step .title {
font-size: 24px;
margin-bottom: 10px;
}
}
@media (max-width: 991px) {
.tp-how-work-step .title {
font-size: 22px;
}
}
.tp-how-work-step p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: var(--black-4);
max-width: 496px;
}
@media (max-width: 991px) {
.tp-how-work-step p {
font-size: 16px;
}
}
.tp-watch-video {
max-width: 630px;
border: 1px solid var(--white-3);
border-radius: 100px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px 20px 10px 50px;
margin: 0 auto;
margin-top: 70px;
}
@media (max-width: 767px) {
.tp-watch-video {
gap: 15px;
margin-top: 40px;
padding: 10px 15px;
}
}
.tp-watch-video p {
font-weight: 500;
font-size: 18px;
line-height: 1;
letter-spacing: 2.5px;
color: var(--black-2);
}
@media (max-width: 767px) {
.tp-watch-video p {
font-size: 16px;
line-height: 1.3;
}
}
.tp-video-popup-wrapper {
width: 200px;
height: 60px;
border-radius: 100px;
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;
overflow: hidden;
position: relative;
background-image: url(../imgs/others/watch-video.png);
background-position: center;
}
@media (max-width: 767px) {
.tp-video-popup-wrapper {
width: 90px;
height: 50px;
}
}
.tp-video-popup {
background: var(--white);
color: var(--black-2);
border-radius: 50%;
height: 45px;
width: 45px;
text-align: center;
line-height: 45px;
font-size: 15px;
}
/*----------------------------------------*/
/* 17. FAQ CSS START
/*----------------------------------------*/
.tp-faq-area {
background-image: url(../imgs/faq/shape-bg.png);
background-repeat: no-repeat;
background-position: 0 68%;
}
.tp-faq-area .title-wrap {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1.25fr;
grid-template-columns: 1fr 1.25fr;
margin-bottom: 65px;
}
@media (max-width: 991px) {
.tp-faq-area .title-wrap {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-faq-area .title-wrap {
gap: 20px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-faq-area .sub-title-2 {
-ms-flex-item-align: start;
align-self: flex-start;
justify-self: flex-start;
}
.tp-faq-area .tp-text-box {
position: absolute;
right: -80px;
bottom: 70px;
}
@media (max-width: 1199px) {
.tp-faq-area .tp-text-box {
right: 15px;
bottom: -100px;
}
}
@media (max-width: 767px) {
.tp-faq-area .tp-text-box {
right: unset;
left: 10px;
bottom: 10px;
padding: 15px;
}
.tp-faq-area .tp-text-box .title {
margin-bottom: 5px;
margin-top: 15px;
font-size: 40px;
}
}
.tp-faq-area-2 {
position: relative;
}
.tp-faq-bg-pattern {
position: absolute;
bottom: 0;
background-position: center center;
background-repeat: no-repeat;
z-index: -1;
}
.tp-faq-inner-2 {
max-width: 850px;
margin: 0 auto;
}
.tp-faq-inner-2 .title-wrap {
text-align: center;
margin-bottom: 40px;
}
.tp-faq-inner-2 .rating {
font-weight: 500;
font-size: 18px;
line-height: 1.5;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 15px;
}
.tp-faq-wrapper {
gap: 15px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 15px 1.25fr;
grid-template-columns: 1fr 1.25fr;
}
@media (max-width: 767px) {
.tp-faq-wrapper {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-faq-img {
position: relative;
max-width: 485px;
-ms-flex-item-align: end;
align-self: flex-end;
}
@media (max-width: 1199px) {
.tp-faq-img {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
}
.tp-faq-img .img-anim {
height: 520px;
border-radius: 15px;
}
@media (max-width: 1199px) {
.tp-faq-img .img-anim {
height: auto;
}
}
.tp-faq-title {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
font-weight: 500;
font-size: 20px;
line-height: 1;
color: var(--black-2);
}
@media (max-width: 991px) {
.tp-faq-title {
font-size: 18px;
line-height: 1.3;
}
}
.tp-faq-title::after {
content: "\f0d7";
font-family: "Font Awesome 5 Free";
font-weight: 700;
position: absolute;
-webkit-transition: 0.2s;
transition: 0.2s;
right: 0;
font-size: 12px;
}
.tp-faq-body {
max-height: 0;
overflow: hidden;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.tp-faq-body li,
.tp-faq-body p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
color: var(--black-4);
}
@media (max-width: 991px) {
.tp-faq-body li,
.tp-faq-body p {
font-size: 16px;
}
}
.tp-faq-body li strong,
.tp-faq-body p strong {
color: var(--black-2);
font-weight: 700;
}
.tp-faq-body p {
margin-top: 20px;
}
.tp-faq-body ol {
padding-left: 35px;
margin-top: 20px;
display: -ms-grid;
display: grid;
gap: 10px;
}
.tp-faq-body ol li {
list-style: decimal;
}
.tp-faq-list {
gap: 30px;
display: -ms-grid;
display: grid;
}
@media (max-width: 1399px) {
.tp-faq-list {
gap: 15px;
}
}
.tp-faq-item {
border: 1px solid var(--white-3);
border-radius: 10px;
padding: 18px 30px;
}
@media (max-width: 1199px) {
.tp-faq-item {
padding: 18px 20px;
}
}
.tp-faq-item.active {
padding: 30px;
background-color: var(--white-4);
}
@media (max-width: 767px) {
.tp-faq-item.active {
padding: 20px 15px;
}
}
.tp-faq-item.style-2 {
border: none;
background-color: var(--white);
-webkit-box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
}
.tp-text-box {
background: var(--primary);
width: 300px;
padding: 30px;
border-radius: 20px;
}
.tp-text-box .text {
font-family: var(--font-mono);
font-weight: 400;
font-size: 16px;
line-height: 1;
color: var(--black-2);
text-align: right;
}
.tp-text-box .title {
font-weight: 500;
font-size: 70px;
line-height: 1;
letter-spacing: -2px;
color: var(--black-2);
margin-top: 40px;
margin-bottom: 30px;
}
@media (max-width: 1199px) {
.tp-text-box .title {
font-size: 50px;
margin-top: 30px;
margin-bottom: 15px;
}
}
.tp-text-box p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
color: var(--black-2);
}
@media (max-width: 767px) {
.tp-text-box p {
font-size: 16px;
}
}
/*----------------------------------------*/
/* 18. CTA CSS START
/*----------------------------------------*/
.tp-cta-area-2 {
position: relative;
}
.tp-cta-area-2::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
bottom: 0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(45.58%, rgba(68, 68, 68, 0)), to(var(--black-2)));
background: linear-gradient(180deg, rgba(68, 68, 68, 0) 45.58%, var(--black-2) 100%);
}
.tp-cta-area-2 .sec-title-2 {
color: var(--white);
}
@media (max-width: 767px) {
.tp-cta-area-2 img {
height: 320px;
-o-object-fit: cover;
object-fit: cover;
}
}
.tp-cta-wrapper {
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;
background-color: var(--white-4);
background-image: url(../imgs/others/cta-bg.png);
background-repeat: no-repeat;
background-position: right center;
padding: 30px 30px 30px 65px;
border-radius: 100px;
max-width: 1290px;
margin: 0 auto;
}
@media (max-width: 991px) {
.tp-cta-wrapper {
padding: 15px;
}
}
@media (max-width: 767px) {
.tp-cta-wrapper {
gap: 15px;
padding: 30px 20px;
border-radius: 30px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.tp-cta-wrapper .actova-btn-flip {
font-size: 14px;
padding: 14px 25px;
}
}
.tp-cta-wrapper .cta-content {
gap: 25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media (max-width: 991px) {
.tp-cta-wrapper .cta-content {
gap: 10px;
}
}
.tp-cta-wrapper .cta-content p {
font-weight: 500;
font-size: 22px;
line-height: 1.3;
letter-spacing: -0.66px;
color: var(--black-2);
max-width: 550px;
}
@media (max-width: 991px) {
.tp-cta-wrapper .cta-content p {
font-size: 18px;
}
}
@media (max-width: 767px) {
.tp-cta-wrapper .cta-content p {
font-size: 16px;
}
}
.tp-cta-wrapper .cta-btn .tp-btn-one {
padding: 22px 36px;
background-color: var(--primary);
}
.tp-cta-content-2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 110px 50px;
position: absolute;
bottom: 0;
width: 100%;
z-index: 1;
}
@media (max-width: 1199px) {
.tp-cta-content-2 {
padding: 80px 30px;
}
}
@media (max-width: 991px) {
.tp-cta-content-2 {
padding: 60px 30px;
}
}
@media (max-width: 767px) {
.tp-cta-content-2 {
gap: 20px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 15px;
}
}
/*----------------------------------------*/
/* 18. Formula CSS
/*----------------------------------------*/
.tp-formula-area {
position: relative;
}
.tp-formula-area .robot-hand {
position: absolute;
left: 0;
top: -30px;
}
@media (max-width: 767px) {
.tp-formula-area .robot-hand {
max-width: 260px;
}
}
.tp-formula-area .human-hand {
position: absolute;
right: 0;
bottom: 220px;
}
@media (max-width: 1399px) {
.tp-formula-area .human-hand {
bottom: 100px;
}
}
@media (max-width: 767px) {
.tp-formula-area .human-hand {
max-width: 260px;
}
}
.tp-formula-area .formula {
font-weight: 500;
font-size: 26px;
line-height: 1;
letter-spacing: -0.84px;
color: var(--black-2);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 30px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: var(--white);
border-radius: 100px;
padding: 31px;
max-width: 895px;
margin: 0 auto;
margin-bottom: 22px;
position: relative;
z-index: 1;
}
@media (max-width: 1399px) {
.tp-formula-area .formula {
font-size: 24px;
}
}
@media (max-width: 991px) {
.tp-formula-area .formula {
gap: 15px;
font-size: 20px;
}
}
@media (max-width: 767px) {
.tp-formula-area .formula {
gap: 3px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border-radius: 20px;
font-size: 18px;
}
}
.tp-formula-area .formula-img img {
position: relative;
z-index: 1;
}
.tp-formula-area p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
color: var(--black-2);
max-width: 850px;
margin: 0 auto;
margin-bottom: 70px;
position: relative;
z-index: 1;
}
@media (max-width: 767px) {
.tp-formula-area p {
font-size: 16px;
}
}
.tp-formula-area .cta-call {
font-weight: 400;
font-size: 18px;
line-height: 1;
color: var(--black-4);
text-align: center;
margin-top: 45px;
}
@media (max-width: 767px) {
.tp-formula-area .cta-call {
font-size: 16px;
line-height: 1.6;
margin-top: 40px;
}
}
.tp-formula-area .cta-call span {
color: var(--black-2);
font-size: 15px;
text-transform: uppercase;
background-color: var(--primary);
padding: 6px 12px;
font-weight: 500;
border-radius: 100px;
margin-right: 10px;
}
.tp-formula-area .cta-call a {
gap: 8px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
color: var(--black-2);
font-weight: 500;
}
.tp-formula-area .cta-call a:hover {
color: var(--green);
fill: var(--green);
}
.tp-formula-area .cta-call a svg {
font-size: 13px;
}
.tp-formula-inner {
position: relative;
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, var(--white-4)), to(rgba(240, 240, 240, 0)));
background: linear-gradient(180deg, var(--white-4) 50%, rgba(240, 240, 240, 0) 100%);
padding: 70px 130px;
border-radius: 20px;
text-align: center;
}
@media (max-width: 1199px) {
.tp-formula-inner {
padding: 50px 30px;
}
}
@media (max-width: 767px) {
.tp-formula-inner {
padding: 30px 15px;
}
}
.tp-formula-inner::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
bottom: 0;
background-image: url(../imgs/others/formula-bg.png);
background-repeat: no-repeat;
background-position: bottom;
background-size: auto;
}
/*----------------------------------------*/
/* 18. Watch Video CSS
/*----------------------------------------*/
.tp-watch-video-area .popup-wrapper {
position: absolute;
bottom: -4px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 1;
background: #fff;
padding: 14px 50px;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.tp-watch-video-area .tp-video-popup {
width: 270px;
aspect-ratio: unset;
height: 65px;
border-radius: 30px 30px 0 0;
font-weight: 500;
font-size: 18px;
line-height: 1;
gap: 15px;
}
.tp-watch-video-area .tp-video-popup svg {
font-size: 36px;
}
.tp-watch-video-area .img-fixed-anim {
overflow: hidden;
position: relative;
width: 100%;
height: 780px;
}
@media (max-width: 1399px) {
.tp-watch-video-area .img-fixed-anim {
height: 600px;
}
}
@media (max-width: 991px) {
.tp-watch-video-area .img-fixed-anim {
height: 520px;
}
}
@media (max-width: 767px) {
.tp-watch-video-area .img-fixed-anim {
height: 380px;
}
}
.tp-watch-video-area .img-fixed-anim::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(2, 2, 2, 0.3019607843);
z-index: 0;
}
.tp-watch-video-area .img-fixed-anim .anim-img {
position: absolute;
bottom: 0;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 110%;
}
.tp-watch-video-content {
position: absolute;
z-index: 1;
max-width: 850px;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
@media (max-width: 991px) {
.tp-watch-video-content {
width: 700px;
max-width: 100%;
}
}
@media (max-width: 767px) {
.tp-watch-video-content {
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
.tp-watch-video-content img {
max-width: 300px;
}
}
.tp-watch-video-content p {
font-weight: 500;
font-size: 22px;
line-height: 1.5;
text-align: center;
color: var(--white);
margin-top: 40px;
}
@media (max-width: 1399px) {
.tp-watch-video-content p {
font-size: 20px;
}
}
@media (max-width: 991px) {
.tp-watch-video-content p {
font-size: 18px;
margin-top: 30px;
}
}
@media (max-width: 767px) {
.tp-watch-video-content p {
font-size: 16px;
margin-top: 20px;
}
}
/*----------------------------------------*/
/* 19. TESTIMONIAL CSS START
/*----------------------------------------*/
.tp-testimonial-area {
background-color: var(--white-7);
background-image: url(../imgs/testimonial/tsm-shape.png);
background-repeat: no-repeat;
background-position: bottom right;
}
.tp-testimonial-area .row > * {
padding-right: 0;
padding-left: 0;
}
.tp-testimonial-area-2 .tp-testimonial-navigation .tp-tsm-prev,
.tp-testimonial-area-2 .tp-testimonial-navigation .tp-tsm-next {
border: 1px solid var(--white-3);
}
.tp-testimonial-area-3 .title-wrap {
text-align: center;
margin-bottom: 60px;
}
@media (max-width: 1199px) {
.tp-testimonial-area-3 .title-wrap {
margin-bottom: 50px;
}
}
@media (max-width: 767px) {
.tp-testimonial-area-3 .title-wrap {
margin-bottom: 40px;
}
}
.tp-testimonial-area-3 .sub-title {
border: 0;
background: var(--white-5);
margin-bottom: 30px;
}
@media (max-width: 767px) {
.tp-testimonial-area-3 .sub-title {
margin-bottom: 20px;
}
}
.tp-testimonial-area-3 .tp-testimonial-navigation .tp-tsm-prev,
.tp-testimonial-area-3 .tp-testimonial-navigation .tp-tsm-next {
border: 1px solid var(--white-3);
}
.tp-testimonial-area-3 .tp-testimonial-navigation .tp-tsm-prev:hover,
.tp-testimonial-area-3 .tp-testimonial-navigation .tp-tsm-next:hover {
border-color: var(--primary);
}
.tp-testimonial-wrapper-4 {
max-width: 1000px;
margin: 0 auto;
}
.tp-testimonial-wrapper-4 .swiper-3d .swiper-slide-shadow {
background: rgba(247, 247, 247, 0.768627451);
-webkit-box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
border-radius: 20px;
}
.tp-testimonial-titlebox {
text-align: center;
max-width: 680px;
margin: 0 auto;
margin-bottom: 70px;
}
@media (max-width: 767px) {
.tp-testimonial-titlebox {
margin-bottom: 30px;
}
}
.tp-testimonial-titlebox p {
gap: 5px;
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;
margin-bottom: 15px;
color: var(--black-2);
font-weight: 500;
font-size: 18px;
line-height: 1.5;
}
@media (max-width: 1199px) {
.tp-testimonial-inner {
min-height: 560px;
}
}
@media (max-width: 1399px) {
.tp-testimonial-inner-3 {
padding-top: 160px;
}
}
.tp-testimonial-inner-4 {
position: relative;
}
.tp-testimonial-image {
height: 100%;
}
.tp-testimonial-image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.tp-testimonial-image-2 {
position: relative;
height: 100%;
}
.tp-testimonial-image-2 img {
border-radius: 12px;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.tp-testimonial-image-2 .popup-wrapper {
position: absolute;
left: 20px;
top: 20px;
}
.tp-testimonial-slide {
padding: 110px 120px 120px 70px;
}
@media (max-width: 1919px) {
.tp-testimonial-slide {
padding: 70px 70px 70px 50px;
}
}
@media (max-width: 1199px) {
.tp-testimonial-slide {
padding: 70px 70px 70px 30px;
}
}
@media (max-width: 991px) {
.tp-testimonial-slide {
padding-bottom: 140px;
}
}
@media (max-width: 767px) {
.tp-testimonial-slide {
padding: 40px 20px;
padding-bottom: 130px;
}
}
.tp-testimonial-slide svg {
width: 1em;
height: 1em;
}
.tp-testimonial-slide .reason {
font-weight: 400;
font-size: 26px;
line-height: 1.5;
letter-spacing: -0.84px;
color: var(--black-2);
margin-bottom: 30px;
}
@media (max-width: 1919px) {
.tp-testimonial-slide .reason {
margin-bottom: 20px;
}
}
@media (max-width: 1199px) {
.tp-testimonial-slide .reason {
font-size: 24px;
}
}
@media (max-width: 767px) {
.tp-testimonial-slide .reason {
margin-bottom: 15px;
font-size: 20px;
}
}
.tp-testimonial-slide p {
font-weight: 400;
font-size: 33px;
line-height: 1.3;
letter-spacing: -1px;
color: var(--black-4);
margin-bottom: 120px;
}
@media (max-width: 1919px) {
.tp-testimonial-slide p {
font-size: 28px;
margin-bottom: 80px;
}
}
@media (max-width: 1399px) {
.tp-testimonial-slide p {
margin-bottom: 60px;
}
}
@media (max-width: 1199px) {
.tp-testimonial-slide p {
font-size: 24px;
margin-bottom: 50px;
}
}
@media (max-width: 767px) {
.tp-testimonial-slide p {
font-size: 20px;
}
}
.tp-testimonial-slide p span {
color: var(--black-2);
font-weight: 500;
}
.tp-testimonial-slide .author-info-wrap {
gap: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: 70px;
position: relative;
}
@media (max-width: 1199px) {
.tp-testimonial-slide .author-info-wrap {
padding-bottom: 50px;
}
}
.tp-testimonial-slide .author-info-wrap::after {
position: absolute;
content: "";
width: calc(100% + 190px);
height: 1px;
left: 0;
bottom: -1px;
background-color: rgba(2, 2, 2, 0.1490196078);
}
@media (max-width: 1919px) {
.tp-testimonial-slide .author-info-wrap::after {
width: calc(100% + 120px);
bottom: 2px;
}
}
@media (max-width: 1199px) {
.tp-testimonial-slide .author-info-wrap::after {
width: calc(100% + 100px);
}
}
.tp-testimonial-slide .author-img {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tp-testimonial-slide .author-img .icon {
font-size: 32px;
fill: var(--black-2);
width: 70px;
height: 70px;
background: var(--primary);
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;
border-radius: 100px;
}
.author-info.esf {
margin-left: -4px;
}
@media (max-width: 767px) {
.tp-testimonial-slide .author-img .icon {
width: 50px;
height: 50px;
}
}
.tp-testimonial-slide .author-img img {
margin-left: -20px;
}
@media (max-width: 767px) {
.tp-testimonial-slide .author-img img {
width: 50px;
margin-left: -10px;
}
}
.tp-testimonial-slide .name {
font-weight: 500;
font-size: 28px;
line-height: 1.3;
letter-spacing: -0.8px;
color: var(--black-2);
}
@media (max-width: 1199px) {
.tp-testimonial-slide .name {
font-size: 24px;
}
}
@media (max-width: 767px) {
.tp-testimonial-slide .name {
font-size: 20px;
}
}
.tp-testimonial-slide .designation {
font-weight: 500;
font-size: 18px;
line-height: 1.5;
letter-spacing: -0.54px;
color: var(--black-2);
}
@media (max-width: 767px) {
.tp-testimonial-slide .designation {
font-size: 16px;
}
}
.tp-testimonial-slide-2 {
height: 100%;
}
.tp-testimonial-slide-2 .reason {
font-weight: 400;
font-size: 28px;
line-height: 1.5;
letter-spacing: -0.84px;
color: var(--black-2);
margin-bottom: 30px;
}
@media (max-width: 1919px) {
.tp-testimonial-slide-2 .reason {
margin-bottom: 20px;
}
}
@media (max-width: 1199px) {
.tp-testimonial-slide-2 .reason {
font-size: 24px;
}
}
@media (max-width: 991px) {
.tp-testimonial-slide-2 .reason {
font-size: 22px;
margin-bottom: 15px;
}
}
@media (max-width: 767px) {
.tp-testimonial-slide-2 .reason {
font-size: 20px;
margin-bottom: 10px;
}
}
.tp-testimonial-slide-2 p {
font-weight: 400;
font-size: 35px;
line-height: 1.3;
letter-spacing: -1px;
color: var(--black-4);
margin-bottom: 80px;
}
@media (max-width: 1919px) {
.tp-testimonial-slide-2 p {
font-size: 28px;
margin-bottom: 60px;
}
}
@media (max-width: 1399px) {
.tp-testimonial-slide-2 p {
margin-bottom: 40px;
}
}
@media (max-width: 1199px) {
.tp-testimonial-slide-2 p {
font-size: 24px;
margin-bottom: 30px;
}
}
@media (max-width: 991px) {
.tp-testimonial-slide-2 p {
font-size: 20px;
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.tp-testimonial-slide-2 p {
font-size: 20px;
}
}
.tp-testimonial-slide-2 p span {
color: var(--black-2);
font-weight: 500;
}
.tp-testimonial-slide-2 .name {
font-weight: 500;
font-size: 28px;
line-height: 1.3;
letter-spacing: -0.8px;
color: var(--black-2);
}
@media (max-width: 1199px) {
.tp-testimonial-slide-2 .name {
font-size: 24px;
}
}
@media (max-width: 991px) {
.tp-testimonial-slide-2 .name {
font-size: 22px;
}
}
@media (max-width: 767px) {
.tp-testimonial-slide-2 .name {
font-size: 20px;
}
}
.tp-testimonial-slide-2 .designation {
font-weight: 500;
font-size: 18px;
line-height: 1.5;
letter-spacing: -0.54px;
font-family: var(--font-mono);
color: var(--black-2);
}
@media (max-width: 991px) {
.tp-testimonial-slide-2 .designation {
font-size: 16px;
}
}
.tp-testimonial-slide-2 .author-info-wrap {
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;
}
.tp-testimonial-slide-2 .quote {
font-size: 70px;
fill: #D9D9D9;
color: #D9D9D9;
line-height: 0;
}
.tp-testimonial-slide-3 {
height: 100%;
background: var(--white-5);
border-radius: 20px;
padding: 50px 40px;
display: -ms-grid;
display: grid;
}
@media (max-width: 991px) {
.tp-testimonial-slide-3 {
padding: 35px 30px;
}
}
@media (max-width: 767px) {
.tp-testimonial-slide-3 {
padding: 30px 15px;
}
}
.tp-testimonial-slide-3 p {
font-weight: 400;
font-size: 28px;
line-height: 1.3;
letter-spacing: -0.85px;
color: var(--black-4);
margin-top: 40px;
margin-bottom: 50px;
}
@media (max-width: 1399px) {
.tp-testimonial-slide-3 p {
font-size: 24px;
}
}
@media (max-width: 991px) {
.tp-testimonial-slide-3 p {
font-size: 20px;
margin-top: 30px;
margin-bottom: 40px;
}
}
.tp-testimonial-slide-3 p span {
font-weight: 500;
}
.tp-testimonial-slide-3 .author-wrap {
gap: 25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: auto;
}
@media (max-width: 991px) {
.tp-testimonial-slide-3 .author-wrap {
gap: 15px;
}
}
@media (max-width: 1199px) {
.tp-testimonial-slide-3 .author-img img {
width: 60px;
}
}
@media (max-width: 767px) {
.tp-testimonial-slide-3 .author-img img {
width: 50px;
}
}
.tp-testimonial-slide-3 .name {
font-weight: 500;
font-size: 28px;
line-height: 1.3;
letter-spacing: -0.85px;
color: var(--black-2);
margin-bottom: 5px;
}
@media (max-width: 1399px) {
.tp-testimonial-slide-3 .name {
font-size: 24px;
}
}
@media (max-width: 1199px) {
.tp-testimonial-slide-3 .name {
font-size: 22px;
}
}
@media (max-width: 991px) {
.tp-testimonial-slide-3 .name {
font-size: 20px;
letter-spacing: 0;
}
}
@media (max-width: 767px) {
.tp-testimonial-slide-3 .name {
font-size: 18px;
margin-bottom: 3px;
}
}
.tp-testimonial-slide-3 .designation {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.2;
color: var(--black-4);
}
@media (max-width: 1399px) {
.tp-testimonial-slide-3 .designation {
font-size: 16px;
}
}
.tp-testimonial-slide-4 {
-webkit-box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
background-color: var(--white);
border-radius: 20px;
padding: 60px;
}
@media (max-width: 991px) {
.tp-testimonial-slide-4 {
padding: 40px;
}
}
@media (max-width: 767px) {
.tp-testimonial-slide-4 {
padding: 40px 20px;
}
}
.tp-testimonial-slide-4 svg {
width: 1em;
height: 1em;
}
.tp-testimonial-slide-4 .reason {
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: var(--black-2);
margin-bottom: 30px;
}
@media (max-width: 1919px) {
.tp-testimonial-slide-4 .reason {
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.tp-testimonial-slide-4 .reason {
font-size: 16px;
}
}
.tp-testimonial-slide-4 p {
font-weight: 400;
font-size: 28px;
line-height: 1.3;
color: var(--black-2);
margin-bottom: 70px;
}
@media (max-width: 1399px) {
.tp-testimonial-slide-4 p {
font-size: 24px;
margin-bottom: 60px;
}
}
@media (max-width: 1199px) {
.tp-testimonial-slide-4 p {
font-size: 22px;
margin-bottom: 50px;
}
}
@media (max-width: 991px) {
.tp-testimonial-slide-4 p {
font-size: 20px;
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-testimonial-slide-4 p {
font-size: 18px;
}
}
.tp-testimonial-slide-4 p span {
color: var(--black-2);
font-weight: 500;
}
.tp-testimonial-slide-4 .author-info-wrap {
gap: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.tp-testimonial-slide-4 .author-img img {
max-width: 70px;
}
@media (max-width: 767px) {
.tp-testimonial-slide-4 .author-img img {
width: 50px;
}
}
.tp-testimonial-slide-4 .name {
font-weight: 500;
font-size: 22px;
line-height: 1.3;
color: var(--black-2);
}
@media (max-width: 767px) {
.tp-testimonial-slide-4 .name {
font-size: 20px;
}
}
.tp-testimonial-slide-4 .designation {
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: var(--black-4);
}
@media (max-width: 767px) {
.tp-testimonial-slide-4 .designation {
font-size: 16px;
}
}
.tp-testimonial-dual-slider {
gap: 55px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 340px 55px auto;
grid-template-columns: 340px auto;
border: 1px solid var(--white-3);
padding: 30px;
border-radius: 20px;
}
@media (max-width: 991px) {
.tp-testimonial-dual-slider {
gap: 15px;
padding: 15px;
-ms-grid-columns: 240px 15px auto;
grid-template-columns: 240px auto;
}
}
@media (max-width: 767px) {
.tp-testimonial-dual-slider {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-testimonial-navigation {
gap: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tp-testimonial-navigation .tp-tsm-th-prev,
.tp-testimonial-navigation .tp-tsm-th-next,
.tp-testimonial-navigation .tp-tsm-prev,
.tp-testimonial-navigation .tp-tsm-next {
width: 52px;
height: 52px;
background: var(--white);
fill: var(--black-2);
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;
border-radius: 100px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-testimonial-navigation .tp-tsm-th-prev:hover,
.tp-testimonial-navigation .tp-tsm-th-next:hover,
.tp-testimonial-navigation .tp-tsm-prev:hover,
.tp-testimonial-navigation .tp-tsm-next:hover {
fill: var(--black-2);
color: var(--black-2);
background-color: var(--primary);
}
.tp-testimonial-navigation .tp-tsm-th-prev,
.tp-testimonial-navigation .tp-tsm-th-next {
border: 1px solid var(--white-3);
}
.tp-testimonial-navigation .tp-tsm-th-prev:hover,
.tp-testimonial-navigation .tp-tsm-th-next:hover {
border-color: var(--primary);
}
.tp-testimonial-navigation-4 .tsm4-btn-prev,
.tp-testimonial-navigation-4 .tsm4-btn-next {
-webkit-box-shadow: 0px 4px 80px 0px rgba(2, 2, 2, 0.1019607843);
box-shadow: 0px 4px 80px 0px rgba(2, 2, 2, 0.1019607843);
background: var(--white);
width: 60px;
height: 60px;
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;
border-radius: 100px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 3;
}
@media (max-width: 767px) {
.tp-testimonial-navigation-4 .tsm4-btn-prev,
.tp-testimonial-navigation-4 .tsm4-btn-next {
width: 36px;
height: 36px;
}
}
.tp-testimonial-navigation-4 .tsm4-btn-prev:hover,
.tp-testimonial-navigation-4 .tsm4-btn-next:hover {
background-color: var(--primary);
}
.tp-testimonial-navigation-4 .tsm4-btn-next {
right: 0;
}
.tp-testimonial-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;
position: absolute;
bottom: 20px;
z-index: 1;
width: 100%;
padding: 0 70px;
}
@media (max-width: 1919px) {
.tp-testimonial-footer {
bottom: 0;
padding: 0 50px;
}
}
@media (max-width: 1199px) {
.tp-testimonial-footer {
padding: 0 30px;
}
}
@media (max-width: 991px) {
.tp-testimonial-footer {
bottom: 60px;
}
}
@media (max-width: 767px) {
.tp-testimonial-footer {
padding: 0 20px;
}
}
.tp-testimonial-footer-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;
padding-left: 411px;
margin-top: 33px;
margin-right: -12px;
}
@media (max-width: 991px) {
.tp-testimonial-footer-2 {
padding-left: 0;
margin-top: 25px;
}
}
@media (max-width: 767px) {
.tp-testimonial-footer-2 {
gap: 20px;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.tp-testimonial-footer-3 {
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;
max-width: 850px;
margin: 0 auto;
margin-top: 70px;
}
@media (max-width: 1199px) {
.tp-testimonial-footer-3 {
margin-top: 50px;
}
}
@media (max-width: 767px) {
.tp-testimonial-footer-3 {
gap: 20px;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-top: 30px;
}
}
.tp-testimonial-ratings {
gap: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 1;
}
@media (max-width: 767px) {
.tp-testimonial-ratings {
gap: 10px;
}
}
.tp-testimonial-ratings p {
color: var(--black);
font-weight: 500;
font-size: 16px;
line-height: 1.3;
padding-top: 3px;
}
.tp-testimonial-call {
background-color: var(--white-5);
max-width: 740px;
margin: 0 auto;
border-radius: 100px;
padding: 10px;
font-weight: 400;
font-size: 18px;
line-height: 1.3;
color: var(--black-4);
position: relative;
text-align: center;
}
@media (max-width: 991px) {
.tp-testimonial-call {
font-size: 16px;
}
}
@media (max-width: 767px) {
.tp-testimonial-call {
padding: 20px;
}
.tp-testimonial-call {
background-color: var(--white-5);
max-width: 672px;
margin: 0 auto;
border-radius: 100px;
padding: 12px;
font-weight: 400;
font-size: 18px;
line-height: 1.3;
color: var(--black-4);
position: relative;
text-align: center;
}
.tp-testimonial-call span {
font-size: 15px;
}
}
.tp-testimonial-call span {
color: var(--black-2);
font-size: 15px;
text-transform: uppercase;
background-color: var(--primary);
padding: 6px 13px;
font-weight: 500;
border-radius: 100px;
margin-right: 10px;
display: inline-block;
}
.tp-testimonial-call a {
gap: 8px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
color: var(--black-2);
font-weight: 500;
}
.tp-testimonial-call a svg {
font-size: 14px;
}
.tp-testimonial-call a:hover {
color: var(--green);
}
.tp-testimonial-call-wrap {
position: relative;
margin-top: 120px;
}
@media (max-width: 1199px) {
.tp-testimonial-call-wrap {
margin-top: 100px;
}
}
@media (max-width: 991px) {
.tp-testimonial-call-wrap {
margin-top: 80px;
}
}
.tp-testimonial-call-wrap::before {
position: absolute;
content: "";
width: 300%;
height: 1px;
left: -100%;
bottom: 50%;
background-color: var(--white-3);
}
/*----------------------------------------*/
/* 20. ABOUT CSS START
/*----------------------------------------*/
.tp-about-area {
background-color: var(--white);
overflow: hidden;
position: relative;
}
.tp-about-area .tp-user-box {
max-width: 425px;
padding: 24px;
border: 1px solid var(--white-3);
border-radius: 100px;
background: var(--white);
}
@media (max-width: 767px) {
.tp-about-area .tp-user-box {
padding: 15px;
}
}
.tp-about-wrapper-2 {
gap: 145px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 145px 1.5fr;
grid-template-columns: 1fr 1.5fr;
}
@media (max-width: 1919px) {
.tp-about-wrapper-2 {
gap: 60px;
-ms-grid-columns: 1fr 60px 1.8fr;
grid-template-columns: 1fr 1.8fr;
}
}
@media (max-width: 991px) {
.tp-about-wrapper-2 {
gap: 40px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-about-wrapper-3 {
border-radius: 20px;
background-color: var(--white-5);
}
.tp-about-wrapper-3 .title-wrap {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1.6fr;
grid-template-columns: 1fr 1.6fr;
border-bottom: 1px solid rgba(2, 2, 2, 0.1019607843);
padding: 110px 50px 60px;
}
@media (max-width: 1399px) {
.tp-about-wrapper-3 .title-wrap {
-ms-grid-columns: 1fr 2fr;
grid-template-columns: 1fr 2fr;
padding: 100px 30px 60px;
}
}
@media (max-width: 767px) {
.tp-about-wrapper-3 .title-wrap {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
padding: 40px 15px 30px;
gap: 20px;
}
}
.tp-about-wrapper-3 .sec-title-2 {
max-width: 1030px;
font-weight: 300;
}
@media (max-width: 767px) {
.tp-about-wrapper-3 .sec-title-2 {
font-size: 24px;
}
}
.tp-about-wrapper-3 .sec-title-2 span {
font-weight: 500;
}
.tp-about-wrapper-3 .sub-title-2 {
-ms-flex-item-align: start;
align-self: flex-start;
justify-self: flex-start;
background-color: var(--white);
border: none;
margin-top: 10px;
}
.tp-about-top {
gap: 15px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 15px 1.24fr;
grid-template-columns: 1fr 1.24fr;
border-bottom: 1px solid var(--white-3);
padding-bottom: 80px;
margin-bottom: 64px;
position: relative;
}
@media (max-width: 1199px) {
.tp-about-top {
-ms-grid-columns: 1fr 2fr;
grid-template-columns: 1fr 2fr;
padding-bottom: 60px;
margin-bottom: 50px;
}
}
@media (max-width: 991px) {
.tp-about-top {
padding-bottom: 45px;
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-about-top {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
padding-bottom: 38px;
margin-bottom: 40px;
}
}
.tp-about-top::before {
position: absolute;
content: "";
width: 1000px;
height: 1px;
left: -500px;
background-color: var(--white-3);
bottom: -1px;
}
.tp-about-top::after {
position: absolute;
content: "";
width: 1000px;
height: 1px;
right: -500px;
background-color: var(--white-3);
bottom: -1px;
}
.tp-about-top .sub-title {
justify-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
z-index: 1;
}
.tp-about-bottom {
gap: 15px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 15px 1.24fr;
grid-template-columns: 1fr 1.24fr;
position: relative;
z-index: 1;
}
@media (max-width: 1199px) {
.tp-about-bottom {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-about-bottom .content-wrap {
gap: 140px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 300px 140px auto;
grid-template-columns: 300px auto;
}
@media (max-width: 1919px) {
.tp-about-bottom .content-wrap {
gap: 60px;
}
}
@media (max-width: 991px) {
.tp-about-bottom .content-wrap {
gap: 40px;
}
}
@media (max-width: 767px) {
.tp-about-bottom .content-wrap {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-about-bottom .content h3.text {
font-weight: 500;
font-size: 22px;
line-height: 32px;
letter-spacing: -0.66px;
color: var(--black-5);
}
@media (max-width: 767px) {
.tp-about-bottom .content h3.text {
font-size: 20px;
}
}
.tp-about-bottom .content p {
font-family: var(--font-mono);
font-size: 18px;
line-height: 1.45;
font-weight: 400;
color: var(--black-4);
margin-top: 23px;
margin-bottom: 65px;
}
@media (max-width: 1199px) {
.tp-about-bottom .content p {
margin-bottom: 50px;
}
}
@media (max-width: 767px) {
.tp-about-bottom .content p {
font-size: 16px;
margin-top: 15px;
margin-bottom: 40px;
}
}
.tp-about-bottom .tp-counter-wrapper-2 {
display: block;
}
.tp-about-bottom .tp-counter-wrapper-2 .number {
font-size: 245px;
line-height: 0.85;
letter-spacing: -12px;
}
@media (max-width: 1399px) {
.tp-about-bottom .tp-counter-wrapper-2 .number {
font-size: 200px;
}
}
@media (max-width: 991px) {
.tp-about-bottom .tp-counter-wrapper-2 .number {
font-size: 160px;
letter-spacing: -8px;
}
}
@media (max-width: 767px) {
.tp-about-bottom .tp-counter-wrapper-2 .number {
font-size: 90px;
letter-spacing: -4px;
}
}
.tp-about-bottom .tp-counter-wrapper-2 .number .suffix {
font-size: 60px;
top: 20px;
right: -50px;
}
@media (max-width: 767px) {
.tp-about-bottom .tp-counter-wrapper-2 .number .suffix {
font-size: 48px;
right: -30px;
}
}
.tp-about-bottom .tp-counter-wrapper-2 .text {
color: var(--black-4);
letter-spacing: -0.9px;
margin-top: 10px;
}
.tp-about-bottom .tp-btn-one {
padding: 21px 36px;
border: 1px solid var(--black-2);
}
.tp-about-bottom .tp-user-box {
margin-bottom: 42px;
-ms-flex-item-align: end;
align-self: flex-end;
}
.tp-about-bottom-3 {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1.6fr;
grid-template-columns: 1fr 1.6fr;
padding: 45px 50px 120px;
}
@media (max-width: 1399px) {
.tp-about-bottom-3 {
-ms-grid-columns: 1fr 2fr;
grid-template-columns: 1fr 2fr;
padding: 45px 30px 100px;
}
}
@media (max-width: 1199px) {
.tp-about-bottom-3 {
padding: 45px 30px 80px;
}
}
@media (max-width: 767px) {
.tp-about-bottom-3 {
gap: 25px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
padding: 30px 15px 40px;
}
}
.tp-about-bottom-3 .user-counter-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 150px;
}
@media (max-width: 1399px) {
.tp-about-bottom-3 .user-counter-wrap {
gap: 80px;
}
}
@media (max-width: 1199px) {
.tp-about-bottom-3 .user-counter-wrap {
gap: 30px;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
.tp-about-bottom-3 .tp-counter-wrapper-2 {
margin-bottom: 60px;
}
.tp-about-bottom-3 .tp-counter-wrapper-2 .text {
max-width: 240px;
}
.tp-about-bottom-3 .tp-btn-two {
padding: 20px 36px;
background: transparent;
border: 1px solid var(--black-2);
}
.tp-about-left-2 {
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-image: url(../imgs/about/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
position: relative;
}
.tp-about-left-2 .image-wrap {
position: relative;
}
@media (max-width: 767px) {
.tp-about-left-2 .image-wrap img {
max-width: 300px;
}
}
.tp-about-left-2 .popup-wrapper {
position: absolute;
bottom: 80px;
right: 75px;
height: 60px;
width: 60px;
border-radius: 50%;
background: #fff;
text-align: center;
font-size: 17px;
line-height: 60px;
}
.tp-about-right-2 .customer-wrapper {
gap: 120px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-top: 85px;
padding-bottom: 60px;
border-bottom: 1px solid var(--white-3);
margin-bottom: 50px;
}
@media (max-width: 1919px) {
.tp-about-right-2 .customer-wrapper {
gap: 60px;
}
}
@media (max-width: 1399px) {
.tp-about-right-2 .customer-wrapper {
padding-top: 60px;
padding-bottom: 50px;
margin-bottom: 40px;
}
}
@media (max-width: 1199px) {
.tp-about-right-2 .customer-wrapper {
padding-top: 60px;
padding-bottom: 40px;
margin-bottom: 35px;
-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;
gap: 20px;
}
}
@media (max-width: 991px) {
.tp-about-right-2 .customer-wrapper {
padding-top: 40px;
}
}
.tp-about-right-2 .tp-user-box {
padding: 0;
border: none;
}
.tp-about-right-2 .tp-counter-wrapper-2 {
max-width: 400px;
}
.tp-about-right-2 .tp-testimonial-ratings p {
color: var(--black-2);
}
.tp-about-right-2 .rating-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 70px;
}
@media (max-width: 767px) {
.tp-about-right-2 .rating-wrapper {
gap: 20px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.tp-about-right-2 .actova-btn-secondary {
font-size: 15px;
font-weight: 500;
padding: 19px 38px;
text-transform: uppercase;
}
.tp-about-right-2 .actova-btn-secondary span {
background-color: var(--primary);
}
.tp-about-right-2 .actova-btn-secondary svg {
font-size: 14px;
}
.tp-user-box {
gap: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 767px) {
.tp-user-box {
gap: 15px;
}
}
.tp-user-box p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.5;
letter-spacing: -0.9px;
color: var(--black-4);
}
@media (max-width: 767px) {
.tp-user-box p {
font-size: 16px;
line-height: 1.3;
}
}
.tp-user-box p span {
color: var(--black-5);
font-weight: 700;
}
.tp-user-box .images {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 20px;
}
@media (max-width: 767px) {
.tp-user-box .images {
margin-left: 10px;
}
}
.tp-user-box .images img {
width: 60px;
aspect-ratio: 1;
-o-object-fit: cover;
object-fit: cover;
margin-left: -20px;
border-radius: 100px;
}
@media (max-width: 767px) {
.tp-user-box .images img {
width: 36px;
margin-left: -10px;
}
}
.tp-user-box .text {
-ms-flex-preferred-size: 215px;
flex-basis: 215px;
}
.tp-user-box-2 {
gap: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tp-user-box-2 .images {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tp-user-box-2 .images img {
width: 50px;
height: 50px;
-o-object-fit: cover;
object-fit: cover;
margin-right: -22px;
}
.tp-user-box-2 .total {
display: inline-block;
width: 48px;
height: 48px;
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: var(--primary);
border: 1px solid var(--white);
border-radius: 100px;
color: var(--black-2);
font-weight: 700;
font-size: 16px;
line-height: 1.1;
aspect-ratio: 1;
}
.tp-user-box-2 .text p {
color: var(--black-2);
font-weight: 400;
font-size: 18px;
line-height: 1.2;
}
.tp-user-box-2 .text p span {
font-weight: 700;
}
.tp-about-full-image {
max-width: 1850px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
position: relative;
margin-top: 70px;
}
@media (max-width: 1399px) {
.tp-about-full-image {
margin-top: 40px;
}
}
@media (max-width: 1199px) {
.tp-about-full-image {
margin-top: 20px;
}
}
@media (max-width: 991px) {
.tp-about-full-image {
margin-top: 10px;
}
}
@media (max-width: 767px) {
.tp-about-full-image {
margin-top: 0;
}
}
.tp-about-full-image .content {
gap: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
}
@media (max-width: 1399px) {
.tp-about-full-image .content {
gap: 30px;
}
}
@media (max-width: 767px) {
.tp-about-full-image .content {
gap: 10px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.tp-about-full-image .content img {
width: 410px;
height: 100%;
border-radius: 100px;
}
@media (max-width: 1399px) {
.tp-about-full-image .content img {
width: 320px;
}
}
@media (max-width: 991px) {
.tp-about-full-image .content img {
width: 240px;
}
}
@media (max-width: 767px) {
.tp-about-full-image .content img {
width: 100%;
}
}
.tp-about-full-image .content p {
font-weight: 400;
font-size: 35px;
line-height: 1.2;
color: var(--black);
position: absolute;
}
@media (max-width: 1399px) {
.tp-about-full-image .content p {
font-size: 30px;
}
}
@media (max-width: 1199px) {
.tp-about-full-image .content p {
font-size: 24px;
}
}
@media (max-width: 991px) {
.tp-about-full-image .content p {
font-size: 20px;
}
}
@media (max-width: 767px) {
.tp-about-full-image .content p {
font-size: 18px;
position: static;
}
}
.tp-about-full-image .content .text-left {
left: 30%;
}
@media (max-width: 1919px) {
.tp-about-full-image .content .text-left {
left: 24%;
}
}
@media (max-width: 1399px) {
.tp-about-full-image .content .text-left {
left: 28%;
}
}
@media (max-width: 1199px) {
.tp-about-full-image .content .text-left {
left: 22%;
}
}
.tp-about-full-image .content .text-right {
right: 26%;
}
@media (max-width: 1919px) {
.tp-about-full-image .content .text-right {
right: 20%;
}
}
@media (max-width: 1399px) {
.tp-about-full-image .content .text-right {
right: 24%;
}
}
@media (max-width: 1199px) {
.tp-about-full-image .content .text-right {
right: 17%;
}
}
/*----------------------------------------*/
/* 21. BRAND CSS START
/*----------------------------------------*/
.tp-brand-area .title-wrap {
text-align: center;
margin-bottom: 90px;
}
@media (max-width: 1399px) {
.tp-brand-area .title-wrap {
margin-bottom: 70px;
}
}
@media (max-width: 1199px) {
.tp-brand-area .title-wrap {
margin-bottom: 60px;
}
}
@media (max-width: 991px) {
.tp-brand-area .title-wrap {
margin-bottom: 50px;
}
}
@media (max-width: 767px) {
.tp-brand-area .title-wrap {
margin-bottom: 40px;
}
}
.tp-brand-area .title {
font-weight: 500;
font-size: 22px;
line-height: 1.3;
letter-spacing: -0.66px;
text-align: center;
background-color: var(--white-4);
display: inline-block;
padding: 9px 25px;
border-radius: 100px;
color: var(--black);
}
@media (max-width: 1399px) {
.tp-brand-area .title {
font-size: 20px;
}
}
@media (max-width: 991px) {
.tp-brand-area .title {
font-size: 18px;
}
}
@media (max-width: 767px) {
.tp-brand-area .title {
font-size: 16px;
}
}
.tp-brand-area-2 {
padding-top: 70px;
}
.tp-brand-area-2.style-3 {
border-bottom: 1px solid var(--white-3);
}
.tp-brand-area-4 .title {
font-weight: 500;
font-size: 18px;
line-height: 100%;
text-align: center;
color: var(--black-2);
margin-bottom: 50px;
}
.tp-brand-inner {
overflow: hidden;
}
.tp-brand-inner-2 {
overflow: hidden;
}
.tp-brand-slider {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
will-change: transform;
text-align: center;
}
.tp-brand-slider a {
display: block;
line-height: 0;
height: auto;
width: 16.3vw;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
@media (max-width: 1199px) {
.tp-brand-slider a {
width: 25vw;
}
}
@media (max-width: 991px) {
.tp-brand-slider a {
width: 33.3vw;
}
}
@media (max-width: 767px) {
.tp-brand-slider a {
width: 50vw;
}
}
.tp-brand-logo img {
opacity: 0.5;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-brand-logo img:hover {
opacity: 1;
}
.tp-brand-logo-4 {
padding: 29px 0;
border-radius: 100px;
border: 1px solid var(--white-3);
}
.tp-brand-logo-4 img {
opacity: 0.5;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@media (max-width: 1399px) {
.tp-brand-logo-4 img {
max-width: 150px;
}
}
@media (max-width: 767px) {
.tp-brand-logo-4 img {
max-width: 130px;
}
}
.tp-brand-logo-4 img:hover {
opacity: 1;
}
.tp-faster-inner {
position: relative;
}
.tp-faster-inner .img-anim {
height: 680px;
border-radius: 20px;
}
@media (max-width: 1199px) {
.tp-faster-inner .img-anim {
height: 480px;
}
}
@media (max-width: 767px) {
.tp-faster-inner .img-anim {
height: 360px;
}
}
.tp-faster-inner .faster-img {
border-radius: 20px;
position: relative;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 1199px) {
.tp-faster-inner .faster-img {
height: 100%;
}
}
@media only screen and (max-width: 549px) {
.tp-faster-area.esf-pr-50 {
padding-right: unset;
}
.tp-faster-area.esf-pl-50 {
padding-left: unset;
}
.tp-about-left-2 .popup-wrapper {
position: absolute;
bottom: 56px;
right: 50px;
height: 60px;
width: 60px;
border-radius: 50%;
background: #fff;
text-align: center;
font-size: 17px;
line-height: 60px;
}
.tp-project-card-2.full-width .content {
position: absolute;
left: 0;
bottom: 0;
margin-bottom: 100px;
margin-left: 30px !important;
z-index: 1;
}
.tp-watch-video-area .popup-wrapper {
position: absolute;
bottom: -4px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 1;
background: #fff;
padding: 12px 22px;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.tp-watch-video-area .tp-video-popup {
font-size: 15px;
}
}
.tp-faster-box {
position: absolute;
left: 50px;
top: 50px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1490196078);
border-radius: 20px;
backdrop-filter: blur(144px);
padding: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 30px;
width: 510px;
}
@media (max-width: 991px) {
.tp-faster-box {
gap: 20px;
left: 15px;
top: 15px;
}
}
@media (max-width: 767px) {
.tp-faster-box {
width: 320px;
top: unset;
bottom: 15px;
padding: 15px;
}
}
.tp-faster-box .box-icon {
width: 110px;
-ms-flex-preferred-size: 110px;
flex-basis: 110px;
aspect-ratio: 1;
background-color: var(--primary);
border-radius: 10px;
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;
}
@media (max-width: 767px) {
.tp-faster-box .box-icon {
-ms-flex-preferred-size: 70px;
flex-basis: 70px;
}
.tp-faster-box .box-icon img {
width: 50px;
}
}
.tp-faster-box .box-content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.tp-faster-box .title {
font-weight: 700;
font-size: 28px;
line-height: 1.28;
letter-spacing: -0.84px;
color: var(--white);
margin-bottom: 10px;
}
@media (max-width: 1199px) {
.tp-faster-box .title {
font-size: 24px;
}
}
@media (max-width: 767px) {
.tp-faster-box .title {
font-size: 18px;
margin-bottom: 2px;
}
}
.tp-faster-box p {
font-weight: 400;
font-size: 18px;
line-height: 1.45;
color: var(--white);
}
@media (max-width: 991px) {
.tp-faster-box p {
font-size: 16px;
}
}
@media (max-width: 767px) {
.tp-faster-box p {
font-size: 14px;
}
}
.tp-faster-box-2 {
position: absolute;
right: 30px;
bottom: 30px;
background: var(--white);
border-radius: 15px;
padding: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 40px;
width: 450px;
}
@media (max-width: 767px) {
.tp-faster-box-2 {
width: calc(100% - 30px);
gap: 15px;
right: 15px;
bottom: 15px;
}
}
.tp-faster-box-2 .box-icon {
width: 145px;
-ms-flex-preferred-size: 145px;
flex-basis: 145px;
border-radius: 10px;
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;
}
@media (max-width: 767px) {
.tp-faster-box-2 .box-icon {
width: 90px;
-ms-flex-preferred-size: 90px;
flex-basis: 90px;
}
}
@media (max-width: 767px) {
.tp-faster-box-2 .box-icon img {
width: 90px;
}
}
.tp-faster-box-2 .box-content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.tp-faster-box-2 .title {
font-weight: 500;
font-size: 50px;
line-height: 1;
background: -webkit-gradient(linear, left top, right top, from(var(--primary)), color-stop(50%, #0728e4));
background: linear-gradient(90deg, var(--primary) 0%, #0728e4 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
@media (max-width: 1199px) {
.tp-faster-box-2 .title {
font-size: 40px;
margin-bottom: 5px;
}
}
@media (max-width: 767px) {
.tp-faster-box-2 .title {
font-size: 36px;
}
}
.tp-faster-box-2 p {
font-weight: 400;
font-size: 16px;
line-height: 1.45;
color: var(--black-4);
font-family: var(--font-mono);
}
@media (max-width: 767px) {
.tp-faster-box-2 p {
font-size: 16px;
}
}
.tp-faster-inner-2 {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1fr;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 767px) {
.tp-faster-inner-2 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-industry-expart-card {
position: relative;
border-radius: 15px;
overflow: hidden;
grid-column: 1/-1;
}
@media (max-width: 991px) {
.tp-industry-expart-card .faster-img {
height: 360px;
-o-object-fit: cover;
object-fit: cover;
}
}
@media (max-width: 767px) {
.tp-industry-expart-card .faster-img {
height: 300px;
-o-object-fit: cover;
object-fit: cover;
}
}
.tp-2x-faster-card {
background-color: var(--primary);
border-radius: 20px;
padding: 60px;
position: relative;
}
@media (max-width: 991px) {
.tp-2x-faster-card {
padding: 30px;
}
}
.tp-2x-faster-card .bg-img {
position: absolute;
right: 0;
bottom: 0;
max-width: 366px;
}
@media (max-width: 1199px) {
.tp-2x-faster-card .bg-img {
max-width: 230px;
}
}
.tp-2x-faster-card .title {
font-weight: 500;
font-size: 35px;
line-height: 1.28;
max-width: 500px;
margin-bottom: 25px;
position: relative;
z-index: 1;
}
@media (max-width: 1399px) {
.tp-2x-faster-card .title {
font-size: 30px;
}
}
@media (max-width: 1199px) {
.tp-2x-faster-card .title {
font-size: 25px;
}
}
@media (max-width: 991px) {
.tp-2x-faster-card .title {
font-size: 24px;
}
}
.tp-2x-faster-card ul {
gap: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-bottom: 1px solid rgba(2, 2, 2, 0.1490196078);
margin-bottom: 30px;
padding-bottom: 100px;
position: relative;
z-index: 1;
}
@media (max-width: 991px) {
.tp-2x-faster-card ul {
padding-bottom: 60px;
margin-bottom: 20px;
}
}
.tp-2x-faster-card ul li {
font-weight: 500;
font-size: 18px;
line-height: 1;
color: var(--black-2);
background-color: var(--white);
border-radius: 100px;
padding: 9px 15px;
}
@media (max-width: 991px) {
.tp-2x-faster-card ul li {
font-size: 14px;
}
}
.tp-2x-faster-card .text-wrap {
gap: 35px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 1;
}
@media (max-width: 767px) {
.tp-2x-faster-card .text-wrap {
gap: 20px;
}
}
.tp-2x-faster-card .text-wrap p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: var(--black-2);
max-width: 280px;
}
.tp-2x-faster-card .text {
font-weight: 500;
font-size: 70px;
line-height: 0.8;
color: var(--black-2);
}
@media (max-width: 1199px) {
.tp-2x-faster-card .text {
font-size: 60px;
}
}
@media (max-width: 991px) {
.tp-2x-faster-card .text {
font-size: 50px;
}
}
@media (max-width: 767px) {
.tp-2x-faster-card .text {
font-size: 40px;
}
}
.tp-faster-review-card {
background-color: #627ab6;
border-radius: 20px;
padding: 65px 50px;
position: relative;
}
@media (max-width: 991px) {
.tp-faster-review-card {
padding: 30px;
}
}
.tp-faster-review-card .bg-img {
position: absolute;
right: 0;
bottom: 0;
}
.tp-faster-review-card .number {
font-weight: 500;
font-size: 70px;
line-height: 1;
color: var(--white);
margin-bottom: 25px;
}
@media (max-width: 1399px) {
.tp-faster-review-card .number {
font-size: 60px;
}
}
@media (max-width: 991px) {
.tp-faster-review-card .number {
font-size: 50px;
}
}
@media (max-width: 767px) {
.tp-faster-review-card .number {
font-size: 40px;
margin-bottom: 10px;
}
}
.tp-faster-review-card .text {
font-weight: 500;
font-size: 28px;
line-height: 1.4;
color: var(--white);
max-width: 470px;
margin-bottom: 90px;
position: relative;
z-index: 1;
}
@media (max-width: 1399px) {
.tp-faster-review-card .text {
font-size: 24px;
margin-bottom: 65px;
}
}
@media (max-width: 1199px) {
.tp-faster-review-card .text {
font-size: 24px;
}
}
@media (max-width: 991px) {
.tp-faster-review-card .text {
font-size: 20px;
margin-bottom: 60px;
}
}
@media (max-width: 767px) {
.tp-faster-review-card .text {
font-size: 18px;
margin-bottom: 30px;
}
}
.tp-faster-review-card .tp-testimonial-ratings p {
color: var(--white);
}
/*----------------------------------------*/
/* 22. TEAM CSS START
/*----------------------------------------*/
.tp-team-area .title-wrap {
gap: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border-bottom: 1px solid var(--white-3);
padding-bottom: 75px;
margin-bottom: 70px;
}
@media (max-width: 1199px) {
.tp-team-area .title-wrap {
padding-bottom: 60px;
margin-bottom: 50px;
}
}
@media (max-width: 767px) {
.tp-team-area .title-wrap {
gap: 20px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-bottom: 40px;
margin-bottom: 40px;
}
}
.tp-team-area .sec-title {
-ms-flex-preferred-size: 980px;
flex-basis: 980px;
}
@media (max-width: 1199px) {
.tp-team-area .sec-title {
-ms-flex-preferred-size: 740px;
flex-basis: 740px;
}
}
@media (max-width: 991px) {
.tp-team-area .sec-title {
-ms-flex-preferred-size: 600px;
flex-basis: 600px;
}
}
@media (max-width: 767px) {
.tp-team-area .sec-title {
-ms-flex-preferred-size: unset;
flex-basis: unset;
}
}
.tp-team-area .sub-title {
margin-left: 50px;
}
@media (max-width: 1199px) {
.tp-team-area .sub-title {
margin-left: 0;
}
}
.tp-team-grid {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1199px) {
.tp-team-grid {
gap: 15px;
}
}
@media (max-width: 991px) {
.tp-team-grid {
gap: 30px 20px;
-ms-grid-columns: 1fr 20px 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.tp-team-grid {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-team-card .title {
font-weight: 700;
font-size: 23px;
line-height: 1;
letter-spacing: -0.66px;
color: var(--black);
margin-top: 25px;
margin-bottom: 10px;
}
@media (max-width: 1199px) {
.tp-team-card .title {
font-size: 20px;
margin-top: 15px;
}
}
.tp-team-card p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1;
color: var(--black-4);
}
@media (max-width: 1399px) {
.tp-team-card p {
font-size: 15px;
}
}
@media (max-width: 1199px) {
.tp-team-card p {
font-size: 14px;
}
}
.tp-team-card .image {
position: relative;
}
.tp-team-card .image:hover .social-media {
opacity: 1;
visibility: visible;
padding-bottom: 30px;
}
.tp-team-card .image img {
border-radius: 20px;
}
.tp-team-card .social-media {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding-bottom: 20px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-team-card .social-media li a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
width: 40px;
height: 40px;
background: var(--white);
border-radius: 100px;
color: var(--black-2);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tp-team-card .social-media li a:hover {
background-color: var(--primary);
}
.tp-team-page-area .tp-team-grid {
gap: 70px 30px;
text-align: center;
}
@media (max-width: 1399px) {
.tp-team-page-area .tp-team-grid {
gap: 50px 20px;
}
}
.tp-team-page-area .join-team {
text-align: center;
margin-top: 70px;
}
@media (max-width: 1399px) {
.tp-team-page-area .join-team {
margin-top: 60px;
}
}
@media (max-width: 1199px) {
.tp-team-page-area .join-team {
margin-top: 50px;
}
}
@media (max-width: 991px) {
.tp-team-page-area .join-team {
margin-top: 40px;
}
}
@media (max-width: 767px) {
.tp-team-page-area .join-team {
margin-top: 30px;
}
}
.tp-team-page-area .join-team p {
font-weight: 500;
font-size: 18px;
line-height: 1.3;
fill: var(--black-2);
color: var(--black-2);
background: var(--white-4);
padding: 20px 30px;
border-radius: 100px;
display: inline-block;
}
@media (max-width: 991px) {
.tp-team-page-area .join-team p {
font-size: 16px;
padding: 15px 25px;
}
}
.tp-team-page-area .join-team a {
gap: 7px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 30px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@media (max-width: 767px) {
.tp-team-page-area .join-team a {
margin-left: 15px;
}
}
.tp-team-page-area .join-team a:hover {
fill: var(--black-4);
color: var(--black-4);
}
.tp-team-details .name {
color: var(--black-2);
font-weight: 700;
font-size: 35px;
line-height: 1.2;
}
@media (max-width: 1399px) {
.tp-team-details .name {
font-size: 32px;
}
}
@media (max-width: 1199px) {
.tp-team-details .name {
font-size: 28px;
}
}
@media (max-width: 991px) {
.tp-team-details .name {
font-size: 24px;
}
}
@media (max-width: 767px) {
.tp-team-details .name {
font-size: 20px;
}
}
.tp-team-details .designation {
font-weight: 400;
font-size: 22px;
line-height: 1.3;
color: var(--black-4);
margin-top: 15px;
margin-bottom: 30px;
}
@media (max-width: 1199px) {
.tp-team-details .designation {
font-size: 20px;
margin-top: 10px;
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.tp-team-details .designation {
font-size: 18px;
margin-bottom: 15px;
}
}
.tp-team-details p {
color: var(--black-4);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
padding-bottom: 20px;
font-family: var(--font-mono);
}
@media (max-width: 1199px) {
.tp-team-details p {
font-size: 16px;
padding-bottom: 15px;
}
}
.tp-team-details svg {
width: 1em;
height: 1em;
}
.tp-team-details .quote {
font-weight: 500;
color: var(--black-2);
font-family: var(--font-grotesk);
}
.tp-team-details .title {
font-weight: 500;
font-size: 22px;
line-height: 1.3;
color: var(--black-2);
margin-top: 35px;
margin-bottom: 25px;
}
@media (max-width: 1399px) {
.tp-team-details .title {
margin-top: 20px;
}
}
@media (max-width: 1199px) {
.tp-team-details .title {
font-size: 20px;
margin-bottom: 18px;
}
}
@media (max-width: 767px) {
.tp-team-details .title {
font-size: 18px;
}
}
.tp-team-details .skills-list {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1fr;
grid-template-columns: 1fr 1fr;
padding-bottom: 20px;
}
@media (max-width: 1399px) {
.tp-team-details .skills-list {
gap: 20px;
}
}
@media (max-width: 1199px) {
.tp-team-details .skills-list {
gap: 15px;
}
}
@media (max-width: 767px) {
.tp-team-details .skills-list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-team-details .skills-list li .icon {
fill: var(--gray);
padding-top: 3px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-team-details .skills-list li a {
font-weight: 500;
font-size: 18px;
line-height: 1.45;
color: var(--black-2);
border: 1px solid var(--white-3);
border-radius: 10px;
padding: 22px 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@media (max-width: 1199px) {
.tp-team-details .skills-list li a {
font-size: 16px;
padding: 20px;
}
}
.tp-team-details .skills-list li a:hover {
background-color: var(--primary);
border-color: var(--primary);
}
.tp-team-details .skills-list li a:hover .icon {
fill: var(--black-2);
}
.tp-team-details .tp-social-media a {
width: 36px;
height: 36px;
color: var(--black-2);
background-color: transparent;
border: 1px solid var(--white-3);
}
.tp-team-details .tp-social-media a:hover {
border-color: var(--primary);
}
.tp-team-details .tp-list {
padding-bottom: 30px;
}
@media (max-width: 767px) {
.tp-team-details .tp-list {
padding-bottom: 15px;
}
}
.tp-team-details-inner {
gap: 145px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 145px 1.2fr;
grid-template-columns: 1fr 1.2fr;
}
@media (max-width: 1399px) {
.tp-team-details-inner {
gap: 50px;
}
}
@media (max-width: 1199px) {
.tp-team-details-inner {
gap: 30px;
}
}
@media (max-width: 991px) {
.tp-team-details-inner {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-list {
gap: 30px;
display: -ms-grid;
display: grid;
}
@media (max-width: 1199px) {
.tp-list {
gap: 15px;
}
}
.tp-list li {
gap: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: var(--black-4);
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.3;
}
@media (max-width: 1199px) {
.tp-list li {
font-size: 16px;
}
}
.tp-list li span {
font-size: 22px;
line-height: 0;
}
.tp-ap-team-title-wrap {
text-align: center;
margin-bottom: 50px;
}
/*----------------------------------------*/
/* 23. PROJECT CSS START
/*----------------------------------------*/
.tp-project-area .title-wrap {
text-align: center;
margin-bottom: 70px;
}
@media (max-width: 991px) {
.tp-project-area .title-wrap {
margin-bottom: 50px;
}
}
@media (max-width: 767px) {
.tp-project-area .title-wrap {
margin-bottom: 40px;
}
}
.tp-project-area .sec-title-2 {
margin-top: 10px;
}
.tp-project-area p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.3;
color: var(--black-4);
max-width: 740px;
margin: 0 auto;
margin-top: 20px;
}
@media (max-width: 767px) {
.tp-project-area p {
font-size: 16px;
}
}
.tp-project-area .project-btn {
text-align: center;
}
.tp-project-area .tp-btn-one {
background-color: var(--white-4);
padding: 19px 38px;
}
.tp-project-area.project-page {
border-bottom: 1px solid var(--white-3);
padding-bottom: 50px;
}
@media (max-width: 1399px) {
.tp-project-area.project-page {
padding-bottom: 20px;
}
}
.tp-project-area-2 .text-wrap,
.tp-project-area-2 .title-wrap {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1.24fr;
grid-template-columns: 1fr 1.24fr;
}
@media (max-width: 767px) {
.tp-project-area-2 .text-wrap,
.tp-project-area-2 .title-wrap {
gap: 20px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-project-area-2 .title-wrap {
padding-bottom: 60px;
margin-bottom: 30px;
position: relative;
}
@media (max-width: 1199px) {
.tp-project-area-2 .title-wrap {
padding-bottom: 45px;
}
}
@media (max-width: 767px) {
.tp-project-area-2 .title-wrap {
padding-bottom: 30px;
}
}
.tp-project-area-2 .title-wrap::after {
position: absolute;
content: "";
width: 150%;
height: 1px;
background-color: var(--white-3);
left: -25%;
bottom: 0;
}
.tp-project-area-2 .text-wrap {
margin-bottom: 120px;
}
@media (max-width: 1399px) {
.tp-project-area-2 .text-wrap {
margin-bottom: 100px;
}
}
@media (max-width: 1199px) {
.tp-project-area-2 .text-wrap {
margin-bottom: 80px;
}
}
@media (max-width: 767px) {
.tp-project-area-2 .text-wrap {
margin-bottom: 50px;
}
}
.tp-project-area-2 .text-wrap p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: var(--black-4);
}
@media (max-width: 767px) {
.tp-project-area-2 .text-wrap p {
font-size: 16px;
}
}
.tp-project-area-2 .text-wrap a {
font-weight: 500;
font-size: 18px;
line-height: 1;
color: var(--black-2);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
margin-top: 35px;
}
@media (max-width: 767px) {
.tp-project-area-2 .text-wrap a {
margin-top: 25px;
font-size: 16px;
}
}
.tp-project-area-2 .text-wrap a:hover {
fill: var(--green);
color: var(--green);
}
.tp-project-area-2 .text-wrap a svg {
font-size: 14px;
}
.tp-project-area-2 .sub-title-2 {
-ms-flex-item-align: start;
align-self: flex-start;
justify-self: flex-start;
}
.tp-project-area-2 .text {
max-width: 240px;
}
.tp-project-area-2 .tp-counter-wrapper-2 {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
@media (max-width: 991px) {
.tp-project-area-2 .tp-counter-wrapper-2 {
gap: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.tp-project-area-2 .tp-counter-wrapper-2 .text {
padding-top: 15px;
color: var(--black-2);
}
@media (max-width: 767px) {
.tp-project-area-2 .tp-counter-wrapper-2 .text {
padding-top: 5px;
}
}
@media (max-width: 767px) {
.tp-project-area-3 .pb-110 {
padding-bottom: 40px;
}
}
.tp-project-area-3 .title-wrap {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1.5fr;
grid-template-columns: 1fr 1.5fr;
}
@media (max-width: 767px) {
.tp-project-area-3 .title-wrap {
gap: 20px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-project-area-3 .sub-title-2 {
-ms-flex-item-align: start;
align-self: flex-start;
justify-self: flex-start;
background-color: var(--white-5);
border: none;
}
.tp-project-grid {
display: -ms-grid;
display: grid;
gap: 70px 30px;
-ms-grid-columns: 1fr 30px 1fr;
grid-template-columns: repeat(2, 1fr);
margin-bottom: 100px;
}
@media (max-width: 1199px) {
.tp-project-grid {
gap: 50px 30px;
margin-bottom: 80px;
}
}
@media (max-width: 991px) {
.tp-project-grid {
gap: 40px 15px;
margin-bottom: 60px;
}
}
@media (max-width: 767px) {
.tp-project-grid {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
margin-bottom: 40px;
}
}
.tp-project-grid-2 {
display: -ms-grid;
display: grid;
gap: 70px 30px;
-ms-grid-columns: 1fr 30px 1fr;
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 1399px) {
.tp-project-grid-2 {
gap: 50px 30px;
}
}
@media (max-width: 1199px) {
.tp-project-grid-2 {
gap: 30px;
}
}
@media (max-width: 991px) {
.tp-project-grid-2 {
gap: 20px 15px;
}
}
@media (max-width: 767px) {
.tp-project-grid-2 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-project-grid-3 {
gap: 50px;
display: -ms-grid;
display: grid;
}
@media (max-width: 1199px) {
.tp-project-grid-3 {
gap: 30px;
}
}
@media (max-width: 767px) {
.tp-project-grid-3 {
gap: 15px;
}
}
.tp-project-card .thumb {
position: relative;
border-radius: 20px;
overflow: hidden;
display: block;
}
.tp-project-card .thumb:hover .brand-logo {
opacity: 1;
visibility: visible;
}
.tp-project-card .thumb .brand-logo {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.tp-project-card .thumb img {
height: 645px;
}
@media (max-width: 1919px) {
.tp-project-card .thumb img {
height: 475px;
}
}
@media (max-width: 1399px) {
.tp-project-card .thumb img {
height: 460px;
}
}
@media (max-width: 1199px) {
.tp-project-card .thumb img {
height: 340px;
}
}
@media (max-width: 991px) {
.tp-project-card .thumb img {
height: 263px;
}
}
@media (max-width: 767px) {
.tp-project-card .thumb img {
height: auto;
}
}
.tp-project-card .title {
font-weight: 500;
font-size: 28px;
line-height: 1.3;
letter-spacing: -0.84px;
color: var(--black-2);
margin-bottom: 15px;
margin-top: 28px;
}
@media (max-width: 1399px) {
.tp-project-card .title {
font-size: 24px;
margin-top: 20px;
margin-bottom: 12px;
}
}
@media (max-width: 1199px) {
.tp-project-card .title {
font-size: 22px;
}
}
@media (max-width: 991px) {
.tp-project-card .title {
font-size: 20px;
margin-top: 15px;
}
}
.tp-project-card .project-category {
gap: 10px;
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;
}
.tp-project-card .project-category a {
font-family: var(--font-mono);
border: 1px solid var(--white-3);
border-radius: 100px;
display: inline-block;
padding: 3px 15px;
font-size: 16px;
}
@media (max-width: 991px) {
.tp-project-card .project-category a {
padding: 3px 18px;
font-size: 14px;
}
}
.tp-project-card-2 {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-project-card-2:hover .title a {
background-size: 100% 100%;
}
.tp-project-card-2 .thumb {
position: relative;
border-radius: 20px;
overflow: hidden;
z-index: 1;
}
.tp-project-card-2 .title {
font-weight: 500;
font-size: 35px;
line-height: 1.3;
letter-spacing: -1px;
margin-bottom: 12px;
color: var(--black-2);
margin-top: 30px;
font-family: var(--font-mono);
}
@media (max-width: 1399px) {
.tp-project-card-2 .title {
font-size: 30px;
margin-top: 20px;
}
}
@media (max-width: 1199px) {
.tp-project-card-2 .title {
font-size: 28px;
margin-top: 15px;
}
}
@media (max-width: 991px) {
.tp-project-card-2 .title {
font-size: 24px;
margin-top: 12px;
}
}
.tp-project-card-2 .title a {
background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
background-repeat: no-repeat;
background-size: 0% 100%;
-webkit-transition: background-size 1s;
transition: background-size 1s;
}
.tp-project-card-2 .project-category {
gap: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tp-project-card-2 .project-category a {
color: var(--black-2);
font-size: 16px;
font-weight: 400;
border: 1px solid var(--white-3);
border-radius: 100px;
display: inline-block;
padding: 3px 29px;
}
@media (max-width: 991px) {
.tp-project-card-2 .project-category a {
padding: 3px 22px;
}
}
.tp-project-card-2 .project-category a:hover {
color: var(--white);
background-color: var(--black-2);
}
.tp-project-card-2.full-width {
grid-column: 1/-1;
position: relative;
border-radius: 20px;
}
.tp-project-card-2.full-width::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 0;
border-radius: 20px;
}
.tp-project-card-2.full-width .thumb {
border-radius: 20px;
}
@media (max-width: 767px) {
.tp-project-card-2.full-width .thumb img {
height: 360px;
-o-object-fit: cover;
object-fit: cover;
}
}
.tp-project-card-2.full-width .content {
position: absolute;
left: 0;
bottom: 0;
margin-bottom: 100px;
margin-left: 50px;
z-index: 1;
}
@media (max-width: 1919px) {
.tp-project-card-2.full-width .content {
margin-bottom: 50px;
}
}
@media (max-width: 1199px) {
.tp-project-card-2.full-width .content {
margin-bottom: 25px;
}
}
@media (max-width: 767px) {
.tp-project-card-2.full-width .content {
margin-bottom: 15px;
}
}
.tp-project-card-2.full-width .title {
color: var(--white);
margin-top: 0;
}
.tp-project-card-2.full-width .project-category a {
color: var(--white);
border-color: rgba(255, 255, 255, 0.1490196078);
}
.tp-project-card-2.full-width .project-category a:hover {
color: var(--black-2);
background-color: var(--white);
}
.tp-project-card-3 {
overflow: hidden;
border-radius: 20px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
position: relative;
}
.tp-project-card-3:hover .title a {
background-size: 100% 100%;
}
.tp-project-card-3::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0)), to(var(--black)));
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, var(--black) 100%);
z-index: 0;
}
@media (max-width: 991px) {
.tp-project-card-3 .thumb img {
height: 360px;
-o-object-fit: cover;
object-fit: cover;
}
}
@media (max-width: 767px) {
.tp-project-card-3 .thumb img {
height: 300px;
-o-object-fit: cover;
object-fit: cover;
}
}
.tp-project-card-3 .content {
position: absolute;
left: 0;
bottom: 0;
margin-bottom: 40px;
margin-left: 40px;
z-index: 1;
}
@media (max-width: 1399px) {
.tp-project-card-3 .content {
margin-bottom: 30px;
margin-left: 30px;
}
}
@media (max-width: 767px) {
.tp-project-card-3 .content {
margin-bottom: 15px;
margin-left: 15px;
}
}
.tp-project-card-3 .title {
font-weight: 500;
font-size: 35px;
line-height: 1.3;
letter-spacing: -1px;
margin-bottom: 10px;
color: var(--white);
margin-top: 30px;
font-family: var(--font-mono);
}
@media (max-width: 1399px) {
.tp-project-card-3 .title {
font-size: 30px;
margin-top: 25px;
}
}
@media (max-width: 1199px) {
.tp-project-card-3 .title {
font-size: 28px;
margin-top: 20px;
}
}
@media (max-width: 991px) {
.tp-project-card-3 .title {
font-size: 24px;
margin-top: 15px;
}
}
.tp-project-card-3 .title a {
background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
background-repeat: no-repeat;
background-size: 0% 100%;
-webkit-transition: background-size 1s;
transition: background-size 1s;
}
.tp-project-card-3 .project-category {
gap: 10px;
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;
}
.tp-project-card-3 .project-category a {
color: var(--white);
font-size: 16px;
font-weight: 400;
background-color: rgba(2, 2, 2, 0.3490196078);
font-family: var(--font-mono);
border-radius: 100px;
display: inline-block;
padding: 3px 18px;
}
.tp-project-card-3 .project-category a:hover {
color: var(--black-2);
background-color: var(--white);
}
.tp-project-overview-header {
text-align: center;
}
.tp-project-overview-header .sec-title-3 {
max-width: 1010px;
margin: 0 auto;
margin-top: 30px;
padding-bottom: 20px;
}
@media (max-width: 767px) {
.tp-project-overview-header .sec-title-3 {
margin-top: 20px;
}
}
.tp-project-overview-header p {
font-size: 22px;
line-height: 1.5;
color: var(--black-4);
max-width: 850px;
margin: 0 auto;
font-family: var(--font-mono);
}
@media (max-width: 1399px) {
.tp-project-overview-header p {
font-size: 20px;
}
}
@media (max-width: 991px) {
.tp-project-overview-header p {
font-size: 18px;
}
}
@media (max-width: 767px) {
.tp-project-overview-header p {
font-size: 16px;
}
}
.tp-project-overview-meta {
border-top: 1px solid var(--white-3);
border-bottom: 1px solid var(--white-3);
margin-top: 60px;
margin-bottom: 60px;
}
@media (max-width: 991px) {
.tp-project-overview-meta {
margin-top: 40px;
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-project-overview-meta {
margin-top: 30px;
margin-bottom: 30px;
}
}
.tp-project-overview-meta .meta-list {
gap: 20px;
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;
}
@media (max-width: 767px) {
.tp-project-overview-meta .meta-list {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-top: 15px;
padding-bottom: 15px;
}
}
.tp-project-overview-meta .meta-item {
gap: 20px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 40px 20px 1fr;
grid-template-columns: 40px 1fr;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
padding-top: 30px;
padding-bottom: 30px;
}
@media (max-width: 991px) {
.tp-project-overview-meta .meta-item {
gap: 10px;
-ms-grid-columns: 30px 10px 1fr;
grid-template-columns: 30px 1fr;
}
}
@media (max-width: 767px) {
.tp-project-overview-meta .meta-item {
padding: 0;
}
}
.tp-project-overview-meta .meta-item:not(:last-child):after {
position: absolute;
content: "";
width: 1px;
height: 100%;
right: -50%;
top: 0;
background-color: var(--white-3);
}
@media (max-width: 767px) {
.tp-project-overview-meta .meta-item:not(:last-child):after {
display: none;
}
}
.tp-project-overview-meta .meta-info p {
color: var(--black-4);
font-size: 18px;
}
@media (max-width: 1399px) {
.tp-project-overview-meta .meta-info p {
font-size: 16px;
}
}
@media (max-width: 991px) {
.tp-project-overview-meta .meta-info p {
font-size: 15px;
}
}
.tp-project-overview-meta .meta-info .title {
font-weight: 500;
font-size: 22px;
line-height: 1.3;
color: var(--black);
}
@media (max-width: 1399px) {
.tp-project-overview-meta .meta-info .title {
font-size: 20px;
}
}
@media (max-width: 991px) {
.tp-project-overview-meta .meta-info .title {
font-size: 16px;
}
}
.tp-project-overview-footer .challange-part-wrap {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1.5fr;
grid-template-columns: 1fr 1.5fr;
padding-bottom: 70px;
}
@media (max-width: 1199px) {
.tp-project-overview-footer .challange-part-wrap {
padding-bottom: 50px;
}
}
@media (max-width: 991px) {
.tp-project-overview-footer .challange-part-wrap {
gap: 20px;
padding-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-project-overview-footer .challange-part-wrap {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
padding-bottom: 20px;
}
}
.tp-project-overview-footer .challange-img img {
width: 100%;
height: 350px;
border-radius: 20px;
margin-top: 10px;
}
@media (max-width: 767px) {
.tp-project-overview-footer .challange-img img {
height: auto;
}
}
.tp-project-overview-footer .title {
color: var(--black-2);
font-weight: 500;
font-size: 35px;
line-height: 1.2;
margin-bottom: 10px;
}
@media (max-width: 1399px) {
.tp-project-overview-footer .title {
font-size: 30px;
}
}
@media (max-width: 1199px) {
.tp-project-overview-footer .title {
font-size: 28px;
}
}
.tp-project-overview-footer p {
color: var(--black-4);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
padding-bottom: 25px;
}
@media (max-width: 991px) {
.tp-project-overview-footer p {
font-size: 16px;
padding-bottom: 20px;
}
}
.tp-project-overview-footer ul {
gap: 20px;
display: -ms-grid;
display: grid;
}
@media (max-width: 991px) {
.tp-project-overview-footer ul {
gap: 15px;
}
}
.tp-project-overview-footer ul li {
gap: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
font-size: 18px;
line-height: 1.3;
color: var(--black-2);
}
@media (max-width: 991px) {
.tp-project-overview-footer ul li {
font-size: 16px;
}
}
.tp-project-overview-footer .imgs-wrapper {
display: -ms-grid;
display: grid;
gap: 30px;
-ms-grid-columns: 1fr 30px 1fr;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 991px) {
.tp-project-overview-footer .imgs-wrapper {
gap: 20px;
}
}
@media (max-width: 767px) {
.tp-project-overview-footer .imgs-wrapper {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-project-overview-footer .imgs-wrapper img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.tp-project-result p {
font-family: var(--font-mono);
font-size: 18px;
padding-bottom: 20px;
color: var(--black-4);
}
@media (max-width: 991px) {
.tp-project-result p {
font-size: 16px;
}
}
.tp-project-result .sec-title-2 {
padding-bottom: 15px;
}
@media (max-width: 991px) {
.tp-project-result .sec-title-2 {
padding-bottom: 12px;
}
}
.tp-project-result .result-wrapper {
gap: 140px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1.8fr 140px 1fr;
grid-template-columns: 1.8fr 1fr;
padding-top: 40px;
}
@media (max-width: 1399px) {
.tp-project-result .result-wrapper {
gap: 50px;
}
}
@media (max-width: 1199px) {
.tp-project-result .result-wrapper {
gap: 30px;
}
}
@media (max-width: 991px) {
.tp-project-result .result-wrapper {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
padding-top: 20px;
}
}
.tp-project-result .result-box {
display: -ms-grid;
display: grid;
gap: 25px;
-ms-grid-columns: 60px 25px 1fr;
grid-template-columns: 60px 1fr;
}
@media (max-width: 1199px) {
.tp-project-result .result-box {
gap: 15px;
}
}
.tp-project-result .result-box-wrap {
display: -ms-grid;
display: grid;
gap: 60px;
align-self: flex-start;
border: 1px solid var(--white-3);
padding: 50px 40px;
border-radius: 20px;
}
@media (max-width: 1399px) {
.tp-project-result .result-box-wrap {
gap: 40px;
padding: 40px 30px;
}
}
@media (max-width: 1199px) {
.tp-project-result .result-box-wrap {
gap: 30px;
padding: 30px 20px;
}
}
.tp-project-result .number {
font-weight: 500;
font-size: 50px;
line-height: 1.1;
color: var(--black-2);
padding-bottom: 10px;
}
@media (max-width: 1399px) {
.tp-project-result .number {
font-size: 40px;
padding-bottom: 0;
}
}
@media (max-width: 1199px) {
.tp-project-result .number {
font-size: 36px;
}
}
.tp-project-result .suffix {
font-size: 22px;
}
@media (max-width: 1199px) {
.tp-project-result .suffix {
font-size: 18px;
}
}
.tp-project-result .text {
font-size: 18px;
color: var(--black-2);
padding-bottom: 0;
}
@media (max-width: 1199px) {
.tp-project-result .text {
font-size: 16px;
}
}
.tp-project-result-area {
border-bottom: 1px solid var(--white-3);
}
.tp-how-work-area.project-page {
background: var(--primary);
background-image: url(../imgs/project/shape.png);
background-position: top center;
background-repeat: no-repeat;
}
.tp-how-work-area.project-page .tp-how-work-step .step,
.tp-how-work-area.project-page .tp-watch-video {
background: var(--white);
}
.tp-how-work-area.project-page .tp-how-work-steps::after {
background-color: var(--white);
z-index: 0;
}
@media (max-width: 767px) {
.tp-how-work-area.project-page .title-wrap {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-how-work-area.project-page .sec-title-2 {
margin-top: 0;
}
}
.tp-how-work-area .sec-title-2.esf {
font-weight: 300 !important;
}
.tp-how-work-area .sec-title-2.esf span {
font-weight: 500 !important;
}
/*----------------------------------------*/
/* 24. FEATURES CSS START
/*----------------------------------------*/
.tp-feature-area {
background-color: var(--white-5);
}
.tp-feature-area .sec-title-2 {
padding-top: 20px;
padding-bottom: 30px;
}
@media (max-width: 1199px) {
.tp-feature-area .sec-title-2 {
padding-bottom: 20px;
}
}
.tp-feature-area .text-wrap {
position: relative;
padding-bottom: 40px;
margin-bottom: 40px;
}
@media (max-width: 1399px) {
.tp-feature-area .text-wrap {
padding-bottom: 30px;
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.tp-feature-area .text-wrap {
padding-bottom: 20px;
margin-bottom: 20px;
}
}
.tp-feature-area .text-wrap::after {
position: absolute;
content: "";
width: 120%;
height: 1px;
left: 0;
bottom: 0;
background-color: rgba(2, 2, 2, 0.1019607843);
}
.tp-feature-area .text-wrap p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
color: var(--black-4);
}
@media (max-width: 767px) {
.tp-feature-area .text-wrap p {
font-size: 16px;
}
}
.tp-feature-area .actova-btn-secondary {
font-size: 15px;
font-weight: 500;
padding: 19px 38px;
text-transform: uppercase;
background-color: var(--primary);
fill: var(--black-2);
color: var(--black-2);
}
.tp-feature-area .actova-btn-secondary:hover {
fill: var(--white);
color: var(--white);
background-color: transparent;
}
.tp-feature-area .actova-btn-secondary span {
background-color: var(--black-2);
}
.tp-feature-area .actova-btn-secondary svg {
font-size: 14px;
}
.tp-feature-list {
gap: 30px;
display: -ms-grid;
display: grid;
margin-bottom: 50px;
}
@media (max-width: 1919px) {
.tp-feature-list {
gap: 20px;
}
}
@media (max-width: 1199px) {
.tp-feature-list {
gap: 15px;
margin-bottom: 40px;
}
}
.tp-feature-list li {
font-weight: 500;
font-size: 22px;
line-height: 1.3;
color: var(--black-2);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
@media (max-width: 1199px) {
.tp-feature-list li {
font-size: 20px;
}
}
@media (max-width: 991px) {
.tp-feature-list li {
font-size: 18px;
}
}
@media (max-width: 767px) {
.tp-feature-list li {
font-size: 16px;
}
}
.tp-feature-list span {
width: 25px;
height: 25px;
border-radius: 100px;
background-color: var(--white);
font-size: 14px;
font-weight: 700;
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;
}
.tp-feature-inner {
gap: 90px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 90px 1.5fr;
grid-template-columns: 1fr 1.5fr;
}
@media (max-width: 1919px) {
.tp-feature-inner {
gap: 60px;
-ms-grid-columns: 1fr 60px 1.3fr;
grid-template-columns: 1fr 1.3fr;
}
}
@media (max-width: 1199px) {
.tp-feature-inner {
gap: 30px;
-ms-grid-columns: 1fr 30px 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 991px) {
.tp-feature-inner {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-feature-content {
padding-right: 80px;
position: relative;
}
@media (max-width: 1919px) {
.tp-feature-content {
padding-right: 0;
}
}
@media (max-width: 991px) {
.tp-feature-content {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
}
.tp-feature-img {
height: 100%;
border-radius: 30px;
overflow: hidden;
}
.tp-feature-img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.tp-feature2-titlebox {
text-align: center;
margin: 0 auto;
margin-bottom: 65px;
}
@media (max-width: 767px) {
.tp-feature2-titlebox {
margin-bottom: 40px;
}
}
.tp-feature2-titlebox p {
font-size: 18px;
font-family: var(--font-mono);
margin-top: 15px;
color: var(--black-4);
}
@media (max-width: 767px) {
.tp-feature2-titlebox p {
font-size: 16px;
}
}
.tp-feature2-wrapper {
gap: 50px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1.1fr 50px 1fr;
grid-template-columns: 1.1fr 1fr;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: var(--white);
-webkit-box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
border-radius: 20px;
padding: 35px 35px 35px 70px;
}
@media (max-width: 1199px) {
.tp-feature2-wrapper {
gap: 30px;
padding: 30px;
}
}
@media (max-width: 767px) {
.tp-feature2-wrapper {
padding: 30px 15px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-feature2-left .actova-btn-light {
border: 1px solid var(--white-3);
margin-top: 70px;
margin-left: 75px;
padding: 21px 35px;
}
@media (max-width: 767px) {
.tp-feature2-left .actova-btn-light {
margin-top: 40px;
margin-left: 0;
}
}
.tp-feature2-list {
display: -ms-grid;
display: grid;
gap: 70px;
}
@media (max-width: 991px) {
.tp-feature2-list {
gap: 50px;
}
}
.tp-feature2-item {
gap: 25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
position: relative;
}
@media (max-width: 991px) {
.tp-feature2-item {
gap: 10px;
}
}
.tp-feature2-item .line {
position: absolute;
content: "";
width: 1px;
height: 100%;
left: 24px;
top: 60px;
background-color: var(--white-3);
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
@media (max-width: 991px) {
.tp-feature2-item .line {
left: 20px;
top: 45px;
}
}
.tp-feature2-item .line::after,
.tp-feature2-item .line::before {
position: absolute;
content: "";
width: 6px;
height: 6px;
left: 0.5px;
background-color: var(--white-3);
}
.tp-feature2-item .line::before {
top: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.tp-feature2-item .line::after {
bottom: 0;
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.tp-feature2-item .number {
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;
width: 48px;
height: 48px;
border: 1px solid var(--white-3);
border-radius: 100px;
color: var(--gray);
font-weight: 500;
font-size: 18px;
line-height: 1;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@media (max-width: 991px) {
.tp-feature2-item .number {
width: 40px;
height: 40px;
font-size: 16px;
}
}
.tp-feature2-item .title {
font-weight: 500;
font-size: 35px;
line-height: 1.2;
color: var(--gray);
padding-top: 7px;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media (max-width: 1399px) {
.tp-feature2-item .title {
font-size: 30px;
}
}
@media (max-width: 1199px) {
.tp-feature2-item .title {
font-size: 24px;
}
}
@media (max-width: 991px) {
.tp-feature2-item .title {
font-size: 20px;
}
}
.tp-feature2-item .content {
max-width: 570px;
}
.tp-feature2-item .content p {
font-size: 18px;
color: var(--black-4);
font-family: var(--font-mono);
margin-top: 15px;
display: none;
}
@media (max-width: 991px) {
.tp-feature2-item .content p {
font-size: 16px;
}
}
.tp-feature2-item.active .number {
color: var(--black-2);
border-color: var(--primary);
background-color: var(--primary);
}
.tp-feature2-item.active .title {
color: var(--black-2);
}
.tp-feature2-item.active .content p {
display: block;
}
.tp-feature2-item.active .line {
background-color: var(--primary);
}
.tp-feature2-item.active .line::after,
.tp-feature2-item.active .line::before {
background-color: var(--primary);
}
.tp-feature2-right {
position: relative;
}
.tp-feature2-right .pin-wrapper {
height: 640px;
position: relative;
border-radius: 20px;
}
@media (max-width: 1199px) {
.tp-feature2-right .pin-wrapper {
height: 530px;
}
}
@media (max-width: 767px) {
.tp-feature2-right .pin-wrapper {
height: 400px;
}
}
.tp-feature2-image {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tp-feature2-image img {
margin-top: auto;
}
.tp-feature2-image.active {
opacity: 1;
z-index: 1;
}
.tp-feature-old-area {
background-color: var(--white-5);
}
.tp-feature-old-area .sec-title-3 {
margin-top: 35px;
margin-bottom: 75px;
padding-bottom: 60px;
position: relative;
}
@media (max-width: 1199px) {
.tp-feature-old-area .sec-title-3 {
margin-bottom: 50px;
padding-bottom: 45px;
}
}
@media (max-width: 991px) {
.tp-feature-old-area .sec-title-3 {
margin-bottom: 40px;
padding-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-feature-old-area .sec-title-3 {
margin-bottom: 30px;
padding-bottom: 30px;
}
}
.tp-feature-old-area .sec-title-3::after {
position: absolute;
content: "";
width: 120%;
height: 1px;
left: 0;
bottom: 0;
background-color: rgba(2, 2, 2, 0.1019607843);
}
.tp-feature-old-area .text-wrap {
gap: 120px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 120px 1fr;
grid-template-columns: 1fr 1fr;
margin-bottom: 68px;
}
@media (max-width: 1919px) {
.tp-feature-old-area .text-wrap {
gap: 60px;
}
}
@media (max-width: 1199px) {
.tp-feature-old-area .text-wrap {
gap: 20px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
margin-bottom: 50px;
}
}
.tp-feature-old-area .text-wrap p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
color: var(--black-4);
}
@media (max-width: 767px) {
.tp-feature-old-area .text-wrap p {
font-size: 16px;
}
}
.tp-feature-old-area .actova-btn-primary {
margin-top: 80px;
}
@media (max-width: 991px) {
.tp-feature-old-area .actova-btn-primary {
margin-top: 40px;
}
}
.tp-feature-old-grid {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1fr 30px 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1399px) {
.tp-feature-old-grid {
gap: 15px;
}
}
@media (max-width: 1199px) {
.tp-feature-old-grid {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
@media (max-width: 991px) {
.tp-feature-old-grid {
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (max-width: 767px) {
.tp-feature-old-grid {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-feature-old-inner {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1.2fr;
grid-template-columns: 1fr 1.2fr;
}
@media (max-width: 1919px) {
.tp-feature-old-inner {
-ms-grid-columns: 1fr 1.8fr;
grid-template-columns: 1fr 1.8fr;
}
}
@media (max-width: 1199px) {
.tp-feature-old-inner {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 991px) {
.tp-feature-old-inner {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-feature-old-content {
padding-right: 50px;
position: relative;
}
@media (max-width: 991px) {
.tp-feature-old-content {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
padding: 80px 15px;
}
}
.tp-feature-old-content .bg-shape {
position: absolute;
right: 25%;
top: 25%;
pointer-events: none;
-webkit-animation: actovaRotation 30s infinite linear;
animation: actovaRotation 30s infinite linear;
}
@media (max-width: 767px) {
.tp-feature-old-content .bg-shape {
width: 260px;
}
}
.tp-feature-old-img {
-ms-flex-item-align: end;
align-self: flex-end;
}
.tp-feature-old-img img {
width: 645px;
}
@media (max-width: 991px) {
.tp-feature-old-img img {
max-width: 360px;
}
}
.tp-feature-old2-titlebox {
max-width: 690px;
text-align: center;
margin: 0 auto;
margin-bottom: 65px;
}
@media (max-width: 767px) {
.tp-feature-old2-titlebox {
margin-bottom: 40px;
}
}
.tp-feature-old2-titlebox p {
font-size: 18px;
font-family: var(--font-mono);
margin-top: 15px;
color: var(--black-4);
}
@media (max-width: 767px) {
.tp-feature-old2-titlebox p {
font-size: 16px;
}
}
.tp-feature-old2-wrapper {
gap: 50px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1.1fr 50px 1fr;
grid-template-columns: 1.1fr 1fr;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: var(--white);
-webkit-box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
border-radius: 20px;
padding: 35px 35px 35px 70px;
}
@media (max-width: 1199px) {
.tp-feature-old2-wrapper {
gap: 30px;
padding: 30px;
}
}
@media (max-width: 767px) {
.tp-feature-old2-wrapper {
padding: 30px 15px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-feature-old2-left .actova-btn-light {
border: 1px solid var(--white-3);
margin-top: 70px;
margin-left: 75px;
padding: 21px 35px;
}
@media (max-width: 767px) {
.tp-feature-old2-left .actova-btn-light {
margin-top: 40px;
margin-left: 0;
}
}
.tp-feature-old2-list {
display: -ms-grid;
display: grid;
gap: 70px;
}
@media (max-width: 991px) {
.tp-feature-old2-list {
gap: 50px;
}
}
.tp-feature-old2-item {
gap: 25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
position: relative;
}
@media (max-width: 991px) {
.tp-feature-old2-item {
gap: 10px;
}
}
.tp-feature-old2-item .line {
position: absolute;
content: "";
width: 1px;
height: 100%;
left: 24px;
top: 60px;
background-color: var(--white-3);
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
@media (max-width: 991px) {
.tp-feature-old2-item .line {
left: 20px;
top: 45px;
}
}
.tp-feature-old2-item .line::after,
.tp-feature-old2-item .line::before {
position: absolute;
content: "";
width: 6px;
height: 6px;
left: 0.5px;
background-color: var(--white-3);
}
.tp-feature-old2-item .line::before {
top: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.tp-feature-old2-item .line::after {
bottom: 0;
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.tp-feature-old2-item .number {
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;
width: 48px;
height: 48px;
border: 1px solid var(--white-3);
border-radius: 100px;
color: var(--gray);
font-weight: 500;
font-size: 18px;
line-height: 1;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@media (max-width: 991px) {
.tp-feature-old2-item .number {
width: 40px;
height: 40px;
font-size: 16px;
}
}
.tp-feature-old2-item .title {
font-weight: 500;
font-size: 35px;
line-height: 1.2;
color: var(--gray);
padding-top: 7px;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media (max-width: 1399px) {
.tp-feature-old2-item .title {
font-size: 30px;
}
}
@media (max-width: 1199px) {
.tp-feature-old2-item .title {
font-size: 24px;
}
}
@media (max-width: 991px) {
.tp-feature-old2-item .title {
font-size: 20px;
}
}
.tp-feature-old2-item .content {
max-width: 570px;
}
.tp-feature-old2-item .content p {
font-size: 18px;
color: var(--black-4);
font-family: var(--font-mono);
margin-top: 15px;
display: none;
}
@media (max-width: 991px) {
.tp-feature-old2-item .content p {
font-size: 16px;
}
}
.tp-feature-old2-item.active .number {
color: var(--black-2);
border-color: var(--primary);
background-color: var(--primary);
}
.tp-feature-old2-item.active .title {
color: var(--black-2);
}
.tp-feature-old2-item.active .content p {
display: block;
}
.tp-feature-old2-item.active .line {
background-color: var(--primary);
}
.tp-feature-old2-item.active .line::after,
.tp-feature-old2-item.active .line::before {
background-color: var(--primary);
}
.tp-feature-old2-right {
position: relative;
}
.tp-feature-old2-right .pin-wrapper {
height: 640px;
position: relative;
background: url("../imgs/feature/bg.png") no-repeat center;
}
@media (max-width: 1199px) {
.tp-feature-old2-right .pin-wrapper {
height: 530px;
}
}
@media (max-width: 767px) {
.tp-feature-old2-right .pin-wrapper {
height: 400px;
}
}
.tp-feature-old2-image {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tp-feature-old2-image img {
margin-top: auto;
}
.tp-feature-old2-image.active {
opacity: 1;
z-index: 1;
}
.tp-icon-box {
padding: 30px 40px;
border-radius: 20px;
background-color: var(--white);
}
@media (max-width: 1199px) {
.tp-icon-box {
padding: 30px 20px;
}
}
.tp-icon-box .icon {
width: 25px;
height: 25px;
border-radius: 100px;
background-color: var(--primary);
color: var(--black-2);
font-size: 15px;
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;
}
.tp-icon-box .title {
font-weight: 500;
font-size: 22px;
line-height: 1.3;
color: var(--black-2);
margin-top: 20px;
}
@media (max-width: 1399px) {
.tp-icon-box .title {
font-size: 20px;
}
}
.tp-addons-wrapper {
border: 1px solid var(--white-3);
border-radius: 20px;
padding: 70px 70px 40px;
position: relative;
}
@media (max-width: 991px) {
.tp-addons-wrapper {
padding: 40px 40px 30px;
}
}
@media (max-width: 767px) {
.tp-addons-wrapper {
padding: 30px 15px 30px;
}
}
.tp-addons-list {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media (max-width: 1199px) {
.tp-addons-list {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.tp-addons-list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-addons-item {
display: flex;
gap: 25px;
}
@media (max-width: 991px) {
.tp-addons-item {
gap: 15px;
}
}
.tp-addons-item svg {
width: 1em;
height: 1em;
}
.tp-addons-item .icon {
width: 60px;
height: 60px;
border-radius: 100px;
background-color: var(--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;
-ms-flex-negative: 0;
flex-shrink: 0;
border: 1px solid var(--white-3);
font-size: 30px;
}
.tp-addons-item .title {
font-weight: 500;
font-size: 28px;
line-height: 1.2;
color: var(--black-2);
padding-bottom: 10px;
}
@media (max-width: 1399px) {
.tp-addons-item .title {
font-size: 24px;
}
}
@media (max-width: 991px) {
.tp-addons-item .title {
font-size: 22px;
}
}
.tp-addons-item p {
font-size: 18px;
color: var(--black-4);
max-width: 280px;
font-family: var(--font-mono);
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
@media (max-width: 991px) {
.tp-addons-item p {
font-size: 16px;
}
}
.tp-addons-item,
.tp-addons-together {
cursor: pointer;
-webkit-filter: blur(3px);
filter: blur(3px);
opacity: 0.5;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-addons-item.active,
.tp-addons-together.active {
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
z-index: 3;
}
.tp-addons-item:hover p,
.tp-addons-together:hover p {
opacity: 1;
}
.tp-addons-together {
text-align: center;
}
.tp-addons-together svg {
width: 1em;
height: 1em;
}
.tp-addons-together p {
display: inline-block;
text-align: center;
background: var(--primary);
padding: 13px 30px;
border-radius: 100px;
color: var(--black-2);
font-size: 18px;
font-weight: 500;
margin-top: -50px;
}
@media (max-width: 767px) {
.tp-addons-together p {
padding: 12px 24px;
font-size: 16px;
}
}
.tp-addons-together p a {
font-size: 15px;
margin-left: 30px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 767px) {
.tp-addons-together p a {
margin-left: 10px;
}
}
.tp-addons-together p .icon {
font-size: 12px;
margin-left: 7px;
}
.tp-integration-titlebox {
max-width: 730px;
margin: 0 auto;
margin-bottom: 70px;
text-align: center;
}
.tp-integration-titlebox p {
font-size: 18px;
font-family: var(--font-mono);
margin-top: 15px;
color: var(--black-4);
}
@media (max-width: 767px) {
.tp-integration-titlebox p {
font-size: 16px;
}
}
.tp-integration-wrapper {
position: relative;
}
.tp-integration-wrapper svg {
width: 100%;
max-width: 1070px;
height: auto;
}
@media (max-width: 1199px) {
.tp-integration-wrapper svg {
height: 380px;
}
}
.tp-integration-svg {
position: absolute;
left: 50%;
width: 100%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
}
@media (max-width: 767px) {
.tp-integration-svg {
display: none;
}
}
.tp-integration-right,
.tp-integration-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: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media (max-width: 767px) {
.tp-integration-right,
.tp-integration-left {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
}
.tp-integration-right {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
text-align: right;
}
.tp-integration-items {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
height: 380px;
max-width: 1300px;
position: relative;
z-index: 1;
margin-bottom: 80px;
}
@media (max-width: 991px) {
.tp-integration-items {
margin-bottom: 50px;
}
}
@media (max-width: 767px) {
.tp-integration-items {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-integration-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 50px;
}
@media (max-width: 1199px) {
.tp-integration-item {
gap: 25px;
}
}
.tp-integration-item .int-icon {
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
background: var(--white);
z-index: 1;
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;
}
@media (max-width: 1199px) {
.tp-integration-item .int-icon {
width: 80px;
height: 80px;
}
}
.tp-integration-item .int-icon:before {
content: "";
position: absolute;
inset: 0;
border-radius: 100px;
padding: 1px;
background: -webkit-gradient(linear, left top, right top, from(var(--primary)), to(#0728E4));
background: linear-gradient(90deg, var(--primary) 0%, #0728E4 100%);
-webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--white))) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--white)));
-webkit-mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: -1;
}
.tp-integration-item .int-icon img {
max-width: 60px;
}
@media (max-width: 1199px) {
.tp-integration-item .int-icon img {
max-width: 40px;
}
}
.tp-integration-item p {
color: var(--black-4);
font-weight: 500;
background: var(--white);
border: 1px solid var(--white-3);
border-radius: 100px;
padding: 4px 19px 2px;
font-size: 16px;
}
@media (max-width: 767px) {
.tp-integration-item p {
display: none;
}
}
.tp-integration-item.item-1 {
-webkit-transform: translate(115px, -42px);
transform: translate(115px, -42px);
}
@media (max-width: 1199px) {
.tp-integration-item.item-1 {
-webkit-transform: translate(30px, -9px);
transform: translate(30px, -9px);
}
}
@media (max-width: 991px) {
.tp-integration-item.item-1 {
-webkit-transform: translate(30px, 33px);
transform: translate(30px, 33px);
}
}
@media (max-width: 767px) {
.tp-integration-item.item-1 {
-webkit-transform: unset;
transform: unset;
}
}
.tp-integration-item.item-5,
.tp-integration-item.item-2 {
gap: 100px;
}
@media (max-width: 1199px) {
.tp-integration-item.item-5,
.tp-integration-item.item-2 {
gap: 50px;
}
}
.tp-integration-item.item-5 .int-icon,
.tp-integration-item.item-2 .int-icon {
width: 110px;
height: 110px;
}
@media (max-width: 1199px) {
.tp-integration-item.item-5 .int-icon,
.tp-integration-item.item-2 .int-icon {
width: 90px;
height: 90px;
}
}
@media (max-width: 767px) {
.tp-integration-item.item-2 {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
}
@media (max-width: 767px) {
.tp-integration-item.item-5 {
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
}
.tp-integration-item.item-3 {
-webkit-transform: translate(115px, 38px);
transform: translate(115px, 38px);
}
@media (max-width: 1199px) {
.tp-integration-item.item-3 {
-webkit-transform: translate(30px, 5px);
transform: translate(30px, 5px);
}
}
@media (max-width: 991px) {
.tp-integration-item.item-3 {
-webkit-transform: translate(30px, -33px);
transform: translate(30px, -33px);
}
}
@media (max-width: 767px) {
.tp-integration-item.item-3 {
-webkit-transform: unset;
transform: unset;
}
}
.tp-integration-item.item-4 {
-webkit-transform: translate(-115px, -42px);
transform: translate(-115px, -42px);
}
@media (max-width: 1199px) {
.tp-integration-item.item-4 {
-webkit-transform: translate(-30px, -8px);
transform: translate(-30px, -8px);
}
}
@media (max-width: 991px) {
.tp-integration-item.item-4 {
-webkit-transform: translate(-30px, 32px);
transform: translate(-30px, 32px);
}
}
@media (max-width: 767px) {
.tp-integration-item.item-4 {
-webkit-transform: unset;
transform: unset;
}
}
.tp-integration-item.item-6 {
-webkit-transform: translate(-115px, 38px);
transform: translate(-115px, 38px);
}
@media (max-width: 1199px) {
.tp-integration-item.item-6 {
-webkit-transform: translate(-30px, 6px);
transform: translate(-30px, 6px);
}
}
@media (max-width: 991px) {
.tp-integration-item.item-6 {
-webkit-transform: translate(-30px, -33px);
transform: translate(-30px, -33px);
}
}
@media (max-width: 767px) {
.tp-integration-item.item-6 {
-webkit-transform: unset;
transform: unset;
}
}
.tp-integration-mid {
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;
position: relative;
}
@media (max-width: 767px) {
.tp-integration-mid {
gap: 15px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.tp-integration-mid .int-box {
width: 120px;
height: 120px;
border-radius: 20px;
padding: 10px;
background: -webkit-gradient(linear, left top, right top, from(var(--primary)), to(#0728E4));
background: linear-gradient(90deg, var(--primary) 0%, #0728E4 100%);
}
@media (max-width: 991px) {
.tp-integration-mid .int-box {
width: 90px;
height: 90px;
margin-left: 15px;
}
}
.tp-integration-mid .int-box-inner {
width: 100%;
height: 100%;
border-radius: 10px;
background: var(--primary);
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;
outline: 9px solid var(--white);
}
.tp-integration-mid .int-text {
position: absolute;
bottom: 20px;
max-width: 170px;
text-align: center;
font-weight: 700;
font-style: italic;
}
@media (max-width: 767px) {
.tp-integration-mid .int-text {
position: static;
}
}
.tp-integration-help {
text-align: center;
margin-top: 50px;
}
.tp-integration-help a {
color: var(--black-2);
font-weight: 500;
border: 1px solid var(--white-3);
border-radius: 100px;
padding: 13px 30px;
display: inline-block;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-integration-help a:hover {
background: var(--primary);
border-color: var(--primary);
color: var(--black-2);
}
.tp-integration-right .tp-integration-item .int-icon {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.dotOuter {
fill: var(--white);
}
.dotInner {
fill: var(--gray);
}
/*----------------------------------------*/
/* 25. PROCESS CSS START
/*----------------------------------------*/
.tp-process-area .title-wrap {
max-width: 675px;
margin: 0 auto;
margin-bottom: 60px;
text-align: center;
}
@media (max-width: 1199px) {
.tp-process-area .title-wrap {
margin-bottom: 50px;
}
}
@media (max-width: 991px) {
.tp-process-area .title-wrap {
margin-bottom: 40px;
}
}
.tp-process-area .sub-title-2 {
margin-bottom: 30px;
}
@media (max-width: 991px) {
.tp-process-area .sub-title-2 {
margin-bottom: 20px;
}
}
.tp-process-slider .swiper-slide {
border: 1px solid var(--white-3);
border-right: none;
padding: 70px;
}
@media (max-width: 1919px) {
.tp-process-slider .swiper-slide {
padding: 40px;
}
}
@media (max-width: 767px) {
.tp-process-slider .swiper-slide {
padding: 30px 15px;
}
}
.tp-process-slider .swiper-slide:hover .image-wrap img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.tp-process-slider .image-wrap {
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;
margin-bottom: 55px;
}
@media (max-width: 1199px) {
.tp-process-slider .image-wrap {
margin-bottom: 30px;
}
}
.tp-process-slider .image-wrap img {
max-width: 90px;
max-height: 85px;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.tp-process-slider .number {
font-weight: 700;
font-size: 50px;
line-height: 1;
color: var(--white-3);
}
.tp-process-slider .title {
font-weight: 500;
font-size: 35px;
line-height: 1.3;
letter-spacing: -1px;
color: var(--black-2);
}
@media (max-width: 1399px) {
.tp-process-slider .title {
font-size: 30px;
}
}
@media (max-width: 1199px) {
.tp-process-slider .title {
font-size: 28px;
}
}
@media (max-width: 991px) {
.tp-process-slider .title {
font-size: 24px;
}
}
.tp-process-slider p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
color: var(--black-4);
margin-top: 17px;
margin-bottom: 40px;
max-width: 480px;
}
@media (max-width: 1399px) {
.tp-process-slider p {
margin-top: 12px;
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.tp-process-slider p {
font-size: 16px;
}
}
.tp-process-slider ul {
gap: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 1399px) {
.tp-process-slider ul {
gap: 10px;
}
}
@media (max-width: 767px) {
.tp-process-slider ul {
gap: 6px;
}
}
.tp-process-slider ul a {
font-weight: 500;
font-size: 16px;
line-height: 1;
color: var(--black-2);
background-color: var(--white-4);
border-radius: 100px;
padding: 12px 20px;
display: inline-block;
}
@media (max-width: 1399px) {
.tp-process-slider ul a {
font-size: 14px;
padding: 10px 15px;
}
}
@media (max-width: 767px) {
.tp-process-slider ul a {
font-size: 12px;
}
}
.tp-process-slider ul a:hover {
background-color: var(--primary);
}
.tp-process-footer {
margin-top: 70px;
text-align: center;
position: relative;
}
@media (max-width: 1199px) {
.tp-process-footer {
margin-top: 50px;
}
}
@media (max-width: 991px) {
.tp-process-footer {
margin-top: 40px;
}
}
@media (max-width: 767px) {
.tp-process-footer {
margin-top: 30px;
}
}
.tp-process-navigation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 870px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media (max-width: 991px) {
.tp-process-navigation {
gap: 580px;
}
}
@media (max-width: 767px) {
.tp-process-navigation {
gap: 50px;
margin-top: 15px;
position: static;
-webkit-transform: unset;
transform: unset;
}
}
.tp-process-next,
.tp-process-prev {
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;
width: 60px;
height: 60px;
border: 1px solid var(--white-3);
border-radius: 100px;
font-size: 16px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-process-next:hover,
.tp-process-prev:hover {
border-color: var(--primary);
background-color: var(--primary);
}
.tp-process-btn {
font-weight: 500;
font-size: 22px;
line-height: 1;
color: var(--white);
background-image: url(../imgs/process/btn-bg.png);
background-repeat: no-repeat;
padding: 24px 50px;
background-position: center;
background-size: cover;
border-radius: 100px;
display: inline-block;
width: 630px;
position: relative;
overflow: hidden;
z-index: 1;
}
@media (max-width: 991px) {
.tp-process-btn {
width: 480px;
padding: 20px 25px;
font-size: 20px;
}
}
@media (max-width: 767px) {
.tp-process-btn {
width: 90%;
margin: 0 15px;
font-size: 16px;
}
}
.tp-process-btn:hover {
color: var(--white);
}
.tp-process-btn::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3019607843);
z-index: -1;
}
/*----------------------------------------*/
/* 26. PRICING CSS START
/*----------------------------------------*/
.tp-price-outer {
max-width: 1720px;
margin: 0 auto;
background-image: url(../imgs/others/price-bg.png);
background-repeat: no-repeat;
-webkit-box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
border-radius: 20px;
}
.tp-price-titlebox {
max-width: 760px;
margin: 0 auto;
margin-bottom: 35px;
}
.tp-price-titlebox p {
font-size: 18px;
color: var(--black-4);
font-family: var(--font-mono);
margin-top: 10px;
}
@media (max-width: 767px) {
.tp-price-titlebox p {
font-size: 16px;
}
}
.tp-price-toggle-wrapper {
text-align: center;
margin-bottom: 70px;
}
@media (max-width: 991px) {
.tp-price-toggle-wrapper {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-price-toggle-wrapper {
margin-bottom: 30px;
}
}
.tp-price-toggle-wrapper .toggle-btn-wrap {
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;
gap: 20px;
border: 1px solid var(--white-3);
border-radius: 100px;
padding: 27px;
}
@media (max-width: 767px) {
.tp-price-toggle-wrapper .toggle-btn-wrap {
gap: 10px;
padding: 20px 25px;
}
}
.tp-price-toggle-wrapper span {
font-weight: 500;
font-size: 18px;
line-height: 1;
color: var(--black-2);
}
.tp-price-toggle-btn {
position: relative;
width: 50px;
height: 24px;
background: var(--black-2);
border-radius: 30px;
cursor: pointer;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.tp-price-toggle-btn::before {
content: "";
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--white);
top: 3px;
left: 3px;
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.tp-price-toggle-btn.active {
background: var(--primary);
}
.tp-price-toggle-btn.active::before {
-webkit-transform: translateX(25px);
transform: translateX(25px);
}
.tp-price-list {
gap: 30px;
display: -ms-grid;
display: grid;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-grid-columns: 1fr 30px 1fr 30px 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1199px) {
.tp-price-list {
gap: 15px;
}
}
@media (max-width: 767px) {
.tp-price-list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-price-list.monthly {
position: absolute;
width: 100%;
left: 0;
top: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-price-list.annual {
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-price-plan {
border: 1px solid var(--white-3);
background-color: var(--white);
border-radius: 20px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
padding: 50px;
}
@media (max-width: 1399px) {
.tp-price-plan {
padding: 40px 30px;
}
}
@media (max-width: 1199px) {
.tp-price-plan {
padding: 40px 15px;
}
}
.tp-price-plan:hover {
-webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
}
.tp-price-plan .actova-btn-light {
width: 100%;
border: 1px solid var(--white-3);
text-transform: capitalize;
padding: 21px 25px;
font-size: 16px;
}
.tp-price-plan .actova-btn-primary {
width: 100%;
padding: 21px 25px;
text-transform: capitalize;
font-size: 16px;
}
.tp-price-plan .actova-btn-primary:hover {
color: var(--white);
background-color: var(--black-2);
}
.tp-price-plan.popular {
position: relative;
margin-top: 40px;
-webkit-box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
}
.tp-price-plan.popular .ribbon {
background: var(--primary);
height: 60px;
position: absolute;
width: 100%;
left: 0;
top: -45px;
border-radius: 20px 20px 0 0;
z-index: -1;
padding-top: 15px;
}
.tp-price-plan.popular .ribbon p {
font-weight: 700;
font-size: 18px;
line-height: 1;
color: var(--black-2);
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: 10px;
}
.tp-price-table {
position: relative;
}
.tp-price-header {
margin-bottom: 35px;
}
.tp-price-header .plan-name {
color: var(--black-4);
font-weight: 500;
font-size: 18px;
line-height: 1;
padding: 9px 16px;
background: var(--white-4);
display: inline-block;
border-radius: 100px;
}
@media (max-width: 991px) {
.tp-price-header .plan-name {
font-size: 18px;
}
}
.tp-price-amount {
font-weight: 400;
line-height: 1;
color: var(--black-4);
font-size: 18px;
}
@media (max-width: 991px) {
.tp-price-amount {
font-size: 16px;
}
}
.tp-price-amount span {
color: var(--black-2);
font-size: 70px;
font-weight: 500;
}
@media (max-width: 1399px) {
.tp-price-amount span {
font-size: 60px;
}
}
@media (max-width: 1199px) {
.tp-price-amount span {
font-size: 48px;
}
}
@media (max-width: 767px) {
.tp-price-amount span {
font-size: 36px;
}
}
.tp-price-desc {
color: var(--black-4);
font-size: 18px;
margin-top: 20px;
margin-bottom: 50px;
}
@media (max-width: 1199px) {
.tp-price-desc {
margin-bottom: 40px;
}
}
@media (max-width: 991px) {
.tp-price-desc {
font-size: 16px;
}
}
.tp-price-feature {
margin-bottom: 70px;
}
@media (max-width: 1199px) {
.tp-price-feature {
margin-bottom: 50px;
}
}
.tp-price-feature ul {
gap: 25px;
display: -ms-grid;
display: grid;
}
.tp-price-feature li {
gap: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--black-2);
font-weight: 500;
font-size: 16px;
line-height: 1;
}
.tp-price-feature .disable {
opacity: 0.4;
}
.tp-price-feature .icon {
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;
aspect-ratio: 1;
background: rgba(7, 40, 228, 0.1490196078);
border-radius: 100px;
}
.tp-price-list.monthly.active,
.tp-price-list.annual.active {
opacity: 1;
visibility: visible;
}
/*----------------------------------------*/
/* 27. CAPABILITY CSS START
/*----------------------------------------*/
.tp-capability-area .title-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-bottom: 55px;
margin-bottom: 70px;
position: relative;
}
@media (max-width: 1399px) {
.tp-capability-area .title-wrapper {
gap: 60px;
}
}
@media (max-width: 991px) {
.tp-capability-area .title-wrapper {
gap: 20px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media (max-width: 767px) {
.tp-capability-area .title-wrapper {
padding-bottom: 35px;
margin-bottom: 40px;
}
}
.tp-capability-area .title-wrapper::after {
position: absolute;
content: "";
width: calc(100% + 120px);
height: 1px;
left: -60px;
bottom: 0;
background-color: var(--white-3);
}
.tp-capability-area .title-wrap {
max-width: 895px;
}
.tp-capability-area .sub-title {
background-color: var(--white-5);
margin-bottom: 30px;
border: none;
}
.tp-capability-area .text-wrap {
max-width: 555px;
}
.tp-capability-area .text-wrap p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: var(--black-2);
}
.tp-capability-grid {
gap: 30px;
display: -ms-grid;
display: grid;
}
.tp-capability-grid .grid-top {
display: -ms-grid;
display: grid;
gap: 30px;
-ms-grid-columns: 1fr 30px 1fr;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 767px) {
.tp-capability-grid .grid-top {
gap: 15px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-capability-grid .grid-bottom {
display: -ms-grid;
display: grid;
gap: 30px;
-ms-grid-columns: 1fr 30px 1fr 30px 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 767px) {
.tp-capability-grid .grid-bottom {
gap: 15px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-capability-card {
background-color: var(--white-5);
border-radius: 20px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
background-repeat: no-repeat;
}
.tp-capability-card:hover {
background-color: var(--primary);
}
.tp-capability-card:hover::after {
opacity: 0;
}
.tp-capability-card:hover .title a {
background-size: 100% 100%;
}
.tp-capability-card .title {
font-weight: 500;
font-size: 28px;
line-height: 1.3;
color: var(--black-2);
position: relative;
z-index: 3;
}
@media (max-width: 1199px) {
.tp-capability-card .title {
font-size: 24px;
}
.tp-capability-card .title br {
display: none;
}
}
@media (max-width: 991px) {
.tp-capability-card .title {
font-size: 22px;
}
}
@media (max-width: 767px) {
.tp-capability-card .title {
font-size: 20px;
}
}
.tp-capability-card .title a {
background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
background-repeat: no-repeat;
background-size: 0% 100%;
-webkit-transition: background-size 1s;
transition: background-size 1s;
}
.tp-capability-card p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: var(--black-2);
}
@media (max-width: 991px) {
.tp-capability-card p {
font-size: 16px;
}
}
.tp-capability-card .tp-btn-two {
text-transform: initial;
font-size: 18px;
background-color: var(--white);
padding: 8px 18px;
}
@media (max-width: 1399px) {
.tp-capability-card .tp-btn-two {
font-size: 16px;
}
}
.tp-capability-card .actova-btn {
font-weight: 500;
font-size: 15px;
line-height: 1.3;
color: var(--black-2);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
position: relative;
z-index: 3;
}
.tp-capability-card .actova-btn:hover {
fill: var(--green);
color: var(--green);
}
.tp-capability-card .actova-btn svg {
font-size: 14px;
}
.tp-capability-card.large-card {
padding: 60px;
background-repeat: no-repeat;
}
@media (max-width: 1199px) {
.tp-capability-card.large-card {
padding: 50px 40px;
}
}
@media (max-width: 991px) {
.tp-capability-card.large-card {
padding: 30px;
}
}
.tp-capability-card.large-card .title {
font-weight: 500;
font-size: 35px;
line-height: 1.3;
color: var(--black-2);
}
@media (max-width: 1399px) {
.tp-capability-card.large-card .title {
font-size: 30px;
}
}
@media (max-width: 1199px) {
.tp-capability-card.large-card .title {
font-size: 24px;
}
}
@media (max-width: 767px) {
.tp-capability-card.large-card .title {
font-size: 22px;
}
}
.tp-capability-card.small-card {
padding: 50px 45px;
}
@media (max-width: 1399px) {
.tp-capability-card.small-card {
padding: 40px 30px;
}
}
@media (max-width: 991px) {
.tp-capability-card.small-card {
padding: 30px 15px;
}
}
@media (max-width: 767px) {
.tp-capability-card.small-card {
padding: 30px;
}
}
.tp-capability-card.card-1 {
background-position: right top;
position: relative;
overflow: hidden;
}
@media (max-width: 767px) {
.tp-capability-card.card-1 {
background-size: 220px;
}
}
.tp-capability-card.card-1::after {
-webkit-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
content: "";
width: 100%;
height: 100%;
right: 0;
top: 0;
background: radial-gradient(circle at top right, #FF2ED1 0%, rgba(255, 46, 209, 0.25) 0%, rgba(255, 46, 209, 0.1) 30%, transparent 100%);
}
.tp-capability-card.card-1 .title {
margin-top: 70px;
margin-bottom: 10px;
max-width: 400px;
}
@media (max-width: 991px) {
.tp-capability-card.card-1 .title {
margin-top: 40px;
}
}
@media (max-width: 767px) {
.tp-capability-card.card-1 .title {
margin-top: 30px;
}
}
.tp-capability-card.card-1 p {
max-width: 615px;
}
.tp-capability-card.card-2 {
background-position: right bottom;
position: relative;
}
@media (max-width: 767px) {
.tp-capability-card.card-2 {
background-size: 220px;
}
}
.tp-capability-card.card-2::after {
-webkit-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
content: "";
width: 100%;
height: 100%;
right: 0;
top: 0;
background: radial-gradient(circle at top center, #E9D10D 0%, rgba(233, 209, 13, 0.3) 0, rgba(233, 209, 13, 0.1) 5%, transparent 80%);
pointer-events: none;
}
.tp-capability-card.card-2 .title {
max-width: 460px;
}
.tp-capability-card.card-2 p {
max-width: 460px;
margin-top: 20px;
margin-bottom: 60px;
}
@media (max-width: 991px) {
.tp-capability-card.card-2 p {
margin-bottom: 30px;
}
}
.tp-capability-card.card-3 {
background-position: 93% 30px;
}
@media (max-width: 1199px) {
.tp-capability-card.card-3 {
background-size: 90px;
}
}
.tp-capability-card.card-3 .title {
margin-top: 90px;
margin-bottom: 30px;
}
@media (max-width: 991px) {
.tp-capability-card.card-3 .title {
margin-top: 40px;
}
}
@media (max-width: 767px) {
.tp-capability-card.card-3 .title {
margin-top: 30px;
margin-bottom: 20px;
}
}
.tp-capability-card.card-4 {
background-position: bottom right;
background-size: 200px;
background-color: var(--primary);
}
.tp-capability-card.card-4 p {
max-width: 405px;
margin-top: 20px;
margin-bottom: 60px;
}
@media (max-width: 991px) {
.tp-capability-card.card-4 p {
margin-bottom: 40px;
}
}
.tp-capability-card.card-5 {
background-position: 115% -65px;
background-blend-mode: luminosity;
background-size: 218px;
position: relative;
overflow: hidden;
}
@media (max-width: 1199px) {
.tp-capability-card.card-5 {
background-size: 180px;
background-position: 115% -45px;
}
}
@media (max-width: 991px) {
.tp-capability-card.card-5 {
background-size: 130px;
}
}
.tp-capability-card.card-5::before {
-webkit-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
content: "";
width: 372px;
height: 372px;
right: 0;
top: 0;
border: 18px solid var(--white);
border-radius: 100%;
z-index: 1;
-webkit-transform: translate(50px, 60%);
transform: translate(50px, 60%);
}
@media (max-width: 1199px) {
.tp-capability-card.card-5::before {
width: 260px;
height: 260px;
-webkit-transform: translate(50px, 115%);
transform: translate(50px, 115%);
}
}
@media (max-width: 767px) {
.tp-capability-card.card-5::before {
-webkit-transform: translate(50px, 50%);
transform: translate(50px, 50%);
}
}
.tp-capability-card.card-5::after {
-webkit-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
content: "";
width: 100%;
height: 100%;
right: 0;
top: 0;
background: radial-gradient(circle at bottom right, #FF0004 0%, rgba(255, 0, 4, 0.4) 10%, rgba(255, 0, 4, 0.15) 22%, transparent 35%);
}
.tp-capability-card.card-5 .title {
margin-top: 90px;
margin-bottom: 35px;
}
@media (max-width: 991px) {
.tp-capability-card.card-5 .title {
margin-top: 60px;
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.tp-capability-card.card-5 .title {
margin-top: 30px;
margin-bottom: 20px;
}
}
.tp-capability-titlebox {
text-align: center;
max-width: 740px;
margin: 0 auto;
margin-bottom: 70px;
}
@media (max-width: 991px) {
.tp-capability-titlebox {
margin-bottom: 50px;
}
}
@media (max-width: 767px) {
.tp-capability-titlebox {
margin-bottom: 40px;
}
}
.tp-capability-titlebox p {
font-family: var(--font-mono);
font-size: 18px;
text-align: center;
color: var(--black-4);
margin-top: 25px;
}
@media (max-width: 767px) {
.tp-capability-titlebox p {
font-size: 16px;
margin-top: 12px;
}
}
.tp-capability2-grid {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 0.67fr 30px 1fr;
grid-template-columns: 1fr 0.67fr 1fr;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
@media (max-width: 1199px) {
.tp-capability2-grid {
gap: 15px;
-ms-grid-columns: 1fr 15px 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 1199px) {
.tp-capability2-grid .card-wrap.wrap-2 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
grid-column: 1/-1;
gap: 15px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 15px 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 1199px) and (max-width: 767px) {
.tp-capability2-grid .card-wrap.wrap-2 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
@media (max-width: 1199px) {
.tp-capability2-grid .card-wrap.wrap-3 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
}
@media (max-width: 991px) {
.tp-capability2-grid {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-capability2-grid-2 {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1fr;
grid-template-columns: 1fr 1fr;
margin-top: 30px;
}
@media (max-width: 1199px) {
.tp-capability2-grid-2 {
gap: 15px;
margin-top: 15px;
}
}
@media (max-width: 991px) {
.tp-capability2-grid-2 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-capability2-card {
background-color: var(--white);
-webkit-box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
border-radius: 20px;
}
.tp-capability2-card .title {
font-weight: 700;
font-size: 28px;
line-height: 1.3;
color: var(--black-2);
margin-bottom: 15px;
}
@media (max-width: 1399px) {
.tp-capability2-card .title {
font-size: 24px;
}
}
@media (max-width: 767px) {
.tp-capability2-card .title {
font-size: 22px;
margin-bottom: 10px;
}
}
.tp-capability2-card p {
font-family: var(--font-mono);
font-size: 18px;
color: var(--black-4);
}
@media (max-width: 767px) {
.tp-capability2-card p {
font-size: 16px;
}
}
.tp-capability2-card.card-1 {
padding: 50px 50px 60px;
}
@media (max-width: 1399px) {
.tp-capability2-card.card-1 {
padding: 50px 30px 60px;
}
}
@media (max-width: 767px) {
.tp-capability2-card.card-1 {
padding: 30px 20px;
}
}
.tp-capability2-card.card-1 .integrate-wrap {
gap: 10px;
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;
margin-bottom: -50px;
}
.tp-capability2-card.card-1 .integrate-icon {
width: 80px;
height: 80px;
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;
border: 1px solid var(--white-3);
background-color: var(--white);
border-radius: 100px;
position: relative;
z-index: 5;
}
.tp-capability2-card.card-1 .switch-icon {
width: 36px;
height: 36px;
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: var(--primary);
border-radius: 100px;
position: absolute;
z-index: 6;
}
.tp-capability2-card.card-1 .feature-list {
position: relative;
}
.tp-capability2-card.card-1 .feature-list::before {
position: absolute;
content: "";
width: 88%;
height: 180px;
left: 50%;
bottom: -20px;
border-radius: 20px;
pointer-events: none;
-webkit-box-shadow: 0px 4px 64px 0px rgba(2, 2, 2, 0.0509803922);
box-shadow: 0px 4px 64px 0px rgba(2, 2, 2, 0.0509803922);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: var(--white);
z-index: 1;
}
.tp-capability2-card.card-1 .feature-list::after {
position: absolute;
content: "";
width: 78%;
height: 180px;
left: 50%;
bottom: -40px;
border-radius: 20px;
pointer-events: none;
-webkit-box-shadow: 0px 4px 64px 0px rgba(2, 2, 2, 0.0509803922);
box-shadow: 0px 4px 64px 0px rgba(2, 2, 2, 0.0509803922);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: var(--white);
}
.tp-capability2-card.card-1 ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px 20px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 100px;
-webkit-box-shadow: 0px 4px 64px 0px rgba(2, 2, 2, 0.0509803922);
box-shadow: 0px 4px 64px 0px rgba(2, 2, 2, 0.0509803922);
padding: 85px 30px 30px;
position: relative;
background-color: var(--white);
z-index: 3;
border-radius: 20px;
}
@media (max-width: 1919px) {
.tp-capability2-card.card-1 ul {
margin-bottom: 80px;
padding: 85px 10px 30px;
}
}
@media (max-width: 767px) {
.tp-capability2-card.card-1 ul {
gap: 10px;
margin-bottom: 60px;
}
}
.tp-capability2-card.card-1 ul li a {
background: var(--white-4);
color: var(--black-2);
font-weight: 400;
font-size: 15px;
line-height: 1.2;
text-align: center;
padding: 4px 18px;
border-radius: 100px;
}
.tp-capability2-card.card-2 {
padding: 50px 30px 35px;
margin-bottom: 30px;
}
@media (max-width: 767px) {
.tp-capability2-card.card-2 {
padding: 30px 20px;
}
}
.tp-capability2-card.card-2 img {
width: 55px;
height: 55px;
border-radius: 100px;
margin-bottom: 50px;
}
@media (max-width: 767px) {
.tp-capability2-card.card-2 img {
margin-bottom: 30px;
}
}
.tp-capability2-card.card-3 {
background-color: var(--primary);
position: relative;
}
.tp-capability2-card.card-3 p {
color: var(--black-2);
font-size: 15px;
background-color: var(--white);
border-radius: 100px;
padding: 3px 15px;
display: inline-block;
margin: 30px 0 0 30px;
}
.tp-capability2-card.card-3 .text {
color: var(--green);
font-weight: 500;
font-size: 80px;
line-height: 1;
letter-spacing: 2.4px;
text-align: center;
text-transform: uppercase;
padding-bottom: 50px;
padding-top: 60px;
}
@media (max-width: 991px) {
.tp-capability2-card.card-3 .text {
font-size: 70px;
}
}
.tp-capability2-card.card-3 img {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tp-capability2-card.card-4 {
padding: 50px;
}
@media (max-width: 991px) {
.tp-capability2-card.card-4 {
padding: 40px;
}
}
@media (max-width: 767px) {
.tp-capability2-card.card-4 {
padding: 30px 20px;
}
}
.tp-capability2-card.card-4 .img-wrap {
position: relative;
margin-bottom: 50px;
overflow: hidden;
}
@media (max-width: 767px) {
.tp-capability2-card.card-4 .img-wrap {
margin-bottom: 30px;
}
}
.tp-capability2-card.card-4 .img-wrap::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
bottom: 0;
background: linear-gradient(180.45deg, rgba(255, 255, 255, 0) 38.87%, var(--white) 99.61%);
}
.tp-capability2-card.card-4 .templates {
font-weight: 700;
font-size: 110px;
line-height: 1;
text-align: center;
color: #7677BC;
position: absolute;
bottom: -20px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 1;
}
@media (max-width: 1199px) {
.tp-capability2-card.card-4 .templates {
font-size: 80px;
bottom: -15px;
}
}
.tp-capability2-card.card-4 .feature {
font-weight: 500;
font-size: 16px;
line-height: 1;
text-align: center;
color: var(--black-2);
position: absolute;
z-index: 1;
border: 1px solid var(--white-3);
background-color: var(--white);
border-radius: 100px;
padding: 10px 20px;
}
.tp-capability2-card.card-4 .feature.one {
-webkit-transform: rotate(-18deg);
transform: rotate(-18deg);
left: 50px;
top: 30%;
}
@media (max-width: 1199px) {
.tp-capability2-card.card-4 .feature.one {
left: 30px;
}
}
@media (max-width: 767px) {
.tp-capability2-card.card-4 .feature.one {
left: 0;
}
}
.tp-capability2-card.card-4 .feature.two {
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
right: 60px;
top: 50%;
}
@media (max-width: 1199px) {
.tp-capability2-card.card-4 .feature.two {
top: 30%;
right: 10px;
}
}
@media (max-width: 767px) {
.tp-capability2-card.card-4 .feature.two {
right: 0;
}
}
.tp-capability2-card.card-5 {
padding: 50px;
}
@media (max-width: 1199px) {
.tp-capability2-card.card-5 {
padding: 30px;
}
}
@media (max-width: 767px) {
.tp-capability2-card.card-5 {
padding: 30px 20px;
}
}
.tp-capability2-card.card-5 > p {
max-width: 525px;
}
.tp-capability2-card.card-5 .content-wrap {
background-image: url(../imgs/capability/chart.png);
background-repeat: no-repeat;
text-align: center;
}
.tp-capability2-card.card-5 .item-group {
gap: 20px;
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;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.tp-capability2-card.card-5 .group-1 {
padding-top: 40px;
}
.tp-capability2-card.card-5 .group-2 {
padding: 0 50px 50px;
}
@media (max-width: 767px) {
.tp-capability2-card.card-5 .group-2 {
padding: 0 30px 30px;
}
}
.tp-capability2-card.card-5 .content-item {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
-webkit-box-shadow: 0px 4px 15px 2px rgba(0, 0, 0, 0.1019607843);
box-shadow: 0px 4px 15px 2px rgba(0, 0, 0, 0.1019607843);
border-radius: 100px;
padding: 5px 15px;
background-color: var(--white);
}
.tp-capability2-card.card-5 .content-item p {
color: var(--black-2);
font-size: 16px;
}
.tp-capability2-card.card-5 .ai-item {
padding-top: 10px;
padding-bottom: 10px;
}
.tp-capability2-card.card-5 .ai-item p {
width: 70px;
height: 70px;
border: 1px solid var(--primary);
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;
border-radius: 100px;
margin: 0 auto;
background: var(--white);
color: var(--black-2);
font-family: Space Mono;
font-size: 40px;
line-height: 100%;
letter-spacing: -4px;
}
.tp-capability2-card.card-6 {
padding: 50px;
}
@media (max-width: 767px) {
.tp-capability2-card.card-6 {
padding: 30px 15px;
}
}
.tp-capability2-card.card-6 > p {
max-width: 525px;
}
.tp-capability2-card.card-6 .content-wrap {
background-image: url(../imgs/capability/map-flags.png);
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 60px;
}
.tp-capability2-card.card-6 .content-item {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px;
-webkit-box-shadow: 0px 4px 84px 0px rgba(2, 2, 2, 0.0784313725);
box-shadow: 0px 4px 84px 0px rgba(2, 2, 2, 0.0784313725);
border-radius: 5px;
padding: 9px 20px;
background-color: var(--white);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.tp-capability2-card.card-6 .content-item p {
color: var(--black-4);
font-size: 14px;
}
.tp-capability2-card.card-6 .content-item .text {
font-weight: 500;
font-size: 16px;
line-height: 1.1;
color: var(--black-2);
margin-bottom: 5px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.tp-capability2-card.card-6 .content {
text-align: left;
}
.vertical-card-slider {
width: auto;
height: 228px;
}
.vertical-card-slider .swiper-slide {
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-transition: opacity 300ms ease, -webkit-transform 300ms ease;
transition: opacity 300ms ease, -webkit-transform 300ms ease;
transition: transform 300ms ease, opacity 300ms ease;
transition: transform 300ms ease, opacity 300ms ease, -webkit-transform 300ms ease;
z-index: 5;
}
.vertical-card-slider .swiper-slide-active .content-item,
.vertical-card-slider .swiper-slide.is-center .content-item {
padding: 14px 20px;
}
.vertical-card-slider .swiper-slide-active .text,
.vertical-card-slider .swiper-slide.is-center .text {
font-size: 20px !important;
}
.vertical-card-slider .swiper-slide-active .icon img,
.vertical-card-slider .swiper-slide.is-center .icon img {
width: 32px;
}
/* new capability actova start */
.tp-our-capability-grid {
gap: 30px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.tp-our-capability-card {
border-radius: 25px;
overflow: hidden;
padding: 80px 60px;
position: relative;
}
.tp-our-capability-card::after,
.tp-our-capability-card::before {
content: "";
position: absolute;
background: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: cover;
z-index: 1111;
width: 25px;
height: 25px;
}
.tp-our-capability-card::before {
bottom: -2px;
right: 90px;
}
.tp-our-capability-card::after {
bottom: 89px;
right: 0px;
}
.tp-our-capability-card .title {
font-weight: 500;
font-size: 35px;
line-height: 1.25;
color: var(--white);
position: relative;
z-index: 3;
}
.tp-our-capability-card .title a {
background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size 1s;
}
.tp-our-capability-card.card-3 .title {
max-width: 390px;
}
.tp-our-capability-card .title:hover a {
background-size: 100% 100%;
}
.tp-our-capability-card .icon-img {
position: relative;
z-index: 3;
align-self: flex-start;
}
.tp-our-capability-card p {
position: relative;
z-index: 3;
font-weight: 700;
font-size: 18px;
line-height: 26px;
color: var(--white);
font-family: var(--font-mono);
padding-top: 15px;
}
.tp-our-capability-card .link-wrapper {
position: absolute;
right: 0;
bottom: 0;
width: 90px;
height: 90px;
background: #fff;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: flex-end;
border-start-start-radius: 35px;
z-index: 1;
}
.tp-our-capability-card .capability-link {
display: flex;
align-items: center;
justify-content: center;
width: 74px;
height: 74px;
border-radius: 25px;
background: #020202;
}
.tp-our-capability-card .tp-btn-two {
position: relative;
z-index: 1;
text-transform: initial;
font-size: 18px;
background-color: var(--white);
padding: 8px 18px;
margin-top: 65px;
}
.tp-our-capability-card .bg-shape {
position: absolute;
background-repeat: no-repeat;
}
.tp-our-capability-card.card-1 {
height: 500px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: linear-gradient(197.7deg, #2CD8CC 17.22%, #1149C2 97.29%);
}
.tp-our-capability-card.card-1 .bg-shape {
right: 0;
bottom: 0;
}
.tp-our-capability-card.card-group {
display: grid;
gap: 30px;
padding: 0;
}
.tp-our-capability-card.card-2 {
height: 310px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.tp-our-capability-card.card-2 .bg-shape {
width: 100%;
height: 100%;
left: 0;
top: 0;
object-fit: cover;
}
.tp-our-capability-card.card-3 {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
}
.tp-our-capability-card.card-3 .overlay {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(2, 2, 2, 0.15);
}
.tp-our-capability-card.card-3 .bg-shape {
left: 0;
bottom: 0;
}
.tp-our-capability-card.card-4 {
background: linear-gradient(185.31deg, #138078 7.32%, #309B9C 23.39%, #0D214A 103.61%);
}
.tp-our-capability-card.card-4 .bg-shape {
right: 0;
bottom: 0;
}
@media (max-width: 1600px) {
.tp-our-capability-card {
padding: 60px 45px;
}
}
@media (max-width: 1399px) {
.tp-our-capability-card.card-1 {
height: 460px;
}
.tp-our-capability-card.card-2 {
height: 280px;
}
.tp-our-capability-card .title {
font-size: 30px;
}
.tp-our-capability-grid,
.tp-our-capability-card.card-group {
gap: 20px;
}
}
@media (max-width: 1199px) {
.tp-our-capability-card.card-1 {
height: 360px;
}
.tp-our-capability-card.card-2 {
height: 260px;
}
.tp-our-capability-card .title {
font-size: 24px;
}
.tp-our-capability-grid,
.tp-our-capability-card.card-group {
gap: 15px;
}
.tp-our-capability-card {
padding: 40px 20px;
}
.tp-our-capability-card .link-wrapper {
width: 80px;
height: 80px;
}
.tp-our-capability-card .capability-link {
width: 66px;
height: 66px;
}
.tp-our-capability-card::after {
bottom: 79px;
}
.tp-our-capability-card::before {
right: 80px;
}
.tp-our-capability-card .tp-btn-two {
margin-top: 40px;
margin-bottom: 50px;
}
.tp-our-capability-card .tp-btn-two {
font-size: 16px;
}
}
@media (max-width: 991px) {
.tp-our-capability-grid {
grid-template-columns: 1fr;
}
.tp-our-capability-card {
padding-right: 100px;
}
.tp-our-capability-card.card-1 {
gap: 60px;
height: auto;
}
.tp-our-capability-card.card-2 {
height: 240px;
}
.tp-our-capability-card.card-3 .bg-shape {
width: 100%;
}
.tp-our-capability-card .tp-btn-two {
margin-bottom: 0;
}
}
@media (max-width: 767px) {
.tp-our-capability-card .title {
font-size: 20px;
}
.tp-our-capability-card .tp-btn-two {
font-size: 14px;
}
.tp-our-capability-card p {
font-size: 16px;
}
}
/* new capability actova end */
/*----------------------------------------*/
/* 28. BLOG CSS START
/*----------------------------------------*/
.tp-blog-area .title-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding-bottom: 66px;
margin-bottom: 70px;
}
@media (max-width: 991px) {
.tp-blog-area .title-wrap {
padding-bottom: 50px;
margin-bottom: 50px;
}
}
@media (max-width: 767px) {
.tp-blog-area .title-wrap {
gap: 15px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-bottom: 40px;
margin-bottom: 40px;
}
}
.tp-blog-area .title-wrap::after {
position: absolute;
content: "";
width: calc(100% + 200px);
height: 1px;
left: -100px;
bottom: 0;
background-color: var(--white-3);
}
.tp-blog-area .sec-title {
max-width: 1000px;
}
@media (max-width: 1199px) {
.tp-blog-area .sec-title {
max-width: 670px;
}
}
@media (max-width: 991px) {
.tp-blog-area .sec-title {
max-width: 460px;
}
}
.tp-blog-area-2 .sub-title {
background: var(--white-5);
border: none;
}
.tp-blog-area-2 .tp-btn-two {
padding: 21px 36px;
border: 1px solid var(--black-2);
background-color: var(--white);
}
.tp-blog-area-2 .sec-title-2 {
font-weight: 300;
max-width: 650px;
margin-top: 30px;
margin-bottom: 60px;
}
@media (max-width: 991px) {
.tp-blog-area-2 .sec-title-2 {
margin-top: 20px;
margin-bottom: 40px;
}
}
.tp-blog-area-2 .sec-title-2 span {
font-weight: 500;
}
.tp-blog-area-3 .title-wrap {
text-align: center;
max-width: 750px;
margin: 0 auto;
margin-bottom: 65px;
}
@media (max-width: 767px) {
.tp-blog-area-3 .title-wrap {
margin-bottom: 30px;
}
}
.tp-blog-area-3 .title-wrap p {
font-family: var(--font-mono);
font-size: 18px;
color: var(--black-4);
margin-top: 15px;
}
@media (max-width: 767px) {
.tp-blog-area-3 .title-wrap p {
font-size: 16px;
}
}
.tp-blog-inner-2 {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1.3fr;
grid-template-columns: 1fr 1.3fr;
}
@media (max-width: 991px) {
.tp-blog-inner-2 {
gap: 50px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-blog-inner-3 {
max-width: 1750px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
.tp-blog-list {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1fr 30px 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1199px) {
.tp-blog-list {
gap: 15px;
}
}
@media (max-width: 767px) {
.tp-blog-list {
gap: 40px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-blog-list-2 {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1fr;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 767px) {
.tp-blog-list-2 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-blog-item {
overflow: hidden;
}
.tp-blog-item .thumb {
width: 100%;
display: block;
-o-object-fit: cover;
object-fit: cover;
border-radius: 20px;
overflow: hidden;
}
.tp-blog-item .thumb:hover img {
margin-left: 0;
}
.tp-blog-item .thumb img {
margin-left: 10px;
-webkit-transform: scaleX(1.1);
transform: scaleX(1.1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
@media (max-width: 767px) {
.tp-blog-item .thumb img {
margin-left: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.tp-blog-item .meta {
gap: 32px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 28px;
margin-bottom: 22px;
}
@media (max-width: 1199px) {
.tp-blog-item .meta {
margin-top: 20px;
margin-bottom: 15px;
}
}
.tp-blog-item .meta li {
font-family: var(--font-mono);
font-weight: 400;
font-size: 16px;
line-height: 1;
color: var(--black-2);
position: relative;
}
@media (max-width: 991px) {
.tp-blog-item .meta li {
font-size: 14px;
}
}
.tp-blog-item .meta li:first-child::after {
position: absolute;
content: "";
width: 6px;
height: 6px;
right: -18px;
top: calc(50% - 2px);
border-radius: 100px;
background-color: rgba(2, 2, 2, 0.2);
}
.tp-blog-item .title {
font-weight: 500;
font-size: 32px;
line-height: 1.3;
letter-spacing: -1px;
color: var(--black-2);
margin-bottom: 35px;
}
@media (max-width: 1399px) {
.tp-blog-item .title {
font-size: 28px;
}
}
@media (max-width: 1199px) {
.tp-blog-item .title {
font-size: 24px;
margin-bottom: 30px;
}
}
@media (max-width: 991px) {
.tp-blog-item .title {
font-size: 20px;
}
}
@media (max-width: 767px) {
.tp-blog-item .title {
margin-bottom: 20px;
}
}
.tp-blog-item .title a {
background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
background-repeat: no-repeat;
background-size: 0% 100%;
-webkit-transition: background-size 0.7s;
transition: background-size 0.7s;
}
.tp-blog-item .title:hover a {
background-size: 100% 100%;
}
.tp-blog-item .tp-btn-one {
border: 1px solid var(--white-2);
}
.tp-blog-item-2 {
overflow: hidden;
}
.tp-blog-item-2 .thumb {
display: block;
overflow: hidden;
}
.tp-blog-item-2 .thumb img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 20px;
}
.tp-blog-item-2 .meta {
gap: 32px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 28px;
margin-bottom: 22px;
}
@media (max-width: 1399px) {
.tp-blog-item-2 .meta {
margin-top: 20px;
margin-bottom: 15px;
}
}
@media (max-width: 1199px) {
.tp-blog-item-2 .meta {
margin-top: 18px;
margin-bottom: 12px;
}
}
.tp-blog-item-2 .meta li {
font-family: var(--font-mono);
font-weight: 400;
font-size: 16px;
line-height: 1;
color: var(--black-2);
position: relative;
}
@media (max-width: 991px) {
.tp-blog-item-2 .meta li {
font-size: 14px;
}
}
.tp-blog-item-2 .meta li:first-child::after {
position: absolute;
content: "";
width: 6px;
height: 6px;
right: -18px;
top: calc(50% - 2px);
border-radius: 100px;
background-color: rgba(2, 2, 2, 0.2);
}
.tp-blog-item-2 .title {
font-weight: 500;
line-height: 1.3;
letter-spacing: -1px;
color: var(--black-2);
font-size: 28px;
}
@media (max-width: 1399px) {
.tp-blog-item-2 .title {
font-size: 24px;
}
}
@media (max-width: 1199px) {
.tp-blog-item-2 .title {
font-size: 22px;
}
}
@media (max-width: 991px) {
.tp-blog-item-2 .title {
font-size: 20px;
}
}
.tp-blog-item-2 .title a {
background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
background-repeat: no-repeat;
background-size: 0% 100%;
-webkit-transition: background-size 0.7s;
transition: background-size 0.7s;
}
.tp-blog-item-2 .title:hover a {
background-size: 100% 100%;
}
.tp-blog-item-3 {
padding: 15px 15px 40px;
-webkit-box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
}
.tp-blog-item-3 .content {
padding-left: 25px;
}
@media (max-width: 1199px) {
.tp-blog-item-3 .content {
padding-left: 0;
}
}
.tp-blog-item-3 .thumb {
width: 100%;
display: block;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
border-radius: 10px;
}
.tp-blog-item-3 .thumb img {
border-radius: 10px;
}
.tp-blog-item-3 .thumb svg {
position: absolute;
}
.tp-blog-item-3 .meta {
gap: 10px 32px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 28px;
margin-bottom: 22px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 1199px) {
.tp-blog-item-3 .meta {
margin-top: 20px;
margin-bottom: 15px;
}
}
.tp-blog-item-3 .meta li {
font-family: var(--font-mono);
font-weight: 400;
font-size: 16px;
line-height: 1;
color: var(--black-2);
position: relative;
}
@media (max-width: 991px) {
.tp-blog-item-3 .meta li {
font-size: 14px;
}
}
.tp-blog-item-3 .meta li:first-child::after {
position: absolute;
content: "";
width: 6px;
height: 6px;
right: -18px;
top: calc(50% - 2px);
border-radius: 100px;
background-color: rgba(2, 2, 2, 0.2);
}
.tp-blog-item-3 .title {
font-weight: 500;
font-size: 28px;
line-height: 1.3;
letter-spacing: -1px;
color: var(--black-2);
margin-bottom: 35px;
}
@media (max-width: 1399px) {
.tp-blog-item-3 .title {
font-size: 24px;
margin-bottom: 30px;
}
}
@media (max-width: 1199px) {
.tp-blog-item-3 .title {
font-size: 22px;
}
}
@media (max-width: 991px) {
.tp-blog-item-3 .title {
font-size: 20px;
}
}
@media (max-width: 767px) {
.tp-blog-item-3 .title {
margin-bottom: 20px;
}
}
.tp-blog-item-3 .title a {
background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
background-repeat: no-repeat;
background-size: 0% 100%;
-webkit-transition: background-size 0.7s;
transition: background-size 0.7s;
}
.tp-blog-item-3 .title:hover a {
background-size: 100% 100%;
}
.tp-blog-item-3 .actova-btn-light {
border: 1px solid var(--white-2);
text-transform: capitalize;
font-size: 16px;
}
.tp-blog-details .title {
font-weight: 500;
font-size: 35px;
line-height: 1.3;
color: var(--black-2);
margin-bottom: 20px;
}
@media (max-width: 1399px) {
.tp-blog-details .title {
font-size: 30px;
}
}
@media (max-width: 991px) {
.tp-blog-details .title {
font-size: 24px;
margin-bottom: 12px;
}
}
.tp-blog-details p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
color: var(--black-4);
margin-bottom: 30px;
}
@media (max-width: 991px) {
.tp-blog-details p {
font-size: 16px;
margin-bottom: 20px;
}
}
.tp-blog-details img {
border-radius: 20px;
padding-top: 30px;
margin-bottom: 40px;
}
@media (max-width: 991px) {
.tp-blog-details img {
padding-top: 20px;
margin-bottom: 30px;
}
}
.tp-blog-details .quote-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 40px;
padding-top: 30px;
margin-bottom: 60px;
}
@media (max-width: 991px) {
.tp-blog-details .quote-wrapper {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-blog-details .quote-wrapper {
padding-top: 20px;
margin-bottom: 30px;
gap: 20px;
}
}
.tp-blog-details .quote-text {
font-weight: 400;
font-size: 28px;
line-height: 1.4;
color: var(--black-2);
margin-bottom: 20px;
}
@media (max-width: 1399px) {
.tp-blog-details .quote-text {
font-size: 24px;
}
}
@media (max-width: 991px) {
.tp-blog-details .quote-text {
font-size: 22px;
}
}
@media (max-width: 767px) {
.tp-blog-details .quote-text {
font-size: 18px;
margin-bottom: 10px;
}
}
.tp-blog-details .quote-author {
color: var(--black-2);
font-weight: 500;
font-size: 16px;
line-height: 1.3;
}
.tp-blog-details .qoute-img {
line-height: 0;
padding-top: 20px;
fill: var(--gray);
}
.tp-blog-details ul {
gap: 18px;
display: -ms-grid;
display: grid;
margin-bottom: 40px;
}
@media (max-width: 991px) {
.tp-blog-details ul {
gap: 15px;
margin-bottom: 30px;
}
}
.tp-blog-details ul li {
list-style: none;
font-weight: 400;
font-size: 18px;
line-height: 1.3;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
}
@media (max-width: 991px) {
.tp-blog-details ul li {
font-size: 16px;
}
}
.tp-blog-details-area .separator-bg {
width: 100%;
height: 1px;
background: var(--white-3);
margin-top: 70px;
margin-bottom: 70px;
}
@media (max-width: 1399px) {
.tp-blog-details-area .separator-bg {
margin-top: 50px;
margin-bottom: 50px;
}
}
@media (max-width: 767px) {
.tp-blog-details-area .separator-bg {
margin-top: 25px;
margin-bottom: 25px;
}
}
.tp-blog-details-area .separator-2 {
margin-top: 36px;
margin-bottom: 35px;
}
.tp-blog-details-area .content-wrapper {
max-width: 850px;
margin: 0 auto;
}
.tp-blog-details-header {
text-align: center;
}
.tp-blog-details-header .sec-title-3 {
margin-top: 30px;
margin-bottom: 40px;
font-weight: 500;
}
.tp-blog-details-meta {
gap: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 767px) {
.tp-blog-details-meta {
gap: 15px 10px;
}
}
.tp-blog-details-meta a {
font-weight: 500;
font-size: 16px;
line-height: 1.2;
color: var(--black-2);
margin-right: 30px;
display: inline-block;
}
.tp-blog-details-meta a img {
margin-right: 10px;
}
.tp-blog-details-meta li {
position: relative;
}
.tp-blog-details-meta li:not(:first-child):not(:last-child)::after {
position: absolute;
content: "";
width: 6px;
height: 6px;
border-radius: 100px;
right: -20px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(2, 2, 2, 0.2);
}
.tp-blog-details-footer {
gap: 30px;
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;
}
.tp-blog-details-footer .tp-social-media a {
width: 40px;
height: 40px;
background: transparent;
border: 1px solid var(--white-3);
color: var(--black-2);
}
.tp-blog-details-footer .tp-social-media a:hover {
border-color: var(--primary);
}
.tp-blog-details-tags {
gap: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tp-blog-details-tags li {
font-weight: 500;
font-size: 16px;
line-height: 1.3;
color: var(--black-2);
}
.tp-blog-details-pagination {
gap: 30px;
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;
}
@media (max-width: 991px) {
.tp-blog-details-pagination {
padding-left: 15px;
padding-right: 15px;
}
}
@media (max-width: 767px) {
.tp-blog-details-pagination {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.tp-blog-details-pagination .title {
font-weight: 500;
font-size: 22px;
line-height: 28px;
color: var(--black-2);
max-width: 220px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@media (max-width: 991px) {
.tp-blog-details-pagination .title {
font-size: 20px;
}
}
@media (max-width: 767px) {
.tp-blog-details-pagination .title {
font-size: 18px;
max-width: 100%;
}
}
.tp-blog-details-pagination .next-post,
.tp-blog-details-pagination .prev-post {
gap: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-blog-details-pagination .next-post:hover .icon,
.tp-blog-details-pagination .prev-post:hover .icon {
background-color: var(--primary);
border-color: var(--primary);
}
.tp-blog-details-pagination .next-post {
text-align: right;
}
.tp-blog-details-pagination .icon {
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;
width: 70px;
height: 70px;
border: 1px solid var(--white-3);
border-radius: 100%;
-webkit-box-flex: 0;
-ms-flex: 0 0 70px;
flex: 0 0 70px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@media (max-width: 991px) {
.tp-blog-details-comment {
padding-left: 15px;
padding-right: 15px;
}
}
.tp-blog-details-comment .title {
font-weight: 500;
font-size: 35px;
line-height: 1.3;
color: var(--black-2);
padding-bottom: 30px;
}
@media (max-width: 1399px) {
.tp-blog-details-comment .title {
font-size: 30px;
}
}
@media (max-width: 991px) {
.tp-blog-details-comment .title {
font-size: 24px;
padding-bottom: 20px;
}
}
.tp-blog-standard-area .tp-blog-item p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
color: var(--black-4);
}
@media (max-width: 991px) {
.tp-blog-standard-area .tp-blog-item p {
font-size: 16px;
}
}
.tp-blog-standard-area .tp-blog-item .title {
margin-bottom: 20px;
}
@media (max-width: 991px) {
.tp-blog-standard-area .tp-blog-item .title {
font-size: 22px;
margin-bottom: 15px;
}
}
@media (max-width: 767px) {
.tp-blog-standard-area .tp-blog-item .title {
margin-bottom: 10px;
}
}
.tp-blog-standard-wrapper {
gap: 30px;
display: -ms-grid;
display: grid;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-grid-columns: 2.1fr 30px 1fr;
grid-template-columns: 2.1fr 1fr;
}
@media (max-width: 991px) {
.tp-blog-standard-wrapper {
gap: 20px;
-ms-grid-columns: 1.5fr 20px 1fr;
grid-template-columns: 1.5fr 1fr;
}
}
@media (max-width: 767px) {
.tp-blog-standard-wrapper {
gap: 40px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-blog-standard-list {
gap: 60px;
display: -ms-grid;
display: grid;
}
@media (max-width: 1199px) {
.tp-blog-standard-list {
gap: 50px;
}
}
@media (max-width: 991px) {
.tp-blog-standard-list {
gap: 40px;
}
}
.tp-blog-pagination ul {
gap: 25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tp-blog-pagination ul a {
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: var(--white-4);
border-radius: 100px;
width: 40px;
height: 40px;
color: var(--black-2);
font-weight: 500;
font-size: 16px;
line-height: 1;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-blog-pagination ul a.active,
.tp-blog-pagination ul a:hover {
background-color: var(--primary);
}
.tp-blog-pagination-wrapper {
gap: 30px;
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;
}
.tp-blog-pagination-wrapper .next-post a,
.tp-blog-pagination-wrapper .prev-post a {
width: 70px;
height: 70px;
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;
border: 1px solid var(--white-3);
border-radius: 100px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-blog-pagination-wrapper .next-post a:hover,
.tp-blog-pagination-wrapper .prev-post a:hover {
background-color: var(--primary);
border-color: var(--primary);
}
.tp-blog-sidebar {
gap: 40px;
display: -ms-grid;
display: grid;
}
@media (max-width: 1399px) {
.tp-blog-sidebar {
gap: 30px;
}
}
@media (max-width: 991px) {
.tp-blog-sidebar {
gap: 20px;
}
}
.tp-blog-widget-title {
font-weight: 500;
font-size: 25px;
line-height: 1.3;
color: var(--black-2);
padding-bottom: 28px;
}
@media (max-width: 1199px) {
.tp-blog-widget-title {
font-size: 22px;
padding-bottom: 20px;
}
}
@media (max-width: 991px) {
.tp-blog-widget-title {
font-size: 20px;
}
}
.tp-blog-widget-search form {
position: relative;
}
.tp-blog-widget-search form input {
width: 100%;
height: 70px;
border: none;
border-radius: 10px;
background-color: var(--white-4);
padding: 18px 25px 18px 55px;
color: var(--gray);
font-weight: 500;
font-size: 16px;
line-height: 1;
opacity: 1;
}
@media (max-width: 991px) {
.tp-blog-widget-search form input {
height: 55px;
padding: 15px 15px 15px 40px;
}
}
.tp-blog-widget-search form input::-webkit-input-placeholder {
color: var(--gray);
}
.tp-blog-widget-search form input::-moz-placeholder {
color: var(--gray);
}
.tp-blog-widget-search form input:-ms-input-placeholder {
color: var(--gray);
}
.tp-blog-widget-search form input::-ms-input-placeholder {
color: var(--gray);
}
.tp-blog-widget-search form input::placeholder {
color: var(--gray);
}
.tp-blog-widget-search form .search-icon {
position: absolute;
left: 25px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@media (max-width: 991px) {
.tp-blog-widget-search form .search-icon {
left: 15px;
}
}
.tp-blog-widget-lposts {
padding: 32px 30px;
border: 1px solid var(--white-2);
border-radius: 10px;
}
@media (max-width: 1199px) {
.tp-blog-widget-lposts {
padding: 25px 15px;
}
}
.tp-blog-widget-lposts .lpost-item:not(:last-child) {
border-bottom: 1px solid var(--white-2);
padding-bottom: 25px;
margin-bottom: 30px;
}
.tp-blog-widget-lposts .categories {
gap: 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 10px;
}
.tp-blog-widget-lposts .categories a {
background: var(--white-4);
color: var(--black-4);
font-family: var(--font-mono);
font-weight: 400;
font-size: 15px;
line-height: 1.1;
padding: 6px 13px;
border-radius: 100px;
display: inline-block;
}
@media (max-width: 991px) {
.tp-blog-widget-lposts .categories a {
font-size: 14px;
}
}
.tp-blog-widget-lposts .title {
font-weight: 500;
font-size: 18px;
line-height: 1.45;
color: var(--black-2);
margin-bottom: 15px;
}
@media (max-width: 991px) {
.tp-blog-widget-lposts .title {
font-size: 16px;
}
}
.tp-blog-widget-lposts .title:hover a {
background-size: 100% 100%;
}
.tp-blog-widget-lposts .title a {
background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
background-repeat: no-repeat;
background-size: 0% 100%;
-webkit-transition: background-size 0.7s;
transition: background-size 0.7s;
}
.tp-blog-widget-lposts .date {
font-size: 15px;
}
@media (max-width: 991px) {
.tp-blog-widget-lposts .date {
font-size: 14px;
}
}
.tp-blog-widget-category {
padding: 32px 30px;
border: 1px solid var(--white-2);
border-radius: 10px;
}
@media (max-width: 1199px) {
.tp-blog-widget-category {
padding: 25px 15px;
}
}
.tp-blog-widget-category ul {
gap: 17px;
display: -ms-grid;
display: grid;
}
@media (max-width: 1199px) {
.tp-blog-widget-category ul {
gap: 10px;
}
}
.tp-blog-widget-category a {
display: inline-block;
font-weight: 500;
font-size: 18px;
line-height: 1.3;
color: var(--black-2);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@media (max-width: 991px) {
.tp-blog-widget-category a {
font-size: 16px;
}
}
.tp-blog-widget-category a:hover {
letter-spacing: 0.5px;
}
.tp-comment-item {
gap: 25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 40px;
}
.tp-comment-item .name {
font-weight: 500;
font-size: 22px;
line-height: 1.4;
color: var(--black-2);
}
@media (max-width: 991px) {
.tp-comment-item .name {
font-size: 20px;
}
}
.tp-comment-item p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.3;
color: var(--black-2);
padding-top: 8px;
}
@media (max-width: 991px) {
.tp-comment-item p {
font-size: 16px;
}
}
.tp-comment-form {
background: var(--white-7);
padding: 70px;
border-radius: 20px;
}
@media (max-width: 991px) {
.tp-comment-form {
margin-left: 15px;
margin-right: 15px;
padding: 40px;
}
}
@media (max-width: 767px) {
.tp-comment-form {
padding: 30px 15px;
}
}
.tp-comment-form .title {
font-weight: 500;
font-size: 35px;
line-height: 1.3;
color: var(--black-2);
padding-bottom: 15px;
}
@media (max-width: 1399px) {
.tp-comment-form .title {
font-size: 30px;
}
}
@media (max-width: 991px) {
.tp-comment-form .title {
font-size: 24px;
}
}
.tp-comment-form p {
color: var(--black-4);
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
padding-bottom: 60px;
}
@media (max-width: 991px) {
.tp-comment-form p {
font-size: 16px;
padding-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-comment-form p {
padding-bottom: 30px;
}
}
.tp-comment-form .input-fields {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1fr;
grid-template-columns: 1fr 1fr;
margin-bottom: 30px;
}
@media (max-width: 991px) {
.tp-comment-form .input-fields {
gap: 20px;
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.tp-comment-form .input-fields {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-comment-form label {
font-weight: 500;
font-size: 16px;
line-height: 24px;
display: block;
padding-bottom: 8px;
}
.tp-comment-form textarea,
.tp-comment-form input {
width: 100%;
color: var(--gray);
font-weight: 400;
font-size: 16px;
line-height: 1.5;
padding: 17px 25px;
border-radius: 10px;
border: 1px solid var(--white-3);
opacity: 1;
}
.tp-comment-form textarea::-webkit-input-placeholder,
.tp-comment-form input::-webkit-input-placeholder {
color: var(--gray);
}
.tp-comment-form textarea::-moz-placeholder,
.tp-comment-form input::-moz-placeholder {
color: var(--gray);
}
.tp-comment-form textarea:-ms-input-placeholder,
.tp-comment-form input:-ms-input-placeholder {
color: var(--gray);
}
.tp-comment-form textarea::-ms-input-placeholder,
.tp-comment-form input::-ms-input-placeholder {
color: var(--gray);
}
.tp-comment-form textarea::placeholder,
.tp-comment-form input::placeholder {
color: var(--gray);
}
.tp-comment-form textarea {
height: 150px;
margin-bottom: 60px;
}
@media (max-width: 991px) {
.tp-comment-form textarea {
margin-bottom: 40px;
}
}
.tp-comment-form .actova-btn-primary {
border: none;
}
/*----------------------------------------*/
/* 29. CONTACT CSS START
/*----------------------------------------*/
.tp-contact-area {
padding-top: 180px;
padding-bottom: 190px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: center;
position: relative;
overflow: hidden;
}
@media (max-width: 1399px) {
.tp-contact-area {
padding-top: 140px;
padding-bottom: 150px;
}
}
@media (max-width: 1199px) {
.tp-contact-area {
padding-top: 120px;
padding-bottom: 130px;
}
}
@media (max-width: 991px) {
.tp-contact-area {
padding-top: 100px;
padding-bottom: 110px;
}
}
@media (max-width: 767px) {
.tp-contact-area {
padding-top: 80px;
padding-bottom: 80px;
}
}
.tp-contact-area video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.tp-contact-area .title {
font-weight: 500;
font-size: 100px;
line-height: 1;
letter-spacing: -5px;
color: var(--black-2);
color: var(--white);
margin-bottom: 25px;
}
@media (max-width: 1399px) {
.tp-contact-area .title {
font-size: 90px;
}
}
@media (max-width: 1199px) {
.tp-contact-area .title {
font-size: 80px;
}
}
@media (max-width: 991px) {
.tp-contact-area .title {
font-size: 60px;
}
}
@media (max-width: 767px) {
.tp-contact-area .title {
font-size: 36px;
letter-spacing: -2px;
}
}
.tp-contact-area p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 22px;
line-height: 1.3;
color: var(--black-2);
color: var(--white);
max-width: 850px;
margin: 0 auto;
margin-bottom: 65px;
}
@media (max-width: 991px) {
.tp-contact-area p {
margin-bottom: 50px;
font-size: 20px;
}
}
@media (max-width: 767px) {
.tp-contact-area p {
font-size: 18px;
margin-bottom: 40px;
}
}
.tp-contact-area.service-page .tp-contact-btns .tp-btn-one:hover .btn-wrap .text-two {
color: var(--white);
}
.tp-contact-area.service-page .tp-contact-btns .tp-btn-one::before {
background-color: var(--black-2);
}
.tp-contact-inner {
z-index: 2;
position: relative;
}
.tp-contact-btns {
gap: 35px;
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;
}
@media (max-width: 767px) {
.tp-contact-btns {
gap: 15px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.tp-contact-btns .tp-btn-one {
font-weight: 400;
padding: 26px 49px;
font-size: 25px;
text-transform: initial;
letter-spacing: -0.84px;
}
@media (max-width: 1399px) {
.tp-contact-btns .tp-btn-one {
font-size: 24px;
}
}
@media (max-width: 991px) {
.tp-contact-btns .tp-btn-one {
font-size: 20px;
}
}
@media (max-width: 767px) {
.tp-contact-btns .tp-btn-one {
padding: 20px 40px;
}
}
.tp-contact-btns .tp-btn-one::before {
background-color: var(--primary);
}
.tp-contact-btns .tp-btn-one:hover .btn-wrap .text-two {
color: var(--black-2);
}
.tp-btn-one.esf {
background: var(--tp-theme-primary);
}
.tp-contact-page-area {
position: relative;
overflow: hidden;
}
.tp-contact-bg-color {
position: absolute;
top: -50%;
z-index: -1;
left: 18%;
}
.tp-contact-page-area .sec-title-3 {
max-width: 610px;
text-align: center;
margin: 0 auto;
margin-bottom: 50px;
font-weight: 500;
line-height: 1.3;
}
.tp-contact-page-area .contact-top {
border-bottom: 1px solid var(--white-3);
padding-bottom: 65px;
margin-bottom: 70px;
}
@media (max-width: 1199px) {
.tp-contact-page-area .contact-top {
padding-bottom: 50px;
margin-bottom: 50px;
}
}
@media (max-width: 991px) {
.tp-contact-page-area .contact-top {
padding-bottom: 40px;
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-contact-page-area .contact-top {
padding-bottom: 30px;
margin-bottom: 30px;
}
}
.tp-contact-page-wrapper {
gap: 110px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 110px 1.7fr;
grid-template-columns: 1fr 1.7fr;
}
@media (max-width: 1399px) {
.tp-contact-page-wrapper {
gap: 50px;
}
}
@media (max-width: 991px) {
.tp-contact-page-wrapper {
gap: 40px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-contact-page-form {
background: var(--white-4);
border-radius: 20px;
padding: 60px 45px;
}
@media (max-width: 1399px) {
.tp-contact-page-form {
padding: 45px 30px;
}
}
@media (max-width: 1199px) {
.tp-contact-page-form {
padding: 40px 30px;
}
}
@media (max-width: 767px) {
.tp-contact-page-form {
padding: 40px 20px;
}
}
.tp-contact-page-form .field-group {
display: -ms-grid;
display: grid;
gap: 30px;
-ms-grid-columns: 1fr 30px 1fr;
grid-template-columns: 1fr 1fr;
margin-bottom: 30px;
}
@media (max-width: 1399px) {
.tp-contact-page-form .field-group {
gap: 20px;
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.tp-contact-page-form .field-group {
gap: 15px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-contact-page-form textarea,
.tp-contact-page-form select,
.tp-contact-page-form input {
width: 100%;
padding: 24px;
color: var(--gray);
font-weight: 500;
font-size: 16px;
line-height: 1.3;
border-radius: 10px;
border: 1px solid transparent;
opacity: 1;
}
@media (max-width: 1199px) {
.tp-contact-page-form textarea,
.tp-contact-page-form select,
.tp-contact-page-form input {
padding: 18px 20px;
}
}
.tp-contact-page-form textarea::-webkit-input-placeholder,
.tp-contact-page-form select::-webkit-input-placeholder,
.tp-contact-page-form input::-webkit-input-placeholder {
color: var(--gray);
}
.tp-contact-page-form textarea::-moz-placeholder,
.tp-contact-page-form select::-moz-placeholder,
.tp-contact-page-form input::-moz-placeholder {
color: var(--gray);
}
.tp-contact-page-form textarea:-ms-input-placeholder,
.tp-contact-page-form select:-ms-input-placeholder,
.tp-contact-page-form input:-ms-input-placeholder {
color: var(--gray);
}
.tp-contact-page-form textarea::-ms-input-placeholder,
.tp-contact-page-form select::-ms-input-placeholder,
.tp-contact-page-form input::-ms-input-placeholder {
color: var(--gray);
}
.tp-contact-page-form textarea::placeholder,
.tp-contact-page-form select::placeholder,
.tp-contact-page-form input::placeholder {
color: var(--gray);
}
.tp-contact-page-form textarea:focus,
.tp-contact-page-form select:focus,
.tp-contact-page-form input:focus {
border-color: var(--black-2);
}
.tp-contact-page-form textarea {
border-radius: 10px;
height: 200px;
}
.tp-contact-page-form .select-wrapper {
position: relative;
width: 100%;
}
.tp-contact-page-form .select-wrapper select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.tp-contact-page-form .select-wrapper::after {
content: "";
position: absolute;
top: 50%;
right: 20px;
width: 8px;
height: 7px;
background: url("data:image/svg+xml;utf8,") no-repeat center;
background-size: contain;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
pointer-events: none;
}
.tp-contact-page-form label {
gap: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 30px;
margin-bottom: 70px;
}
@media (max-width: 1399px) {
.tp-contact-page-form label {
margin-bottom: 50px;
}
}
@media (max-width: 1199px) {
.tp-contact-page-form label {
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.tp-contact-page-form label {
margin-top: 15px;
}
}
.tp-contact-page-form label input {
width: auto;
-ms-flex-item-align: start;
align-self: flex-start;
margin-top: 7px;
}
.tp-contact-page-form .actova-btn-secondary {
gap: 10px;
width: 100%;
border: 0;
background-color: var(--primary);
fill: var(--black-2);
color: var(--black-2);
text-transform: uppercase;
}
.tp-contact-page-form .actova-btn-secondary:hover {
background-color: var(--black-2);
fill: var(--white);
color: var(--white);
}
.tp-contact-list {
gap: 30px 15px;
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;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 767px) {
.tp-contact-list {
gap: 15px;
}
}
.tp-contact-type {
gap: 20px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 60px 20px auto;
grid-template-columns: 60px auto;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-contact-type:hover .icon {
background-color: var(--black-2);
color: var(--white);
}
.tp-contact-type .icon {
width: 60px;
height: 60px;
border-radius: 100px;
background-color: var(--primary);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 20px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-contact-type p {
font-weight: 400;
font-size: 18px;
line-height: 1.3;
color: var(--black-2);
font-family: var(--font-mono);
padding-bottom: 5px;
}
@media (max-width: 1199px) {
.tp-contact-type p {
font-size: 16px;
}
}
.tp-contact-type a {
display: inline-block;
font-weight: 500;
font-size: 22px;
line-height: 1.3;
color: var(--black-2);
-webkit-transition: all 0.3s;
transition: all 0.3s;
position: relative;
}
@media (max-width: 1199px) {
.tp-contact-type a {
font-size: 18px;
}
}
.tp-contact-type a:hover::after {
width: 100%;
}
.tp-contact-type a::after {
position: absolute;
content: "";
width: 0;
height: 1px;
bottom: 0;
left: 0;
background-color: var(--black-2);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-contact-location {
gap: 20px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 50px 20px auto;
grid-template-columns: 50px auto;
margin-bottom: 50px;
}
@media (max-width: 1399px) {
.tp-contact-location {
margin-bottom: 40px;
}
}
@media (max-width: 991px) {
.tp-contact-location {
margin-bottom: 30px;
}
}
.tp-contact-location .icon {
width: 50px;
height: 50px;
border: 1px solid var(--white-3);
border-radius: 100px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 24px;
margin-top: 5px;
}
.tp-contact-location p {
color: var(--black-2);
font-weight: 500;
font-size: 22px;
line-height: 1.3;
padding-bottom: 15px;
}
@media (max-width: 1399px) {
.tp-contact-location p {
padding-bottom: 10px;
}
}
@media (max-width: 1199px) {
.tp-contact-location p {
font-size: 20px;
padding-bottom: 5px;
}
}
@media (max-width: 767px) {
.tp-contact-location p {
font-size: 18px;
}
}
.tp-contact-location a {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 26px;
color: var(--black-4);
-webkit-transition: all 0.3s;
transition: all 0.3s;
position: relative;
background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
background-repeat: no-repeat;
background-size: 0% 100%;
-webkit-transition: background-size 0.7s;
transition: background-size 0.7s;
}
@media (max-width: 1199px) {
.tp-contact-location a {
font-size: 16px;
}
}
.tp-contact-location a:hover {
background-size: 100% 100%;
}
.tp-live-chat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 15px;
border: 1px solid var(--white-3);
padding: 20px;
border-radius: 10px;
}
@media (max-width: 1199px) {
.tp-live-chat {
padding: 15px 20px;
}
}
.tp-live-chat p {
font-weight: 500;
font-size: 22px;
line-height: 1.3;
color: var(--black-2);
padding-bottom: 8px;
}
@media (max-width: 1199px) {
.tp-live-chat p {
font-size: 20px;
}
}
@media (max-width: 767px) {
.tp-live-chat p {
font-size: 18px;
}
}
.tp-live-chat a {
font-weight: 500;
font-size: 18px;
line-height: 1.45;
color: var(--black-2);
-webkit-transition: all 0.3s;
transition: all 0.3s;
display: inline-block;
}
@media (max-width: 1199px) {
.tp-live-chat a {
font-size: 16px;
}
}
.tp-map-area iframe {
width: 100%;
height: 680px;
}
@media (max-width: 1399px) {
.tp-map-area iframe {
height: 580px;
}
}
@media (max-width: 1199px) {
.tp-map-area iframe {
height: 480px;
}
}
@media (max-width: 991px) {
.tp-map-area iframe {
height: 400px;
}
}
@media (max-width: 767px) {
.tp-map-area iframe {
height: 320px;
}
}
/*----------------------------------------*/
/* 30. FOOTER CSS START
/*----------------------------------------*/
.tp-footer-area {
background-color: #4f2a65
}
.tp-footer-top {
gap: 20px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1.34fr 20px 390px 20px 1fr;
grid-template-columns: 1.34fr 390px 1fr;
border-bottom: 1px solid rgba(255, 255, 255, 0.1490196078);
padding-bottom: 110px;
}
@media (max-width: 991px) {
.tp-footer-top {
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
padding-bottom: 90px;
}
}
@media (max-width: 767px) {
.tp-footer-top {
gap: 40px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
padding-bottom: 50px;
}
}
.tp-footer-top-2 {
gap: 40px 20px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 20px 0.4fr 20px 0.4fr 20px 0.45fr;
grid-template-columns: 1fr 0.4fr 0.4fr 0.45fr;
}
@media (max-width: 1919px) {
.tp-footer-top-2 {
-ms-grid-columns: 1fr 0.5fr 0.5fr 0.7fr;
grid-template-columns: 1fr 0.5fr 0.5fr 0.7fr;
}
}
@media (max-width: 1399px) {
.tp-footer-top-2 {
-ms-grid-columns: 1fr 0.5fr 0.5fr 0.8fr;
grid-template-columns: 1fr 0.5fr 0.5fr 0.8fr;
}
}
@media (max-width: 991px) {
.tp-footer-top-2 {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.tp-footer-top-2 {
gap: 30px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-footer-middile {
gap: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1.57fr 30px 1fr 30px 1fr;
grid-template-columns: 1.57fr 1fr 1fr;
}
@media (max-width: 1399px) {
.tp-footer-middile {
-ms-grid-columns: 1.1fr 1fr 1fr;
grid-template-columns: 1.1fr 1fr 1fr;
}
}
@media (max-width: 767px) {
.tp-footer-middile {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-footer-middile .online-docs a {
background: var(--black-6);
border-radius: 100px;
padding: 15px 20px;
font-weight: 500;
font-size: 16px;
line-height: 1.3;
color: var(--white);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
}
@media (max-width: 1199px) {
.tp-footer-middile .online-docs a {
gap: 15px;
}
}
.tp-footer-middile .online-docs a span {
width: 40px;
height: 40px;
border-radius: 100px;
background-color: var(--primary);
border-radius: 100px;
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;
}
.tp-footer-middile .tp-footer-widget p {
max-width: 380px;
}
.tp-footer-widget p {
font-weight: 400;
font-size: 21px;
line-height: 1.5;
color: var(--white);
}
@media (max-width: 1399px) {
.tp-footer-widget p {
font-size: 20px;
}
}
@media (max-width: 1199px) {
.tp-footer-widget p {
font-size: 18px;
}
}
@media (max-width: 991px) {
.tp-footer-widget p {
font-size: 16px;
}
}
.tp-footer-widget p a {
-webkit-transition: all 0.3s;
transition: all 0.3s;
border-bottom: 1px solid var(--white);
}
.tp-footer-widget p a:hover {
color: var(--primary);
border-color: var(--primary);
}
.tp-footer-widget .title {
font-weight: 500;
font-size: 18px;
line-height: 1;
letter-spacing: -0.54px;
color: var(--gray);
text-transform: uppercase;
margin-bottom: 30px;
}
@media (max-width: 767px) {
.tp-footer-widget .title {
margin-bottom: 20px;
}
}
.tp-footer-widget .title-2 {
color: var(--white);
font-weight: 500;
font-size: 28px;
line-height: 1.3;
margin-bottom: 30px;
}
@media (max-width: 1399px) {
.tp-footer-widget .title-2 {
font-size: 24px;
margin-bottom: 25px;
}
}
@media (max-width: 991px) {
.tp-footer-widget .title-2 {
font-size: 20px;
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.tp-footer-widget .title-2 {
font-size: 18px;
margin-bottom: 12px;
}
}
.tp-footer-widget .map-link {
font-weight: 500;
font-size: 15px;
line-height: 1;
text-decoration: underline;
color: var(--gray);
display: inline-block;
margin-top: 25px;
}
.tp-footer-widget .map-link:hover {
color: var(--primary);
}
.tp-footer-widget .contact-info li {
padding-bottom: 15px;
}
@media (max-width: 991px) {
.tp-footer-widget .contact-info li {
padding-bottom: 10px;
}
}
.tp-footer-widget .contact-info a {
font-weight: 400;
font-size: 22px;
line-height: 1.3;
color: var(--white);
}
@media (max-width: 1399px) {
.tp-footer-widget .contact-info a {
font-size: 20px;
}
}
@media (max-width: 1199px) {
.tp-footer-widget .contact-info a {
font-size: 18px;
}
}
@media (max-width: 991px) {
.tp-footer-widget .contact-info a {
font-size: 16px;
}
}
.tp-footer-widget .contact-info a:hover {
color: var(--primary);
}
.tp-footer-widget.logo-widget p {
margin-top: 30px;
margin-bottom: 40px;
}
@media (max-width: 767px) {
.tp-footer-widget.logo-widget p {
margin-top: 25px;
margin-bottom: 30px;
}
}
.tp-footer-widget.contact-widget {
margin-left: auto;
}
@media (max-width: 767px) {
.tp-footer-widget.contact-widget {
margin-left: 0;
}
}
.tp-footer-bottom {
padding-top: 32px;
padding-bottom: 84px;
}
@media (max-width: 1199px) {
.tp-footer-bottom {
padding-bottom: 60px;
}
}
@media (max-width: 767px) {
.tp-footer-bottom {
padding-bottom: 35px;
}
}
.tp-footer-bottom-2 {
padding-top: 100px;
padding-bottom: 15px;
}
@media (max-width: 1399px) {
.tp-footer-bottom-2 {
padding-top: 80px;
}
}
@media (max-width: 991px) {
.tp-footer-bottom-2 {
padding-top: 60px;
}
}
@media (max-width: 767px) {
.tp-footer-bottom-2 {
padding-top: 30px;
}
}
.tp-footer-bottom-wrap-2 {
border-top: 1px solid rgba(255, 255, 255, 0.1490196078);
padding-top: 68px;
margin-top: 65px;
}
@media (max-width: 991px) {
.tp-footer-bottom-wrap-2 {
padding-top: 55px;
margin-top: 50px;
}
}
.tp-footer-menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-bottom: 60px;
}
@media (max-width: 1199px) {
.tp-footer-menu {
padding-bottom: 55px;
}
}
@media (max-width: 767px) {
.tp-footer-menu {
gap: 10px 15px;
padding-bottom: 40px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.tp-footer-menu a {
font-weight: 500;
font-size: 18px;
line-height: 1;
letter-spacing: -0.54px;
text-transform: uppercase;
color: var(--gray);
display: inline-block;
}
@media (max-width: 1399px) {
.tp-footer-menu a {
font-size: 17px;
}
}
@media (max-width: 1199px) {
.tp-footer-menu a {
font-size: 16px;
}
}
@media (max-width: 767px) {
.tp-footer-menu a {
font-size: 14px;
}
}
.tp-footer-menu a:hover {
color: var(--white);
}
.tp-footer-copyright {
font-weight: 500;
font-size: 220px;
line-height: 1;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.1490196078);
text-align: center;
}
@media (max-width: 1919px) {
.tp-footer-copyright {
font-size: 110px;
}
}
@media (max-width: 1399px) {
.tp-footer-copyright {
font-size: 110px;
}
}
@media (max-width: 1199px) {
.tp-footer-copyright {
font-size: 110px;
}
}
@media (max-width: 991px) {
.tp-footer-copyright {
font-size: 50px;
}
}
@media (max-width: 767px) {
.tp-footer-copyright {
font-size: 20px;
}
}
.tp-footer-copyright-2 {
font-weight: 400;
font-size: 18px;
line-height: 1.3;
color: var(--gray);
text-align: center;
}
@media (max-width: 767px) {
.tp-footer-copyright-2 {
font-size: 16px;
}
}
.tp-footer-copyright-2 a {
color: var(--white);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.logo-widget {
padding-top: 6px;
}
.tp-social-media {
gap: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 991px) {
.tp-social-media {
gap: 8px;
}
}
.tp-social-media a {
width: 48px;
height: 48px;
color: var(--white);
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;
border-radius: 100px;
background-color: var(--black-6);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tp-social-media a:hover {
color: var(--black-2);
background-color: var(--primary);
}
.quick-link-widget ul {
gap: 23px;
display: -ms-grid;
display: grid;
}
@media (max-width: 1399px) {
.quick-link-widget ul {
gap: 18px;
}
}
@media (max-width: 1199px) {
.quick-link-widget ul {
gap: 12px;
}
}
@media (max-width: 767px) {
.quick-link-widget ul {
gap: 5px;
}
}
.quick-link-widget ul li a {
font-weight: 500;
font-size: 18px;
line-height: 1.3;
color: var(--gray);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@media (max-width: 991px) {
.quick-link-widget ul li a {
font-size: 16px;
}
}
.quick-link-widget ul li a:hover {
color: var(--white);
}
.newsletter-widget form {
position: relative;
margin-bottom: 30px;
}
.newsletter-widget form input {
color: var(--gray);
font-weight: 500;
font-size: 16px;
line-height: 1.3;
background-color: #171616;
border-radius: 10px;
width: 100%;
border: none;
padding: 22px 28px;
}
@media (max-width: 767px) {
.newsletter-widget form input {
padding: 18px 15px;
}
}
.newsletter-widget form input::-webkit-input-placeholder {
opacity: 1;
color: var(--gray);
}
.newsletter-widget form input::-moz-placeholder {
opacity: 1;
color: var(--gray);
}
.newsletter-widget form input:-ms-input-placeholder {
opacity: 1;
color: var(--gray);
}
.newsletter-widget form input::-ms-input-placeholder {
opacity: 1;
color: var(--gray);
}
.newsletter-widget form input::placeholder {
opacity: 1;
color: var(--gray);
}
.newsletter-widget form .submit {
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: transparent;
border: none;
font-size: 18px;
color: var(--primary);
}
@media (max-width: 1199px) {
.newsletter-widget .tp-user-box-2 {
gap: 50px;
}
}
@media (max-width: 991px) {
.newsletter-widget .tp-user-box-2 {
gap: 20px;
}
}
.newsletter-widget .tp-user-box-2 .text p {
color: var(--white);
font-family: var(--font-mono);
}
@media (max-width: 991px) {
.newsletter-widget .tp-user-box-2 .text p {
font-size: 16px;
}
}
.newsletter-widget .tp-user-box-2 .text p span {
color: var(--primary);
}
/*----------------------------------------*/
/* 31. HOME FIVE CSS START
/*----------------------------------------*/
.elastic-anim div {
display: inline-block;
}
.mover-wrap {
color: var(--white);
position: absolute;
inset: 0;
padding: 1px;
background: rgba(255, 255, 255, 0.0862745098);
border-radius: 100px;
-webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--white))) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--white)));
-webkit-mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0);
mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--white))) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--white)));
mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.border-move {
background: conic-gradient(from 290deg, transparent 0%, var(--white) 10%, transparent 20%);
-webkit-animation: borderMoveAnimation 4s linear infinite;
animation: borderMoveAnimation 4s linear infinite;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
aspect-ratio: 1/1;
}
.tp-header-area-5 {
z-index: 2;
padding-top: 12px;
}
.tp-header-area-5 .actova-btn-secondary {
background-color: var(--white);
color: var(--black-2);
fill: var(--black-2);
text-transform: uppercase;
}
.tp-header-area-5 .actova-btn-secondary:hover {
background-color: var(--primary);
}
.tp-header-area-6 {
z-index: 2;
padding-top: 12px;
}
.tp-header-area-6 .tp-header-btn {
display: none;
}
@media (max-width: 1199px) {
.tp-header-area-6 .tp-header-btn {
display: block;
}
}
.tp-hero5-area {
background: var(--black-2);
padding-top: 260px;
text-align: center;
position: relative;
}
@media (max-width: 1399px) {
.tp-hero5-area {
padding-top: 160px;
}
}
.tp-hero5-area .title {
font-weight: 700;
font-size: 100px;
line-height: 1;
letter-spacing: -5px;
color: var(--white);
padding-top: 25px;
padding-bottom: 60px;
}
.tp-hero5-area .title span {
color: var(--primary);
}
.tp-hero5-area .subtitle {
color: var(--white);
font-weight: 500;
font-size: 16px;
line-height: 1.2;
border: 1px solid rgba(255, 255, 255, 0.1490196078);
backdrop-filter: blur(74px);
display: inline-block;
padding: 7px 8px;
border-radius: 100px;
}
.tp-hero5-area .subtitle span {
color: var(--black-2);
display: inline-block;
border-radius: 100px;
padding: 3px 8px;
background-color: var(--primary);
font-size: 14px;
}
.tp-hero5-area form {
width: 770px;
margin: 0 auto;
position: relative;
}
.tp-hero5-area form input {
width: 100%;
height: 80px;
border-radius: 100px;
padding: 0 200px 0 40px;
font-size: 16px;
color: var(--white);
background: #1A1A1A;
border: 1px solid #333333;
backdrop-filter: blur(220px);
color: var(--white);
}
.tp-hero5-area form input::-webkit-input-placeholder {
color: var(--white);
}
.tp-hero5-area form input::-moz-placeholder {
color: var(--white);
}
.tp-hero5-area form input:-ms-input-placeholder {
color: var(--white);
}
.tp-hero5-area form input::-ms-input-placeholder {
color: var(--white);
}
.tp-hero5-area form input::placeholder {
color: var(--white);
}
.tp-hero5-area form .submit {
color: var(--black-2);
font-weight: 500;
font-size: 15px;
line-height: 1.3;
position: absolute;
right: 10px;
top: 10px;
height: 60px;
border-radius: 100px;
width: 190px;
border: none;
outline: none;
background-color: var(--primary);
}
.tp-hero5-area form .border-move {
background: conic-gradient(from 290deg, #353535 10%, var(--white) 40%, transparent 20%);
height: 770px;
}
.tp-hero5-area ul {
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: 50px;
padding-top: 30px;
}
@media (max-width: 1199px) {
.tp-hero5-area ul {
padding-top: 20px;
}
}
.tp-hero5-area ul li {
font-weight: 400;
font-size: 16px;
line-height: 1.3;
color: var(--white);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 8px;
}
.tp-hero5-area 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: 18px;
height: 18px;
background-color: var(--primary);
border-radius: 50%;
color: var(--black-2);
font-size: 12px;
}
.tp-hero5-area .hero5-img {
-webkit-perspective: 1000px;
perspective: 1000px;
margin-bottom: -400px;
position: relative;
z-index: 3;
}
.tp-hero5-area .hero5-img img {
width: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(30deg);
transform: rotateX(30deg);
-webkit-transition: all 0.7s;
transition: all 0.7s;
}
.tp-hero5-area .hero-lines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.tp-hero5-area .line {
position: absolute;
width: 2px;
height: 2px;
background: rgba(255, 255, 255, 0.7);
border-radius: 50%;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-filter: blur(1px);
filter: blur(1px);
}
.tp-hero5-area .hero5-bg {
position: absolute;
top: 0;
background-position: center center;
background-repeat: no-repeat;
}
.tp-hero5-area .tp-hero5-content {
position: relative;
z-index: 1;
-webkit-transition: all 0.7s;
transition: all 0.7s;
}
.tp-hero5-area .snowflake {
position: absolute;
pointer-events: none;
opacity: 0.9;
-webkit-transition: -webkit-transform 45s linear;
transition: -webkit-transform 45s linear;
transition: transform 45s linear;
transition: transform 45s linear, -webkit-transform 45s linear;
}
.tp-chat-area {
background: var(--white);
padding-top: 220px;
position: relative;
}
@media (max-width: 1399px) {
.tp-chat-area {
padding-top: 200px;
}
}
@media (max-width: 1199px) {
.tp-chat-area {
padding-top: 180px;
}
}
.tp-chat-area #move_anim {
position: absolute;
bottom: 175px;
left: 0;
}
.tp-chat-area .chat-bot {
position: absolute;
right: 10%;
bottom: 0;
z-index: 1;
pointer-events: none;
}
@media (max-width: 1919px) {
.tp-chat-area .chat-bot {
right: 0;
max-width: 180px;
}
}
.tp-chat-title-wrap {
text-align: center;
padding-bottom: 62px;
}
@media (max-width: 1399px) {
.tp-chat-title-wrap {
padding-bottom: 50px;
}
}
.tp-chat-list {
display: -ms-grid;
display: grid;
gap: 100px;
-ms-grid-columns: 1fr 100px 1fr 100px 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
.tp-chat-item {
text-align: center;
position: relative;
z-index: 1;
}
.tp-chat-item:nth-child(1),
.tp-chat-item:nth-child(3) {
padding: 50px 30px;
border: 2px dashed var(--white-3);
border-radius: 20px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
background: var(--white);
}
.tp-chat-item:nth-child(1):hover,
.tp-chat-item:nth-child(3):hover {
border-color: transparent;
-webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.0509803922);
box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.0509803922);
}
.tp-chat-item .chatgpt-btn {
gap: 7px;
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;
border: 1px solid var(--white-3);
border-radius: 100px;
color: var(--black-2);
font-weight: 500;
font-size: 16px;
line-height: 1.3;
padding: 11px 18px;
margin-bottom: 10px;
-webkit-box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
position: relative;
}
.tp-chat-item .chatgpt-btn .mover-wrap {
padding: 1px;
}
.tp-chat-item .chatgpt-btn .border-move {
height: 365px;
background: conic-gradient(from 290deg, var(--white-3) 80%, var(--primary) 85%, #0728E4 100%);
}
.tp-chat-item .title {
font-weight: 500;
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.8px;
color: var(--black-2);
padding-top: 30px;
}
.tp-chat-item .text {
font-weight: 500;
font-size: 18px;
line-height: 1.3;
letter-spacing: -0.5px;
padding-top: 15 px;
}
.tp-chat-item .content {
background: var(--primary);
padding: 40px 30px;
border-radius: 20px;
}
.tp-chat-btn-wrap {
text-align: center;
padding-top: 70px;
}
.tp-chat-btn-wrap a:hover {
background-color: var(--black-2);
color: var(--white);
}
.tp-feature5-top {
text-align: center;
padding-bottom: 60px;
max-width: 630px;
margin: 0 auto;
}
.tp-feature5-top p {
font-family: var(--font-mono);
font-size: 18px;
color: var(--black-4);
}
.tp-feature5-top .sec-title-2 {
padding-top: 20px;
padding-bottom: 15px;
}
.tp-feature5-list {
display: -ms-grid;
display: grid;
gap: 30px;
-ms-grid-columns: 1fr 30px 1fr;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 1399px) {
.tp-feature5-list {
gap: 20px;
}
}
.tp-feature5-item {
padding: 60px 50px 0;
border-radius: 22px;
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-size: contain;
background-position: bottom center;
}
@media (max-width: 991px) {
.tp-feature5-item {
background-size: cover;
}
}
.tp-feature5-item::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(180.09deg, var(--white-5) 38.55%, rgba(242, 245, 241, 0) 99.93%);
}
.tp-feature5-item .title {
color: var(--black-2);
font-weight: 500;
font-size: 35px;
line-height: 1.3;
letter-spacing: -1px;
z-index: 1;
position: relative;
}
.tp-feature5-item p {
font-family: var(--font-mono);
font-size: 18px;
color: var(--black-4);
position: relative;
z-index: 1;
padding-top: 20px;
padding-bottom: 60px;
max-width: 575px;
}
.tp-feature5-item .img {
position: relative;
z-index: 1;
}
.tp-feature5-item .shape-img {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
@media (max-width: 1399px) {
.tp-feature5-item .shape-img {
max-width: 260px;
}
}
@media (max-width: 1199px) {
.tp-feature5-item .shape-img {
max-width: 220px;
}
}
@media (max-width: 991px) {
.tp-feature5-item .shape-img {
max-width: 160px;
}
}
.tp-feature5-list-2 {
padding-top: 40px;
display: -ms-grid;
display: grid;
gap: 30px;
-ms-grid-columns: 1fr 30px 1fr 30px 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1399px) {
.tp-feature5-list-2 {
gap: 20px;
}
}
.tp-feature5-item-2 {
padding: 50px;
border: 1px solid var(--white-3);
border-radius: 20px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
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: start;
-ms-flex-align: start;
align-items: flex-start;
}
.tp-feature5-item-2:hover {
border-color: transparent;
-webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.0509803922);
box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.0509803922);
}
.tp-feature5-item-2:hover p {
opacity: 0;
}
.tp-feature5-item-2:hover .actova-btn-primary {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.tp-feature5-item-2 .title {
font-weight: 500;
font-size: 28px;
line-height: 1.3;
letter-spacing: -0.8px;
color: var(--black-2);
margin-top: 40px;
margin-bottom: 25px;
}
.tp-feature5-item-2 p {
font-size: 18px;
color: var(--black-4);
font-family: var(--font-mono);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.tp-feature5-item-2 .actova-btn-primary {
text-transform: capitalize;
color: var(--black-2);
padding: 13px 30px;
margin-top: -50px;
-webkit-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
}
.tp-feature5-item-2 .actova-btn-primary:hover {
background-color: var(--black-2);
fill: var(--white);
color: var(--white);
}
.tp-power-title-wrap {
text-align: center;
max-width: 860px;
margin: 0 auto;
padding-bottom: 70px;
}
@media (max-width: 1399px) {
.tp-power-title-wrap {
padding-bottom: 60px;
}
}
.tp-power-title-wrap .sec-title-2 {
padding-top: 20px;
max-width: 760px;
margin: 0 auto;
}
.tp-power-area .text-wrapper {
padding-top: 70px;
text-align: center;
}
.tp-power-area .text-wrapper p {
font-weight: 500;
font-size: 16px;
line-height: 1.3;
color: var(--black-2);
fill: var(--black-2);
border: 1px solid var(--white-3);
border-radius: 100px;
padding: 15px 30px;
display: inline-block;
background-color: var(--white);
position: relative;
z-index: 1;
}
.tp-power-area .text-wrapper p a {
gap: 10px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 25px;
}
@media (max-width: 767px) {
.tp-power-area .text-wrapper p a {
margin-left: 10px;
}
}
.tp-power-area .text-wrapper p a:hover {
color: var(--primary);
fill: var(--primary);
}
.tp-power-wrapper {
gap: 50px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 50px 1fr;
grid-template-columns: 1fr 1fr;
}
.tp-power-img {
position: relative;
}
.tp-power-img .db-img {
position: absolute;
bottom: 0;
right: 0;
z-index: 3;
}
.tp-power-img .img-wrapper {
max-width: 520px;
border-radius: 20px;
text-align: center;
background: -webkit-gradient(linear, left top, left bottom, from(var(--primary)), to(#18D9FF));
background: linear-gradient(180deg, var(--primary) 0%, #18D9FF 100%);
position: relative;
}
.tp-power-img .main-img {
position: relative;
z-index: 2;
}
.tp-power-img .shape-img {
position: absolute;
left: 0;
top: 0;
}
.tp-power-img .shape-img2 {
position: absolute;
right: 50px;
top: 100px;
}
.tp-power-img .shape-text {
position: absolute;
top: 200px;
right: 80px;
}
.tp-power-content {
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: start;
-ms-flex-align: start;
align-items: flex-start;
}
.tp-power-content p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
color: var(--black-4);
}
.tp-power-content .text {
color: var(--black-2);
font-size: 22px;
padding-bottom: 20px;
font-family: var(--font-grotesk);
}
.tp-power-content ul {
gap: 25px;
display: -ms-grid;
display: grid;
padding-top: 60px;
}
.tp-power-content ul li {
font-weight: 500;
font-size: 16px;
line-height: 1.3;
}
.tp-power-content 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;
font-size: 12px;
background: rgba(7, 40, 228, 0.1490196078);
border-radius: 100px;
margin-right: 5px;
}
.tp-power-content .actova-btn-primary {
margin-top: auto;
font-size: 15px;
background-color: var(--white-4);
text-transform: capitalize;
}
.tp-power-content .actova-btn-primary:hover {
background-color: var(--black-2);
color: var(--white);
fill: var(--white);
}
.tp-testimonial-area-5 {
border-bottom: 1px solid var(--white-3);
}
.tp-testimonial-area-5.pb-100 {
padding-bottom: 80px;
}
.tp-testimonial-area-5 .sec-title-2 {
padding-top: 20px;
}
.tp-testimonial-area-5 .reason {
font-weight: 500;
font-size: 18px;
line-height: 1.5;
color: var(--black-2);
}
.tp-testimonial-area-5 .tp-testimonial-slide-3 {
-webkit-transition: all 0.3s;
transition: all 0.3s;
position: relative;
}
.tp-testimonial-area-5 .tp-testimonial-slide-3::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
background: url(../imgs/home-5/testimnial-shape.png);
background-position: right top;
background-repeat: no-repeat;
border-radius: 20px;
}
.tp-testimonial-area-5 .tp-testimonial-slide-3:hover {
background-color: var(--black-2);
}
.tp-testimonial-area-5 .tp-testimonial-slide-3:hover::after {
opacity: 1;
}
.tp-testimonial-area-5 .tp-testimonial-slide-3:hover p {
color: var(--gray);
}
.tp-testimonial-area-5 .tp-testimonial-slide-3:hover p span {
color: var(--white);
}
.tp-testimonial-area-5 .tp-testimonial-slide-3:hover .designation {
color: var(--gray);
}
.tp-testimonial-area-5 .tp-testimonial-slide-3:hover .name,
.tp-testimonial-area-5 .tp-testimonial-slide-3:hover .reason {
color: var(--white);
}
.tp-testimonial-area-5 .tp-testimonial-slide-3 p {
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.85px;
color: var(--black-4);
margin-top: 15px;
margin-bottom: 100px;
font-size: 22px;
position: relative;
z-index: 1;
}
.tp-testimonial-area-5 .tp-testimonial-slide-3 .name {
font-size: 22px;
}
.tp-testimonial-area-5 .author-img img {
width: 60px;
}
.tp-testimonial-area-5 .tp-testimonial-footer-3 {
max-width: 635px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.tp-testimonial-area-5 .tp-testimonial-navigation {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
}
.tp-price5-area .tp-price-outer {
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
}
.tp-price5-area .tp-price-titlebox {
max-width: 720px;
}
.tp-price5-area .price-btn-wrap {
background: var(--white-5);
padding: 15px 20px 20px;
border-radius: 10px;
border: 1px solid var(--white-3);
}
.tp-price5-area .tp-price-plan {
border: none;
padding: 50px 40px;
-webkit-box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
}
.tp-price5-area .tp-price-amount {
margin-bottom: 30px;
}
.tp-price5-area .tp-price-amount span {
font-size: 50px;
}
.tp-price5-area .tp-price-desc {
margin-bottom: 40px;
color: var(--black-2);
}
.tp-price5-area .tp-price-feature ul {
margin-top: 45px;
}
.tp-price5-area .actova-btn-primary,
.tp-price5-area .actova-btn-light {
border-radius: 10px;
}
.tp-price5-area .tp-price-header .plan-name {
padding: 0;
background: transparent;
border-radius: 0;
font-weight: 500;
font-size: 28px;
letter-spacing: -0.8px;
color: var(--black-2);
}
.tp-price5-area .tp-price-header {
margin-bottom: 20px;
}
.tp-price5-area .tp-price-plan.popular .ribbon {
background-color: transparent;
height: auto;
position: static;
margin-top: -46px;
background-image: url(../imgs/home-5/ribon-bg.png);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 250px;
padding-top: 10px;
padding-bottom: 8px;
}
.tp-price5-area .tp-price-plan.popular .ribbon p {
fill: var(--white);
color: var(--white);
font-weight: 500;
}
.tp-price5-area .tp-price-plan.popular {
background: var(--black-2);
padding: 10px;
position: relative;
}
.tp-price5-area .tp-price-plan.popular::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
right: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
background: url(../imgs/home-5/testimnial-shape.png);
background-position: right top;
background-repeat: no-repeat;
border-radius: 20px;
}
.tp-price5-area .tp-price-plan.popular .plan-name {
color: var(--white);
padding-left: 30px;
padding-bottom: 10px;
padding-top: 30px;
}
.tp-price5-area .tp-price-plan.popular .tp-price-desc {
margin-top: 0;
}
.tp-price5-area .price-inner {
background: var(--white);
height: 100%;
padding: 40px;
border-radius: 10px;
position: relative;
z-index: 1;
}
.tp-price5-area .tp-price-feature {
margin-bottom: 0;
}
.tp-integration5-area .view-all-btn {
text-align: center;
}
.tp-integration5-area .actova-btn-secondary {
color: var(--black-2);
fill: var(--black-2);
background: var(--white-5);
font-size: 15px;
padding: 19px 40px;
}
.tp-integration5-area .actova-btn-secondary:hover {
background-color: var(--primary);
}
.tp-integration5-titlebox {
text-align: center;
max-width: 630px;
margin: 0 auto;
}
.tp-integration5-titlebox h2.sec-title-2 {
padding-top: 20px;
padding-bottom: 15px;
}
.tp-integration5-titlebox p {
font-size: 18px;
font-family: var(--font-mono);
}
.tp-integration5-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 30px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 60px;
margin-bottom: 70px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tp-integration5-item {
width: 135px;
height: 135px;
border-radius: 10px;
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;
}
.tp-integration5-item:nth-child(odd) {
background: linear-gradient(179.86deg, var(--white) 0.12%, var(--primary) 151.6%);
}
.tp-integration5-item:nth-child(even) {
border: 1px solid var(--white-3);
}
.tp-cta5-area .sub-title-3 {
position: relative;
z-index: 1;
}
.tp-cta5-area .sec-title-2 {
padding-top: 20px;
padding-bottom: 20px;
position: relative;
z-index: 1;
}
.tp-cta5-area ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 50px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 70px;
position: relative;
z-index: 1;
}
.tp-cta5-area ul li {
color: var(--black-2);
font-weight: 400;
font-size: 16px;
line-height: 1.3;
}
.tp-cta5-area 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: 18px;
height: 18px;
background: var(--white);
font-size: 10px;
border-radius: 100px;
margin-right: 5px;
}
.tp-cta5-area .actova-btn-secondary {
padding: 20px 45px;
font-weight: 500;
font-size: 15px;
}
.tp-cta5-content {
padding-top: 170px;
padding-bottom: 170px;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.tp-cta5-content::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(35.66%, var(--white-5)), to(rgba(242, 245, 241, 0)));
background: linear-gradient(180deg, var(--white-5) 35.66%, rgba(242, 245, 241, 0) 100%);
}
.tp-cta5-content .img {
position: absolute;
z-index: 1;
}
.tp-cta5-content .img-1 {
top: 0;
left: 62%;
}
.tp-cta5-content .img-2 {
left: 5%;
top: 55%;
}
.tp-cta5-content .img-3 {
right: 5%;
}
.tp-cta5-content .img-4 {
top: 15%;
right: 7%;
}
.tp-cta5-content .img-5 {
left: 20%;
bottom: 20%;
}
.tp-cta5-content .img-6 {
top: 15%;
left: 12%;
}
.tp-cta5-content .img-7 {
right: 19%;
bottom: 32%;
}
.tp-footer5-area {
position: relative;
}
.tp-footer5-area .tp-footer-bottom-2 {
padding-top: 0;
}
.tp-footer5-area .tp-footer-bottom-wrap-2 {
padding-top: 15px;
margin-top: 110px;
position: relative;
z-index: 1;
}
.tp-footer5-area .shape-1 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.tp-footer5-area .shape-2 {
position: absolute;
bottom: 0;
right: 0;
}
/*----------------------------------------*/
/* 32. HOME SIX CSS START
/*----------------------------------------*/
.tp-speaker-area {
background-color: var(--white-5);
}
.tp-speaker-content {
text-align: center;
padding-bottom: 60px;
}
@media (max-width: 1199px) {
.tp-speaker-content {
padding-bottom: 50px;
}
}
.tp-speaker-content .subtitle {
border: 1px solid rgba(2, 2, 2, 0.1019607843);
color: var(--black-2);
font-weight: 500;
font-size: 16px;
line-height: 1.3;
display: inline-block;
padding: 6px 18px;
border-radius: 100px;
}
.tp-speaker-content .sec-title-2 {
padding-top: 20px;
padding-bottom: 15px;
}
.tp-speaker-content p {
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
color: var(--black-4);
max-width: 840px;
margin: 0 auto;
}
.tp-speaker-list {
gap: 60px 24px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 24px 1fr 24px 1fr 24px 1fr;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 991px) {
.tp-speaker-list {
gap: 20px 40px;
-ms-grid-columns: 1fr 40px 1fr 40px 1fr;
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767px) {
.tp-speaker-list {
gap: 40px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-speaker-card {
text-align: center;
}
.tp-speaker-card .thumb {
position: relative;
transition: 0.5s;
z-index: 1;
-webkit-mask-image: url(../imgs/home-6/team-mask.png);
mask-image: url(../imgs/home-6/team-mask.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-size: cover;
background-image: url(../imgs/home-6/team-shape.png);
background-repeat: no-repeat;
background-position: bottom;
background-size: contain;
}
.tp-speaker-card .thumb img {
transform: translateY(30px);
transition: all 0.5s;
}
.tp-speaker-card .thumb:hover img {
transform: translateY(0);
}
@media (max-width: 1600px) {
.tp-speaker-card .thumb {
background-position: 0 113%;
}
}
.tp-speaker-card .topic {
font-weight: 500;
font-size: 18px;
line-height: 1.3;
color: var(--black-2);
border: 1px solid var(--black-2);
display: inline-block;
padding: 6px 33px;
border-radius: 100px;
margin-top: 25px;
margin-bottom: 20px;
}
@media (max-width: 1199px) {
.tp-speaker-card .topic {
font-size: 16px;
margin-top: 20px;
margin-bottom: 15px;
}
}
@media (max-width: 767px) {
.tp-speaker-card .topic {
margin-bottom: 10px;
}
}
.tp-speaker-card .name {
font-weight: 500;
font-size: 28px;
line-height: 1.3;
color: var(--black-2);
}
@media (max-width: 1399px) {
.tp-speaker-card .name {
font-size: 24px;
}
}
@media (max-width: 1199px) {
.tp-speaker-card .name {
font-size: 22px;
}
}
@media (max-width: 767px) {
.tp-speaker-card .name {
font-size: 20px;
}
}
.tp-speaker-card .designation {
font-size: 18px;
color: var(--black-4);
font-family: var(--font-mono);
}
@media (max-width: 1399px) {
.tp-speaker-card .designation {
font-size: 16px;
}
}
.tp-spkeaer-btn {
text-align: center;
padding-top: 120px;
}
@media (max-width: 1399px) {
.tp-spkeaer-btn {
padding-top: 90px;
}
}
@media (max-width: 1199px) {
.tp-spkeaer-btn {
padding-top: 70px;
}
}
@media (max-width: 991px) {
.tp-spkeaer-btn {
padding-top: 50px;
}
}
.tp-spkeaer-btn .actova-btn-light {
padding: 23px 45px;
}
.tp-marquee6-area {
background-color: var(--white-5);
}
.tp-book-seat-area {
background-color: var(--primary);
}
.tp-book-seat-content {
text-align: center;
padding-bottom: 60px;
}
@media (max-width: 1199px) {
.tp-book-seat-content {
padding-bottom: 50px;
}
}
.tp-book-seat-content .sec-title-2 {
font-weight: 700;
}
.tp-book-seat-content p {
max-width: 630px;
margin: 0 auto;
font-size: 18px;
padding-top: 15px;
color: var(--black-2);
font-family: var(--font-mono);
}
.tp-book-seat-list {
gap: 24px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 24px 1fr 24px 1fr;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1199px) {
.tp-book-seat-list {
gap: 15px;
}
}
@media (max-width: 767px) {
.tp-book-seat-list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-book-seat-type {
background: var(--white);
-webkit-box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
box-shadow: 0px 4px 60px 0px rgba(2, 2, 2, 0.0509803922);
padding: 45px 40px 50px;
border-radius: 20px;
}
@media (max-width: 1199px) {
.tp-book-seat-type {
padding: 30px 25px 32px;
}
}
@media (max-width: 991px) {
.tp-book-seat-type {
padding: 20px 15px 22px;
}
}
.tp-book-seat-type .title {
font-weight: 500;
font-size: 28px;
line-height: 1.4;
letter-spacing: -0.85px;
color: var(--black-2);
}
@media (max-width: 1199px) {
.tp-book-seat-type .title {
font-size: 24px;
}
}
.tp-book-seat-type p {
font-weight: 400;
font-size: 18px;
color: var(--black-2);
max-width: 310px;
padding-top: 18px;
padding-bottom: 40px;
}
@media (max-width: 1199px) {
.tp-book-seat-type p {
padding-top: 10px;
padding-bottom: 30px;
}
}
@media (max-width: 991px) {
.tp-book-seat-type p {
font-size: 16px;
padding-top: 7px;
padding-bottom: 20px;
}
}
.tp-book-seat-type .price-wrap {
padding: 5px 20px 20px;
border-radius: 10px;
background: var(--white-5);
border: 1px solid var(--white-3);
margin-bottom: 30px;
}
@media (max-width: 991px) {
.tp-book-seat-type .price-wrap {
padding: 5px 10px 10px;
margin-bottom: 20px;
}
}
.tp-book-seat-type .price {
color: var(--black-2);
font-weight: 500;
font-size: 70px;
line-height: 1.2;
padding-bottom: 15px;
}
@media (max-width: 1399px) {
.tp-book-seat-type .price {
font-size: 60px;
}
}
@media (max-width: 1199px) {
.tp-book-seat-type .price {
font-size: 48px;
}
}
@media (max-width: 991px) {
.tp-book-seat-type .price {
font-size: 36px;
padding-bottom: 10px;
}
}
.tp-book-seat-type .actova-btn-light {
width: 100%;
border: 1px solid var(--white-3);
border-radius: 10px;
padding: 22px;
}
@media (max-width: 991px) {
.tp-book-seat-type .actova-btn-light {
font-size: 13px;
padding: 15px 10px;
}
}
.tp-book-seat-type.premium .price-wrap {
background: var(--primary);
}
.tp-book-seat-type li {
gap: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-weight: 500;
font-size: 16px;
line-height: 1.5;
color: var(--black-2);
max-width: 280px;
}
.tp-book-seat-type li span {
width: 20px;
height: 20px;
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(7, 40, 228, 0.1490196078);
border-radius: 100px;
font-size: 12px;
-webkit-box-flex: 0;
-ms-flex: 0 0 20px;
flex: 0 0 20px;
margin-top: 5px;
}
.tp-map6-area,
.tp-faq6-area {
background-color: var(--white-5);
}
.tp-map6-wrapper {
display: -ms-grid;
display: grid;
gap: 20px;
-ms-grid-columns: 0.72fr 20px 1fr;
grid-template-columns: 0.72fr 1fr;
border-radius: 20px;
background-color: var(--white);
border: 15px solid var(--white);
}
@media (max-width: 767px) {
.tp-map6-wrapper {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-map6-left {
position: relative;
}
.tp-map6-left img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 20px;
}
.tp-map6-left .location {
position: absolute;
width: 94%;
background: var(--white);
bottom: 20px;
left: 3%;
border-radius: 10px;
padding: 30px 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
}
@media (max-width: 1199px) {
.tp-map6-left .location {
gap: 10px;
padding: 20px;
}
}
.tp-map6-left .location p {
font-weight: 500;
font-size: 28px;
line-height: 1.3;
color: var(--black);
}
@media (max-width: 1399px) {
.tp-map6-left .location p {
font-size: 24px;
}
}
@media (max-width: 1199px) {
.tp-map6-left .location p {
font-size: 20px;
}
}
@media (max-width: 991px) {
.tp-map6-left .location p {
font-size: 16px;
}
}
.tp-map6-right iframe {
width: 100%;
height: 100%;
border-radius: 10px;
}
@media (max-width: 767px) {
.tp-map6-right iframe {
height: 380px;
}
}
.tp-footer6-area .tp-footer-top-2 {
-ms-grid-columns: 2fr 1fr 1fr;
grid-template-columns: 2fr 1fr 1fr;
}
@media (max-width: 767px) {
.tp-footer6-area .tp-footer-top-2 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-footer6-area .tp-social-media {
margin-top: 25px;
}
.tp-hero6-area {
position: relative;
padding-top: 265px;
padding-bottom: 60px;
border-bottom: 1px solid var(--black-6);
}
@media (max-width: 1399px) {
.tp-hero6-area {
padding-top: 220px;
}
}
@media (max-width: 767px) {
.tp-hero6-area {
padding-top: 160px;
}
}
.tp-hero6-area::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(180deg, rgba(2, 2, 2, 0.4) 0%, var(--black-2) 100%);
}
.tp-hero6-area .hero-shape {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
}
.tp-hero6-wrapper {
position: relative;
z-index: 2;
display: -ms-grid;
display: grid;
gap: 30px;
grid-template-columns: 200px auto;
}
@media (max-width: 1199px) {
.tp-hero6-wrapper {
gap: 20px;
grid-template-columns: 140px auto;
}
}
@media (max-width: 767px) {
.tp-hero6-wrapper {
grid-template-columns: 1fr;
}
}
.tp-hero6-wrapper .conference {
font-weight: 500;
font-size: 28px;
line-height: 1.5;
color: var(--white);
}
@media (max-width: 1399px) {
.tp-hero6-wrapper .conference {
font-size: 24px;
}
}
@media (max-width: 1199px) {
.tp-hero6-wrapper .conference {
font-size: 22px;
}
}
@media (max-width: 991px) {
.tp-hero6-wrapper .conference {
font-size: 20px;
}
}
.tp-hero6-wrapper .title {
color: var(--white);
font-weight: 700;
line-height: 1;
letter-spacing: -5px;
font-size: 100px;
padding-top: 10px;
padding-bottom: 20px;
}
@media (max-width: 1399px) {
.tp-hero6-wrapper .title {
font-size: 80px;
letter-spacing: -4px;
padding-top: 5px;
padding-bottom: 10px;
}
}
@media (max-width: 1199px) {
.tp-hero6-wrapper .title {
font-size: 70px;
}
}
@media (max-width: 991px) {
.tp-hero6-wrapper .title {
font-size: 60px;
letter-spacing: -4px;
}
}
@media (max-width: 767px) {
.tp-hero6-wrapper .title {
font-size: 48px;
letter-spacing: -2px;
}
}
.tp-hero6-wrapper .title span {
color: var(--primary);
}
.tp-hero6-wrapper .schedule {
font-weight: 400;
font-size: 35px;
line-height: 1.3;
text-transform: uppercase;
color: var(--white);
}
@media (max-width: 1399px) {
.tp-hero6-wrapper .schedule {
font-size: 30px;
}
}
@media (max-width: 1199px) {
.tp-hero6-wrapper .schedule {
font-size: 25px;
}
}
@media (max-width: 991px) {
.tp-hero6-wrapper .schedule {
font-size: 22px;
}
}
@media (max-width: 767px) {
.tp-hero6-wrapper .schedule {
font-size: 18px;
}
}
.tp-hero6-wrapper .btn-wrapper {
gap: 30px;
display: flex;
align-items: center;
margin-top: 50px;
margin-bottom: 140px;
}
@media (max-width: 1399px) {
.tp-hero6-wrapper .btn-wrapper {
margin-top: 40px;
margin-bottom: 100px;
}
}
@media (max-width: 767px) {
.tp-hero6-wrapper .btn-wrapper {
gap: 15px;
flex-direction: column;
align-items: flex-start;
}
}
.tp-hero6-wrapper .actova-btn-primary {
height: 60px;
padding: 15px 44px;
}
.tp-hero6-wrapper .actova-btn-primary:hover {
fill: var(--black-2);
color: var(--black-2);
}
.tp-hero6-wrapper .actova-btn-light {
height: 60px;
}
.tp-hero6-wrapper .social-wrapper p {
font-weight: 500;
font-size: 15px;
text-transform: uppercase;
color: var(--gray);
padding-bottom: 20px;
}
.tp-hero6-wrapper .tp-social-media {
gap: 15px;
}
.tp-hero6-wrapper .tp-social-media a {
width: 40px;
height: 40px;
}
.tp-hero6-left {
text-align: right;
}
@media (max-width: 767px) {
.tp-hero6-left {
text-align: left;
}
.tp-hero6-wrapper .actova-btn-primary {
height: 50px;
}
.tp-hero6-wrapper .actova-btn-light {
height: 50px;
}
}
@media (max-width: 1919px) {
.tp-hero6-left img {
max-width: 150px;
}
}
@media (max-width: 1199px) {
.tp-hero6-left img {
max-width: 130px;
}
}
.tp-summit-area {
background-color: var(--black-2);
}
.tp-summit-content {
text-align: center;
}
.tp-summit-content .subtitle {
font-weight: 500;
font-size: 18px;
line-height: 1.2;
color: var(--white);
position: relative;
display: inline-block;
background: var(--black-6);
padding: 8px 20px;
border-radius: 20px;
}
.tp-summit-content .border-move {
height: 300px;
background: conic-gradient(from 290deg, rgba(30, 30, 30, 0) 0%, var(--primary) 10%, transparent 20%);
}
.tp-summit-content .sec-title-3 {
letter-spacing: 0;
color: var(--white);
max-width: 1130px;
margin: 0 auto;
padding-top: 40px;
padding-bottom: 60px;
}
@media (max-width: 1399px) {
.tp-summit-content .sec-title-3 {
font-size: 40px;
}
}
@media (max-width: 1199px) {
.tp-summit-content .sec-title-3 {
font-size: 32px;
padding-top: 30px;
padding-bottom: 45px;
}
}
@media (max-width: 991px) {
.tp-summit-content .sec-title-3 {
font-size: 30px;
}
}
@media (max-width: 767px) {
.tp-summit-content .sec-title-3 {
font-size: 24px;
}
}
.tp-summit-content .register-text {
font-weight: 500;
font-size: 18px;
line-height: 1.4;
color: var(--white);
margin-top: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
}
.tp-summit-content .register-now {
font-weight: 500;
font-size: 15px;
line-height: 1.2;
color: var(--primary);
fill: var(--primary);
gap: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
}
.countdown-area {
gap: 20px;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1130px;
margin: 0 auto;
background-color: var(--black-6);
border-radius: 20px;
padding: 30px 30px 30px 50px;
position: relative;
border-radius: 10px;
z-index: 1;
}
@media (max-width: 991px) {
.countdown-area {
flex-direction: column;
align-items: center;
padding: 30px 20px;
}
}
@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}
.countdown-area::before {
content: "";
position: absolute;
inset: 0;
border-radius: 10px;
padding: 1px;
-webkit-mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: -1;
background: linear-gradient( 90deg, #55af3d 0%, #0728E4 50%, #55af3d 100% );
background-size: 200% 100%;
animation: gradientMove 4s linear infinite;
}
.countdown-content {
text-align: left;
}
@media (max-width: 991px) {
.countdown-content {
text-align: center;
}
}
.countdown-content .label {
font-weight: 500;
font-size: 35px;
line-height: 1.3;
color: var(--white);
}
@media (max-width: 1399px) {
.countdown-content .label {
font-size: 30px;
}
}
@media (max-width: 1199px) {
.countdown-content .label {
font-size: 25px;
}
}
.countdown-content p {
font-family: var(--font-mono);
font-size: 18px;
color: var(--gray);
}
.countdown-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 50px;
}
@media (max-width: 1399px) {
.countdown-wrapper {
gap: 40px;
}
}
@media (max-width: 1199px) {
.countdown-wrapper {
gap: 30px;
}
}
@media (max-width: 767px) {
.countdown-wrapper {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.countdown-wrapper .time {
font-weight: 500;
font-size: 35px;
line-height: 1;
color: var(--white);
}
@media (max-width: 1399px) {
.countdown-wrapper .time {
font-size: 30px;
}
}
.countdown-wrapper span {
font-weight: 500;
font-size: 18px;
line-height: 1.4;
color: var(--gray);
display: block;
}
.countdown-wrapper .countdown {
position: relative;
width: 99px;
height: 99px;
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-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border-radius: 10px;
z-index: 1;
}
.countdown-wrapper .countdown::before {
content: "";
position: absolute;
inset: 0;
border-radius: 10px;
padding: 1px;
background: linear-gradient(180deg, var(--gray) 0%, rgba(153, 153, 153, 0) 100%);
-webkit-mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: -1;
}
.tp-conference-area {
position: relative;
overflow: hidden;
}
.tp-conference-area .full-img {
object-fit: cover;
transform: scale(1);
}
@media (max-width: 1199px) {
.tp-conference-area .full-img {
height: 480px;
}
}
.tp-conference-content {
background-repeat: no-repeat;
background-position: center;
position: absolute;
width: 245px;
height: 245px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.8);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.tp-conference-area .circle-img-wrap {
position: absolute;
width: 366px;
height: 366px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.tp-conference-area .circle-img-wrap img {
transform: scale(0.5);
}
@media (max-width: 991px) {
.tp-conference-content p {
font-size: 16px;
}
.tp-conference-content {
width: 220px;
height: 220px;
background-size: contain;
}
}
.tp-conference-content p {
color: var(--black-2);
font-family: var(--font-mono);
font-size: 18px;
max-width: 160px;
margin-top: 18px;
}
@media (max-width: 767px) {
.tp-conference-content p {
font-size: 16px;
}
}
.tp-sponser-area {
background: var(--white-5);
position: relative;
}
.tp-sponser-area .text-shape {
background: linear-gradient(180deg, var(--white) 0%, var(--white-5) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
font-weight: 500;
font-size: 394px;
line-height: 0.8;
letter-spacing: -11px;
position: absolute;
width: 100%;
text-align: center;
top: 120px;
z-index: 0;
}
@media (max-width: 1199px) {
.tp-sponser-area .text-shape {
font-size: 240px;
}
}
.tp-sponser-list {
gap: 20px;
display: grid;
-ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1199px) {
.tp-sponser-list {
gap: 15px;
}
}
@media (max-width: 767px) {
.tp-sponser-list {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
}
.tp-sponser-item {
border: 1px solid var(--white-3);
height: 130px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
@media (max-width: 991px) {
.tp-sponser-item img {
max-width: 100px;
}
}
.tp-sponser-content {
background: var(--white);
border-radius: 20px;
padding: 50px;
position: relative;
z-index: 2;
text-align: center;
}
@media (max-width: 991px) {
.tp-sponser-content {
padding: 40px 25px;
}
}
.tp-sponser-content .sponser-title {
font-weight: 500;
font-size: 28px;
line-height: 1.3;
letter-spacing: -0.85px;
color: var(--black);
background: var(--primary);
border: 1px solid var(--white-3);
border-radius: 100px;
display: inline-block;
margin-bottom: 65px;
padding: 7px 24px;
}
@media (max-width: 1199px) {
.tp-sponser-content .sponser-title {
font-size: 24px;
margin-bottom: 50px;
}
}
@media (max-width: 991px) {
.tp-sponser-content .sponser-title {
margin-bottom: 40px;
}
}
.tp-faq-body p span {
font-weight: 700;
color: var(--black-2);
}
.tp-sponser-outer {
position: relative;
max-width: 1130px;
margin: 0 auto;
}
.tp-sponser-outer::before {
position: absolute;
content: "";
width: 108%;
height: 80%;
border: 1px solid rgba(2, 2, 2, 0.1490196078);
border-radius: 20px;
top: 10%;
left: -4%;
z-index: 1;
}
.tp-sponser-outer::after {
position: absolute;
content: "";
width: 104%;
height: 90%;
border: 1px solid rgba(2, 2, 2, 0.1490196078);
border-radius: 20px;
top: 5%;
left: -2%;
z-index: 1;
}
.tp-sponser-titlewrap {
text-align: center;
padding-bottom: 68px;
position: relative;
z-index: 1;
}
@media (max-width: 1199px) {
.tp-sponser-titlewrap {
padding-bottom: 50px;
}
}
.tp-sponser-titlewrap .sec-title-2 {
font-weight: 700;
}
.tp-sponser-titlewrap p {
color: var(--black-4);
font-family: var(--font-mono);
font-size: 18px;
max-width: 840px;
margin: 0 auto;
margin-top: 10px;
}
.tp-primium-member {
text-align: center;
margin-top: 35px;
}
.tp-primium-member .primium-text {
background: var(--white);
display: inline-block;
font-weight: 400;
font-size: 18px;
line-height: 26px;
text-align: center;
padding: 14px 36px;
border-radius: 100px;
color: var(--black-2);
}
@media (max-width: 991px) {
.tp-primium-member .primium-text {
font-size: 16px;
}
}
.tp-primium-member .primium-text a {
display: inline-block;
margin-left: 30px;
font-weight: 500;
}
@media (max-width: 991px) {
.tp-primium-member .primium-text a {
margin-left: 15px;
}
}
.tp-past-conference-area {
background: var(--white-5);
}
.tp-past-conference-wrapper {
max-width: 1900px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
.tp-past-conference-wrapper .sec-title-3 {
max-width: 1130px;
text-align: center;
margin: 0 auto;
margin-bottom: 55px;
}
@media (max-width: 1399px) {
.tp-past-conference-wrapper .sec-title-3 {
font-size: 40px;
margin-bottom: 50px;
}
}
@media (max-width: 1199px) {
.tp-past-conference-wrapper .sec-title-3 {
font-size: 36px;
}
}
@media (max-width: 991px) {
.tp-past-conference-wrapper .sec-title-3 {
font-size: 32px;
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-past-conference-wrapper .sec-title-3 {
font-size: 24px;
}
}
.tp-past-conference-slider .swiper-slide {
height: auto;
}
.tp-past-conference-item {
height: 100%;
}
.tp-past-conference-item video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
}
.tp-past-conference-item img {
border-radius: 15px;
}
.tp-conference-ticket-area {
position: relative;
background-position: center;
background-repeat: no-repeat;
}
.tp-conference-ticket-area::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(2, 2, 2, 0.3490196078);
}
.tp-conference-ticket-wrapper {
gap: 70px;
display: -ms-grid;
display: grid;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-grid-columns: 1fr 70px 550px 70px 1fr;
grid-template-columns: 1fr 550px 1fr;
position: relative;
z-index: 1;
}
@media (max-width: 1919px) {
.tp-conference-ticket-wrapper {
gap: 40px;
}
}
@media (max-width: 1399px) {
.tp-conference-ticket-wrapper {
gap: 30px;
-ms-grid-columns: 1fr 30px 500px 30px 1fr;
grid-template-columns: 1fr 500px 1fr;
}
}
@media (max-width: 1199px) {
.tp-conference-ticket-wrapper {
gap: 20px;
-ms-grid-columns: 1fr 20px 440px 20px 1fr;
grid-template-columns: 1fr 440px 1fr;
}
}
@media (max-width: 991px) {
.tp-conference-ticket-wrapper {
gap: 15px;
-ms-grid-columns: 1fr 15px 330px 15px 1fr;
grid-template-columns: 1fr 330px 1fr;
}
}
@media (max-width: 767px) {
.tp-conference-ticket-wrapper {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.tp-conference-ticket-text {
text-align: center;
}
}
.tp-conference-ticket-text .sec-title-3 {
color: var(--white);
font-weight: 700;
}
@media (max-width: 1399px) {
.tp-conference-ticket-text .sec-title-3 {
font-size: 40px;
}
}
@media (max-width: 1199px) {
.tp-conference-ticket-text .sec-title-3 {
font-size: 32px;
}
}
.tp-conference-ticket-text.text-1 {
text-align: right;
padding-right: 30px;
}
@media (max-width: 1919px) {
.tp-conference-ticket-text.text-1 {
padding-right: 0;
}
}
@media (max-width: 767px) {
.tp-conference-ticket-text.text-1 {
text-align: center;
}
}
.tp-conference-ticket-box {
background: var(--white-5);
border-radius: 20px;
text-align: center;
padding: 40px 50px;
}
@media (max-width: 1399px) {
.tp-conference-ticket-box {
padding: 40px;
}
}
@media (max-width: 991px) {
.tp-conference-ticket-box .separator {
display: none;
}
}
.tp-conference-ticket-box .welcome-text {
color: var(--black-2);
font-weight: 500;
font-size: 35px;
line-height: 1.3;
padding-bottom: 40px;
padding-top: 50px;
}
@media (max-width: 1399px) {
.tp-conference-ticket-box .welcome-text {
font-size: 30px;
padding-top: 40px;
padding-bottom: 30px;
}
}
@media (max-width: 1199px) {
.tp-conference-ticket-box .welcome-text {
font-size: 25px;
padding-top: 35px;
padding-bottom: 20px;
}
}
@media (max-width: 991px) {
.tp-conference-ticket-box .welcome-text {
font-size: 20px;
padding-top: 30px;
}
}
.tp-conference-ticket-box .actova-btn-primary {
margin-top: 45px;
margin-bottom: 20px;
}
@media (max-width: 1399px) {
.tp-conference-ticket-box .actova-btn-primary {
margin-top: 35px;
}
}
@media (max-width: 1199px) {
.tp-conference-ticket-box .actova-btn-primary {
margin-top: 25px;
}
}
.tp-conference-ticket-box .actova-btn-primary:hover {
color: var(--white);
background-color: var(--black-2);
}
.tp-conference-ticket-box p {
font-size: 15px;
line-height: 1.3;
color: var(--black-4);
font-family: var(--font-mono);
}
.tp-event-area {
background: var(--white-5);
}
.tp-event-titlewrap {
text-align: center;
padding-bottom: 65px;
}
@media (max-width: 1199px) {
.tp-event-titlewrap {
padding-bottom: 50px;
}
}
.tp-event-titlewrap .sec-title-2 {
font-weight: 700;
padding-bottom: 10px;
}
.tp-event-titlewrap p {
font-size: 18px;
color: var(--black-4);
max-width: 840px;
margin: 0 auto;
font-family: var(--font-mono);
}
.tp-event-slider {
margin-bottom: 20px;
}
.tp-event-slider .swiper-wrapper {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tp-event-slider .swiper-slide {
width: auto;
}
.tp-event-slider .day-number {
font-weight: 500;
font-size: 18px;
line-height: 1.3;
text-transform: uppercase;
color: var(--black-2);
background: var(--white);
padding: 17px 20px;
border-radius: 100px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
}
@media (max-width: 1199px) {
.tp-event-slider .day-number {
font-size: 16px;
padding: 14px 20px;
}
}
.tp-event-slider .day-number:hover {
background-color: var(--primary);
}
.tp-event-slider .day-number span {
display: none;
}
.tp-event-slider .swiper-slide-thumb-active .day-number {
background-color: var(--primary);
}
.tp-event-slider .swiper-slide-thumb-active .day-number span {
display: inline-block;
}
.tp-event-slider2-wrapper {
position: relative;
max-width: 1170px;
margin: 0 auto;
}
.tp-event-slider2 {
max-width: 1130px;
}
.tp-event-slide2 {
background: var(--white);
border-radius: 20px;
padding: 60px 70px;
border: 1px solid var(--white-3);
}
@media (max-width: 991px) {
.tp-event-slide2 {
padding: 50px 30px;
}
}
.tp-event-slide2 .event-day {
color: var(--black-2);
font-family: var(--font-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.4;
background: var(--primary);
display: inline-block;
border-radius: 100px;
padding: 0 15px 2px;
}
.tp-event-slide2 .event-date {
color: var(--black-2);
font-weight: 500;
font-size: 50px;
line-height: 1.1;
letter-spacing: -1.5px;
padding-top: 10px;
padding-bottom: 40px;
}
@media (max-width: 1399px) {
.tp-event-slide2 .event-date {
font-size: 40px;
padding-bottom: 30px;
}
}
@media (max-width: 1199px) {
.tp-event-slide2 .event-date {
font-size: 36px;
}
}
@media (max-width: 767px) {
.tp-event-slide2 .event-date {
font-size: 30px;
}
}
.tp-event-slide2 .event-schedule {
gap: 25px;
display: -ms-grid;
display: grid;
}
.tp-event-slide2 li {
display: -ms-grid;
display: grid;
-ms-grid-columns: 141px 1fr;
grid-template-columns: 141px 1fr;
}
@media (max-width: 767px) {
.tp-event-slide2 li {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.tp-event-slide2 .time {
font-weight: 500;
font-size: 22px;
line-height: 1.5;
color: var(--black-2);
background-color: var(--primary);
border-radius: 10px;
padding: 8px 15px 10px;
text-align: center;
}
@media (max-width: 1399px) {
.tp-event-slide2 .time {
font-size: 20px;
}
}
@media (max-width: 1199px) {
.tp-event-slide2 .time {
font-size: 18px;
}
}
.tp-event-slide2 .event {
font-weight: 500;
font-size: 22px;
line-height: 1.5;
border: 1px solid var(--white-3);
border-radius: 10px;
padding: 7px 20px;
}
@media (max-width: 1399px) {
.tp-event-slide2 .event {
font-size: 20px;
}
}
@media (max-width: 1199px) {
.tp-event-slide2 .event {
font-size: 18px;
}
}
.event-btn-next,
.event-btn-prev {
width: 40px;
height: 40px;
fill: var(--black-2);
color: var(--black-2);
background-color: var(--white);
border: 1px solid var(--white-3);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100px;
transition: all 0.3s;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.event-btn-next:hover,
.event-btn-prev:hover {
border-color: var(--primary);
background-color: var(--primary);
}
@media (max-width: 1399px) {
.event-btn-prev {
left: -20px;
}
}
.event-btn-next {
right: 0;
}
@media (max-width: 1399px) {
.event-btn-next {
right: -20px;
}
}
.tp-feature5-area .tp-container-1715 {
padding-left: 30px;
padding-right: 30px;
}
@media (max-width: 991px) {
.tp-feature5-area .tp-container-1715 {
padding-left: 15px;
padding-right: 15px;
}
}
@media (max-width: 1600px) {
.tp-hero5-area .hero5-bg {
left: -15%;
}
.tp-chat-area #move_anim {
bottom: 200px;
width: 100%;
}
.tp-power-title-wrap .sec-title-2 {
max-width: 660px;
}
}
@media (max-width: 1399px) {
.tp-hero5-area .title {
font-size: 80px;
letter-spacing: -4px;
}
.tp-chat-item:nth-child(1), .tp-chat-item:nth-child(3) {
padding: 40px 20px;
}
.tp-chat-item .title {
font-size: 22px;
}
.tp-hero5-area form input {
height: 70px;
}
.tp-hero5-area form .submit {
right: 8px;
top: 8px;
height: 54px;
}
.tp-chat-list {
gap: 30px;
}
.tp-chat-area .chat-bot {
right: 1%;
bottom: -15px;
}
.tp-feature5-item .title {
font-size: 30px;
}
.tp-feature5-item-2 .title {
font-size: 24px;
margin-top: 30px;
margin-bottom: 15px;
}
.tp-feature5-item {
padding: 50px 40px 0;
}
.tp-power-img .db-img {
right: -30px;
}
.tp-testimonial-area-5 .tp-testimonial-slide-3 p {
margin-bottom: 50px;
font-size: 20px;
}
.tp-price5-area .tp-price-plan {
padding: 30px 20px;
}
.tp-price5-area .tp-price-amount span {
font-size: 40px;
}
.tp-price5-area .tp-price-header .plan-name {
font-size: 24px;
}
.tp-integration5-list {
gap: 15px;
}
}
@media (max-width: 1199px) {
.tp-hero5-area .title {
font-size: 70px;
letter-spacing: -2px;
}
.tp-chat-item .title {
font-size: 20px;
padding-top: 20px;
}
.tp-chat-area .chat-bot {
max-width: 160px;
}
.tp-chat-btn-wrap {
padding-top: 60px;
}
.tp-feature5-top {
padding-bottom: 50px;
}
.tp-feature5-list-2 {
gap: 15px;
padding-top: 30px;
}
.tp-feature5-item-2 {
padding: 30px;
}
.tp-feature5-item-2 p {
font-size: 16px;
}
.tp-power-title-wrap .sec-title-2 {
max-width: 550px;
}
.tp-feature5-item-2 .title {
font-size: 22px;
margin-top: 25px;
margin-bottom: 10px;
}
.tp-feature5-item .title {
font-size: 25px;
letter-spacing: -0.5px;
}
.tp-feature5-item {
padding: 40px 30px 0;
}
.tp-feature5-item p {
font-size: 16px;
}
.tp-power-wrapper {
gap: 30px;
}
.tp-power-content .text {
font-size: 20px;
}
.tp-power-content p {
font-size: 16px;
}
.tp-power-content ul {
gap: 20px;
padding-top: 40px;
}
.tp-testimonial-area-5 .tp-testimonial-slide-3 p {
margin-bottom: 30px;
font-size: 18px;
}
.tp-price5-area .price-inner {
padding: 20px;
}
.tp-testimonial-area-5.pb-100 {
padding-bottom: 60px;
}
.tp-price5-area .price-btn-wrap {
padding: 15px 15px 15px;
}
.tp-price5-area .tp-price-plan.popular {
padding: 5px;
}
.tp-price5-area .tp-price-header {
margin-bottom: 12px;
}
.tp-price5-area .tp-price-plan.popular .ribbon {
margin-top: -41px;
}
.tp-price-toggle-wrapper .toggle-btn-wrap {
padding: 20px 25px;
}
.tp-price-toggle-wrapper {
margin-bottom: 50px;
}
.tp-footer5-area .tp-footer-bottom-wrap-2 {
margin-top: 90px;
}
.tp-cta5-content {
padding-top: 150px;
padding-bottom: 150px;
}
.tp-chat-title-wrap {
text-align: center;
padding-bottom: 50px;
}
}
@media (max-width: 991px) {
.tp-hero5-area {
padding-top: 180px;
}
.tp-hero5-area .title {
font-size: 60px;
letter-spacing: -1px;
padding-bottom: 45px;
}
.tp-hero5-area form {
width: 690px;
}
.tp-hero5-area .hero5-img {
margin-bottom: -280px;
}
.tp-hero5-area ul {
gap: 40px;
}
.tp-chat-area {
padding-top: 100px;
}
.tp-chat-title-wrap {
padding-bottom: 45px;
}
.tp-chat-item:nth-child(1), .tp-chat-item:nth-child(3) {
padding: 30px 15px;
}
.tp-feature5-item-2 {
padding: 30px 15px;
}
.tp-chat-item .title {
font-size: 18px;
}
.tp-chat-item .chatgpt-btn {
gap: 5px;
font-size: 14px;
}
.tp-chat-list {
gap: 15px;
}
.tp-power-content .text {
font-size: 18px;
}
.tp-power-content ul {
gap: 15px;
padding-top: 30px;
padding-bottom: 30px;
}
.tp-power-area .text-wrapper {
padding-top: 50px;
}
.tp-testimonial-area-3 .title-wrap {
margin-bottom: 45px;
}
.tp-testimonial-area-5.pb-100 {
padding-bottom: 40px;
}
.tp-price-titlebox p {
font-size: 16px;
}
.tp-price5-area .tp-price-list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
.tp-integration5-titlebox p {
font-size: 16px;
}
.tp-integration5-list {
margin-top: 45px;
margin-bottom: 50px;
}
}
@media (max-width: 767px) {
.tp-integration5-item {
width: 105px;
height: 105px;
}
.tp-integration5-list {
gap: 10px;
}
.join.actova-btn-secondary {
display: none;
}
.tp-hero5-area {
padding-top: 140px;
}
.tp-hero5-area .title {
font-size: 36px;
padding-bottom: 40px;
}
.tp-hero5-area form {
width: 100%;
max-width: 100%;
}
.tp-hero5-area form input {
height: 60px;
padding: 0 160px 0 15px;
font-size: 14px;
}
.tp-hero5-area form .submit {
right: 6px;
top: 6px;
height: 48px;
width: 140px;
font-size: 14px;
}
.tp-hero5-area ul {
gap: 10px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-bottom: 30px;
}
.tp-hero5-area .hero5-img {
margin-bottom: -80px;
}
.tp-chat-area {
padding-top: 130px;
}
.tp-chat-list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
.tp-chat-area .chat-bot {
width: 80px;
bottom: 65px;
}
.tp-feature5-top p {
font-size: 16px;
}
.tp-feature5-list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
.tp-feature5-list-2 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
.tp-power-wrapper {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
.tp-testimonial-area-5 {
padding-left: 15px;
padding-right: 15px;
}
.tp-testimonial-area-5 .tp-testimonial-navigation {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.tp-cta5-area ul {
gap: 15px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 40px;
}
.tp-cta5-content .img-6 {
top: 10%;
left: 4%;
max-width: 60px;
}
.tp-cta5-content .img-4 {
display: none;
}
.tp-cta5-content .img-2 {
display: none;
}
.tp-cta5-content .img-5 {
left: 5%;
bottom: 5%;
max-width: 70px;
}
.tp-cta5-content .img-3 {
right: 5%;
bottom: 3%;
width: 80px;
}
.tp-cta5-content .img-7 {
display: none;
}
.tp-feature5-item .shape-img {
max-width: 180px;
}
.tp-feature5-item p {
padding-top: 15px;
padding-bottom: 40px;
}
.tp-chat-btn-wrap {
padding-top: 40px;
}
.tp-chat-title-wrap {
padding-bottom: 30px;
}
.tp-feature5-item .title {
font-size: 22px;
}
.tp-feature5-item-2 .title {
font-size: 20px;
}
.tp-power-title-wrap {
padding-bottom: 30px;
}
.tp-testimonial-area-3 .title-wrap {
margin-bottom: 30px;
}
.tp-price5-area .tp-price-amount span {
font-size: 30px;
}
.tp-price5-area .tp-price-amount {
margin-bottom: 15px;
}
.tp-footer5-area .tp-footer-bottom-wrap-2 {
margin-top: 50px;
}
.tp-feature5-item {
padding: 30px 15px 0;
}
.tp-hero5-area .hero5-img img {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
.tp-footer6-area .tp-footer-bottom-2 {
padding-top: 0;
padding-bottom: 25px;
}
.tp-footer6-area .tp-footer-bottom-wrap-2 {
padding-top: 95px;
}
@media (max-width: 1399px) {
.tp-footer6-area .tp-footer-bottom-wrap-2 {
padding-top: 70px;
}
}
@media (max-width: 1199px) {
.tp-footer6-area .tp-footer-bottom-wrap-2 {
padding-top: 50px;
}
}
.tp-footer6-text {
position: relative;
display: inline-block;
font-weight: 500;
font-size: 255px;
line-height: 0.91;
text-transform: uppercase;
letter-spacing: -9px;
text-align: center;
}
.tp-footer6-text .text-base {
color: #FFFFFF26;
user-select: none;
pointer-events: none;
}
.tp-footer6-text .text-reveal {
color: #fff;
position: absolute;
top: 0;
left: 0;
user-select: none;
pointer-events: none;
clip-path: circle(0px at 0 0);
opacity: 0;
transition: opacity 0.25s;
}
@media (max-width: 1919px) {
.tp-footer6-text {
font-size: 195px;
}
}
@media (max-width: 1399px) {
.tp-footer6-text {
font-size: 186px;
}
}
@media (max-width: 1199px) {
.tp-footer6-text {
font-size: 140px;
letter-spacing: -8px;
}
}
@media (max-width: 991px) {
.tp-footer6-text {
font-size: 105px;
letter-spacing: -5px;
}
}
@media (max-width: 767px) {
.tp-footer6-text {
font-size: 50px;
letter-spacing: -2px;
}
}
/* Home One Hero CSS */
.tp-hero1-area {
position: relative;
height: 930px;
}
.tp-hero1-area .hero-img {
position: absolute;
top: -80px !important;
left: 0;
width: 100%;
height: 110%;
object-fit: cover;
}
.tp-hero1-wrapper {
position: relative;
z-index: 1;
padding-top: 260px;
gap: 20px;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.tp-hero1-content .title {
font-weight: 500;
font-size: 65px;
line-height: 1;
letter-spacing: -3px;
color: var(--white);
padding-bottom: 30px;
}
.tp-hero1-content .tp-btn-one {
background-color: var(--primary);
}
.tp-hero1-area .actova-text {
font-weight: 500;
font-size: 250px;
line-height: 1;
letter-spacing: -11px;
color: var(--white);
opacity: 0.2;
position: absolute;
left: 50px;
bottom: 0;
z-index: 1;
}
.tp-hero1-area .shape-img {
position: absolute;
bottom: 0;
left: 0;
}
.tp-hero1-social {
gap: 15px;
display: flex;
align-items: center;
writing-mode: sideways-lr;
padding-top: 30px;
background: #222;
padding: 23px 6px;
position: absolute;
right: 0;
top: 28%;
z-index: 9;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.tp-hero1-social ul {
gap: 40px;
display: flex;
align-items: center;
}
.tp-hero1-social ul li {
position: relative;
}
.tp-hero1-social ul li:not(:last-child)::after {
position: absolute;
content: "";
width: 2px;
height: 15px;
background: var(--white);
right: 11px;
top: -25px;
transform: rotate(-69deg);
}
.tp-hero1-social ul li a,
.tp-hero1-social .social-title {
font-weight: 700;
font-size: 16px;
line-height: 1;
color: var(--white);
}
.tp-hero1-social ul li a {
transition: all 0.3s;
text-transform: uppercase;
}
.tp-hero1-social ul li a:hover {
color: var(--primary);
}
.tp-hero1-social .social-title {
gap: 15px;
display: flex;
align-items: center;
}
.tp-hero1-social .social-title span {
width: 1px;
height: 15px;
background: var(--white);
display: inline-block;
}
@media (max-width: 1919px) {
.tp-hero1-area {
height: 860px;
}
.tp-hero1-area .hero-img {
top: -85px !important;
}
}
@media (max-width: 1399px) {
.tp-hero1-area {
height: 780px;
}
.tp-hero1-wrapper {
padding-top: 230px;
}
.tp-hero1-content .title {
font-size: 55px;
}
.tp-hero1-area .actova-text {
font-size: 200px;
}
}
@media (max-width: 1199px) {
.tp-hero1-wrapper {
padding-top: 200px;
}
.tp-hero1-content .title {
font-size: 50px;
}
.tp-hero1-area {
height: 660px;
}
.tp-hero1-area .actova-text {
left: 15px;
bottom: 15px;
}
}
@media (max-width: 991px) {
.tp-hero1-content .title {
font-size: 45px;
}
.tp-hero1-area .actova-text {
font-size: 160px;
bottom: 40px;
}
}
@media (max-width: 767px) {
.tp-hero1-wrapper {
padding-top: 130px;
}
.tp-hero1-content .title {
font-size: 36px;
letter-spacing: -1px;
}
.tp-hero1-area {
height: 500px;
}
.tp-hero1-area .actova-text {
font-size: 100px;
letter-spacing: -5px;
bottom: 25px;
}
.tp-hero1-area .hero-img {
top: -60px !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tp-hero1-wrapper {
padding-top: 200px;
}
.tp-hero1-social {
display: none;
}
}
.tp-about-full-image .content video {
width: 410px;
height: 100%;
border-radius: 100px;
}
@media (max-width: 767px) {
.tp-about-full-image .content video {
width: 100%;
}
}
.tp-hero6-shapes {
position: relative;
z-index: 1;
}
.tp-hero6-shapes .shape-1 {
position: absolute;
bottom: -60px;
right: 0;
}
.tp-hero6-shapes .shape-2 {
position: absolute;
bottom: -60px;
right: 0;
}
.tp-summit-area {
position: relative;
}
#summit-dots-animation {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
bottom: 0;
left: 0;
}
#summit-dots-animation .particle {
position: absolute;
background: white;
border-radius: 50%;
pointer-events: none;
opacity: 0;
}
.tp-header-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 90;
}
.tp-header-sticky.scrolled {
box-shadow: 0 4px 12px rgba(255,255,255, 0.3);
background: var(--white-6);
transition: box-shadow 0.3s ease;
}
.tp-header-area-6.tp-header-sticky.scrolled,
.tp-header-area-5.tp-header-sticky.scrolled,
.tp-header-area.tp-header-sticky.scrolled {
box-shadow: 0 4px 12px rgba(0,0,0, 0.01);
background: var(--black-3);
}
.tp-aai-conference-ticket-area {
position: relative;
min-height: 100vh;
background-color: #F2F5F1;
}
.tp-aai-conference-ticket-area .tp-container-1715 {
position: relative;
z-index: 10;
height: 100%;
}
.tp-aai-conference-ticket-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.tp-aai-conference-ticket-box {
display: none;
opacity: 0;
}
.tp-aai-conference-ticket-text {
opacity: 0;
}
.tp-aai-conference-ticket-bg {
width: 400px;
margin: 0 auto;
display: block;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
height: 100%;
}
.tp-aai-conference-ticket-bg::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(2, 2, 2, 0.3490196078);
}
.tp-aai-conference-ticket-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tp-aai-conference-ticket-text .sec-title-3 {
color: var(--white);
font-weight: 700;
}
.tp-aai-conference-ticket-box {
max-width: 550px;
position: absolute;
background: var(--white-5);
border-radius: 20px;
text-align: center;
padding: 40px 50px;
}
.tp-aai-conference-ticket-box .welcome-text {
color: var(--black-2);
font-weight: 500;
font-size: 35px;
line-height: 1.3;
padding-bottom: 40px;
padding-top: 50px;
}
.tp-aai-conference-ticket-box .actova-btn-primary {
margin-top: 45px;
margin-bottom: 20px;
}
.tp-aai-conference-ticket-box .actova-btn-primary:hover {
color: var(--white);
background-color: var(--black-2);
}
.tp-aai-conference-ticket-box p {
font-size: 15px;
line-height: 1.3;
color: var(--black-4);
font-family: var(--font-mono);
}
@media (max-width: 1800px) {
.tp-aai-conference-ticket-box {
max-width: 500px;
padding: 30px 40px;
}
.tp-aai-conference-ticket-text .sec-title-3 {
font-size: 45px;
}
}
@media (max-width: 1399px) {
.tp-aai-conference-ticket-text .sec-title-3 {
font-size: 40px;
}
.tp-aai-conference-ticket-box .welcome-text {
font-size: 30px;
padding-bottom: 30px;
padding-top: 40px;
}
.tp-aai-conference-ticket-box {
max-width: 460px;
}
}
@media (max-width: 1199px) {
.tp-aai-conference-ticket-box {
max-width: 380px;
padding: 30px;
}
.tp-aai-conference-ticket-box .welcome-text {
font-size: 24px;
padding-bottom: 20px;
padding-top: 20px;
}
.tp-aai-conference-ticket-box .actova-btn-primary {
margin-top: 25px;
}
.tp-aai-conference-ticket-text .sec-title-3 {
font-size: 30px;
}
}
@media (max-width: 991px) {
.tp-aai-conference-ticket-wrapper {
flex-direction: column;
justify-content: space-between;
}
.tp-aai-conference-ticket-box {
margin-top: 42px;
}
.tp-aai-conference-ticket-wrapper .separator svg {
height: 140px;
}
}
@media (max-width: 767px) {
.tp-aai-conference-ticket-bg {
width: 100%;
}
.tp-aai-conference-ticket-text {
opacity: 1;
}
.tp-aai-conference-ticket-box {
display: block;
opacity: 1;
position: static;
}
.tp-aai-conference-ticket-box {
margin-top: 20px;
margin-bottom: 20px;
}
.tp-aai-conference-ticket-text .sec-title-3 {
font-size: 24px;
}
.tp-aai-conference-ticket-box .actova-btn-primary {
padding: 18px 30px;
}
.tp-aai-conference-ticket-box .welcome-text {
font-size: 20px;
}
}
.tp-text-invert > div {
background-image: linear-gradient(to right, #fff 50%, #999 50%);
background-size: 700% 100%;
background-position: 100%;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}
#contactGlowCanvas {
top: 120px;
left: 50%;
transform: translateX(-50%);
}
/* ======== Actova ========= */
/* About Full Width Video Section CSS */
.tp-about-full-image .content video {
width: 410px;
height: 100%;
border-radius: 100px;
}
/* ======== Actova Video ========= */
/* HEADER CSS */
/*----------------------------------------*/
/* Header Style 1
/*----------------------------------------*/
.tp-header__style-1 {
padding-left: 50px;
padding-right: 50px;
}
.tp-header__transparent {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 99;
margin: auto;
background: transparent;
}
.tp-header__border {
border-bottom: 1px solid #a9c4c8;
}
.tp-header__action ul {
list-style: none;
}
.tp-header__action ul li {
display: inline-block;
}
.tp-header__style-1 .tp-header__action ul li {
color: var(--tp-common-white);
}
.tp-header__search-btn {
color: var(--tp-common-white);
padding-right: 32px;
transition: 0.3s;
}
.tp-header__search-btn:hover {
color: var(--tp-orange-1);
}
@media (max-width: 575px) {
.tp-header__search-btn {
display: none;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tp-header__search-btn {
display: block;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-header__style-1 {
padding-right: 50px;
padding-left: 50px;
}
}
@media (max-width: 575px) {
.tp-header__style-1 {
padding: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.tp-header__style-1 {
padding: 30px 35px 30px 35px;
}
}
/*----------------------------------------*/
/* Header Style 2
/*----------------------------------------*/
.tp-header__style-2 {
padding-left: 50px;
padding-right: 50px;
background: var(--tp-common-white);
}
.tp-header__style-2 .tp-main__menu ul li > a {
position: relative;
font-size: 16px;
padding: 20px 0;
display: block;
transition: 0.3s;
color: var(--tp-common-black);
text-transform: uppercase;
}
.tp-header__style-2 .tp-header-search svg {
fill: var(--tp-common-black);
}
.tp-header__style-2 .tp-header-search {
padding-right: 40px;
}
.tp-header__style-2 .actova-btn-primary {
gap: 8px;
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;
background-color: var(--primary);
border-radius: 30px;
padding: 17px 35px;
color: var(--black-2);
font-size: 14px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
position: relative;
overflow: hidden;
z-index: 1;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.tp-header__style-2 .actova-btn-primary:hover {
color: var(--white);
}
.tp-header__style-2 .tp-main__menu ul li .tp-submenu {
border-top: 2px solid var(--tp-theme-primary);
}
.tp-header__style-2.tp-header-stikcy.scrolled {
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.06);
background: var(--tp-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.tp-header__style-2 {
padding: 30px 35px 30px 35px;
}
}
@media only screen and (max-width: 549px) {
.tp-header__style-2 {
padding: 30px 35px 30px 35px;
}
.tp-hero-area-2 {
margin-top: 80px;
}
}
/*----------------------------------------*/
/* Header Style 3
/*----------------------------------------*/
.tp-header__style-3 {
padding-left: 50px;
padding-right: 50px;
background: var(--tp-common-white);
}
.tp-header__style-3 .tp-main__menu ul li > a {
position: relative;
font-size: 15px;
padding: 40px 0;
display: block;
transition: 0.3s;
color: var(--tp-common-black);
text-transform: uppercase;
}
.tp-header__style-3 .tp-header-search svg {
fill: var(--tp-common-black);
}
.tp-header__style-3 .tp-header-search {
padding-right: 40px;
}
.tp-header__style-3 .actova-btn-primary {
gap: 8px;
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;
background-color: var(--primary);
border-radius: 30px;
padding: 17px 35px;
color: var(--black-2);
font-size: 14px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
position: relative;
overflow: hidden;
z-index: 1;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.tp-header__style-3 .actova-btn-primary:hover {
color: var(--white);
}
.tp-header__style-3 .tp-main__menu ul li .tp-submenu {
border-top: 2px solid var(--tp-theme-primary);
}
.tp-header__style-3.tp-header-stikcy.scrolled {
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.06);
background: var(--tp-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.tp-header__style-3 {
padding: 30px 35px 30px 35px;
}
}
.tp-header__style-3 .tp-btn-two {
padding: 15px 30px !important;
background: var(--tp-common-black) !important;
color: var(--tp-common-white) !important;
}
.tp-header__style-3 .tp-btn-two span svg {
fill: var(--tp-common-white) !important;
}
@media only screen and (max-width: 549px) {
.tp-header__style-3 {
padding: 30px 35px 30px 35px;
}
}
/*----------------------------------------*/
/* Header Style 4
/*----------------------------------------*/
.tp-header__style-4 {
padding-left: 50px;
padding-right: 50px;
background: var(--tp-common-white);
}
.tp-header__style-4 .tp-main__menu ul li > a {
position: relative;
font-size: 15px;
padding: 40px 0;
display: block;
transition: 0.3s;
color: var(--tp-common-black);
text-transform: capitalize;
}
.tp-header__style-4 .tp-header-search svg {
fill: var(--tp-common-black);
}
.tp-header__style-4 .tp-header-search {
padding-right: 40px;
}
.tp-header__style-4 .actova-btn-primary {
gap: 8px;
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;
background-color: var(--primary);
border-radius: 30px;
padding: 17px 35px;
color: var(--black-2);
font-size: 14px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
position: relative;
overflow: hidden;
z-index: 1;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.tp-header__style-4 .actova-btn-primary:hover {
color: var(--white);
}
.tp-header__style-4 .tp-main__menu ul li .tp-submenu {
border-top: 2px solid var(--tp-theme-primary);
}
.tp-header__style-4.tp-header-stikcy.scrolled {
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.06);
background: var(--tp-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.tp-header__style-4 {
padding: 30px 35px 30px 35px;
}
}
.tp-header__style-4 .tp-btn-two {
padding: 15px 30px !important;
background: var(--tp-common-black) !important;
color: var(--tp-common-white) !important;
}
.tp-header__style-4 .tp-btn-two span svg {
fill: var(--tp-common-white) !important;
}
@media only screen and (max-width: 549px) {
.tp-header__style-4 {
padding: 30px 35px 30px 35px;
}
}
/*----------------------------------------*/
/* Header Style 5
/*----------------------------------------*/
.tp-header__style-5 {
padding-left: 50px;
padding-right: 50px;
background: transparent;
}
.tp-header__style-5 .tp-main__menu ul li > a {
position: relative;
font-size: 15px;
padding: 40px 0;
display: block;
transition: 0.3s;
color: var(--tp-common-white);
text-transform: uppercase;
}
.tp-header__style-5 .tp-header-search svg {
fill: var(--tp-common-white);
}
.tp-header__style-5 .tp-header-search {
padding-right: 40px;
}
.tp-header__style-5 .actova-btn-primary {
gap: 8px;
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;
background-color: var(--primary);
border-radius: 30px;
padding: 17px 35px;
color: var(--black-2);
font-size: 14px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
position: relative;
overflow: hidden;
z-index: 1;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.tp-header__style-5 .actova-btn-primary:hover {
color: var(--white);
}
.tp-header__style-5 .tp-main__menu ul li .tp-submenu {
border-top: 2px solid transparent;
}
.tp-header__style-5.tp-header-stikcy.scrolled {
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.06);
background: var(--tp-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
.tp-header__style-5 {
padding: 30px 35px 30px 35px;
}
}
.tp-header__style-5 .tp-btn-two {
padding: 15px 30px !important;
background: var(--tp-common-black) !important;
color: var(--tp-common-white) !important;
}
.tp-header__style-5 .tp-btn-two span svg {
fill: var(--tp-common-black) !important;
}
.tp-header__style-5 .actova-btn-secondary {
text-transform: uppercase;
background: var(--tp-common-white);
color: var(--tp-common-black);
}
.tp-header__style-5 .actova-btn-secondary svg {
fill: var(--tp-common-black);
}
.tp-header__style-5 .actova-btn-secondary:hover {
background: var(--tp-theme-primary);
}
@media only screen and (max-width: 549px) {
.tp-header__style-5 {
padding: 30px 35px 30px 35px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-header__style-5 .tp-main__menu ul li > a {
font-size: 14px;
}
.esf .tp-testimonial-inner-3 {
padding-top: 110px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.esf .tp-testimonial-inner-3 {
padding-top: 80px;
}
}
/*----------------------------------------*/
/* Menu css
/*----------------------------------------*/
.tp-main__menu ul {
list-style: none;
}
.tp-main__menu ul li {
position: relative;
display: inline-block;
margin: 0 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-main__menu ul li {
margin: 0 20px;
}
}
.tp-main__menu ul li::before {
position: absolute;
width: 6px;
height: 6px;
top: 50%;
transform: translateY(-50%);
left: -18px;
content: "";
border-radius: 50%;
background: var(--tp-theme-primary);
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s 0s ease-out;
-moz-transition: all 0.3s 0s ease-out;
-ms-transition: all 0.3s 0s ease-out;
-o-transition: all 0.3s 0s ease-out;
transition: all 0.3s 0s ease-out;
}
.tp-main__menu ul li .tp-submenu {
position: absolute;
top: 100%;
left: -5px;
width: 250px;
z-index: 999;
padding: 30px 40px;
opacity: 0;
visibility: hidden;
transition: 0.4s;
transform: scaleY(0);
transform-origin: top center;
text-align: start;
background-color: var(--tp-common-white);
border-top: 2px solid transparent;
box-shadow: 0px 20px 40px rgba(37, 9, 62, 0.1);
}
.tp-main__menu ul li .tp-submenu > li {
margin: 0;
margin-bottom: 0px;
padding: 0;
margin-bottom: 10px;
display: block;
}
.tp-main__menu ul li .tp-submenu > li a {
color: var(--tp-common-black);
padding: 0;
}
.tp-main__menu ul li .tp-submenu > li::before {
display: none;
}
.tp-main__menu ul li:hover .tp-submenu {
opacity: 1;
visibility: visible;
transform: scaleY(1);
}
.tp-main__menu ul li:hover::before {
opacity: 1;
visibility: visible;
animation: tp-icon-bounce 0.8s ease-out infinite;
}
.tp-main__menu ul li > a {
position: relative;
font-size: 16px;
padding: 20px 0;
display: block;
transition: 0.3s;
color: var(--tp-common-white);
text-transform: capitalize;
}
.tp-main__menu ul li > a:hover {
color: var(--tp-theme-primary);
}
.tp-main__menu ul li > a:hover::before {
opacity: 1;
visibility: visible;
}
.tp-main__menu ul li .has-homemenu {
width: 1100px;
opacity: 0;
left: -250px;
visibility: hidden;
padding: 40px 35px 13px 30px;
}
.tp-main__menu ul li .has-homemenu .homemenu {
padding: 0px 10px;
position: relative;
margin-bottom: 20px;
}
.tp-main__menu ul li .tp-submenu li .tp-submenu {
left: 130%;
top: 0;
visibility: hidden;
opacity: 0;
}
.tp-main__menu ul li .tp-submenu li:hover > .tp-submenu {
left: 123%;
visibility: visible;
opacity: 1;
}
.tp-main__menu ul li .tp-submenu li:hover > a {
color: var(--tp-theme-primary);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.tp-main__menu ul li .has-homemenu {
left: -170px;
width: 950px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-main__menu ul li .has-homemenu {
left: -160px;
width: 850px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-main__menu ul li .has-homemenu {
left: -190px;
width: 900px;
}
}
.tp-main-menu-mobile {
margin-bottom: 30px;
}
.homemenu-title {
position: relative;
font-size: 13px;
margin-bottom: 0;
font-weight: 500;
display: inline-block;
color: var(--tp-common-black);
}
.homemenu-title:hover {
color: var(--tp-theme-primary);
}
.homemenu-thumb {
position: relative;
box-shadow: 0px 0px 45px rgba(54, 202, 49, 0.2);
transition: all 0.3s ease-in-out;
}
.homemenu-thumb img {
width: 100%;
}
.homemenu-thumb:hover {
transform: translateY(-5px);
}
.tp-main-menu-mobile .tp-submenu {
display: none;
}
.tp-main-menu-mobile .header-icon {
display: none;
}
.tp-main-menu-mobile ul {
position: static;
display: block;
box-shadow: none;
}
.tp-main-menu-mobile ul li {
list-style: none;
position: relative;
width: 100%;
padding: 0;
}
.tp-main-menu-mobile ul li:not(:last-child) a {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.tp-main-menu-mobile ul li .tp-submenu .homemenu {
padding: 0px 10px;
position: relative;
margin-bottom: 20px;
}
.tp-main-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn {
position: absolute;
right: 0;
top: 21%;
-webkit-transform: translateY(-2px);
-moz-transform: translateY(-2px);
-ms-transform: translateY(-2px);
-o-transform: translateY(-2px);
transform: translateY(-2px);
font-size: 18px;
color: #fff;
font-family: "Font Awesome 5 Pro";
transition: all 0.3s ease-in-out;
z-index: 1;
width: 25px;
height: 25px;
line-height: 22px;
text-align: center;
transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
background: none;
outline: none;
border: none;
}
.tp-main-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn i {
transition: all 0.3s ease-in-out;
margin-left: 2px;
}
.tp-main-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn.dropdown-opened i {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.tp-main-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn:hover {
background-color: none;
border-color: none;
color: none;
}
.tp-main-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn:hover i {
color: var(--tp-common-white);
}
.tp-main-menu-mobile ul li.has-dropdown > a.expanded {
color: var(--tp-theme-primary);
}
.tp-main-menu-mobile ul li.has-dropdown > a.expanded .dropdown-toggle-btn.dropdown-opened {
background-color: none;
border-color: none;
color: var(--tp-common-white);
}
.tp-main-menu-mobile ul li.has-dropdown > a.expanded .dropdown-toggle-btn.dropdown-opened i {
color: var(--tp-common-white);
}
.tp-main-menu-mobile ul li.has-dropdown:hover > a::after {
color: var(--tp-theme-green);
}
.tp-main-menu-mobile ul li:last-child a span {
border-bottom: 0;
}
.tp-main-menu-mobile ul li > a {
display: block;
font-size: 16px;
color: var(--tp-common-white);
position: relative;
padding: 10px 0;
padding-right: 20px;
}
.tp-main-menu-mobile ul li > a svg {
-webkit-transform: translateY(-2px);
-moz-transform: translateY(-2px);
-ms-transform: translateY(-2px);
-o-transform: translateY(-2px);
transform: translateY(-2px);
}
.tp-main-menu-mobile ul li > a > i {
display: inline-block;
width: 11%;
margin-right: 13px;
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
font-size: 21px;
line-height: 1;
}
.tp-main-menu-mobile ul li > a .menu-text {
font-size: 16px;
line-height: 11px;
border-bottom: 1px solid #EAEBED;
width: 82%;
display: inline-block;
padding: 19px 0 17px;
}
.tp-main-menu-mobile ul li img {
width: 100%;
}
.tp-main-menu-mobile ul li ul {
padding: 0;
}
.tp-main-menu-mobile ul li ul li {
padding: 0;
}
.tp-main-menu-mobile ul li ul li a {
margin-left: auto;
width: 93%;
padding: 10px 5%;
text-shadow: none !important;
visibility: visible;
padding-left: 0;
padding-right: 20px;
}
.tp-main-menu-mobile ul li ul li li a {
width: 88%;
padding: 10px 7%;
padding-left: 0;
padding-right: 20px;
}
.tp-main-menu-mobile ul li ul li li li a {
width: 83%;
padding: 10px 9%;
padding-left: 0;
padding-right: 20px;
}
.tp-main-menu-mobile ul li ul li li li li a {
width: 68%;
padding: 10px 11%;
padding-left: 0;
padding-right: 20px;
}
.tp-main-menu-mobile ul li:hover > a .dropdown-toggle-btn i {
color: var(--tp-theme-1);
}
.tp-main-menu-mobile ul li:hover .mega-menu {
visibility: visible;
opacity: 1;
top: 0;
}
.tp-main-menu-mobile ul li .mega-menu,
.tp-main-menu-mobile ul li .submenu {
position: static;
min-width: 100%;
padding: 0;
box-shadow: none;
visibility: visible;
opacity: 1;
display: none;
}
.tp-main-menu-mobile ul li .mega-menu li,
.tp-main-menu-mobile ul li .submenu li {
float: none;
display: block;
width: 100%;
padding: 0;
}
.tp-main-menu-mobile ul li .mega-menu li:hover a .dropdown-toggle-btn,
.tp-main-menu-mobile ul li .submenu li:hover a .dropdown-toggle-btn {
color: var(--tp-theme-1);
}
.tp-main-menu-mobile .tp-main-menu-content ul li:not(:last-child) .home-menu-title a {
border-bottom: none;
}
.tp-main-menu-mobile * ul,
.tp-main-menu-mobile * li {
transition: none !important;
}
.tp-onepage-menu li a span {
display: block;
}
@keyframes tp-icon-bounce {
0%, 100%, 20%, 50%, 80% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-o-transform: translateY(-10px);
transform: translateY(-10px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
.tp-header-stikcy {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 90;
}
.tp-header-stikcy.scrolled {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
background: #1b2f1b;
}
.tp-header-stikcy.scrolled.tp-header__border {
border-bottom: 1px solid transparent;
}
/*----------------------------------------*/
/* Offcanvas
/*----------------------------------------*/
.tp-offcanvas__area {
position: fixed;
left: auto;
right: 0;
top: 0;
width: 400px;
height: 100%;
-webkit-transform: translateX(calc(100% + 80px));
-moz-transform: translateX(calc(100% + 80px));
-ms-transform: translateX(calc(100% + 80px));
-o-transform: translateX(calc(100% + 80px));
transform: translateX(calc(100% + 80px));
background: #000 none repeat scroll 0 0;
transition: all 0.4s ease-in-out;
opacity: 0;
visibility: hidden;
z-index: 999;
overflow-y: scroll;
overscroll-behavior-y: contain;
scrollbar-width: none;
overflow: hidden;
}
@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) {
.tp-offcanvas__area {
right: 0;
left: auto;
-webkit-transform: translateX(calc(100% + 80px));
-moz-transform: translateX(calc(100% + 80px));
-ms-transform: translateX(calc(100% + 80px));
-o-transform: translateX(calc(100% + 80px));
transform: translateX(calc(100% + 80px));
}
}
.tp-offcanvas__area::-webkit-scrollbar {
display: none;
/* for Chrome, Safari, and Opera */
}
.tp-offcanvas__area.offcanvas-opened {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
visibility: visible;
opacity: 1;
}
@media (max-width: 575px) {
.tp-offcanvas__area {
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) {
.tp-offcanvas__top {
margin-bottom: 40px;
}
}
.tp-offcanvas__area {
overflow: hidden;
}
.tp-offcanvas__area::before {
position: absolute;
content: "";
height: 400px;
width: 400px;
border-radius: 400px;
background: rgb(51 159 0 / 93%);
filter: blur(160px);
display: inline-block;
position: absolute;
top: -40px;
left: -240px;
z-index: -1;
}
.tp-offcanvas__wrapper {
position: relative;
padding: 40px;
z-index: 1;
min-height: 100%;
}
@media (max-width: 575px) {
.tp-offcanvas__wrapper {
padding: 20px;
}
}
.tp-offcanvas__wrapper .tp-theme-toggle {
top: 21px;
left: 240px;
transform: rotate(-270deg);
}
@media (max-width: 575px) {
.tp-offcanvas__wrapper .tp-theme-toggle {
top: 4px;
left: 215px;
}
}
.tp-offcanvas__close {
position: absolute;
top: 35px;
right: 30px;
}
@media (max-width: 575px) {
.tp-offcanvas__close {
right: 20px;
top: 20px;
}
}
.tp-offcanvas__close-btn {
display: inline-block;
font-size: 16px;
height: 44px;
width: 44px;
line-height: 40px;
color: var(--tp-common-white);
background-color: #222;
border-radius: 50%;
}
.tp-offcanvas__close button {
outline: none;
border: none;
background-color: #222;
}
.tp-offcanvas__close-btn svg {
transition: all 0.3s ease-in-out;
}
.tp-offcanvas__close-btn:hover {
background-color: #333;
}
.tp-offcanvas__close-btn:hover svg {
transform: rotate(45deg);
}
.tp-offcanvas__close-btn svg {
-webkit-transform: translateY(-1px);
-moz-transform: translateY(-1px);
-ms-transform: translateY(-1px);
-o-transform: translateY(-1px);
transform: translateY(-1px);
}
.tp-offcanvas__inner h4 {
font-size: 24px;
color: var(--tp-common-white);
line-height: 1.3;
margin-bottom: 15px;
}
.tp-offcanvas__inner p {
font-size: 16px;
line-height: 22px;
color: var(--tp-common-white);
margin-bottom: 30px;
}
.tp-offcanvas__inner > img {
margin-bottom: 30px;
}
.tp-offcanvas__menu ul li {
list-style: none;
margin-bottom: 10px;
}
.tp-offcanvas__menu ul li:last-child {
margin-bottom: 0;
}
.tp-offcanvas__menu ul li a {
font-weight: 700;
font-size: 20px;
color: var(--tp-common-black);
}
.tp-offcanvas__menu ul li:hover > a {
color: var(--tp-theme-primary);
}
.tp-offcanvas__contact {
margin-bottom: 30px;
}
.tp-offcanvas__contact-content {
margin-bottom: 10px;
}
.tp-offcanvas__contact-content-icon i {
color: var(--tp-theme-primary);
margin-right: 10px;
}
.tp-offcanvas__contact-content-content a {
font-size: 16px;
color: var(--tp-common-white);
}
.tp-offcanvas__social {
margin-bottom: 22px;
padding-bottom: 40px;
}
.tp-offcanvas__social .icon {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: transparent;
color: var(--tp-common-white);
margin-right: 5px;
transition: all 0.3s ease-in-out;
}
.tp-offcanvas__social .icon.facebook {
background-color: #4661c5;
}
.tp-offcanvas__social .icon.twitter {
background-color: #4ccef9;
}
.tp-offcanvas__social .icon.youtube {
background-color: #ff0000;
}
.tp-offcanvas__social .icon.linkedin {
background-color: #0072b1;
}
.tp-offcanvas__social .icon:hover {
transform: translateY(-8px);
}
.tp-offcanvas__title {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px;
color: var(--tp-theme-primary);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
.tp-offcanvas__popup {
display: none;
}
}
.tp-offcanvas__popup p {
margin-bottom: 20px;
color: var(--tp-common-white);
}
.tp-offcanvas__popup-gallery {
margin-bottom: 30px;
}
.tp-offcanvas__popup-gallery a {
margin: 5px 3px;
display: inline-block;
}
.tp-offcanvas__popup-gallery a img {
height: 100px;
max-width: 100px;
object-fit: cover;
}
.tp-offcanvas__info-item {
margin-bottom: 38px;
}
.tp-offcanvas__info-item-title {
font-family: var(--tp-ff-space);
font-weight: 700;
font-size: 18px;
color: var(--tp-common-white);
margin-bottom: 12px;
}
.tp-offcanvas__info-item p {
font-size: 16px;
color: var(--tp-text-16);
margin-bottom: 0;
line-height: 22px;
}
.tp-offcanvas__info-item p a:hover {
color: var(--tp-theme-primary);
}
.tp-header__action button {
text-decoration: none;
outline: none;
border: none;
background: none;
}
/* Acova search start */
@keyframes fadeInMove {
0% {
opacity: 0;
transform: scale3d(0, 1, 1);
}
10% {
opacity: 1;
transform: scale3d(0.1, 1, 1);
}
100% {
opacity: 0.3;
transform: scale3d(1, 1, 1);
}
}
@keyframes fadeOutMove2 {
0% {
opacity: 0.8;
transform: scale3d(1, 1, 1);
}
100% {
opacity: 0.14;
transform: scale3d(0, 1, 1);
}
}
@keyframes fadeInAnim {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOutAnim {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.tp-search-form {
position: fixed;
width: 100%;
height: 500px;
background: var(--black-2);
left: 0;
top: -510px;
z-index: 1;
transition: all 0.5s;
padding: 70px 50px;
}
.tp-search-form-top {
gap: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.tp-search-form.showed {
top: 0;
}
.tp-search-form form {
width: 1060px;
margin: 0 auto;
margin-top: 200px;
max-width: 100%;
position: relative;
}
.tp-search-form .submit {
position: absolute;
right: 0;
background: transparent;
color: #fff;
border: none;
outline: 0;
top: 8px;
font-size: 20px;
}
.tp-search-form form:after {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: var(--white);
transform: scale3d(0, 1, 1);
transform-origin: left center;
}
.tp-search-form.showed form:after {
animation-name: fadeInMove;
animation-duration: 0.7s;
animation-delay: 0.5s;
animation-fill-mode: both;
visibility: visible;
}
.tp-search-form input {
width: 100%;
outline: none;
border: none;
background: transparent;
color: var(--white-2);
font-size: 24px;
padding-bottom: 15px;
}
.tp-search-form input::placeholder {
color: var(--white-2);
}
.tp-search-close {
color: var(--white);
cursor: pointer;
transition: all 0.3s;
}
.tp-search-close:hover {
transform: rotate(180deg);
}
.ovalay,
.tp-search-ovalay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 999;
display: block;
}
.tp-search-form {
z-index: 1000;
}
.tp-search-form.showed {
display: block;
}
.tp-search-form.hide form::after {
animation-name: fadeOutMove2;
animation-duration: 0.6s;
animation-fill-mode: both;
visibility: visible;
animation-delay: 0s;
}
.tp-search-form img,
.tp-search-form form {
opacity: 0;
transition: all 0.3s;
}
.tp-search-form.showed img,
.tp-search-form.showed form {
animation-name: fadeInAnim;
animation-duration: 0.6s;
animation-fill-mode: both;
visibility: visible;
animation-delay: 0.4s;
}
.tp-search-form.hide img,
.tp-search-form.hide form {
animation-name: fadeOutAnim;
animation-duration: 0.6s;
animation-fill-mode: both;
visibility: visible;
animation-delay: 0s;
}
.tp-search-form-top img {
max-width: 160px;
}
@media (max-width: 1199px) {
.tp-search-form {
height: 440px;
padding: 50px 30px;
}
}
@media (max-width: 991px) {
.tp-search-form {
height: 400px;
padding: 30px 20px;
}
.tp-search-form input {
font-size: 20px;
}
}
@media (max-width: 767px) {
.tp-search-form {
height: 320px;
padding: 30px 15px;
}
.tp-search-form form {
margin-top: 150px;
}
.tp-search-form input {
font-size: 18px;
}
.tp-search-form-top img {
max-width: 120px;
}
}
/* about page video */
.tp-about-full-image .content video {
width: 410px;
height: 100%;
border-radius: 100px;
}